无需服务器!浏览器上直接运行近 700 个 AI 模型!

人工智能
看到这里你心动了么?有了 transformers.js 这个神器,前端工程师的能力边界又扩大了,基于 transformers.js 或 ONNX Runtime,你也可以快速开发一些 AI 应用或 AI 小工具了。

本文阿宝哥将介绍 Github 上一个超强的开源项目 —— transformers.js[1]。有了它,你可以直接在浏览器中运行 Transformers,无需服务器!

利用它提供的超能力,你可以在浏览器上直接运行不同的 AI 模型,实现很多非常有用的功能。比如,语音识别、语音合成、物体检测、物体分割或图片相似性搜索等功能。

语音识别(Whisper Web)

图片图片

智能去背景(Remove Background)

图片图片

如果你的浏览支持 WebGPU,那么去除图片背景时,还可以启用 WebGPU 加速,相比 CPU 来说,速度将会快好几倍!

图片图片

图片物体检测(Object Detection)

图片图片

物体分割(Segment Anything)

图片图片

除了上述演示的功能之外,transformers.js 作者 Joshua Lochner 很贴心,他还提供了 30 几个可以直接在浏览器运行的 AI 示例。你可以访问 Xenova Spaces[2] 来体验不同的 AI 示例。

transformers.js 不仅可以在浏览上运行,它还可以在 Node.js 和 Electron 环境中运行。

图片图片

为什么 transformers.js 功能那么强大,这背后离不开微软开源的 Onnx Runtime[3]。

图片图片

Onnx Runtime 是一个跨平台、高性能机器学习推理和训练加速器。使用 Onnx 平台提供的工具,你可以把不同深度学习框架训练的模型,转换成 Onnx 模型,然后利用不同的 ONNX Runtime 使得转换后的 Onnx 模型可以运行在不同的平台中。ONNX Runtime 通过其可扩展的 Execution Providers 程序 (EP) 框架与不同的硬件加速库配合使用,以在硬件平台上以最佳方式执行 ONNX 模型。该接口使 AP 应用程序开发人员能够灵活地在云端和 Edge 不同环境中部署其 ONNX 模型,并利用平台的计算功能来优化执行。

图片图片

对于 JS 环境来说,ONNX Runtime 提供了 onnxruntime-common、onnxruntime-node、onnxruntime-web 和 onnxruntime-react-native 4 个包,让我们可以在不同环境中运行 ONNX 模型。其中 onnxruntime-common 是通用包,定义了 backend、tensor 和 inference 等接口和相应的实现。

下面我们来举一个 onnxruntime-node 推理的例子:

const ort = require('onnxruntime-node');

// use an async context to call onnxruntime functions.
async function main() {
    try {
        // create a new session and load the specific model.
        //
        // the model in this example contains a single MatMul node
        // it has 2 inputs: 'a'(float32, 3x4) and 'b'(float32, 4x3)
        // it has 1 output: 'c'(float32, 3x3)
        const session = await ort.InferenceSession.create('./model.onnx');

        // prepare inputs. a tensor need its corresponding TypedArray as data
        const dataA = Float32Array.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
        const dataB = Float32Array.from([10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]);
        const tensorA = new ort.Tensor('float32', dataA, [3, 4]);
        const tensorB = new ort.Tensor('float32', dataB, [4, 3]);

        // prepare feeds. use model input names as keys.
        const feeds = { a: tensorA, b: tensorB };

        // feed inputs and run
        const results = await session.run(feeds);

        // read from results
        const dataC = results.c.data;
        console.log(`data of result tensor 'c': ${dataC}`);

    } catch (e) {
        console.error(`failed to inference ONNX model: ${e}.`);
    }
}

main();

在以上代码中,核心的是 model.onnx 模型。其余代码,你通过阅读 onnxruntime-node API 文档,就能快速上手。值得庆幸的是,transformers.js 作者已经帮我们把最复杂的工作搞定了。他为我们提供了 694 个开箱即用的 ONNX 模型:

图片图片

这些模型覆盖了自然语言处理、计算机视觉、音频处理、多模态等多个领域。

Natural Language Processing

图片图片

Vision

图片图片

Audio

图片图片

Multimodal

图片图片

看到这里你心动了么?有了 transformers.js 这个神器,前端工程师的能力边界又扩大了,基于 transformers.js 或 ONNX Runtime,你也可以快速开发一些 AI 应用或 AI 小工具了。前阵子阿宝哥也撸了几个 AI 图片处理的小功能,感兴趣的话,可以跟我一起交流。

参考资料

[1]transformers.js: https://github.com/xenova/transformers.js

[2]Xenova Spaces: https://huggingface.co/Xenova

[3]Onnx Runtime: https://github.com/microsoft/onnxruntime

责任编辑:武晓燕 来源: 全栈修仙之路
相关推荐

2024-04-15 11:38:08

PyTorchJavaScrip深度学习

2011-08-30 13:10:14

Python

2021-02-16 12:50:13

服务器Linux浏览器

2014-05-16 11:18:14

浏览器ChromeFirefox

2021-10-08 08:20:06

LinuxChromium浏览器

2009-06-29 19:49:11

服务器刀片服务器IBM

2018-08-30 08:47:59

浏览器web服务器通信

2012-03-20 11:31:58

移动浏览器

2012-03-19 17:25:22

2012-03-20 11:41:18

海豚浏览器

2012-03-20 11:07:08

2021-09-30 11:14:47

服务器Web浏览器

2023-08-28 08:00:00

人工智能AgentGPT

2012-06-21 15:38:02

猎豹浏览器

2010-04-05 21:57:14

Netscape浏览器

2012-03-20 11:22:02

QQ手机浏览器

2012-03-19 17:17:00

移动浏览器欧朋

2019-11-27 10:42:12

前端服务器浏览器

2023-04-25 18:57:03

2018-05-15 10:25:47

服务器局限基础
点赞
收藏

51CTO技术栈公众号