“Any application that can be written in JavaScript, will eventually be written in JavaScript”。
ChatGPT火了之后，前端领域也开始逐渐重视AI领域，正所谓AI最终也将由JavaScript实现。对比比较火的大模型，浏览器可以运行的机器学习模型大多数参数比较少，可以利用用户的边缘设备资源执行一些比较简单的推理任务，比如视觉识别、语言翻译、语音识别等。目前浏览器使用较多的机器学习框架有Tensorflow.js以及我们下面介绍的Transformers.js，这类利用浏览器推理的框架有以下优势：
- 不需要额外的GPU服务器资源成本
- 首次下载模型之后可以利用ServiceWorker等机制离线使用
- 由于没有服务器通信，保证用户的隐私数据不会被泄露，比如一些机密文件
Transformers.js简介
Transformers.js是一个浏览器运行的机器学习框架，基于微软的 ONNX Runtime 跨平台框架封装的API。简化了模型的调用方式，目前可以直接使用的模型可以再 Hugging Face 上面筛选对应的模型，另外可以将主流的python机器学习框架，如Tensorflow、Pytorch转为ONNX Runtime格式提供给Transformers.js使用。
Transformers.js模型使用
类似于在python中调用Hugging Face模型，支持pipline API，主要使用以下几个方法完成模型的加载和推理。
pipeline: 加载并组合推理的模型pipe: 用于进行推理的数据集
贴一段文档中一个简易的demo：
import { pipeline } from '@xenova/transformers';
// Allocate a pipeline for sentiment-analysis
let pipe = await pipeline('sentiment-analysis');
let out = await pipe('I love transformers!');
// [{'label': 'POSITIVE', 'score': 0.999817686}]
中英文翻译实现
使用 Xenova/opus-mt-zh-en 模型可以实现中文翻译为英文的功能，实现的代码如下：
import { pipeline } from '@xenova/transformers';
let pipe = await pipeline('translation', 'Xenova/opus-mt-zh-en');
let out = await pipe('你好，世界!');
通过以上代码即可调用模型完成翻译，但是由于模型托管在Hugging Face下载速度较慢而且 ONNX Runtime 依赖的 wasm 文件下载概率性失败，如果私有化部署或者是本地离线使用体验较差，可以利用Transformers.js提供的本地加载文件的模式，将对应库的文件和模型下载到本地，而后通过修改配置的方式进行引入。
引入 env 环境变量配置，修改对应的配置项，因为路径一般是绝对路径，便面生产环境和开发环境下路径不同，可以将本地的文件放在 public 文件夹下，统一构建到dist文件中。
import { env } from '@xenova/transformers'
env.allowLocalModels = true
env.allowRemoteModels = false
env.localModelPath = 'models/'
env.backends.onnx.wasm.wasmPaths = 'file/'
关于模型文件的下载，文件夹下面的 tokenizer.json 等文件是模型的权重文件，这些是必须的文件，·.onnx` 我们可以通过查看在线的示例，查看http请求下载使用到的文件即可，其他的文件可以删除，减少项目的体积。
总结
Transformers.js 提供了浏览器使用 Hugging Face 模型的一种便捷方式，目前对于前端来说机器学习模型可以帮助我们解决一些通用场景下的AI问题，具体的问题解决需要利用模型进行二次训练，随着浏览器的发展和个人电脑配置的提升，浏览器端的机器学习也会有更多的使用场景。
原文链接：https://juejin.cn/post/7321588019680280626 作者：拾9玖
