Chrome使用内置 AI 进行翻译(Language Detector API、Translator API)

613 阅读3分钟

最近闲来无事再看chrome的新功能,突然发现chrome有一个ai试用 里面有一个翻译功能,简单的学习了一下

学习结果文档: learn-demo/Chrome使用内置 AI 进行翻译(Language Detector API、Translator API)/index.html at main · saozhu2333/learn-demo

95d7148d-fd2b-40ee-b1c2-bf2eb4c8feab.gif

可用性

因为目前为源试用阶段,所以可用性很低 目前chrome给出的试用版本为

Translator API:chrome131-137

Language Detector API:chrome132-135

试用阶段 需要去chrome中设置对应的实验api为启用

Translator API:chrome://flags/#translation-api
注:可设置为Enable without language pack limit(启用,不限制语言包)
Language Detector API:chrome://flags/#language-detection-api

api功能

Translator API:通过本地 AI 模型在浏览器中翻译文本

Language Detector API:检测当前语言类型

使用方法

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

Translator API

检查该api是否可用

if ('translation' in self && 'createTranslator' in self.translation) {
​
}

检查需要进行翻译的语言支持情况

canTranslate() 函数需要一个包含两个字段的 options 参数:

  • sourceLanguage:文本的当前语言。
  • targetLanguage:文本应翻译成的最终语言。
await translation.canTranslate({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

canTranslate() 函数可以返回以下任一结果:

  • no:此浏览器无法按要求进行翻译。
  • readily:浏览器可以按请求进行翻译。
  • after-download:浏览器可以执行翻译,但只有在下载相关模型或语言包后才能执行。

可以使用 downloadprogress 事件监听下载进度

translator.ondownloadprogress = progressEvent => {
  updateDownloadProgressBar(progressEvent.loaded, progressEvent.total);
};

注:这个支持情况可能因为试用原因,我这边自动下载了三个语言包他就不会自动下载了只会提示after-download(浏览器可以执行翻译,但只有在下载相关模型或语言包后才能执行)

我这边通过设置translation-api设置为Enable without language pack limit(启用,不限制语言包)

进入chrome://on-device-translation-internals/手动安装卸载语言包是可以的

官方给标注了这里,但是说试用期间最多三个,我这里自动下载三个就只会给提示不能下载了 但是手动加了多个 可以使用。不太能看明白官方给出的这个试用期间的语言包限制,有大佬能看明白的求解释。

创建转换器

创建转换器和检测语言需要的参数相同

  • sourceLanguage:文本的当前语言。
  • targetLanguage:文本应翻译成的最终语言。
const translator = await self.translation.createTranslator({
  sourceLanguage: 'zh',
  targetLanguage: 'en',
});

运行转换器

await translator.translate('你好');

Language Detector API

检查该api是否可用

if ('ai' in self && 'languageDetector' in self.ai)
  // The Language Detector API is available.
}  

是否能检测该语言

const languageDetectorCapabilities = await self.ai.languageDetector.capabilities();
languageDetectorCapabilities.languageAvailable('es');
  • 'no':当前浏览器支持 Language Detector API,但目前无法使用。例如,由于没有足够的可用磁盘空间来下载模型。
  • 'readily':当前浏览器支持 Language Detector API,并且可以立即使用。

初始化语言检测器

 let isTrue = await self.ai.languageDetector.capabilities();
          // 当前浏览器支持 Language Detector API,但目前无法使用。例如,由于没有足够的可用磁盘空间来下载模型。
          if (isTrue.available == "no") {
            return;
          }
          // 当前浏览器支持 Language Detector API,并且可以立即使用。
          if (isTrue.available == "readily") {
            // 初始化语言检测器
            detector = await self.ai.languageDetector.create();
            // 'after-download':当前浏览器支持 Language Detector API,但需要先下载模型。
          } else {
            // 初始化并下载
            detector = await self.ai.languageDetector.create({
              monitor(m) {
                m.addEventListener("downloadprogress", (e) => {
                  console.log(`Downloaded ${e.loaded} of ${e.total} bytes.`);
                });
              },
            });
            // 下载后准备
            await detector.ready;
          }

Language Detector API 使用排名模型来确定给定文本最有可能使用的是哪种语言。排名是一种机器学习,其目标是排列一组项。在本例中,Language Detector API 会按概率从高到低对语言进行排名。

参考资料

1.内置 AI 的语言检测  |  AI on Chrome  |  Chrome for Developers

2.使用内置 AI 进行翻译  |  AI on Chrome  |  Chrome for Developers