Transformers.js：Web 上的最新机器学习技术（2）

开始尝试

语音转文本

对于我们第一个示例，只有几行代码，模仿OpenAi whisper在浏览器中实现自动语音识别。

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-tiny')
        
        // 3. 最后一步是将音频文件传递给pipeline
        // 可以用手机或者电脑录一段音频，丢到当前文件夹，我这里自己录了一段
        const output = await transcriber('test.m4a')
        console.log(output)
        document.write(output.text)
    </script>
</body>
</html>

我说的是生活就像海洋，只有意志坚定的人才能到达彼岸。可能是我的普通话不够标准吧哈哈哈哈，

随后将会重复使用这个模型，当然如果觉得中文准确性不够高，可以换个大一点的模型，并且可以选择是否翻译成英语。

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>

物体检测

接下来我们尝试一下视觉任务，比如物体检测。

js 复制代码

// 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，包括置信度、标签、边界框。

完成机器学习方面的工作之后，我们可以再添加一些代码，允许用户上传图像，并呈现预测的边界框

对于感兴趣的小伙伴

这里有手把手教你编写这样一个网页的教程，

这个是源码，

这个是demo体验网站

其他的一些流水线

目前为止我们支持了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模型。下面是官方文档教程：

huggingface.co/docs/transf...

总的来说就是：

下载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的分享。