Software Craftmanship

Reconnaissance faciale dans vos applications web avec face-api.js

Découvrez nos jobs
Vous ambitionnez de devenir Tech Lead ou de faire du conseil de haut-niveau ? Nous avons des challenges à votre hauteur !

L’IA, le machine learning et l’intelligence artificielle sont très en vogue depuis quelques années. En tant que développeur ou architecte technique, nous avons de plus en plus de demandes pour intégrer des fonctionnalités de machine learning dans nos projets. Par contre le coté « mathématique » de la chose peut s’avérer très complexe : On parle de modèles MTCNN, SDD Mobilenet v1, CNN, Tensors, … le tout souvent codé en python.

Heureusement il existe des API de haut niveau permettant la mise en oeuvre de machine learning avec des solutions clés en main chez les grands acteurs du cloud (Google, AWS, Azure, IBM, …) ainsi que des solutions disponibles dans votre langage de programmation de référence.

Aujourd’hui je vais vous présenter Face-api.js, une solution de reconnaissance faciale utilisable dans les applications web et NodeJs, basée sur TensorFlow.js qui est lui même basé sur TensorFlow … Et Tensorflow alors c’est quoi ? Il s’agit de l’outil de référence dans le domaine du machine learning, développé et placé dans le domaine Open Source par Google : https://www.tensorflow.org/

L’avantage de Face-api est que cette solution va vous mettre à disposition une boite à outil javascript spécialisée dans la reconnaissance faciale sur des images ou des vidéos : Détection des visages ainsi que de la forme des visages (ce qui permet par exemple à Snapchat d’appliquer les filtres), estimation du sexe et de l’age, reconnaissance des personnes basé sur des photos.

Assez discuté, passons au code. Nous allons réaliser une petite application qui va effectuer de la reconnaissance faciale depuis la vidéo de votre webcam.

Commencez par télécharger Face-Api depuis ce lien : https://github.com/justadudewhohacks/face-api.js/archive/master.zip

Créez un nouveau dossier pour votre application, avec un fichier index.html, le fichier face-api.min.js depuis le dossier dist, ainsi que le dossier weights. C’est ce dossier qui va contenir les différents « modèles » de machine learning. Attention, ce dossier est assez volumineux.

Dans le fichier index.html, on va utiliser jquery ainsi que Face-Api :

On va récupérer le flux vidéo de la webcam en utilisant un objet Video :

On va récupérer le flux vidéo de la webcam en utilisant un objet Video :

Le Canvas va être utilisé pour afficher le résultat de la reconnaissance faciale (des « boites » qui encadrent les visages).

Au chargement de la page, on va démarrer le flux vidéo :

Il faut afficher cette page index.html en passant par un serveur web. Le plus simple est d’utiliser http.server, un script python. Dans le dossier de votre application, il suffit de lancer :

Et votre application sera disponible sur http://localhost:8000

Si tout se passe bien, vous devriez avoir une page avec la vidéo de votre webcam (après avoir autorisé l’utilisation de la webcam). En cas de problème, il faudra consulter les erreurs dans la console javascript.

On va maintenant charger un modèle de reconnaissance faciale. Dans la fonction run, on ajoute :

Tiny Face Detector est un modèle performant et de taille assez réduite, idéal pour les applications web.

Il est possible de configurer ce modèle :

inputSize correspond à la taille de traitement de l’image par Tensorflow : Plus la taille est petite, plus le traitement sera rapide et moins il sera précis.

SscoreThresold permet d’ignorer les résultats inférieurs à une valeur. J’ai oublié le plus important : Le résultat d’un traitement de machine learning est souvent caractérisé par un taux de confiance dans le résultat qui varie de 0 à 1. Face-Api va reconnaître un ou des visages et donner une note à ses prédictions.

Ensuite on utiliser la fonction detectSingleFace qui va essaye de trouver un seul visage, dans la fonction onPlay() :

Cette fonction nous retourne un tableau de résultats, que nous allons afficher au dessus de notre video. Face-api fournit des fonctions permettant de faciliter ce traitement.

Dans un premier temps il faut redimensionner le canvas à la même taille que notre video :

Puis on affiche les détections sur le canevas :

Puis on va boucler sur la fonction onPlay toute les 150 ms :

On recharge notre application, on lance la webcam et voila : les visages sont mis en évidence avec un encadré bleu, avec la probabilité de reconnaissance :

Nous allons ajouter les fonctionnalités suivantes : Détection des formes du visage (nez, bouche, …), estimation de l’age et du sexe et évaluation de l’humeur de la personne (heureuse, triste, …).

Pour commencer il faut charger les modèles :

On charge 3 modèles supplémentaires : faceLandmark pour la reconnaissance de la forme des visages, faceExression et ageGender pour les expressions du visage, l’age et le sexe.Puis on modifie la fonction de détection des visages pour activer ces 3 fonctionnalités :

Et finalement on va modifier la fonction d’affichage des résultats :

On recharge la page, et désormais on affiche l’expression du visage, ses formes ainsi qu’une estimation du sexe et de l’âge :

Voilà pour cette introduction au framework face-api.js, amusez vous bien avec ce beau projet.

0