Migliora le prestazioni e l'esperienza utente per l'IA lato client

Maud Nalpas
Maud Nalpas

Sebbene la maggior parte delle funzionalità di IA sul web si basi su server, l'IA lato client viene eseguita direttamente nel browser dell'utente. Ciò offre vantaggi come bassa latenza, costi lato server ridotti, nessun requisito per le chiavi API, maggiore privacy degli utenti e accesso offline. Puoi implementare l'IA lato client che funziona su più browser con librerie JavaScript come TensorFlow.js, Transformers.js e MediaPipe GenAI.

L'IA lato client presenta anche problemi di prestazioni: gli utenti devono scaricare più file e il browser deve lavorare di più. Per farla funzionare bene, prendi in considerazione:

  • Il tuo caso d'uso. L'IA lato client è la scelta giusta per la tua funzionalità? La tua funzionalità fa parte di un Critical User Journey? In caso affermativo, hai un piano di riserva?
  • Buone pratiche per il download e l'utilizzo dei modelli. Continua a leggere per ulteriori informazioni.

Prima del download del modello

Dimensioni della raccolta e del modello

Per implementare l'AI lato client, hai bisogno di un modello e in genere di una libreria. Quando scelgo la libreria, valuta le dimensioni come faresti con qualsiasi altro strumento.

Anche le dimensioni del modello sono importanti. La definizione di "grande" per un modello di IA dipende dai casi. 5 MB può essere una regola empirica utile: è anche il 75° percentile delle dimensioni medie delle pagine web. Un numero più permissivo sarebbe 10 MB.

Di seguito sono riportate alcune considerazioni importanti sulle dimensioni del modello:

  • Molti modelli di AI specifici per attività possono essere molto piccoli. Un modello come BudouX, per la suddivisione accurata dei caratteri nelle lingue asiatiche, ha un solo 9,4 KB compresso con GZIP. Il modello di rilevamento della lingua di MediaPipe è di 315 KB.
  • Anche i modelli di visione possono avere dimensioni ragionevoli. Il modello Handpose e tutte le risorse correlate occupano un totale di 13,4 MB. Sebbene sia molto più grande della maggior parte dei pacchetti frontend minimizzati, è paragonabile alla pagina web media, che è di 2,2 MB (2,6 MB su computer).
  • I modelli di IA generativa possono superare le dimensioni consigliate per le risorse web. DistilBERT, che è considerato un LLM molto piccolo o un semplice modello di NLP (le opinioni variano), ha un peso di 67 MB. Anche i modelli LLM di piccole dimensioni, come Gemma 2B, possono raggiungere 1,3 GB. Sono più di 100 volte le dimensioni della pagina web media.

Puoi valutare le dimensioni di download esatte dei modelli che prevedi di utilizzare con gli strumenti per sviluppatori dei browser.

Nel riquadro Rete di Chrome DevTools, scarica le dimensioni del modello di rilevamento della lingua MediaPipe. Demo.
Nel riquadro della rete di Chrome DevTools, dimensioni del download per i modelli di IA generativa: Gemma 2B (LLM di piccole dimensioni), DistilBERT (NLP di piccole dimensioni / LLM molto piccolo).

Ottimizza le dimensioni del modello

  • Confronta la qualità del modello e le dimensioni dei download. Un modello più piccolo potrebbe avere una precisione sufficiente per il tuo caso d'uso, pur essendo molto più piccolo. Esistono tecniche di ottimizzazione fine e di riduzione delle dimensioni del modello per ridurre notevolmente le dimensioni di un modello mantenendo un'accuratezza sufficiente.
  • Seleziona modelli specializzati, se possibile. I modelli personalizzati per una determinata attività tendono ad essere più piccoli. Ad esempio, se vuoi eseguire attività specifiche come l'analisi del sentiment o della tossicità, utilizza modelli specializzati in queste attività anziché un LLM generico.
Selettore di modelli per una demo di trascrizione basata sull'IA lato client di j0rd1smit.

Sebbene tutti questi modelli eseguano la stessa attività, con precisione variabile, le loro dimensioni variino notevolmente: da 3 MB a 1,5 GB.

Controlla se il modello può essere eseguito

Non tutti i dispositivi possono eseguire modelli di IA. Anche i dispositivi con specifiche hardware sufficienti potrebbero avere problemi se sono in esecuzione o vengono avviati altri processi costosi mentre il modello è in uso.

Fino a quando non sarà disponibile una soluzione, ecco cosa puoi fare oggi:

  • Verifica il supporto di WebGPU. Diverse librerie di IA lato client, tra cui la versione 3 di Transformers.js e MediaPipe, utilizzano WebGPU. Al momento, alcune di queste librerie non ricorrono automaticamente a Wasm se WebGPU non è supportato. Puoi mitigare questo problema racchiudendo il codice relativo all'IA in un controllo di rilevamento delle funzionalità WebGPU, se sai che la tua libreria IA lato client richiede WebGPU.
  • Escludi i dispositivi con potenza insufficiente. Utilizza Navigator.hardwareConcurrency, Navigator.deviceMemory e l'API Compute Pressure per stimare le funzionalità e la pressione del dispositivo. Queste API non sono supportate in tutti i browser e sono intenzionalmente imprecise per impedire il fingerprinting, ma possono comunque contribuire a escludere i dispositivi che sembrano avere una potenza molto ridotta.

Segnala i download di grandi dimensioni

Per i modelli di grandi dimensioni, avvisa gli utenti prima del download. Gli utenti di computer sono più propensi a supportare i download di grandi dimensioni rispetto agli utenti di dispositivi mobili. Per rilevare i dispositivi mobili, utilizza mobile dall'API User-Agent Client Hints (o la stringa User-Agent se UA-CH non è supportato).

Limitare i download di grandi dimensioni

  • Scarica solo ciò che è necessario. Soprattutto se il modello è di grandi dimensioni, scaricalo solo quando hai la certezza che le funzionalità di IA verranno utilizzate. Ad esempio, se hai una funzionalità di IA di suggerimenti di digitazione anticipata, scaricala solo quando l'utente inizia a utilizzare le funzionalità di digitazione.
  • Memorizza nella cache esplicitamente il modello sul dispositivo utilizzando l'API Cache per evitare di scaricarlo a ogni visita. Non fare affidamento solo sulla cache del browser HTTP implicita.
  • Suddividi il download del modello. fetch-in-chunks suddivide un download di grandi dimensioni in blocchi più piccoli.

Download e preparazione del modello

Non bloccare l'utente

Dai la priorità a un'esperienza utente fluida: consenti il funzionamento delle funzionalità chiave anche se il modello di IA non è ancora completamente caricato.

Assicurati che gli utenti possano comunque pubblicare.
Gli utenti possono comunque pubblicare la loro recensione, anche quando la funzionalità di IA lato client non è ancora pronta. Demo di @maudnals.

Indicare l'avanzamento

Durante il download del modello, indica l'avanzamento completato e il tempo rimanente.

  • Se i download dei modelli sono gestiti dalla libreria AI lato client, utilizza lo stato di avanzamento del download per mostrarlo all'utente. Se questa funzionalità non è disponibile, ti consigliamo di aprire un problema per richiederla (oppure di contribuire a realizzarla).
  • Se gestisci i download dei modelli nel tuo codice, puoi recuperarli in blocchi utilizzando una libreria, ad esempio fetch-in-chunks, e mostrare all'utente l'avanzamento del download.
Visualizzazione dell'avanzamento del download del modello. Implementazione personalizzata con recupero in blocchi. Demo di @tomayac.

Gestire le interruzioni della rete

I download dei modelli possono richiedere tempi diversi, a seconda delle dimensioni. Valuta come gestire le interruzioni della rete se l'utente passa alla modalità offline. Se possibile, informi l'utente di una connessione interrotta e continua il download quando la connessione viene ripristinata.

La connettività instabile è un altro motivo per scaricare i contenuti a blocchi.

Eseguire il trasferimento di attività costose a un worker web

Le attività complesse, ad esempio i passaggi di preparazione del modello dopo il download, possono bloccare il thread principale, causando un'esperienza utente discontinua. Spostare queste attività su un worker web è utile.

Trova una demo e un'implementazione completa basata su un web worker:

Traccia delle prestazioni in Chrome DevTools.
In alto: con un worker web. In basso: nessun worker web.

Durante l'inferenza

Una volta scaricato e pronto, puoi eseguire l'inferenza. L'inferenza può essere computazionalmente dispendiosa.

Spostare l'inferenza in un worker web

Se l'inferenza avviene tramite WebGL, WebGPU o WebNN, si basa sulla GPU. Ciò significa che si verifica in un processo separato che non blocca l'interfaccia utente.

Tuttavia, per le implementazioni basate su CPU (come Wasm, che può essere un'alternativa per WebGPU, se non supportato), il trasferimento dell'inferenza a un web worker mantiene la pagina reattiva, proprio come durante la preparazione del modello.

L'implementazione potrebbe essere più semplice se tutto il codice relativo all'IA (recupero del modello, preparazione del modello, inferenza) si trova nello stesso posto. Di conseguenza, puoi scegliere un worker web, indipendentemente dal fatto che la GPU sia in uso o meno.

Gestisci gli errori

Anche se hai verificato che il modello deve essere eseguito sul dispositivo, l'utente potrebbe avviare in un secondo momento un altro processo che consuma molto le risorse. Per mitigare questo problema:

  • Gestisci gli errori di inferenza. Racchiudi l'inferenza in blocchi try/catch e gestisci gli errori di runtime corrispondenti.
  • Gestisci gli errori WebGPU, sia unexpected che GPUDevice.lost, che si verificano quando la GPU viene effettivamente reimpostata perché il dispositivo ha difficoltà.

Indica lo stato dell'inferenza

Se l'inferenza richiede più tempo di quanto sembrerebbe essere immediata, segnala all'utente che il modello sta ragionando. Utilizza le animazioni per abbreviare i tempi di attesa e assicura all'utente che l'applicazione funzioni come previsto.

Animazione di esempio durante l'inferenza.
Demo di @maudnals e @argyleink

Rendi annullabile l'inferenza

Consenti all'utente di perfezionare la query in tempo reale, senza che il sistema sprechi risorse generando una risposta che l'utente non vedrà mai.