Luca Sacchi Ricciardi
41 lines
3.5 KiB
Markdown
41 lines
3.5 KiB
Markdown
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](https://arxiv.org/html/2412.15803v2) (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](https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference/web_js) (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](https://blog.openreplay.com/run-ai-models-browser-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:
|
|
1. **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.
|
|
2. **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.
|
|
3. **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-corp`
|
|
* `Cross-Origin-Opener-Policy: same-origin`
|
|
|
|
Hai già in mente un modello specifico (es. Llama, Phi o Gemma) che vorresti testare nel tuo ambiente?
|