Potenzia i test dei modelli di IA web: WebGPU, WebGL e Chrome headless

François Beaufort
François Beaufort

Ottime notizie! Hai creato un'interessante applicazione di IA web che esegue modelli di machine learning direttamente sul dispositivo di un utente. Viene eseguito interamente sul browser web lato client, senza fare affidamento sul cloud. Questo dispositivo il design migliora la privacy dell'utente, incrementa le prestazioni e riduce i costi in modo significativo.

Tuttavia, c'è un ostacolo. Il tuo Il modello TensorFlow.js può operare sia CPU (WebAssembly) sia GPU più potenti (tramite WebGL e WebGPU). La domanda è: Come puoi automatizzare in modo coerente i test del browser con l'hardware selezionato?

Mantenere la coerenza è fondamentale per confrontare il modello di machine learning le prestazioni nel tempo man mano che le ripeti e migliori, prima del deployment a utenti reali da usare sul loro dispositivo.

Configurare un ambiente di test coerente con GPU può essere più difficile previsto. In questo post del blog, condivideremo i problemi che abbiamo affrontato e come abbiamo risolto per poter migliorare le prestazioni della tua applicazione.

Non è solo per gli sviluppatori di IA web. Se ti occupi di giochi sul web o questo post è prezioso anche per te.

Vantaggi dei nostri strumenti per l'automazione

Ecco cosa stiamo usando:

  • Ambiente: un Google Colab basato su Linux notebook connesso a un'unità NVIDIA GPU T4 o V100. Puoi utilizzare altre piattaforme cloud, come Google Cloud (Google Cloud), se preferisci.
  • Browser: Chrome supporta WebGPU, un potente successore di WebGL, porta i progressi delle moderne API GPU sul web.
  • Automazione: Puppeteer è una libreria Node.js che consente puoi controllare i browser in modo programmatico con JavaScript. Con Puppeteer, possiamo automatizzare Chrome in modalità headless, ovvero il browser viene eseguito senza visibile su un server. Utilizziamo la nuova modalità headless migliorata, non il modulo legacy.
di Gemini Advanced.

Verifica l'ambiente

Il modo migliore per verificare se l'accelerazione hardware è attiva in Chrome è digita chrome://gpu nella barra degli indirizzi. Puoi eseguire l'operazione equivalente con Puppeteer in modo programmatico con console.log o salva il report completo come PDF per controllare manualmente:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

Apri chrome://gpu. Dovresti vedere i seguenti risultati:

Stato della funzionalità delle immagini
OpenGL: Disabilitata
Vulkan: Disabilitata
WebGL: Solo software, accelerazione hardware non disponibile.
WebGL2: Solo software, accelerazione hardware non disponibile.
GPU Web: Disabilitata

Problemi rilevati.
WebGPU è stato disattivato tramite la lista bloccata o la riga di comando.

Non è un buon inizio. È abbastanza chiaro che il rilevamento dell'hardware non funzionava. WebGL, WebGL2 e WebGPU sono essenzialmente disabilitati o solo software. Non siamo soli a riscontrare questo problema: online sono presenti numerose discussioni di persone in una situazione simile, anche sui canali di assistenza ufficiali di Chrome (1), (2).

Attiva il supporto di WebGPU e WebGL

Per impostazione predefinita, Chrome headless disattiva GPU. Per attivarlo su Linux, applica tutti i flag riportati di seguito quando avvii Chrome headless:

  • Il flag --no-sandbox disattiva la sandbox per la sicurezza di Chrome, isolando la processo del browser dal resto del sistema. L'esecuzione di Chrome come utente root senza questa sandbox non è supportata.
  • Il flag --headless=new esegue Chrome con la nuova versione migliorata modalità headless, senza UI visibile.
  • Il flag --use-angle=vulkan indica a Chrome di utilizzare Backend Vulkan per ANGLE, converte le chiamate OpenGL ES 2/3 in chiamate API Vulkan.
  • Il flag --enable-features=Vulkan abilita il backend Vulkan Graphic per compositing e rasterizzazione in Chrome.
  • Il flag --disable-vulkan-surface disabilita il vulkan VK_KHR_surface di Cloud Shell. Anziché utilizzare una swapchain, viene utilizzato il blit di bit per visualizzare il risultato del rendering sullo schermo.
  • Il flag --enable-unsafe-webgpu attiva l'API WebGPU sperimentale in Chrome su Linux e disattiva la lista bloccata degli adattatori.

Ora combiniamo tutte le modifiche apportate finora. Ecco lo script completo.

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

Esegui di nuovo lo script. Non vengono rilevati problemi con WebGPU e il valore cambia da disattivato solo per il software.

Stato della funzionalità delle immagini
OpenGL: Disabilitata
Vulkan: Disabilitata
WebGL: Solo software, accelerazione hardware non disponibile.
WebGL2: Solo software, accelerazione hardware non disponibile.
GPU Web: Solo software, accelerazione hardware non disponibile.

Tuttavia, l'accelerazione hardware non è ancora disponibile e la GPU NVIDIA T4 non viene rilevata.

Installa i driver GPU corretti

Abbiamo esaminato in modo più approfondito l'output di chrome://gpu, con alcuni esperti di GPU del team di Chrome. Sono stati rilevati problemi con i driver predefiniti installati sul Colab Linux causando problemi con Vulkan e, di conseguenza, Chrome non riesce a rilevare il GPU NVIDIA T4 a livello GL_RENDERER, come mostrato nell'output seguente. Questo causa problemi a Chrome headless.

L'output predefinito non rileva la GPU NVIDIA T4.
Informazioni sul conducente
GL_RENDERER ANGLE (Google, Vulkan 1.3.0 (dispositivo SwiftShader (Subzero) (0x0000C0DE)), driver SwiftShader 5.0.0)

Di conseguenza, l'installazione dei driver corretti e compatibili consente di risolvere il problema.

Output aggiornato dopo l'installazione dei driver.
Informazioni sul conducente
GL_RENDERER ANGLE (NVIDIA Corporation, Tesla T4/PCIe/SSE2, OpenGL ES 3.2 NVIDIA 525.105.17)

Per installare i driver corretti, esegui i comandi seguenti durante la configurazione. La le ultime due righe consentono di registrare gli output dei driver NVIDIA con vulkaninfo.

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

Ora esegui di nuovo lo script e ottieni il seguente risultato. 🎉

Stato della funzionalità delle immagini
OpenGL: Attivato
Vulkan: Attivato
WebGL: Accelerazione hardware, ma prestazioni ridotte.
WebGL2: Accelerazione hardware, ma prestazioni ridotte.
GPU Web: Accelerazione hardware, ma prestazioni ridotte.

Utilizzando i driver e i flag corretti durante l'esecuzione di Chrome, ora abbiamo WebGPU e WebGL con la nuova modalità headless.

Dietro le quinte: l'indagine del nostro team

Dopo molte ricerche, non abbiamo trovato metodi di lavoro per l'ambiente in Google Colab, anche se c'erano post pieni di speranza che funzionava in altri ambienti, il che era promettente. In definitiva, non eravamo di replicare il successo nell'ambiente NVIDIA T4 di Colab, dato che 2 problemi principali:

  1. Alcune combinazioni di flag consentono il rilevamento della GPU, ma non ti consentono di usano effettivamente la GPU.
  2. Esempi di soluzioni funzionanti di terze parti utilizzavano la vecchia versione di Chrome headless, che a un certo punto verrà ritirata a favore della nuova versione. Avevamo bisogno di una soluzione che funzionava con il nuovo Chrome Headless per una migliore preparazione futura.

Abbiamo confermato che l'utilizzo della GPU è insufficiente eseguendo un pagina web TensorFlow.js di esempio per il riconoscimento delle immagini, in cui abbiamo addestrato un modello a riconoscere campioni di abbigliamento (un po' come "ciao mondo" del machine learning).

Su una macchina normale, 50 cicli di addestramento (noti come epoche) dovrebbero essere eseguiti in meno tempo di oltre 1 secondo ciascuna. Chiamando Chrome Headless nello stato predefinito, potremmo l'output della console JavaScript alla riga di comando lato server Node.js per vedere che questi cicli di addestramento stavano effettivamente impiegando.

Come previsto, ogni epoca di addestramento ha richiesto molto più tempo del previsto (vari secondi), il che indica che Chrome è tornato alla normale esecuzione della CPU JS anziché utilizzare la GPU:

Le epoche di addestramento si muovono a una cadenza più lenta.
Figura 1: acquisizione in tempo reale che mostra il tempo necessario per l'esecuzione di ogni epoca di addestramento (secondi).

Dopo aver sistemato i driver e aver utilizzato la giusta combinazione di segnalazioni per Headless Se riesegui l'esempio di addestramento TensorFlow.js in Chrome, i risultati saranno molto più rapidi epoche di addestramento.

C'è un aumento della velocità per le epoche...
Figura 2: acquisizione in tempo reale che mostra la velocità delle epoche.

Riepilogo

L'IA web è cresciuta in modo esponenziale fin dalla sua creazione nel 2017. Con tecnologie browser come WebGPU, WebGL e WebAssembly, un modello di machine learning le operazioni matematiche possono essere ulteriormente accelerate sul lato client.

Nel 2023 TensorFlow.js e MediaPipe Web hanno superato un miliardo di download di di modelli e librerie: una pietra miliare storica e un segno di come il web sviluppatori e ingegneri stanno adottando l'IA nella loro prossima generazione app web per creare soluzioni davvero incredibili.

Da un grande successo nell'utilizzo derivano grandi responsabilità. A questo livello di utilizzo Nei sistemi di produzione, nasce la necessità di testare l'IA lato client e basata su browser modelli in un vero ambiente browser, pur essendo scalabili, automatizzabili e all'interno di una configurazione hardware standardizzata nota.

Sfruttando la potenza combinata dei nuovi strumenti Headless Chrome e Puppeteer, può testare con sicurezza questi carichi di lavoro in un ambiente standardizzato dell'ambiente di rete, garantendo risultati coerenti e affidabili.

Conclusione

Una guida passo passo è disponibile in la nostra documentazione, per consentirti di provare personalmente la configurazione completa.

Se ti è stato utile, Ringrazia il tuo LinkedIn, X (in precedenza Twitter) o altro social network che usi usando l'hashtag #WebAI. Sarebbe fantastico se potessimo feedback che ricevi per consentirci di scrivere più contenuti simili a questo in futuro.

Aggiungere una stella al repository GitHub per ricevere eventuali aggiornamenti futuri.

Ringraziamenti

Grazie mille a tutti i membri del team di Chrome che hanno contribuito a eseguire il debug del conducente Problemi WebGPU che abbiamo dovuto affrontare in questa soluzione, con un ringraziamento speciale a Jecelyn Yeen e Alexandra White per aver aiutato a scrivere la parola questo post del blog. Grazie a Yuly Novikov, Andrey Kosyakov e Alex Rudenko, che è stato determinante nella creazione della soluzione finale funzionante.