AI を組み込んだ翻訳

Thomas Steiner
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

公開日: 2024 年 11 月 12 日

Chrome の Translator API を使用して、ローカル AI モデルを使用してブラウザでテキストを翻訳します。

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

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

対象

選択したターゲット言語は常にわかりますが、ユーザー作成コンテンツなど、ソース言語が不明な場合があります。このような場合、Translator API の提案には、Translator API と Language Detector API の両方が含まれます。これは、オリジン トライアルでも利用できます。これらの API を併用するには、両方のオリジン トライアルに登録してください。

特徴検出

Translator API がサポートされているかどうかを確認するには、次の機能検出スニペットを実行します。

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

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

翻訳は、オンデマンドでダウンロードされる言語パックで管理されます。言語パックとは、特定の言語の辞書のようなものです。これらのパックは、言語ペアがサポートされているかどうかを判断できる非同期の canTranslate() 関数とペアになっています。

canTranslate() 関数には、次の 2 つのフィールドを持つ options パラメータが必要です。

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

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

await translation.canTranslate({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});
// 'readily'

canTranslate() 関数は、次のいずれかの結果を返すことができます。

  • no: このブラウザでは、リクエストされた翻訳を行うことができません。
  • readily: ブラウザはリクエストに応じて翻訳できます。
  • after-download: ブラウザは翻訳を実行できますが、関連するモデルまたは言語パックをダウンロードした後にのみ実行できます。

ダウンロードの進行状況をリッスンするには、downloadprogress イベントを使用します。

translator.ondownloadprogress = progressEvent => {
  updateDownloadProgressBar(progressEvent.loaded, progressEvent.total);
};

ダウンロードに失敗すると、downloadprogress イベントの出力が停止し、ready プロミスが拒否されます。

翻訳ツールを作成して実行する

トランスレータを作成するには、非同期の translation.createTranslator() 関数を呼び出します。canTranslate() と同様に、sourceLanguage 用と targetLanguage 用の 2 つのフィールドを持つオプション パラメータが必要です。

// Create a translator that translates from English to French.
const translator = await self.translation.createTranslator({
  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 ?"

オリジン トライアルの制限事項

オリジン トライアル中は、次の制限が適用されます。

サポートされている言語ペア

現在、翻訳用にダウンロードできる言語パックは最大 3 つです。Google は、ユーザーのプライバシーを守る高水準の基準を維持しながら、今後のリリースでサポートされている言語の範囲を拡大していく予定です。必要な言語ペアが canTranslate() 関数でサポートされているかどうかを確認できます。

使用頻度の低い特定の言語ペアがフィンガープリントに使用される可能性があります。たとえば、ゲール語やカタロニア語など、あまり一般的でない言語間よりも、英語とスペイン語間の翻訳の方が一般的です。あまり一般的でない言語ペアは、ユーザー識別のためのデータポイントと見なされる可能性があります。

オリジン トライアルでは、ユーザーのプライバシーを保護するため、翻訳可能な言語ペアの候補を制限しています。言語ペアは次の条件を満たしている必要があります。

  • Chrome で、原文の言語と翻訳する言語の両方が優先言語として設定されている。
  • または、一方の言語が Chrome で優先言語として設定されており、もう一方の言語が次の一般的な言語のいずれかである場合。
    • 英語（en）
    • 標準中国語（zh、簡体）または台湾語（zh-Hant、繁体）
    • 日本語（ja）
    • ポルトガル語（pt）
    • ロシア語（ru）
    • スペイン語（es）
    • トルコ語（tr）
    • ヒンディー語（hi）
    • ベトナム語（vi）
    • ベンガル語（bn）

ローカルテストで言語の制限を回避する

ローカル プロトタイピングでは、コマンドライン オプション --disable-features=TranslationAPIAcceptLanguagesCheck を指定して Chrome を実行することで、これらのチェックをバイパスできます。または、chrome://flags/#translation-api を [言語パックの上限なしで有効にする] に設定します。

chrome://on-device-translation-internals/ にアクセスして、言語パックを手動でインストールまたはアンインストールします。

連続翻訳

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

翻訳リクエストの応答性を最大限に高めるには、リクエストをチャンクに分割し、スピナーなどの読み込みインターフェースを表示して、翻訳が進行中であることを伝えることを検討してください。

ウェブワーカーの可用性

オリジン トライアル中、Translator API はメインスレッドからのみサポートされます。API が広く利用可能になれば、ウェブワーカーでもサポートされる予定です。

デモ

Language Detector API と組み合わせて使用される Translator API は、Translator and Language Detector API のプレイグラウンドで確認できます。

標準化の取り組み

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

API 提案はコミュニティ サポートを受けており、さらなる議論のために W3C Web Incubator コミュニティ グループに移行しました。Chrome チームは W3C Technical Architecture Group にフィードバックを求め、Mozilla と WebKit で基準の位置付けを尋ねました。

参加してフィードバックを共有する

オリジン トライアルに参加して Translator API のテストを始め、フィードバックをお寄せください。ご意見は、この API の今後のバージョンとすべての組み込み AI API の構築と実装に直接影響します。