AI を組み込んだ翻訳

Thomas Steiner

Alexandra Klepper

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

商品の解説	ウェブ	拡張機能	Chrome ステータス	インテント
MDN	Chrome 138	Chrome 138	表示	発送予定

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

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

通常、ウェブ上のコンテンツを翻訳するにはクラウド サービスを使用する必要があります。まず、ソース コンテンツがサーバーにアップロードされ、ターゲット言語への翻訳が実行されます。次に、結果のテキストがダウンロードされ、ユーザーに返されます。クライアントで翻訳を実行することで、サーバーの往復に必要な時間と翻訳サービスのホスティング費用を節約できます。

始める

Translator API は Chrome 138 安定版から利用できます。まず、機能検出を実行して、ブラウザが Translator API をサポートしているかどうかを確認します。

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

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

モデルのダウンロード

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

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

const availability = await Translator.availability();

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

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

• 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 のプレイグラウンドをご覧ください。

標準化の労力

Google では、クロスブラウザの互換性を確保するため、Translator API の標準化に取り組んでいます。

Translator API と Language Detector API は W3C WebML ワーキング グループで採用されています。Mozilla と WebKit には、標準化に関する見解を尋ねました。

フィードバックを共有

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

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