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');

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

文档

有关 API 参考，请参阅 ONNX Runtime JavaScript API。另请查看以下链接以获取 API 用法示例

• Tensor - Tensor 基本用法的演示。
• Tensor <–> 图像转换 - 从图像元素到 Tensor 以及从 Tensor 到图像元素的转换演示。
• InferenceSession - InferenceSession 基本用法的演示。
• SessionOptions - 关于如何配置 InferenceSession 实例创建的演示。

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

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

有关教程，请参阅教程：Web。

有关使用 onnxruntime-web 进行训练的演示，请参阅Web 上的训练演示。

示例

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

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

以下是 E2E 示例，展示了如何在 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。

以下是使用 ONNX Runtime Web 在 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 启动浏览器。