发布时间:2024 年 11 月 13 日;上次更新时间:2025 年 5 月 20 日
您可以在 Chrome 中使用 Translator API,通过浏览器中提供的 AI 模型翻译文本。
您的网站可能已经提供多种语言的网站内容。借助 Translator API,用户可以使用自己的首选语言进行书写。例如,用户可以使用自己的首选语言参与支持聊天,并且您的网站可以在消息离开用户设备之前将其翻译成支持代理的首选语言。这样可以为所有用户提供流畅、快速且包容的体验。
翻译 Web 内容通常需要使用云服务。 首先,源内容会上传到服务器,服务器会将内容翻译成目标语言,然后下载生成的文本并返回给用户。如果内容是临时性的,不需要保存到数据库,那么与托管翻译服务相比,客户端翻译可以节省时间和费用。
开始使用
Language Detector API 和 Translator API 可以在桌面版 Chrome 中运行。这些 API 无法在移动设备上运行。
运行功能检测,查看浏览器是否支持 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 实现支持以下语言。
| 代码 | 语言 |
|---|---|
ar |
阿拉伯语 |
bg |
保加利亚语 |
bn |
孟加拉语 |
cs |
捷克语 |
da |
丹麦语 |
de |
德语 |
el |
希腊语 |
en |
英语 |
es |
西班牙语 |
fi |
芬兰语 |
fr |
法语 |
he |
希伯来语 |
hi |
印地语 |
hr |
克罗地亚语 |
hu |
匈牙利语 |
id |
印度尼西亚语 |
it |
意大利语 |
ja |
日语 |
kn |
卡纳达语 |
ko |
韩语 |
lt |
立陶宛语 |
mr |
马拉地语 |
nl |
荷兰语 |
no |
挪威语 |
pl |
波兰语 |
pt |
葡萄牙语 |
ro |
罗马尼亚语 |
ru |
俄语 |
sk |
斯洛伐克语 |
sl |
斯洛文尼亚语 |
sv |
瑞典语 |
ta |
泰米尔语 |
te |
泰卢固语 |
th |
泰语 |
tr |
土耳其语 |
uk |
乌克兰语 |
vi |
越南语 |
zh |
中文 |
zh-Hant |
繁体中文 (台湾) |
演示
您可以在 Translator 和 Language Detector API 游乐场中查看 Translator API,该 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 中不可用。