利用 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 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 打造的內容。歡迎在 X、YouTube 和 LinkedIn 上分享您的網站和網路應用程式。

您可以申請加入搶先體驗計畫，使用本機原型測試這項 API 和其他 API。