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 Promise が拒否されます。

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

変換ツールを作成するには、非同期の 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 ?"

次のステップ

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

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