公開日: 2024 年 11 月 13 日、最終更新日: 2025 年 5 月 20 日
商品の解説 | ウェブ | 拡張機能 | Chrome ステータス | インテント |
---|---|---|---|---|
MDN | 表示 | 発送予定 |
Chrome の Translator API を使用して、ブラウザで提供される AI モデルでテキストを翻訳します。
ウェブサイトのコンテンツを複数の言語で提供し、世界中のユーザーがアクセスできるようにしているウェブサイトもあるでしょう。Translator API を使用すると、ユーザーは自分の母語で投稿できます。たとえば、ユーザーは母語でサポート チャットに参加し、ユーザーのデバイスから離れる前に、サイトでサポート エージェントが使用する言語に翻訳できます。これにより、すべてのユーザーにスムーズで高速かつ包括的なエクスペリエンスを提供できます。
通常、ウェブ上のコンテンツを翻訳するにはクラウド サービスを使用する必要があります。まず、ソース コンテンツがサーバーにアップロードされ、ターゲット言語への翻訳が実行されます。次に、結果のテキストがダウンロードされ、ユーザーに返されます。クライアントで翻訳を実行することで、サーバーの往復に必要な時間と翻訳サービスのホスティング費用を節約できます。
始める
Translator API は Chrome 138 安定版から利用できます。まず、機能検出を実行して、ブラウザが Translator API をサポートしているかどうかを確認します。
if ('Translator' in self) {
// The Translator API is supported.
}
翻訳のターゲット言語は常にわかりますが、ソース言語は常にわかるとは限りません。このような場合は、言語検出 API を使用できます。
ハードウェア要件を確認する
Chrome でこれらの API を使用して機能を操作するデベロッパーとユーザーには、次の要件があります。他のブラウザでは動作要件が異なる場合があります。
言語検出 API と翻訳 API は、パソコン版 Chrome で動作します。これらの API はモバイル デバイスでは動作しません。Prompt API、Summarizer API、Writer API、Rewriter API は、次の条件を満たす場合に Chrome で動作します。
- オペレーティング システム: Windows 10 または 11、macOS 13 以降(Ventura 以降)、Linux。Gemini Nano を使用する API は、Chrome for Android、iOS、ChromeOS ではまだサポートされていません。
- ストレージ: Chrome プロファイルを含むボリュームに 22 GB 以上の空き容量が必要です。
- GPU: 4 GB を超える VRAM。
- ネットワーク: 無制限のデータ通信または従量制でない接続。
Gemini Nano の正確なサイズは、ブラウザがモデルを更新するにつれて変化する可能性があります。現在のサイズを確認するには、chrome://on-device-internals
にアクセスして [モデルのステータス] に移動します。リストに表示された [ファイルパス] を開いて、モデルのサイズを確認します。
言語ペアのサポートを確認する
翻訳は、オンデマンドでダウンロードされる言語パックで管理されます。言語パックは、特定の言語の辞書のようなものです。
sourceLanguage
: テキストの現在の言語。targetLanguage
: テキストの最終的な翻訳先言語。
BCP 47 言語の短いコードを文字列として使用します。たとえば、スペイン語の場合は 'es'
、フランス語の場合は 'fr'
です。
const translatorCapabilities = await Translator.availability({
sourceLanguage: 'es',
targetLanguage: 'fr',
});
// 'available'
availability()
関数は、次の値を含む Promise を返します。
"unavailable"
: 実装では、指定された言語の翻訳または言語検出がサポートされていません。"downloadable"
: 実装は指定された言語の翻訳または言語検出をサポートしていますが、続行するにはダウンロードが必要です。ダウンロードはブラウザモデルである可能性があります。"downloading"
: 実装は、指定された言語の翻訳または言語検出をサポートしています。ブラウザは、関連するオブジェクトの作成の一環として、進行中のダウンロードを完了しています。"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()
関数を呼び出します。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);
}
連続翻訳
翻訳は順番に処理されます。翻訳するテキストを大量に送信すると、以前の翻訳が完了するまで、後続の翻訳はブロックされます。
リクエストに最適な応答を得るには、リクエストをまとめて、翻訳が進行中であることを伝えるスピナーなどの読み込みインターフェースを追加します。
デモ
Translator API と Language Detector API を組み合わせて使用する例については、Translator API と Language Detector API のプレイグラウンドをご覧ください。
標準化の労力
Google は、ブラウザ間の互換性を確保するため、Translator API の標準化に取り組んでいます。
API の提案はコミュニティの支持を得て、さらなる議論のために W3C Web Incubator Community Group に移行しました。Chrome チームは W3C Technical Architecture Group にフィードバックを求め、Mozilla と WebKit に標準の立場を尋ねました。
標準化活動に参加するには、Web Incubator Community Group に参加してください。
フィードバックを共有
Language Detector API を使用して構築したものをぜひお見せください。X、YouTube、LinkedIn で、ウェブサイトやウェブ アプリケーションを共有してください。