使用内置 AI 进行翻译

Thomas Steiner

Alexandra Klepper

发布时间：2024 年 11 月 13 日；最后更新时间：2025 年 5 月 20 日

解说	Web	扩展程序	Chrome 状态	意向
MDN	Chrome 138 Beta 版	Chrome 138 Beta 版	视图	意图进行实验

在 Chrome 中使用 Translator API，通过浏览器中提供的 AI 模型翻译文本。

您的网站可能已经以多种语言提供网站内容，以便全球观众访问。借助 Translator API，用户可以用自己的母语贡献内容。例如，用户可以用其第一语言参与支持聊天，您的网站可以在信息离开用户设备之前将其翻译成支持人员使用的语言。这样可以为所有用户提供流畅、快速且包容的体验。

通常，若要翻译网页内容，需要使用云服务。首先，源内容会上传到服务器，服务器会将其翻译成目标语言，然后下载生成的文本并将其返回给用户。通过在客户端上运行翻译，您可以节省服务器往返所需的时间，并降低托管翻译服务的费用。

开始使用

Translator API 从 Chrome 138 稳定版开始提供。首先，运行功能检测，看看浏览器是否支持 Translator API。

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

虽然您始终知道翻译的目标语言，但可能并不总是知道源语言。在这种情况下，您可以使用 Language Detector API。

检查语言对支持情况

翻译是通过按需下载的语言包进行管理的。语言包就像给定语言的字典。

• sourceLanguage：文本的当前语言。
• targetLanguage：文本应翻译成的最终语言。

使用 BCP 47 语言短代码作为字符串。例如，'es' 表示西班牙语，'fr' 表示法语。

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

availability() 函数会返回一个包含以下值的 promise：

• "unavailable"：实现不支持对给定语言进行翻译或语言检测。
• "downloadable"：此实现支持对给定语言进行翻译或语言检测，但需要下载才能继续。下载内容可能是浏览器模型。
• "downloading"：实现支持对给定语言进行翻译或语言检测。浏览器正在完成正在进行的下载，以创建关联的对象。
• "available"：实现支持对指定语言进行翻译或语言检测，并且所有必要的下载均已完成。

使用 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 and Language Detector API Playground 中查看与 Language Detector API 搭配使用的 Translator API。

标准化工作

我们正在努力规范 Translator API，以确保跨浏览器兼容性。

我们的 API 提案获得了社区支持，已移至 W3C Web Incubator 社区群组进行进一步讨论。Chrome 团队向 W3C 技术架构组征求了反馈，并询问了 Mozilla 和 WebKit 的标准立场。

您可以加入 Web Incubator Community Group（网站孵化器社区群组），参与制定标准。

分享反馈

我们希望了解您使用 Language Detector API 构建了什么。欢迎通过 X、YouTube 和 LinkedIn 与我们分享您的网站和 Web 应用。

如需针对 Chrome 的实现提供反馈，请提交bug 报告或功能请求。