Hunyuan-MT Pro快速上手Chrome插件联动网页划词即时翻译拓展方案1. 项目概述全能多语言翻译终端Hunyuan-MT Pro是一个基于腾讯混元Hunyuan-MT-7B开源模型构建的现代化翻译Web终端。它结合了Streamlit的便捷交互与混元模型强大的多语言理解能力提供媲美专业翻译软件的流畅体验。这个方案最大的亮点在于通过Chrome插件与本地翻译服务的联动实现网页划词即时翻译让你在浏览任何网页时都能获得专业级的翻译体验。核心优势对比功能特性传统网页翻译Hunyuan-MT Pro方案翻译质量基础机器翻译专业级AI翻译模型隐私安全数据上传云端完全本地化处理使用体验需要复制粘贴划词即时翻译语言支持常见语言33种语言深度优化2. 环境准备与快速部署2.1 系统要求与依赖安装首先确保你的系统满足以下要求Python 3.9或更高版本NVIDIA GPU建议8GB以上显存CUDA 11.7或更高版本安装必要的依赖包# 创建虚拟环境 python -m venv hunyuan-env source hunyuan-env/bin/activate # Linux/Mac # 或 hunyuan-env\Scripts\activate # Windows # 安装核心依赖 pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu117 pip install streamlit transformers accelerate sentencepiece protobuf2.2 一键启动翻译服务下载项目代码后只需一行命令即可启动服务streamlit run app.py --server.port 6666启动成功后在浏览器中打开http://localhost:6666就能看到翻译界面。首次运行需要下载模型文件这可能需要一些时间建议使用SSD硬盘加快加载速度。3. Chrome插件开发与配置3.1 插件结构设计创建Chrome插件的基本文件结构hunyuan-translator-extension/ ├── manifest.json # 插件配置文件 ├── background.js # 后台脚本 ├── content.js # 页面注入脚本 ├── popup.html # 弹出窗口界面 ├── popup.js # 弹出窗口逻辑 └── icons/ # 插件图标 ├── icon16.png ├── icon48.png └── icon128.png3.2 核心功能实现manifest.json 配置{ manifest_version: 3, name: Hunyuan划词翻译, version: 1.0, description: 基于Hunyuan-MT Pro的网页划词翻译插件, permissions: [activeTab, contextMenus, storage], background: { service_worker: background.js }, content_scripts: [{ matches: [all_urls], js: [content.js] }], action: { default_popup: popup.html } }划词翻译核心逻辑content.js// 监听文本选择事件 document.addEventListener(mouseup, function() { const selectedText window.getSelection().toString().trim(); if (selectedText.length 2) { // 至少选择2个字符 showTranslationPopup(selectedText); } }); // 显示翻译弹窗 function showTranslationPopup(text) { // 先移除已有的弹窗 const existingPopup document.getElementById(hunyuan-translator-popup); if (existingPopup) { existingPopup.remove(); } // 创建新弹窗 const popup document.createElement(div); popup.id hunyuan-translator-popup; popup.style.cssText position: absolute; background: white; border: 1px solid #ccc; padding: 10px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 10000; max-width: 300px; font-size: 14px; ; // 添加到页面 document.body.appendChild(popup); // 获取鼠标位置 const x event.clientX window.scrollX; const y event.clientY window.scrollY; popup.style.left x px; popup.style.top (y 20) px; // 显示加载中 popup.innerHTML div翻译中.../div; // 调用翻译API fetch(http://localhost:6666/translate, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ text: text, source_lang: auto, target_lang: zh // 默认翻译为中文 }) }) .then(response response.json()) .then(data { popup.innerHTML div stylecolor: #333;${data.translation}/div; }) .catch(error { popup.innerHTML div stylecolor: red;翻译失败/div; }); }4. 服务端API扩展4.1 添加翻译API接口在原有的Streamlit应用中添加API支持修改app.pyfrom flask import Flask, request, jsonify from transformers import AutoTokenizer, AutoModelForCausalLM import torch import json # 初始化模型在原有代码基础上添加 tokenizer AutoTokenizer.from_pretrained(Tencent/Hunyuan-MT-7B) model AutoModelForCausalLM.from_pretrained( Tencent/Hunyuan-MT-7B, torch_dtypetorch.bfloat16, device_mapauto ) # 创建Flask应用提供API api_app Flask(__name__) api_app.route(/translate, methods[POST]) def translate_api(): try: data request.json text data.get(text, ) target_lang data.get(target_lang, zh) # 构建翻译提示 prompt f将以下内容翻译成{target_lang}{text} # 生成翻译 inputs tokenizer(prompt, return_tensorspt).to(model.device) outputs model.generate(**inputs, max_new_tokens100) translation tokenizer.decode(outputs[0], skip_special_tokensTrue) return jsonify({ success: True, translation: translation, original: text }) except Exception as e: return jsonify({ success: False, error: str(e) }), 500 # 在Streamlit应用之外启动API服务 if __name__ __main__: import threading # 在新线程中启动API服务 api_thread threading.Thread(targetapi_app.run, kwargs{ host: localhost, port: 6667 }) api_thread.daemon True api_thread.start()4.2 配置跨域支持为了让Chrome插件能够访问本地API需要添加CORS支持from flask_cors import CORS # 允许Chrome插件跨域访问 CORS(api_app, origins[chrome-extension://*])5. 完整使用流程5.1 安装与配置步骤启动翻译服务# 在项目目录中运行 streamlit run app.py --server.port 6666加载Chrome插件打开Chrome浏览器访问chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择插件目录测试划词翻译打开任意网页选择想要翻译的文本等待翻译弹窗出现5.2 高级配置选项在插件弹出窗口中添加设置选项!-- popup.html -- div classcontainer h3Hunyuan翻译设置/h3 div classsetting-item label默认目标语言/label select idtargetLang option valuezh中文/option option valueen英语/option option valueja日语/option option valueko韩语/option /select /div div classsetting-item label翻译快捷键/label input typetext idshortcut placeholderCtrlShiftT /div button idsaveSettings保存设置/button /div6. 常见问题与解决方案6.1 连接问题排查如果插件无法连接到本地服务检查以下方面服务是否正常运行# 检查端口占用 netstat -an | grep 6666防火墙设置确保本地端口6666和6667没有被防火墙阻止在Windows防火墙中添加允许规则插件权限确认插件manifest中声明了必要的权限检查Chrome扩展页面没有报错信息6.2 性能优化建议翻译速度优化使用CUDA加速确保GPU正常工作调整max_new_tokens参数控制生成长度启用BF16混合精度减少显存占用用户体验优化添加翻译缓存避免重复请求实现批量翻译功能提供翻译历史记录7. 方案总结通过Hunyuan-MT Pro与Chrome插件的联动我们实现了一个完整的网页划词即时翻译解决方案。这个方案的优势在于技术优势基于顶尖的Hunyuan-MT-7B模型翻译质量远超普通工具完全本地化处理保障数据隐私和安全低延迟实时翻译体验流畅自然实用价值无缝集成到日常浏览体验中支持33种语言互译覆盖绝大多数需求可定制化的翻译参数和设置扩展可能性可进一步开发Firefox、Edge等浏览器支持添加术语库和自定义词典功能集成到更多办公和学习场景中这个方案不仅展示了Hunyuan-MT Pro的强大能力也体现了现代AI工具与实际工作流程结合的巨大潜力。无论是学术研究、商务办公还是日常学习都能从中获得显著的效率提升。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Hunyuan-MT Pro快速上手：Chrome插件联动+网页划词即时翻译拓展方案
Hunyuan-MT Pro快速上手Chrome插件联动网页划词即时翻译拓展方案1. 项目概述全能多语言翻译终端Hunyuan-MT Pro是一个基于腾讯混元Hunyuan-MT-7B开源模型构建的现代化翻译Web终端。它结合了Streamlit的便捷交互与混元模型强大的多语言理解能力提供媲美专业翻译软件的流畅体验。这个方案最大的亮点在于通过Chrome插件与本地翻译服务的联动实现网页划词即时翻译让你在浏览任何网页时都能获得专业级的翻译体验。核心优势对比功能特性传统网页翻译Hunyuan-MT Pro方案翻译质量基础机器翻译专业级AI翻译模型隐私安全数据上传云端完全本地化处理使用体验需要复制粘贴划词即时翻译语言支持常见语言33种语言深度优化2. 环境准备与快速部署2.1 系统要求与依赖安装首先确保你的系统满足以下要求Python 3.9或更高版本NVIDIA GPU建议8GB以上显存CUDA 11.7或更高版本安装必要的依赖包# 创建虚拟环境 python -m venv hunyuan-env source hunyuan-env/bin/activate # Linux/Mac # 或 hunyuan-env\Scripts\activate # Windows # 安装核心依赖 pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu117 pip install streamlit transformers accelerate sentencepiece protobuf2.2 一键启动翻译服务下载项目代码后只需一行命令即可启动服务streamlit run app.py --server.port 6666启动成功后在浏览器中打开http://localhost:6666就能看到翻译界面。首次运行需要下载模型文件这可能需要一些时间建议使用SSD硬盘加快加载速度。3. Chrome插件开发与配置3.1 插件结构设计创建Chrome插件的基本文件结构hunyuan-translator-extension/ ├── manifest.json # 插件配置文件 ├── background.js # 后台脚本 ├── content.js # 页面注入脚本 ├── popup.html # 弹出窗口界面 ├── popup.js # 弹出窗口逻辑 └── icons/ # 插件图标 ├── icon16.png ├── icon48.png └── icon128.png3.2 核心功能实现manifest.json 配置{ manifest_version: 3, name: Hunyuan划词翻译, version: 1.0, description: 基于Hunyuan-MT Pro的网页划词翻译插件, permissions: [activeTab, contextMenus, storage], background: { service_worker: background.js }, content_scripts: [{ matches: [all_urls], js: [content.js] }], action: { default_popup: popup.html } }划词翻译核心逻辑content.js// 监听文本选择事件 document.addEventListener(mouseup, function() { const selectedText window.getSelection().toString().trim(); if (selectedText.length 2) { // 至少选择2个字符 showTranslationPopup(selectedText); } }); // 显示翻译弹窗 function showTranslationPopup(text) { // 先移除已有的弹窗 const existingPopup document.getElementById(hunyuan-translator-popup); if (existingPopup) { existingPopup.remove(); } // 创建新弹窗 const popup document.createElement(div); popup.id hunyuan-translator-popup; popup.style.cssText position: absolute; background: white; border: 1px solid #ccc; padding: 10px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 10000; max-width: 300px; font-size: 14px; ; // 添加到页面 document.body.appendChild(popup); // 获取鼠标位置 const x event.clientX window.scrollX; const y event.clientY window.scrollY; popup.style.left x px; popup.style.top (y 20) px; // 显示加载中 popup.innerHTML div翻译中.../div; // 调用翻译API fetch(http://localhost:6666/translate, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ text: text, source_lang: auto, target_lang: zh // 默认翻译为中文 }) }) .then(response response.json()) .then(data { popup.innerHTML div stylecolor: #333;${data.translation}/div; }) .catch(error { popup.innerHTML div stylecolor: red;翻译失败/div; }); }4. 服务端API扩展4.1 添加翻译API接口在原有的Streamlit应用中添加API支持修改app.pyfrom flask import Flask, request, jsonify from transformers import AutoTokenizer, AutoModelForCausalLM import torch import json # 初始化模型在原有代码基础上添加 tokenizer AutoTokenizer.from_pretrained(Tencent/Hunyuan-MT-7B) model AutoModelForCausalLM.from_pretrained( Tencent/Hunyuan-MT-7B, torch_dtypetorch.bfloat16, device_mapauto ) # 创建Flask应用提供API api_app Flask(__name__) api_app.route(/translate, methods[POST]) def translate_api(): try: data request.json text data.get(text, ) target_lang data.get(target_lang, zh) # 构建翻译提示 prompt f将以下内容翻译成{target_lang}{text} # 生成翻译 inputs tokenizer(prompt, return_tensorspt).to(model.device) outputs model.generate(**inputs, max_new_tokens100) translation tokenizer.decode(outputs[0], skip_special_tokensTrue) return jsonify({ success: True, translation: translation, original: text }) except Exception as e: return jsonify({ success: False, error: str(e) }), 500 # 在Streamlit应用之外启动API服务 if __name__ __main__: import threading # 在新线程中启动API服务 api_thread threading.Thread(targetapi_app.run, kwargs{ host: localhost, port: 6667 }) api_thread.daemon True api_thread.start()4.2 配置跨域支持为了让Chrome插件能够访问本地API需要添加CORS支持from flask_cors import CORS # 允许Chrome插件跨域访问 CORS(api_app, origins[chrome-extension://*])5. 完整使用流程5.1 安装与配置步骤启动翻译服务# 在项目目录中运行 streamlit run app.py --server.port 6666加载Chrome插件打开Chrome浏览器访问chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择插件目录测试划词翻译打开任意网页选择想要翻译的文本等待翻译弹窗出现5.2 高级配置选项在插件弹出窗口中添加设置选项!-- popup.html -- div classcontainer h3Hunyuan翻译设置/h3 div classsetting-item label默认目标语言/label select idtargetLang option valuezh中文/option option valueen英语/option option valueja日语/option option valueko韩语/option /select /div div classsetting-item label翻译快捷键/label input typetext idshortcut placeholderCtrlShiftT /div button idsaveSettings保存设置/button /div6. 常见问题与解决方案6.1 连接问题排查如果插件无法连接到本地服务检查以下方面服务是否正常运行# 检查端口占用 netstat -an | grep 6666防火墙设置确保本地端口6666和6667没有被防火墙阻止在Windows防火墙中添加允许规则插件权限确认插件manifest中声明了必要的权限检查Chrome扩展页面没有报错信息6.2 性能优化建议翻译速度优化使用CUDA加速确保GPU正常工作调整max_new_tokens参数控制生成长度启用BF16混合精度减少显存占用用户体验优化添加翻译缓存避免重复请求实现批量翻译功能提供翻译历史记录7. 方案总结通过Hunyuan-MT Pro与Chrome插件的联动我们实现了一个完整的网页划词即时翻译解决方案。这个方案的优势在于技术优势基于顶尖的Hunyuan-MT-7B模型翻译质量远超普通工具完全本地化处理保障数据隐私和安全低延迟实时翻译体验流畅自然实用价值无缝集成到日常浏览体验中支持33种语言互译覆盖绝大多数需求可定制化的翻译参数和设置扩展可能性可进一步开发Firefox、Edge等浏览器支持添加术语库和自定义词典功能集成到更多办公和学习场景中这个方案不仅展示了Hunyuan-MT Pro的强大能力也体现了现代AI工具与实际工作流程结合的巨大潜力。无论是学术研究、商务办公还是日常学习都能从中获得显著的效率提升。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
