Test dei modelli di AI web in Google Colab

Jason Mayes

François Beaufort

Configurare un ambiente di test coerente con GPU può essere più difficile previsto. Di seguito sono riportati i passaggi per testare i modelli di IA lato client basati su browser veri ambienti browser, garantendo al contempo la scalabilità, l'automazione e configurazione hardware standardizzata nota.

In questo caso, il browser è un browser Chrome reale con supporto hardware, al contrario dell'emulazione software.

Che tu sia uno sviluppatore di web AI, di giochi web o di grafica oppure ti trovi ti interessano i test dei modelli di IA web, questa guida fa per te.

Passaggio 1: crea un nuovo blocco note Google Colab

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 Modifica tipo di runtime:

   .

   .
3. Nella finestra modale, seleziona GPU T4 come acceleratore hardware. Quando ti connetti, Colab userà un'istanza Linux con una GPU NVIDIA T4 collegata. di Gemini Advanced.

   

4. Fai clic su Salva.
5. Fai clic sul pulsante Connetti per connetterti al runtime. Dopo un po' di tempo, presenterà un segno di spunta verde, insieme ai grafici di utilizzo di RAM e disco. Questo indica che un server è stato creato correttamente con l'istanza hardware.

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 di del blocco note. In un ambiente Colab, l'esecuzione della riga di comando è anteposta 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 da questo 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 il codice.

   

3. Al termine dell'esecuzione del codice, verifica che nvidia-smi abbia stampato qualcosa simile allo screenshot seguente per confermare che disponi effettivamente di una GPU collegato e riconosciuto sul server. Potresti dover scorrere fino a precedente nei log per visualizzare questo output.

   

Passaggio 4: usa e automatizza Chrome headless

1. Fai clic sul pulsante add Codice per aggiungerne uno nuovo cella di codice.
2. Puoi quindi scrivere il codice personalizzato per chiamare un progetto Node.js con il tuo i parametri preferiti (o chiama semplicemente google-chrome-stable direttamente nel riga di comando). Abbiamo degli esempi per entrambi.

Parte A: usa Chrome headless direttamente nella 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, l'acquisizione del PDF risultante è archiviata in /content/gpu.pdf. A visualizzalo, espandi i contenuti folder. Quindi fai clic su more_vert per scaricare il PDF sul tuo computer locale.

Parte B: usa Chrome con Puppeteer

Abbiamo fornito un esempio minimalista dell'utilizzo di Puppeteer per controllare Chrome headless che possono essere eseguiti come segue:

# 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 un screenshot. Come funziona? Dai un'occhiata a questa procedura dettagliata di Node.js codice in jPuppet.js.

Analisi del codice dei nodi jPuppet.js

Per prima cosa, importa Puppeteer. Ciò consente controlli Chrome da remoto 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. Tu e necessità di controllare il terzo argomento qui perché i primi due argomenti richiamano Node e lo script che stiamo eseguendo. Il terzo elemento contiene il primo parametro passato al programma Node:

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 browser configurato con gli argomenti della riga di comando per eseguire come necessario per far funzionare WebGL e WebGPU, come descritto Attiva 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 da utilizzare in un secondo momento per visitare qualsiasi URL:

const page = await browser.newPage();

Poi, 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 sulla riga di comando di Node e controlla se nel testo della console è presente una frase speciale (in questo caso, captureAndEnd) che attiva uno screenshot e termina il processo del browser in Nodo. Questo è utile per le pagine web che devono eseguire una certa quantità di lavoro prima è possibile acquisire uno screenshot, che ha una durata non deterministica dell'esecuzione.

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, ordina alla pagina in modo che visiti l'URL specificato e screenshot iniziale quando la pagina è stata caricata.

Se scegli di acquisire uno screenshot di chrome://gpu, puoi chiudere il browser anziché attendere l'output della console, poiché questa pagina non controllati 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 il file package.json

Avrai notato che all'inizio del tag abbiamo utilizzato un'istruzione di importazione jPuppet.js. package.json deve impostare i valori di tipo come module, oppure riceverai un messaggio di errore che indica 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 Classificatore MNIST TensorFlow.js Fashion è in grado di riconoscere correttamente un paio di pantaloni in un'immagine, con il lato client nel browser usando la GPU.

Puoi utilizzare questo approccio per qualsiasi carico di lavoro basato su GPU lato client, dal machine learning ai test di grafica e giochi.

Risorse

Aggiungere una stella al repository GitHub per ricevere aggiornamenti futuri.