浏览器里跑 ONNX 模型ONNX Runtime Web 快速上手与后端选型指南【免费下载链接】onnxruntimeONNX Runtime: cross-platform, high performance ML inferencing and training accelerator项目地址: https://gitcode.com/GitHub_Trending/on/onnxruntime把一张手写数字图片传给你的浏览器它不用等服务器回复就能返回识别结果——这就是在浏览器里执行推理的样子。ONNX Runtime Web 就是 ONNX Runtime 面向 Web 端的 JavaScript 库npm install onnxruntime-web之后PyTorch 或 TensorFlow 导出的 ONNX 模型就能直接在页面里推理数据不出本地也省去了模型服务的往返开销。核心概念ONNX 模型在浏览器里是怎么跑起来的ONNX 是一个开放的模型描述格式可以把它理解为模型的通用打包格式——不同框架导出的模型转换后都能被它读取。ONNX Runtime Web 负责把这个包解开来执行内部注册了三个执行后端Execution Provider即负责实际计算的引擎wasm原生 C CPU 推理引擎经 Emscripten 编译成 WebAssembly 产物在浏览器里以接近原生的速度执行算子覆盖ai.onnx全集也支持量化模型webgl借助 WebGL 标准 API 调用 GPU 并行计算适合大张量运算webgpu基于新图形 API WebGPU 的低延迟 GPU 后端目前仍标注为实验特性浏览器环境只负责加载 JS 库和模型文件真正脏活累活都由这三个后端完成。仓库里 js/web/lib/ 就是这些后端的注册入口各后端的算子清单维护在 js/web/docs/。三步跑通浏览器推理第一步装包。浏览器项目安装onnxruntime-web如果你的推理跑在 Node.js 而不是浏览器里要装的是onnxruntime-node两者入口文件不同。第二步建会话、喂输入、拿输出。仓库里 samples/nodejs/01_basic-usage/ 提供了一个只含一个 MatMul 节点的最小示例结构可以直接照搬const ort require(onnxruntime-node); // 浏览器中换成 require(onnxruntime-web) async function main() { const session await ort.InferenceSession.create(./model.onnx); // 加载模型并建会话 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]); // Tensor 需要数据 维度键名必须与模型输入名一致 const feeds { a: new ort.Tensor(float32, dataA, [3, 4]), b: new ort.Tensor(float32, dataB, [4, 3]) }; const results await session.run(feeds); console.log(result tensor c: ${results.c.data}); } main();第三步换掉占位模型。把./model.onnx换成你自己的模型文件即可输入输出名可用session.inputNames/session.outputNames查询核对。后端怎么选按浏览器覆盖和算子支持来定三个后端的官方口径摘自 js/web/README.md 的兼容性说明后端浏览器覆盖算子支持适合什么wasm全部主流浏览器含 Safari、FirefoxNode.js 可用全量 ONNX 算子兜底方案NLP 类、小模型、需要最大兼容面webgl全部主流浏览器部分算子已进维护模式存量 WebGL 项目不建议新项目首选webgpu仅 Chromium 113iOS Safari 与 Safari 不可用部分算子实验性Chromium 系设备上的 GPU 加速选型建议按两条线走先查算子覆盖再谈速度。GPU 后端只覆盖算子清单里的一个子集js/web/docs/webgpu-operators.md 和 js/web/docs/webgl-operators.md 各有一份清单你的模型里只要有一个算子不在表内推理就会失败回退。兼容性优先时用 wasm 打底。wasm 是唯一全浏览器、全平台可用的后端也是 GPU 后端的兜底wasm 后端可通过env.wasm相关配置调整并行线程数和 SIMD 开关具体性能收益以你自己的模型实测为准。另外Node.js 环境下 wasm 后端只支持单线程WebNN 后端还需用--enable-featuresWebMachineLearningNeuralNetwork启动参数打开暂时不建议在生产环境依赖它。常见报错的排查思路Could not find op之类的算子报错GPU 后端缺少该算子。解法把executionProviders改成[wasm]或查上面两份算子清单确认缺口。页面安装包时加载的是浏览器构建但实际跑在 Node 里onnxruntime-web的入口指向浏览器 distNode 下请换用onnxruntime-node见 js/node/README.md。模型体积大、下载阻塞首屏解法是压缩后配合 Web Worker 预加载把InferenceSession.create移出主线程避免解析模型时页面卡死。把 ONNX Runtime Web 接进项目多数场景下装包 一个会话 一张算子清单就够了。后端兼容矩阵和完整 API 见 js/web/README.md最小可运行示例在 samples/nodejs/照着跑一遍就能定位自己模型该走哪个后端。【免费下载链接】onnxruntimeONNX Runtime: cross-platform, high performance ML inferencing and training accelerator项目地址: https://gitcode.com/GitHub_Trending/on/onnxruntime创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考