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

Jls -

Babel Fish AI 是一个个人项目，是一款创新的 Chrome 扩展，能够以非凡的精度将语音转换为文本，同时还提供自动翻译选项。它的设计旨在保证可靠且无广告，通过 OpenAI 的 Whisper API 提供高质量的语音转录。我创建此扩展部分是为了满足个人需求：通过口述指令简化与人工智能的沟通。 您可以仅使用它进行转录，或者激活翻译功能以促进多语言交流。 这也是测试 Roo Code —— 一款由 AI 辅助开发的工具 —— 的绝佳时机。

1. 简介

Babel Fish AI 是一个个人项目，由 Claude、Gemini 以及通过 Roo Code 与 OpenAI 等 AI 的支持下开发。 凭借其直观的界面和可自定义的配置，Babel Fish AI 能够快速且精准地进行转录，还提供即时翻译选项以跨越语言障碍。

2. 功能与选项

  • 高级语音转录：

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

  • 可选自动翻译：

    • 快速且准确地翻译转录文本，可根据需要启用。
    • 可以选择仅使用扩展进行转录。

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

  • 直观且可定制的界面：

    • 可选择在活动输入区域或对话框中显示。
    • 状态横幅可自定义（颜色、不透明度、持续时间）以提供即时视觉反馈。

  • 高级选项：

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

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

Babel Fish AI 不仅仅是一款 Chrome 扩展，它还是一次关于人工智能和一款创新工具 Roo Code 的激动人心的实验成果。

让我来讲讲我是如何凭借多个人工智能的力量以及一个独特的开发环境将一个想法变为现实的。

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

Roo Code 远不止于一个简单的 VS Code 扩展。它是一个真正的“自主编码代理”，在你的工作中为你提供帮助。试想一个能够：

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

为了开发 Babel Fish AI，我使用 Roo Code 作为指挥家，指导不同的人工智能协同工作，共同创建了这款扩展。

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 编写用于配置横幅颜色的选项部分代码。
  • 多语言界面翻译：我通过 Roo Code 的 AI 功能生成了本地化文件（_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: 在后台运行的服务工作者。它处理事件（点击图标、键盘快捷键），在必要时注入 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 文件采用了清单的第 3 版。它声明了以下权限：

  • 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 则作为模块类型的服务工作者声明（"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 访问麦克风并录制音频。
  • 转录： 调用 src/utils/api.js 中的 transcribeAudio 函数，将音频发送至 OpenAI Whisper API 获取转录文本。
  • 翻译（可选）： 如果启用翻译选项，则调用 src/utils/translation.js 中的 translateText 函数，将转录文本发送至 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 愉快！

本文件从法语版本翻译为中文，采用了 o3-mini 模型。关于翻译过程的更多信息，请访问 https://gitlab.com/jls42/ai-powered-markdown-translator