使用内置 AI 进行翻译

Thomas Steiner

Alexandra Klepper

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

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

您的网站可能已经提供多种语言的网站内容。借助 Translator API，用户可以使用自己的首选语言进行书写。例如，用户可以使用自己的首选语言参与支持聊天，而您的网站可以在消息离开用户设备之前，将其翻译成支持代理的首选语言。这样可以为所有用户提供流畅、快速且包容的体验。

翻译 Web 内容通常需要使用云服务。 首先，源内容会上传到服务器，服务器会将内容翻译成目标语言，然后下载生成的文本并返回给用户。如果内容是临时性的，不需要保存到数据库，那么与托管翻译服务相比，客户端翻译可以节省时间和费用。

开始使用

运行功能检测，查看浏览器是否支持 Translator API。

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

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

模型下载

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

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

检查语言对支持

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

• 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() 函数。Translator 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);
}

顺序翻译

翻译按顺序处理。如果您发送大量要翻译的文本，后续翻译将被阻止，直到之前的翻译完成。

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

支持的语言

Chrome 的 Translator API 实现支持以下语言。

演示

您可以在 Translator 和 Language Detector API 游乐场中查看 Translator API（与 Language Detector API 结合使用）。

权限政策、iframe 和 Web Worker

默认情况下，Translator API 仅适用于顶级窗口和同源 iframe。可以使用 权限政策 allow="" 属性将对该 API 的访问权限委托给跨源 iframe ：

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

由于需要为每个 worker 建立负责任的文档，以便检查权限政策状态，因此 Translator API 在 Web Worker 中不可用。

分享反馈

我们希望了解您正在开发的内容。请在 X、YouTube 和 LinkedIn 上与我们分享您的 网站和 Web 应用。

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