
Cosa permette WebLLM, perché eseguire un modello lato client e cosa costruiremo nel corso.
I concetti chiave dei modelli linguistici spiegati in modo semplice prima di passare al codice.
Materiale del corso: tra le risorse di questa lezione trovi lo zip con il codice di tutte le lezioni (intro, chat, navigazione e streaming).
Verifichiamo il supporto WebGPU, leggiamo adapter e device e controlliamo la memoria disponibile.
Creiamo il motore di inferenza di WebLLM e carichiamo Llama 3.2 1B direttamente nel browser.
Realizziamo l'interfaccia di chat e colleghiamo l'input dell'utente al modello.
Gestiamo la cronologia dei messaggi e usiamo il system prompt per guidare il comportamento del modello.
Salviamo e ricarichiamo la conversazione con LocalStorage.
Creiamo sessioni indipendenti identificate da un UUID passato nell'URL.
Mostriamo l'elenco delle conversazioni e permettiamo di passare da una sessione all'altra.
Proteggiamo l'applicazione: gestione sicura dei contenuti generati dal modello e dell'input dell'utente nella pagina.
Mostriamo la risposta del modello token dopo token con lo streaming, per un'esperienza più veloce e naturale.
Far girare un modello linguistico direttamente nel browser, senza server, senza API a pagamento e senza che i dati lascino il computer dell'utente: con WebLLM e WebGPU oggi è possibile, e in questo corso impari a farlo passo dopo passo con JavaScript.
Si parte dai concetti: cos'è un LLM, cosa sono token, prompt e tokenizer, che differenza c'è tra addestramento e inferenza. Poi verifichi il supporto WebGPU in Chrome, interroghi adapter e device e controlli la memoria disponibile, per capire quali modelli puoi davvero eseguire sulla macchina dell'utente.
Poi costruisci un'applicazione reale: crei il motore di inferenza, carichi Llama 3.2 1B nel browser e realizzi un'interfaccia di chat con Bootstrap. Gestisci la sequenza dei messaggi e il system prompt, salvi lo storico in LocalStorage, crei sessioni di chat indipendenti con UUID e identificativo nell'URL e costruisci la lista delle conversazioni con la navigazione tra le sessioni.
Infine metti in sicurezza il codice JavaScript e attivi lo streaming delle risposte, per una chat che mostra il testo mentre il modello lo genera.
Alla fine avrai una chat AI completa che funziona interamente lato client: privata, gratuita da usare e senza backend, una base perfetta per assistenti offline, prototipi e applicazioni che rispettano la privacy.
Il docente
Giovanni Pace è formatore e consulente IT, autore di centinaia di videolezioni su sviluppo web, intelligenza artificiale e DevOps. Da anni insegna programmazione con un approccio pratico, costruendo progetti reali passo dopo passo.