搜索
blogia

Babel Fish AI 发布：Chrome 语音转录与翻译扩展

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Babel Fish AI 发布：Chrome 语音转录与翻译扩展

Babel Fish AI 是一个个人项目，是一款创新的 Chrome 扩展，能够以卓越的精度将语音转换为文本，同时提供自动翻译选项。该扩展设计为可靠且无广告，通过 OpenAI 的 Whisper API 提供高质量的语音转录。我部分出于个人需求创建了此扩展：通过口述我的请求以简化与 AI 的交流。 您可以仅将其用于转录，或启用翻译以便于多语言沟通。 这也是测试 Roo Code（一款由 AI 辅助的开发工具）的理想机会。

1. 介绍

Babel Fish AI 是一个个人项目，借助 Claude、Gemini 和 OpenAI 等 AI 以及 Roo Code 的支持开发而成。 凭借直观的界面和可自定义的配置，Babel Fish AI 可实现快速且精确的转录，并提供即时翻译选项以克服语言障碍。

2. 功能与选项

  • 高级语音转录：

    • 通过麦克风捕获高质量音频。
    • 使用 OpenAI 的 Whisper API 进行转录，并自动插入到活动输入字段或在对话窗口中显示。

  • 可选的自动翻译：

    • 对转录文本进行快速且忠实的翻译，可按需启用。
    • 也可仅将扩展用于转录功能。

  • 完整的多语言支持： Babel Fish AI 可处理语音输入并以多种语言显示文本，扩大其国际使用范围。
    支持语言：🇸🇦 阿拉伯语、🇩🇪 德语、🇺🇸 英语、🇪🇸 西班牙语、🇫🇷 法语、🇮🇳 印地语、🇮🇹 意大利语、🇯🇵 日语、🇰🇷 韩语、🇳🇱 荷兰语、🇵🇱 波兰语、🇵🇹 葡萄牙语、🇷🇴 罗马尼亚语、🇸🇪 瑞典语、🇨🇳 中文。

  • 直观且可定制的界面：

    • 可选择将结果显示在活动输入区域或以对话窗口形式显示。
    • 自定义状态横幅（颜色、不透明度、持续时间）以获得即时视觉反馈。

  • 高级选项：

    • 专家模式提供详细配置（API 的 URL、按域名的参数等）。
    • 可通过友好的选项页面访问扩展设置。

3. 开发幕后：我与 AI 及 Roo Code 的冒险

Babel Fish AI 不仅仅是一个 Chrome 扩展，它也是一次关于人工智能和一个创新工具 Roo Code 的令人兴奋的实验成果。

让我来讲述我是如何依靠多种 AI 的力量和独特的开发环境将一个想法变为现实的。

3.1. Roo Code：我的 AI 编码伙伴

Roo Code 不只是一个简单的 VS Code 扩展。它是真正的“自主编码代理”，可以在工作中为你提供帮助。想象一下一个能：

  • 用自然语言交流。
  • 直接在你的工作区读取和写入文件。
  • 执行终端命令。
  • 与多种 API（OpenAI、Google Gemini 等）集成。
  • 通过“自定义模式”调整其“个性”。

为了开发 Babel Fish AI，我把 Roo Code 当作指挥者，指导不同的 AI 协同创建扩展。

3.2. 为这个独特项目召集的 AI 阵容

我调用了多款 AI，各自有其强项与弱点：

  • o3-mini、Claude 3.5 Sonnet、Gemini（exp 1206、1.5 pro exp 0827、Flash Think）、GPT-4o：这些模型是我的主要合作者，各自为项目贡献了力量。
  • Gemini（免费模型）：它们的免费性是一个重要优势，尽管需要在配额间切换（幸好 Roo Code 能在失败时管理重试！）。

3.3. 克服障碍：充满挑战（也有解决方案！）的开发历程

开发过程并非一帆风顺。我遇到过多个挑战，尤其是：

  • 麦克风访问与权限问题： 一开始无法获得麦克风访问权限！一些 AI 建议添加一个在 Chrome Manifest V3 中并不存在的 “microphone” 权限。我不得不深入官方文档，并将其提供给 Claude 3.5 Sonnet，最终找到了解决方案。

  • API 密钥的安全存储： 另一个难题是如何在 Chrome 中安全地存储和检索 OpenAI API 密钥。我将官方文档提供给 Gemini，它成功提出了与 Chrome 存储交互的合适代码。

3.4. 协作与实验：成功的关键

我几乎用尽了所有 AI 来处理选项与本地化，同时也想测试 Roo Code。

除了这些具体挑战之外，我还完成了以下工作：

  • 在真实环境中测试 Roo Code： Babel Fish AI 的开发也为检验这一有前景的工具提供了机会。
  • 生成图标与背景图像： 借助 DALL-E 3（集成于 OpenAI），我为扩展创建了独特的视觉识别。
  • 自定义显示横幅： 使用 GIMP 从图像中提取颜色，然后让 AI 编写用于配置横幅颜色的选项部分代码。
  • 将界面翻译为多种语言： 我利用 AI（通过 Roo Code）生成了本地化文件（_locales）并翻译了多语言选项，大大节省了时间！
  • 生成下拉菜单： AI 完成了全部生成工作，节省了大量时间。
  • 处理选项的 HTML 渲染： 与 AI 协同完成渲染逻辑。

3.5 遇到的困难

  • 将文本注入 Google Chat 的 iframe 时的问题：已添加例外，并保留默认弹出窗口。
  • 专家模式与权限：为允许更改 API 的 URL，我不得不在清单中授权所有主机。这在 Chrome 的增强浏览模式下似乎会带来问题，目前我还未找到解决方案（如果有人有想法，欢迎告诉我！）。

4. 为什么选择 Babel Fish AI？一个源于需求的扩展

在进入技术细节之前，理解我为何创建 Babel Fish AI 很重要。起因于一个个人需求：

  • 厌倦输入长篇提示： 我希望能更自然地与 AI 交流，直接对它们说话。
  • 转录质量不佳： 我试用过的转录扩展令人失望。
  • 追求透明性： 我想要一个开源、无广告、且我能掌控其代码的扩展。

因此，Babel Fish AI 源自我想打造一个满足自身需求、且对社区有用的工具的愿望。

5. 代码与技术细节概览

Babel Fish AI 建立在典型的 Chrome 扩展架构上，并带有一些与使用 OpenAI API 相关的特性。

以下是主要组件的概览：

5.1. 总体架构

扩展由多个相互交互的 JavaScript 文件组成：

  • manifest.json: 扩展的主配置文件。定义权限、脚本、可访问资源等。
  • background.js: 在后台运行的 service worker。管理事件（点击图标、快捷键）、必要时注入 content script，并与 content script 通信。
  • content.js: 注入到网页的脚本。直接与 DOM 交互，捕获麦克风音频，调用转录与翻译 API，并显示结果。
  • src/utils/api.js: 包含调用 OpenAI Whisper API（转录）的函数。
  • src/utils/translation.js: 包含调用 OpenAI GPT API（翻译）的函数。
  • src/utils/ui.js: 包含用于管理用户界面的实用函数（横幅、对话框、复制按钮）。
  • src/constants.js: 定义配置、状态、操作等常量。
  • src/pages/options/: 包含扩展选项页面的文件（HTML、CSS、JavaScript）。

5.2. manifest.json

文件 manifest.json 使用了 Manifest V3。它声明了以下权限：

  • activeTab : 访问活动选项卡。
  • storage: 存储 API 密钥和扩展选项。
  • commands: 定义快捷键。
  • scripting: 注入 content script。
  • host_permissions: https://api.openai.com/* 用于 API 调用，且 https://*/* 在专家模式下允许用户指定自定义的 API URL。

content_scripts 被注入到所有 URL (<all_urls>) 并在文档加载完成时执行 ("run_at": "document_end")。background script 被声明为模块类型的 service worker ("type": "module")。

5.3. background.js

background script 承担多个角色：

  • 注入 content script: 如果 content script 尚未注入，background.js 会在交互（点击图标或快捷键）时注入它。
  • 事件管理： 监听 chrome.runtime.onMessage（来自 content script 的消息）、chrome.action.onClicked（图标点击）和 chrome.commands.onCommand（快捷键）等事件。
  • 与 content script 通信： 发送消息到 content script 以开始或停止录音（{ action: ACTIONS.TOGGLE }）。
  • 图标更新： 更新扩展图标的徽章以指示录音状态（进行中、已停止、出错）。

5.4. content.js

content script 是扩展的核心。它执行以下任务：

  • 初始化： 从 Chrome 存储初始化 API 密钥和横幅颜色选项。
  • 音频捕获： 使用 navigator.mediaDevices.getUserMedia API 访问麦克风并录制音频。
  • 转录： 使用函数 transcribeAudio（src/utils/api.js）将音频发送到 OpenAI 的 Whisper API 并获取转录结果。
  • 翻译（可选）： 如果启用翻译选项，则使用函数 translateText（src/utils/translation.js）将转录文本发送到 OpenAI 的 GPT API 并获取翻译。
  • 显示： 将转录（及翻译）显示在页面的活动元素中（如果是文本字段或可编辑元素），或在对话框中显示。
  • 横幅管理： 在页面顶部显示状态横幅以指示录音状态或展示错误信息。
  • 与 background script 通信： 向 background script 发送消息以指示录音的开始、结束或错误。
  • 监听选项变更： 监听扩展选项的更改并相应更新显示。

5.5. 通信

background script 与 content script 之间的通信通过 Chrome 的消息传递 API（chrome.runtime.sendMessage 和 chrome.runtime.onMessage）进行。

5.6. API

扩展使用了两种 OpenAI API：

  • Whisper： 用于语音转录。默认 URL 为 https://api.openai.com/v1/audio/transcriptions，使用的模型为 whisper-1。
  • GPT： 用于翻译（可选）。默认 URL 为 https://api.openai.com/v1/chat/completions，使用的模型为 gpt-4o-mini。

API 的 URL 可在扩展选项中修改（专家模式）。

5.7. 存储

扩展使用 chrome.storage.sync 存储：

  • OpenAI API 密钥（apiKey）。
  • 扩展选项（显示、翻译、横幅颜色等）。

5.8. 用户界面

扩展的用户界面由 src/utils/ui.js 和 content.js 中的多个函数管理：

  • 横幅： 在页面顶部显示状态横幅以指示录音状态或展示错误信息。横幅的颜色和不透明度可自定义。
  • 对话框： 转录（及翻译）可以在对话框中显示。显示时间可自定义。
  • 复制按钮： 在对话框中添加复制按钮，便于快速复制转录文本。

5.9. 错误处理

错误以集中方式管理。错误消息在 src/constants.js（对象 ERRORS）中定义。错误通过状态横幅显示给用户。

6. 资源

7. 结论

Babel Fish AI 提供了一个完整的解决方案，能实现精确的语音转录与可选的翻译，同时保证直观的界面和增强的安全性。借助该扩展，语音到文本的体验得到优化，语言障碍得以消除。请在 Chrome 网上应用店测试 Babel Fish AI，看看它如何改变你的沟通方式。

感谢阅读，祝您使用 Babel Fish AI 愉快！

本文件已使用模型 gpt-5-mini 将法语（fr）版本翻译为中文（zh）。如需了解有关翻译过程的更多信息，请参见 https://gitlab.com/jls42/ai-powered-markdown-translator