Exécuter des modèles d'IA directement dans le navigateur avec Transformers.js

Et si votre application web pouvait classifier du texte, transcrire de l’audio ou détecter des objets dans des images — sans jamais envoyer de données à un serveur ? C’est exactement ce que Transformers.js rend possible. Cette bibliothèque apporte l’inférence IA côté client dans le navigateur en utilisant uniquement du JavaScript.

Qu’est-ce que Transformers.js ?

Transformers.js est une bibliothèque JavaScript de Hugging Face qui vous permet d’exécuter des modèles d’apprentissage automatique pré-entraînés directement dans le navigateur — sans serveur de modèles backend requis. Elle reproduit l’API de la bibliothèque Python transformers de Hugging Face, donc le modèle mental se transpose facilement si vous avez déjà travaillé avec cette dernière.

Le package maintenu est @huggingface/transformers. Si vous voyez d’anciennes références à @xenova/transformers, elles font référence à l’ancien nom du package utilisé avant que le projet ne soit placé sous la maintenance de Hugging Face. La version stable actuelle est la ligne v3, avec des aperçus de développement v4 disponibles mais pas encore universellement stables.

Comment fonctionne réellement l’inférence IA dans le navigateur

Transformers.js exécute les modèles en utilisant ONNX Runtime compilé pour les environnements JavaScript. ONNX (Open Neural Network Exchange) agit comme un format universel qui permet aux modèles entraînés dans PyTorch, TensorFlow ou JAX de s’exécuter dans le navigateur.

Par défaut, l’inférence s’exécute sur le CPU via WebAssembly (WASM) — qui fonctionne sur pratiquement tous les navigateurs modernes. Pour de meilleures performances sur le matériel compatible, vous pouvez opter pour WebGPU, qui délègue les calculs au GPU.

La disponibilité de WebGPU continue d’évoluer selon les navigateurs et les plateformes. Vous pouvez vérifier l’état actuel de l’implémentation sur webstatus.dev. En pratique, le support et les performances varient encore selon le navigateur, le système d’exploitation et les pilotes GPU.

Utilisez WASM lorsque vous avez besoin d’une compatibilité maximale. Passez à WebGPU lorsque les performances comptent et que vous ciblez des navigateurs modernes avec support WebGPU.

Tous les modèles Hugging Face ne s’exécutent pas dans le navigateur

Il s’agit d’une contrainte importante : les modèles ont besoin de poids compatibles ONNX pour fonctionner avec Transformers.js. De nombreuses architectures populaires — DistilBERT, Whisper, T5, Llama, Qwen, et des dizaines d’autres — ont déjà des versions ONNX disponibles sur le Hub Hugging Face. Pour les modèles qui n’en ont pas, vous pouvez les convertir en utilisant Optimum.

Étant donné que les environnements de navigateur ont des ressources limitées, les modèles quantifiés sont le choix pratique par défaut. L’option dtype contrôle ceci :

• "fp32" — précision complète, par défaut pour WebGPU
• "fp16" — demi-précision, bon équilibre pour GPU
• "q8" — quantification 8 bits, par défaut pour WASM
• "q4" — quantification 4 bits, le plus petit et le plus rapide

Exécuter votre premier pipeline

L’API pipeline gère le prétraitement, l’inférence et le post-traitement en un seul appel. Installez le package :

npm install @huggingface/transformers

Ensuite, exécutez une analyse de sentiment en quelques lignes :

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

// Par défaut utilise WASM, utilise un modèle par défaut pour la tâche
const classifier = await pipeline("sentiment-analysis");
const result = await classifier("I love building with Transformers.js!");
console.log(result); // [{ label: 'POSITIVE', score: 0.9998 }]

Pour activer WebGPU avec précision fp16 :

const classifier = await pipeline(
  "sentiment-analysis",
  "Xenova/distilbert-base-uncased-finetuned-sst-2-english",
  { device: "webgpu", dtype: "fp16" }
);

Les fichiers de modèles sont mis en cache dans le navigateur après le premier téléchargement, donc une utilisation répétée — y compris hors ligne — ne nécessite pas de les récupérer à nouveau. Pour la production, envisagez d’auto-héberger les ressources de modèles plutôt que de vous fier directement au Hub.

Une remarque pratique : par défaut, l’inférence s’exécute sur le thread principal, ce qui peut bloquer l’interface utilisateur pendant les calculs intensifs. Déplacer l’inférence dans un Web Worker est le bon modèle pour toute fonctionnalité de production.

Pourquoi c’est important pour les développeurs frontend

Exécuter des modèles d’IA dans le navigateur avec Transformers.js ouvre des cas d’usage que l’inférence côté serveur ne peut pas couvrir aussi facilement :

• Inférence préservant la confidentialité — les données utilisateur ne quittent jamais l’appareil
• Applications IA hors ligne — peuvent fonctionner sans connexion réseau après le téléchargement initial du modèle
• Réduction des coûts serveur — moins de charges de travail GPU backend à provisionner ou à mettre à l’échelle
• Fonctionnalités à faible latence — pas d’aller-retour réseau vers un point de terminaison API

La liste des tâches prises en charge est large : classification de texte, résumé, traduction, détection d’objets, segmentation d’images, reconnaissance vocale, synthèse vocale, et plus encore.

Conclusion

Transformers.js rend l’IA basée sur le navigateur de plus en plus pratique pour les développeurs frontend. Commencez avec un petit modèle quantifié, validez que la tâche correspond à votre cas d’usage, puis optimisez à partir de là — WebGPU pour la vitesse, Web Workers pour la réactivité de l’interface utilisateur, et modèles auto-hébergés pour la fiabilité en production. La documentation officielle et le hub de modèles sont les meilleures prochaines étapes.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.