La configurazione di un ambiente di test coerente con le GPU può essere più difficile del previsto. Ecco i passaggi per testare i modelli di IA lato client e basati su browser in ambienti browser reali, che siano inoltre scalabili, automatizzabili e all'interno di una configurazione hardware standardizzata nota.
In questo caso, il browser è un vero browser Chrome con supporto hardware, al contrario dell'emulazione software.
Che tu sia uno sviluppatore di IA web, di giochi web o di grafica oppure se ti interessa il test dei modelli di IA web, questa guida è per te.
Passaggio 1: crea un nuovo blocco note Google Colab
1. Vai a colab.new per creare un nuovo blocco note di Colab. Dovrebbe avere un aspetto simile alla figura 1. 2. Segui le istruzioni per accedere al tuo Account Google.Passaggio 2: connettiti a un server con GPU T4 abilitata
- Fai clic su Connetti nella parte in alto a destra del blocco note.
- Seleziona Cambia tipo di runtime:
- Nella finestra modale, seleziona GPU T4 come acceleratore hardware. Quando ti connetti, Colab userà un'istanza Linux con una GPU NVIDIA T4 collegata.
- Fai clic su Salva.
- Fai clic sul pulsante Connetti per connetterti al runtime. Dopo un po' di tempo, il pulsante mostrerà un segno di spunta verde, insieme ai grafici di utilizzo della RAM e del disco. Questo indica che un server è stato creato correttamente con l'hardware richiesto.
Ottimo lavoro, hai appena creato un server con una GPU collegata.
Passaggio 3: installa i driver e le dipendenze corretti
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 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
Fai clic su
accanto alla cella per eseguire il codice.Al termine dell'esecuzione del codice, verifica che
nvidia-smi
abbia stampato qualcosa simile allo screenshot seguente per confermare che hai effettivamente una GPU collegata e che sia riconosciuta sul tuo server. Per visualizzare questo output, potresti dover scorrere fino alle voci precedenti nei log.
Passaggio 4: utilizza e automatizza Chrome headless
- Fai clic sul pulsante Codice per aggiungere una nuova cella di codice.
- Puoi quindi scrivere il codice personalizzato per chiamare un progetto Node.js con i tuoi
parametri preferiti (o semplicemente chiamare
google-chrome-stable
direttamente nella riga di comando). Di seguito sono riportati esempi per entrambi.
Parte A: utilizzare Headless Chrome 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
. Per visualizzare il file, espandi i contenuti .
Quindi fai clic su per scaricare il file PDF sulla tua macchina locale.
Parte B: comandare Chrome con Puppeteer
Abbiamo fornito un esempio minimalista che utilizza Puppeteer per controllare Chrome headless che può essere eseguito 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 uno screenshot. Ma come funziona? Dai un'occhiata a questa panoramica del codice Node.js in jPuppet.js.
Analisi del codice Node di jPuppet.js
Per prima cosa, importa Puppeteer. In questo modo puoi controllare da remoto Chrome con Node.js:
import puppeteer from 'puppeteer';
Successivamente, controlla quali argomenti della riga di comando sono stati passati all'applicazione Node. Assicurati che il terzo argomento sia impostato, in quanto rappresenta un URL a cui passare. Devi esaminare il terzo argomento qui perché i primi due chiamano Node stesso e lo script che stiamo eseguendo. Il terzo elemento contiene effettivamente 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 oggetto browser configurato con gli argomenti della riga di comando per eseguire il codice 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 pagina del browser che potrai utilizzare in un secondo momento per visitare qualsiasi URL:
const page = await browser.newPage();
Poi, aggiungi un listener di eventi per ascoltare gli eventi console.log
quando la pagina web esegue JavaScript. Ciò consente di registrare i messaggi nella riga di comando di Node e di ispezionare il testo della console per individuare una frase speciale (in questo caso, captureAndEnd
) che attiva uno screenshot e termina il processo del browser in Node. Questa opzione è utile per le pagine web che richiedono un po' di lavoro prima di poter acquisire uno screenshot e hanno un 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 acquisisci uno screenshot iniziale dopo il caricamento della pagina.
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
Avrai notato che abbiamo utilizzato un'istruzione di importazione all'inizio del file jPuppet.js
. package.json
deve impostare i valori di tipo come module
, altrimenti verrà visualizzato 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. L'utilizzo di Puppeteer semplifica l'interfaccia con Chrome tramite programmazione.
Operazione riuscita
Ora possiamo verificare che il classificatore MNIST TensorFlow.js Fashion in grado di riconoscere correttamente un paio di pantaloni in un'immagine, con elaborazione lato client nel browser utilizzando la GPU.
Puoi utilizzare questa funzionalità 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.