利用 AI 進行用戶端翻譯

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

Maud Nalpas

Kenji Baheux

Alexandra Klepper

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

說明	網頁	額外資訊	Chrome 狀態	Intent
MDN	Chrome 138 開發人員預覽版	Chrome 138 開發人員預覽版	查看	意圖進行實驗

拓展國際市場的成本可能相當高昂。市場越多，支援的語言就越多，而語言越多，互動式功能和流程 (例如售後支援即時通訊) 就越容易出現問題。如果貴公司只有英語的客服專員，非英語母語使用者可能會難以說明遇到的問題。

我們如何運用 AI 技術，同時降低風險，並確認是否值得投資其他語言的支援服務專員，進而改善多語言使用者的體驗？

部分使用者會透過瀏覽器內建的網頁翻譯功能或第三方工具，克服語言障礙。不過，使用者體驗在互動功能 (例如售後支援即時通訊) 方面，並未達到理想水準。

對於內建翻譯功能的即時通訊工具，請盡量減少延遲時間。在裝置上處理語言，您就能在使用者提交訊息前即時翻譯。

不過，使用自動化工具彌補語言差異時，透明度至關重要。請記得，在對話開始前，請明確說明你已導入可進行翻譯的 AI 工具。這有助於建立使用者預期，並在翻譯不理想時避免尷尬情況。連結至政策，提供更多資訊。

我們正在開發用戶端 Translator API，並使用 Chrome 內建的模型。

示範聊天室

我們已建構客戶服務即時通訊功能，讓使用者輸入自己的第一語言，並即時翻譯給支援專員。

使用 Translator API

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

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

確認支援的語言組合

翻譯功能會透過語言套件進行管理，並視需要下載。語言包就像特定語言的字典。

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

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

判斷模型供應情形，並監聽 downloadprogress：

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

如果下載失敗，downloadprogress 事件就會停止，且 ready 應許會遭到拒絕。

建立及執行翻譯器

如要建立翻譯器，請呼叫非同步 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 打造的成果，在 X、YouTube 和 LinkedIn 上與我們分享網站和網路應用程式。

您可以申請加入搶先體驗方案，使用本機原型試用這個 API 和其他 API。