Das Einrichten einer konsistenten Testumgebung mit GPUs kann schwieriger als erwartet sein. Im Folgenden finden Sie die Schritte zum Testen clientseitiger, browserbasierter KI-Modelle in echten Browserumgebungen, die dabei skalierbar und automatisierbar sind und im Rahmen einer bekannten standardisierten Hardwarekonfiguration erfolgen.
In diesem Fall ist der Browser ein echter Chrome-Browser mit Hardwareunterstützung statt Softwareemulation.
Dieser Leitfaden ist für Sie geeignet, ganz gleich, ob Sie Web-KI-, Web-Gaming- oder Grafikentwickler sind oder sich für das Testen von Web AI-Modellen interessieren.
Schritt 1: Neues Google Colab-Notebook erstellen
1. Rufen Sie colab.new auf, um ein neues Colab-Notebook zu erstellen. Es sollte in etwa so aussehen wie in Abbildung 1. 2. Folgen Sie der Anleitung, um sich in Ihrem Google-Konto anzumelden.![Screenshot eines neuen Colab](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/colab_new.png?authuser=6&hl=de)
Schritt 2: Verbindung zu einem T4-GPU-fähigen Server herstellen
- Klicken Sie oben rechts im Notebook auf Verbinden .
- Wählen Sie Laufzeittyp ändern aus:
Abbildung 2: Laufzeit in der Colab-Oberfläche ändern. - Wählen Sie im modalen Fenster T4-GPU als Hardwarebeschleuniger aus. Wenn Sie eine Verbindung herstellen, verwendet Colab eine Linux-Instanz mit einer angehängten NVIDIA T4-GPU.
Abbildung 3: Wählen Sie unter „Hardwarebeschleuniger“ die Option T4 GPU aus. - Klicken Sie auf Speichern.
- Klicken Sie auf die Schaltfläche Verbinden, um eine Verbindung zur Laufzeit herzustellen. Nach einiger Zeit werden auf der Schaltfläche ein grünes Häkchen sowie Diagramme zur RAM- und Festplattennutzung angezeigt. Dies bedeutet, dass ein Server mit der erforderlichen Hardware erfolgreich erstellt wurde.
Gut gemacht! Sie haben gerade einen Server mit einer angehängten GPU erstellt.
Schritt 3: Korrekte Treiber und Abhängigkeiten installieren
Kopieren Sie die folgenden beiden Codezeilen und fügen Sie sie in die erste Codezelle des Notebooks ein. In einer Colab-Umgebung wird der Ausführung der Befehlszeile ein Ausrufezeichen vorangestellt.
!git clone https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support.git !cd headless-chrome-nvidia-t4-gpu-support && chmod +x scriptyMcScriptFace.sh && ./scriptyMcScriptFace.sh
- Den von diesem Skript ausgeführten Rohcode für die Befehlszeile sehen Sie im Script des Skripts auf GitHub.
# Update, install correct drivers, and remove the old ones. apt-get install -y vulkan-tools libnvidia-gl-525 # Verify NVIDIA drivers can see the T4 GPU and that vulkan is working correctly. nvidia-smi vulkaninfo --summary # Now install latest version of Node.js npm install -g n n lts node --version npm --version # Next install Chrome stable curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list sudo apt update sudo apt install -y google-chrome-stable # Start dbus to avoid warnings by Chrome later. export DBUS_SESSION_BUS_ADDRESS="unix:path=/var/run/dbus/system_bus_socket" /etc/init.d/dbus start
Klicken Sie neben der Zelle auf
, um den Code auszuführen.Abbildung 4 Sobald der Code ausgeführt wurde, prüfen Sie, ob
nvidia-smi
ähnlich wie im folgenden Screenshot ausgegeben wurde. So können Sie prüfen, ob eine GPU angehängt ist und auf Ihrem Server erkannt wird. Eventuell müssen Sie nach vorne scrollen, um diese Ausgabe zu sehen.Abbildung 5: Suchen Sie die Ausgabe, die mit „NVIDIA-SMI“ beginnt.
Schritt 4: Headless Chrome verwenden und automatisieren
- Klicken Sie auf die Schaltfläche Code, um eine neue Codezelle hinzuzufügen.
- Sie können dann Ihren benutzerdefinierten Code schreiben, um ein Node.js-Projekt mit Ihren bevorzugten Parametern aufzurufen (oder einfach
google-chrome-stable
direkt in der Befehlszeile aufrufen). Im Folgenden finden Sie Beispiele für beide.
Teil A: Headless Chrome direkt in der Befehlszeile verwenden
# Directly call Chrome to dump a PDF of WebGPU testing page
# and store it in /content/gpu.pdf
!google-chrome-stable \
--no-sandbox \
--headless=new \
--use-angle=vulkan \
--enable-features=Vulkan \
--disable-vulkan-surface \
--enable-unsafe-webgpu \
--print-to-pdf=/content/gpu.pdf https://webgpureport.org
Im Beispiel wurde die resultierende PDF-Erfassung in /content/gpu.pdf
gespeichert. Maximieren Sie den Inhalt , um diese Datei anzusehen.
Klicken Sie dann auf , um die PDF-Datei auf Ihren lokalen Computer herunterzuladen.
![Screenshot eines neuen Colab](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/download-pdf.gif?authuser=6&hl=de)
Teil B: Chrome mit Puppeteer befehligen
Wir haben ein minimalistisches Beispiel mit Puppeteer zur Steuerung von Headless Chrome bereitgestellt, das wie folgt ausgeführt werden kann:
# Call example node.js project to perform any task you want by passing
# a URL as a parameter
!node headless-chrome-nvidia-t4-gpu-support/examples/puppeteer/jPuppet.js chrome://gpu
Im jPuppet-Beispiel können wir ein Node.js-Skript aufrufen, um einen Screenshot zu erstellen. Aber wie funktioniert das? Sehen Sie sich diese Schritt-für-Schritt-Anleitung zum Node.js-Code in jPuppet.js an.
Aufschlüsselung des Node.js-Codes von jPuppet.js
Importieren Sie zuerst Puppeteer. So können Sie Chrome mit Node.js per Fernzugriff steuern:
import puppeteer from 'puppeteer';
Prüfen Sie als Nächstes, welche Befehlszeilenargumente an die Knotenanwendung übergeben wurden. Das dritte Argument muss festgelegt sein, das eine URL darstellt, zu der Sie navigieren möchten. Sie müssen sich hier das dritte Argument genauer ansehen, da die ersten beiden Argumente Node selbst und das Skript aufrufen, das wir ausführen. Das dritte Element enthält tatsächlich den ersten Parameter, der an das Node-Programm übergeben wurde:
const url = process.argv[2];
if (!url) {
throw "Please provide a URL as the first argument";
}
Definieren Sie nun eine asynchrone Funktion mit dem Namen runWebpage()
. Dadurch wird ein Browserobjekt erstellt, das mit den Befehlszeilenargumenten konfiguriert ist, um die Chrome-Binärdatei so auszuführen, wie es erforderlich ist, damit WebGL und WebGPU wie unter WebGPU- und WebGL-Unterstützung aktivieren beschrieben funktionieren.
async function runWebpage() {
const browser = await puppeteer.launch({
headless: 'new',
args: [
'--no-sandbox',
'--headless=new',
'--use-angle=vulkan',
'--enable-features=Vulkan',
'--disable-vulkan-surface',
'--enable-unsafe-webgpu'
]
});
Erstellen Sie ein neues Browserseitenobjekt, mit dem Sie später eine beliebige URL aufrufen können:
const page = await browser.newPage();
Fügen Sie dann einen Event-Listener hinzu, der console.log
-Ereignisse überwacht, wenn die Webseite JavaScript ausführt. Auf diese Weise können Sie Nachrichten in der Node-Befehlszeile protokollieren und den Konsolentext auf eine spezielle Wortgruppe (in diesem Fall captureAndEnd
) prüfen, die einen Screenshot auslöst und dann den Browserprozess in Node beendet. Dies ist nützlich für Webseiten, die etwas Arbeit erfordern, bevor ein Screenshot erstellt werden kann, und die eine nicht deterministische Ausführungszeit haben.
page.on('console', async function(msg) {
console.log(msg.text());
if (msg.text() === 'captureAndEnd') {
await page.screenshot({ path: '/content/screenshotEnd.png' });
await browser.close();
}
});
Abschließend können Sie der Seite den Befehl geben, die angegebene URL aufzurufen, und einen ersten Screenshot erstellen, sobald die Seite geladen ist.
Wenn Sie einen Screenshot von chrome://gpu
erstellen, können Sie die Browsersitzung sofort schließen, anstatt auf eine Konsolenausgabe zu warten, da diese Seite nicht von Ihrem eigenen Code gesteuert wird.
await page.goto(url, { waitUntil: 'networkidle2' });
await page.screenshot({path: '/content/screenshot.png'});
if (url === 'chrome://gpu') {
await browser.close();
}
}
runWebpage();
„package.json“ ändern
Sie haben vielleicht bemerkt, dass wir am Anfang der Datei jPuppet.js
eine Importanweisung verwendet haben. In package.json
müssen die Typwerte auf module
festgelegt werden. Andernfalls erhalten Sie eine Fehlermeldung, dass das Modul ungültig ist.
{
"dependencies": {
"puppeteer": "*"
},
"name": "content",
"version": "1.0.0",
"main": "jPuppet.js",
"devDependencies": {},
"keywords": [],
"type": "module",
"description": "Node.js Puppeteer application to interface with headless Chrome with GPU support to capture screenshots and get console output from target webpage"
}
Das war schon alles. Puppeteer erleichtert die programmatische Schnittstelle mit Chrome.
Abgeschlossen
Wir können jetzt überprüfen, ob der TensorFlow.js Fashion MNIST-Klassifikator eine Hose in einem Bild korrekt erkennt. Die clientseitige Verarbeitung im Browser erfolgt über die GPU.
Sie können sie für alle clientseitigen GPU-basierten Arbeitslasten verwenden, von Modellen für maschinelles Lernen bis hin zu Grafik- und Spieletests.
![Screenshot eines neuen Colab](https://developer.chrome.com/static/docs/web-platform/webgpu/colab-headless/image/fashion-mnist-classifier.png?authuser=6&hl=de)
Ressourcen
Markieren Sie das GitHub-Repository, um zukünftige Updates zu erhalten.