文字翻译助手

文字翻译助手

项目概述

文字翻译助手是一款基于文本处理的全栈 Web 应用，集成图片文字识别（OCR）、多语言机器翻译和语音合成（TTS）能力。后端使用 Node.js + Express，前端为原生 HTML / JavaScript，AI 能力由腾讯云 SDK 提供。

本项目对应课程作业需求（详见 需求.md），实现用户注册登录、图片转文字、文本翻译、多音色语音播放，以及按用户隔离的翻译历史记录管理。

核心功能

1. 用户系统

• 注册 / 登录：账号密码注册与登录
• 会话管理：服务端使用 express-session 维护登录态（24 小时有效）
• 前端缓存：登录成功后将用户信息写入 localStorage，刷新页面可保持登录
• 个人数据隔离：翻译历史按 user_id 存储与查询

2. 图片文字识别（OCR）

• 本地上传：点击上传区域选择图片，单文件最大 50MB
• 通用印刷体识别：调用腾讯云 GeneralBasicOCR 接口
• 结果回填：识别结果可一键填入「文本翻译」输入框

3. 多语言翻译

• 支持语言：中文（zh）、英文（en）、韩语（ko）、法语（fr），源语言支持自动检测（auto）
• 历史记录：翻译成功后异步写入数据库，不阻塞接口响应
• 即时展示：翻译结果实时显示在结果区

4. 语音合成（TTS）

• 多音色：
  • 502001 — 智小柔（聊天女声）
  • 502004 — 智小满（营销女声）
  • 502007 — 智小虎（聊天童声）
• 播放策略：优先朗读翻译结果；若译文为空，则朗读原文
• 在线播放：后端返回 Base64 音频，前端通过 Audio 对象直接播放

5. 翻译历史

• 列表查看：按创建时间倒序展示原文与译文
• 删除记录：支持单条删除
• 自动刷新：翻译完成或删除后自动更新列表

技术栈

后端

类别	技术
运行环境	Node.js >= 20.x
Web 框架	Express 4.18.x
数据库	MySQL（mysql2 驱动）
会话	express-session
文件上传	Multer（内存存储）
跨域	cors
AI 服务	tencentcloud-sdk-nodejs-ocr / tmt / tts

前端

类别	技术
页面	原生 HTML5 + JavaScript（ES6+）
UI	Bootstrap 5.3.0
图标	Bootstrap Icons 1.11.3
HTTP	Axios 0.27.2（CDN 引入）
本地存储	localStorage

数据库设计

• 库名：translate_db
• 字符集：utf8mb4

users 用户表

字段	说明
id	主键，自增
username	用户名，唯一
password	密码
create_time	创建时间

record 翻译记录表

字段	说明
id	主键，自增
user_id	用户 ID，外键关联 users.id
original_text	原文
target_text	译文
create_time	创建时间

外键设置 ON DELETE CASCADE，删除用户时同步清理其翻译记录。

项目结构

hallo/
├── server.js           # Express 服务入口、MySQL 初始化、REST API
├── tencent.js          # 腾讯云 OCR / TMT / TTS SDK 封装
├── index.html          # 前端单页（登录、OCR、翻译、历史）
├── package.json        # 依赖与启动脚本
├── 安装文档.md         # 环境安装与运行步骤（简明版）
├── 项目说明.md         # 本文档
├── 需求.md             # 课程作业功能要求
├── 访问地址.md         # 腾讯云密钥与控制台链接
├── 测试音频.md         # TTS 测试相关说明
├── 演示材料/           # 演示用素材目录
└── node_modules/       # 依赖目录

架构说明

┌─────────────┐     HTTP (CORS)      ┌─────────────┐     SDK      ┌─────────────┐
│  index.html │  ─────────────────►  │  server.js  │  ─────────►  │  腾讯云 API  │
│  (浏览器)    │  localhost:3000/api  │  + tencent  │              │ OCR/TMT/TTS │
└─────────────┘                      └──────┬──────┘              └─────────────┘
                                            │
                                            ▼
                                     ┌─────────────┐
                                     │    MySQL    │
                                     │ translate_db│
                                     └─────────────┘

• 前端以本地文件或静态方式打开 index.html，通过 Axios 请求 http://localhost:3000/api
• 后端负责用户数据持久化，并代理调用腾讯云接口（密钥仅保存在服务端 tencent.js）
• 翻译历史接口通过请求参数 userId 区分用户

环境要求

• Node.js：>= 20.x
• MySQL：>= 5.7 或 8.0，本地服务需已启动
• 浏览器：支持 ES6 的现代浏览器（Chrome、Firefox、Edge 等）
• 网络：需能访问腾讯云 API 及前端 CDN 资源

配置说明

1. MySQL

在 server.js 中修改 MYSQL_CONFIG.password（约第 43 行）：

password: '你的MySQL密码', // ★★★ 替换为你的本地 MySQL 密码 ★★★

首次启动时会自动创建 translate_db 数据库及 users、record 两张表，无需手动执行 SQL。

2. 腾讯云

在 tencent.js 的 TENCENT_CONFIG 中配置（约第 12–17 行）：

SECRET_ID: "你的SecretId",
SECRET_KEY: "你的SecretKey",
REGION: "ap-guangzhou",  // OCR 地域

TTS 与 TMT 客户端分别使用 ap-beijing 地域，已在 tencent.js 内单独配置。

获取密钥：登录 腾讯云 API 密钥管理，创建或查看 SecretId / SecretKey。也可参考项目内 访问地址.md 中的控制台链接。

注意：请勿将真实密钥提交到公开仓库。

快速开始

详细步骤见 安装文档.md，简要流程如下：

# 1. 进入项目目录
cd hallo

# 2. 安装依赖
npm install

# 3. 启动后端（开发模式，文件变更自动重启）
npm run dev

# 或使用生产模式
npm start

服务启动后访问：http://localhost:3000

# 4. 打开前端
# 双击 index.html，或在浏览器中直接打开该文件

首次使用请先注册账号，登录后即可使用 OCR、翻译、TTS 与历史记录功能。

API 接口

统一响应格式：{ code: 200|500, msg?: string, data?: any }

用户

方法	路径	说明	主要参数
POST	/api/register	注册	username, password
POST	/api/login	登录	username, password
GET	/api/logout	登出	—

业务能力

方法	路径	说明	主要参数
POST	/api/ocr	图片识别	file（multipart 表单）
POST	/api/translate	文本翻译	text, source, target, userId
POST	/api/tts	语音合成	text, voiceType

历史记录

方法	路径	说明	主要参数
GET	/api/history	获取历史	userId（query）
POST	/api/deleteRecord	删除记录	id

数据流程

翻译流程

1. 用户输入文本，或通过 OCR 识别图片文字
2. 前端将文本及语言参数提交至 /api/translate
3. 后端调用腾讯云 TMT 完成翻译
4. 结果返回前端展示，同时异步写入 record 表
5. 用户可选择音色，调用 /api/tts 播放语音

用户认证流程

1. 用户注册或登录
2. 登录成功后服务端写入 Session，前端将用户信息缓存至 localStorage
3. 业务请求携带 userId 用于历史记录读写
4. 登出时销毁 Session 并清除本地缓存

安全与限制

项目	说明
密码存储	当前为明文存储，生产环境建议使用 bcrypt 等加密
SQL 注入	使用参数化查询
XSS	历史列表渲染前通过 escapeHtml 转义
上传限制	单文件最大 50MB，OCR 仅接受图片
接口鉴权	历史相关接口依赖前端传入 userId，未与 Session 强绑定

界面模块

• 登录 / 注册：Tab 切换，简洁表单
• 图片转文字：虚线上传区 + 识别结果文本框
• 文本翻译：语言选择、翻译结果、音色选择与语音播放
• 翻译历史：卡片列表，支持删除

常见问题

1. MySQL 连接失败：确认 MySQL 已启动，且 server.js 中账号密码正确
2. OCR / 翻译 / TTS 失败：检查 tencent.js 密钥是否有效，账户是否开通对应产品
3. 前端请求失败：确认后端已启动，且 index.html 中 axios.defaults.baseURL 为 http://localhost:3000/api
4. 页面样式异常：检查网络能否访问 jsDelivr CDN

相关文档

• 安装文档.md — 安装与运行
• 需求.md — 作业功能要求
• 访问地址.md — 腾讯云控制台与密钥参考

开源说明

本项目仅供学习交流使用。

致谢

• 腾讯云 AI 服务（OCR、TMT、TTS）
• Bootstrap、Express.js、MySQL

---

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-translate