Translation Demo

此项目演示了如何使用 OpenAI Realtime API 构建一个支持 WebSocket 的单向翻译应用程序。它通过 Realtime + Websockets 集成 实现。此演示的实际用例是多语言的对话翻译——即，说话者对着扬声器应用程序说话，听众通过听众应用程序听到他们选择的母语翻译。想象一个会议室有多名参与者戴着耳机，实时收听演讲者用他们自己的语言进行的演讲。由于音频模型目前的轮流处理性质，演讲者必须短暂暂停，以便模型处理和翻译语音。但是，随着模型变得更快、更高效，这种延迟将大大降低，翻译也将变得更加无缝。

如何使用

运行应用程序

1. 设置 OpenAI API：

• 如果您是 OpenAI API 的新手，请注册一个账户。
• 按照快速入门获取您的 API 密钥。

2. 克隆存储库：

git clone <repository-url>

3. 设置您的 API 密钥：

• 在项目根目录创建一个 .env 文件，并添加以下行：

REACT_APP_OPENAI_API_KEY=<your_api_key>

4. 安装依赖项：

导航到项目目录并运行：

npm install

5. 运行扬声器和听众应用程序：

npm start

扬声器和听众应用程序将可在以下位置访问：

• http://localhost:3000/speaker
• http://localhost:3000/listener

6. 启动镜像服务器：

在另一个终端窗口中，导航到项目目录并运行：

node mirror-server/mirror-server.mjs

添加新语言

要将新语言添加到代码库，请遵循以下步骤：

1. 镜像服务器中的套接字事件处理：

• 打开 mirror-server/mirror-server.cjs。
• 为新语言添加一个新的套接字事件。例如，对于印地语：

socket.on('mirrorAudio:hi', (audioChunk) => {
  console.log('logging Hindi mirrorAudio', audioChunk);
  socket.broadcast.emit('audioFrame:hi', audioChunk);
});

2. 指令配置：

• 打开 src/utils/translation_prompts.js。
• 为新语言添加新的指令。例如：

export const hindi_instructions = "Your Hindi instructions here...";

3. SpeakerPage 中的实时客户端初始化：

• 打开 src/pages/SpeakerPage.tsx。
• 导入新的语言指令：

import { hindi_instructions } from '../utils/translation_prompts.js';

• 将新语言添加到 languageConfigs 数组中：

const languageConfigs = [
  // ... existing languages ...
  { code: 'hi', instructions: hindi_instructions },
];

4. ListenerPage 中的语言配置：

• 打开 src/pages/ListenerPage.tsx。
• 找到 languages 对象，该对象集中了所有与语言相关的数据。
• 为您的语言添加一个新条目。键应该是语言代码，值应该是一个包含语言名称的对象。

const languages = {
  fr: { name: 'French' },
  es: { name: 'Spanish' },
  tl: { name: 'Tagalog' },
  en: { name: 'English' },
  zh: { name: 'Mandarin' },
  // Add your new language here
  hi: { name: 'Hindi' }, // Example for adding Hindi
} as const;

• ListenerPage 组件将自动处理下拉菜单和音频流处理中的新语言。

5. 测试新语言：

• 运行您的应用程序，然后通过从下拉菜单中选择新语言来测试它。
• 确保新语言的音频流被正确接收和播放。

演示流程

1. 在扬声器应用程序中连接：

• 点击“连接”并等待与 Realtime API 的 WebSocket 连接建立。
• 在 VAD（语音活动检测）和手动按键说话模式之间进行选择。
• 演讲者应确保他们暂停，以便翻译能够跟上——模型是基于回合的，无法持续流式传输翻译。
• 演讲者可以在扬声器应用程序中查看每种语言的实时翻译。

2. 在听众应用程序中选择语言：

• 从下拉菜单中选择语言。
• 听众应用程序将播放翻译后的音频。该应用程序同时翻译所有音频流，但只播放所选语言。您可以随时切换语言。