gte-base-zh WebUI定制化：添加历史记录、批量上传、导出CSV功能开发

gte-base-zh WebUI定制化添加历史记录、批量上传、导出CSV功能开发1. 项目背景与需求分析gte-base-zh是阿里巴巴达摩院训练的中文文本嵌入模型基于BERT框架构建专门为中文文本处理优化。这个模型在信息检索、语义相似度计算、文本重排序等场景中表现出色。在实际使用过程中我们发现基础的WebUI界面功能相对简单缺少一些实用功能每次查询都需要重新输入文本无法保存历史记录只能单条文本处理无法批量上传和处理结果无法导出不方便后续分析和使用针对这些痛点我们决定对WebUI进行功能扩展添加历史记录管理、批量文本上传、CSV导出三大核心功能让这个强大的嵌入模型更加实用。2. 环境准备与模型部署2.1 模型部署步骤首先确保gte-base-zh模型已经正确部署。模型默认安装在以下路径/usr/local/bin/AI-ModelScope/gte-base-zh使用xinference启动模型服务xinference-local --host 0.0.0.0 --port 9997通过专门的启动脚本发布模型服务/usr/local/bin/launch_model_server.py2.2 验证服务状态检查模型服务是否正常启动cat /root/workspace/model_server.log看到类似下面的输出表示启动成功模型服务启动成功端口9997 嵌入模型加载完成准备接收请求3. WebUI功能扩展开发3.1 历史记录功能实现历史记录功能让用户可以查看之前的查询和结果避免重复工作。我们在前端添加历史记录面板后端使用浏览器localStorage存储数据。前端实现代码// 历史记录管理类 class QueryHistory { constructor() { this.historyKey gte_query_history; this.maxItems 50; // 最多保存50条记录 } // 添加新记录 addRecord(text1, text2, similarity) { const records this.getRecords(); const newRecord { id: Date.now(), timestamp: new Date().toLocaleString(), text1: text1, text2: text2, similarity: similarity }; records.unshift(newRecord); // 保持记录数量不超过最大值 if (records.length this.maxItems) { records.pop(); } localStorage.setItem(this.historyKey, JSON.stringify(records)); return newRecord; } // 获取所有记录 getRecords() { const history localStorage.getItem(this.historyKey); return history ? JSON.parse(history) : []; } // 清空历史记录 clearHistory() { localStorage.removeItem(this.historyKey); } }界面集成在WebUI中添加历史记录侧边栏显示最近的查询记录点击记录可以重新加载当时的文本和结果。3.2 批量上传功能开发批量上传功能允许用户一次处理多个文本对大幅提升工作效率。前端批量处理代码// 批量处理功能 function handleBatchUpload(file) { const reader new FileReader(); reader.onload function(e) { const content e.target.result; const lines content.split(\n).filter(line line.trim()); // 解析文本对支持多种格式 const textPairs parseTextPairs(lines); // 显示批量处理界面 showBatchProcessingUI(textPairs); }; reader.readAsText(file); } // 解析文本对支持CSV、TSV、每行一对等多种格式 function parseTextPairs(lines) { const pairs []; lines.forEach(line { if (line.includes(,) || line.includes(\t)) { // CSV或TSV格式 const separator line.includes(,) ? , : \t; const parts line.split(separator); if (parts.length 2) { pairs.push({ text1: parts[0].trim(), text2: parts[1].trim() }); } } else if (line.includes(||)) { // 使用||分隔的格式 const parts line.split(||); if (parts.length 2) { pairs.push({ text1: parts[0].trim(), text2: parts[1].trim() }); } } }); return pairs; }后端批量处理接口from flask import request, jsonify import threading from queue import Queue # 批量处理队列 batch_queue Queue() results {} def batch_processing_worker(): 批量处理工作线程 while True: task_id, text_pairs batch_queue.get() try: task_results [] for pair in text_pairs: # 调用gte-base-zh模型计算相似度 embedding1 get_embedding(pair[text1]) embedding2 get_embedding(pair[text2]) similarity calculate_similarity(embedding1, embedding2) task_results.append({ text1: pair[text1], text2: pair[text2], similarity: similarity }) results[task_id] { status: completed, results: task_results } except Exception as e: results[task_id] { status: error, message: str(e) } finally: batch_queue.task_done() # 启动工作线程 threading.Thread(targetbatch_processing_worker, daemonTrue).start() app.route(/api/batch-process, methods[POST]) def handle_batch_process(): 处理批量请求 data request.json text_pairs data.get(pairs, []) task_id str(uuid.uuid4()) # 添加到处理队列 batch_queue.put((task_id, text_pairs)) return jsonify({task_id: task_id, status: processing}) app.route(/api/batch-result/task_id) def get_batch_result(task_id): 获取批量处理结果 result results.get(task_id, {status: not_found}) return jsonify(result)3.3 CSV导出功能实现CSV导出功能让用户可以将处理结果保存为标准格式方便后续分析或导入其他工具。前端导出代码// CSV导出功能 function exportToCSV(results, filename similarity_results.csv) { let csvContent 文本1,文本2,相似度得分\n; results.forEach(result { // 处理文本中的特殊字符逗号、引号等 const text1 escapeCSVField(result.text1); const text2 escapeCSVField(result.text2); const similarity result.similarity; csvContent ${text1},${text2},${similarity}\n; }); // 创建下载链接 const blob new Blob([csvContent], { type: text/csv;charsetutf-8; }); const link document.createElement(a); const url URL.createObjectURL(blob); link.setAttribute(href, url); link.setAttribute(download, filename); link.style.visibility hidden; document.body.appendChild(link); link.click(); document.body.removeChild(link); } // 处理CSV字段中的特殊字符 function escapeCSVField(field) { if (field null || field undefined) { return ; } const stringField String(field); // 如果包含引号或逗号需要用引号包裹并转义引号 if (stringField.includes() || stringField.includes(,)) { return ${stringField.replace(//g, )}; } return stringField; }4. 功能集成与界面优化4.1 用户界面改进我们在原有WebUI基础上添加了三个主要功能区域历史记录面板右侧滑出式面板显示最近查询记录批量上传区域主界面顶部添加文件上传按钮和拖放区域导出按钮结果区域添加CSV导出按钮界面布局代码片段div classcontainer !-- 原有单条查询区域 -- div classinput-section textarea idtext1 placeholder输入第一段文本.../textarea textarea idtext2 placeholder输入第二段文本.../textarea button onclickcalculateSimilarity()计算相似度/button /div !-- 新增批量处理区域 -- div classbatch-section div classupload-area iduploadArea p拖放文件到这里或点击上传/p input typefile idbatchFile accept.txt,.csv,.tsv hidden p classhint支持格式每行一对文本用逗号、制表符或||分隔/p /div /div !-- 结果展示区域 -- div classresult-section div classresult-header h3相似度结果/h3 button idexportBtn onclickexportResults() disabled导出CSV/button /div div idresultContainer/div /div /div !-- 历史记录侧边栏 -- div classhistory-panel idhistoryPanel div classhistory-header h3查询历史/h3 button onclickclearHistory()清空/button /div div idhistoryList/div /div4.2 功能交互流程完整的用户交互流程如下用户可以选择单条查询或批量处理单条查询时结果自动保存到历史记录批量处理时用户上传文件系统后台处理处理完成后用户可以查看详细结果并导出CSV历史记录中可随时查看和重新加载之前的查询5. 实际应用效果5.1 功能演示单条查询场景输入两段文本点击计算按钮立即显示相似度得分0-1范围结果自动保存到历史记录批量处理场景上传包含多对文本的文件系统显示处理进度和预计完成时间处理完成后以表格形式展示所有结果支持按相似度排序和筛选数据导出场景点击导出按钮生成CSV文件文件包含所有文本对和相似度得分支持自定义文件名和导出范围5.2 性能优化针对批量处理的大量请求我们做了以下优化异步处理批量任务在后台处理不阻塞界面操作进度反馈实时显示处理进度和剩余时间结果缓存已处理的结果进行缓存避免重复计算内存管理大量数据处理时进行分批次处理避免内存溢出6. 总结与展望通过为gte-base-zh WebUI添加历史记录、批量上传和CSV导出功能我们显著提升了这个文本嵌入模型的实用性和工作效率。用户现在可以保存和复用之前的查询结果避免重复工作一次性处理大量文本对适合大数据量场景将结果导出为标准格式方便后续分析和报告生成这些功能扩展不仅提升了单次使用的体验更重要的是为gte-base-zh模型在真实业务场景中的应用提供了更好的支持。无论是学术研究、内容分析还是商业应用都能从这些改进中受益。未来我们还可以考虑进一步扩展功能比如添加API接口、支持更多文件格式、提供可视化分析工具等让这个强大的中文文本嵌入模型在更多场景中发挥价值。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。