検索
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 の支援を受けて開発しました。 直感的なインターフェースとカスタマイズ可能な設定により、素早く正確な文字起こしを得られ、翻訳オプションをすぐに使って言語の壁を越えることができます。

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 拡張以上の存在で、自律的にコーディング支援を行うエージェントです。想像してみてください、次のようなコパイロットです：

  • 自然言語でのコミュニケーション。
  • ワークスペース内のファイルを読み書きできること。
  • ターミナルコマンドの実行。
  • OpenAI や Google Gemini など様々な API と統合可能。
  • 「カスタムモード」による性格の調整。

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 キーの安全な保存：OpenAI の API キーを Chrome 内で安全に保存・取得する方法も悩みどころでした。公式ドキュメントを 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 を作ったのか — 必要性から生まれた拡張機能

技術的な詳細に入る前に、なぜこの拡張を作ったのかを説明します。すべては個人的なニーズから始まりました：

  • 長いプロンプトを入力するのが面倒だった：AI ともっと自然に会話したかったため、音声で指示を出せるようにしたかった。
  • 既存の文字起こしが満足できない：試した拡張機能は満足のいく結果を出せませんでした。
  • 透明性への意志：オープンソースで広告のない拡張を、自分でコードを管理できる形で作りたかった。

こうした思いから Babel Fish AI は生まれ、個人的な要望に応えると同時にコミュニティにも役立つツールを目指しています。

5. コードと技術的な詳細

Babel Fish AI は典型的な Chrome 拡張のアーキテクチャを基にしつつ、OpenAI の API 利用に関連する特殊な点を持っています。

主なコンポーネントの概要は次のとおりです：

5.1. 全体構成

拡張は複数の JavaScript ファイルで構成され、相互にやり取りします：

  • manifest.json: 拡張の主要な設定ファイル。権限、スクリプト、アクセス可能なリソースなどを定義します。
  • background.js: バックグラウンドで動作するサービスワーカー。アイコンのクリックやキーボードショートカットを管理し、必要に応じて content script を注入し、content script と通信します。
  • content.js: Web ページに注入されるスクリプト。DOM と直接やり取りし、マイクから音声をキャプチャして文字起こし・翻訳 API を呼び出し、結果を表示します。
  • src/utils/api.js: OpenAI の Whisper を呼び出す関数を含みます（文字起こし用）。
  • src/utils/translation.js: OpenAI の GPT を呼び出す関数を含みます（翻訳用）。
  • src/utils/ui.js: UI（バナー、ダイアログ、コピー用ボタン）を管理するユーティリティ関数群。
  • src/constants.js: 設定や状態、アクションなどの定数定義。
  • src/pages/options/: 拡張のオプションページ用のファイル群（HTML、CSS、JavaScript）。

5.2. manifest.json

ファイル manifest.json はマニフェスト v3 を使用しています。次の権限を宣言しています：

  • 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 を使用します。
  • 文字起こし： 音声を OpenAI の Whisper に送信して文字起こしを得るために transcribeAudio（src/utils/api.js）を使用します。
  • 翻訳（任意）： 翻訳が有効な場合、文字起こしテキストを OpenAI の GPT に送信して翻訳を取得するために translateText（src/utils/translation.js）を使用します。
  • 表示： 文字起こし（および翻訳）を、ページ内のアクティブ要素（テキストフィールドや編集可能要素）に挿入するか、ダイアログで表示します。
  • バナー管理： 録音状態やエラーメッセージを示すステータスバナーをページ上部に表示します。
  • 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. ユーザーインターフェース

拡張の UI は 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）版から日本語（ja）に翻訳されました。翻訳プロセスの詳細については https://gitlab.com/jls42/ai-powered-markdown-translator をご覧ください。