L'état de l'IA sur appareil dans le navigateur

Exécuter l’IA directement dans le navigateur semble simple jusqu’à ce que vous tentiez de la déployer. Les API sont fragmentées, les exigences matérielles varient considérablement, et ce qui fonctionne sur un appareil échoue silencieusement sur un autre. Avant de configurer votre premier appel d’inférence, il est utile de comprendre ce qui est réellement disponible, comment les couches s’articulent, et où se situent les véritables lacunes début 2026.

Trois couches distinctes, pas une seule chose

La plus grande source de confusion concernant l’IA sur appareil dans le navigateur est de traiter toutes les approches comme interchangeables. Elles ne le sont pas. Il existe trois couches distinctes, et choisir la mauvaise pour votre cas d’usage crée de réels problèmes.

Couche 1 : API d’IA fournies par le navigateur

Chrome intègre des API d’IA natives soutenues par des modèles qu’il fournit et gère directement dans le navigateur, notamment Gemini Nano. Comme décrit dans la documentation Chrome built-in AI, ces modèles sont téléchargés et gérés par Chrome lui-même. Chrome a rendu disponibles des API telles que Summarizer, Translator et Language Detector dans des versions stables, tandis que d’autres restent plus limitées. La Prompt API est stable pour les extensions Chrome, mais son utilisation sur page web reste expérimentale ou basée sur des origin trials. Writer et Rewriter ne sont pas non plus des fonctionnalités que vous devriez considérer comme universellement prêtes pour la production.

Microsoft Edge adopte une approche similaire en utilisant Phi-4-mini et expose sa propre surface d’API. Le modèle est intégré directement dans le navigateur et peut être accédé via des API comme la Prompt API, actuellement disponible en aperçu développeur dans les versions Edge Canary et Dev. Cependant, ces API sont encore expérimentales et ne sont pas largement disponibles dans les environnements de production. Firefox dispose de fonctionnalités d’IA telles que l’intégration de chatbot et des expériences Smart Window, mais n’expose actuellement pas de surface d’API d’IA intégrée de type Chrome pour les développeurs web.

L’attrait est évident : pas d’hébergement de modèle, pas de coût de taille de bundle, configuration minimale. L’inconvénient est tout aussi évident : vous êtes lié à une implémentation de navigateur spécifique, le modèle est fixe, et vous n’avez aucun contrôle sur la version en cours d’exécution. Ces API nécessitent également que le modèle soit d’abord téléchargé, ce qui peut être volumineux et se produit de manière asynchrone. Vous devez gérer cela avec élégance.

// Feature-detect before using a built-in browser AI API
if ('Summarizer' in self) {
  const availability = await Summarizer.availability();

  if (availability !== 'unavailable') {
    const summarizer = await Summarizer.create();
    const summary = await summarizer.summarize(articleText);
  }
} else {
  // Fall back to cloud or skip the feature
}

Couche 2 : Inférence basée sur JavaScript avec Transformers.js et ONNX Runtime Web

Si vous avez besoin d’une prise en charge plus large des navigateurs ou souhaitez choisir votre propre modèle, Transformers.js est l’une des options les plus pratiques actuellement. Il exécute les modèles Hugging Face directement dans le navigateur en utilisant le format ONNX et peut utiliser l’accélération WebGPU lorsqu’elle est disponible, avec un repli sur WebAssembly lorsque pris en charge.

ONNX Runtime Web vous offre une portée similaire avec plus de contrôle sur les fournisseurs d’exécution. Les deux sont des choix raisonnables pour la classification, la traduction, l’analyse de sentiment, les embeddings et les tâches de génération de texte légères.

Notez que Transformers.js v3 est passé au package @huggingface/transformers. L’import @xenova/transformers montré ci-dessous s’applique à la v2, qui reste courante dans les projets existants :

// Transformers.js v2
import { pipeline } from '@xenova/transformers';

// Transformers.js v3+
// import { pipeline } from '@huggingface/transformers';

const classifier = await pipeline('sentiment-analysis');
const result = await classifier('This article is genuinely useful.');

La taille du modèle est la principale contrainte. Un modèle quantifié adapté à l’inférence dans le navigateur peut varier de quelques dizaines à plusieurs centaines de mégaoctets, selon la tâche. Les modèles plus volumineux deviennent impraticables sans une mise en cache soigneuse via IndexedDB ou l’API Cache.

Couche 3 : WebGPU et WebAssembly comme primitives d’accélération

WebGPU et WebAssembly ne sont pas des API d’IA. Ce sont des primitives bas niveau que des frameworks comme Transformers.js, ONNX Runtime Web et TensorFlow.js peuvent utiliser en interne pour exécuter l’inférence plus rapidement. Vous interagissez rarement directement avec elles, sauf si vous construisez un framework ou effectuez du travail de calcul personnalisé.

WebGPU en particulier débloque une accélération GPU significative pour les opérations matricielles, ce qui compte pour tout ce qui dépasse les modèles minuscules. La prise en charge est beaucoup plus large qu’auparavant, mais elle nécessite toujours une détection de fonctionnalité car le navigateur, le système d’exploitation, l’appareil, le pilote et la prise en charge mobile varient.

Ce que WebNN apporte au tableau

WebNN (Web Neural Network API) est une API W3C conçue pour exposer des opérations de réseau neuronal accélérées matériellement, y compris l’accès au NPU sur les appareils pris en charge, via une interface de navigateur cohérente. Elle se situe entre votre framework et le matériel, un peu comme WebGPU, mais est spécifiquement conçue pour les charges de travail ML.

La prise en charge par les navigateurs est limitée début 2026. Chrome dispose d’une implémentation partielle, et une prise en charge plus large par d’autres navigateurs est encore en cours. Des frameworks comme ONNX Runtime Web ajoutent déjà WebNN comme backend d’exécution, vous en bénéficierez donc probablement indirectement avant de l’utiliser directement.

Les compromis honnêtes

Les avantages en matière de confidentialité sont réels mais conditionnels. L’inférence locale signifie que les données d’entrée ne quittent pas l’appareil pendant le traitement, mais le site web peut toujours enregistrer ce que les utilisateurs tapent avant que cela n’atteigne le modèle. « Local » ne signifie pas automatiquement privé de bout en bout.

La capacité hors ligne est également conditionnelle. Une fois qu’un modèle est mis en cache, l’inférence peut fonctionner sans connexion. Mais le téléchargement initial en nécessite une, et les mises à jour du modèle nécessitent une reconnexion.

L’hybride est la configuration par défaut réaliste

La plupart des applications de production n’iront pas entièrement sur appareil. Le modèle pratique consiste à tenter l’inférence locale, vérifier la disponibilité de l’API et la capacité matérielle, puis basculer vers un endpoint cloud lorsque l’un ou l’autre manque. Cela offre aux appareils capables une expérience plus rapide et plus privée sans casser la fonctionnalité pour tous les autres.

Conclusion

L’IA sur appareil dans le navigateur est véritablement utile aujourd’hui pour des tâches spécifiques et délimitées : résumer un document, détecter une langue, classifier un texte court, générer des embeddings, ou exécuter un assistant léger. Les expériences LLM à grande échelle dans le navigateur restent incohérentes et dépendantes du matériel. Construisez pour le juste milieu réaliste, et vous déploierez quelque chose qui fonctionne réellement.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.