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 un 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
Taille du modèle et de la bibliothèque Mind
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. Ce qui est considéré comme vaste pour un modèle d'IA dépend de deux 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 briser des caractères de manière précise dans les langues asiatiques, ne nécessite que 9,4 Ko avec 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 taille soit beaucoup plus importante que celle de la plupart des packages d'interface réduits, elle est comparable à la page Web médiane, qui fait 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 offrir une justesse suffisante pour votre cas d'utilisation, tout en étant beaucoup plus petit. L'affinage et les techniques de minification du modèle permettent de réduire considérablement la taille d'un modèle tout en maintenant une justesse 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 précision 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.
- Excluez les appareils qui ne sont pas assez puissants. 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 empêcher le fingerprinting, mais elles peuvent tout de même 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 le nécessaire. Surtout si le modèle est volumineux, ne le téléchargez qu'une fois que 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 en cache explicitement le modèle sur l'appareil à l'aide de l'API Cache, pour éviter de le télécharger à chaque visite. Ne vous fiez pas seulement au cache de 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
Privilégiez une expérience utilisateur fluide en permettant aux fonctionnalités clés de 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 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 récupérer le modèle en fragments à 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é irrégulière est une autre raison de télécharger les données par fragments.
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.
Rechercher une démonstration et une implémentation complète basée sur un nœud de calcul Web:
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 lancer par la suite un autre processus qui consomme beaucoup de ressources. Pour atténuer ce problème :
- Gérer les erreurs d'inférence Placez l'inférence dans des blocs
try/catchet gérez les erreurs d'exécution correspondantes. - Gérez les erreurs WebGPU, inattendues et GPUDevice.lost, qui se produisent lorsque le GPU est réinitialisé en raison de problèmes sur l'appareil.
Indique l'état de l'inférence
Si l'inférence prend plus de temps qu'immédiatement, signalez à l'utilisateur que le modèle réfléchit. Utilisez des animations pour alléger l'attente et vous assurer que l'application fonctionne comme prévu.
Rendre l'inférence annulable
permettre à l'utilisateur d'affiner sa requête à la volée, sans que le système ne gaspille des ressources et génère une réponse que l'utilisateur ne verra jamais ;