Alors que la plupart des fonctionnalités d'IA sur le Web reposent sur des serveurs, l'IA côté client s'exécute directement dans le navigateur de l'utilisateur. Cela offre des avantages tels que la faible latence, la réduction des coûts côté serveur, l'absence de clé API, une confidentialité accrue pour les utilisateurs et l'accès hors connexion. Vous pouvez implémenter une IA côté client qui fonctionne dans tous les navigateurs avec des bibliothèques JavaScript telles que TensorFlow.js, Transformers.js et MediaPipe GenAI.
L'IA côté client pose également des défis en termes de performances: les utilisateurs doivent télécharger plus de fichiers et leur navigateur doit travailler plus dur. Pour que cela fonctionne correctement, tenez compte des points suivants:
- Votre cas d'utilisation L'IA côté client est-elle la solution idéale pour votre fonctionnalité ? Votre fonctionnalité fait-elle partie d'un parcours utilisateur critique ? Si oui, disposez-vous d'un plan de secours ?
- Bonnes pratiques pour le téléchargement et l'utilisation de modèles Pour en savoir plus, consultez la section suivante.
Avant le téléchargement du modèle
Bibliothèque Mind et taille du modèle
Pour implémenter l'IA côté client, vous avez besoin d'un modèle et généralement d'une bibliothèque. Lorsque vous choisissez la bibliothèque, évaluez sa taille comme vous le feriez avec n'importe quel autre outil.
La taille du modèle est également importante. La taille considérée comme importante pour un modèle d'IA dépend de plusieurs facteurs. 5 Mo peut être une règle empirique utile: c'est également le 75e centile de la taille médiane des pages Web. Un nombre plus souple serait 10 Mo.
Voici quelques points importants à prendre en compte concernant la taille du modèle:
- De nombreux modèles d'IA spécifiques à une tâche peuvent être très petits. Un modèle comme BudouX, qui permet de couper les caractères de manière précise dans les langues asiatiques, ne fait que 9,4 ko compressé en GZIP. Le modèle de détection de la langue de MediaPipe fait 315 Ko.
- Même les modèles de vision peuvent être de taille raisonnable. Le modèle Handpose et toutes les ressources associées représentent 13,4 Mo au total. Bien que cette valeur soit beaucoup plus élevée que la plupart des packages de front-end minifiés, elle est comparable à la page Web médiane, qui est de 2,2 Mo (2,6 Mo sur ordinateur).
- Les modèles d'IA générative peuvent dépasser la taille recommandée pour les ressources Web. DistilBERT, qui est considéré comme un très petit LLM ou un modèle de NLP simple (les avis divergent), pèse 67 Mo. Même les LLM de petite taille, comme Gemma 2B, peuvent atteindre 1,3 Go. Cela représente plus de 100 fois la taille de la page Web médiane.
Vous pouvez évaluer la taille de téléchargement exacte des modèles que vous prévoyez d'utiliser avec les outils de développement de vos navigateurs.
Optimiser la taille du modèle
- Comparez la qualité du modèle et les tailles de téléchargement. Un modèle plus petit peut avoir une précision suffisante pour votre cas d'utilisation, tout en étant beaucoup plus petit. Le réglage fin et les techniques de réduction de modèle permettent de réduire considérablement la taille d'un modèle tout en conservant une précision suffisante.
- Choisissez des modèles spécialisés dans la mesure du possible. Les modèles adaptés à une tâche spécifique ont tendance à être plus petits. Par exemple, si vous souhaitez effectuer des tâches spécifiques telles que l'analyse des sentiments ou de la toxicité, utilisez des modèles spécialisés dans ces tâches plutôt qu'un LLM générique.
Bien que tous ces modèles effectuent la même tâche, avec une justesse variable, leur taille varie considérablement: de 3 Mo à 1,5 Go.
Vérifier si le modèle peut s'exécuter
Tous les appareils ne peuvent pas exécuter de modèles d'IA. Même les appareils disposant de spécifications matérielles suffisantes peuvent rencontrer des difficultés si d'autres processus coûteux sont en cours d'exécution ou démarrés lorsque le modèle est utilisé.
En attendant qu'une solution soit disponible, voici ce que vous pouvez faire:
- Vérifiez la compatibilité avec WebGPU. Plusieurs bibliothèques d'IA côté client, y compris la version 3 de Transformers.js et MediaPipe, utilisent WebGPU. Pour le moment, certaines de ces bibliothèques ne reviennent pas automatiquement à Wasm si WebGPU n'est pas pris en charge. Vous pouvez atténuer ce problème en encapsulant votre code lié à l'IA dans une vérification de la détection des fonctionnalités WebGPU, si vous savez que votre bibliothèque d'IA côté client a besoin de WebGPU.
- Éliminer les appareils sous-alimentés Utilisez Navigator.hardwareConcurrency, Navigator.deviceMemory et l'API Compute Pressure pour estimer les capacités et la pression de l'appareil. Ces API ne sont pas compatibles avec tous les navigateurs et sont intentionnellement imprécises pour éviter l'empreinte digitale, mais elles peuvent toujours aider à exclure les appareils qui semblent très peu puissants.
Signaler les téléchargements volumineux
Pour les modèles volumineux, avertissez les utilisateurs avant le téléchargement. Les utilisateurs d'ordinateurs de bureau sont plus susceptibles d'accepter les téléchargements volumineux que les utilisateurs d'appareils mobiles. Pour détecter les appareils mobiles, utilisez mobile
à partir de l'API User-Agent Client Hints (ou la chaîne User-Agent si UA-CH n'est pas pris en charge).
Limiter les téléchargements volumineux
- Ne téléchargez que ce qui est nécessaire. Surtout si le modèle est volumineux, ne le téléchargez que lorsque vous êtes sûr que les fonctionnalités d'IA seront utilisées. Par exemple, si vous disposez d'une fonctionnalité d'IA de suggestions de saisie semi-automatique, ne la téléchargez que lorsque l'utilisateur commence à utiliser les fonctionnalités de saisie.
- Mettez explicitement le modèle en cache sur l'appareil à l'aide de l'API Cache pour éviter de le télécharger à chaque visite. Ne vous fiez pas uniquement au cache du navigateur HTTP implicite.
- Divisez le téléchargement du modèle en plusieurs parties. fetch-in-chunks divise un téléchargement volumineux en plusieurs parties.
Téléchargement et préparation du modèle
Ne pas bloquer l'utilisateur
Priorisez une expérience utilisateur fluide: autorisez les fonctionnalités clés à fonctionner même si le modèle d'IA n'est pas encore entièrement chargé.
Indiquer la progression
Lorsque vous téléchargez le modèle, indiquez la progression effectuée et le temps restant.
- Si les téléchargements de modèles sont gérés par votre bibliothèque d'IA côté client, utilisez l'état de progression du téléchargement pour l'afficher à l'utilisateur. Si cette fonctionnalité n'est pas disponible, envisagez d'ouvrir un problème pour la demander (ou de la proposer).
- Si vous gérez les téléchargements de modèles dans votre propre code, vous pouvez extraire le modèle par blocs à l'aide d'une bibliothèque, telle que fetch-in-chunks, et afficher la progression du téléchargement à l'utilisateur.
- Pour obtenir d'autres conseils, consultez les pages Bonnes pratiques concernant les indicateurs de progression animés et Concevoir pour les temps d'attente et les interruptions prolongés.
Gérer les interruptions réseau de manière fluide
Le téléchargement des modèles peut prendre plus ou moins de temps, en fonction de leur taille. Réfléchissez à la façon de gérer les interruptions de réseau si l'utilisateur passe hors connexion. Si possible, informez l'utilisateur d'une connexion interrompue et poursuivez le téléchargement une fois la connexion rétablie.
La connectivité capricieuse est une autre raison de télécharger par blocs.
Transférer des tâches coûteuses à un nœud de calcul Web
Les tâches coûteuses, telles que les étapes de préparation du modèle après le téléchargement, peuvent bloquer votre thread principal, ce qui entraîne une expérience utilisateur saccadée. Le transfert de ces tâches vers un nœud de calcul Web est utile.
Découvrez une démonstration et une implémentation complète basées sur un service worker:
Pendant l'inférence
Une fois le modèle téléchargé et prêt, vous pouvez exécuter une inférence. L'inférence peut être coûteuse en ressources de calcul.
Déplacer l'inférence vers un worker Web
Si l'inférence se produit via WebGL, WebGPU ou WebNN, elle repose sur le GPU. Cela signifie qu'il se produit dans un processus distinct qui ne bloque pas l'UI.
Toutefois, pour les implémentations basées sur le processeur (telles que Wasm, qui peut être une solution de secours pour WebGPU, si WebGPU n'est pas pris en charge), le transfert de l'inférence vers un nœud de calcul Web permet de maintenir la réactivité de votre page, comme lors de la préparation du modèle.
Votre implémentation peut être plus simple si tout votre code lié à l'IA (récupérer le modèle, préparer le modèle, inférence) se trouve au même endroit. Vous pouvez donc choisir un worker Web, que le GPU soit utilisé ou non.
Gérer les erreurs
Même si vous avez vérifié que le modèle doit s'exécuter sur l'appareil, l'utilisateur peut démarrer un autre processus qui consomme beaucoup de ressources par la suite. Pour atténuer ce problème:
- Gérer les erreurs d'inférence Encapsulez l'inférence dans des blocs
try
/catch
et gérez les erreurs d'exécution correspondantes. - Gérer les erreurs WebGPU, à la fois inattendues et GPUDevice.lost, qui se produit lorsque le GPU est effectivement réinitialisé en raison de difficultés de l'appareil.
Indique l'état de l'inférence
Si l'inférence prend plus de temps que ce qui semble immédiat, indiquez à l'utilisateur que le modèle réfléchit. Utilisez des animations pour faciliter l'attente et assurer à l'utilisateur que l'application fonctionne comme prévu.
Rendre l'inférence annulable
Autorisez l'utilisateur à affiner sa requête instantanément, sans que le système gaspille des ressources en générant une réponse que l'utilisateur ne verra jamais.