文字翻译助手-迪斯科星球

文字翻译助手

完整代码地址：https://www.aiyuanma.vip/posts/homework-translate

项目概述

文字翻译助手是一款基于文本处理的全栈 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. 进入项目目录cdhallo# 2. 安装依赖npminstall# 3. 启动后端（开发模式，文件变更自动重启）npmrun dev# 或使用生产模式npmstart

服务启动后访问：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`

数据流程

翻译流程

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

用户认证流程

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

安全与限制

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

界面模块

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

常见问题

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

开源说明

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

致谢

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

企业官网建设流程全解析