TensorFlow.js : Intégration du machine learning dans des applications web

Par yferrani, 2 mars, 2024
tensorflowjs

TensorFlow.js

Dans l'article précédent, je vous ai présenté TensorFlow , une bibliothèque populaire dédiée à l'apprentissage automatique. Saviez-vous qu'il existe une version spécifiquement conçue pour le développement web appelée TensorFlow.js ? TensorFlow.js est une bibliothèque dédiée au Machine Learning en JavaScript. C'est une librairie en constante expansion et c'est actuellement le Framework de Machine Learning de premier choix pour JavaScript.

Avec TensorFlow.js, vous avez la possibilité de :

  • Déployer des modèles existants.
  • Réentraîner des modèles.
  • Créer vos propres modèles en JavaScript.

Les applications que nous allons découvrir sont conçues à l'aide de modèles déjà existants et accessibles avec TensorFlow.js. Examinons de plus près deux applications web développées avec TensorFlow.js.

Move Mirror

Explication de l'application

Move Mirror est une application permettant d’explorer des images dans notre navigateur en se déplaçant. Le concept est simple : il suffit d’allumer sa webcam, on fait un mouvement, et l'ordinateur affichera en temps réel des images de poses qui correspondant à la nôtre.

L'équipe du Google Creative Lab a travaillé sur la conception et l'inspiration de Move Mirror, utilisant la correspondance de poses pour créer une expérience unique et réactive en temps réel dans le navigateur.

Utilisation du modèle PoseNet

PoseNet, développé par Google, est un modèle d'apprentissage automatique qui détecte les positions des différentes parties du corps humain dans une image, permettant ainsi de suivre les poses humaines. Google a créé PoseNet dans le but de rendre cette technologie accessible sur le Web via TensorFlow.js. Les développeurs peuvent maintenant intégrer PoseNet dans leurs projets Web en incluant simplement deux balises de script dans leur fichier HTML :

Image retirée.

L’application Move Mirror utilise le modèle PoseNet afin de donner aux utilisateurs la possibilité d’explorer des images qui correspondent à leurs poses. Toutes les données qui sont créées à partir de vidéos diverses, comprennent environ 80 000 images capturées et traitées grâce à PoseNet.

Démonstration

Vous pouvez aller voir des exemples d’utilisation de l’application en allant vers le site de move mirror . 

Image retirée.

Holobooth

Explication de l'application

Holoboothest est un photobooth virtuel développé en Flutter et Firebase, qui utilise TensorFlow.js pour l'apprentissage automatique. Les utilisateurs peuvent choisir des avatars et changer l'univers virtuel où ils se trouvent, comme une plage tropicale, l'océan, etc. Grâce au machine learning, l'animation d'un avatar change en fonction des expressions faciales de l'utilisateur.

Utilisation du modèle FaceMesh

Cette application utilise le modèle faceMesh de TensorFlow.js pour détecter les visages. Le modèle MediaPipe FaceMesh détecte en temps réel 468 points de repères faciaux en 3D, offrant ainsi la possibilité de suivre les caractéristiques du visage de l'utilisateur. Ces informations incluent si l'utilisateur est dans le cadre, l'état de leurs yeux ou de leur bouche, et bien plus encore. Ces repères sont essentiels pour permettre aux avatars de refléter fidèlement les expressions faciales de l'utilisateur.

Démonstration

Vous pouvez tester l'application sur le site officiel de holobooth .

Image retirée.Image retirée.

Pour aller plus loin

Créez votre premier modèle sans coder avec Teachable Machine

Teachable Machine, développé avec tensorflow.js,  vous permet de créer des modèles sans avoir besoin de connaissances avancées en mathématiques. C'est une manière assez simple de générer des modèles pour vos applications.

Teachable Machine offre actuellement la possibilité de créer trois types de modèles :

  • Modèles d'images pour la reconnaissance de formes, de couleurs, de personnes, etc.
  • Modèles audio pour la reconnaissance de différents types de sons.
  • Modèles de postures pour la reconnaissance de positions.

Je vous invite à aller voir le site de Teachable Machine pour en apprendre d'avantage. 

Voici deux exemples de projets faits avec Teachable machine que vous pouvez essayer: 

Créez votre propre Teachable Machine - Guide

Vous pouvez également créer votre propre teachable machine avec Tensorflow.js . Google a mis à disposition un  guide sur comment le faire.

Sources

Étiquettes

Commentaires1

aelatris

il y a 11 mois 3 semaines

Salut,

Ton article est très intéressant. Je voulais savoir quel est l'impact prévu de l'application Move Mirror sur la façon dont les utilisateurs interagissent avec les images en ligne ?