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

Jason Mayes

François Beaufort

Gute Neuigkeiten: Sie haben eine coole Web-AI-Anwendung erstellt das ML-Modelle direkt auf dem Gerät eines Nutzers ausführt. Sie läuft vollständig im clientseitigen Webbrowser ausführen, ohne auf die Cloud angewiesen zu sein. Dieses On-Device-Gerät verbessert den Datenschutz für Nutzer, steigert die Leistung und senkt Kosten erheblich.

Es gibt jedoch ein Problem. Ihr TensorFlow.js-Modell kann mit sowohl CPUs (WebAssembly) als auch leistungsfähigere GPUs (durch WebGL und WebGPU). Die Frage lautet: Wie lassen sich Browsertests mit der gewählten Hardware konsequent automatisieren?

Die Consistency ist entscheidend, um die Leistung von Modellen für maschinelles Lernen im Zeitverlauf zu vergleichen, während Sie sie iterieren und verbessern, bevor sie für echte Nutzer auf ihren Geräten bereitgestellt werden.

Das Einrichten einer konsistenten Testumgebung mit GPUs kann schwieriger sein als zu erwarten war. In diesem Blogpost beschreiben wir die Probleme, die wir hatten, und wie wir sie gelöst haben, damit Sie die Leistung Ihrer Anwendung verbessern können.

Das ist nicht nur für Web-KI-Entwickler interessant. Wenn Sie im Web spielen, Grafiken sehen, ist dieser Beitrag auch für Sie wertvoll.

Was steckt in unserer Automatisierungs-Toolbox?

Wir verwenden Folgendes:

• Umgebung: Ein Linux-basiertes Google Colab notebook, das mit einem NVIDIA-Modul verbunden ist T4- oder V100-GPU Sie können auch andere Cloud-Plattformen wie Google Cloud (GCP) verwenden.
• Browser: Chrome unterstützt WebGPU, ein leistungsstarker Nachfolger von WebGL, bringt die Fortschritte moderner GPU-APIs ins Web.
• Automatisierung: Puppeteer ist eine Node.js-Bibliothek, mit der Sie können Sie Browser programmatisch mit JavaScript steuern. Mit Puppeteer können wir Automatisieren Sie Chrome im monitorlosen Modus, d. h. der Browser läuft ohne sichtbare Oberfläche auf einem Server. Wir verwenden die verbesserte monitorlosen Modus Legacy-Formular.

Umgebung prüfen

Die beste Möglichkeit, die Hardwarebeschleunigung in Chrome zu prüfen, ist das Eingeben von chrome://gpu in die Adressleiste. Mit console.log können Sie das Äquivalent mit Puppeteer programmatisch 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:

Kein guter Anfang. Es ist ziemlich klar, dass die Hardwareerkennung fehlgeschlagen ist. WebGL, WebGL2 und WebGPU sind im Grunde deaktiviert oder nur Software. Mi. sind mit diesem Problem nicht allein – es gibt online zahlreiche Diskussionen in einer ähnlichen Situation, z. B. über die offiziellen Chrome-Supportkanäle (1) (2)

Unterstützung von WebGPU und WebGL aktivieren

Standardmäßig ist die monitorlose Chrome-Version deaktiviert die GPU. Um die Funktion unter Linux zu aktivieren, wenden Sie beim Starten der Funktion „Headless“ alle der folgenden Flags an. Chrome:

• Das Flag --no-sandbox deaktiviert die Sicherheits-Sandbox von Chrome, die den Browserprozess vom Rest des Systems. Das Ausführen von Chrome als Root ohne diese Sandbox wird nicht unterstützt.
• Mit dem Flag --headless=new wird Chrome mit dem neuen und verbesserten monitorlosen Modus ohne sichtbare UI.
• Das Flag --use-angle=vulkan weist Chrome an, die Methode Vulkan-Backend für ANGLE, die wandelt OpenGL ES 2/3-Aufrufe in Vulkan API-Aufrufe um.
• Das Flag --enable-features=Vulkan aktiviert das Vulkan-Grafik-Backend für Erstellung und Rasterung in Chrome.
• Mit dem Flag --disable-vulkan-surface wird die VK_KHR_surface-Vulkan-Instanzerweiterung deaktiviert. Anstatt eine Swapchain zu verwenden, Bit blit wird verwendet für: das Renderergebnis auf dem Bildschirm zu präsentieren.
• Das Flag --enable-unsafe-webgpu aktiviert die experimentelle WebGPU API in Chrome unter Linux und deaktiviert die Sperrliste für Adapter.

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

/* 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 Script noch einmal aus. Es wurden keine WebGPU-Probleme erkannt und der Wert ändert sich von nur auf Software deaktiviert.

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

Die richtigen GPU-Treiber installieren

Wir haben die Ausgabe von chrome://gpu gemeinsam mit einigen GPU-Experten genauer untersucht aus dem Chrome-Team. Wir haben Probleme mit den Standardtreibern festgestellt, die auf der Linux Colab Dies verursacht Probleme mit Vulkan und führt dazu, dass Chrome NVIDIA T4-GPU auf GL_RENDERER-Ebene, wie in der folgenden Ausgabe dargestellt. Dieses verursacht Probleme mit monitorlosem Chrome.

Durch Installieren der richtigen Treiber wird das Problem daher behoben.

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 von NVIDIA-Treibern und vulkaninfo erkannten Ausgaben 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. 🎉

Durch die Verwendung der richtigen Treiber und Flags beim Ausführen von Chrome haben wir jetzt WebGPU- und WebGL-Unterstützung mit dem neuen Headless-Modus.

Hinter den Kulissen: Die Untersuchung durch unser Team

Nach vielen Recherchen fanden wir keine Arbeitsmethoden für die Umgebung, die in Google Colab ausgeführt werden mussten. hoffnungsvolle Beiträge die in anderen Umgebungen funktioniert hat, was vielversprechend war. Letztendlich waren wir konnten wir ihren Erfolg auch in der Colab NVIDIA T4-Umgebung wiederholen, da wir Hauptprobleme:

1. Einige Flagskombinationen ermöglichen die Erkennung der GPU, lassen jedoch nicht zu. die GPU tatsächlich nutzen.
2. Beispiele für funktionierende Lösungen von Drittanbietern, die die alte monitorlose Chrome-Version verwendet haben die irgendwann zugunsten der neue Version verfügbar. Wir brauchten eine Lösung die mit dem neuen Headless Chrome kompatibel ist, um für die Zukunft gewappnet zu sein.

Wir haben die Unterauslastung der GPU durch Ausführen eines Beispiel für eine TensorFlow.js-Webseite für die Bilderkennung Dabei haben wir ein Modell darauf trainiert, Bekleidungsproben zu erkennen. Welt“ des maschinellen Lernens.

Auf einem normalen Computer sollten 50 Trainingszyklen (sogenannte Epochen) in weniger Zeit ausgeführt werden. jeweils als 1 Sekunde. Wenn wir Headless Chrome im Standardzustand aufrufen, können wir die JavaScript-Konsolenausgabe in der serverseitigen Node.js-Befehlszeile protokollieren, um zu sehen, wie schnell diese Trainingszyklen tatsächlich ablaufen.

Wie erwartet dauerte jede Trainingsphase viel länger als erwartet (mehrere Sekunden), was darauf hindeutet, dass Chrome auf die alte JS-CPU-Ausführung zurückgekehrt ist statt die GPU zu verwenden:

Nachdem die Treiber korrigiert und die richtige Kombination von Flags für Headless Chrome verwendet wurde, führt das erneute Ausführen des TensorFlow.js-Trainingsbeispiels zu viel schnelleren Trainingsepochen.

Zusammenfassung

Web-KI hat sich seit ihrer Einführung im Jahr 2017 exponentiell weiterentwickelt. Mit Browsertechnologien wie WebGPU, WebGL und WebAssembly, die Methode mathematische Operationen können auf Clientseite weiter beschleunigt werden.

Bis 2023 erreichten TensorFlow.js und MediaPipe Web über 1 Milliarde Downloads von Modelle und Bibliotheken – ein historischer Meilenstein und ein Zeichen dafür, wie Web Entwickler und Techniker setzen auf KI in der nächsten Generation Web-Apps zu erstellen, um beeindruckende Lösungen zu entwickeln.

Ein großer Erfolg bei der Nutzung birgt gleichzeitig eine große Verantwortung. Bei diesem Nutzungsgrad in Produktionssystemen wird es erforderlich, clientseitige, browserbasierte KI zu testen. in einer echten Browser-Umgebung zu nutzen und gleichzeitig skalierbar, automatisierbar, und mit einer bekannten standardisierten Hardwarekonfiguration.

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

Zusammenfassung

In unserer Dokumentation finden Sie eine Schritt-für-Schritt-Anleitung, mit der Sie die gesamte Einrichtung selbst ausprobieren können.

Wenn Sie das nützlich fanden, freuen Sie sich auf LinkedIn, X (ehemals Twitter) usw. soziales Netzwerk mit dem Hashtag #WebAI Ich würde mich freuen, wenn Sie damit wir zukünftig mehr Videos dieser Art veröffentlichen können.

GitHub-Repository mit einem Stern markieren um zukünftige Updates zu erhalten.

Danksagungen

Ein großes Dankeschön an alle Mitglieder des Chrome-Teams, die beim Debuggen des Treibers und WebGPU-Probleme bei dieser Lösung. Besonderer Dank geht es Jecelyn Yeen und Alexandra White für ihre Hilfe bei Wortschmied in diesem Blogpost. Dank Yuly Novikov, Andrey Kosjakow und Alex Rudenko spielte eine Instrumentalmusik bei der Entwicklung der finalen, funktionierenden Lösung.