为CasRel模型开发Web界面使用Python Flask构建简易演示平台如果你训练好了一个CasRel一种用于关系抽取的模型模型想把它展示给别人看或者自己快速测试效果一个Web界面无疑是最直观的方式。但你可能和我一样更擅长写模型和算法对前端开发有点发怵。别担心这篇文章就是为你准备的。我们将用Python的Flask框架从零开始搭建一个极其简单的Web演示平台。整个过程不涉及复杂的前端框架如Vue、React只用最基础的HTML和一点点JavaScript核心是打通从浏览器输入文本到后端模型处理再到前端展示结果的完整流程。代码会非常简洁重点突出核心逻辑方便你理解后根据自己的需求进行修改和扩展。我们的目标是用户在一个网页文本框里输入一段话比如“苹果公司由史蒂夫·乔布斯创立于加利福尼亚州”点击按钮网页就能以两种形式展示模型抽取出的关系三元组例如(苹果公司, 创始人, 史蒂夫·乔布斯)和(苹果公司, 创立于, 加利福尼亚州)一种是结构化的JSON另一种是更直观的可视化图表。1. 项目准备与环境搭建在开始写代码之前我们需要先把“舞台”搭好。这包括安装必要的Python库以及规划一下我们这个小项目的文件结构。首先确保你的Python环境建议3.7以上已经就绪。然后我们通过pip安装核心依赖。打开你的终端或命令行执行以下命令pip install flaskFlask是我们构建Web应用的核心。它非常轻量对于这种演示性的小项目再合适不过。为了简化前端样式我们会使用一个轻量级的CSS框架——Pico.css。它只需要一个链接无需本地安装就能让我们的页面看起来整洁美观。当然你也可以用其他框架或者自己写CSS。接下来我们来规划一下项目目录。在你的工作区创建一个新文件夹比如叫做casrel_web_demo然后在里面创建以下几个文件casrel_web_demo/ ├── app.py # Flask后端主程序 ├── model.py # 模拟或加载你的CasRel模型 ├── templates/ │ └── index.html # 前端主页面 └── static/ └── (可选存放CSS/JS文件)这个结构非常清晰app.py处理所有Web请求和逻辑model.py封装你的模型调用templates文件夹存放HTML页面static文件夹可以放一些静态资源。2. 核心后端用Flask处理请求与响应后端是整个应用的大脑它负责接收用户从网页发来的文本调用模型处理然后把结果返回给网页。我们一步步来构建它。2.1 创建Flask应用与主路由我们先从app.py开始。创建一个最简单的Flask应用并定义访问首页的路由。# app.py from flask import Flask, render_template, request, jsonify import json # 我们稍后会创建这个模块 from model import predict_relations app Flask(__name__) app.route(/) def index(): 渲染主页面 return render_template(index.html) if __name__ __main__: # debugTrue 便于开发时热重载和查看错误信息生产环境应关闭 app.run(debugTrue, port5000)这段代码做了两件事创建了一个Flask应用实例app。定义了一个路由/。当用户访问网站根目录比如http://localhost:5000/时Flask会执行index()函数这个函数返回templates/index.html文件的内容给浏览器。现在运行python app.py访问http://localhost:5000你会看到一个错误因为index.html文件还不存在。别急我们先把后端逻辑写完。2.2 设计API接口处理模型调用用户在前端输入文本并点击“抽取”按钮后前端需要通过一个API接口将文本发送给后端。我们通常使用POST请求来做这件事。我们在app.py中增加一个新的路由/api/extract# app.py (接上面的代码) app.route(/api/extract, methods[POST]) def extract_relations(): 接收文本调用模型返回关系三元组 # 1. 从前端请求中获取JSON格式的数据 data request.get_json() if not data or text not in data: return jsonify({error: 未提供有效文本}), 400 input_text data[text].strip() if not input_text: return jsonify({error: 输入文本不能为空}), 400 # 2. 调用模型进行预测 (这里是核心) try: # 调用 model.py 中的函数 triples predict_relations(input_text) except Exception as e: # 如果模型调用出错返回错误信息 return jsonify({error: f模型处理失败: {str(e)}}), 500 # 3. 将结果以JSON格式返回给前端 response { text: input_text, triples: triples, # triples 应该是一个列表每个元素是 (主体, 关系, 客体) message: 抽取成功 } return jsonify(response)这个extract_relations函数是后端的关键request.get_json(): 获取前端以JSON格式发送过来的数据。进行简单的数据校验是否为空。调用model.predict_relations(input_text)函数这个函数我们下一步实现来获得关系三元组。最后将原始文本和抽取出的三元组打包成一个新的JSON对象通过jsonify()返回给前端。错误处理很重要我们添加了基本的校验和异常捕获这样前端能知道是输入有问题还是服务器内部出错。2.3 模拟或集成真实的CasRel模型现在来到model.py。这里是你需要根据实际情况修改的核心。为了教程的完整性和可运行我们先实现一个模拟的模型函数。# model.py def predict_relations(text): 模拟CasRel模型的关系抽取功能。 在实际应用中这里应该加载你的模型并进行前向推理。 参数: text (str): 输入的文本。 返回: list: 一个关系三元组列表格式为 [(subject, relation, object), ...] # 这是一个非常简单的规则模拟仅用于演示 # 请替换为你的真实模型调用代码。 triples [] text_lower text.lower() # 模拟规则1检测“由...创立”模式 if 由 in text and 创立 in text: # 这是一个非常粗糙的字符串匹配真实模型远比这复杂 parts text.split(由) if len(parts) 1: subject parts[0].strip() rest parts[1] if 创立 in rest: obj_part rest.split(创立)[0].strip() # 简单清理 obj_part obj_part.replace(。, ).replace(, ) if subject and obj_part: triples.append((subject, 创始人, obj_part)) # 模拟规则2检测“位于”或“在”模式 if 位于 in text: parts text.split(位于) if len(parts) 1: subject parts[0].strip().split( )[-1] # 取最后一个词作为主体 location parts[1].strip().replace(。, ) if subject and location: triples.append((subject, 位置, location)) elif 在 in text and 成立 in text: # 另一种模式 parts text.split(在) if len(parts) 1: subject parts[0].strip() location_part parts[1].split(成立)[0].strip() if subject and location_part: triples.append((subject, 成立地点, location_part)) # 如果模拟规则都没匹配到返回一个示例三元组 if not triples: triples [(示例公司, 创始人, 示例人物), (示例公司, 位于, 示例城市)] return triples # --- 你的真实模型集成代码可能类似这样 --- # import torch # from your_casrel_model import CasRelModel, load_vocab # # model CasRelModel(...) # model.load_state_dict(torch.load(your_model.pth)) # model.eval() # # def predict_relations_real(text): # # 1. 文本预处理和编码 # # 2. 转换为模型输入的tensor # # 3. model.forward(...) # # 4. 解码模型输出得到三元组列表 # # 5. return triples重要提示predict_relations函数中的模拟逻辑必须替换成你加载和调用真实CasRel模型的代码。你需要导入你的模型类。加载训练好的模型权重.pth或.ckpt文件。实现文本到模型输入如token ids的转换。运行模型推理。将模型输出解码成(subject, relation, object)的列表。3. 前端界面简洁的输入与展示后端准备好了现在我们来构建用户能看到和交互的页面。我们使用Pico.css来快速获得一个干净的样式。3.1 构建基础HTML页面在templates/index.html文件中我们编写基础结构。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCasRel关系抽取演示平台/title !-- 引入 Pico.css 使其简洁美观 -- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/picocss/pico1/css/pico.min.css style body { padding: 20px; max-width: 1200px; margin: 0 auto; } .container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } media (max-width: 768px) { .container { grid-template-columns: 1fr; } } #resultJson, #resultViz { background-color: #f8f9fa; border-radius: 5px; padding: 15px; min-height: 200px; border: 1px solid #dee2e6; white-space: pre-wrap; /* 使JSON格式保持 */ word-wrap: break-word; } #loading { display: none; text-align: center; margin: 10px 0; } /style /head body header hgroup h1 CasRel关系抽取演示/h1 p输入一段文本体验关系三元组主体-关系-客体的自动抽取。/p /hgroup /header main section h21. 输入文本/h2 form idextractForm label forinputText 请输入待分析的文本例如苹果公司由史蒂夫·乔布斯创立于加利福尼亚州 /label textarea idinputText nametext rows5 placeholder在此处粘贴或输入文本... required/textarea button typesubmit idsubmitBtn开始抽取关系/button div idloading p⏳ 模型正在处理中请稍候.../p /div /form /section section h22. 抽取结果/h2 div classcontainer article h32.1 JSON格式输出/h3 p结构化的数据便于程序进一步处理。/p pre idresultJson等待输入文本并抽取.../pre /article article h32.2 可视化图表/h3 p直观的图形展示实体与关系。/p div idresultViz等待输入文本并抽取.../div /article /div /section /main !-- 引入绘图库在页面底部 -- script srchttps://unpkg.com/mermaid10/dist/mermaid.min.js/script script // 初始化Mermaid图表库 mermaid.initialize({ startOnLoad: false, theme: default }); /script !-- 引入我们自己的JavaScript逻辑 -- script src{{ url_for(static, filenamejs/main.js) }}/script /body /html这个页面包含一个标题和描述区域。一个表单里面有文本输入框和提交按钮。两个结果展示区域一个用于显示JSON一个用于显示可视化图表。引入了Pico.css和Mermaid.js库用于绘图。链接了一个我们即将创建的JavaScript文件main.js。3.2 使用JavaScript实现前后端交互前端静态页面需要动态逻辑来处理用户点击、发送请求、接收响应和更新页面。我们在static/js/目录下创建main.js文件。// static/js/main.js document.addEventListener(DOMContentLoaded, function() { const form document.getElementById(extractForm); const inputText document.getElementById(inputText); const submitBtn document.getElementById(submitBtn); const loadingDiv document.getElementById(loading); const resultJson document.getElementById(resultJson); const resultViz document.getElementById(resultViz); form.addEventListener(submit, async function(event) { event.preventDefault(); // 阻止表单默认提交行为 const text inputText.value.trim(); if (!text) { alert(请输入文本内容); return; } // 显示加载状态禁用按钮 loadingDiv.style.display block; submitBtn.disabled true; resultJson.textContent 处理中...; resultViz.innerHTML 处理中...; try { // 发送POST请求到后端API const response await fetch(/api/extract, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ text: text }) }); const data await response.json(); // 隐藏加载状态启用按钮 loadingDiv.style.display none; submitBtn.disabled false; if (!response.ok) { // 如果HTTP状态码不是2xx抛出错误 throw new Error(data.error || 请求失败: ${response.status}); } // 1. 更新JSON展示区域 resultJson.textContent JSON.stringify(data, null, 2); // 缩进2个空格美化JSON // 2. 更新可视化图表区域 updateVisualization(data.triples, data.text); } catch (error) { // 隐藏加载状态启用按钮 loadingDiv.style.display none; submitBtn.disabled false; console.error(抽取失败:, error); resultJson.textContent 错误: ${error.message}; resultViz.innerHTML p stylecolor: red;错误: ${error.message}/p; } }); /** * 使用Mermaid生成关系图 * param {Array} triples - 关系三元组数组格式如 [[主体,关系,客体], ...] * param {String} originalText - 原始文本可作为图表标题 */ function updateVisualization(triples, originalText) { if (!triples || triples.length 0) { resultViz.innerHTML p未从文本中抽取到明确的关系三元组。/p; return; } // 构建Mermaid流程图语法 let mermaidCode graph TD\n; mermaidCode T[“${originalText.substring(0, 50)}${originalText.length 50 ? ... : }”] --|输入文本| Start\n; // 为每个三元组添加节点和边 // 使用Set记录已添加的节点避免重复 const nodes new Set(); triples.forEach((triple, index) { const [subj, rel, obj] triple; const subjId S${index}; const objId O${index}; // 添加节点如果尚未添加 if (!nodes.has(subj)) { // Mermaid中[“内容”] 表示一个矩形节点 mermaidCode ${subjId}[“${subj}”]\n; nodes.add(subj); } if (!nodes.has(obj)) { mermaidCode ${objId}[“${obj}”]\n; nodes.add(obj); } // 添加关系边 mermaidCode ${subjId} --|${rel}| ${objId}\n; }); // 将图表代码插入到一个新的div中并让Mermaid渲染 const vizContainer document.getElementById(resultViz); vizContainer.innerHTML div classmermaid${mermaidCode}/div; // 调用Mermaid重新解析并渲染图表 mermaid.init(undefined, document.querySelectorAll(#resultViz .mermaid)); } });这段JavaScript代码是前端的“灵魂”它监听了表单的提交事件。当用户点击按钮时它会获取文本框的内容并将其以JSON格式通过fetchAPI发送到我们之前定义的/api/extract后端接口。在等待响应时它会显示一个加载提示并禁用按钮防止重复提交。收到响应后它会将JSON结果格式化并显示在#resultJson区域。同时它调用updateVisualization函数将三元组数据转换成Mermaid图表语法并渲染出可视化的关系图。4. 运行与测试你的演示平台所有代码都写好了现在让我们把它跑起来看看效果。启动后端服务在项目根目录casrel_web_demo下打开终端运行python app.py你应该会看到类似* Running on http://127.0.0.1:5000的输出。访问网页打开你的浏览器输入地址http://localhost:5000。进行测试在文本框中输入一段话例如“特斯拉的CEO是埃隆·马斯克公司总部设在德克萨斯州。”注意我们的模拟模型规则可能匹配不上会返回示例数据。你需要集成真实模型才能得到正确结果。点击“开始抽取关系”按钮。观察页面按钮会暂时禁用并显示“处理中...”。稍等片刻如果是模拟模型会很快下方两个区域会更新。JSON格式输出区域会显示后端返回的原始数据。可视化图表区域会展示一个简单的流程图用箭头连接主体和客体箭头上标注着关系。如果一切顺利恭喜你一个最简版的CasRel模型Web演示平台就搭建成功了。你可以尝试输入不同的句子看看模拟逻辑的匹配情况。当然最关键的一步是将model.py中的模拟函数替换成你真实的模型推理代码。5. 总结与后续改进建议跟着走完这一趟你应该已经掌握了用Flask为AI模型快速搭建Web演示界面的核心流程设计路由接收请求、调用模型处理、返回JSON数据以及用简单的HTML/JavaScript构建一个能发送请求和展示结果的页面。这个 demo 虽然简陋但五脏俱全是一个非常好的起点。当你把真实的CasRel模型集成进去后它就能发挥实际作用了。如果你想让这个平台变得更实用、更美观可以考虑从以下几个方面入手功能增强现在的输入是一次性的。你可以增加一个“历史记录”区域保存用户之前的输入和结果。或者允许用户上传一个文本文件进行批量处理这对于测试大量数据非常有用。另外可以为JSON结果添加一个“复制到剪贴板”的按钮方便用户取用数据。交互与可视化优化Mermaid图表比较简单对于复杂的关系网络可能不够清晰。你可以引入更专业的图可视化库比如vis-network或Cytoscape.js它们能提供更强大的布局和交互功能如拖拽、缩放、高亮。在前端添加一些参数输入框也是个好主意比如让用户可以调整模型推理的置信度阈值过滤掉一些低置信度的结果。部署与分享现在项目只能在你的本地电脑运行。如果你想分享给同事或上线展示可以考虑使用Docker将整个应用包括Python环境、模型文件容器化。然后你可以将容器部署到任何云服务器或云服务如Heroku, Railway, 国内的云厂商上。这样任何人通过一个网址就能访问你的演示了。整个开发过程最核心的其实是前后端数据格式的约定我们用的是简单的JSON和模型接口的封装。只要这两点通了前端界面完全可以按你的喜好做得更复杂、更漂亮。希望这个简单的教程能帮你跨出模型展示的第一步让你训练好的模型不再只是躺在笔记本里的几行代码。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
为CasRel模型开发Web界面：使用Python Flask构建简易演示平台
为CasRel模型开发Web界面使用Python Flask构建简易演示平台如果你训练好了一个CasRel一种用于关系抽取的模型模型想把它展示给别人看或者自己快速测试效果一个Web界面无疑是最直观的方式。但你可能和我一样更擅长写模型和算法对前端开发有点发怵。别担心这篇文章就是为你准备的。我们将用Python的Flask框架从零开始搭建一个极其简单的Web演示平台。整个过程不涉及复杂的前端框架如Vue、React只用最基础的HTML和一点点JavaScript核心是打通从浏览器输入文本到后端模型处理再到前端展示结果的完整流程。代码会非常简洁重点突出核心逻辑方便你理解后根据自己的需求进行修改和扩展。我们的目标是用户在一个网页文本框里输入一段话比如“苹果公司由史蒂夫·乔布斯创立于加利福尼亚州”点击按钮网页就能以两种形式展示模型抽取出的关系三元组例如(苹果公司, 创始人, 史蒂夫·乔布斯)和(苹果公司, 创立于, 加利福尼亚州)一种是结构化的JSON另一种是更直观的可视化图表。1. 项目准备与环境搭建在开始写代码之前我们需要先把“舞台”搭好。这包括安装必要的Python库以及规划一下我们这个小项目的文件结构。首先确保你的Python环境建议3.7以上已经就绪。然后我们通过pip安装核心依赖。打开你的终端或命令行执行以下命令pip install flaskFlask是我们构建Web应用的核心。它非常轻量对于这种演示性的小项目再合适不过。为了简化前端样式我们会使用一个轻量级的CSS框架——Pico.css。它只需要一个链接无需本地安装就能让我们的页面看起来整洁美观。当然你也可以用其他框架或者自己写CSS。接下来我们来规划一下项目目录。在你的工作区创建一个新文件夹比如叫做casrel_web_demo然后在里面创建以下几个文件casrel_web_demo/ ├── app.py # Flask后端主程序 ├── model.py # 模拟或加载你的CasRel模型 ├── templates/ │ └── index.html # 前端主页面 └── static/ └── (可选存放CSS/JS文件)这个结构非常清晰app.py处理所有Web请求和逻辑model.py封装你的模型调用templates文件夹存放HTML页面static文件夹可以放一些静态资源。2. 核心后端用Flask处理请求与响应后端是整个应用的大脑它负责接收用户从网页发来的文本调用模型处理然后把结果返回给网页。我们一步步来构建它。2.1 创建Flask应用与主路由我们先从app.py开始。创建一个最简单的Flask应用并定义访问首页的路由。# app.py from flask import Flask, render_template, request, jsonify import json # 我们稍后会创建这个模块 from model import predict_relations app Flask(__name__) app.route(/) def index(): 渲染主页面 return render_template(index.html) if __name__ __main__: # debugTrue 便于开发时热重载和查看错误信息生产环境应关闭 app.run(debugTrue, port5000)这段代码做了两件事创建了一个Flask应用实例app。定义了一个路由/。当用户访问网站根目录比如http://localhost:5000/时Flask会执行index()函数这个函数返回templates/index.html文件的内容给浏览器。现在运行python app.py访问http://localhost:5000你会看到一个错误因为index.html文件还不存在。别急我们先把后端逻辑写完。2.2 设计API接口处理模型调用用户在前端输入文本并点击“抽取”按钮后前端需要通过一个API接口将文本发送给后端。我们通常使用POST请求来做这件事。我们在app.py中增加一个新的路由/api/extract# app.py (接上面的代码) app.route(/api/extract, methods[POST]) def extract_relations(): 接收文本调用模型返回关系三元组 # 1. 从前端请求中获取JSON格式的数据 data request.get_json() if not data or text not in data: return jsonify({error: 未提供有效文本}), 400 input_text data[text].strip() if not input_text: return jsonify({error: 输入文本不能为空}), 400 # 2. 调用模型进行预测 (这里是核心) try: # 调用 model.py 中的函数 triples predict_relations(input_text) except Exception as e: # 如果模型调用出错返回错误信息 return jsonify({error: f模型处理失败: {str(e)}}), 500 # 3. 将结果以JSON格式返回给前端 response { text: input_text, triples: triples, # triples 应该是一个列表每个元素是 (主体, 关系, 客体) message: 抽取成功 } return jsonify(response)这个extract_relations函数是后端的关键request.get_json(): 获取前端以JSON格式发送过来的数据。进行简单的数据校验是否为空。调用model.predict_relations(input_text)函数这个函数我们下一步实现来获得关系三元组。最后将原始文本和抽取出的三元组打包成一个新的JSON对象通过jsonify()返回给前端。错误处理很重要我们添加了基本的校验和异常捕获这样前端能知道是输入有问题还是服务器内部出错。2.3 模拟或集成真实的CasRel模型现在来到model.py。这里是你需要根据实际情况修改的核心。为了教程的完整性和可运行我们先实现一个模拟的模型函数。# model.py def predict_relations(text): 模拟CasRel模型的关系抽取功能。 在实际应用中这里应该加载你的模型并进行前向推理。 参数: text (str): 输入的文本。 返回: list: 一个关系三元组列表格式为 [(subject, relation, object), ...] # 这是一个非常简单的规则模拟仅用于演示 # 请替换为你的真实模型调用代码。 triples [] text_lower text.lower() # 模拟规则1检测“由...创立”模式 if 由 in text and 创立 in text: # 这是一个非常粗糙的字符串匹配真实模型远比这复杂 parts text.split(由) if len(parts) 1: subject parts[0].strip() rest parts[1] if 创立 in rest: obj_part rest.split(创立)[0].strip() # 简单清理 obj_part obj_part.replace(。, ).replace(, ) if subject and obj_part: triples.append((subject, 创始人, obj_part)) # 模拟规则2检测“位于”或“在”模式 if 位于 in text: parts text.split(位于) if len(parts) 1: subject parts[0].strip().split( )[-1] # 取最后一个词作为主体 location parts[1].strip().replace(。, ) if subject and location: triples.append((subject, 位置, location)) elif 在 in text and 成立 in text: # 另一种模式 parts text.split(在) if len(parts) 1: subject parts[0].strip() location_part parts[1].split(成立)[0].strip() if subject and location_part: triples.append((subject, 成立地点, location_part)) # 如果模拟规则都没匹配到返回一个示例三元组 if not triples: triples [(示例公司, 创始人, 示例人物), (示例公司, 位于, 示例城市)] return triples # --- 你的真实模型集成代码可能类似这样 --- # import torch # from your_casrel_model import CasRelModel, load_vocab # # model CasRelModel(...) # model.load_state_dict(torch.load(your_model.pth)) # model.eval() # # def predict_relations_real(text): # # 1. 文本预处理和编码 # # 2. 转换为模型输入的tensor # # 3. model.forward(...) # # 4. 解码模型输出得到三元组列表 # # 5. return triples重要提示predict_relations函数中的模拟逻辑必须替换成你加载和调用真实CasRel模型的代码。你需要导入你的模型类。加载训练好的模型权重.pth或.ckpt文件。实现文本到模型输入如token ids的转换。运行模型推理。将模型输出解码成(subject, relation, object)的列表。3. 前端界面简洁的输入与展示后端准备好了现在我们来构建用户能看到和交互的页面。我们使用Pico.css来快速获得一个干净的样式。3.1 构建基础HTML页面在templates/index.html文件中我们编写基础结构。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCasRel关系抽取演示平台/title !-- 引入 Pico.css 使其简洁美观 -- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/picocss/pico1/css/pico.min.css style body { padding: 20px; max-width: 1200px; margin: 0 auto; } .container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px; } media (max-width: 768px) { .container { grid-template-columns: 1fr; } } #resultJson, #resultViz { background-color: #f8f9fa; border-radius: 5px; padding: 15px; min-height: 200px; border: 1px solid #dee2e6; white-space: pre-wrap; /* 使JSON格式保持 */ word-wrap: break-word; } #loading { display: none; text-align: center; margin: 10px 0; } /style /head body header hgroup h1 CasRel关系抽取演示/h1 p输入一段文本体验关系三元组主体-关系-客体的自动抽取。/p /hgroup /header main section h21. 输入文本/h2 form idextractForm label forinputText 请输入待分析的文本例如苹果公司由史蒂夫·乔布斯创立于加利福尼亚州 /label textarea idinputText nametext rows5 placeholder在此处粘贴或输入文本... required/textarea button typesubmit idsubmitBtn开始抽取关系/button div idloading p⏳ 模型正在处理中请稍候.../p /div /form /section section h22. 抽取结果/h2 div classcontainer article h32.1 JSON格式输出/h3 p结构化的数据便于程序进一步处理。/p pre idresultJson等待输入文本并抽取.../pre /article article h32.2 可视化图表/h3 p直观的图形展示实体与关系。/p div idresultViz等待输入文本并抽取.../div /article /div /section /main !-- 引入绘图库在页面底部 -- script srchttps://unpkg.com/mermaid10/dist/mermaid.min.js/script script // 初始化Mermaid图表库 mermaid.initialize({ startOnLoad: false, theme: default }); /script !-- 引入我们自己的JavaScript逻辑 -- script src{{ url_for(static, filenamejs/main.js) }}/script /body /html这个页面包含一个标题和描述区域。一个表单里面有文本输入框和提交按钮。两个结果展示区域一个用于显示JSON一个用于显示可视化图表。引入了Pico.css和Mermaid.js库用于绘图。链接了一个我们即将创建的JavaScript文件main.js。3.2 使用JavaScript实现前后端交互前端静态页面需要动态逻辑来处理用户点击、发送请求、接收响应和更新页面。我们在static/js/目录下创建main.js文件。// static/js/main.js document.addEventListener(DOMContentLoaded, function() { const form document.getElementById(extractForm); const inputText document.getElementById(inputText); const submitBtn document.getElementById(submitBtn); const loadingDiv document.getElementById(loading); const resultJson document.getElementById(resultJson); const resultViz document.getElementById(resultViz); form.addEventListener(submit, async function(event) { event.preventDefault(); // 阻止表单默认提交行为 const text inputText.value.trim(); if (!text) { alert(请输入文本内容); return; } // 显示加载状态禁用按钮 loadingDiv.style.display block; submitBtn.disabled true; resultJson.textContent 处理中...; resultViz.innerHTML 处理中...; try { // 发送POST请求到后端API const response await fetch(/api/extract, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ text: text }) }); const data await response.json(); // 隐藏加载状态启用按钮 loadingDiv.style.display none; submitBtn.disabled false; if (!response.ok) { // 如果HTTP状态码不是2xx抛出错误 throw new Error(data.error || 请求失败: ${response.status}); } // 1. 更新JSON展示区域 resultJson.textContent JSON.stringify(data, null, 2); // 缩进2个空格美化JSON // 2. 更新可视化图表区域 updateVisualization(data.triples, data.text); } catch (error) { // 隐藏加载状态启用按钮 loadingDiv.style.display none; submitBtn.disabled false; console.error(抽取失败:, error); resultJson.textContent 错误: ${error.message}; resultViz.innerHTML p stylecolor: red;错误: ${error.message}/p; } }); /** * 使用Mermaid生成关系图 * param {Array} triples - 关系三元组数组格式如 [[主体,关系,客体], ...] * param {String} originalText - 原始文本可作为图表标题 */ function updateVisualization(triples, originalText) { if (!triples || triples.length 0) { resultViz.innerHTML p未从文本中抽取到明确的关系三元组。/p; return; } // 构建Mermaid流程图语法 let mermaidCode graph TD\n; mermaidCode T[“${originalText.substring(0, 50)}${originalText.length 50 ? ... : }”] --|输入文本| Start\n; // 为每个三元组添加节点和边 // 使用Set记录已添加的节点避免重复 const nodes new Set(); triples.forEach((triple, index) { const [subj, rel, obj] triple; const subjId S${index}; const objId O${index}; // 添加节点如果尚未添加 if (!nodes.has(subj)) { // Mermaid中[“内容”] 表示一个矩形节点 mermaidCode ${subjId}[“${subj}”]\n; nodes.add(subj); } if (!nodes.has(obj)) { mermaidCode ${objId}[“${obj}”]\n; nodes.add(obj); } // 添加关系边 mermaidCode ${subjId} --|${rel}| ${objId}\n; }); // 将图表代码插入到一个新的div中并让Mermaid渲染 const vizContainer document.getElementById(resultViz); vizContainer.innerHTML div classmermaid${mermaidCode}/div; // 调用Mermaid重新解析并渲染图表 mermaid.init(undefined, document.querySelectorAll(#resultViz .mermaid)); } });这段JavaScript代码是前端的“灵魂”它监听了表单的提交事件。当用户点击按钮时它会获取文本框的内容并将其以JSON格式通过fetchAPI发送到我们之前定义的/api/extract后端接口。在等待响应时它会显示一个加载提示并禁用按钮防止重复提交。收到响应后它会将JSON结果格式化并显示在#resultJson区域。同时它调用updateVisualization函数将三元组数据转换成Mermaid图表语法并渲染出可视化的关系图。4. 运行与测试你的演示平台所有代码都写好了现在让我们把它跑起来看看效果。启动后端服务在项目根目录casrel_web_demo下打开终端运行python app.py你应该会看到类似* Running on http://127.0.0.1:5000的输出。访问网页打开你的浏览器输入地址http://localhost:5000。进行测试在文本框中输入一段话例如“特斯拉的CEO是埃隆·马斯克公司总部设在德克萨斯州。”注意我们的模拟模型规则可能匹配不上会返回示例数据。你需要集成真实模型才能得到正确结果。点击“开始抽取关系”按钮。观察页面按钮会暂时禁用并显示“处理中...”。稍等片刻如果是模拟模型会很快下方两个区域会更新。JSON格式输出区域会显示后端返回的原始数据。可视化图表区域会展示一个简单的流程图用箭头连接主体和客体箭头上标注着关系。如果一切顺利恭喜你一个最简版的CasRel模型Web演示平台就搭建成功了。你可以尝试输入不同的句子看看模拟逻辑的匹配情况。当然最关键的一步是将model.py中的模拟函数替换成你真实的模型推理代码。5. 总结与后续改进建议跟着走完这一趟你应该已经掌握了用Flask为AI模型快速搭建Web演示界面的核心流程设计路由接收请求、调用模型处理、返回JSON数据以及用简单的HTML/JavaScript构建一个能发送请求和展示结果的页面。这个 demo 虽然简陋但五脏俱全是一个非常好的起点。当你把真实的CasRel模型集成进去后它就能发挥实际作用了。如果你想让这个平台变得更实用、更美观可以考虑从以下几个方面入手功能增强现在的输入是一次性的。你可以增加一个“历史记录”区域保存用户之前的输入和结果。或者允许用户上传一个文本文件进行批量处理这对于测试大量数据非常有用。另外可以为JSON结果添加一个“复制到剪贴板”的按钮方便用户取用数据。交互与可视化优化Mermaid图表比较简单对于复杂的关系网络可能不够清晰。你可以引入更专业的图可视化库比如vis-network或Cytoscape.js它们能提供更强大的布局和交互功能如拖拽、缩放、高亮。在前端添加一些参数输入框也是个好主意比如让用户可以调整模型推理的置信度阈值过滤掉一些低置信度的结果。部署与分享现在项目只能在你的本地电脑运行。如果你想分享给同事或上线展示可以考虑使用Docker将整个应用包括Python环境、模型文件容器化。然后你可以将容器部署到任何云服务器或云服务如Heroku, Railway, 国内的云厂商上。这样任何人通过一个网址就能访问你的演示了。整个开发过程最核心的其实是前后端数据格式的约定我们用的是简单的JSON和模型接口的封装。只要这两点通了前端界面完全可以按你的喜好做得更复杂、更漂亮。希望这个简单的教程能帮你跨出模型展示的第一步让你训练好的模型不再只是躺在笔记本里的几行代码。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
