Comment exécuter Gemma 4 dans votre navigateur avec WebGPU
Et si vous pouviez exécuter un puissant modèle d'IA sans rien installer, sans payer d'API, sans envoyer vos données à un serveur ? Avec Gemma 4 et WebGPU, vous pouvez faire exactement cela — directement dans votre navigateur.
Ce guide vous accompagne à travers tout ce que vous devez savoir pour exécuter Gemma 4 localement dans un onglet de navigateur, de ce qu'est WebGPU aux performances auxquelles vous pouvez réalistement vous attendre.
Qu'est-ce que WebGPU ?
WebGPU est l'API de nouvelle génération pour les graphismes et le calcul sur le web. Pensez-y comme au successeur de WebGL, mais conçu dès le départ pour les charges de travail GPU modernes — y compris l'inférence IA.
Contrairement à WebGL, qui était principalement conçu pour le rendu de graphismes 3D, WebGPU fournit :
- Accès direct au calcul GPU — exécutez des calculs généralistes sur votre carte graphique
- Meilleures performances — surcharge plus faible, plus proche des performances natives Vulkan/Metal/D3D12
- Shader storage buffers — essentiels pour charger et traiter de grands poids de modèles d'IA
En bref, WebGPU transforme votre navigateur en un moteur d'inférence IA performant.
Exigences du navigateur
Tous les navigateurs ne supportent pas encore WebGPU. Voici le paysage actuel :
| Navigateur | Support WebGPU | Recommandé ? |
|---|---|---|
| Chrome 113+ | Support complet | Oui (meilleure performance) |
| Edge 113+ | Support complet | Oui |
| Firefox | Derrière un flag | Pas encore stable |
| Safari 18+ | Support partiel | Expérimental |
Notre recommandation : utilisez Google Chrome (version 113 ou ultérieure) pour l'expérience la plus fiable. Chrome a l'implémentation WebGPU la plus mature et la meilleure compatibilité avec transformers.js, la bibliothèque qui alimente Gemma 4 dans le navigateur.
Comment vérifier si WebGPU est activé
Ouvrez la console développeur de votre navigateur (F12 ou Cmd+Shift+J) et exécutez :
if (navigator.gpu) {
const adapter = await navigator.gpu.requestAdapter();
console.log("WebGPU supporté !", adapter);
} else {
console.log("WebGPU non supporté dans ce navigateur.");
}Si vous voyez un objet adapter, vous êtes prêt.
Essayez maintenant : la démo Hugging Face
Le moyen le plus rapide de découvrir Gemma 4 dans votre navigateur est via la démo communautaire officielle :
Démo Gemma 4 WebGPU sur Hugging Face
Cliquez juste sur le lien, attendez que le modèle se charge et commencez à discuter. Pas d'inscription requise, pas de clé API, pas de serveur backend.
Ce qui se passe quand vous ouvrez la démo
- Votre navigateur télécharge les poids du modèle (cela prend un moment à la première visite)
- Le modèle est mis en cache localement dans le stockage de votre navigateur
- Toute l'inférence tourne entièrement sur votre GPU — rien ne quitte votre appareil
- Les visites suivantes se chargent beaucoup plus rapidement depuis le cache
Comment ça fonctionne : Transformers.js en coulisses
La démo est alimentée par transformers.js, la bibliothèque JavaScript de Hugging Face qui apporte l'écosystème Transformers au navigateur.
Voici l'architecture simplifiée :
Entrée utilisateur → Tokenizer (WASM) → Inférence modèle (WebGPU) → Détokenizer → RéponseTransformers.js gère :
- Chargement du modèle — Télécharge les poids du modèle optimisés ONNX et les met en cache dans IndexedDB
- Tokenisation — Convertit le texte en tokens en utilisant un tokenizer compilé en WASM
- Inférence GPU — Exécute la forward pass sur votre GPU via les compute shaders WebGPU
- Sortie en streaming — Génère les tokens un par un pour une expérience de chat en temps réel
Si vous voulez construire votre propre application Gemma 4 alimentée par WebGPU, voici un exemple minimal :
import { pipeline } from "@huggingface/transformers";
// Charger le modèle (téléchargé à la première exécution, mis en cache ensuite)
const generator = await pipeline(
"text-generation",
"onnx-community/gemma-4-e2b-it-ONNX",
{ device: "webgpu" }
);
// Générer une réponse
const output = await generator("Explique l'informatique quantique en termes simples :", {
max_new_tokens: 256,
temperature: 0.7,
});
console.log(output[0].generated_text);Performance : à quoi s'attendre
Fixons des attentes réalistes pour l'exécution de Gemma 4 dans votre navigateur.
Premier chargement
Le téléchargement initial du modèle varie de 300 Mo à 2 Go selon le niveau de quantification. C'est un coût unique — après le premier chargement, le modèle est mis en cache dans l'IndexedDB de votre navigateur et se charge beaucoup plus rapidement lors des visites suivantes.
| Quantification | Taille du téléchargement | Qualité |
|---|---|---|
| INT4 | ~300 Mo | Bonne pour le chat |
| INT8 | ~600 Mo | Meilleure précision |
| FP16 | ~2 Go | Meilleure qualité |
Vitesse d'inférence
Une fois chargé, Gemma 4 via WebGPU offre un débit étonnamment bon :
- Traitement du prompt (prefill) : 40-80 tokens/s
- Génération de texte (decode) : 40-180 tokens/s selon votre GPU
Pour référence, c'est comparable à la vitesse de lecture — assez rapide pour un chat interactif. Un GPU discret (comme un NVIDIA RTX 3060 ou Apple M1 Pro) atteindra le haut de la fourchette, tandis que les graphismes intégrés seront plus proches du bas.
Conseils pour maximiser la performance
- Fermez les autres onglets gourmands en GPU — streaming vidéo, applications 3D et autres pages WebGPU sont en compétition pour la mémoire GPU
- Utilisez Chrome — il a le backend WebGPU le mieux optimisé
- Préférez la quantification INT4 — c'est le meilleur équilibre entre vitesse et qualité pour l'usage navigateur
- Gardez vos pilotes GPU à jour — les performances WebGPU s'améliorent avec les pilotes plus récents
Limitations à connaître
Exécuter de l'IA dans un navigateur est impressionnant, mais cela vient avec des compromis.
Taille du modèle
Seule la variante E2B (Efficient 2 Billion) de Gemma 4 est disponible pour WebGPU. Les modèles plus grands 12B et 27B nécessitent plus de VRAM que ce à quoi les navigateurs peuvent accéder. Pour ceux-ci, vous voudrez utiliser Ollama ou un autre outil d'inférence locale.
Compatibilité des appareils
- Navigateurs de bureau : 90%+ compatibles (Chrome sur Windows, macOS, Linux)
- Navigateurs mobiles : 70-75% compatibles (Chrome Android a un support correct ; Safari iOS est limité)
- Matériel plus ancien : Nécessite un GPU avec support WebGPU — la plupart des GPU de 2018 et après devraient fonctionner
Contraintes mémoire
Les navigateurs ont des limites mémoire plus strictes que les applications natives. Si votre appareil a moins de 8 Go de RAM, vous pourriez rencontrer :
- Un chargement plus lent du modèle
- Des erreurs d'out-of-memory avec des quantifications plus grandes
- Une longueur de fenêtre de contexte réduite
Pas de support multimodal (encore)
La démo WebGPU actuelle supporte uniquement les interactions texte. Les capacités de vision de Gemma 4 (compréhension d'images) ne sont pas encore disponibles dans la version navigateur, bien que cela devrait changer à mesure que transformers.js évolue.
Quand utiliser Gemma 4 dans le navigateur
Gemma 4 basé sur navigateur est parfait pour :
- Expériences rapides — tester des prompts sans aucune configuration
- Tâches sensibles à la confidentialité — toutes les données restent sur votre appareil
- Démos et présentations — montrer les capacités de l'IA avec juste une URL
- Apprentissage et éducation — les étudiants peuvent explorer l'IA sans infrastructure
- Usage hors ligne — une fois mis en cache, fonctionne sans internet (sur les navigateurs supportés)
Pour les charges de travail en production, le traitement intensif de documents ou les tâches multimodales, envisagez plutôt d'exécuter Gemma 4 localement avec Ollama ou LM Studio.
Conclusion
WebGPU a rendu possible l'exécution d'un modèle d'IA performant directement dans votre navigateur sans aucune configuration. La variante E2B de Gemma 4 offre des performances de chat en temps réel sur la plupart des appareils modernes, et l'expérience ne fera que s'améliorer à mesure que les API des navigateurs et le matériel évoluent.
Prêt à essayer ? Rendez-vous sur la démo Gemma 4 WebGPU et commencez à discuter — pas de téléchargements, pas de clés API, pas de serveurs. Juste vous et Gemma 4, tournant sur votre propre matériel.
Lectures complémentaires
Stop reading. Start building.
~/gemma4 $ Get hands-on with the models discussed in this guide. No deployment, no friction, 100% free playground.
Launch Playground />


