利用 AI 进行客户端翻译

Maud Nalpas

Kenji Baheux

Alexandra Klepper

发布时间：2024 年 5 月 16 日，上次更新时间：2024 年 11 月 13 日

说明类视频	Web	扩展程序	Chrome 状态	目的
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 上与我们分享您的 网站和 Web 应用。

您可以注册参加 Early Preview Program 以便使用本地原型测试此 API 和其他 API。