Erste Schritte mit ONNX Runtime Web

Inhalt

Verwenden Sie den folgenden Befehl in der Shell, um ONNX Runtime Web zu installieren

# install latest release version
npm install onnxruntime-web

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

Verwenden Sie den folgenden JavaScript-Code, um ONNX Runtime Web zu importieren

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

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

Wenn Sie ONNX Runtime Web mit WebGPU-Unterstützung (experimentelles Feature) verwenden möchten, müssen Sie wie folgt importieren

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

Wenn Sie ONNX Runtime Web mit WebNN-Unterstützung (experimentelles Feature) verwenden möchten, müssen Sie wie folgt importieren

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

Eine vollständige Tabelle zum Importieren finden Sie unter Bedingtes Importieren.

Siehe ONNX Runtime JavaScript API für die API-Referenz. Bitte beachten Sie auch die folgenden Links für Beispiele zur API-Nutzung

Tensor - eine Demonstration der grundlegenden Verwendung von Tensor.
Tensor <–> Bildkonvertierung - eine Demonstration von Konvertierungen von Bildelementen zu und von Tensor.
InferenceSession - eine Demonstration der grundlegenden Verwendung von InferenceSession.
SessionOptions - eine Demonstration, wie die Erstellung einer InferenceSession-Instanz konfiguriert wird.
ort.env flags - eine Demonstration, wie eine Reihe von globalen Flags konfiguriert wird.
Siehe auch: TypeScript-Deklarationen für Inference Session, Tensor und Umgebungsflags als Referenz.

Siehe Tutorial: Web für Tutorials.

Siehe Training im Web-Demo für das Training mit onnxruntime-web.

Die folgenden Beispiele beschreiben, wie ONNX Runtime Web in Ihren Webanwendungen für die Modellinferenz verwendet wird

Die folgenden sind E2E-Beispiele, die ONNX Runtime Web in Webanwendungen verwenden

Bilder mit ONNX Runtime Web klassifizieren - eine einfache Webanwendung mit Next.js zur Bildklassifizierung.
ONNX Runtime Web Demos für Bilderkennung, Handschriftenanalyse, Echtzeit-Emotionserkennung, Objekterkennung und so weiter.
OpenAI Whisper - demonstriert die Ausführung von whisper tiny.en in Ihrem Browser mithilfe von onnxruntime-web und den Audio-Schnittstellen des Browsers.
Facebook Segment-Anything - demonstriert die Ausführung von segment-anything in Ihrem Browser mithilfe von onnxruntime-web mit webgpu.

Die folgenden sind Video-Tutorials, die ONNX Runtime Web in Webanwendungen verwenden

EPs/Browser	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 unterstützt nur den Single-Threaded wasm EP.
[2]: WebGPU erfordert Chromium v113 oder höher unter Windows. Float16-Unterstützung erfordert Chrome v121 oder höher und Edge v122 oder höher.
[3]: WebGPU erfordert Chromium v121 oder höher unter Windows.
[4]: WebGL-Unterstützung befindet sich im Wartungsmodus. Es wird empfohlen, WebGPU für bessere Leistung zu verwenden.
[5]: Erfordert den Start des Browsers mit dem Befehlszeilenflag --enable-features=WebMachineLearningNeuralNetwork.