La tâche MediaPipe Face Detector vous permet de détecter des visages dans une image ou une vidéo. Vous pouvez l'utiliser pour localiser des visages et des traits du visage dans une image. Cette tâche utilise un modèle de machine learning (ML) qui fonctionne avec des images uniques ou un flux continu d'images. Elle génère les emplacements des visages, ainsi que les points clés suivants : œil gauche, œil droit, pointe du nez, bouche, tragus de l'œil gauche et tragus de l'œil droit.
Ces instructions vous expliquent comment utiliser Face Detector pour les applications Web et JavaScript. Pour en savoir plus sur les fonctionnalités, les modèles et les options de configuration de cette tâche, consultez la présentation.
Exemple de code
L'exemple de code pour Face Detector fournit une implémentation complète de cette tâche en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à commencer à créer votre propre application de détection de visages. Vous pouvez afficher, exécuter et modifier l'exemple Face Detector à l'aide de votre navigateur Web.
Configuration
Cette section décrit les étapes clés de la configuration de votre environnement de développement, en particulier pour utiliser Face Detector. Pour obtenir des informations générales sur la configuration de votre environnement de développement Web et JavaScript, y compris les exigences concernant la version de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code Face Detector est disponible via le package @mediapipe/tasks-vision
NPM MediaPipe. Vous pouvez
trouver et télécharger ces bibliothèques en suivant les instructions du guide de configuration de la plate-forme
Setup.
Vous pouvez installer les packages requis via NPM à l'aide de la commande suivante :
npm install @mediapipe/tasks-vision
Si vous souhaitez importer le code de la tâche via un service de réseau de diffusion de contenu (CDN), ajoutez le code suivant dans la balise <head> de votre fichier HTML :
<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Modèle
La tâche MediaPipe Face Detector nécessite un modèle entraîné compatible avec cette tâche. Pour en savoir plus sur les modèles entraînés disponibles pour Face Detector, consultez la section Modèles de la présentation de la tâche.
Sélectionnez et téléchargez un modèle, puis stockez-le dans le répertoire de votre projet :
<dev-project-root>/app/shared/models/
Créer la tâche
Utilisez l'une des fonctions createFrom...() de Face Detector pour préparer la tâche à exécuter des inférences. Utilisez la fonction createFromModelPath() avec un chemin d'accès relatif ou absolu au fichier de modèle entraîné.
Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la méthode createFromModelBuffer().
L'exemple de code ci-dessous montre comment utiliser la fonction createFromOptions() pour configurer la tâche. La fonction createFromOptions vous permet de personnaliser Face Detector avec des options de configuration. Pour en savoir plus sur les options de configuration, consultez la section Options de configuration.
Le code suivant montre comment créer et configurer la tâche avec des options personnalisées :
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
Options de configuration
Cette tâche comporte les options de configuration suivantes pour les applications Web et JavaScript :
| Nom de l'option | Description | Plage de valeurs | Valeur par défaut |
|---|---|---|---|
option_var_1_web_js |
Définit le mode d'exécution de la tâche. Il existe deux
modes: IMAGE : mode pour les entrées d'image unique. VIDEO : mode pour les frames décodées d'une vidéo ou d'une diffusion en direct de données d'entrée, par exemple à partir d'une caméra. |
{IMAGE, VIDEO} |
IMAGE |
minDetectionConfidence |
Score de confiance minimal pour que la détection de visages soit considérée comme réussie. | Float [0,1] |
0.5 |
minSuppressionThreshold |
Seuil minimal de suppression non maximale pour que la détection de visages soit considérée comme chevauchée. | Float [0,1] |
0.3 |
Préparer les données
Face Detector peut détecter les visages dans les images de n'importe quel format compatible avec le navigateur hôte. La tâche gère également le prétraitement des données d'entrée, y compris le redimensionnement, la rotation et la normalisation des valeurs. Pour détecter les visages dans les vidéos, vous pouvez utiliser l'API pour traiter rapidement une image à la fois, en utilisant l'horodatage de l'image pour déterminer quand les visages apparaissent dans la vidéo.
Exécuter la tâche
Face Detector utilise les méthodes detect() (avec le mode d'exécution image) et detectForVideo() (avec le mode d'exécution video) pour déclencher des inférences. La tâche traite les données, tente de détecter les visages, puis signale les résultats.
Les appels aux méthodes detect() et detectForVideo() de Face Detector s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous détectez des visages dans les frames vidéo de la caméra d'un appareil, chaque détection bloque le thread principal. Vous pouvez éviter cela en implémentant des Web Workers pour exécuter les méthodes detect() et detectForVideo() sur un autre thread.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche :
Image
const image = document.getElementById("image") as HTMLImageElement; const faceDetectorResult = faceDetector.detect(image);
Vidéo
await faceDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = faceDetector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
Pour une implémentation plus complète de l'exécution d'une tâche Face Detector, consultez l' exemple.
Gérer et afficher les résultats
Face Detector génère un objet de résultat de détection de visages pour chaque exécution de détection. L'objet de résultat contient les visages dans les coordonnées de l'image et les visages dans les coordonnées du monde.
Voici un exemple des données de sortie de cette tâche :
FaceDetectionResult:
Detections:
Detection #0:
BoundingBox:
origin_x: 126
origin_y: 100
width: 463
height: 463
Categories:
Category #0:
index: 0
score: 0.9729152917861938
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.18298381567001343
y: 0.2961040139198303
NormalizedKeypoint #1:
x: 0.3302789330482483
y: 0.29289937019348145
... (6 keypoints for each face)
Detection #1:
BoundingBox:
origin_x: 616
origin_y: 193
width: 430
height: 430
Categories:
Category #0:
index: 0
score: 0.9251380562782288
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.6151331663131714
y: 0.3713381886482239
NormalizedKeypoint #1:
x: 0.7460576295852661
y: 0.38825345039367676
... (6 keypoints for each face)
L'image suivante montre une visualisation de la sortie de la tâche :
Pour l'image sans cadres de délimitation, consultez l'image d'origine.
L'exemple de code Face Detector montre comment afficher les résultats renvoyés par la tâche. Consultez l' exemple