Reconnaître un visage utilisant JavaScript

Quelles sont les options? De nombreuses solutions existent pour l'apprentissage automatique.

Lorsque vous cherchez des moyens d'identifier les visages, vous trouvez une multitude de solutions. Beaucoup sont génériques, certains sont des interfaces des cadres existants. Pour JavaScript, vous en avez quelques-uns à choisir. Vous pouvez même être confus par l'éventail de solutions. Même pour la reconnaissance faciale, vous avez plusieurs options. Beaucoup, la plupart en fait, sont pour Python, mais vous pouvez également en trouver quelques-uns en javascript. Les cadres qui visent spécifiquement la reconnaissance du visage sont le visage, JS et la reconnaissance du visage.js. Ce dernier est considéré comme obsolète. Le plus petit, en termes de code, est pico.JS avec environ 200 lignes de code, il peut détecter votre propre visage en utilisant votre webcam. Le code PICO est déjà livré avec un ensemble formé, ce qui signifie qu'il ne s'améliorera pas pendant que vous l'utilisez. Pour le curieux, les cascades de classification pré-formées sont disponibles sur leur référentiel GitHub. Si vous voulez le former vous-même, il y a une fonction d'apprentissage que vous pouvez utiliser. Ceci est un programme C disponible sur github. C'est un long processus à terminer en faire un exercice intéressant plutôt que quelque chose d'utile. L'une des API les plus intéressantes est Face-API.JS, celui-ci utilise TensorFlow.JS pour la partie d'apprentissage automatique.

Comment ça marche?

L'exemple le plus simple de l'apprentissage automatique est une paire de paramètres tels que les pétales de la fleur d'iris. C'est l'ensemble de données initial le plus courant lorsque vous souhaitez commencer à apprendre l'apprentissage de l'apprentissage. Les données peuvent être résumées en tables simples.

Longueur sépale	Sepal Largeur	Longueur de pétale	Largeur des pétales	Classe
5.1	3.5	1.4	0.2	Iris setosa
4.9	3.0	1.4	0.2	Iris setosa
7.0	3.2	4.7	1.4	Iris versicolor
6.4	3.2	4.5	1.5	Iris-versicol
6.9	3.1	4.9	1.5	Iris-versicol
6.3	3.3	6.0	2.5	Iris-virginica
5.8	2.7	5.1	1.9	Iris-virginica

Comme vous pouvez le voir sur la table, il est maintenant possible de trouver les tailles qui correspondent le mieux à une certaine fleur. Ce n'est pas une vérité absolue, mais elle peut devenir très précise avec suffisamment de points de données.

La question devient maintenant: comment représentez-vous une image comme une longue liste de valeurs? Ou un visage d'ailleurs? Eh bien, la nouvelle est que vous convertiz l'image en valeur de l'intensité de chaque pixel. À partir de là, vous pouvez décider où vont les lignes et les points qui représentent un visage. Ce qu'un visage est réellement déterminé par un modèle pré-formé. Si vous l'appliquez à un certain nombre de photos de la personne que vous essayez de détecter, alors un tableau similaire à celui de l'iris ci-dessus peut être utilisé pour déterminer quel visage il s'agit.

Comment ça marche réellement est un peu plus complexe que ça. Pour que vous créiez votre propre solution, vous devez utiliser une bibliothèque faite pour cela. Heureusement, il existe de nombreuses solutions gratuites et open source disponibles.

Quelles sont les options?

Il existe de nombreuses bibliothèques pour utiliser JavaScript, l'une est face-API.js. Les autres peuvent des choix plus compétents, mais celui-ci a une page de démonstration très simple. Vous pouvez télécharger la page de démonstration à partir de github. La page contient la bibliothèque et les pages de démonstration. Si vous souhaitez commencer à un niveau plus profond, vous pouvez consulter TensorFlow et Dlib. Face-API utilise TensorFlow comme bibliothèque d'apprentissage automatique.

Une fois que vous avez tout téléchargé à partir de GitHub, vous pouvez utiliser la bibliothèque d'exemples pour explorer différentes méthodes pour la reconnaissance du visage.

Quels sont les cas d'utilisation?

Dans l'industrie, la reconnaissance du visage est utilisée pour le contrôle d'accès, les contrôles de fréquentation et d'autres cas liés à la sécurité. Dans les réseaux de médias sociaux, votre visage peut être étiqueté afin que vous puissiez rechercher votre visage plutôt que votre nom. Pour votre propre système, vous pouvez l'utiliser pour accéder à votre ordinateur et même contrôler certaines de vos applications.

Que développons-nous?

Nous créons un système simple pour détecter un visage.

Pour détecter un visage, vous devez avoir le logiciel, les images et un modèle formé. Vous pouvez former le modèle vous-même et vous devriez, mais pour votre tâche spécifique, vous pouvez également rétracuer un modèle existant. Dans cet exemple, le modèle est pré-formé et téléchargé.

Pour que le code fonctionne, vous devez collecter l'échantillon. Dans ce cas, nous utilisons une webcam, assez simple avec HTML5. Pour ce faire, ajoutez une balise vidéo dans le code HTML.

Droit simple? Mais attendez que vous deviez appeler cela à partir de votre javascript également.

const vidéo = document.GetElementByid («Videoid»)

Vous pouvez maintenant utiliser la constante pour mettre votre flux dans le code JavaScript. Créer une fonction startvideo.

fonction startVideo ()
navigateur.Mediadevices.getUserMedia (
vidéo: ,
stream => vidéo.srcobject = stream,
err => console.erreur (err)
)

Ceci est une fonction générale qui n'appelle pas la vidéo, vous devez définir une fonction qui appelle le flux entrant. Une façon de prendre le flux est d'utiliser des fonctions de promesse.

Promesse.tous([
facapi.nets.minuscule.chargefromuri ('/ modèles'),
facapi.nets.Facelandmark68net.chargefromuri ('/ modèles'),
facapi.nets.faceRecognitionNet.chargefromuri ('/ modèles'),
facapi.nets.facexpressionnet.chargefromuri ('/ modèles')
]).alors (startVideo);

L'énoncé de promesse ci-dessus exécutera désormais la fonction startvideo lorsque le flux sera disponible. Enfin, l'auditeur d'événements vidéo ci-dessous exécutera les fonctions disponibles à partir de l'API Face.

vidéo.addEventListener ('play', () =>
const Canvas = facapi.createCanvasFrommedia (vidéo);
document.corps.ajouter (toile);
const affiffize = largeur: vidéo.Largeur, hauteur: vidéo.hauteur ;
facapi.MatchDimensions (Canvas, DisplaySize);
setInterval (async () =>
Détections const = attendre FACEAPI.Detectallfaces (vidéo, nouveau
facapi.TinyfaceDetectorOptions ()).avec FaceLandmarks ().withFaceExpressions ();
const ResizedDections = FACEAPI.Resizertesults (détections, affichage);
toile.getContext ('2D').ClearRect (0, 0, toile.largeur, toile.hauteur);
facapi.dessiner.DrawDections (toile, détections redimensionnées);
facapi.dessiner.Drawfacelandmarks (toile, détections de résumé);
facapi.dessiner.DrawFaceExpressions (Canvas, ResidizedDections);
, 100);
);

De quoi avez-vous besoin dans votre environnement de développement?

Puisque nous utilisons JavaScript, nous avons besoin de NodeJ, de nœud et de NPM (ou similaire). Votre meilleure tactique ici est de créer votre répertoire de développement, puis de cloner le référentiel à partir de GitHub. Les exemples sont dans le répertoire des exemples, alors vous déplacez là-bas.

$ CD Exemples / Exemple-Browser /

À l'intérieur du répertoire, vous devez installer les packages à l'aide de NPM.

$ d'installation de NPM

Puisque vous êtes dans le répertoire où vous avez téléchargé Face-API.JS, NPM trouvera ce dont vous avez besoin pour télécharger. Ensuite, vous pouvez démarrer la démo et l'ouvrir dans votre navigateur.

$ npm start

La dernière ligne de la sortie montre le port que vous devez utiliser dans votre navigateur. Ces exemples sont généralement de la distribution de la théorie du big bang, mais vous pouvez charger sur vos propres photos et même utiliser la webcam pour déterminer votre âge.

Ces démos sont amusantes avec lesquelles jouer, mais la valeur réelle est que le code est disponible pour étudier.

Dans les fichiers, le JavaScript est séparé dans un répertoire séparé pour faciliter l'utilisation. Pour que vos pages fonctionnent, vous devez charger dans l'API et tous les scripts que vous allez utiliser.

Conclusion

Ceci est un très court exemple de la façon d'utiliser les API existantes pour détecter les visages et les reconnaître. La partie vraiment fascinante est de trouver des applications utiles pour la technologie. Pourquoi allez-vous l'utiliser? Accès à votre propre machine ou simplement à quelques données ou applications spécifiques?