Exécuter des LLM dans le navigateur : WebLLM, Transformers.js et ONNX Runtime Web en 2026

Les LLM N'Ont Plus Besoin de Serveurs

GPT-4 nécessite des API cloud ? C'est la pensée de 2024. En 2026, les modèles de 7B paramètres fonctionnent fluidement dans le navigateur, et vos données ne quittent jamais votre appareil.

Confidentialité + Coût Zéro + Hors Ligne = Les trois avantages décisifs de l'IA côté navigateur

Chronologie de l'Évolution de l'IA dans le Navigateur

2023 Q4    WebLLM lancé, Llama 2 à 2 tok/s dans le navigateur
2024 Q2    Transformers.js publié, écosystème Hugging Face connecté
2024 Q4    Support complet WebGPU, accélération d'inférence 5x
2025 Q2    ONNX Runtime Web supporte WebGPU, niveau entreprise
2025 Q4    Percée en quantification, modèles 7B compressés à 3 Go
2026 Q2    Gemma 3 4B atteint 25 tok/s dans le navigateur — point d'inflexion de qualité

Trois Frameworks en un Coup d'Œil

Framework	Focus	Technologie Principale	Idéal Pour
WebLLM	Inférence LLM haute performance	WebGPU + MLCEngine	Chat, complétion de code
Transformers.js	Inférence ML full-stack	ONNX + WASM/WebGPU	NLP, vision, audio
ONNX Runtime Web	Moteur d'inférence entreprise	ONNX + WebGPU/WASM	Déploiement en production

---

WebLLM — Le Roi de la Performance des LLM dans le Navigateur

Architecture

┌──────────────────────────────────────────────────┐
│                  Couche Application               │
│   Chat UI │ Complétion Code │ Résumé │ ...        │
├──────────────────────────────────────────────────┤
│              Moteur WebLLM                        │
│   ChatModule │ Pipeline │ Tokenizer │ Scheduler   │
├──────────────────────────────────────────────────┤
│              MLCEngine (Optimisation de Compilation) │
│   Model Compile │ Kernel Opt │ Quantization       │
├──────────────────────────────────────────────────┤
│              Runtime WebGPU                       │
│   Compute Shader │ GPU Buffer │ Pipeline State    │
└──────────────────────────────────────────────────┘

Démarrage Rapide

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const engine = await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC", {
  initProgressCallback: (progress) => {
    console.log(`Loading: ${(progress.progress * 100).toFixed(1)}%`);
  },
});

const reply = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful AI assistant." },
    { role: "user", content: "Write a quicksort in TypeScript" },
  ],
  temperature: 0.7,
  max_tokens: 1024,
  stream: true,
});

for await (const chunk of reply) {
  process.stdout.write(chunk.choices[0]?.delta?.content || "");
}

Modèles Supportés et Performance (Juin 2026)

Modèle	Paramètres	Taille Quantifiée	Vitesse (tok/s)	Premier Chargement
Gemma 3 4B IT	4B	2,3 Go	25	8s
Phi-4 Mini	3.8B	2,1 Go	28	7s
Qwen2.5 3B	3B	1,8 Go	32	6s
SmolLM2 1.7B	1.7B	1,0 Go	45	4s
Qwen2.5 0.5B	0.5B	0,4 Go	85	2s

Environnement de test : M3 MacBook Pro / Chrome 126 / WebGPU

---

Transformers.js — L'Écosystème Hugging Face dans le Navigateur

Avantage Principal : L'Écosystème de Modèles le Plus Riche

import { pipeline } from "@xenova/transformers";

const classifier = await pipeline("text-classification", "Xenova/distilbert-base-uncased-finetuned-sst-2-english");
const result = await classifier("This browser AI is amazing!");
// [{ label: "POSITIVE", score: 0.9998 }]

Pipelines Supportés

Pipeline	Cas d'Usage	Modèle Exemple
text-classification	Analyse de sentiment	distilbert-sst2
question-answering	Système question-réponse	distilbert-qa
summarization	Résumé	distilbart-cnn
translation	Traduction	opus-mt-en-zh
image-classification	Classification d'images	vit-base-patch16
automatic-speech-recognition	Reconnaissance vocale	whisper-tiny

---

ONNX Runtime Web — Moteur d'Inférence Entreprise

Utilisation de Base

import ort from "onnxruntime-web";

async function runInference(modelPath: string, input: Float32Array) {
  const session = await ort.InferenceSession.create(modelPath, {
    executionProviders: ["webgpu", "wasm"],
    graphOptimizationLevel: "all",
  });

  const inputTensor = new ort.Tensor("float32", input, [1, input.length]);
  const results = await session.run({ input: inputTensor });
  return results.output.data;
}

Stratégie de Sélection du Fournisseur

function getBestProvider(): string {
  if (navigator.gpu) return "webgpu";
  if (document.createElement("canvas").getContext("webgl2")) return "webgl";
  return "wasm";
}

---

Benchmarks de Performance : Comparaison Complète

Inférence LLM (Gemma 3 4B, quantification 4 bits)

Métrique	WebLLM	Transformers.js	ONNX Runtime Web
Vitesse (tok/s)	25	18	22
Premier Chargement	8s	12s	10s
Mémoire	3,2 Go	3,8 Go	3,5 Go
Streaming	✅	✅	❌
Compatibilité OpenAI API	✅	❌	❌

---

Stratégies de Déploiement en Production

Dégradation Élégante

async function createEngineWithFallback() {
  if (navigator.gpu) {
    try { return await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC"); }
    catch (e) { console.warn("WebGPU failed, falling back to smaller model"); }
  }
  try { return await CreateMLCEngine("SmolLM2-1.7B-q4f16_1-MLC"); }
  catch (e) { console.warn("Small model failed, falling back to API"); }
  return new APIFallbackEngine({ endpoint: "/api/chat" });
}

Support Hors Ligne avec Service Worker

const MODEL_CACHE = "ai-models-v1";
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(MODEL_CACHE).then((cache) =>
      cache.addAll(["/models/smolm2-1.7b-q4.onnx", "/models/tokenizer.json"])
    )
  );
});

---

Matrice de Décision

Votre besoin ?
├─ Chat / IA Conversationnelle → ✅ WebLLM
├─ IA Multimodale → ✅ Transformers.js
├─ Production Entreprise → ✅ ONNX Runtime Web
├─ App Offline-First → ✅ WebLLM + Service Worker
└─ Prototype Rapide → ✅ Transformers.js

---

Tendances H2 2026

Tendance	Description
WebGPU Universel	Support Safari 18+, plus de problèmes de compatibilité
MoE dans le Navigateur	Modèles creux Mixtral exécutés dans le navigateur
Fine-tuning sur Appareil	Poids LoRA téléchargés, modèles personnalisés sans serveur
API Web AI du W3C	Capacités IA natives du navigateur standardisées

---

Résumé

1. L'IA dans le navigateur est passée du « jouet » à l'« outil » — modèle 4B à 25 tok/s est utilisable
2. Trois frameworks, trois forces — WebLLM rapide, Transformers.js complet, ONNX stable
3. La confidentialité est la fonctionnalité clé — Les données ne quittent jamais le navigateur, coût serveur zéro
4. La stratégie de dégradation est essentielle — WebGPU → petit modèle → API cloud, disponibilité garantie

Si votre produit IA envoie encore chaque requête vers le cloud en 2026, vous ne gaspillez pas seulement les coûts serveur — vous passez à côté de la protection de la confidentialité, le plus grand différenciateur.