翻訳家

ウェブ機能: 翻訳ツール

Translator API を使用すると、デベロッパーは Chrome と Edge の組み込み AI モデルを使用してクライアントサイドのテキスト翻訳を実行できます。このアプローチにより、一時的なコンテンツにクラウドベースの翻訳サービスを使用する必要がなくなり、データをユーザーのデバイスに保持することで、コストを削減し、プライバシーを向上させることができます。

前提条件と要件

API サーフェスとグローバル スコープ

  • 必須: Translator API には、グローバル Translator インターフェース（window.Translator / self.Translator）を介してのみアクセスします。
  • 非推奨の window.ai.translator 名前空間を使用または確認しないでください。

対応ブラウザ

  • Chrome: バージョン 138 以降（パソコンのみ）。
  • Edge: バージョン 148 以降（パソコンのみ）。
  • サポート対象外: モバイル（Android / iOS）、Firefox、Safari。

ハードウェア要件

Gemini Nano と関連モデルを実行するには、システムに次のものが必要です。

  • オペレーティング システム: Windows 10/11、macOS 13 以降、Linux、ChromeOS（Chromebook Plus）。
  • ストレージ: プロファイル ボリュームに 22 GB 以上の空き容量。
  • メモリ / CPU: 16 GB 以上の RAM と 4 個以上の CPU コア。
  • GPU: 4 GB 以上の VRAM（音声付きの Prompt API には必須）。
  • ネットワーク: 言語パック / モデルの初回ダウンロード時にのみ必要です。

実装とコードサンプル

1. 在庫状況とモデル管理の確認

必須オプションの受け渡し: sourceLanguage と targetLanguage を含む同一の構成オプション オブジェクトを Translator.availability(options) と Translator.create(options) の両方に渡す必要があります。

推奨される進捗状況のモニタリング: ユーザーがモデルのダウンロードの進捗状況を確認できるように、monitor(m) コールバックを Translator.create() に提供し、downloadprogress イベントのリスナーを追加して、モデルのダウンロードの進捗状況をモニタリングする機能を実装する必要があります。

ユーザー ジェスチャーの要件: availability(options) の呼び出しで 'downloadable' または 'downloading' が返された場合、Translator.create() を呼び出すと、言語パックのダウンロードがトリガーされます。NotAllowedError を防ぐため、ユーザー ジェスチャー（ボタンのクリックなど）が厳密に必要です。

Translator.availability(options) は、次の 4 つの文字列ステータスのいずれかを返します。

  • 'available': 言語ペアモデルはすでにデバイスにダウンロードされており、すぐに翻訳できます。
  • 'downloadable': 言語ペアはサポートされていますが、モデルをダウンロードする必要があります。Translator.create() を開始するには、ユーザー ジェスチャーが必要です。
  • 'downloading': 言語パックは現在ダウンロード中です。ユーザー ジェスチャーで Translator.create() を呼び出すと、ダウンロードにアタッチされます。
  • 'unavailable': 言語ペアまたはデバイスがサポートされていません。フォールバック戦略を実行します。
// Language pair options passed to both availability() and create()
const options = {
  sourceLanguage: 'es', // Example BCP 47 language code
  targetLanguage: 'fr', // Example BCP 47 language code
};

// 1. Check availability for the language pair
const availability = await Translator.availability(options);

if (availability === 'available') {
  // Model is ready immediately on device
  const translator = await Translator.create(options);
} else if (availability === 'downloadable' || availability === 'downloading') {
  // User gesture is strictly required before create() triggers or attaches to download
  document.getElementById('start-translation-btn').addEventListener('click', async () => {
    const translator = await Translator.create({
      ...options,
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          console.log(`Downloaded ${Math.round(e.loaded * 100)}%`);
        });
      },
    });
  });
} else if (availability === 'unavailable') {
  // Language pair or hardware unsupported; execute fallback
  console.warn('Translation model is unavailable on this device.');
}

2. 翻訳の実行

この API は、静的レスポンスとストリーミング レスポンスの両方をサポートしています。翻訳ツールをインスタンス化するときは、常にダウンロードの進捗状況のモニタリングを含めます。

標準翻訳:

// Default to including a progress monitor when creating translator
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${Math.round(e.loaded * 100)}%`);
    });
  },
});

const result = await translator.translate(
  'Where is the next bus stop, please?',
);
console.log(result);
// Output: "Où est le prochain arrêt de bus, s'il vous plaît ?"

ストリーミング翻訳（長いテキストの場合）:

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

サポートされている言語

この API は、幅広い BCP 47 言語コードをサポートしています。Chrome の Translator API の実装でサポートされている言語は次のとおりです。

  • ar: アラビア語
  • bg: ブルガリア語
  • bn: ベンガル語
  • cs: チェコ語
  • da: デンマーク語
  • de: ドイツ語
  • el: ギリシャ語
  • en: 英語
  • es: スペイン語
  • fi: フィンランド語
  • fr: フランス語
  • hi: ヒンディー語
  • hr: クロアチア語
  • hu: ハンガリー語
  • id: インドネシア語
  • it: イタリア語
  • he: ヘブライ語
  • ja: 日本語
  • kn: カンナダ語
  • ko: 韓国語
  • lt: リトアニア語
  • mr: マラーティー語
  • nl: オランダ語
  • no: ノルウェー語
  • pl: ポーランド語
  • pt: ポルトガル語
  • ro: ルーマニア語
  • ru: ロシア語
  • sk: スロバキア語
  • sl: スロベニア語
  • sv: スウェーデン語
  • ta: タミル語
  • te: テルグ語
  • th: タイ語
  • tr: トルコ語
  • uk: ウクライナ語
  • vi: ベトナム語
  • zh: 中国語
  • zh-Hant: 中国語（繁体）

セキュリティとパフォーマンス

  • 権限ポリシー: クロスオリジンの iframe には明示的な権限が必要です。

    <iframe src="https://example.com/" allow="translator"></iframe>

  • ウェブワーカー: 権限ポリシーが複雑なため、現在はサポートされていません。

  • プライバシー: モデルがダウンロードされると、翻訳プロセス中に Google サーバーにデータが送信されることはありません。

代替戦略

使用する前に、Translator オブジェクトがグローバル スコープで使用可能かどうかを確認します。

if ('Translator' in self) {
  // The Translator API is supported.
} else {
  // Execute fallback strategy (do not fall back to window.ai.translator).
}

Translator API がサポートされていない場合、または可用性チェックで 'unavailable' が返された場合は、適切にフォールバックする必要があります。

推奨されるオプション:

  1. リモート API フォールバック: 翻訳リクエストをサーバー エンドポイントまたはクラウド リモート API（Vertex AI Gemini API など）にリダイレクトして、翻訳機能を提供します。
  2. グレースフル デグラデーション: 翻訳コントロール要素またはボタンを視覚的に無効にし、エンドユーザーにわかりやすいメモ（"Client-side translation is currently unsupported in this browser" など）を表示します。未処理の例外を許可しないでください。
  3. ポリフィル フォールバック: built-in-ai-task-apis-polyfills や prompt-api-polyfill などのコミュニティが管理するポリフィルを使用して、リモート サービスを使用する API サーフェスをエミュレートできます。

プライバシーと費用への影響: これらのポリフィルは、リモート サーバー（クラウド経由の Gemini API など）にリクエストをプロキシする可能性があります。ただし、ローカル処理もオプションです。リモート処理では、ネイティブの組み込み AI API のオンデバイス プライバシー保証が完全に無効になり、多くの場合、サーバーサイドの API 使用コストが発生します。