Utiliser Transformers.js dans le navigateur permet d’exécuter des tâches de NLP sans envoyer les données à un serveur distant. L’intérêt principal est simple : vous gardez le traitement côté client, ce qui réduit la dépendance au cloud et permet des usages hors ligne ou sur machine locale. Dans ce tutoriel, vous partez de zéro et vous apprendrez à charger un modèle, analyser du texte et afficher un résultat directement dans une page web.
Avant de commencer, un point important : les sources disponibles ici confirment l’existence d’une extension Chrome autour de Transformers.js et son usage combiné avec WebGPU/offscreen document pour de l’inférence locale, mais elles ne donnent pas de documentation produit exhaustive sur toutes les versions de 2025-2026. Les chiffres de performance cités publiquement varient selon le matériel, et les résultats précis dépendent du navigateur, du modèle et de l’accélération matérielle disponible. Les données ci-dessous sont donc présentées uniquement lorsqu’elles sont explicitement confirmées par les sources fournies.
Étape 1 : vérifier ce qu’il faut avant de commencer
Transformers.js s’utilise dans un navigateur moderne, avec un environnement JavaScript capable de charger des modèles ML côté client. Les sources disponibles indiquent un fonctionnement avec Chrome et WebGPU, et mentionnent aussi une exécution en offscreen document avec shaders WebGPU pour obtenir entre 5 et 10 tokens par seconde sur une RTX 3060 ou un Mac M2 de deuxième génération dans un contexte local de génération.
Prérequis à avoir sous la main
- Un navigateur compatible avec les fonctionnalités modernes de JavaScript et, idéalement, WebGPU.
- Une machine avec suffisamment de mémoire pour charger les poids du modèle choisi.
- Une connexion Internet pour le premier téléchargement du modèle, sauf si le modèle est déjà mis en cache localement.
- Un éditeur de code simple, par exemple VS Code, si vous souhaitez modifier le fichier HTML à la main.
Ce que vous devez comprendre avant d’aller plus loin
- Le traitement se fait dans le navigateur, pas dans une API cloud.
- Le premier chargement peut être plus lent, car le modèle doit être téléchargé.
- Les performances dépendent fortement du matériel et du navigateur.
⚠️ Attention : si vous choisissez un modèle trop lourd pour votre machine, l’expérience peut devenir lente ou instable. Les sources consultées montrent par exemple qu’un modèle Gemma 4 E4B quantifié pèse environ 3 Go et reste utilisable sur certains MacBook Air, mais ce chiffre concerne un autre environnement local et montre surtout que la taille des modèles reste un facteur critique.
Étape 2 : créer la page HTML de départ
Commencez par créer un fichier index.html. Ouvrez votre éditeur, créez un nouveau fichier, puis collez le code ci-dessous. Il sert de base minimale pour tester le pipeline NLP dans le navigateur.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transformers.js NLP local</title>
</head>
<body>
<h1>NLP local dans le navigateur</h1>
<textarea id="input" rows="8" cols="80">J’adore les outils d’IA locaux dans le navigateur.</textarea>
<br />
<button id="run">Analyser le texte</button>
<pre id="output">Résultat en attente...</pre>
<script type="module" src="app.js"></script>
</body>
</html>
Ce que fait cette page
- Un textarea pour saisir le texte.
- Un bouton pour lancer l’analyse.
- Une zone de sortie pour afficher le résultat.
- Un script
app.jsqui contiendra la logique Transformers.js.
💡 Astuce : gardez toujours une structure très simple au début. Vous pourrez ensuite ajouter des fonctionnalités comme la classification, le résumé ou l’extraction d’entités.
Étape 3 : ajouter Transformers.js au projet
Créez maintenant un fichier app.js. Dans ce tutoriel, l’idée est de charger une tâche NLP simple, par exemple l’analyse de sentiment, puis d’afficher la prédiction dans la page.
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@latest';
const input = document.getElementById('input');
const button = document.getElementById('run');
const output = document.getElementById('output');
let classifier;
async function loadModel() {
output.textContent = 'Chargement du modèle...';
classifier = await pipeline('sentiment-analysis');
output.textContent = 'Modèle chargé. Vous pouvez lancer une analyse.';
}
button.addEventListener('click', async () => {
if (!classifier) {
await loadModel();
}
output.textContent = 'Analyse en cours...';
const result = await classifier(input.value);
output.textContent = JSON.stringify(result, null, 2);
});
loadModel();
Ce que vous venez de faire
- Vous importez
pipelinedepuis une distribution JavaScript de Transformers.js. - Vous chargez un pipeline de sentiment analysis.
- Vous envoyez le texte de l’utilisateur au modèle.
- Vous affichez la réponse brute en JSON.
⚠️ Attention : la ligne d’import dépend du mode de distribution utilisé. Si votre environnement impose une installation via npm ou un bundler, adaptez cette étape à votre stack. L’objectif ici est de vous montrer le flux minimal côté navigateur.
Étape 4 : lancer le test dans le navigateur
Ouvrez votre fichier index.html dans le navigateur. Si tout est correctement configuré, la page affiche le titre, le champ texte, le bouton et la zone de sortie. Au chargement, le modèle se télécharge et un message indique que l’initialisation est en cours.
Procédure de test
- Ouvrez la page.
- Attendez la fin du chargement du modèle.
- Cliquez sur Analyser le texte.
- Essayez plusieurs phrases, par exemple :
Ce navigateur local avec IA est impressionnant.Je trouve cette interface lente et frustrante.Le résultat est acceptable.
Ce que vous devez observer
- Le résultat renvoyé contient généralement une étiquette et un score.
- Le temps de réponse varie selon le modèle et la machine.
- La première exécution est souvent plus lente à cause du téléchargement initial.
💡 Astuce : pour tester rapidement, commencez avec des phrases très courtes et clairement positives ou négatives. Cela permet de vérifier tout le pipeline avant de passer à un cas d’usage plus complexe.
Étape 5 : comprendre les tâches NLP que vous pouvez faire
Transformers.js ne sert pas seulement au sentiment analysis. Dans un navigateur, vous pouvez utiliser plusieurs familles de tâches, selon les modèles disponibles et votre budget de performance.
| Tâche | Ce que ça fait | Exemple d’usage | Limite pratique |
|---|---|---|---|
| Sentiment analysis | Classe le texte comme positif, négatif ou neutre | Avis client, modération | Peu utile sur des textes très courts ou ambigus |
| Text classification | Attribue une catégorie à un texte | Tri de tickets, tri de messages | Dépend d’un modèle adapté |
| Summarization | Résume un long texte | Notes automatiques, veille | Plus coûteux en calcul |
| Named Entity Recognition | Repère les noms, lieux, dates | Extraction d’informations | Résultats variables selon la langue |
| Translation | Traduit une phrase | Aide multilingue | Modèle plus lourd |
| Question answering | Répond à partir d’un contexte | FAQ locale | Il faut fournir un contexte pertinent |
Les sources fournies montrent aussi qu’en 2026 l’écosystème des modèles ouverts continue d’évoluer, avec des familles comme Gemma 4 publiées le 2 avril 2026 sous licence Apache 2.0. Elles ne concernent pas directement Transformers.js, mais elles confirment l’essor de modèles ouverts adaptés à des exécutions locales.
Étape 6 : choisir un modèle adapté au navigateur
Le choix du modèle est le point le plus important. Un petit modèle est plus rapide à charger et plus simple à exécuter, alors qu’un modèle plus grand améliore souvent la qualité mais consomme davantage de mémoire et de temps.
Exemple de critères simples
- Vitesse : prioritaire si vous voulez une expérience fluide dans le navigateur.
- Qualité : prioritaire si vous traitez des textes plus complexes.
- Taille : critique pour les machines avec peu de RAM.
- Compatibilité navigateur : importante si vous comptez exploiter WebGPU.
Les informations publiques fournies ici donnent un repère utile sur les performances locales : un contexte d’exécution avec WebGPU et offscreen document peut atteindre 5 à 10 tokens par seconde sur une RTX 3060 ou un Mac M2 de deuxième génération. Cela n’est pas un benchmark Transformers.js officiel dans ces sources, mais c’est un indicateur concret de ce qu’on peut attendre d’une exécution locale moderne.
Tableau comparatif des choix pratiques
| Choix | Avantage principal | Inconvénient principal | Quand le choisir |
|---|---|---|---|
| Petit modèle NLP | Rapide, simple, peu gourmand | Moins précis | Démo, prototype, usages de base |
| Modèle intermédiaire | Bon équilibre qualité/vitesse | Téléchargement plus long | Produit léger, usage régulier |
| Modèle plus lourd | Meilleure qualité potentielle | Lenteur, mémoire élevée | Poste puissant, besoin de qualité |
⚠️ Attention : ne partez pas sur un modèle « trop ambitieux » pour un premier test. Dans le navigateur, la stabilité compte autant que la précision.
Étape 7 : améliorer l’interface pour un vrai usage
Une démonstration fonctionne vite, mais un vrai outil a besoin d’un peu plus de confort. Vous pouvez ajouter un indicateur de chargement, désactiver le bouton pendant l’analyse et afficher un message d’erreur propre si le modèle ne se charge pas.
Version plus robuste du script
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@latest';
const input = document.getElementById('input');
const button = document.getElementById('run');
const output = document.getElementById('output');
let classifier = null;
async function loadModel() {
button.disabled = true;
output.textContent = 'Chargement du modèle local...';
try {
classifier = await pipeline('sentiment-analysis');
output.textContent = 'Modèle prêt.';
} catch (error) {
output.textContent = `Erreur au chargement : ${error.message}`;
} finally {
button.disabled = false;
}
}
button.addEventListener('click', async () => {
if (!classifier) {
await loadModel();
if (!classifier) return;
}
try {
button.disabled = true;
output.textContent = 'Analyse en cours...';
const result = await classifier(input.value);
output.textContent = JSON.stringify(result, null, 2);
} catch (error) {
output.textContent = `Erreur d’analyse : ${error.message}`;
} finally {
button.disabled = false;
}
});
loadModel();
Pourquoi cette version est meilleure
- L’utilisateur sait toujours ce qui se passe.
- Les erreurs sont visibles.
- Le bouton évite les clics répétés pendant le traitement.
💡 Astuce : dans un vrai produit, affichez aussi la taille du modèle et le statut du cache local. Cela aide à comprendre pourquoi un premier chargement peut être long.
Étape 8 : comparer Transformers.js avec une approche cloud
Le principal avantage de Transformers.js est de faire tourner l’inférence dans le navigateur, sans dépendre systématiquement d’un service distant. Cela peut être utile pour la confidentialité, pour limiter les coûts d’API ou pour construire des outils plus autonomes.
| Critère | Transformers.js dans le navigateur | API cloud classique |
|---|---|---|
| Où s’exécute le traitement | Dans le navigateur | Sur des serveurs distants |
| Données envoyées à un serveur | Pas nécessaire pour l’inférence locale | Oui, en général |
| Dépendance à Internet | Faible après chargement | Forte |
| Coût variable | Principalement côté machine de l’utilisateur | Souvent facturation à l’usage |
| Contrôle local | Élevé | Plus limité |
Les sources fournies ne donnent pas de grille tarifaire officielle pour Transformers.js en lui-même, ce qui est cohérent avec son usage comme bibliothèque open source côté navigateur. En revanche, elles rappellent que les modèles et les environnements locaux peuvent avoir des tailles et des performances très différentes, avec par exemple un modèle Gemma 4 E4B quantifié d’environ 3 Go et des débits de 40 à 60 tokens par seconde sur certains Mac M3 avec 16 Go de RAM.
Étape 9 : tester un cas d’usage concret
Pour transformer votre démonstration en mini-outil utile, essayez un scénario simple : classer les retours utilisateurs. Collez une phrase dans le champ texte et observez si votre pipeline renvoie une émotion, une catégorie ou une réponse exploitable.
Exemples d’inputs à copier-coller
Le produit est rapide et agréable à utiliser.Je n’arrive pas à comprendre l’interface.Le chargement est trop long, mais les résultats sont bons.
Ce que vous pouvez afficher ensuite
- Une étiquette lisible comme positif, négatif ou neutre.
- Un score de confiance.
- Une couleur différente selon le résultat.
⚠️ Attention : si vous utilisez le résultat pour automatiser une décision, ajoutez toujours une vérification humaine. Les modèles de NLP peuvent se tromper, surtout sur des formulations ambiguës.
Étape 10 : présenter un résultat concret à la fin du tutoriel
Le meilleur résultat à montrer est une petite page web qui prend une phrase en français, la traite localement dans le navigateur et renvoie une étiquette immédiatement lisible. Par exemple :
- Entrée :
J’adore cette démo locale. - Sortie :
[{"label":"POSITIVE","score":0.998}]
C’est un livrable clair, facile à présenter à un client, à un collègue ou à un lecteur. Vous pouvez aussi montrer que la page fonctionne sans interaction avec une API cloud, ce qui illustre bien la valeur de Transformers.js pour du NLP local.
Les sources 2025-2026 disponibles ici confirment la dynamique d’un écosystème local plus large, avec des modèles ouverts publiés en 2026, des exécutions locales sur navigateur et des performances qui rendent ce type de workflow crédible sur du matériel grand public. Elles ne fournissent pas de prix mensuels spécifiques à Transformers.js, ni de parts de marché détaillées sur cette bibliothèque, donc il serait incorrect d’inventer ces chiffres.
En pratique, l’approche la plus solide pour 2026 reste la suivante : commencer par un petit pipeline NLP, valider la vitesse sur votre machine, puis augmenter progressivement la complexité seulement si l’expérience utilisateur reste fluide. Pour Brief IA, l’intérêt éditorial est clair : Transformers.js fait partie des outils qui déplacent une partie du NLP du cloud vers le navigateur, avec une promesse simple, testable et immédiatement utile.