Gute Neuigkeiten: Sie haben eine coole Web-KI-Anwendung erstellt, mit der Modelle für maschinelles Lernen direkt auf dem Gerät eines Nutzers ausgeführt werden. 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.
Dabei gibt es jedoch eine Hürde. Ihr TensorFlow.js kann sowohl mit CPUs (WebAssembly) als auch mit leistungsstärkeren GPUs (über WebGL und WebGPU) ausgeführt werden. Die Frage ist: Wie können Sie Browsertests mit der ausgewählten Hardware konsistent automatisieren?
Konsistenz ist wichtig, um die Leistung der Modelle für maschinelles Lernen im Laufe der Zeit zu vergleichen, wenn Sie sie iterieren und verbessern, bevor sie für echte Nutzer zur Verwendung auf ihrem Gerät bereitgestellt werden.
Die Einrichtung einer konsistenten Testumgebung mit GPUs kann schwieriger als erwartet sein. In diesem Blogpost beschreiben wir, mit welchen Problemen wir konfrontiert waren und wie wir sie gelöst haben, damit Sie die Leistung Ihrer Anwendung verbessern können.
Das gilt nicht nur für Web-KI-Entwickler. Wenn Sie mit Onlinespielen oder Grafiken arbeiten, ist dieser Beitrag auch für Sie interessant.
Inhalt unserer Automatisierungstools
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 verwenden, z. B. Google Cloud (GCP).
- Browser: Chrome unterstützt WebGPU, einen leistungsstarken Nachfolger von WebGL, der die Fortschritte moderner GPU-APIs ins Web bringt.
- 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 Schnittstelle auf einem Server ausgeführt wird. Wir verwenden den verbesserten neuen monitorlosen Modus anstelle des Legacy-Formulars.
Umgebung prüfen
Um zu prüfen, ob die Hardwarebeschleunigung in Chrome aktiviert ist, geben Sie am besten chrome://gpu in die Adressleiste ein. Sie können mit console.log das Äquivalent mit Puppeteer programmatisch ausführen oder den vollständigen Bericht als PDF speichern, um es 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();
Wenn Sie chrome://gpu öffnen, sollten Sie folgende Ergebnisse erhalten:
| Status der Grafikfunktion | |
|---|---|
| OpenGL: | Deaktiviert |
| Vulkan: | Deaktiviert |
| WebGL: | Nur Software, keine Hardwarebeschleunigung verfügbar. |
| WebGL2: | Nur Software, keine Hardwarebeschleunigung verfügbar. |
| WebGPU: | Deaktiviert |
|
Probleme erkannt. |
|
Kein guter Anfang. Es ist ziemlich klar, dass die Hardwareerkennung fehlgeschlagen ist. WebGL, WebGL2 und WebGPU sind im Wesentlichen deaktiviert oder nur Software. Wir sind mit diesem Problem nicht allein. Es gibt online zahlreiche Diskussionen über Menschen in einer ähnlichen Situation, z. B. über die offiziellen Chrome-Supportkanäle (1), (2).
Unterstützung für WebGPU und WebGL aktivieren
Headless Chrome deaktiviert die GPU. Um sie unter Linux zu aktivieren, wenden Sie beim Starten von Headless Chrome alle folgenden Flags an:
- Das Flag
--no-sandboxdeaktiviert 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=newwird Chrome mit dem neuen und verbesserten monitorlosen Modus ohne sichtbare Benutzeroberfläche ausgeführt. - Das Flag
--use-angle=vulkanweist Chrome an, das Vulkan-Back-End für ANGLE zu verwenden, das OpenGL ES 2/3-Aufrufe in Vulkan API-Aufrufe übersetzt. - Mit dem Flag
--enable-features=Vulkanwird das Vulkan-Grafik-Back-End für das Erstellen und Rastern in Chrome aktiviert. - Das Flag
--disable-vulkan-surfacedeaktiviert die ErweiterungVK_KHR_surfaceder Vulkan-Instanz. Für das aktuelle Renderingergebnis auf dem Bildschirm wird anstelle einer Swap-Kette Bit Blit verwendet. - Das
--enable-unsafe-webgpu-Flag 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 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 Grafikfunktion | |
|---|---|
| OpenGL: | Deaktiviert |
| Vulkan: | Deaktiviert |
| WebGL: | Nur Software, keine Hardwarebeschleunigung verfügbar. |
| WebGL2: | Nur Software, keine Hardwarebeschleunigung verfügbar. |
| WebGPU: | Nur Software, keine Hardwarebeschleunigung verfügbar. |
Allerdings ist die Hardwarebeschleunigung immer noch nicht verfügbar und die NVIDIA T4-GPU wird nicht erkannt.
Installieren Sie die richtigen GPU-Treiber
Wir haben die Ausgabe von chrome://gpu mit einigen GPU-Experten im Chrome-Team genauer untersucht. Wir haben Probleme mit den auf der Linux Colab-Instanz installierten Standardtreibern festgestellt. Diese verursachten Probleme mit Vulkan, was dazu führt, dass Chrome die NVIDIA T4-GPU auf GL_RENDERER-Ebene nicht erkennen konnte, wie in der folgenden Ausgabe gezeigt. Dies führt zu Problemen mit Headless Chrome.
| Fahrerinformationen | |
|---|---|
| GL_RENDERER | ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE), SwiftShader driver-5.0.0) |
Das Problem wird dadurch behoben, dass die richtigen kompatiblen Treiber installiert werden.
| 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. In den letzten beiden Zeilen können Sie die Ausgaben, die von den NVIDIA-Treibern erkannt werden, zusammen mit vulkaninfo protokollieren.
apt-get install -y vulkan-tools libnvidia-gl-525// Verify the NVIDIA drivers detects along with vulkaninfonvidia-smivulkaninfo --summary
Führen Sie das Skript jetzt noch einmal aus, um das folgende Ergebnis zu erhalten. 🎉
| Status der Grafikfunktion | |
|---|---|
| OpenGL: | Aktiviert |
| Vulkan: | Aktiviert |
| WebGL: | Hardwarebeschleunigt, aber reduzierte Leistung |
| WebGL2: | Hardwarebeschleunigt, aber reduzierte Leistung |
| WebGPU: | Hardwarebeschleunigt, aber reduzierte Leistung |
Durch die Verwendung der richtigen Treiber und Flags beim Ausführen von Chrome haben wir jetzt WebGPU- und WebGL-Unterstützung für den glänzenden, neuen monitorlosen Modus.
Hinter den Kulissen: Die Ermittlungen unseres Teams
Nach gründlicher Recherche haben wir keine funktionierenden Methoden 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 diesen Erfolg in der NVIDIA T4-Umgebung von Colab nicht reproduzieren, da wir zwei Hauptprobleme hatten:
- Einige Flag-Kombinationen ermöglichen die Erkennung der GPU, ermöglichen Ihnen jedoch nicht, die GPU tatsächlich zu verwenden.
- Beispiele für funktionierende Lösungen von Drittanbietern haben die alte monitorlose Chrome-Version verwendet, die zugunsten der neuen Version eingestellt wird. Wir brauchten eine zukunftssichere Lösung, die mit dem neuen Headless Chrome funktioniert.
Wir haben eine TensorFlow.js-Beispielwebseite zur Bilderkennung ausgeführt, um die Unterauslastung der GPU zu bestätigen. Dabei haben wir ein Modell zur Erkennung von Kleidungsproben trainiert (ähnlich wie eine „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 Headless Chrome im Standardzustand aufgerufen wird, können wir die Ausgabe der JavaScript-Konsole in der serverseitigen Node.js-Befehlszeile protokollieren, um zu sehen, 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 einfache alte JS-CPU-Ausführung zurückgegriffen hat, anstatt die GPU zu verwenden:
Nachdem Sie die Treiber korrigiert und die richtige Kombination von Flags für die Headless Chrome-Version verwendet haben, führt ein erneutes Ausführen des TensorFlow.js-Trainingsbeispiels zu deutlich schnelleren Trainingsphasen.
Zusammenfassung
Web-KI ist exponentiell gewachsen seit ihrer Einführung im Jahr 2017. Mit Browsertechnologien wie WebGPU, WebGL und WebAssembly können die mathematischen Vorgänge eines Modells für maschinelles Lernen auf Clientseite weiter beschleunigt werden.
Im Jahr 2023 wurden TensorFlow.js und MediaPipe Web mehr als eine Milliarde Downloads von Modellen und Bibliotheken erreicht. Das ist ein historischer Meilenstein und ein Zeichen dafür, wie Webentwickler und -entwickler KI in ihren Webanwendungen der nächsten Generation einsetzen, um wirklich beeindruckende Lösungen zu entwickeln.
Hoher Nutzungserfolg bringt große Verantwortung mit sich. Bei dieser Nutzung in Produktionssystemen müssen clientseitige, browserbasierte KI-Modelle in einer echten Browserumgebung getestet werden, wobei sie außerdem skalierbar, automatisierbar und innerhalb einer bekannten standardisierten Hardwarekonfiguration sind.
Durch die kombinierte Leistung des neuen Headless Chrome und Puppeteer können Sie solche Arbeitslasten zuverlässig in einer standardisierten und replizierbaren Umgebung testen und erhalten so konsistente und zuverlässige Ergebnisse.
Zusammenfassung
In unserer Dokumentation finden Sie eine Schritt-für-Schritt-Anleitung, mit der Sie die vollständige Einrichtung selbst ausprobieren können.
Wenn Sie dies hilfreich fanden, schreiben Sie uns auf LinkedIn, X (ehemals Twitter) oder in einem sozialen Netzwerk, das Sie verwenden. Verwenden Sie dazu das Hashtag #WebAI. Wir freuen uns auf Ihr Feedback, damit wir in Zukunft weitere solcher Inhalte verfassen können.
Markieren Sie das GitHub-Repository mit einem Stern, 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 geholfen haben, die bei dieser Lösung aufgetreten sind. Ein besonderes Dankeschön geht an Jecelyn Yeen und Alexandra White für die Unterstützung in diesem Blogpost. Vielen Dank an Yuly Novikov, Andrey Kosyakov und Alex Rudenko, die maßgeblich an der Entwicklung der endgültigen, funktionierenden Lösung beteiligt waren.