使用內建 AI 翻譯

Thomas Steiner

Alexandra Klepper

發布日期：2024 年 11 月 13 日，上次更新日期：2025 年 5 月 20 日

在 Chrome 中使用 Translator API，透過瀏覽器提供的 AI 模型翻譯文字。

您的網站可能已提供多種語言的內容。使用者可以透過 Translator API，以自己的母語撰寫內容，舉例來說，使用者可以透過自己慣用的語言參與支援服務即時通訊，而網站會在訊息離開使用者裝置前，將訊息翻譯成支援服務專員慣用的語言。為所有使用者提供流暢、快速且無障礙的體驗。

翻譯網頁內容通常需要使用雲端服務。 首先，來源內容會上傳至伺服器，伺服器會將內容翻譯成目標語言，然後下載翻譯結果並傳回給使用者。如果內容是暫時性的，不需要儲存到資料庫，與代管翻譯服務相比，用戶端翻譯可節省時間和成本。

開始使用

執行功能偵測，確認瀏覽器是否支援 Translator API。

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

雖然您一律知道翻譯的目標語言，但可能不一定知道來源語言。在這種情況下，您可以使用語言偵測器 API。

下載模型

Translator API 使用經過訓練的專家模型，可生成高品質的翻譯內容。這項 API 已內建於 Chrome，且模型會在網站首次使用這項 API 時下載。

如要判斷模型是否已可使用，請呼叫非同步 Translator.availability() 函式。如果 availability() 的回應為 downloadable，請監聽下載進度，並告知使用者進度，因為這可能需要一段時間。

查看支援的語言組合

翻譯功能由語言套件管理，可視需要下載。語言包就像特定語言的字典。

• 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。

// 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 和 Language Detector API 試用區。

權限政策、iframe 和 Web Worker

根據預設，Translator API 僅適用於頂層視窗和同源 iframe。使用 Permissions Policy allow="" 屬性，即可將 API 存取權委派給跨來源 iframe：

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

由於建立每個 Worker 的責任文件相當複雜，因此無法在 Web Worker 中使用 Translator API，以檢查權限政策狀態。

提供意見

我們很想看看你打造的內容。歡迎在 X、YouTube 和 LinkedIn 上分享您的網站和網路應用程式。

如要提供 Chrome 實作方面的意見，請提交錯誤報告或功能要求。