Web-KI-Modelltests mit WebGPU, WebGL und Headless Chrome vorantreiben

François Beaufort
François Beaufort

Gute Neuigkeiten: Sie haben eine coole Web-KI-Anwendung entwickelt, die Modelle für maschinelles Lernen direkt auf dem Gerät eines Nutzers ausführt. Es wird vollständig im clientseitigen Webbrowser ausgeführt, ohne die Cloud zu verwenden. Dieses On-Device-Design verbessert den Datenschutz für Nutzer, steigert die Leistung und senkt die Kosten erheblich.

Es gibt jedoch ein Hindernis. Ihr TensorFlow.js-Modell kann sowohl mit CPUs (WebAssembly) als auch mit leistungsstärkeren GPUs (über WebGL und WebGPU) ausgeführt werden. Die Frage ist: Wie können Browsertests mit der ausgewählten Hardware konsistent automatisiert werden?

Die Aufrechterhaltung der Konsistenz ist entscheidend, um die Leistung von ML-Modellen im Laufe der Zeit zu vergleichen, während Sie sie iterieren und verbessern, bevor sie für echte Nutzer auf ihrem Gerät verwendet werden.

Die Einrichtung einer konsistenten Testumgebung mit GPUs kann schwieriger als erwartet sein. In diesem Blogpost beschreiben wir die Probleme, mit denen wir konfrontiert sind, und wie wir sie gelöst haben, damit du die Leistung deiner Anwendung verbessern kannst.

Das gilt nicht nur für Web-KI-Entwickler. Wenn ihr euch mit Webgaming oder Grafik beschäftigt, ist auch dieser Post wertvoll für euch.

Was steckt in unserer Automatisierungs-Toolbox?

Wir verwenden Folgendes:

  • Umgebung: Ein Linux-basiertes Google Colab-Notebook, das mit einer NVIDIA T4- oder V100-GPU verbunden ist. Sie können auch andere Cloud-Plattformen wie Google Cloud (GCP) verwenden, wenn Sie dies bevorzugen.
  • Browser: Chrome unterstützt WebGPU, einen leistungsstarken Nachfolger von WebGL, der die Fortschritte moderner GPU APIs im Web ermöglicht.
  • Automatisierung: Puppeteer ist eine Node.js-Bibliothek, mit der Sie Browser programmatisch mit JavaScript steuern können. Mit Puppeteer können wir Chrome im monitorlosen Modus automatisieren, was bedeutet, dass der Browser ohne sichtbare Oberfläche auf einem Server ausgeführt wird. Wir verwenden den verbesserten neuen monitorlosen Modus, nicht das Legacy-Formular.

Umgebung prüfen

Wenn du prüfen möchtest, ob die Hardwarebeschleunigung in Chrome aktiviert ist, gib am besten chrome://gpu in die Adressleiste ein. Sie können mit console.log programmatisch die entsprechende Funktion mit Puppeteer ausführen oder den vollständigen Bericht als PDF speichern, um ihn manuell zu prüfen:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

Öffnen Sie chrome://gpu. Sie sollten folgende Ergebnisse erhalten:

Status der Grafikfunktionen
OpenGL: Deaktiviert
Vulkan: Deaktiviert
WebGL: Nur Software, keine Hardwarebeschleunigung.
WebGL2: Nur Software, keine Hardwarebeschleunigung.
WebGPU: Deaktiviert

Probleme erkannt.
WebGPU wurde über die Sperrliste oder die Befehlszeile deaktiviert.

Kein guter Anfang. Es ist ziemlich klar, dass die Hardwareerkennung nicht funktioniert hat. WebGL, WebGL2 und WebGPU sind im Grunde deaktiviert oder nur Software. Mit diesem Problem sind wir nicht allein. Online finden zahlreiche Diskussionen über Nutzer in einer ähnlichen Situation, unter anderem über die offiziellen Chrome-Supportkanäle (1) (2).

Unterstützung von WebGPU und WebGL aktivieren

In Headless Chrome ist die GPU standardmäßig deaktiviert. Zur Aktivierung unter Linux wenden Sie beim Starten von Headless Chrome alle der folgenden Flags an:

  • Das Flag --no-sandbox deaktiviert die Sicherheits-Sandbox von Chrome, die den Browserprozess vom Rest des Systems isoliert. Die Ausführung von Chrome als Root ohne diese Sandbox wird nicht unterstützt.
  • Mit dem Flag --headless=new wird Chrome im neuen und verbesserten monitorlosen Modus ohne sichtbare UI ausgeführt.
  • Das Flag --use-angle=vulkan weist Chrome an, das Vulkan-Back-End für ANGLE zu verwenden, das OpenGL ES 2/3-Aufrufe in Vulkan API-Aufrufe umwandelt.
  • Das Flag --enable-features=Vulkan aktiviert das Vulkan-Grafik-Back-End für die Erstellung und Rasterung in Chrome.
  • Das Flag --disable-vulkan-surface deaktiviert die Vulkan-Instanzerweiterung VK_KHR_surface. Anstelle einer Auslagerungskette wird für das aktuelle Rendering-Ergebnis auf dem Bildschirm Bit Blit verwendet.
  • Das Flag --enable-unsafe-webgpu aktiviert die experimentelle WebGPU API in Chrome unter Linux und deaktiviert die Sperrliste der Adapter.

Jetzt kombinieren wir alle bisher vorgenommenen Änderungen. Hier ist das vollständige Skript.

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

Führen Sie das Skript noch einmal aus. Es werden keine WebGPU-Probleme erkannt und der Wert ändert sich von „deaktiviert“ zu „nur Software“.

Status der Grafikfunktionen
OpenGL: Deaktiviert
Vulkan: Deaktiviert
WebGL: Nur Software, keine Hardwarebeschleunigung.
WebGL2: Nur Software, keine Hardwarebeschleunigung.
WebGPU: Nur Software, keine Hardwarebeschleunigung.

Die Hardwarebeschleunigung ist jedoch immer noch nicht verfügbar und die NVIDIA T4-GPU wird nicht erkannt.

Die richtigen GPU-Treiber installieren

Wir haben die Ausgabe von chrome://gpu gemeinsam mit einigen GPU-Experten im Chrome-Team genauer untersucht. Wir haben Probleme mit den auf der Linux-Colab-Instanz installierten Standardtreibern festgestellt, die zu Problemen mit Vulkan führen und dazu führen, dass Chrome die NVIDIA T4-GPU auf GL_RENDERER-Ebene nicht erkennen kann, wie in der folgenden Ausgabe dargestellt. Dies verursacht Probleme mit monitorlosem Chrome.

Die Standardausgabe erkennt die NVIDIA T4-GPU nicht.
Fahrerinformationen
GL_RENDERER ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero)) (0x0000C0DE)), SwiftShader-Treiber 5.0.0)

Durch Installieren der richtigen Treiber wird das Problem daher behoben.

Aktualisierte Ausgabe nach der Installation der Treiber:
Fahrerinformationen
GL_RENDERER ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

Führen Sie während der Einrichtung die folgenden Befehle aus, um die richtigen Treiber zu installieren. Mit den letzten beiden Zeilen können Sie die Ausgaben der erkannten NVIDIA-Treiber zusammen mit vulkaninfo protokollieren.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

Führen Sie nun das Skript erneut aus, um das folgende Ergebnis zu erhalten. 🎉

Status der Grafikfunktionen
OpenGL: Aktiviert
Vulkan: Aktiviert
WebGL: Hardware beschleunigt, aber bei geringerer Leistung.
WebGL2: Hardware beschleunigt, aber bei geringerer Leistung.
WebGPU: Hardware beschleunigt, aber bei geringerer Leistung.

Durch die Verwendung der richtigen Treiber und Flags beim Ausführen von Chrome unterstützen wir jetzt WebGPU und WebGL im neuen monitorlosen Modus.

Hinter den Kulissen: Die Untersuchung durch unser Team

Nach vielen Recherchen haben wir keine Arbeitsmethoden für die Umgebung gefunden, die wir in Google Colab ausführen mussten. Es gab jedoch einige hoffnungsvolle Beiträge, die in anderen Umgebungen funktionierten, was vielversprechend war. Letztendlich konnten wir ihren Erfolg in der NVIDIA T4-Umgebung von Colab nicht wiederholen, da wir zwei wesentliche Probleme hatten:

  1. Einige Kombinationen von Flags ermöglichen die Erkennung der GPU, ermöglichen es Ihnen jedoch nicht, die GPU tatsächlich zu verwenden.
  2. Beispiele für funktionierende Lösungen von Drittanbietern verwendet die alte monitorlose Version von Chrome, die irgendwann zugunsten der neuen Version eingestellt wird. Wir brauchten eine Lösung, die mit dem neuen Headless Chrome kompatibel ist, um für die Zukunft gewappnet zu sein.

Wir haben die unzureichende Auslastung der GPU überprüft, indem wir eine Beispielwebseite von TensorFlow.js zur Bilderkennung ausgeführt haben. Dabei wurde ein Modell so trainiert, dass es Kleidungsstücke erkennt, ähnlich wie bei einer "Hallo Welt" des maschinellen Lernens.

Auf einer regulären Maschine sollten 50 Trainingszyklen (sogenannte Epochen) in jeweils weniger als 1 Sekunde ausgeführt werden. Wenn wir Headless Chrome im Standardzustand aufrufen, können wir die Ausgabe der JavaScript-Konsole in der serverseitigen Node.js-Befehlszeile protokollieren, um festzustellen, wie schnell diese Trainingszyklen tatsächlich gedauert haben.

Wie erwartet dauerte jede Trainingsphase viel länger als erwartet (mehrere Sekunden). Dies deutet darauf hin, dass Chrome auf eine alte JS-CPU-Ausführung zurückgekehrt ist, statt die GPU zu nutzen:

Die Trainingsphasen laufen in einem langsameren Rhythmus.
Abbildung 1: Echtzeiterfassung, die zeigt, wie lange die Ausführung der einzelnen Trainingsphasen gedauert hat (in Sekunden).

Nachdem Sie die Treiber behoben und die richtige Kombination von Flags für Headless Chrome verwendet haben, führt das erneute Ausführen des TensorFlow.js-Trainingsbeispiels zu deutlich schnelleren Trainingsphasen.

Die Geschwindigkeit nimmt über Epochen hinweg zu.
Abbildung 2: Echtzeiterfassung mit der Beschleunigung von Epochen.

Zusammenfassung

Web AI ist seit ihrer Einführung im Jahr 2017 exponentiell gewachsen. Mit Browsertechnologien wie WebGPU, WebGL und WebAssembly können die mathematischen Operationen eines Modells für maschinelles Lernen auf Clientseite weiter beschleunigt werden.

Seit 2023 haben TensorFlow.js und MediaPipe Web über 1 Milliarde Downloads von Modellen und Bibliotheken heruntergeladen – ein historischer Meilenstein und ein Zeichen dafür, wie Webentwickler und Webentwickler KI in ihren Webanwendungen der nächsten Generation einsetzen, um unglaubliche Lösungen zu entwickeln.

Eine erfolgreiche Nutzung bringt auch große Verantwortung mit sich. Auf diesem Grad der Nutzung in Produktionssystemen besteht die Notwendigkeit, clientseitige, browserbasierte KI-Modelle in einer echten Browserumgebung zu testen, die gleichzeitig skalierbar und automatisiert werden und innerhalb einer bekannten standardisierten Hardwarekonfiguration sein muss.

Durch die Kombination der Leistungsfähigkeit des neuen monitorlosen Chrome- und Puppeteer können Sie solche Arbeitslasten sicher in einer standardisierten und replizierbaren Umgebung testen und für konsistente und zuverlässige Ergebnisse sorgen.

Zusammenfassung

In unserer Dokumentation finden Sie eine detaillierte Anleitung, mit der Sie die vollständige Einrichtung selbst ausprobieren können.

Wenn du diese Funktion hilfreich fandest, erwähne sie auf LinkedIn, X (ehemals Twitter) oder in einem anderen sozialen Netzwerk, das du mit dem Hashtag #WebAI nutzt. Wir würden uns über Ihr Feedback freuen, damit wir in Zukunft mehr Inhalte dieser Art veröffentlichen können.

Fügen Sie dem GitHub-Repository einen Stern hinzu, um zukünftige Updates zu erhalten.

Danksagungen

Ein großes Dankeschön an alle Mitglieder des Chrome-Teams, die uns bei der Behebung der Treiber- und WebGPU-Probleme bei dieser Lösung geholfen haben, und ein besonderes Dankeschön an Jecelyn Yeen und Alexandra White für die Hilfe bei diesem Blogpost. Vielen Dank an Yuly Novikov, Andrey Kosyakov und Alex Rudenko, die maßgeblich an der Entwicklung der endgültigen, funktionierenden Lösung mitgewirkt haben.