使用內建 AI 翻譯

Thomas Steiner

Alexandra Klepper

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

說明	網頁	額外資訊	Chrome 狀態	Intent
MDN	Chrome 138	Chrome 138	查看	出貨意願

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

您的網站可能已提供多種語言的內容，方便全球使用者存取。使用者可以透過 Translator API，以自己的母語做出貢獻。舉例來說，使用者可以透過母語參與支援服務即時通訊，網站會在對話內容離開使用者裝置前，將其翻譯成支援服務專員使用的語言。為所有使用者提供流暢、快速且無障礙的體驗。

翻譯網頁內容通常需要使用雲端服務。 首先，系統會將來源內容上傳至伺服器，並執行翻譯作業，將內容翻譯成目標語言，然後下載翻譯結果並傳回給使用者。在用戶端執行翻譯作業可節省伺服器往返所需的時間，以及翻譯服務的代管費用。

開始使用

Translator API 適用於 Chrome 138 穩定版。首先，請執行功能偵測，確認瀏覽器是否支援 Translator API。

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

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

查看支援的語言組合

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

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

// 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 (與 Language Detector API 搭配使用)，請前往 Translator 和 Language Detector API 試用區。

標準化作業

我們正在努力為 Translator API 制定標準，確保跨瀏覽器相容性。

我們的 API 提案獲得社群支持，並已移至 W3C Web Incubator Community Group 進行進一步討論。Chrome 團隊向 W3C 技術架構小組徵求意見，並請 Mozilla 和 WebKit 提供標準立場。

如要參與標準制定工作，請加入 Web Incubator Community Group。

提供意見

我們很想瞭解您使用 Language Detector API 打造的內容。歡迎在 X、YouTube 和 LinkedIn 上分享您的網站和網路應用程式。

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