利用 AI 进行客户端翻译

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

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

说明类视频 Web 扩展程序 Chrome 状态 目的
MDN Chrome 138 Chrome 138 视图 Intent to Ship

将业务拓展到国际市场可能需要花费大量资金。更多市场可能意味着需要支持更多语言，而更多语言可能会给互动功能和流程带来挑战，例如售后支持聊天。如果贵公司只有英语支持人员，非英语母语者可能难以准确说明他们遇到的问题。

我们如何利用 AI 改善多语言用户的体验，同时最大限度地降低风险，并确认是否值得投资于会说其他语言的支持人员？

有些用户会尝试使用浏览器的内置网页翻译功能或第三方工具来克服语言障碍。但互动功能（例如售后支持聊天）的用户体验不尽如人意。

对于集成翻译功能的聊天工具，务必尽量减少延迟时间。 通过在设备上处理语言，您可以在用户提交消息之前实时翻译。

不过，在利用自动化工具弥合语言障碍时，透明度至关重要。请注意，在对话开始之前，请明确说明您已实现可进行此翻译的 AI 工具。这样可以设定预期，并有助于避免翻译不完美时出现尴尬的时刻。指向包含更多信息的政策的链接。

我们正在开发一个客户端 Translator API，该 API 具有内置到 Chrome 中的模型。

查看硬件要求

开发者和在 Chrome 中使用这些 API 运行功能的用户必须满足以下要求。其他浏览器可能有不同的运行要求。

Language Detector API 和 Translator API 可在桌面版 Chrome 中使用。这些 API 不适用于移动设备。

当满足以下条件时，Prompt API、Summarizer API、Writer API、Rewriter API 和 Proofreader API 可在 Chrome 中运行：

  • 操作系统：Windows 10 或 11；macOS 13 及更高版本（Ventura 及更高版本）； Linux；或 ChromeOS（从平台 16389.0.0 及更高版本开始）Chromebook Plus 设备。 非 Chromebook Plus 设备上的 Android 版 Chrome、iOS 版 Chrome 和 ChromeOS 版 Chrome 尚不支持使用 Gemini Nano 的 API。
  • 存储空间：包含 Chrome 个人资料的卷上至少有 22 GB 的可用空间。
  • GPU 或 CPU：内置模型可以使用 GPU 或 CPU 运行。
    • GPU：VRAM 严格大于 4 GB。
    • CPU：16 GB 或更多 RAM，以及 4 个或更多 CPU 核心。
  • 网络：无限流量或不按流量计费的网络连接。

随着浏览器更新模型，Gemini Nano 的确切大小可能会有所不同。如需确定当前大小，请访问 chrome://on-device-internals。

演示聊天

我们构建了一个客户支持聊天功能，用户可以使用自己的母语输入内容，支持代理可以实时翻译这些内容。

使用 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() 函数。它需要一个包含两个字段的 options 参数，一个用于 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 应用。

您可以注册加入抢先体验计划，以便使用本地原型测试此 API 和其他 API。