一个基于React和Hugging Face API的现代化多语言翻译应用AI 翻译应用一个基于React和Huggi

AI 翻译应用

一个基于React和Hugging Face API的现代化多语言翻译应用，支持中文、英文和日语之间的相互翻译。

功能特点

✨ 现代化Google翻译风格界面
🔄 支持中文、英文和日语之间的相互翻译
🚀 实时翻译响应
📋 一键复制翻译结果
🔄 一键交换源语言和目标语言
📱 响应式设计，适配各种设备

技术栈

前端: React, Vite
后端: Express.js
API: Hugging Face Translation API
样式: 纯CSS, 无第三方UI库

预览

安装和使用

前提条件

Node.js >= 14
npm 或 yarn
Hugging Face API 密钥

项目地址

简翻译: AI翻译参考谷歌翻译Web大前端项目基于 React + express ，一个基于React和Hugging Face API的现代化多语言翻译应用，支持中文、英文和日语之间的相互翻译。

安装步骤

克隆仓库

git clone https://gitee.com/XXUZZWZ/simple-transtate-ai.git
cd simple-transtate-ai

安装依赖

npm install

创建环境变量文件创建一个 .env 文件在项目根目录：

VITE_HUGGINGFACE_API_KEY=你的Hugging Face API密钥

4. 启动服务器

npm run server

在另一个终端启动前端开发服务器

npm run dev

打开浏览器访问 http://localhost:5173

构建生产版本

npm run build

构建文件将被输出到 dist 目录。

项目结构

ai-react-translator/
├── public/           # 静态资源
├── src/              # 源代码
│   ├── assets/       # 静态资源
│   ├── App.jsx       # 主应用组件
│   ├── App.css       # 主应用样式
│   ├── index.css     # 全局样式
│   └── main.jsx      # 应用入口
├── server.js         # 后端服务器
├── .env              # 环境变量
└── package.json      # 项目配置

后端API

翻译服务API端点: POST /translate

请求体示例:

{
  "modelName": "en-zh",
  "text": "Hello world"
}

响应示例:

[
  {
    "translation_text": "你好，世界"
  }
]

支持的翻译语言对

中文 -> 英文
英文 -> 中文
中文 -> 日文
日文 -> 中文
英文 -> 日文
日文 -> 英文

贡献

欢迎提交问题和Pull Request。

许可证

MIT