纯前端手搓「AI 翻译」，手还没搓热就搞定了

寨可是Jax
1,436 阅读5分钟

💰 点进来就是赚到知识点！看我只用 JavaScript 就能实现一个翻译 App，点赞、收藏、评论更能促进消化吸收！

🚀 想解锁更多 Web AI 的强大能力吗？快来订阅专栏「Web AI 进化录」!

📣 我是 Jax，在畅游 Web 技术海洋的又一年，我仍然是坚定不移的 JavaScript 迷弟，Web 技术带给我太多乐趣。如果你也和我一样，欢迎关注、私聊！

开门见 Demo

先来玩玩这个 Demo —— 纯前端实现的多语种翻译工具（需要用最新版 Chrome Canary 打开）。

20241020-172100.gif

在上面的 Demo 中，在左侧的文本框输入文字后，程序会自动检测所输文字属于哪个语种；在右侧切换目标语种后，可以自动翻译，响应速度也很快。而所有这些，全都是纯前端技术实现的！

如果你的感觉是：”哟？有点儿意思！“ 那么这篇文章就是专门为你而写的，读下去吧。

在具体实现层面，我使用了 Chrome 内置的 Translation API，只需要几行 JavaScript 代码，就能做到响应迅速的本地翻译，丝毫不依赖云端服务。

为什么需要本地翻译 API

想必大家都用过或者听说过「沉浸式翻译」这个浏览器扩展，在使用时，我们可以选择各种翻译服务，然后把自己的 API key 配置进去。后续的服务调用就都记在自己账上了。有时候，这个 API key 可不太容易弄到手。你可能得先爬梯子，然后注册账号，用国外的支付账号充值，最后得到可用的 token —— 对咱们国内用户来说，这里的每一个环节都有可能难搞到让人倍感辛酸。

但如果浏览器本身自带了翻译模型，而且支持开发者用 API 的形式调用，那可太方便了。不但不依赖特定的网络环境，不需要特定账号，不需要充值，甚至完全可以断网使用！而且在翻译一些比较隐私的内容时，也不用担心信息上传给第三方云服务会被泄露出去。简直完美！

API 现状

Translation API 是 Chrome AI 团队正在推进的一项 W3C 提案，目前仍处于草稿修订状态。

根据当前的设计思路，API 可以分为两部分：检测和翻译。

  • 检测 API 用于检测一段文本属于哪个语种；
  • 而翻译 API 就是把一段文本翻译为另一个语种。

由于方案还没有稳定成型，所以我们还没办法在正式版的 Chrome 中使用 Translation API。但该功能已经隐藏在 Chrome Canary 版本中了，喜欢尝鲜的小伙伴请跟上，我来带你解锁！

解锁方法

  1. 首先，你需要安装 Chrome Canary，版本号不应低于 131.0.6778.2。如果是经常读我文章的读者，想必 Canary 已经是家常必备工具了。

    20241020-150432.jpeg

  2. 安装后，访问 chrome://flags/#translation-api，将「Language detection web platform API」和「Experimental translation API」都设为 enabled。

    20241020-150116.jpeg

  3. 重启 Canary。

  4. 访问 chrome://on-device-translation-internals/，点击所有的「install」按钮以安装语言包。

    20241020-150726.jpeg

  5. 访问 chrome://components/，在页面中搜索「TranslateKit」，在所有搜到的选项下方点击「Check for update」更新到最新。

    20241020-151148.jpeg

  6. 在任意页面打开 Console，分别执行 await translation.canDetect() 和 await translation.canDetect({ sourceLanguage: 'en', targetLanguage: 'es' })

    20241020-151459.jpeg

    如果执行结果双双是 readily，那么恭喜你，解锁成功！

使用方法

判断可用性

像这样崭新的、带着毛刺的 API，我们在使用前应该总是先判断是否可用，避免线上翻车。

这里我们要在两个层面上做判断：

  1. 判断运行环境是否支持 API，如果方法不存在，就不走后续逻辑了： 
    if (!translation?.canDetect) return

if (!translation?.canTranslate) return
  2. 若方法存在，就接着检测当前环境是否解锁了能力： 
    const result = await translation.canDetect()

if (result !== 'readily') return
    需要额外说明的是，由于世界上有成千上万种语言，而本地翻译能力没办法立刻完全覆盖，所以我们需要检测特定语种的支持性： 
    const result = await translation.canDetect({
    sourceLanguage: 'en',
    targetLanguage: 'es'
})
if (result !== 'readily') return
    其中参数中的 en 和 es，是 BCP 47 格式的语种标签。

检测语种

做翻译功能时，我们可能无法预知用户会输入什么语言，所以需要先判断语种。

首先，我们要实例化一个 detector，再进行检测：

const detector = await translation.createDetector()
const result = await detector.detect('点个赞吧~')

检测结果 result 是个对象数组，其结构如下：

20241020-154256.jpeg

其中 detectedLanguage 是模型推断的语种标签，而对应的 confidence 则是匹配概率。整个数组按 confidence 降序排列，越靠前说明是该语种的可能性越大。

翻译

像检测语种一样，我们也需要先实例化一个 translator：

const translator = await translation.createTranslator({
    sourceLanguage: 'zh',
    targetLanguage: 'en',
})

但与 createDetector() 不同的是，由于翻译不同语种，需要不同的模型，所以我们需要特意指定源语种和目标语种。

然后就可以执行翻译了:

const result = await translator.translate('快关注我吧~')
console.log(result) // 'Follow me now~'

结语

恭喜你读完了本文！你真棒！

今天我们一起把玩了新鲜热乎的 Translation API。如果你读完后，也动手试着写一写 Demo，把一些灵感付诸实践，那么你的勇气和超前意识就已经领先了 99% 的开发者！

不过也有小伙伴说，这些 API 还是雏形，远远达不到可用状态，算不算是会了也用不上的屠龙之技呢？

我的想法是，一件新事物从诞生到成熟，我们既可以从雏形期找到先发优势，也可以从成熟期找到后发优势。我相信 Translation API 等其他 Chrome 内置 AI API 终将会成为新标准的一部分，在用户侧和开发者侧都会催生出新的交互模式。无论我们决定从什么时机着手，最重要的是保持探索、关注机会，总是做好跃马冲锋的准备。

我还有好多好玩又强大的 Web AI 知识，迫不及待想分享给你，下次见！

avatar
文章
阅读
粉丝