Hinzufügen von Machine Learning zu Ihrer Webanwendung mit ONNX Runtime

ONNX Runtime Web ermöglicht es Ihnen, Machine-Learning-Modelle in Ihrer Webanwendung mit JavaScript-APIs und -Bibliotheken auszuführen und bereitzustellen. Diese Seite beschreibt den allgemeinen Ablauf des Entwicklungsprozesses.

Sie können Machine Learning auch serverseitig in Ihrer Webanwendung mit ONNX Runtime integrieren, indem Sie je nach Entwicklungsumgebung Ihrer Anwendung andere Sprachbibliotheken verwenden.

Um ein Beispiel für den Webentwicklungsablauf in der Praxis zu sehen, können Sie die Schritte im folgenden Tutorial befolgen, um eine Webanwendung zur Bildklassifizierung mit Next.js zu erstellen.

Weitere Details zu den unten aufgeführten Schritten finden Sie im Referenzhandbuch Erstellen einer Webanwendung mit ONNX Runtime.

Entwicklungsablauf für ONNX Runtime-Webanwendungen

  1. Wählen Sie das Bereitstellungsziel und das ONNX Runtime-Paket

    ONNX Runtime kann je nach den Anforderungen Ihrer Anwendung auf verschiedene Arten in Ihre Webanwendung integriert werden.

    • Inferenz im Browser. Verwenden Sie das Paket onnxruntime-web.

      Die Inferenz auf dem Gerät und im Browser bietet Vorteile.

      • Es ist schneller. Das stimmt, Sie können die Inferenzzeit erheblich verkürzen, wenn die Inferenz direkt auf dem Client für Modelle durchgeführt wird, die für die Ausführung auf weniger leistungsfähiger Hardware optimiert sind.
      • Es ist sicherer und hilft bei der Privatsphäre. Da die Daten die Geräte für die Inferenz nicht verlassen, ist dies eine sicherere Methode der Inferenz.
      • Es funktioniert offline. Wenn Sie die Internetverbindung verlieren, kann das Modell trotzdem inferieren.
      • Es ist günstiger. Sie können die Kosten für die Serverbereitstellung reduzieren, indem Sie die Inferenz an den Browser auslagern.

      Sie können das Paket onnxruntime-web auch im Frontend einer Electron-App verwenden.

      Mit onnxruntime-web haben Sie die Möglichkeit, webgl, webgpu oder webnn (mit deviceType auf gpu gesetzt) für die GPU-Verarbeitung und WebAssembly (wasm, Alias für cpu) oder webnn (mit deviceType auf cpu gesetzt) für die CPU-Verarbeitung zu verwenden. Alle ONNX-Operatoren werden von WASM unterstützt, aber nur eine Teilmenge wird derzeit von WebGL, WebGPU und WebNN unterstützt.

    • Inferenz auf dem Server in JavaScript. Verwenden Sie das Paket onnxruntime-node.

      Ihre Anwendung kann Einschränkungen aufweisen, die es besser machen, die Inferenz serverseitig durchzuführen.

      • Das Modell ist zu groß und erfordert höhere Hardwareanforderungen. Um Inferenz auf dem Client durchzuführen, benötigen Sie ein Modell, das klein genug ist, um effizient auf weniger leistungsfähiger Hardware ausgeführt zu werden.
      • Sie möchten nicht, dass das Modell auf das Gerät heruntergeladen wird.

      Sie können das Paket onnxruntime-node auch im Backend einer Electron-App verwenden.

    • Inferenz auf dem Server mit anderen Sprach-APIs. Verwenden Sie die ONNX Runtime-Pakete für C/C++ und andere Sprachen.

      • Wenn Sie Ihr Web-Backend nicht in Node.js entwickeln Wenn das Backend Ihrer Webanwendung in einer anderen Sprache entwickelt wurde, können Sie ONNX Runtime-APIs in der Sprache Ihrer Wahl verwenden.

    • Inferenz in einer React Native-Anwendung. Verwenden Sie das Paket onnxruntime-react-native.

  2. Welches Machine-Learning-Modell verwendet meine Anwendung?

    Sie müssen das Szenario Ihrer Web-App verstehen und ein ONNX-Modell erhalten, das für dieses Szenario geeignet ist. Klassifiziert die App beispielsweise Bilder, erkennt Objekte in einem Videostream, fasst Text zusammen oder sagt ihn voraus oder führt numerische Vorhersagen durch.

    ONNX Runtime-Webanwendungen verarbeiten Modelle im ONNX-Format. ONNX-Modelle können aus dem ONNX Model Zoo bezogen, von PyTorch oder TensorFlow konvertiert und von vielen anderen Orten heruntergeladen werden.

    Sie können auch ein benutzerdefiniertes Modell erstellen, das spezifisch für die Aufgabe ist, die Sie lösen möchten. Verwenden Sie Code, um Ihr Modell zu erstellen, oder verwenden Sie Low-Code/No-Code-Tools, um das Modell zu erstellen. Schauen Sie sich die folgenden Ressourcen an, um mehr über verschiedene Möglichkeiten zur Erstellung eines benutzerdefinierten Modells zu erfahren. Alle diese Ressourcen verfügen über eine Exportfunktion für das ONNX-Format, sodass Sie diese Vorlage und diesen Quellcode nutzen können.

  3. Wie bootstrap ich die Entwicklung meiner App?

    Bootstrapen Sie Ihre Webanwendung gemäß Ihrem bevorzugten Webframework, z. B. Vue.js, React.js, AngularJS.

    1. Fügen Sie die ONNX Runtime-Abhängigkeit hinzu

    2. Verbrauchen Sie die onnxruntime-web-API in Ihrer Anwendung

    3. Fügen Sie Vor- und Nachbearbeitung hinzu, die für Ihre Anwendung und Ihr Modell geeignet sind

  4. Wie optimiere ich meine Anwendung?

    Die im vorherigen Schritt erwähnten Bibliotheken und Modelle können optimiert werden, um Speicher- und Verarbeitungsanforderungen zu erfüllen.

    a. Modelle im ONNX-Format können in das ORT-Format konvertiert werden, um die Größe der Modellbinärdatei zu optimieren, die Initialisierung zu beschleunigen und den Speicherverbrauch zu reduzieren.

    b. Die Größe von ONNX Runtime selbst kann durch Erstellen eines benutzerdefinierten Pakets reduziert werden, das nur die Unterstützung für Ihre spezifischen Modelle enthält.

    c. Stimmen Sie die ONNX Runtime-Inferenzsitzungsoptionen ab, einschließlich des Ausprobierens verschiedener Execution Provider

Inhaltsverzeichnis