使用内置 AI 进行翻译

Thomas Steiner

Alexandra Klepper

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

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

在 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() 函数。它需要一个包含两个字段的 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 ?"

或者，如果您需要处理较长的文本，也可以使用 API 的流式版本并调用 translateStreaming()。

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

顺序翻译

翻译按顺序处理。如果您发送大量文本进行翻译，后续翻译会因之前的翻译尚未完成而被阻止。

为了获得最佳响应效果，请将请求分块，并添加加载界面（例如微调器），以表明翻译正在进行中。

演示

您可以在翻译器和语言检测器 API 游乐场中查看与语言检测器 API 结合使用的翻译器 API。

标准化工作量

我们正在努力使 Translator API 标准化，以确保跨浏览器兼容性。

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

您可以加入 Web Incubator Community Group，参与标准制定工作。

分享反馈

我们很想看看您使用 Language Detector API 构建了哪些内容。欢迎在 X、YouTube 和 LinkedIn 上与我们分享您的网站和 Web 应用。

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