GTE中文嵌入模型保姆级教程：Web界面汉化、响应式适配与多用户会话隔离改造

GTE中文嵌入模型保姆级教程Web界面汉化、响应式适配与多用户会话隔离改造1. 前言为什么需要改造GTE中文嵌入模型如果你正在使用GTE中文文本嵌入模型可能会发现原生的Web界面存在几个不太方便的地方界面是英文的、在手机上显示效果不佳、多个用户同时使用时数据会互相干扰。文本表示是自然语言处理领域的核心基础技术在很多下游任务中都发挥着关键作用。随着深度学习的发展基于预训练语言模型的文本表示方法在效果上明显优于传统方法。GTE Chinese Large模型就是一个优秀的1024维中文文本嵌入模型。本文将手把手教你如何对这个模型进行三项实用改造将英文界面完整汉化为中文让界面适配手机和平板等不同设备实现多用户会话隔离避免数据混淆完成这些改造后你会得到一个更加友好、实用的文本嵌入工具。2. 环境准备与项目结构2.1 项目结构概览首先让我们了解一下项目的整体结构/root/nlp_gte_sentence-embedding_chinese-large/ ├── app.py # Web服务主程序需要修改 ├── requirements.txt # 依赖包 ├── configuration.json # 模型配置 ├── static/ # 静态资源目录需要创建 │ └── css/ # CSS样式文件 └── templates/ # 模板目录需要创建 └── index.html # 主页面模板2.2 安装必要依赖确保你已经安装了基础依赖我们还需要添加一些用于Web界面增强的库# 进入项目目录 cd /root/nlp_gte_sentence-embedding_chinese-large # 安装额外依赖如果已有这些包可以跳过 pip install flask flask-cors3. Web界面汉化改造3.1 修改主程序app.py首先我们需要修改app.py文件添加中文界面支持from flask import Flask, request, jsonify, render_template import numpy as np from sentence_transformers import SentenceTransformer import torch import re # 初始化模型和应用 model SentenceTransformer(/root/ai-models/iic/nlp_gte_sentence-embedding_chinese-large) app Flask(__name__) # 汉化界面路由 app.route(/) def home(): return render_template(index.html) # 文本相似度计算API保持原有功能 app.route(/api/predict, methods[POST]) def predict(): data request.json[data] if isinstance(data, list) and len(data) 2: source_text data[0] compare_texts data[1].split(\n) # 计算相似度 source_embedding model.encode([source_text]) compare_embeddings model.encode(compare_texts) similarities torch.nn.functional.cosine_similarity( torch.tensor(source_embedding), torch.tensor(compare_embeddings) ) results [{text: text, similarity: float(sim)} for text, sim in zip(compare_texts, similarities)] return jsonify({results: results}) return jsonify({error: Invalid input}) # 获取向量表示API保持原有功能 app.route(/api/embedding, methods[POST]) def get_embedding(): data request.json[data] text data[0] if isinstance(data, list) else data embedding model.encode([text]) return jsonify({embedding: embedding.tolist()}) if __name__ __main__: app.run(host0.0.0.0, port7860, debugTrue)3.2 创建中文界面模板在项目目录下创建templates文件夹然后创建index.html文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleGTE中文文本嵌入模型/title link relstylesheet href{{ url_for(static, filenamecss/style.css) }} /head body div classcontainer header h1GTE中文文本嵌入模型/h1 p基于深度学习的文本表示与相似度计算工具/p /header div classtabs button classtablink active onclickopenTab(tab1)文本相似度计算/button button classtablink onclickopenTab(tab2)文本向量表示/button /div div idtab1 classtabcontent styledisplay:block; h2文本相似度计算/h2 div classinput-group label forsourceText源句子/label textarea idsourceText placeholder请输入要比较的源文本.../textarea /div div classinput-group label forcompareTexts待比较句子每行一个/label textarea idcompareTexts placeholder请输入要比较的文本每行一个.../textarea /div button onclickcalculateSimilarity()计算相似度/button div classresults h3计算结果/h3 div idsimilarityResults/div /div /div div idtab2 classtabcontent h2文本向量表示/h2 div classinput-group label forembeddingText输入文本/label textarea idembeddingText placeholder请输入要获取向量的文本.../textarea /div button onclickgetEmbedding()获取向量/button div classresults h3向量结果1024维/h3 div idembeddingResults/div /div /div div classsession-info span会话ID: span idsessionId/span/span button onclicknewSession()新建会话/button /div /div script src{{ url_for(static, filenamejs/script.js) }}/script /body /html4. 响应式界面适配4.1 创建响应式CSS样式在static/css目录下创建style.css文件* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Microsoft YaHei, sans-serif; line-height: 1.6; color: #333; background-color: #f5f5f5; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .tabs { display: flex; margin-bottom: 20px; background: white; border-radius: 10px; overflow: hidden; } .tablink { flex: 1; padding: 15px; border: none; background: #e9ecef; cursor: pointer; font-size: 16px; transition: background 0.3s; } .tablink.active { background: #007bff; color: white; } .tabcontent { display: none; padding: 20px; background: white; border-radius: 10px; margin-bottom: 20px; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; resize: vertical; min-height: 100px; font-size: 14px; } button { padding: 12px 24px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s; } button:hover { background: #0056b3; } .results { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px; } .session-info { text-align: center; padding: 15px; background: white; border-radius: 10px; } /* 响应式设计 */ media (max-width: 768px) { .container { padding: 10px; } .tabs { flex-direction: column; } .tablink { margin-bottom: 2px; } textarea { min-height: 80px; } button { width: 100%; margin-bottom: 10px; } } media (max-width: 480px) { header h1 { font-size: 24px; } .tablink { padding: 12px; font-size: 14px; } .tabcontent { padding: 15px; } }5. 多用户会话隔离实现5.1 添加会话管理功能修改app.py添加会话支持from flask import Flask, request, jsonify, render_template, session import numpy as np from sentence_transformers import SentenceTransformer import torch import uuid from datetime import timedelta # 初始化 model SentenceTransformer(/root/ai-models/iic/nlp_gte_sentence-embedding_chinese-large) app Flask(__name__) app.secret_key your-secret-key-here # 生产环境请使用强密钥 app.permanent_session_lifetime timedelta(hours2) # 会话数据存储生产环境建议使用Redis user_sessions {} app.before_request def make_session_permanent(): session.permanent True if session_id not in session: session[session_id] str(uuid.uuid4()) if session[session_id] not in user_sessions: user_sessions[session[session_id]] { history: [], created_at: datetime.now() } app.route(/) def home(): return render_template(index.html, session_idsession[session_id]) app.route(/api/predict, methods[POST]) def predict(): data request.json[data] session_id session[session_id] if session_id not in user_sessions: return jsonify({error: Session expired}) # 原有计算逻辑... # 计算完成后保存到会话历史 if isinstance(data, list) and len(data) 2: # ... 计算代码 ... user_sessions[session_id][history].append({ type: similarity, source: data[0], compare_texts: data[1].split(\n), results: results, timestamp: datetime.now() }) return jsonify({results: results, session_id: session_id}) return jsonify({error: Invalid input}) app.route(/api/session/new, methods[POST]) def new_session(): old_session_id session[session_id] session[session_id] str(uuid.uuid4()) user_sessions[session[session_id]] { history: [], created_at: datetime.now() } # 清理旧会话可选 if old_session_id in user_sessions: del user_sessions[old_session_id] return jsonify({new_session_id: session[session_id]}) app.route(/api/session/history, methods[GET]) def get_history(): session_id session[session_id] if session_id in user_sessions: return jsonify(user_sessions[session_id][history]) return jsonify([])5.2 添加前端会话管理创建static/js/script.js文件// 会话管理 let currentSessionId ; function generateSessionId() { return session_ Math.random().toString(36).substr(2, 9); } function updateSessionDisplay() { document.getElementById(sessionId).textContent currentSessionId; } // 标签页切换 function openTab(tabName) { const tabcontent document.getElementsByClassName(tabcontent); for (let i 0; i tabcontent.length; i) { tabcontent[i].style.display none; } const tablinks document.getElementsByClassName(tablink); for (let i 0; i tablinks.length; i) { tablinks[i].classList.remove(active); } document.getElementById(tabName).style.display block; event.currentTarget.classList.add(active); } // 文本相似度计算 async function calculateSimilarity() { const sourceText document.getElementById(sourceText).value; const compareTexts document.getElementById(compareTexts).value; if (!sourceText || !compareTexts) { alert(请输入源文本和待比较文本); return; } try { const response await fetch(/api/predict, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ data: [sourceText, compareTexts] }) }); const result await response.json(); displaySimilarityResults(result.results); } catch (error) { console.error(Error:, error); alert(计算失败请重试); } } // 显示相似度结果 function displaySimilarityResults(results) { const resultsDiv document.getElementById(similarityResults); resultsDiv.innerHTML ; results.forEach((item, index) { const similarityPercent (item.similarity * 100).toFixed(2); const resultItem document.createElement(div); resultItem.className result-item; resultItem.innerHTML pstrong句子 ${index 1}:/strong ${item.text}/p p相似度: span stylecolor: ${getColorBySimilarity(item.similarity)}${similarityPercent}%/span/p progress value${item.similarity} max1/progress ; resultsDiv.appendChild(resultItem); }); } // 根据相似度获取颜色 function getColorBySimilarity(similarity) { if (similarity 0.8) return #28a745; if (similarity 0.5) return #ffc107; return #dc3545; } // 获取文本向量 async function getEmbedding() { const text document.getElementById(embeddingText).value; if (!text) { alert(请输入文本); return; } try { const response await fetch(/api/embedding, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ data: [text, , false, false, false, false] }) }); const result await response.json(); displayEmbeddingResults(result.embedding); } catch (error) { console.error(Error:, error); alert(获取向量失败请重试); } } // 显示向量结果 function displayEmbeddingResults(embedding) { const resultsDiv document.getElementById(embeddingResults); resultsDiv.innerHTML p向量维度: ${embedding[0].length}/p details summary查看详细向量点击展开/summary pre${JSON.stringify(embedding[0], null, 2)}/pre /details ; } // 新建会话 async function newSession() { try { const response await fetch(/api/session/new, { method: POST }); const result await response.json(); currentSessionId result.new_session_id; updateSessionDisplay(); alert(新建会话成功); } catch (error) { console.error(Error:, error); alert(新建会话失败); } } // 初始化 document.addEventListener(DOMContentLoaded, function() { currentSessionId generateSessionId(); updateSessionDisplay(); });6. 完整部署与测试6.1 最终项目结构完成所有改造后你的项目结构应该是这样的/root/nlp_gte_sentence-embedding_chinese-large/ ├── app.py ├── requirements.txt ├── configuration.json ├── static/ │ ├── css/ │ │ └── style.css │ └── js/ │ └── script.js ├── templates/ │ └── index.html └── USAGE.md6.2 启动服务使用以下命令启动改造后的服务cd /root/nlp_gte_sentence-embedding_chinese-large python app.py服务启动后在浏览器中访问http://0.0.0.0:7860即可看到全新的中文界面。6.3 功能测试建议界面测试在不同设备上访问检查响应式布局是否正常功能测试分别测试文本相似度计算和向量获取功能会话测试打开多个浏览器窗口确认会话隔离正常工作性能测试检查改造后是否影响原有计算性能7. 总结通过本教程我们成功对GTE中文文本嵌入模型进行了三项重要改造界面汉化将原本的英文界面完整转换为中文大大提升了中文用户的使用体验。现在所有按钮、标签、提示信息都是中文显示降低了使用门槛。响应式适配通过CSS媒体查询实现了真正的响应式设计现在界面在手机、平板、电脑等各种设备上都能正常显示和操作提升了移动端用户体验。多用户会话隔离实现了基于会话的数据隔离不同用户同时使用时数据不会互相干扰每个用户都有自己的计算历史记录。这些改造不仅提升了用户体验也为后续的功能扩展奠定了基础。你可以在此基础上进一步添加用户认证、历史记录查看、批量处理等高级功能。改造过程中我们保持了原有的API接口兼容性确保之前基于API调用的代码仍然可以正常工作。现在你既可以通过Web界面使用也可以通过编程接口集成到其他应用中。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。