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.
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.
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.
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.
- Per ulteriori consigli, consulta le best practice per gli indicatori di avanzamento animati e Progettare per lunghe attese e interruzioni.
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:
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.
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.