Babel Fish AIのローンチ：Chrome拡張機能による音声認識と翻訳

Jls -

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拡張機能ではなく、AIとの魅力的な実験と革新的なツールであるRoo Codeの成果でもあります。

私がどのようにしてアイデアを現実に変え、複数のAIとユニークな開発環境を活用したか、そのストーリーをご紹介します。

3.1. Roo Code：私のAIコーディングパートナー

Roo Codeは単なるVS Codeの拡張機能以上のもので、本物の「自律型コーディングエージェント」として、作業を支援してくれます。自然言語でコミュニケーションし、作業スペース内のファイルを直接読み書きし、ターミナルコマンドを実行し、さまざまなAPI（OpenAI、Google Geminiなど）と連携し、さらに「カスタムモード」により「パーソナリティ」を適応させることができる、そんなAIパイロットを想像してください。

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. 障壁の克服：困難（と解決策）の数々

開発は順風満帆ではなく、いくつかの課題に直面しました：

  • マイクアクセスと権限の問題：最初、マイクアクセスの許可を得ることができませんでした！Chrome Manifest V3には存在しない「マイク」権限の追加を求められ、公式ドキュメントを参照し、Claude 3.5 Sonnetに提供して解決策を見出してもらいました。

  • APIキーの安全な保管：次に直面したのは、Chrome内でOpenAI APIキーを安全に保存し、取得する方法でした。公式ドキュメントをGeminiに提供し、Chromeのストレージと連携する適切なコードを提案してもらいました。

3.4. 協力と実験：成功の鍵

オプションやローカライズについてはすべてのAIを活用し、Roo Codeもテストしました。

これらの課題に加え、以下が可能となりました：

  • 実環境でのRoo Codeテスト：Babel Fish AIの開発は、この有望なツールを実際に試す絶好の機会となりました。
  • アイコンと背景画像の生成：OpenAIのDALL-E 3（統合済み）を通じて、拡張機能の独自のビジュアルアイデンティティを作成しました。
  • 表示バーのカスタマイズ：GIMPを使用して画像から色を抽出し、AIに依頼して表示バーの色設定部分のコードを作成してもらいました。
  • 多言語インターフェースの翻訳：Roo Codeの力を活用してローカライズファイル（_locales）を生成し、多数の言語にオプションを翻訳することで、大幅な時間短縮を実現しました！
  • ドロップダウンメニューの生成：AIがすべて生成してくれたため、大幅な時間節約となりました。
  • オプションのHTMLレンダリング管理：AIとの連携により実現しました。

3.5 発生した困難

  • Google Chat用iframeへのテキスト挿入の問題：例外が追加され、デフォルトのポップアップが残されました。
  • エキスパートモードと権限：APIのURLを変更できるようにするために、manifestで全ホストを許可しなければならず、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はManifestバージョン3を使用しています。以下の権限が宣言されています：

  • activeTab : アクティブタブへのアクセス用。
  • storage: APIキーや拡張機能のオプションを保存するため。
  • commands: キーボードショートカット定義用。
  • scripting: content script注入のため。
  • host_permissions: https://api.openai.com/*はAPI呼び出し用、またエキスパートモードでカスタムAPI URLを指定できるようにhttps://*/*が必要です。

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を使用してマイクにアクセスし、音声を録音します。
  • 音声認識： 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の以下2つの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 Web StoreでBabel Fish AIを試して、そのコミュニケーション変革の効果を実感してください。

ご一読ありがとうございました。Babel Fish AIをお楽しみください！

このドキュメントは、o3-mini モデルを使用して、fr バージョンから ja 言語に翻訳されました。Pour plus d’informations sur le processus de traduction, consultez https://gitlab.com/jls42/ai-powered-markdown-translator