Test dei modelli di AI web in Google Colab

Configurare un ambiente di test coerente con GPU può essere più difficile del previsto. Di seguito sono riportati i passaggi per testare modelli di IA basati su browser e lato client in ambienti browser reali, pur essendo scalabili, automatizzabili e all'interno di una nota configurazione hardware standardizzata.

In questo caso, il browser è un browser Chrome reale con supporto hardware, anziché l'emulazione software.

Che tu sia uno sviluppatore di IA web, giochi web o grafica o ti interessa i test dei modelli di IA web, questa guida fa al caso tuo.

Passaggio 1: crea un nuovo blocco note di Google Colab

1. Vai a colab.new per creare un nuovo blocco note di Colab. Dovrebbe essere simile alla Figura 1. 2. Segui le istruzioni per accedere al tuo Account Google.

Passaggio 2: connettiti a un server T4 abilitato per GPU

1. Fai clic su Connetti arrow_drop_down nella parte in alto a destra del blocco note.
2. Seleziona Cambia tipo di runtime:

   

3. Nella finestra modale, seleziona GPU T4 come acceleratore hardware. Quando ti connetti, Colab utilizza un'istanza Linux a cui è collegata una GPU NVIDIA T4.

   

4. Fai clic su Salva.
5. Fai clic sul pulsante Connetti per connetterti al runtime. Dopo un po' di tempo, il pulsante mostrerà un segno di spunta verde insieme a grafici sull'utilizzo della RAM e del disco. Questo indica che un server è stato creato con l'hardware richiesto.

Ottimo lavoro, hai appena creato un server con una GPU collegata.

Passaggio 3: installa i driver e le dipendenze corretti

1. Copia e incolla le seguenti due righe di codice nella prima cella di codice del blocco note. In un ambiente Colab, l'esecuzione della riga di comando è preceduta da un punto esclamativo.

   !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
   

   • Puoi controllare lo script su GitHub per vedere il codice della riga di comando non elaborato eseguito dallo script.

   # 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. Fai clic su play_circle accanto alla cella per eseguire il codice.

   

3. Al termine dell'esecuzione del codice, verifica che nvidia-smi abbia stampato qualcosa simile al seguente screenshot per confermare che hai effettivamente una GPU collegata e che viene riconosciuta sul tuo server. Per visualizzare questo output, potrebbe essere necessario scorrere fino a visualizzare i log precedenti.

   

Passaggio 4: utilizza e automatizza Chrome headless

1. Fai clic sul pulsante add Codice per aggiungere una nuova cella di codice.
2. Puoi quindi scrivere il tuo codice personalizzato per chiamare un progetto Node.js con i tuoi parametri preferiti (o semplicemente chiamare google-chrome-stable direttamente dalla riga di comando). Ecco alcuni esempi per entrambi.

Parte A: utilizza Chrome headless direttamente dalla riga di comando

# 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

Nell'esempio, abbiamo archiviato l'acquisizione del PDF risultante in /content/gpu.pdf. Per visualizzare il file, espandi i contenuti folder. Poi fai clic su more_vert per scaricare il file PDF sulla tua macchina locale.

Parte B: controlla Chrome con Puppeteer

Abbiamo fornito un esempio minimalista utilizzando Puppeteer per controllare Chrome headless, che può essere eseguito nel seguente modo:

# 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

Nell'esempio di jPuppet, possiamo chiamare uno script Node.js per creare uno screenshot. Come funziona? Guarda questa procedura dettagliata del codice Node.js in jPuppet.js.

Suddivisione del codice dei nodi jPuppet.js

Per prima cosa, importa Puppeteer. In questo modo puoi controllare da remoto Chrome con Node.js:

import puppeteer from 'puppeteer';

Quindi, controlla quali argomenti della riga di comando sono stati passati all'applicazione Node. Assicurati che sia impostato il terzo argomento, che rappresenta un URL a cui accedere. Devi controllare il terzo argomento qui perché i primi due argomenti chiamano Node stesso e lo script che stiamo eseguendo. Il terzo elemento in realtà contiene il primo parametro passato al programma di nodi:

const url = process.argv[2];
if (!url) {
  throw "Please provide a URL as the first argument";
}

Ora definisci una funzione asincrona denominata runWebpage(). Viene creato un oggetto del browser configurato con gli argomenti della riga di comando per eseguire il file binario di Chrome nel modo necessario per far funzionare WebGL e WebGPU, come descritto in Attivare il supporto di WebGPU e WebGL.

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'
      ]
  });

Crea un nuovo oggetto della pagina del browser che potrai utilizzare in seguito per visitare qualsiasi URL:

const page = await browser.newPage();

Quindi, aggiungi un listener di eventi per rimanere in ascolto degli eventi console.log quando la pagina web esegue JavaScript. Ciò consente di registrare i messaggi nella riga di comando del nodo e di ispezionare il testo della console per trovare una frase speciale (in questo caso, captureAndEnd) che attiva uno screenshot e quindi termina il processo del browser in Node. Questo è utile per le pagine web che hanno bisogno di una certa quantità di lavoro prima di poter acquisire uno screenshot e il cui tempo di esecuzione non è deterministico.

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

Infine, chiedi alla pagina di visitare l'URL specificato e di acquisire uno screenshot iniziale quando la pagina è stata caricata.

Se scegli di acquisire uno screenshot di chrome://gpu, puoi chiudere immediatamente la sessione del browser anziché attendere l'output della console, poiché questa pagina non è controllata dal tuo codice.

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

Modifica package.json

Probabilmente hai notato che abbiamo utilizzato un'istruzione di importazione all'inizio del file jPuppet.js. package.json deve impostare i valori di tipo su module, altrimenti riceverai un messaggio di errore che ti informa che il modulo non è valido.

 {
    "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"
}

E con questo è tutto. Puppeteer semplifica l'interfaccia con Chrome in modo programmatico.

Operazione riuscita

Ora possiamo verificare che il classificatore TensorFlow.js Fashion MNIST sia in grado di riconoscere correttamente un paio di pantaloni in un'immagine, con l'elaborazione lato client nel browser mediante GPU.

Puoi utilizzarlo per qualsiasi carico di lavoro basato su GPU lato client, dai modelli di machine learning ai test di grafica e giochi.

Risorse

Aggiungi una stella al repository GitHub per ricevere gli aggiornamenti futuri.