Test dei modelli di AI web in Google Colab

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

1. Vai a colab.new per creare un nuovo blocco note di Colab. e dovrebbe essere simile alla figura 1. 2. Segui le istruzioni per accedere al tuo Account Google.
Uno screenshot di un nuovo Colab
Figura 1: un nuovo blocco note di Colab.

Passaggio 2: connettiti a un server T4 abilitato per GPU

  1. Fai clic su Connetti nella parte in alto a destra del blocco note.
  2. Seleziona Modifica tipo di runtime:
    . Uno screenshot in primo piano che mostra i passaggi per modificare il runtime.
    Figura 2. Modifica il runtime nell'interfaccia di Colab.
    .
  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.
    Uno screenshot del modulo Cambia tipo di runtime.
    Figura 3: in Acceleratore hardware, seleziona GPU T4.
  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

    # 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 accanto alla cella per il codice.

    Uno screenshot di un nuovo Colab
    Figura 4.

  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.

    Figura 5: cerca l'output che inizia con "NVIDIA-SMI".

Passaggio 4: usa e automatizza Chrome headless

  1. Fai clic sul pulsante 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 . Quindi fai clic su per scaricare il PDF sul tuo computer locale.

Uno screenshot di un nuovo Colab
Figura 6: guarda i passaggi per scaricare il PDF in questa schermata dell'interfaccia di Colab.

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.

Uno screenshot di un nuovo Colab
Figura 7: un'acquisizione riuscita di un modello TensorFlow.js con accelerazione GPU in grado di riconoscere in tempo reale il lato client di abbigliamento nel browser

Risorse

Aggiungere una stella al repository GitHub per ricevere aggiornamenti futuri.