Détection du visage sur le Web avec face-api.js

Les navigateurs Web deviennent de plus en plus puissants, et la complexité des sites Web et des applications Web augmente également. Ce qui a obligé un supercalculateur à faire il y a des décennies est désormais possible avec un seul smartphone. La détection du visage en fait partie.

Les capacités de détection et d'analyse du visage sont très utiles car elle nous permet d'ajouter des fonctionnalités intelligentes. Pensez à brouiller automatiquement les visages (comme Google Maps), à panorquer et à zoomer les images de webcam pour se concentrer sur les personnes (comme Microsoft Team), à vérifier les passeports, à ajouter des filtres amusants (comme Instagram et Snapchat) et plus multifonctionnels. Mais avant de pouvoir faire tout cela, nous devons d'abord trouver le visage!

face-api.js est une bibliothèque qui permet aux développeurs d'utiliser la détection du visage dans leurs applications sans fond dans l'apprentissage automatique.

Le code de ce tutoriel peut être trouvé sur GitHub.

points clés

• face-api.js est une bibliothèque qui permet aux développeurs d'utiliser la détection du visage dans leurs applications Web sans fond dans l'apprentissage automatique. Il peut détecter les visages, estimer diverses fonctionnalités au visage et même identifier qui est la personne sur la photo.
• Cette bibliothèque utilise Tensorflow.js, une bibliothèque d'apprentissage automatique JavaScript populaire pour créer, entraîner et utiliser des réseaux de neurones dans un navigateur. Cependant, il résume tout cela dans une API intuitive, ce qui facilite l'utilisation.
• face-api.js est parfait pour les projets amateurs, les expériences et même les MVP. Cependant, cela peut affecter les performances et les développeurs peuvent avoir besoin de choisir entre la bande passante et les performances ou la précision.
• Bien que face-api.js soit un outil puissant, il convient de noter que l'intelligence artificielle est bonne pour amplifier les biais. Par conséquent, les développeurs devraient utiliser cette technologie avec prudence et utiliser un groupe de test diversifié pour des tests approfondis.

Détection du visage à l'aide d'apprentissage automatique

La détection d'objets (comme les visages humains) est assez compliquée. Pensez-y: peut-être que nous pourrions écrire un programme qui scanne des pixels pour trouver les yeux, le nez et la bouche. Cela peut être fait, mais il est en fait impossible de le rendre complètement fiable car il existe de nombreux facteurs à considérer. Pensez aux conditions d'éclairage, aux poils du visage, aux énormes différences de forme et de couleur, de maquillage, d'angles, de masques et plus encore.

Cependant, les réseaux de neurones sont bons pour faire face à de tels problèmes et peuvent généraliser pour s'adapter à la plupart, sinon à tous, des conditions. Nous pouvons créer, former et utiliser des réseaux de neurones dans un navigateur à l'aide de TensorFlow.js (une bibliothèque d'apprentissage automatique JavaScript populaire). Cependant, même si nous utilisons un modèle pré-entraîné standard, nous devons toujours approfondir la façon de fournir des informations à Tensorflow et comment la sortie est interprétée. Si vous êtes intéressé par les détails techniques de l'apprentissage automatique, consultez "les débutants pour l'apprentissage automatique avec Python".

face-api.js a vu le jour. Il résume tout cela dans une API intuitive. Nous pouvons passer des éléments IMG, Canvas ou Video DOM, et la bibliothèque renverra un ou un ensemble de résultats. face-api.js peut détecter les visages et estimer diverses caractéristiques dans les visages, comme indiqué ci-dessous.

• Détection du visage: obtenir une ou plusieurs limites de face. Ceci est très utile pour déterminer la position et la taille d'un visage dans l'image.
• Détection de point de fonction du visage: Obtenez la position et la forme des sourcils, des yeux, du nez, de la bouche et des lèvres et du menton. Cela peut être utilisé pour déterminer l'orientation du visage ou pour projeter la figure dans une zone spécifique, comme la barbe entre le nez et les lèvres.
• Reconnaissance du visage: Déterminez qui est la personne sur la photo.
• Détection de l'expression du visage: Obtenez des expressions à partir des visages. Veuillez noter que les résultats peuvent varier d'une culture à l'autre.
• Test d'âge et de sexe: obtenir l'âge et le sexe des visages. La classification du «genre» classe les visages comme une femme ou un homme, qui ne révèle pas nécessairement leur sexe.

Avant d'utiliser ce contenu en dehors des expériences, veuillez noter que l'IA est bonne pour amplifier les biais. La classification des sexes fonctionne bien pour les personnes cisgenres, mais elle ne peut pas détecter le sexe de mon ami non binaire. Il reconnaît les Blancs la plupart du temps, mais ne parvient souvent pas à détecter les personnes de couleur.

Soyez très prudent lorsque vous utilisez cette technologie et utilisez une équipe de test diversifiée pour des tests approfondis.

Installation

Nous pouvons installer face-api.js via NPM:

<code>npm install face-api.js
</code>

Cependant, pour éviter la configuration de l'outil de construction, j'inclurai le package UMD via unbulg.org:

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

Après cela, nous devons télécharger le modèle pré-entraîné correct dans le référentiel de la bibliothèque. Déterminez ce que nous voulons savoir sur le visage et utilisez la section des modèles disponibles pour déterminer quels modèles sont nécessaires. Certaines fonctionnalités peuvent utiliser plusieurs modèles. Dans ce cas, nous devons choisir entre la bande passante / les performances et la précision. Comparez les tailles de fichiers des différents modèles disponibles et sélectionnez le modèle qui, selon vous, est le meilleur pour votre projet.

Vous ne savez pas quels modèles vous avez besoin pour une utilisation? Vous pouvez revenir à cette étape plus tard. Lorsque nous utilisons l'API sans charger le modèle requis, une erreur est lancée, indiquant le modèle que la bibliothèque attend.

Nous pouvons maintenant utiliser l'API face-API.js.

Exemple

construisons quelque chose!

Pour l'exemple suivant, j'utiliserai cette fonction pour charger une image aléatoire à partir de la source non stash:

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

images recadrées

Vous pouvez trouver le code de cette démo dans le référentiel GitHub inclus.

Tout d'abord, nous devons sélectionner et charger le modèle. Pour recadrer une image, nous avons seulement besoin de connaître la boîte de délimitation du visage, donc la détection du visage est suffisante. Nous pouvons le faire avec deux modèles: le modèle SSD MobileNet V1 (légèrement inférieur à 6 Mo) et le modèle de détecteur de visage minuscule (lent 200 Ko). En supposant que la précision n'est pas pertinente, car l'utilisateur peut également le recadrer manuellement. Supposons également que le visiteur utilise cette fonctionnalité sur une connexion Internet lente. Étant donné que nous nous concentrons sur la bande passante et les performances, nous choisirons le plus petit modèle de détecteur de visage minuscule.

Après avoir téléchargé le modèle, nous pouvons le charger:

<code>npm install face-api.js
</code>

Nous pouvons maintenant charger l'image et le passer à face-api.js. FACEAPI.DETECTALLFACES utilise le modèle SSD MobileNet V1 par défaut, nous devons donc passer explicitement New FACEAPI.TinyfaceDetectorOptions () pour le forcer à utiliser le modèle de détecteur de face minuscule.

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

Les faces variables contiennent désormais un tableau de résultat. Chaque résultat a une boîte et un attribut de score. Le score indique le degré de confiance que le réseau neuronal est en effet en face. L'attribut de boîte contient l'objet des coordonnées de face. Nous pouvons sélectionner le premier résultat (ou nous pouvons utiliser FACEAPI.DetectSingleFace ()), mais si l'utilisateur soumet une photo de groupe, nous voulons voir tous les visages de l'image recadrée. Pour ce faire, nous pouvons calculer la boîte de délimitation personnalisée:

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

Enfin, nous pouvons créer une toile et afficher le résultat:

<code>await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
</code>

Mettez emoji

Vous pouvez trouver le code de cette démo dans le référentiel GitHub inclus.

Pourquoi ne pas s'amuser un peu? Nous pouvons faire un filtre qui place une bouche emoji (?) Sur tous les yeux. Pour trouver des points de fonctionnalité oculaires, nous avons besoin d'un autre modèle. Cette fois, nous sommes préoccupés par la précision, nous utilisons donc les modèles de détection de points de fonction SSD MobileNet V1 et 68 points.

De même, nous devons d'abord charger le modèle et l'image:

<code>const image = await loadRandomImage();
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
</code>

Pour obtenir des points de fonctionnalité, nous devons ajouter l'appel de fonction withfaceLandmarks () à détectalfaces () pour obtenir des données de points de fonctionnalité:

<code>const box = {
  // 将边界设置为其反向无穷大，因此任何数字都大于/小于
  bottom: -Infinity,
  left: Infinity,
  right: -Infinity,
  top: Infinity,

  // 给定边界，我们可以计算宽度和高度
  get height() {
    return this.bottom - this.top;
  },

  get width() {
    return this.right - this.left;
  },
};

// 更新边界框
for (const face of faces) {
  box.bottom = Math.max(box.bottom, face.box.bottom);
  box.left = Math.min(box.left, face.box.left);
  box.right = Math.max(box.right, face.box.right);
  box.top = Math.min(box.top, face.box.top);
}
</code>

Comme la dernière fois, les visages contiennent une liste de résultats. En plus de la position du visage, chaque résultat contient également une liste des points d'origine des points de fonctionnalité. Pour obtenir les points de fonctionnalité corrects pour chaque fonctionnalité, nous devons trancher la liste des points. Parce que le nombre de points est fixé, j'ai choisi l'indice codé en dur:

<code>npm install face-api.js
</code>

Maintenant, nous pouvons commencer à dessiner des emojis sur l'image. Puisque nous devons le faire avec les deux yeux, nous pouvons mettre une fonctionnalité.eyeleft et une fonctionnalité .yeRight dans un tableau et les itérer sur eux pour exécuter le même code pour chaque œil. Il ne reste plus qu'à dessiner les emoji sur la toile!

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

Notez que j'ai utilisé des nombres magiques pour ajuster la taille de la police et la position du texte précise. Parce que les emojis sont Unicode et que la typographie sur le Web est bizarre (du moins pour moi), j'ajuste simplement les chiffres jusqu'à ce qu'ils se ressemblent presque. Une alternative plus puissante consiste à utiliser des images comme superpositions.

Résumé

face-api.js est une grande bibliothèque qui rend la détection et la reconnaissance du visage vraiment accessibles. Pas besoin de se familiariser avec l'apprentissage automatique et les réseaux de neurones. J'adore ces outils qui ont activé des fonctionnalités, et c'est certainement l'un d'entre eux.

D'après mon expérience, la reconnaissance du visage sur le Web peut affecter les performances. Nous devrons choisir entre la bande passante et les performances ou la précision. Les modèles plus petits sont certainement moins précis et manquera un visage dans certains des facteurs mentionnés précédemment, comme la lumière ou le visage insuffisant.

Microsoft Azure, Google Cloud et éventuellement d'autres entreprises fournissent une détection de visage dans le cloud. Parce que nous évitons de télécharger de grands modèles, la détection basée sur le cloud évite le chargement de la page lourde et est souvent plus précis car elle est souvent améliorée et peut même être plus rapide car le matériel est optimisé. Si vous avez besoin d'une grande précision, vous voudrez peut-être envisager un plan dont vous êtes satisfait.

Je recommande vraiment d'utiliser Face-API.js pour les projets amateurs, les expériences et peut-être MVP.

FAQ (FAQ) sur le visage api.js

Qu'est-ce que le visage api.js et comment cela fonctionne-t-il?

face api.js est une bibliothèque JavaScript qui utilise TensorFlow.js pour effectuer la détection du visage, la reconnaissance du visage et la détection de points de fonction du visage dans le navigateur. Il détecte et reconnaît les visages dans les images ou les flux vidéo en direct en utilisant des modèles d'apprentissage automatique. La bibliothèque fournit des API qui permettent aux développeurs d'effectuer des tâches telles que la détection de tous les visages dans une image, l'identification du visage d'une personne spécifique et l'identification des caractéristiques faciales telles que les yeux, le nez et la bouche.

Comment installer et utiliser Face API.js dans mon projet?

Pour installer la face api.js, vous pouvez utiliser NPM ou YARN. Une fois installé, vous pouvez importer la bibliothèque dans votre projet et commencer à utiliser son API. Cette bibliothèque fournit un ensemble complet d'exemples et de tutoriels pour vous aider à démarrer.

peut-il faire face à API.js pour être utilisé pour la détection et la reconnaissance du visage en temps réel?

Oui, le visage api.js peut être utilisé pour la détection et la reconnaissance du visage en temps réel. Cette bibliothèque fournit une API qui peut traiter les flux vidéo et détecter ou reconnaître les visages en temps réel. Cela le rend adapté aux applications telles que la surveillance, la vidéoconférence et l'installation interactive.

Quelles sont les exigences du système pour l'utilisation de face api.js?

face api.js nécessite un navigateur moderne qui prend en charge WebGL et WebAssembly. Il nécessite également des CPU et des GPU relativement puissants, car la détection et la reconnaissance du visage sont des tâches à forte intensité de calcul. Cependant, les exigences exactes dépendront du cas d'utilisation spécifique et du nombre de faces à traiter.

Dans quelle mesure le visage est-il précis pour détecter et identifier les visages?

La précision du visage api.js dépend de plusieurs facteurs, notamment la qualité de l'image ou de la vidéo d'entrée, des conditions d'éclairage et de la posture du visage. Cependant, la bibliothèque utilise le dernier modèle d'apprentissage automatique formé sur de grands ensembles de données, afin qu'il puisse atteindre une haute précision dans la plupart des conditions.

peut faire face à API.js détecter et reconnaître les visages dans différentes conditions d'éclairage et postures?

Oui, le visage api.js peut détecter et reconnaître les visages dans diverses conditions d'éclairage et postures. Cependant, comme tous les modèles d'apprentissage automatique, ses performances peuvent être affectées par des conditions d'éclairage extrêmes ou des postures anormales.

peut-il faire face à API.js pour être utilisé pour des projets commerciaux?

Oui, Face API.js est open source et peut être utilisé pour des projets personnels et commerciaux. Cependant, il est préférable de vérifier les conditions de licence avant d'utiliser une bibliothèque open source dans un projet commercial.

Comment améliorer les performances de face API.js dans mon application?

Il existe plusieurs façons d'améliorer les performances de FACE API.JS. Une façon consiste à optimiser l'image ou la vidéo d'entrée, par exemple en réduisant sa résolution ou en la convertissant en niveaux de gris. Une autre méthode consiste à affiner les paramètres de l'algorithme de détection et de reconnaissance du visage.

peut faire face à API.js reconnaître les visages dans des images ou des vidéos contenant plusieurs personnes?

Oui, le visage api.js peut détecter et reconnaître plusieurs faces dans la même image ou la même vidéo. Cette bibliothèque fournit une API à retourner des tableaux de face détectés, chacun avec sa propre boîte de limite et son résultat de reconnaissance.

peut faire face à API.js être utilisé avec d'autres bibliothèques ou frameworks JavaScript?

Oui, Face API.js peut être utilisé avec n'importe quelle bibliothèque ou cadre JavaScript. Il est conçu pour être flexible et facile à intégrer dans les projets existants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!