AI を組み込んだ翻訳

Thomas Steiner

Alexandra Klepper

公開日: 2024 年 11 月 13 日、最終更新日: 2025 年 5 月 20 日

Chrome の Translator API を使用して、ブラウザで提供される AI モデルでテキストを翻訳します。

ウェブサイトですでに複数の言語でコンテンツを提供している場合もあります。Translator API を使用すると、ユーザーは自分の母語で記述できます。たとえば、ユーザーは自分の第一言語でサポート チャットに参加し、ユーザーのメッセージは、ユーザーのデバイスから送信される前に、サイトによってサポート エージェントの第一言語に翻訳されます。これにより、すべてのユーザーにスムーズで高速かつ包括的なエクスペリエンスが提供されます。

通常、ウェブ コンテンツの翻訳にはクラウド サービスの使用が必要です。まず、ソース コンテンツがサーバーにアップロードされ、ターゲット言語への翻訳が実行されます。次に、結果のテキストがダウンロードされ、ユーザーに返されます。コンテンツが一時的で、データベースに保存する必要がない場合、クライアントサイドの翻訳はホスト型翻訳サービスよりも時間と費用を節約できます。

始める

機能検出を実行して、ブラウザが Translator API をサポートしているかどうかを確認します。

if ('Translator' in self) {
  // The Translator API is supported.
}

翻訳のターゲット言語は常にわかりますが、ソース言語は常にわかるとは限りません。このような場合は、言語検出 API を使用できます。

モデルのダウンロード

Translator API は、高品質の翻訳を生成するようにトレーニングされたエキスパート モデルを使用します。この API は Chrome に組み込まれており、ウェブサイトがこの API を初めて使用するときにモデルがダウンロードされます。

モデルを使用できる状態かどうかを判断するには、非同期の Translator.availability() 関数を呼び出します。availability() に対するレスポンスが downloadable の場合、ダウンロードの進捗状況をリッスンして、ユーザーに通知します。ダウンロードには時間がかかる場合があります。

言語ペアのサポートを確認する

翻訳は、オンデマンドでダウンロードされる言語パックで管理されます。言語パックは、特定の言語の辞書のようなものです。

• sourceLanguage: テキストの現在の言語。
• targetLanguage: テキストの最終的な翻訳先言語。

BCP 47 言語の短いコードを文字列として使用します。たとえば、スペイン語の場合は 'es'、フランス語の場合は 'fr' です。

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

downloadprogress イベントでモデルのダウンロードの進行状況をリッスンします。

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

ダウンロードが失敗すると、downloadprogress イベントが停止し、ready Promise が拒否されます。

翻訳者を作成して実行する

変換ツールを作成するには、ユーザーのアクティベーションを確認し、非同期の create() 関数を呼び出します。Translator create() 関数には、sourceLanguage 用と targetLanguage 用の 2 つのフィールドを含む options パラメータが必要です。

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

変換ツールを取得したら、非同期の translate() を呼び出します。

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

また、長いテキストを処理する必要がある場合は、API のストリーミング バージョンを使用して translateStreaming() を呼び出すこともできます。

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

連続翻訳

翻訳は順番に処理されます。翻訳するテキストを大量に送信すると、以前の翻訳が完了するまで、後続の翻訳はブロックされます。

リクエストに最適な応答を得るには、リクエストをまとめて、翻訳が進行中であることを伝えるスピナーなどの読み込みインターフェースを追加します。

デモ

Translator API と Language Detector API を組み合わせて使用する例については、Translator API と Language Detector API のプレイグラウンドをご覧ください。

Permission Policy、iframe、Web Worker

デフォルトでは、Translator API はトップレベルのウィンドウと同一オリジンの iframe でのみ使用できます。権限に関するポリシーの allow="" 属性を使用すると、API へのアクセスをクロスオリジンの iframe に委任できます。

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

Translator API は、Permissions Policy のステータスを確認するために、各ワーカーの責任あるドキュメントを確立する複雑さから、Web Workers では使用できません。

フィードバックを共有

皆様がどのようなものを構築されているか、ぜひお聞かせください。X、YouTube、LinkedIn で、ウェブサイトやウェブ アプリケーションを共有してください。

Chrome の実装に関するフィードバックについては、バグレポートまたは機能リクエストを送信してください。