本文阿寶哥將介紹 Github 上一個超強的開源項目 —— transformers.js[1]。有了它，你可以直接在瀏覽器中運行 Transformers，無需服務(wù)器！

利用它提供的超能力，你可以在瀏覽器上直接運行不同的 AI 模型，實現(xiàn)很多非常有用的功能。比如，語音識別、語音合成、物體檢測、物體分割或圖片相似性搜索等功能。

語音識別（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 環(huán)境中運行。

圖片

為什么 transformers.js 功能那么強大，這背后離不開微軟開源的 Onnx Runtime[3]。

圖片

Onnx Runtime 是一個跨平臺、高性能機器學(xué)習(xí)推理和訓(xùn)練加速器。使用 Onnx 平臺提供的工具，你可以把不同深度學(xué)習(xí)框架訓(xùn)練的模型，轉(zhuǎn)換成 Onnx 模型，然后利用不同的 ONNX Runtime 使得轉(zhuǎn)換后的 Onnx 模型可以運行在不同的平臺中。ONNX Runtime 通過其可擴展的 Execution Providers 程序 (EP) 框架與不同的硬件加速庫配合使用，以在硬件平臺上以最佳方式執(zhí)行 ONNX 模型。該接口使 AP 應(yīng)用程序開發(fā)人員能夠靈活地在云端和 Edge 不同環(huán)境中部署其 ONNX 模型，并利用平臺的計算功能來優(yōu)化執(zhí)行。

圖片

對于 JS 環(huán)境來說，ONNX Runtime 提供了 onnxruntime-common、onnxruntime-node、onnxruntime-web 和 onnxruntime-react-native 4 個包，讓我們可以在不同環(huán)境中運行 ONNX 模型。其中 onnxruntime-common 是通用包，定義了 backend、tensor 和 inference 等接口和相應(yīng)的實現(xiàn)。

下面我們來舉一個 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 作者已經(jīng)幫我們把最復(fù)雜的工作搞定了。他為我們提供了 694 個開箱即用的 ONNX 模型：

圖片

這些模型覆蓋了自然語言處理、計算機視覺、音頻處理、多模態(tài)等多個領(lǐng)域。

Natural Language Processing

圖片

Vision

圖片

Audio

圖片

Multimodal

圖片

看到這里你心動了么？有了 transformers.js 這個神器，前端工程師的能力邊界又?jǐn)U大了，基于 transformers.js 或 ONNX Runtime，你也可以快速開發(fā)一些 AI 應(yīng)用或 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