L'IA dans ton navigateur va enfin respirer : voici comment le partage de cache va tout changer

TRANSFORMERS.JS : L'IA DANS TON NAVIGATEUR SANS TE PRENDRE LA TÊTE

Transformers.js est une bibliothèque qui permet d'utiliser des modèles d'intelligence artificielle directement dans ton navigateur. Pas besoin d'installer quoi que ce soit : tout se passe dans la page web. Pour faire fonctionner un modèle, il suffit de quelques lignes de code. Par exemple, pour reconnaître la parole dans un fichier audio, tu écris :

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';

const asr = await pipeline(
  'automatic-speech-recognition',
  'Xenova/whisper-tiny.en',
  { device: 'webgpu' },
);
const result = await asr('jfk.wav');
console.log(result);

Ce code charge le modèle Xenova/whisper-tiny.en, un outil spécialisé dans la reconnaissance vocale en anglais. Une fois le modèle téléchargé, ton navigateur le stocke en mémoire pour ne pas avoir à le recharger la prochaine fois. Mais voilà le problème : si tu ouvres une autre page web qui utilise le même modèle, ton navigateur va le télécharger à nouveau, même s'il est déjà présent sur ton ordinateur.

LE PROBLÈME DU CACHE : UNE MÊME RESSOURCE, DEUX TÉLÉCHARGEMENTS

Prenons un exemple concret. Tu ouvres une première page web qui utilise le modèle Xenova/whisper-tiny.en pour la reconnaissance vocale. Ton navigateur télécharge les fichiers nécessaires et les stocke dans son cache. Si tu ouvres une deuxième page web, hébergée sur un autre site (un autre origin), qui utilise le même modèle, ton navigateur va télécharger à nouveau tous les fichiers, même s'ils sont identiques. Résultat : 177 Mo de données téléchargées et stockées deux fois sur ton disque dur.

Ce n'est pas tout. Si tu utilises un deuxième modèle d'IA, par exemple pour analyser le sentiment d'un texte, ton navigateur va aussi télécharger un fichier ort-wasm-simd-threaded.asyncify.wasm de 4,7 Mo. Ce fichier est partagé par tous les modèles d'IA qui utilisent la bibliothèque ONNX Runtime. Encore une fois, si tu ouvres une autre page web qui utilise ce même fichier, ton navigateur va le télécharger à nouveau.

POURQUOI TON NAVIGATEUR NE PARTAGE PAS LES FICHIERS ENTRE SITES ?

La raison est simple : la sécurité. Les navigateurs isolent le cache par origin pour éviter les attaques par timing. Imagine que tu visites un site malveillant. Si ce site pouvait savoir si tu as déjà visité un autre site en mesurant le temps de chargement des ressources, il pourrait deviner ton historique de navigation. Pour éviter cela, ton navigateur utilise une clé de cache qui dépend du site que tu visites. Même si deux sites utilisent la même ressource, comme le fichier ort-wasm-simd-threaded.asyncify.wasm, ton navigateur va les traiter comme deux ressources différentes et les télécharger deux fois.

L'APPEL À L'AIDE : L'API CROSS-ORIGIN STORAGE

Pour résoudre ce problème, les développeurs proposent une nouvelle API Cross-Origin Storage (COS). Cette API permet de partager des fichiers entre différents sites, sans compromettre la sécurité. Au lieu de stocker les fichiers par leur URL, l'API les identifie par une empreinte cryptographique (un hash). Ainsi, si deux sites utilisent le même fichier, ton navigateur peut le reconnaître et le partager, même s'il a été téléchargé depuis un autre site.

L'API Cross-Origin Storage fonctionne de manière similaire à l'Origin Private File System (OPFS), une autre API qui permet de stocker des fichiers dans le navigateur. Mais au lieu de stocker les fichiers par leur nom, elle les stocke par leur hash. Voici comment ça marche :

const hash = {
  algorithm: 'SHA-256',
  value: '8f434346648f6b96df89dda901c5176b10a6d83961dd3c1ac88b59b2dc327aa4',
};

try {
  const handle = await navigator.crossOriginStorage.requestFileHandle(hash);
  // Le fichier est déjà dans le cache . On le récupère directement.
  const fileBlob = await handle.getFile();
} catch (err) {
  // Le fichier n'est pas dans le cache. On le télécharge depuis le réseau.
  const fileBlob = await fetch('https://cdn.jsdelivr.net/./ort-wasm-simd-threaded.asyncify.wasm')
    .then(r => r.blob());
  
  // On le stocke dans le cache Cross-Origin pour les prochains utilisateurs.
  const handle = await navigator.crossOriginStorage.requestFileHandle(
    hash,
    { create: true, origins: '*' },
  );
  const writableStream = await handle.createWritable();
  await writableStream.write(fileBlob);
  await writableStream.close();
}

CONTRÔLER QUI PEUT ACCÉDER AUX FICHIERS

Tous les fichiers ne doivent pas être accessibles par tout le monde. L'API Cross-Origin Storage permet de contrôler qui peut lire ou écrire un fichier. Par exemple, tu peux restreindre l'accès à certains sites :

origins: ['https://write.example.com', 'https://calculate.example.com']

Une fois qu'un fichier est stocké avec une liste restreinte d'origins, il est impossible de réduire cette liste. En revanche, tu peux l'élargir. Par exemple, si un fichier est d'abord accessible uniquement par https://write.example.com, un autre site peut ensuite le rendre accessible à tous en utilisant origins: '*'.

VÉRIFIER L'INTÉGRITÉ DES FICHIERS AUTOMATIQUEMENT

Un autre avantage de l'API Cross-Origin Storage est qu'elle vérifie automatiquement l'intégrité des fichiers. Quand tu stockes un fichier, ton navigateur calcule son hash et le compare avec celui que tu as fourni. Si les deux ne correspondent pas, le fichier n'est pas stocké. Ainsi, tu es sûr que le fichier que tu récupères est exactement celui que tu as téléchargé, sans aucune modification.

C'est particulièrement utile pour les modèles d'IA. Aujourd'hui, quand tu télécharges un modèle depuis un site comme Hugging Face, tu n'as aucun moyen de vérifier que le fichier n'a pas été modifié. Avec l'API Cross-Origin Storage, chaque fichier est vérifié automatiquement à l'écriture, quel que soit son origine.

PRIVACY : COMMENT PROTÉGER TON HISTORIQUE DE NAVIGATION ?

Partager des fichiers entre sites soulève une question importante : est-ce que ça permet à un site de savoir ce que tu as visité avant ? Par exemple, si un site malveillant vérifie si un fichier spécifique est dans ton cache, peut-il deviner que tu as visité un autre site ?

L'API Cross-Origin Storage répond à cette question en utilisant deux mécanismes :

• Les erreurs ne sont pas définitives : si un site demande un fichier et que le navigateur ne le trouve pas, ça ne veut pas forcément dire que le fichier n'est pas dans le cache. Ça peut aussi vouloir dire que le navigateur ne veut pas te le dire.
• Les sites ne peuvent pas savoir si un fichier est dans le cache : même si un site demande un fichier et reçoit une erreur, il ne peut pas en déduire que le fichier n'est pas dans le cache.

Ainsi, même si un site malveillant essaie de deviner ton historique de navigation, il ne pourra pas obtenir d'information utile.

TRANSFORMERS.JS TESTE DÉJÀ L'API CROSS-ORIGIN STORAGE

La bibliothèque Transformers.js a déjà commencé à intégrer l'API Cross-Origin Storage. Pour l'activer, il suffit d'ajouter une ligne de code avant de charger un modèle :

import { env, pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]";

// Activation de l'API Cross-Origin Storage (expérimental).
env.experimental_useCrossOriginStorage = true;

const asr = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en', { device: 'webgpu' });
const result = await asr('jfk.wav');
console.log(result);

Quand cette option est activée, Transformers.js calcule le hash SHA-256 de chaque fichier du modèle. Si le fichier est déjà dans le cache Cross-Origin, il est récupéré instantanément. Sinon, il est téléchargé depuis le réseau et stocké dans le cache pour les prochains utilisateurs.

Avec cette solution, les modèles Xenova/whisper-tiny.en et Xenova/distilbert-base-uncased-finetuned-sst-2-english ne sont téléchargés qu'une seule fois, quel que soit le nombre de sites qui les utilisent. Le fichier ort-wasm-simd-threaded.asyncify.wasm suit la même logique : il n'est téléchargé qu'une seule fois et partagé entre tous les sites.

ESSAYEZ L'API AUJOURD'HUI, MÊME SI ELLE N'EST PAS ENCORE DANS TON NAVIGATEUR

L'API Cross-Origin Storage n'est pas encore implémentée nativement dans les navigateurs. Mais tu peux déjà l'essayer en installant une extension dédiée. Cette extension injecte le code nécessaire pour activer l'API dans toutes les pages web.

Une fois l'extension installée, tu peux essayer l'expérience complète : ouvre la première page web avec l'API activée, laisse-la charger le modèle Xenova/whisper-tiny.en. Puis ouvre la deuxième page web, toujours avec l'API activée. Au lieu de télécharger à nouveau les 177 Mo du modèle, ton navigateur le récupère instantanément depuis le cache Cross-Origin.

Dans la fenêtre de l'extension, tu peux voir les fichiers partagés entre les sites. Par exemple, le fichier avec le hash SHA-256 950978b1dbcbf250335358c1236053ba19a7f7849b33dc777f4421b72b7626fa est partagé entre https://googlechrome.github.io et https://rawcdn.rawgit.net. Ce fichier correspond au modèle Xenova/whisper-tiny.en.

ET APRÈS ? VERS UNE INTÉGRATION NATIVE DANS LES NAVIGATEURS

L'équipe de Chrome envisage d'implémenter l'API Cross-Origin Storage nativement dans le navigateur. Pour l'instant, c'est une proposition en phase de test. Les développeurs sont invités à donner leur avis et à proposer des améliorations sur le dépôt GitHub dédié.

Transformers.js n'est pas la seule bibliothèque à s'intéresser à cette API. D'autres projets comme WebLLM et wllama testent aussi cette solution pour optimiser le chargement des modèles d'IA dans le navigateur.

QUELLE EST LA PROCHAINE ÉTAPE POUR TOI ?

Si tu développes une application avec Transformers.js, voici ce que tu peux faire dès maintenant :

• Ajoute la ligne env.experimental_useCrossOriginStorage = true avant ton premier appel à pipeline().
• Installe l'extension Cross-Origin Storage pour activer l'API dans ton navigateur.
• Observe la disparition des téléchargements inutiles dans l'onglet Network de tes outils de Développement.

Chaque site qui active cette option rend l'expérience plus rapide et plus efficace pour tous les utilisateurs. Et le meilleur ? Si l'API n'est pas supportée par le navigateur de l'utilisateur, le code revient automatiquement à la solution par défaut (le cache web classique).

EN RÉSUMÉ : POURQUOI CETTE INNOVATION VA TOUT CHANGER

L'API Cross-Origin Storage est une solution simple mais puissante pour résoudre un problème majeur : le gaspillage de données et de temps lié au téléchargement répété des mêmes fichiers d'IA. Grâce à cette API, les modèles ne sont téléchargés qu'une seule fois, quel que soit le nombre de sites qui les utilisent. Résultat : des pages web qui chargent plus vite, moins de données consommées, et une expérience utilisateur améliorée.

Et ce n'est qu'un début. Cette technologie pourrait s'étendre à d'autres types de fichiers, rendant le web plus efficace et plus respectueux des ressources. Une avancée qui mérite d'être suivie de près .