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 <–> 图像转换 - 从图像元素到 Tensor 以及从 Tensor 到图像元素的转换示例。
• InferenceSession - InferenceSession 的基本使用示例。
• SessionOptions - 如何配置 InferenceSession 实例创建的示例。

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

• 另请参阅：Inference Session、Tensor 和 环境标志 的 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 - 演示如何在浏览器中使用 onnxruntime-web 和 webgpu 运行 segment-anything。

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

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

支持的版本

EPs/浏览器	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 EP。
• [2]: WebGPU 需要 Windows 上的 Chromium v113 或更高版本。Float16 支持需要 Chrome v121 或更高版本，以及 Edge v122 或更高版本。
• [3]: WebGPU 需要 Windows 上的 Chromium v121 或更高版本。
• [4]: WebGL 支持处于维护模式。建议使用 WebGPU 以获得更好的性能。
• [5]: 需要使用命令行标志 --enable-features=WebMachineLearningNeuralNetwork 启动浏览器。