利用 AI 進行用戶端翻譯

探索實驗版 Translator API，為全球客戶服務提供支援。

Maud Nalpas
Maud Nalpas
X GitHub
Kenji Baheux
Kenji Baheux
Alexandra Klepper
Alexandra Klepper
X GitHub LinkedIn

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

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

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

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

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

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

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

示範聊天室

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

使用 Translator API

這個 Translator API 有兩個重要方法：

  • canTranslate()：檢查語言組合的翻譯模型是否已就緒。如果裝置上已有模型，則傳回 "readily"；如果瀏覽器必須先下載模型，則傳回 "after-download"；如果無法翻譯，則傳回 "no"。
  • createTranslator()：這會以非同步方式設定 Translator 物件。如果模型需要下載，系統會等到模型準備就緒。

Translator 物件只有一個方法：

  • translate()：輸入來源文字，系統就會輸出翻譯版本。

由於這項功能目前為實驗性質，且僅適用於 Chrome，因此請務必將所有程式碼包裝在功能偵測中。

const supportsOnDevice = 'model' in window && 'createTranslator' in model;
if (!supportsOnDevice) {
  return;
}

const parameters = { sourceLanguage: 'en', targetLanguage: 'pt' };
const modelState = await model.canTranslate(parameters);
if (modelState === 'no') {
  return;
}
const onDeviceTranslator = await model.createTranslator(parameters);

const result = await onDeviceTranslator.translate(input);
if (!result) {
  throw new Error('Failed to translate');
}
return result;

模型需要一段時間才能供使用者使用。您可以透過下列兩種方式進行：

  • 等到模型準備就緒後，再啟用翻譯功能的 UI 元素。
  • 請先使用伺服器端 AI 進行翻譯，然後在下載模型後切換至用戶端。

後續步驟

註冊 Translator API 來源測試版，即可為 Chrome 上所有來源的使用者啟用翻譯功能。

我們希望能聽聽你的看法。如要分享對這項做法的意見，請在說明頁面中提出問題，並告訴我們您最感興趣的用途。

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