Luca Sacchi Ricciardi
3.5 KiB
Per eseguire modelli LLM (Large Language Models) direttamente nel browser tramite WebAssembly (Wasm), l'ecosistema si è evoluto rapidamente. Oggi la combinazione standard è l'uso di WebAssembly per la logica di calcolo CPU e WebGPU per l'accelerazione hardware.
Ecco i migliori articoli e framework aggiornati al 2026 per implementare questa tecnologia:
1. WebLLM (MLC AI) - Il punto di riferimento
WebLLM è probabilmente il progetto più avanzato per far girare modelli come Llama 3, Mistral e Gemma interamente lato client.
- Articolo/Documentazione: WebLLM: A High-Performance In-Browser LLM Inference Engine (pubblicato ad aprile 2026).
- Dettagli Tecnici: Utilizza WebAssembly per gestire le operazioni di sistema e la cache KV, mentre delega il calcolo pesante a WebGPU tramite kernel ottimizzati con Apache TVM.
- Perché leggerlo: Spiega come mantenere fino all'80% delle prestazioni native direttamente nel browser.
2. Google MediaPipe (LLM Inference API)
Google ha integrato il supporto per gli LLM all'interno della suite MediaPipe, rendendo l'implementazione estremamente semplice per chi usa JavaScript.
- Guida: LLM Inference guide for Web | Google AI Edge (aggiornata ad aprile 2026).
- Caratteristiche: Supporta modelli come Gemma 2 e Gemma 3 (incluse le versioni multimodali per audio e immagini). È ideale se cerchi una soluzione "Quickstart" con dipendenze gestite via NPM (
@mediapipe/tasks-genai).
3. Transformers.js (Hugging Face)
La libreria di riferimento per chi vuole un'esperienza "Python-like" in JavaScript.
- Articolo: Run AI Models Directly in the Browser with Transformers.js (OpenReplay, aprile 2026).
- Dettagli: Spiega come caricare modelli pre-trainati convertiti in formato ONNX. L'inferenza avviene tramite ONNX Runtime, che sfrutta WebAssembly per la compatibilità universale e WebGPU per la velocità.
- Best Practice: L'articolo suggerisce l'uso dei Web Workers per evitare di bloccare il thread principale della UI durante la generazione del testo.
Tabella Comparativa delle Tecnologie
| Framework | Motore di Esecuzione | Formato Modello | Punti di Forza |
|---|---|---|---|
| WebLLM | Wasm + WebGPU | MLC/TVM | Massime performance, supporto Llama 3.x |
| Transformers.js | Wasm + WebGPU | ONNX | Facilità d'uso, enorme catalogo Hugging Face |
| MediaPipe | Wasm + WebGPU | TensorFlow Lite / Gemma | Integrazione ecosistema Google, multimodale |
Note Tecniche per l'Implementazione
Se stai pianificando di scrivere codice, tieni a mente questi tre pilastri:
- Quantizzazione: Non caricare mai modelli "full precision". Cerca versioni 4-bit (q4f16) o INT8 per ridurre il peso del download e l'uso della VRAM.
- Streaming: Utilizza le API di streaming per mostrare il testo all'utente parola per parola, poiché l'inizializzazione del modulo Wasm e il caricamento del modello possono richiedere diversi secondi.
- Cross-Origin Isolation: Per usare alcune funzionalità avanzate di WebAssembly (come
SharedArrayBuffer), il tuo server deve inviare gli header HTTP corretti:Cross-Origin-Embedder-Policy: require-corpCross-Origin-Opener-Policy: same-origin
Hai già in mente un modello specifico (es. Llama, Phi o Gemma) che vorresti testare nel tuo ambiente?