Hunyuan-MT Pro快速上手：Chrome插件联动+网页划词即时翻译拓展方案

Hunyuan-MT Pro快速上手：Chrome插件联动+网页划词即时翻译拓展方案

1. 项目概述：全能多语言翻译终端

Hunyuan-MT Pro是一个基于腾讯混元（Hunyuan-MT-7B）开源模型构建的现代化翻译Web终端。它结合了Streamlit的便捷交互与混元模型强大的多语言理解能力，提供媲美专业翻译软件的流畅体验。

这个方案最大的亮点在于：通过Chrome插件与本地翻译服务的联动，实现网页划词即时翻译，让你在浏览任何网页时都能获得专业级的翻译体验。

核心优势对比：

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 protobuf

2.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.png

3.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 style="color: #333;">${data.translation}</div>`; }) .catch(error => { popup.innerHTML = '<div style="color: red;">翻译失败</div>'; }); }

4. 服务端API扩展

4.1 添加翻译API接口

在原有的Streamlit应用中添加API支持，修改app.py：

from 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_dtype=torch.bfloat16, device_map="auto" ) # 创建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_tensors="pt").to(model.device) outputs = model.generate(**inputs, max_new_tokens=100) translation = tokenizer.decode(outputs[0], skip_special_tokens=True) 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(target=api_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 安装与配置步骤

1. 启动翻译服务：

   # 在项目目录中运行 streamlit run app.py --server.port 6666

2. 加载Chrome插件：

   • 打开Chrome浏览器，访问chrome://extensions/
   • 开启"开发者模式"
   • 点击"加载已解压的扩展程序"，选择插件目录

3. 测试划词翻译：

   • 打开任意网页
   • 选择想要翻译的文本
   • 等待翻译弹窗出现

5.2 高级配置选项

在插件弹出窗口中添加设置选项：

<!-- popup.html --> <div class="container"> <h3>Hunyuan翻译设置</h3> <div class="setting-item"> <label>默认目标语言：</label> <select id="targetLang"> <option value="zh">中文</option> <option value="en">英语</option> <option value="ja">日语</option> <option value="ko">韩语</option> </select> </div> <div class="setting-item"> <label>翻译快捷键：</label> <input type="text" id="shortcut" placeholder="Ctrl+Shift+T"> </div> <button id="saveSettings">保存设置</button> </div>

6. 常见问题与解决方案

6.1 连接问题排查

如果插件无法连接到本地服务，检查以下方面：

1. 服务是否正常运行：

   # 检查端口占用 netstat -an | grep 6666

2. 防火墙设置：

   • 确保本地端口6666和6667没有被防火墙阻止
   • 在Windows防火墙中添加允许规则

3. 插件权限：

   • 确认插件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星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。