使用內建 AI 翻譯

Thomas Steiner
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

發布日期：2024 年 11 月 12 日

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

你的網站可能已經提供多種語言的網站內容，讓全球觀眾都能存取。透過 Translator API 使用者可以透過自己的母語貢獻內容舉例來說，使用者可以使用第一語言參與支援聊天，而您的網站會將內容翻譯成支援專員使用的語言，然後傳送給使用者的裝置。這麼做可為所有使用者提供流暢、快速且無障礙的體驗。

過去，要翻譯網站上的內容，通常必須使用雲端服務。首先，來源內容會上傳至伺服器，然後執行翻譯至目標語言的作業，接著下載結果文字並傳回給使用者。在用戶端執行翻譯，就能節省伺服器行程所需的時間，以及託管翻譯服務的費用。

可用性

雖然系統一向會知道所選的目標語言，但在某些情況下，原文語言可能無法得知，例如使用者自製內容。在這種情況下，Translator API 提案會同時包含 Translator API 和 Language Detector API，後者也適用於原始試用版。請註冊這兩項來源試用，以便同時使用這些 API。

特徵偵測

如要判斷是否支援 Translator API，請執行下列功能偵測程式碼片段。

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

確認語言組合支援

翻譯功能會透過語言套件進行管理，並視需要下載。語言包就像特定語言的字典。這些套件會搭配非同步 canTranslate() 函式，讓您判斷系統是否支援某個語言組合。

canTranslate() 函式需要 options 參數，其中包含兩個欄位：

  • sourceLanguage：文字目前的語言。
  • targetLanguage：文字應翻譯成最終語言。

使用 BCP 47 語言代碼做為字串。例如 'es' (西班牙文) 或 'fr' (法文)。

await translation.canTranslate({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});
// 'readily'

canTranslate() 函式可傳回下列任一結果：

  • no：這個瀏覽器無法按照要求翻譯。
  • readily：瀏覽器可依要求翻譯。
  • after-download：瀏覽器必須先下載相關模型或語言套件，才能執行翻譯作業。

您可以使用 downloadprogress 事件監聽下載進度：

translator.ondownloadprogress = progressEvent => {
  updateDownloadProgressBar(progressEvent.loaded, progressEvent.total);
};

如果下載失敗，系統就會停止發出 downloadprogress 事件，並拒絕 ready 應許。

建立及執行翻譯工具

如要建立翻譯器，請呼叫非同步 translation.createTranslator() 函式。和 canTranslate() 一樣，需要包含兩個欄位的選項參數，一個用於 sourceLanguage，另一個用於 targetLanguage。

// Create a translator that translates from English to French.
const translator = await self.translation.createTranslator({
  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 ?"

來源試用版的限制

來源試用期間適用下列限制。

支援的語言組合

目前最多可下載三個語言套件進行翻譯。我們承諾在日後的版本中擴大支援的語言範圍，同時維持使用者隱私權的高標準。您可以使用 canTranslate() 函式確認所需語言組合是否受到支援。

某些較不常使用的語言組合可能會用於指紋記錄。舉例來說，比起較不常見的語言 (如蓋爾文和加泰隆尼亞文)，在英文和西班牙文之間互譯通常更為常見。較不常見的語言組合可能會視為使用者身分識別的資料點。

在原始試用期間，我們會限制可翻譯的語言組合，以保護使用者隱私。語言組合必須符合下列條件：

  • 來源語言和目標語言都會在 Chrome 中設為偏好語言。
  • 或者，他有其中一種語言設為 Chrome 的偏好語言，另一種則是下列熱門語言：
    • 英文 (en)
    • 中文 (zh；簡體) 或中文 (zh-Hant；繁體)
    • 日文 (ja)
    • 葡萄牙文 (pt)
    • 俄文 (ru)
    • 西班牙文 (es)
    • 土耳其文 (tr)
    • 北印度文 (hi)
    • 越南文 (vi)
    • 孟加拉文 (bn)

在本機測試中略過語言限制

針對本機原型設計，您可以使用指令列選項 --disable-features=TranslationAPIAcceptLanguagesCheck 執行 Chrome，藉此略過這些檢查。您也可以將 chrome://flags/#translation-api 設為「Enable without language pack limit」。

請前往 chrome://on-device-translation-internals/ 手動安裝及解除安裝語言套件。

依序翻譯

系統會依序處理翻譯作業。如果您傳送大量文字進行翻譯，系統會先完成先前的翻譯作業，再處理後續的翻譯作業。

為確保翻譯要求的回應速度最佳，請將翻譯要求分成多個部分，並考慮顯示載入介面 (例如旋轉圖示)，以表示翻譯作業正在進行中。

Web worker 可用性

在來源試用期間，Translator API 僅支援主執行緒。在 API 廣泛應用之後，我們打算在網路工作人員中提供 。

示範

您可以在 Translator 和 Language Detector API 遊樂場中，查看與 Language Detector API 搭配使用的 Translator API。

標準化作業

我們正在努力將 Translator API 標準化，以確保跨瀏覽器的相容性。

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

參與並提供意見回饋

立即加入來源試用並提供意見，開始測試 譯者 API。您的意見回饋會直接影響我們建構及實作此 API 後續版本，以及所有內建 AI API 的方式。