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. Questo offre vantaggi come bassa latenza, costi inferiori lato server, nessun requisito di chiave API, maggiore privacy dell'utente e accesso offline. Puoi implementare l'IA lato client che funzioni su tutti i 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 farlo funzionare bene, prendi in considerazione:
- Il tuo caso d'uso. L'IA lato client è la scelta giusta per la tua funzionalità? La tua funzionalità si trova su un percorso dell'utente critico e, in tal caso, hai una funzione 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 di app e del modello
Per implementare l'IA lato client avrai bisogno di un modello e, di solito, di una libreria. Quando scelgo la libreria, valuta le dimensioni come faresti con qualsiasi altro strumento.
Anche le dimensioni del modello sono importanti. Ciò che viene considerato grande per un modello di IA dipende. 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 ha bisogno di 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 hanno maggiori probabilità
di accettare 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 dopo una ragionevole certezza che verranno usate 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 in modo esplicito 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 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, informa 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
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
Quando il modello è scaricato e pronto, puoi eseguire l'inferenza. L'inferenza può essere costosa dal calcolo.
Sposta 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'opzione di riserva per WebGPU, se non supportata), 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.
Gestire gli errori
Anche se hai verificato che il modello deve essere eseguito sul dispositivo, l'utente potrebbe avviare un altro processo che consuma molto risorse in seguito. Per mitigare questo problema:
- Gestire gli errori di inferenza. Racchiudi l'inferenza in
try/catchblocchi 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. Usa le animazioni per agevolare l'attesa e assicurare 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.