AI によるクライアントサイド翻訳

Maud Nalpas

Kenji Baheux

Alexandra Klepper

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

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

ビジネスを海外市場に拡大するには費用がかかる場合があります。市場が増えれば、サポートする言語も増える可能性が高くなります。言語が増えると、アフターセールス サポート チャットなどのインタラクティブな機能やフローで問題が発生する可能性があります。企業に英語を話すサポート エージェントしかいない場合、英語を母語としないユーザーは、発生した問題を正確に説明するのが難しいことがあります。

AI を使用して、多言語を話すユーザーのエクスペリエンスを向上させながら、 リスクを最小限に抑え、追加の言語を話すサポート エージェント に投資する価値があるかどうかを確認するにはどうすればよいでしょうか？

一部のユーザーは、ブラウザに組み込まれている ページ翻訳機能やサードパーティ ツールを使用して、言語の壁を乗り越えようとしています。しかし、ユーザー エクスペリエンスは アフターセールス サポート チャットなどのインタラクティブな機能では不十分です。

翻訳が統合されたチャットツールでは、遅延を最小限に抑えることが重要です。 デバイス上で言語を処理することで、 ユーザーがメッセージを送信する前にリアルタイムで翻訳できます。

ただし、自動 ツールで言語のギャップを埋める場合は、透明性が重要です。会話を開始する前に、この翻訳を可能にする AI ツールを実装していることを明確にしてください。これにより、翻訳が完璧でない場合に、期待外れに終わることを防ぐことができます 。詳細については、 ポリシーへのリンクをご覧ください。

Chrome に組み込まれたモデルを使用して、クライアントサイドの Translator API を開発しています。

デモチャット

ユーザーが母語で入力し、サポート エージェントがリアルタイムで翻訳を受け取ることができるカスタマー サポート チャットを作成しました。

Translator API を使用する

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

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

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

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

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

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

モデルの可用性を確認し、 をリッスンします。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() 関数を呼び出します。この関数には、 フィールドを含むオプション パラメータが必要です。1 つは sourceLanguage 用、もう 1 つは targetLanguage 用です。

// 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 ?"

次のステップ

Translator API を使用して構築したウェブサイトやウェブ アプリケーションを、X、YouTube、LinkedIn で共有してください。LinkedIn

早期プレビュー プログラムに登録 すると、ローカル プロトタイプでこの API やその他の API をテストできます。