Transformers.js：Web 上的最新机器学习技术（2）
开始尝试
语音转文本
对于我们第一个示例，只有几行代码，模仿OpenAi whisper在浏览器中实现自动语音识别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
// 1. 从cdn导入transformers库，原文使用jsdelivr，由于墙的原因，使用unpkg代替
import { pipeline } from 'https://unpkg.com/@xenova/transformers@2.8.0/dist/transformers.min.js'
// 2. 创建自动语音识别流水线（ASR）
// 并将Hugging Face Hub的模型id作为第二个参数
const transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny')
// 3. 最后一步是将音频文件传递给pipeline
// 可以用手机或者电脑录一段音频，丢到当前文件夹，我这里自己录了一段
const output = await transcriber('test.m4a')
console.log(output)
document.write(output.text)
</script>
</body>
</html>
我说的是生活就像海洋，只有意志坚定的人才能到达彼岸。可能是我的普通话不够标准吧哈哈哈哈，
随后将会重复使用这个模型，当然如果觉得中文准确性不够高，可以换个大一点的模型，并且可以选择是否翻译成英语。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
// 1. 从cdn导入transformers库，原文使用jsdelivr，由于墙的原因，使用unpkg
import { pipeline } from 'https://unpkg.com/@xenova/transformers@2.8.0/dist/transformers.min.js'
// 2. 创建自动语音识别流水线（ASR）
// 并将Hugging Face Hub的模型id作为第二个参数
const transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-small')
// 3. 最后一步是将音频文件传递给pipeline
// 可以用手机或者电脑录一段音频，丢到当前文件夹，我这里自己录了一段
const chineseOutput = await transcriber('test.m4a', {language: 'chinese'})
console.log(chineseOutput)
document.write(chineseOutput.text + '<br>')
const englishOutput = await transcriber('test.m4a', {language: 'chinese', task: 'translate'})
console.log(englishOutput)
document.write(englishOutput.text + '<br>')
</script>
</body>
</html>
物体检测
接下来我们尝试一下视觉任务，比如物体检测。
// 2. 创建对象检测流水线，这里不指定模型
// ，默认使用Facebook的轻量级目标检测转换器（DETR）
// 也就是ID为：Xenova/detr-resnet-50 这个模型
const detector = await pipeline('object-detection')
// 3. 将图像传递给流水线，并可以指定其他参数
// 比如阈值，以及边界框按百分比还是像素返回
const output = await detector('cat.jpg', { threshold: 0.9, percentage: true })
console.log(output)
// 比如我用一个猫咪的图片得到的结果：
// [
// {
// "score": 0.9989897608757019,
// "label": "cat",
// "box": {
// "xmin": 0.36215442419052124,
// "ymin": 0.18427562713623047,
// "xmax": 0.8893325924873352,
// "ymax": 0.8793745040893555
// }
// }
// ]
流水线的输出包含场景中检测到的每个物体信息的json，包括置信度、标签、边界框。
完成机器学习方面的工作之后，我们可以再添加一些代码，允许用户上传图像，并呈现预测的边界框
对于感兴趣的小伙伴
其他的一些流水线
目前为止我们支持了21种不同的流水线，并且还持续添加新的流水线。
比如最近发布了文本到语音的支持，与当前浏览器内置的语音合成api相比，明显不那么机械，就在上周（视频发布的时间），我们增加了超分辨率和图像修复。
如果你要寻找transformers.js兼容的模型，打开：hf.co/models ，选择libraries-Transformers.js
然后可以点击回到task选择你需要的流水线类型
我能在哪里使用Transformers.js
你可能会问，我能在哪里用上transformers.js?
目前最主要的还是Web端和PWA应用，他们都不需要用户安装，这也是为什么web会是开发者的首选目标。除此之外，浏览器提供了非常多的API，并且运行在安全的沙箱环境中。另一个好处是您不需要担心服务器成本，像前面的所有演示应用一样，你可以将应用作为静态网站免费部署到GithubPages、HuggingFaceSpace（vercel也是挺好的选择）。
当然如果开发者不一样切换到完全静态的网站，使用一些混合的方式也可以减轻成本，对于开发者来说，浏览器插件、服务端和类似Electron这样的框架也是非常合适的选择。
比如一个浏览器插件：PaperClip，当你选择一段pdf或者网页里的文本进行收藏之后，它能允许你用自然语言对之前已经收藏过的文本进行搜索。多亏了ai，你的任何数据都不会发送到外部API或者服务器。
虽然一开始Transformers.js并不是针对服务端开发的，但是随着发展，GithubIssue上提出了这方面的巨大需求。感谢这些issue，提供了Node.js和Deno相关的支持。这也是为什么在后端中JavaScript变得如此流行。
另一个有趣的用例是边缘计算里的机器学习，更具体的说，transformers.js能用于边缘计算函数，部署到边缘计算的代码足够小、轻量化，并以极低的延时完成特定的任务。Superbase在这方面有一篇很好的文章，它展示了在边缘函数中生成高质量的文本嵌入，强烈推荐你看一下！
自定义模型
假如你已经训练了自己自定义的模型，比如PyTorch、JAX、TensorFlow模型，你需要使用前文提到的Optimum库转换成ONNX模型。下面是官方文档教程：
总的来说就是：
- 下载github仓库，找到scripts子文件夹
- 安装必要的依赖
- 运行script.convert脚本将你模型转成ONNX模型
- 访问hf.co/new，创建仓库，上传模型
- 将Transformers.js标签添加到模型卡片上，以便其他人能搜索到你上传的模型。
- 测试你的模型（可以直接在node中运行）
Transformer.js的未来是什么
首先是添加新的任务和模型，对于比较流行的用例，力图实现和Python库一样能力。
接下来，无疑是最令人期待的更新，就是WebGPU的支持。onnxruntime-web发布了带有实验性的WebGPU后端，在进行更多的测试后，您很快就能看到使用基于WebGPU的Transformers.js应用。目前由于protobuf和WASM的限制，Transformers.js的模型限制在2GB以内，也就是说一些流行的大语言模型无法运行，比如llama-7b。
幸运的是社区正在努力克服这些约束，我们还计划改进与下一个Web浏览器的整合，下一代浏览器将以科学计算和AI API为焦点。比如，可以想象一个基于浏览器的模型商店，类似Chrome的拓展商城，他们可以在HuggingFaceHub上寻找到兼容的模型，点击按钮安装它，并在各个网页中使用它。现在Transformers.js在这方面还受到限制，为此每个站点或者每个拓展都会缓存一次模型。
以上就是来自Joshua对于Transformers.js的分享。
转载自:https://juejin.cn/post/7308725917454598198