Erstellen einer Webanwendung mit ONNX Runtime

Dieses Dokument erläutert die Optionen und Überlegungen für die Erstellung einer Webanwendung mit ONNX Runtime.

Inhalt

Optionen für das Deployment-Ziel

  1. Inferenz im Browser

    Laufzeit und Modell werden zum Client heruntergeladen und die Inferenz findet im Browser statt. Verwenden Sie in diesem Szenario onnxruntime-web.

  2. Inferenz auf dem Server

    Der Browser sendet die Eingabe des Benutzers an den Server, der Server inferiert und erhält das Ergebnis, das dann an den Client zurückgesendet wird.

    Verwenden Sie native ONNX Runtime für beste Leistung.

    Um Node.js als Serveranwendung zu verwenden, nutzen Sie onnxruntime-node (ONNX Runtime Node.js-Bindung) auf dem Server.

  3. Electron

    Electron verwendet ein Frontend (basiert auf Chromium, technisch ein Browserkern) und ein Backend (basiert auf Node.js).

    Wenn möglich, verwenden Sie onnxruntime-node für die Inferenz im Backend, was schneller ist. Die Verwendung von onnxruntime-web im Frontend ist ebenfalls eine Option (aus Sicherheits- und Kompatibilitätsgründen).

  4. React Native

    React-native ist ein Framework, das die gleiche API wie Reactjs verwendet, aber native Anwendungen anstelle von Web-Apps für Mobilgeräte erstellt. Sollte onnxruntime-react-native verwenden.

Optionen zum Abrufen eines Modells

Sie müssen das Szenario Ihrer Web-App verstehen und ein ONNX-Modell erhalten, das für dieses Szenario geeignet ist.

ONNX-Modelle können aus dem ONNX Model Zoo bezogen, von PyTorch oder TensorFlow konvertiert und von vielen anderen Orten erhalten werden.

Sie können das ONNX-Format-Modell in ein ORT-Format-Modell konvertieren, für optimierte Binärgröße, schnellere Initialisierung und geringere Spitzen-Speichernutzung.

Sie können einen modellspezifischen benutzerdefinierten Build durchführen, um die Binärgröße weiter zu optimieren.

Anwendung starten

Starten Sie Ihre Webanwendung entsprechend Ihres bevorzugten Web-Frameworks, z. B. vuejs, reactjs, angularjs.

Sie können diesen Schritt überspringen, wenn Sie bereits eine Webanwendung haben und ONNX Runtime für maschinelles Lernen hinzufügen möchten.

ONNX Runtime Web als Abhängigkeit hinzufügen

Installieren Sie onnxruntime-web. Diese Befehlszeilen aktualisieren die package.json Datei der Anwendung.

Mit Yarn

yarn add onnxruntime-web

Mit npm

npm install onnxruntime-web

Fügen Sie "@dev" zum Paketnamen hinzu, um den Nightly-Build zu verwenden (z. B. npm install onnxruntime-web@dev).

onnxruntime-web im Code verwenden

  1. Importieren Sie onnxruntime-web. Siehe onnxruntime-web importieren

  2. Initialisieren Sie die Inferenzsitzung. Siehe InferenceSession.create

    Die Sitzungsinitialisierung sollte nur einmal erfolgen.

  3. Führen Sie die Sitzung aus. Siehe session.run

    Die Sitzungsausführung erfolgt jedes Mal, wenn neue Benutzereingaben vorliegen.

Weitere Details finden Sie in der ONNX Runtime Web API-Dokumentation.

Vor- und Nachbearbeitung

Rohdaten sind normalerweise eine Zeichenkette (für NLP-Modelle) oder ein Bild (für Bildmodelle). Sie stammen aus verschiedenen Formen und Formaten.

Zeichenketteneingaben

  1. Verwenden Sie einen Tokenizer in JS/Wasm, um ihn in numerische Daten vorzuverarbeiten, Tensoren aus den Daten zu erstellen und diese für die Modellinferenz an ORT zu übergeben.

  2. Verwenden Sie einen oder mehrere benutzerdefinierte Ops zur Verarbeitung von Zeichenketten. Erstellen Sie mit den benutzerdefinierten Ops. Das Modell kann Zeichenketten-Tensor-Eingaben direkt verarbeiten. Beziehen Sie sich auf dieonnxruntime-extensions Bibliothek, die eine Reihe möglicher benutzerdefinierter Operatoren enthält.

Bildeingabe

  1. Verwenden Sie eine JS/Wasm-Bibliothek zur Vorverarbeitung der Daten und erstellen Sie einen Tensor als Eingabe, um die Anforderungen des Modells zu erfüllen. Siehe das Tutorial Bildklassifizierung mit ONNX Runtime Web.

  2. Modifizieren Sie das Modell, um die Vorverarbeitung als Operatoren in das Modell aufzunehmen. Das Modell erwartet ein bestimmtes Web-Bildformat (z. B. ein Bitmap oder eine Textur von einer Canvas).

Ausgaben

Die Ausgabe eines Modells variiert, und die meisten benötigen eigenen Nachbearbeitungscode. Beziehen Sie sich auf das obige Tutorial als Beispiel für die JavaScript-Nachbearbeitung.

Bundler

[Dieser Abschnitt ist in Kürze verfügbar]