스크립트
00:00:00Google vient de publier une nouvelle bibliothèque d'exécution qui vous permet de faire tourner des modèles d'IA et d'apprentissage automatique
00:00:05directement dans le navigateur, à des vitesses proches du natif. Elle s'appelle LiteRT.js et c'est très impressionnant. Donc,
00:00:12dans cette vidéo, nous allons découvrir LiteRT.js, voir comment cela fonctionne, et nous allons le tester en
00:00:18créant une application de capture de mouvement 3D en temps réel qui tourne entièrement dans le navigateur. Ça va être
00:00:24très amusant, alors plongeons dans le vif du sujet. Qu'est-ce que LiteRT.js exactement ? Eh bien, c'est une liaison JavaScript pour
00:00:36LiteRT, leur moteur d'exécution d'inférence sur appareil, qui fait tourner des modèles sur Android, iOS et du matériel
00:00:42embarqué depuis des années maintenant. Mais LiteRT.js apporte ce même moteur dans le navigateur via WebAssembly en utilisant
00:00:50le paquet npm principal de LiteRT.js. Et voici ce qui rend LiteRT.js différent. Google a déjà une
00:00:58bibliothèque d'apprentissage automatique pour le navigateur, appelée TensorFlow.js, qui existe depuis des années. Mais
00:01:04TensorFlow.js s'exécute sur des noyaux basés sur JavaScript, et c'est un goulot d'étranglement majeur. Vous voyez, les noyaux JavaScript
00:01:11ne peuvent pas exploiter pleinement le CPU ou le GPU comme le ferait un moteur d'exécution natif. TensorFlow.js a donc toujours été à la traîne
00:01:19par rapport aux performances des applications natives. Mais LiteRT.js utilise WebAssembly et est livré avec son propre noyau optimisé.
00:01:27Ainsi, le même moteur natif qui alimente l'inférence sur Android et iOS est compilé en WASM, puis exposé à
00:01:34LiteRT.js. Vous n'obtenez donc plus une couche d'abstraction orientée Web, mais vous bénéficiez réellement
00:01:40d'un moteur d'exécution véritablement optimisé. Cela se voit aussi dans leur architecture back-end. LiteRT.js possède
00:01:47trois niveaux différents qui lui permettent de bien fonctionner sur les CPU, les GPU et même les NPU. Sur le côté CPU,
00:01:55il utilise XNNPack, la bibliothèque de noyaux CPU optimisée de Google, qui est multi-threadée avec un support SIMD assoupli.
00:02:04C'est votre solution de secours universelle qui fonctionnera partout, sans besoin de GPU. Mais pour les GPU,
00:02:11il utilise ML drift via WebGPU, et c'est là que réside la véritable performance. Il utilise des noyaux GPU
00:02:18natifs, donc les shaders ne sont plus rendus via une sorte d'orchestration JavaScript. Et pour
00:02:24les NPU, il y a WebNN, qui est encore expérimental dans Chrome et Edge, et qui cible le matériel
00:02:31de traitement neuronal dédié pour une inférence efficace en énergie. Et selon les propres benchmarks de Google,
00:02:37réalisés sur un MacBook Pro 2024 avec puce M4, il semble avoir une inférence trois fois plus rapide que
00:02:45les autres moteurs web sur CPU et GPU pour les modèles de vision et d'audio. Et lors de l'exécution de charges de travail comme
00:02:53le suivi d'objets, la transcription audio ou la manipulation d'images sur GPU ou NPU, plutôt que sur CPU,
00:03:00nous obtenons des gains de performance allant de 5 à 60 fois plus rapides,
00:03:07selon la tâche. Et il est important de noter qu'il s'agit du meilleur scénario possible. Google reconnaît également
00:03:13ce fait. Vos résultats peuvent varier en fonction de votre GPU spécifique,
00:03:18du bridage thermique et de la qualité des pilotes. Et il y a une autre chose importante pour ce moteur.
00:03:24Si vous avez déjà des modèles que vous utilisez sur PyTorch ou TensorFlow, si vous avez un fichier
00:03:30TF Lite existant, LiteRT.js peut en fait l'exécuter directement. Et si vous êtes sur PyTorch, il existe aussi LiteRT
00:03:38Torch, un chemin de conversion qui transforme votre modèle directement en .TF Lite. De plus, il y a un quantificateur
00:03:44AI Edge pour réduire la taille des modèles sans réécriture complète. Ainsi, les flux de travail hérités que vous utilisiez sur
00:03:50TensorFlow.js peuvent facilement être portés vers le nouveau LiteRT.js, ce qui est super cool. Mais que pouvez-vous
00:03:58vraiment en faire ? Eh bien, Google a quelques démos très sympas qui vous donnent une idée de l'étendue.
00:04:03Vous pouvez faire de la détection d'objets YOLO en temps réel, de l'estimation de profondeur monoculaire avec la
00:04:09bibliothèque Depth Anything qui transforme le flux de votre webcam en un nuage de points 3D en direct. Et cela peut aussi faire de la
00:04:16mise à l'échelle d'image avec la bibliothèque Real-ESRGAN. Toutes ces démos tournent entièrement côté client, sans
00:04:23back-end, sans API, directement dans votre navigateur. Et ils ont déjà annoncé la suite,
00:04:29LiteRT.LM.js. Et ce sera pour faire tourner des modèles de langage complets localement dans le navigateur.
00:04:36Donc ce n'est pas seulement pour la vision par ordinateur. Bientôt, cela offrira aussi l'inférence LLM locale.
00:04:42Très bien, tout ça semble génial, mais je voulais tester moi-même pour voir à quel point c'est puissant.
00:04:48Pour cette démo, j'ai décidé de créer une application de capture de mouvement réelle qui utilise votre webcam pour
00:04:55l'estimation de pose en temps réel. Elle tourne aussi entièrement sur votre navigateur, côté client, et hors ligne sans
00:05:03aucune contrainte. J'ai donc codé cette application sur Cloud Code en utilisant le nouveau modèle Fable 5. Voici le résultat final.
00:05:10Et au fait, si vous voulez télécharger ce dépôt et jouer avec vous-même, j'ai ajouté un lien vers
00:05:15le projet dans la description ci-dessous. Ici, LiteRT.js tourne dans le navigateur en utilisant un modèle BlazePose
00:05:23avec 33 points de repère corporels, pilotant un personnage 3D en temps réel en utilisant 3.js. Il n'y a pas de serveur back-end et
00:05:31tout ce que vous voyez se passe sur cette machine en ce moment, complètement hors ligne. On peut voir ici que sur le
00:05:38CPU, nous avons une moyenne d'environ 38 FPS avec une inférence de 23,3 millisecondes. Et on peut aussi voir que l'estimation
00:05:47de pose est un peu à la traîne. Mais maintenant, si nous passons à la version WebGPU, nous voyons que nous obtenons
00:05:54maintenant un solide 120 images par seconde avec une inférence de 8,4 millisecondes. Et l'estimation de pose est aussi un peu
00:06:02plus rapide. Cela représente environ un bond de trois fois le taux de rafraîchissement et une division par 2,8 du temps d'inférence, ce qui
00:06:10correspond aux chiffres de Google, bien que ce soit dans la fourchette basse de ce qu'ils ont publié. Mais nous devons
00:06:16prendre en considération que BlazePose est vraiment un petit modèle. Donc il y a moins de calculs bruts pour le GPU
00:06:23à traiter. Mais même ainsi, déplacer les calculs de tenseurs du CPU vers le WebGPU réduit la latence
00:06:30suffisamment pour que le décalage soit nettement moindre. J'ai aussi ajouté une fonctionnalité pour enregistrer votre capture de pose,
00:06:36l'animation, et l'exporter en JSON ou en fichier de capture de mouvement BVH, puis l'ouvrir dans
00:06:44un logiciel comme Blender et recibler cette animation sur votre propre personnage personnalisé. Comme vous pouvez le voir ici,
00:06:49ce n'est pas parfait. Les mouvements ne sont pas très détaillés ou raffinés. C'est donc encore un travail en
00:06:56cours. Mais c'est super cool d'avoir pu faire fonctionner cette version initiale en seulement 10 minutes
00:07:01en utilisant le nouveau LiteRT.js. Voilà, les amis. C'était LiteRT.js en résumé. C'est
00:07:08honnêtement incroyable de voir à quel point WebAssembly a repoussé les capacités d'exécution d'applications complexes
00:07:14dans le navigateur. Et cette nouvelle bibliothèque LiteRT.js prouve vraiment que parfois, JavaScript peut
00:07:21être un réel goulot d'étranglement pour atteindre ces vitesses proches du natif. Je suis donc super impressionné par cette
00:07:27bibliothèque et j'ai hâte d'essayer LiteRT.js quand elle sortira enfin plus tard cette année. Mais que pensez-vous
00:07:35de LiteRT.js ? L'avez-vous essayée ? Allez-vous l'utiliser ? Dites-le-nous dans les commentaires ci-dessous. Et les amis,
00:07:40si vous aimez ce type d'analyses techniques, faites-le-moi savoir en fracassant ce bouton “j'aime”
00:07:45sous la vidéo. Et n'oubliez pas non plus de vous abonner à notre chaîne. C'était Andres de
00:07:50BetterStack, et je vous verrai dans les prochaines vidéos.