ONNX Runtime Web 快速入门

目录

• 安装
• 导入
• 文档
• 示例
• 支持的版本

安装

在 shell 中使用以下命令安装 ONNX Runtime Web

# install latest release version
npm install onnxruntime-web

# install nightly build dev version
npm install onnxruntime-web@dev

导入

使用以下 JavaScript 代码导入 ONNX Runtime Web

// use ES6 style import syntax (recommended)
import * as ort from 'onnxruntime-web';

// or use CommonJS style import syntax
const ort = require('onnxruntime-web');

如果想使用支持 WebGPU 的 ONNX Runtime Web（实验性功能），需要按如下方式导入

// use ES6 style import syntax (recommended)
import * as ort from 'onnxruntime-web/webgpu';

// or use CommonJS style import syntax
const ort = require('onnxruntime-web/webgpu');

如果想使用支持 WebNN 的 ONNX Runtime Web（实验性功能），需要按如下方式导入

// use ES6 style import syntax (recommended)
import * as ort from 'onnxruntime-web/experimental';

// or use CommonJS style import syntax
const ort = require('onnxruntime-web/experimental');

完整的导入表格，请参阅条件导入。

文档

请参阅ONNX Runtime JavaScript API 获取 API 参考。请同时查看以下链接以获取 API 使用示例

• Tensor - 演示 Tensor 的基本用法。
• Tensor <–> Image 转换 - 演示如何将 Image 元素转换为 Tensor，以及从 Tensor 转换回 Image 元素。
• InferenceSession - 演示 InferenceSession 的基本用法。
• SessionOptions - 演示如何配置 InferenceSession 实例的创建。

• ort.env 标志 - 演示如何配置一组全局标志。

• 另请参阅：Inference Session、Tensor 和 Environment Flags 的 TypeScript 声明以供参考。

请参阅教程：Web 获取教程。

请参阅Web 端训练演示 获取使用 onnxruntime-web 进行训练的示例。

示例

以下示例描述了如何在 Web 应用中使用 ONNX Runtime Web 进行模型推理

• 快速入门（使用打包工具）
• 快速入门（使用 script 标签）

以下是在 Web 应用中使用 ONNX Runtime Web 的端到端示例

• 使用 ONNX Runtime Web 对图像进行分类 - 一个使用 Next.js 进行图像分类的简单 Web 应用。
• ONNX Runtime Web 演示，涵盖图像识别、手写分析、实时情绪检测、目标检测等。
• OpenAI Whisper - 演示如何在浏览器中使用 onnxruntime-web 和浏览器音频接口运行 whisper tiny.en。
• Facebook Segment-Anything - 演示如何在浏览器中使用支持 webgpu 的 onnxruntime-web 运行 segment-anything。

以下是在 Web 应用中使用 ONNX Runtime Web 的视频教程

• 用于浏览器内推理的 ONNX Runtime Web
• 使用 ONNX Runtime Web 在 Javascript 中进行推理

支持的版本

执行提供程序/浏览器	Chrome/Edge (Windows)	Chrome/Edge (Android)	Chrome/Edge (macOS)	Chrome/Edge (iOS)	Safari (macOS)	Safari (iOS)	Firefox (Windows)	Node.js
WebAssembly (CPU)	✔️	✔️	✔️	✔️	✔️	✔️	✔️	✔️[1]
WebGPU	✔️[2]	✔️[3]	✔️	❌	❌	❌	❌	❌
WebGL	✔️[4]	✔️[4]	✔️[4]	✔️[4]	✔️[4]	✔️[4]	✔️[4]	❌
WebNN	✔️[5]	❌	❌	❌	❌	❌	❌	❌

• [1]：Node.js 仅支持单线程的 wasm 执行提供程序。
• [2]：WebGPU 在 Windows 上需要 Chromium v113 或更高版本。Float16 支持需要 Chrome v121 或更高版本，以及 Edge v122 或更高版本。
• [3]：WebGPU 在 Windows 上需要 Chromium v121 或更高版本。
• [4]：WebGL 支持处于维护模式。建议使用 WebGPU 以获得更好的性能。
• [5]：需要在启动浏览器时带有命令行标志 --enable-features=WebMachineLearningNeuralNetwork。