使用内置 AI 进行翻译

发布时间: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

模型下载

Translator API 使用经过训练的模型来生成高质量的摘要。该 API 内置于 Chrome 中,网站首次使用该 API 时会下载专家模型。

查看硬件要求

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

Language Detector API 和 Translator API 可在桌面版 Chrome 中使用。这些 API 不适用于移动设备。当满足以下条件时,Prompt API、Summarizer API、Writer API 和 Rewriter API 可在 Chrome 中正常运行:

  • 操作系统:Windows 10 或 11;macOS 13 及更高版本(Ventura 及更高版本);或 Linux。使用 Gemini Nano 的 API 尚不支持 Android 版 Chrome、iOS 版 Chrome 和 ChromeOS 版 Chrome。
  • 存储空间:包含 Chrome 个人资料的卷上至少有 22 GB 的可用空间。
  • GPU:VRAM 严格大于 4 GB。
  • 网络:无限流量或不按流量计费的网络连接。

随着浏览器更新模型,Gemini Nano 的确切大小可能会有所不同。如需确定当前大小,请访问 chrome://on-device-internals,然后前往模型状态。打开列出的文件路径,以确定模型大小。

如需确定模型是否已准备就绪,请调用异步 Translator.availability() 函数。如果对 availability() 的响应为 downloadable,请监听下载进度,以便告知用户下载进度,因为下载可能需要一些时间。

const availability = await Translator.availability();

检查语言对支持情况

翻译功能通过语言包进行管理,可按需下载。语言包就像特定语言的字典。

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

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

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// '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() 函数。翻译器 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 标准化,以实现跨浏览器兼容性。

Translator API 和 Language Detector API 已被 W3C WebML 工作组采用。我们已向 MozillaWebKit 询问了他们对相关标准的立场。

分享反馈

我们很想看看您在开发什么。欢迎在 XYouTubeLinkedIn 上与我们分享您的网站和 Web 应用。

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