AI を組み込んだ翻訳

Thomas Steiner

Alexandra Klepper

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

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

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

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

始める

Language Detector API と Translator API は、パソコンの Chrome で動作します。これらの API はモバイル デバイスでは動作しません。

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

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

翻訳の訳文の言語は常にわかりますが、原文の言語がわからない場合があります。このような場合は、 Language Detector 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 プロミスが拒否されます。

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

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

// 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);
}

順次翻訳

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

リクエストに最適なレスポンスを得るには、リクエストをチャンクに分割し、 読み込みインターフェース（ スピナーなど）を追加して、翻訳が進行中であることを伝えます。

サポートされている言語

Chrome の Translator API の実装では、次の言語がサポートされています。

デモ

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

権限ポリシー、iframe、ウェブワーカー

デフォルトでは、Translator API はトップレベル ウィンドウと同一オリジンの iframe でのみ使用できます。Permissions Policy の Permissions Policy 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>

Permissions Policy のステータスを確認するために、各ワーカーの責任あるドキュメントを確立することが複雑なため、Translator API はウェブワーカーでは使用できません。

フィードバックを共有

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

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