多语言翻译应用

一个基于Next.js的多语言实时翻译应用,支持法语、意大利语和西班牙语翻译,并提供多种翻译建议。

  • by kjwenger
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 kjwenger/multi-lingua-nextjs

使用说明

多语种翻译应用

github:

CI/CD发布(&C):

技术栈:

能力:

一个现代的Next.js应用程序,使用LibrePranslate提供实时翻译服务。该应用程序具有基于表格的界面,用户可以在其中输入英文文本,并接收法语、意大利语和西班牙语的翻译,以及多个翻译建议。

目录

特性

核心功能

  • 实时翻译:使用LibreTranslate API进行自动翻译
  • 多语言支持:翻译成法语、意大利语和西班牙语
  • 翻译建议:每种语言最多5个翻译选项
  • 可编辑结果:所有翻译字段都是可编辑的
  • 持久存储:用于存储翻译的SQLite数据库
  • 可排序表:按英文列对翻译进行排序
  • 现代用户界面:采用Tailwind CSS的简洁、响应式设计

用户管理和身份验证

  • 基于电子邮件的身份验证:使用一次性代码的无密码登录
  • 基于角色的访问控制:管理员和用户角色
  • 用户注册:通过电子邮件验证创建自助服务帐户
  • 会话管理:使用“记住我”选项可配置会话超时
  • 管理仪表盘:管理员用户管理界面
  • 活动日志:跟踪用户操作和系统事件
  • 安全会话:基于JWT的令牌,仅使用HTTP Cookie

先决条件

  • 已安装Node.js 18+
  • LibreTranslate在5000端口本地运行
    • 您可以使用Docker运行LibreTranslate: docker run -ti --rm -p 5000:5000 libretranslate/libretranslate

安装

选项1:Docker(推荐)

快速开始使用已发布的图像

使用预构建的Docker镜像运行多语言的最快方法:

# Download release configuration
curl -O https://raw.githubusercontent.com/kjwenger/NaturalStupidity/main/MultiLingua/Copilot.AI/docker-compose.release.yml

# Create and pre-populate LibreTranslate models volume
docker volume create lt-local
docker run -d --name temp-libretranslate -p 5000:5000 -v lt-local:/home/libretranslate/.local libretranslate/libretranslate:latest
# Wait for language models to download (check: docker logs -f temp-libretranslate)
docker stop temp-libretranslate && docker rm temp-libretranslate

# Start services
docker-compose -f docker-compose.release.yml up -d

# The app will be available at http://localhost:3456
# LibreTranslate admin will be available at http://localhost:5432

地方发展设置

对于开发或如果您想在本地构建:

# Clone the repository and navigate to the project
cd multi-lingua

# Create external volumes for persistence
docker volume create lt-local
docker volume create ml-data

# Start services (includes rebuild)
docker-compose up -d --build

# The app will be available at http://localhost:3456
# LibreTranslate will be available at http://localhost:5432

# 🔥 IMPORTANT: Watch logs for verification codes (dev mode)
docker-compose logs -f multi-lingua

# When you register, look for codes in the logs:
# 📧 [DEV MODE] Email not sent, logging to console:
# 123456  <-- Your verification code

Docker用户须知:

  • 验证码出现在Docker日志中(默认启用开发模式)
  • 使用 docker-compose logs -f multi-lingua 在注册/登录时查看代码
  • 看 DOCKER-ENV.md 用于生产电子邮件配置

使用Docker Compose启动这两个服务(本地构建)

docker组成-up-d


To stop the services:
```bash
docker-compose down

要在更改后重建应用程序,请执行以下操作:

docker-compose up --build

方案2:地方发展

  1. 导航到项目目录:

    cd multi-lingua
    
  2. 安装依赖项:

    npm install
    
  3. 启动LibreTranslate(翻译功能所需):

    # Basic LibreTranslate without persistence
    docker run -ti --rm -p 5000:5000 libretranslate/libretranslate
    
    # LibreTranslate with persistent dictionaries and models
    docker run -ti --rm -p 5000:5000 \
      -v lt-local:/home/libretranslate/.local \
      -v lt-db:/app/db \
      libretranslate/libretranslate
    
  4. 启动开发服务器:

    npm run dev
    
  5. 打开浏览器并访问 http://localhost:3456

  6. 首次设置:首次访问时,系统会提示您创建管理员帐户

    • 点击“注册”或导航至 /register
    • 输入您的电子邮件和全名
    • 检查您的电子邮件(或开发模式下的控制台)以获取验证码
    • 完成注册-您将作为第一个管理员用户登录

用法

为所有用户

  1. 登录:导航到 /login 并输入您的电子邮件以接收登录码
  2. 翻译:在主界面中查看和管理翻译

对于管理员用户

  1. 添加新翻译:单击“添加新翻译”按钮创建新行
  2. 输入英文文本:在第一列中键入任何英语单词或短语
  3. 自动翻译:该应用程序将自动翻译成法语、意大利语和西班牙语
  4. 查看建议:点击任何建议将其用作翻译
  5. 编辑翻译:手动编辑任何翻译字段
  6. 排序:单击英文列标题按字母顺序排序
  7. 删除:使用删除按钮删除不需要的翻译
  8. 用户管理:访问 /admin/users 管理用户、角色和权限
  9. 设置:配置翻译提供程序和系统设置
  10. 活动日志:查看用户活动和系统事件

用户角色

  • 管理用户:

    • 完全访问所有功能
    • 可以管理翻译
    • 可以访问设置、API文档和用户管理
    • 可以创建、编辑和删除用户
    • 可以配置系统设置
  • 常规用户:

    • 仅查看翻译
    • 有限工具栏(仅限“帮助”按钮)
    • 无法修改系统配置

API终点

身份验证API

  • POST /api/auth/register -使用验证码申请注册
  • POST /api/auth/verify-registration -验证代码并创建帐户
  • POST /api/auth/login -请求登录码
  • POST /api/auth/verify-login -验证代码并创建会话
  • POST /api/auth/logout -使当前会话无效
  • GET /api/auth/me -获取当前用户信息
  • POST /api/auth/refresh -刷新会话令牌

翻译API

  • GET /api/translations -获取所有翻译
  • POST /api/translations -添加新翻译
  • PUT /api/translations -更新现有翻译
  • DELETE /api/translations?id={id} -删除翻译
  • POST /api/translate -将文本翻译成所有语言

管理API(仅限管理员)

  • GET /api/admin/users -列出所有具有分页和筛选器的用户
  • POST /api/admin/users -创建新用户
  • PUT /api/admin/users/:id -更新用户信息
  • DELETE /api/admin/users/:id -删除用户(软删除)
  • GET /api/admin/activity-log -查看用户活动日志
  • GET /api/admin/config -获取系统配置
  • PUT /api/admin/config -更新系统配置
  • GET /api/admin/init -检查初始化状态
  • POST /api/admin/init -初始化第一个管理员帐户

数据库模式

该应用程序使用具有以下模式的SQLite:

翻译表

CREATE TABLE translations (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  english TEXT NOT NULL,
  german TEXT,
  french TEXT,
  italian TEXT,
  spanish TEXT,
  english_proposals TEXT,
  german_proposals TEXT,
  french_proposals TEXT,
  italian_proposals TEXT,
  spanish_proposals TEXT,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

用户管理表

-- Users
CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  email TEXT UNIQUE NOT NULL,
  full_name TEXT NOT NULL,
  role TEXT NOT NULL DEFAULT 'user' CHECK(role IN ('admin', 'user')),
  preferred_language TEXT DEFAULT 'en',
  is_active BOOLEAN DEFAULT 1,
  email_verified BOOLEAN DEFAULT 0,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  last_login DATETIME,
  created_by INTEGER
);

-- Sessions
CREATE TABLE sessions (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  token TEXT UNIQUE NOT NULL,
  device_info TEXT,
  ip_address TEXT,
  expires_at DATETIME NOT NULL,
  last_activity DATETIME DEFAULT CURRENT_TIMESTAMP,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- Authentication Codes
CREATE TABLE auth_codes (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER,
  email TEXT NOT NULL,
  code TEXT NOT NULL,
  code_type TEXT NOT NULL CHECK(code_type IN ('registration', 'login')),
  attempts INTEGER DEFAULT 0,
  max_attempts INTEGER DEFAULT 3,
  expires_at DATETIME NOT NULL,
  used BOOLEAN DEFAULT 0,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- System Configuration
CREATE TABLE system_config (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  config_key TEXT UNIQUE NOT NULL,
  config_value TEXT NOT NULL,
  description TEXT,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_by INTEGER
);

-- Activity Logs
CREATE TABLE user_activity_log (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER NOT NULL,
  action TEXT NOT NULL,
  details TEXT,
  ip_address TEXT,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

使用的技术

  • Next.js 15:带有App Router的React框架
  • TypeScript:类型安全的JavaScript
  • Tailwind CSS:实用程序优先的CSS框架
  • SQLite3:轻量级数据库
  • JWT:用于身份验证的JSON Web令牌
  • 诺德尔:发送电子邮件以获取验证码
  • 自由翻译:开源翻译API

为什么选择Next.js?

Next.js之所以被选为该项目的框架,是因为它具有混合渲染功能(SSR、SSG、ISR)、内置的API路由(无需单独的后端服务器)、用于零成本服务器端数据获取的React服务器组件,以及它在基于文件的路由和自动优化方面的强大开发经验。

有关Next.js的核心功能、生态系统以及与替代品和竞争对手的比较的详细分解,请参阅 NEXTJS.md.

配置

该应用程序已配置为连接到LibreTranslate。您可以使用环境变量自定义连接:

环境变量

核心配置

  • DEV_MODE:设置为 true 用于开发(将代码记录到控制台,而不是发送电子邮件)
  • NODE_ENV:设置为 production 用于生产建设
  • PORT:Next.js应用程序的端口(默认值:3456)

认证

  • JWT_SECRET:用于签名JWT令牌的密钥(必需,使用长随机字符串)
  • JWT_EXPIRY:令牌过期时间(默认:24小时)
  • APP_URL:电子邮件链接的应用程序URL(默认值:http://localhost:3456)

电子邮件(SMTP)

  • SMTP_HOST:SMTP服务器主机名
  • SMTP_PORT:SMTP服务器端口(默认值:587)
  • SMTP_SECURE:使用TLS(真/假)
  • SMTP_USER:SMTP用户名
  • SMTP_PASSWORD:SMTP密码

翻译

  • LIBRETRANSLATE_URL:自定义LibreTranslate服务器URL(默认:根据环境自动检测)

LibreTranslate连接

该应用程序会根据环境自动检测LibreTranslate URL:

  1. Docker Compose:用途 http://libretranslate:5000 (服务名称)
  2. 独立Docker:用途 http://host.docker.internal:5000 (连接到主机)
  3. 本地开发:用途 http://localhost:5000
  4. 自定义:设置 LIBRETRANSLATE_URL 环境变量

要手动更改LibreTranslate URL,请执行以下操作:

# For Docker
docker run -p 3456:3456 -e LIBRETRANSLATE_URL=http://your-server:5000 multi-lingua

# For local development
export LIBRETRANSLATE_URL=http://your-server:5000
npm run dev

发展

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

码头工人

构建Docker镜像

# Build the Docker image
docker build -t multi-lingua .

# Run with LibreTranslate on host machine (localhost:5000)
docker run -p 3456:3456 multi-lingua

# Run with custom LibreTranslate URL
docker run -p 3456:3456 -e LIBRETRANSLATE_URL=http://your-libretranslate-server:5000 multi-lingua

# Run with LibreTranslate also in Docker (basic)
docker run -d --name libretranslate -p 5000:5000 libretranslate/libretranslate
docker run -p 3456:3456 --link libretranslate:libretranslate -e LIBRETRANSLATE_URL=http://libretranslate:5000 multi-lingua

# Run with LibreTranslate in Docker (with persistent storage)
docker run -d --name libretranslate -p 5000:5000 \
  -v lt-local:/home/libretranslate/.local \
  -v lt-db:/app/db \
  libretranslate/libretranslate
docker run -p 3456:3456 --link libretranslate:libretranslate -e LIBRETRANSLATE_URL=http://libretranslate:5000 multi-lingua

使用Docker Compose(推荐)

选项1:已发布图像(无需构建)

# Download the release docker-compose file
curl -O https://raw.githubusercontent.com/kjwenger/NaturalStupidity/main/MultiLingua/Copilot.AI/docker-compose.release.yml

# Create and pre-populate LibreTranslate volume (recommended)
docker volume create lt-local
docker run -d --name temp-libretranslate -p 5000:5000 -v lt-local:/home/libretranslate/.local libretranslate/libretranslate:latest
# Wait for models to download, then: docker stop temp-libretranslate && docker rm temp-libretranslate

# Start services using published images
docker-compose -f docker-compose.release.yml up -d

方案2:地方发展建设

# Start both Multi-Lingua and LibreTranslate with local build
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services (preserves volumes)
docker-compose down

# Rebuild and restart
docker-compose up --build -d

# Clean up everything including volumes
docker-compose down -v

持久性和卷配置

Docker Compose设置包括以下持久存储:

  • LibreTranslate模型和词典:使用外部 lt-local 卷(必须存在)
  • 多语种数据库:存储在 ./data 主机上的目录

重要:Docker Compose配置需要一个现有的 lt-local 使用预下载的LibreTranslate语言模型。如果你没有这个卷,要么:

  1. 首先创建并填充卷:

    # Run LibreTranslate standalone to download models
    docker run -d --name temp-libretranslate -p 5000:5000 \
      -v lt-local:/home/libretranslate/.local \
      libretranslate/libretranslate
    
    # Wait for models to download, then stop
    docker stop temp-libretranslate && docker rm temp-libretranslate
    
  2. 或修改docker-compose.yml 创建新卷,而不是使用外部卷。

端口配置

  • 多语言应用程序: http://localhost:3456
  • API自由四译本 (外部访问):http://localhost:5432
  • 内部网络:多语种通过以下方式连接到LibreTranslate http://libretranslate:5000

故障排除

  1. LibreTranslate 400错误:通常表示缺少语言模型

    • 确保 lt-local 卷存在并包含下载的模型
    • 检查LibreTranslate日志: docker-compose logs libretranslate
  2. 数量问题:如果出现“找不到外部卷”错误

    • 首先独立运行LibreTranslate以创建 lt-local 体积
    • 或改变 external: true 到 driver: local 在docker-compose.yml中
  3. 网络连接:

    • 多语言应用程序日志应显示:“使用LibreTranslate URL:http://libretranslate:5000"
    • 测试: curl -X POST http://localhost:3456/api/translate -H "Content-Type: application/json" -d '{"text": "hello"}'
  4. 数据库问题:SQLite数据库文件将在中自动创建 ./data/

  5. 翻译错误:检查浏览器控制台中的API错误消息

许可证

这个项目是开源的,可以在MIT许可证下使用。