网页字幕翻译工具项目文档

一、项目概述

开发一个基于浏览器的SRT字幕文件翻译工具，支持多AI引擎对接、本地化存储和灵活的双语字幕生成功能，提供现代化交互界面。

二、技术方案

1. 技术栈

2. 架构设计

[前端]
├─ 文件上传模块
├─ 翻译配置面板
├─ 实时预览组件
└─ 下载控制模块
    │
[本地存储]
├─ 字幕文件存储 (IndexedDB)
├─ API配置存储 (localStorage)
└─ 专有名词库 (IndexedDB)

三、核心功能规范

1. 文件处理模块

• SRT文件验证（正则校验）
• 分段解析与时间戳保持
• 文件元数据展示（总字数/段落数）

2. 翻译配置系统

interface TranslationConfig {
  targetLang: string;  // ISO 639-1标准
  apiProvider: 'openai' | 'gemini' | 'deepseek' | 'custom';
  apiConfig: {
    endpoint: string;
    apiKey: string;
    model: string;
    temperature?: number;
  };
  terminology: Map<string, string>;  // 专有名词映射
}

3. AI接口适配层

• 统一请求格式转换
• 错误重试机制（指数退避）
• 速率限制管理

4. 预览模块

• 双栏对比视图（原文/译文）
• 时间轴同步滚动
• 段落高亮定位

5. 输出生成系统

支持四种输出模式：

1. Original (源文件)
2. Translated (纯译文)
3. Bilingual [Source/Target]
4. Bilingual [Target/Source]

四、UI/UX设计规范

1. 布局方案

<MainLayout>
  <FileUploadPanel />
  <ConfigSection collapsible>
    <TranslationSettings />
    <APIConfiguration />
    <TerminologyEditor />
  </ConfigSection>
  <PreviewSection splitView>
    <SourcePreview />
    <TranslatedPreview />
  </PreviewSection>
  <DownloadControl />
</MainLayout>

2. 交互流程

graph TD
    A[上传SRT] --> B[解析验证]
    B --> C[配置翻译参数]
    C --> D[执行翻译]
    D --> E[实时预览]
    E --> F{修改配置?}
    F -- Yes --> C
    F -- No --> G[选择输出格式]
    G --> H[生成下载]

五、安全与存储方案

1. 数据安全

• API密钥加密存储（Web Crypto API）
• 敏感数据内存隔离
• 沙箱化翻译进程

2. 存储结构

// IndexedDB Schema
{
  files: [
    {
      id: UUID,
      original: ArrayBuffer,
      translated: JSON,
      metadata: {
        duration: number,
        wordCount: number
      }
    }
  ],
  terminologies: [
    {
      domain: string,
      mappings: Map<string, string>
    }
  ]
}

六、开发里程碑

七、测试方案

1. 测试用例

• 大文件压力测试（>10万字符）
• 跨时区时间戳保持验证
• API故障切换测试
• XSS注入防护测试

2. 性能指标

• 初始加载时间 < 2s
• 翻译吞吐量 > 500字符/秒
• 内存占用 < 300MB

八、扩展性设计

1. 插件式翻译引擎接入
2. 云端配置同步接口预留
3. 字幕样式自定义扩展点
4. 多文件批处理架构支持

九、依赖管理

// 关键依赖项
{
  "dependencies": {
    "react": "^18.2.0",
    "material-ui": "^5.14.0",
    "localforage": "^1.10.0",
    "srt-parser-2": "^2.1.2",
    "web-streams-polyfill": "^3.2.1"
  }
}

本方案采用现代Web技术栈实现安全、高效的本地化字幕翻译工具，兼顾扩展性和用户体验，可支持后续功能演进。