使用內建 AI 翻譯

Thomas Steiner
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

發布日期：2024 年 11 月 13 日

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

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

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

可用性

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

註冊試用來源

如要開始使用 Translator API，請按照下列步驟操作：

  1. 確認瞭解 Google 的生成式 AI 使用限制政策。
  2. 前往 Translator API 來源試用。
  3. 按一下「註冊」並填寫表單。
    • 在「Web origin」欄位中，提供來源或擴充功能 ID chrome-extension://YOUR_EXTENSION_ID。
  4. 按一下「註冊」即可提交。
  5. 複製提供的符記，並將其新增至您要啟用試用版的來源或擴充功能檔案中的每個網頁。
  6. 開始使用 Translator API。

進一步瞭解如何開始使用來源試驗。

為 localhost 新增支援

如要在來源試用期間，在 localhost 上存取 Translator API，您必須將 Chrome 更新至最新版本。接下來，請按照下列步驟進行：

  1. 在 Windows、Mac 或 Linux 等平台上開啟 Chrome。
  2. 前往chrome://flags/#translation-api。
  3. 選取「已啟用」。
    • 如果您想嘗試多種語言配對，請選取「已啟用，不受語言套件限制」。
  4. 按一下「重新啟動」或重新啟動 Chrome。

使用 Translator 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 提供標準立場。

參與並提供意見回饋

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