Informer les utilisateurs du téléchargement du modèle

Thomas Steiner

Publié le 1er octobre 2025

Avant de pouvoir utiliser l'une des API d'IA intégrées, le modèle sous-jacent et toutes les personnalisations (comme les ajustements précis) doivent être téléchargés à partir du réseau, les données compressées doivent être extraites et enfin chargées en mémoire. Ce guide présente quelques bonnes pratiques pour améliorer l'expérience utilisateur pendant l'attente du téléchargement.

Surveiller et partager la progression du téléchargement

Chaque API d'IA intégrée dispose de la fonction create() pour démarrer une session. La fonction create() comporte une option monitor qui vous permet d'accéder à la progression du téléchargement pour la partager avec l'utilisateur.

Bien que les API d'IA intégrées soient conçues pour l'IA côté client, où les données sont traitées dans le navigateur et sur l'appareil de l'utilisateur, certaines applications peuvent permettre le traitement des données sur un serveur. La façon dont vous vous adressez à votre utilisateur dans la progression du téléchargement du modèle dépend de la réponse à la question suivante : le traitement des données doit-il être exécuté uniquement en local ou non ? Si la valeur est "true", votre application est uniquement côté client. Sinon, votre application peut utiliser une implémentation hybride.

Côté client uniquement

Dans certains cas, le traitement des données côté client est nécessaire. Par exemple, une application de santé qui permet aux patients de poser des questions sur leurs informations personnelles souhaite probablement que ces informations restent privées sur l'appareil de l'utilisateur. L'utilisateur doit attendre que le modèle et toutes les personnalisations soient téléchargés et prêts avant de pouvoir utiliser les fonctionnalités de traitement des données.

Dans ce cas, si le modèle n'est pas encore disponible, vous devez afficher des informations sur la progression du téléchargement à l'utilisateur.

<style>
  progress[hidden] ~ label {
    display: none;
  }
</style>

<button type="button">Create LanguageModel session</button>
<progress hidden id="progress" value="0"></progress>
<label for="progress">Model download progress</label>

Pour que cela fonctionne, vous avez besoin d'un peu de JavaScript. Le code réinitialise d'abord l'interface de progression à l'état initial (progression masquée et nulle), vérifie si l'API est prise en charge, puis vérifie la disponibilité de l'API :

• L'API est 'unavailable' : votre application ne peut pas être utilisée côté client sur cet appareil. Avertissez l'utilisateur que la fonctionnalité n'est pas disponible.
• L'API est 'available' : l'API peut être utilisée immédiatement, il n'est pas nécessaire d'afficher l'UI de progression.
• L'API est 'downloadable' ou 'downloading' : l'API peut être utilisée une fois le téléchargement terminé. Affichez un indicateur de progression et mettez-le à jour chaque fois que l'événement downloadprogress se déclenche. Après le téléchargement, affichez l'état indéterminé pour indiquer à l'utilisateur que le navigateur extrait le modèle et le charge en mémoire.

const createButton = document.querySelector('.create');
const promptButton = document.querySelector('.prompt');
const progress = document.querySelector('progress');
const output = document.querySelector('output');

let sessionCreationTriggered = false;
let session = null;

const createSession = async (options = {}) => {
  if (sessionCreationTriggered) {
    return;
  }

  progress.hidden = true;
  progress.value = 0;

  try {
    if (!('LanguageModel' in self)) {
      throw new Error('LanguageModel is not supported.');
    }

    const availability = await LanguageModel.availability();
    if (availability === 'unavailable') {
      throw new Error('LanguageModel is not available.');
    }

    let modelNewlyDownloaded = false;
    if (availability !== 'available') {
      modelNewlyDownloaded = true;
      progress.hidden = false;
    }
    console.log(`LanguageModel is ${availability}.`);
    sessionCreationTriggered = true;

    const llmSession = await LanguageModel.create({
      monitor(m) {
        m.addEventListener('downloadprogress', (e) => {
          progress.value = e.loaded;
          if (modelNewlyDownloaded && e.loaded === 1) {
            // The model was newly downloaded and needs to be extracted
            // and loaded into memory, so show the undetermined state.
            progress.removeAttribute('value');
          }
        });
      },
      ...options,
    });

    sessionCreationTriggered = false;
    return llmSession;
  } catch (error) {
    throw error;
  } finally {
    progress.hidden = true;
    progress.value = 0;
  }
};

createButton.addEventListener('click', async () => {
  try {
    localSession = await createSession({
      expectedInputs: [{ type: 'text', languages: ['en'] }],
      expectedOutputs: [{ type: 'text', languages: ['en'] }],
    });
    promptButton.disabled = false;
  } catch (error) {
    output.textContent = error.message;
  }
});

promptButton.addEventListener('click', async () => {
  output.innerHTML = '';
  try {
    const stream = localSession.promptStreaming('Write me a poem');
    for await (const chunk of stream) {
      output.append(chunk);
    }
  } catch (err) {
    output.textContent = err.message;
  }
});

Si l'utilisateur accède à l'application pendant que le modèle est en cours de téléchargement dans le navigateur, l'interface de progression indique où en est le navigateur dans le processus de téléchargement en fonction des données manquantes.

Consultez la démonstration qui montre ce flux en action. Si l'API d'IA intégrée (l'API Prompt dans cet exemple) n'est pas disponible, l'application ne peut pas être utilisée. Si le modèle d'IA intégré doit encore être téléchargé, un indicateur de progression s'affiche pour l'utilisateur. Vous pouvez consulter le code source sur GitHub.

Implémentation hybride

Si vous préférez utiliser l'IA côté client, mais que vous pouvez envoyer temporairement des données au cloud, vous pouvez configurer une implémentation hybride. Cela signifie que les utilisateurs peuvent profiter des fonctionnalités immédiatement, tout en téléchargeant le modèle local en parallèle. Une fois le modèle téléchargé, passez dynamiquement à la session locale.

Vous pouvez utiliser n'importe quelle implémentation côté serveur pour le mode hybride, mais il est probablement préférable de s'en tenir à la même famille de modèles dans le cloud et en local pour vous assurer d'obtenir une qualité de résultat comparable. Premiers pas avec l'API Gemini et les applications Web présente les différentes approches de l'API Gemini.

La démonstration montre ce flux en action. Si l'API d'IA intégrée n'est pas disponible, la démo repasse à l'API Gemini dans le cloud. Si le modèle intégré doit encore être téléchargé, un indicateur de progression s'affiche pour l'utilisateur et l'application utilise l'API Gemini dans le cloud jusqu'à ce que le modèle soit téléchargé. Consultez le code source complet sur GitHub.

Conclusion

À quelle catégorie votre application appartient-elle ? Avez-vous besoin d'un traitement 100 % côté client ou pouvez-vous utiliser une approche hybride ? Une fois que vous avez répondu à cette question, l'étape suivante consiste à implémenter la stratégie de téléchargement de modèle qui vous convient le mieux.

Assurez-vous que vos utilisateurs savent toujours quand et s'ils peuvent utiliser votre application côté client en leur montrant la progression du téléchargement du modèle, comme indiqué dans ce guide.

N'oubliez pas qu'il ne s'agit pas d'un défi ponctuel : si le navigateur supprime le modèle en raison d'un manque d'espace de stockage ou lorsqu'une nouvelle version du modèle devient disponible, il doit le télécharger à nouveau. Que vous choisissiez l'approche côté client ou hybride, vous pouvez être sûr de créer la meilleure expérience possible pour vos utilisateurs et de laisser le navigateur s'occuper du reste.