translation-api：浏览器内置翻译与语言检测利器

translation-api：浏览器内置翻译与语言检测利器

项目介绍

translation-api 是由 Chrome 内置 AI 团队提出的一项早期设计草图，旨在为网站开发者提供一种利用浏览器现有语言翻译能力的新方法。在浏览器翻译功能无法提供帮助的场合，如用户输入翻译、复杂 DOM 页面的翻译、提供页面内翻译界面或翻译非 DOM 内容（如语音内容）时，这项功能尤为实用。

项目技术分析

translation-api 提供了一套 JavaScript API，使得开发者能够访问浏览器内置的语言翻译和检测能力。这一设计的核心目标是简化翻译和语言检测过程，降低资源消耗。以下是该项目的几个关键技术要点：

• 实时翻译和语言检测：translation-api 允许开发者实时翻译用户输入内容，并进行语言检测，以便自动将未知语言翻译成目标语言。
• 与现有技术和谐共存：translation-api 考虑到了与现有浏览器和操作系统翻译技术（如 Brave、Chrome、Edge、Firefox 和 Safari）的兼容性。
• 灵活的实现策略：项目允许各种实现策略，包括设备端和云端的翻译，同时将这些细节抽象化，不暴露给开发者。

项目及应用场景

translation-api 的应用场景广泛，以下是一些具体例子：

• 用户输入翻译：在用户输入框中实时翻译用户文本。
• 复杂页面元素翻译：针对复杂的 DOM 结构，提供翻译功能。
• 非 DOM 内容翻译：翻译如语音输入等不在 DOM 中的内容。
• 页面内翻译界面：开发者可以提供页面内的翻译按钮或功能，方便用户在页面上直接翻译内容。

项目特点

以下是 translation-api 的几个显著特点：

• BCP 47 语言标签：translation-api 使用 BCP 47 语言标签来表示语言，这与 JavaScript Intl API 或 HTML lang 属性一致。
• 语言检测结果的置信度：语言检测返回结果包含检测到的语言和置信度，开发者可以根据置信度决定是否进行翻译。
• 预期输入语言：开发者可以指定需要检测的语言列表，以优化检测过程。
• 能力检查：translation-api 提供了检查功能，允许开发者在创建翻译或检测对象之前了解实现的能力。

以下是具体代码示例：

// 创建翻译器并翻译文本
const translator = await Translator.create({
  sourceLanguage: "en",
  targetLanguage: "ja"
});
const text = await translator.translate("Hello, world!");

// 创建语言检测器并检测文本
const detector = await LanguageDetector.create();
const results = await detector.detect(someUserText);

translation-api 的设计考虑到了不同浏览器的实现差异，允许开发者根据实际可用性进行灵活处理。例如，如果检测器不可用，开发者可以选择使用云端 API 进行翻译。

在处理翻译和语言检测时，translation-api 也考虑到了性能和隐私。开发者可以选择是否使用设备端翻译以确保用户数据不离开设备，同时也可以根据模型标识符来控制使用的翻译和语言检测模型。

总结而言，translation-api 为开发者提供了一种新的方法来利用浏览器的内置翻译和语言检测能力，简化了开发流程，提高了用户体验，是一个值得关注的开源项目。