Web AI-Modelltests in Google Colab

Jason Mayes

François Beaufort

Das Einrichten einer konsistenten Testumgebung mit GPUs kann schwieriger sein als zu erwarten war. So testen Sie clientseitige, browserbasierte KI-Modelle in und gleichzeitig skalierbar, automatisierbar und standardisierten Hardware-Setups.

In diesem Fall ist der Browser ein echter Chrome-Browser mit Hardware-Unterstützung, im Gegensatz zur Software-Emulation.

Egal, ob Sie ein Web-KI-, Webgaming- oder Grafikentwickler sind oder die am Testen von Web-KI-Modellen interessiert sind, ist dieser Leitfaden genau das Richtige für Sie.

Schritt 1: Neues Google Colab-Notebook erstellen

</ph>

Schritt 2: Verbindung zu einem T4-GPU-fähigen Server herstellen

1. Klicken Sie rechts oben im Notebook auf Verbinden arrow_drop_down.
2. Wählen Sie Laufzeittyp ändern aus: <ph type="x-smartling-placeholder">

   </ph>

3. 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. <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

   </ph>

4. Klicken Sie auf Speichern.
5. Klicken Sie auf die Schaltfläche Verbinden, um eine Verbindung zur Laufzeit herzustellen. Nach einiger Zeit zeigt sich der wird ein grünes Häkchen angezeigt, zusammen mit den Diagrammen zur RAM- und Festplattennutzung. Das bedeutet, dass ein Server mit den erforderlichen Hardware.

Gut gemacht, Sie haben gerade einen Server mit einer angehängten GPU erstellt.

Schritt 3: Korrekte Treiber und Abhängigkeiten installieren

1. Kopieren Sie die folgenden beiden Codezeilen und fügen Sie sie in die erste Codezelle von im Notizbuch. In einer Colab-Umgebung wird der Ausführung über die Befehlszeile ein Ausrufezeichen.

   !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
   

   • Sie können das Skript auf GitHub überprüfen. um den unbearbeiteten Befehlszeilencode zu sehen, den dieses Skript ausführt.

   # 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
   

2. Klicken Sie neben der Zelle auf play_circle, um um den Code auszuführen.

   <ph type="x-smartling-placeholder">

   </ph> :

3. Sobald der Code ausgeführt wurde, prüfen Sie, ob nvidia-smi etwas ausgegeben hat ähnlich wie im folgenden Screenshot, um zu bestätigen, dass Sie tatsächlich eine GPU haben. und es wird auf Ihrem Server erkannt. Möglicherweise müssen Sie zu „Vorherige“ scrollen in den Logs, um diese Ausgabe anzusehen.

   <ph type="x-smartling-placeholder">

   </ph>

Schritt 4: Die monitorlose Chrome-Version verwenden und automatisieren

1. Klicken Sie auf die Schaltfläche add Code (Code), um einen neuen Codezelle.
2. Sie können dann benutzerdefinierten Code schreiben, um ein Node.js-Projekt mit Ihrem bevorzugte Parameter (oder rufen Sie einfach google-chrome-stable direkt im Befehlszeile). 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-Aufnahme in /content/gpu.pdf gespeichert. Bis Wenn Sie sich diese Datei ansehen, maximieren Sie den Inhalt folder. Klicken Sie dann auf more_vert, um die PDF-Datei herunterzuladen. auf Ihren lokalen Computer übertragen.

</ph>

Teil B: Chrome mit Puppeteer befehlen

Wir haben ein minimalistisches Beispiel zur Verwendung von Puppeteer für die Steuerung von Headless Chrome bereitgestellt. 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 ein Screenshot Aber wie funktioniert das? Sehen Sie sich diese Schritt-für-Schritt-Anleitung zu Node.js an. Code in jPuppet.js

jPuppet.js-Knotencode – Aufschlüsselung

Importieren Sie zuerst Puppeteer. Dadurch können können Sie Chrome per Fernzugriff mit Node.js steuern:

import puppeteer from 'puppeteer';

Prüfen Sie als Nächstes, welche Befehlszeilenargumente an die Node-Anwendung übergeben wurden. Achten Sie darauf, dass das dritte Argument festgelegt ist – es handelt sich dabei um eine URL, zu der aufgerufen werden soll. Ich das dritte Argument überprüfen, da die ersten beiden Argumente Node aufrufen. und das Skript, das wir ausführen. Das 3. Element enthält tatsächlich das erste -Parameter, der an das Node-Programm übergeben wird:

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 Browser erstellt, Objekt, das mit den Befehlszeilenargumenten zur Ausführung von Chrome konfiguriert ist. binär so, dass WebGL und WebGPU wie im Artikel Unterstützung von WebGPU und WebGL aktivieren

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 auf console.log-Ereignisse wartet, wenn die Webseite den JavaScript-Code ausführt. Dadurch können Sie Nachrichten in der Node-Befehlszeile protokollieren Überprüfen Sie auch den Konsolentext auf eine bestimmte Wortgruppe (in diesem Fall captureAndEnd), durch die ein Screenshot ausgelöst und der Browserprozess dann beendet wird. Knoten. Dies ist nützlich für Webseiten, die vor ein Screenshot erstellt werden kann und der Ausführung.

page.on('console', async function(msg) {
  console.log(msg.text());
  if (msg.text() === 'captureAndEnd') {
    await page.screenshot({ path: '/content/screenshotEnd.png' });
    await browser.close();
  }
});

Befehl der Seite schließlich, die angegebene URL aufzurufen und ein wenn die Seite geladen ist.

Wenn du einen Screenshot von chrome://gpu machen möchtest, kannst du den Browser schließen anstatt auf eine Konsolenausgabe zu warten, da diese Seite nicht von Ihrem eigenen Code gesteuert werden.

  await page.goto(url,  { waitUntil: 'networkidle2' });
  await page.screenshot({path: '/content/screenshot.png'});
  if (url === 'chrome://gpu') {
    await browser.close();
  }
}
runWebpage();

package.json ändern

Vielleicht haben Sie bemerkt, dass wir am Anfang der jPuppet.js-Datei. Ihr package.json muss die Typwerte auf module festlegen. 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 Benutzeroberfläche mit Chrome programmatisch nutzen.

Erfolg

Jetzt können wir überprüfen, TensorFlow.js Fashion MNIST-Klassifikator eine Hose in einem Bild korrekt erkennen kann, mit clientseitiger im Browser mithilfe der GPU.

Sie können dies für alle clientseitigen GPU-basierten Arbeitslasten verwenden, bis hin zu Grafik- und Spieletests.

</ph>

Ressourcen

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