Während die meisten KI-Funktionen im Web auf Servern basieren, wird clientseitige KI direkt im Browser des Nutzers ausgeführt. Dies bietet Vorteile wie eine geringe Latenz, reduzierte serverseitige Kosten, keine API-Schlüsselanforderungen, mehr Datenschutz für Nutzer und Offlinezugriff. Mit JavaScript-Bibliotheken wie TensorFlow.js, Transformers.js und MediaPipe GenAI können Sie clientseitige KI implementieren, die browserübergreifend funktioniert.
Clientseitige KI stellt auch Leistungsherausforderungen: Nutzer müssen mehr Dateien herunterladen und ihr Browser muss mehr arbeiten. Beachten Sie Folgendes, damit die Funktion ordnungsgemäß funktioniert:
- Ihr Anwendungsfall Ist clientseitige KI die richtige Wahl für Ihre Funktion? Ist Ihre Funktion Teil einer kritischen User Journey? Falls ja, haben Sie einen Fallback?
- Best Practices für den Download und die Verwendung von Modellen Weitere Informationen finden Sie in der Online-Hilfe.
Vor dem Modelldownload
Mind Library und Modellgröße
Für die Implementierung von clientseitiger KI benötigen Sie ein Modell und normalerweise eine Bibliothek. Berücksichtigen Sie bei der Auswahl der Bibliothek deren Größe wie bei jedem anderen Tool.
Auch die Modellgröße spielt eine Rolle. Was für ein KI-Modell als groß gilt, ist nicht eindeutig definiert. 5 MB können als Faustregel dienen: Das entspricht dem 75. Perzentil der mittleren Webseitengröße. Eine lockerere Zahl wäre 10 MB.
Hier sind einige wichtige Aspekte zur Modellgröße:
- Viele aufgabenspezifische KI-Modelle können sehr klein sein. Ein Modell wie BudouX für eine genaue Silbentrennung in asiatischen Sprachen hat nur eine Größe von 9,4 KB im GZIP-Format. Das Spracherkennungsmodell von MediaPipe ist 315 KB groß.
- Selbst Modelle für die Bilderkennung können eine angemessene Größe haben. Das Handpose-Modell und alle zugehörigen Ressourcen betragen insgesamt 13,4 MB. Dieser Wert ist zwar viel größer als die meisten minimierten Frontend-Pakete, ist aber mit der durchschnittlichen Webseite vergleichbar, die 2,2 MB (2,6 MB auf einem Computer) beträgt.
- Gen AI-Modelle können die empfohlene Größe für Webressourcen überschreiten. DistilBERT, das entweder als sehr kleines LLM oder als einfaches NLP-Modell betrachtet wird (die Meinungen dazu gehen auseinander), hat ein Gewicht von 67 MB. Selbst kleine LLMs wie Gemma 2B können 1,3 GB erreichen. Das ist mehr als das 100-fache der durchschnittlichen Größe einer Webseite.
Mit den Entwicklertools Ihres Browsers können Sie die genaue Größe der Modelle ermitteln, die Sie verwenden möchten.
Modellgröße optimieren
- Modellqualität und Downloadgrößen vergleichen Ein kleineres Modell ist möglicherweise für Ihren Anwendungsfall ausreichend genau und gleichzeitig viel kleiner. Mithilfe von Feinabstimmung und Techniken zum Verkleinern von Modellen lässt sich die Größe eines Modells erheblich reduzieren und gleichzeitig eine ausreichende Genauigkeit beibehalten.
- Wählen Sie nach Möglichkeit spezielle Modelle aus. Modelle, die auf eine bestimmte Aufgabe zugeschnitten sind, sind in der Regel kleiner. Wenn Sie beispielsweise bestimmte Aufgaben wie die Sentiment- oder Toxizitätsanalyse ausführen möchten, sollten Sie Modelle verwenden, die auf diese Aufgaben spezialisiert sind, anstatt ein generisches LLM.
Alle diese Modelle führen dieselbe Aufgabe mit unterschiedlicher Genauigkeit aus. Ihre Größe variiert jedoch stark: von 3 MB bis 1,5 GB.
Prüfen, ob das Modell ausgeführt werden kann
Nicht alle Geräte können KI-Modelle ausführen. Selbst Geräte mit ausreichender Hardwareausstattung können Probleme haben, wenn andere ressourcenintensive Prozesse ausgeführt werden oder gestartet werden, während das Modell verwendet wird.
Bis eine Lösung verfügbar ist, kannst du Folgendes tun:
- Prüfen, ob WebGPU unterstützt wird Mehrere clientseitige KI-Bibliotheken, darunter Transformers.js Version 3 und MediaPipe, verwenden WebGPU. Derzeit greifen einige dieser Bibliotheken nicht automatisch auf Wasm zurück, wenn WebGPU nicht unterstützt wird. Sie können dies vermeiden, indem Sie Ihren KI-bezogenen Code in eine WebGPU-Funktionserkennungsprüfung einschließen, wenn Sie wissen, dass Ihre clientseitige KI-Bibliothek WebGPU benötigt.
- Schließe Geräte mit zu geringer Leistung aus. Verwenden Sie Navigator.hardwareConcurrency, Navigator.deviceMemory und die Compute Pressure API, um die Gerätefunktionen und den Druck zu schätzen. Diese APIs werden nicht in allen Browsern unterstützt und sind absichtlich ungenau, um Fingerprinting zu verhindern. Sie können jedoch helfen, Geräte auszuschließen, die sehr leistungsschwach erscheinen.
Signal für große Downloads
Warnen Sie Nutzer vor dem Herunterladen großer Modelle. Nutzer von Computern sind eher bereit, große Downloads zu akzeptieren als Nutzer von Mobilgeräten. Verwenden Sie zum Erkennen von Mobilgeräten mobile aus der User-Agent Client Hints API (oder den User-Agent-String, wenn UA-CH nicht unterstützt wird).
Große Downloads beschränken
- Laden Sie nur das herunter, was Sie benötigen. Laden Sie das Modell insbesondere dann erst herunter, wenn Sie sich relativ sicher sind, dass die KI-Funktionen verwendet werden. Wenn Sie beispielsweise eine KI-Funktion für Vorschläge beim Vorschreiben haben, sollten Sie sie erst herunterladen, wenn der Nutzer die Eingabefunktionen verwendet.
- Modell mit der Cache API explizit auf dem Gerät im Cache speichern, um das Herunterladen bei jedem Besuch zu vermeiden. Verlassen Sie sich nicht nur auf den impliziten HTTP-Browsercache.
- Modelldownload in mehrere Teile aufteilen: Mit fetch-in-chunks wird ein großer Download in kleinere Teile aufgeteilt.
Modell herunterladen und vorbereiten
Nutzer nicht blockieren
Eine reibungslose Nutzererfahrung priorisieren: Wichtige Funktionen sollten auch dann funktionieren, wenn das KI-Modell noch nicht vollständig geladen ist.
Fortschritt anzeigen
Während des Downloads des Modells wird der Fortschritt und die verbleibende Zeit angezeigt.
- Wenn Modelldownloads über Ihre clientseitige KI-Bibliothek abgewickelt werden, verwenden Sie den Status des Downloadfortschritts, um ihn dem Nutzer anzuzeigen. Wenn diese Funktion nicht verfügbar ist, können Sie ein Problem melden, um sie anzufordern (oder selbst einen Beitrag dazu zu leisten).
- Wenn Sie den Modelldownload in Ihrem eigenen Code verarbeiten, können Sie das Modell mit einer Bibliothek wie fetch-in-chunks in Chunks abrufen und dem Nutzer den Downloadfortschritt anzeigen.
- Weitere Informationen finden Sie unter Best Practices für animierte Fortschrittsanzeigen und Design für lange Wartezeiten und Unterbrechungen.
Netzwerkunterbrechungen ordnungsgemäß verarbeiten
Je nach Größe kann der Download eines Modells unterschiedlich lange dauern. Überlegen Sie, wie Sie mit Netzwerkunterbrechungen umgehen, wenn der Nutzer offline geht. Informieren Sie den Nutzer nach Möglichkeit über eine unterbrochene Verbindung und fahren Sie mit dem Download fort, sobald die Verbindung wiederhergestellt ist.
Eine labile Verbindung ist ein weiterer Grund, in mehreren Teilen herunterzuladen.
Ressourcenintensive Aufgaben auf einen Webworker auslagern
Aufwendige Aufgaben, z. B. Schritte zur Modellvorbereitung nach dem Download, können den Haupt-Thread blockieren und zu Rucklern führen. Es hilft, diese Aufgaben auf einen Webworker zu übertragen.
Demo und vollständige Implementierung auf Grundlage eines Web-Workers finden:
Während der Inferenz
Sobald das Modell heruntergeladen und bereit ist, können Sie die Inferenz ausführen. Die Inferenz kann rechenintensiv sein.
Inferenzen auf einen Webworker verschieben
Wenn die Inferenz über WebGL, WebGPU oder WebNN erfolgt, wird die GPU verwendet. Das bedeutet, dass er in einem separaten Prozess ausgeführt wird, der die Benutzeroberfläche nicht blockiert.
Bei CPU-basierten Implementierungen wie Wasm, die als Fallback für WebGPU dienen kann, wenn WebGPU nicht unterstützt wird, bleibt Ihre Seite durch die Verlagerung der Inferenz auf einen Webworker reaktionsschnell – genau wie bei der Modellvorbereitung.
Ihre Implementierung kann einfacher sein, wenn sich der gesamte KI-bezogene Code (Modellabruf, Modellvorbereitung, Inferenz) am selben Ort befindet. Sie können also einen Webworker auswählen, unabhängig davon, ob die GPU verwendet wird oder nicht.
Fehler verarbeiten
Auch wenn Sie geprüft haben, dass das Modell auf dem Gerät ausgeführt werden sollte, kann der Nutzer später einen anderen Prozess starten, der viel Ressourcen verbraucht. So können Sie das Risiko minimieren:
- Umgang mit Inferenzfehlern. Schließen Sie die Inferenz in
try/catch-Blöcke ein und behandeln Sie entsprechende Laufzeitfehler. - WebGPU-Fehler behandeln, sowohl unexpected als auch GPUDevice.lost, die auftreten, wenn die GPU tatsächlich zurückgesetzt wird, weil das Gerät Probleme hat.
Inferenzstatus angeben
Wenn die Inferenz länger dauert als sofort, signalisieren Sie dem Nutzer, dass das Modell gerade nachdenkt. Verwenden Sie Animationen, um die Wartezeit zu verringern und dem Nutzer sicherzustellen, dass die Anwendung wie vorgesehen funktioniert.
Inferenzen abbrechen können
Der Nutzer kann seine Suchanfrage im laufenden Betrieb verfeinern, ohne dass das System Ressourcen verschwendet, um eine Antwort zu generieren, die der Nutzer nie sieht.