Présentation de Google AI Edge Portal: évaluez l'IA Edge à grande échelle. Inscrivez-vous pour demander l'accès pendant l'aperçu privé.

Guide de détection des points de repère de la main pour le Web

La tâche MediaPipe Hand Landmarker vous permet de détecter les points de repère des mains dans une image. Ces instructions vous expliquent comment utiliser le détecteur de points de repère des mains 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 Hand Landmarker fournit une implémentation complète de cette tâche en JavaScript pour votre référence. Ce code vous aide à tester cette tâche et à commencer à créer votre propre application de détection des points de repère de la main. Vous pouvez afficher, exécuter et modifier l'exemple de Hand Landmarker à l'aide de votre navigateur Web.

Configuration

Cette section décrit les étapes clés pour configurer votre environnement de développement spécifiquement pour utiliser Hand Landmarker. Pour obtenir des informations générales sur la configuration de votre environnement de développement Web et JavaScript, y compris sur les exigences concernant la version de la plate-forme, consultez le guide de configuration pour le Web.

Packages JavaScript

Le code Hand Landmarker 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.

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 Hand Landmarker 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 Hand Landmarker, 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 Hand Landmarker 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 le Hand Landmarker avec des options de configuration. Pour en savoir plus sur les options de configuration, consultez 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 handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

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
`runningMode`	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és d'une vidéo ou d'une diffusion en direct de données d'entrée, comme celles d'une caméra.	{`IMAGE, VIDEO`}	`IMAGE`
`numHands`	Nombre maximal de mains détectées par le détecteur de points de repère des mains.	`Any integer > 0`	`1`
`minHandDetectionConfidence`	Score de confiance minimal pour que la détection de la main soit considérée comme réussie dans le modèle de détection de la paume.	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	Score de confiance minimal pour le score de présence de la main dans le modèle de détection des points de repère de la main. En mode vidéo et en mode diffusion en direct, si le score de confiance de présence de la main du modèle de points de repère de la main est inférieur à ce seuil, Hand Landmarker déclenche le modèle de détection de la paume. Sinon, un algorithme de suivi des mains léger détermine l'emplacement des mains pour les détections de points de repère ultérieures.	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	Score de confiance minimal pour que le suivi des mains soit considéré comme réussi. Il s'agit du seuil IoU du cadre de sélection entre les mains dans le frame actuel et le dernier frame. Dans les modes Vidéo et Flux du Hand Landmarker, si le suivi échoue, le Hand Landmarker déclenche la détection de la main. Dans le cas contraire, la détection des mains est ignorée.	`0.0 - 1.0`	`0.5`

Préparer les données

Le détecteur de points de repère de la main peut détecter les points de repère de la main dans des 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 points de repère des mains dans les vidéos, vous pouvez utiliser l'API pour traiter rapidement une image à la fois, en utilisant le code temporel de l'image pour déterminer quand les points de repère des mains se produisent dans la vidéo.

Exécuter la tâche

Le Hand Landmarker 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 points de repère de la main, puis renvoie les résultats.

Les appels aux méthodes Hand Landmarker detect() et detectForVideo() s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous détectez des points de repère de la main dans les images vidéo de la caméra d'un appareil, chaque détection bloque le thread principal. Pour éviter cela, vous pouvez implémenter 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 handLandmarkerResult = handLandmarker.detect(image);

Vidéo

await handLandmarker.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = handLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Pour une implémentation plus complète de l'exécution d'une tâche Hand Landmarker, consultez l'exemple.

Gérer et afficher les résultats

Le Hand Landmarker génère un objet de résultat de repères de main pour chaque exécution de la détection. L'objet de résultat contient des points de repère de la main dans les coordonnées de l'image, des points de repère de la main dans les coordonnées du monde et la latéralité(main gauche/droite) des mains détectées.

Voici un exemple des données de sortie de cette tâche :

La sortie HandLandmarkerResult contient trois composants. Chaque composant est un tableau, où chaque élément contient les résultats suivants pour une seule main détectée :

Main dominante

La main dominante indique si les mains détectées sont des mains gauches ou droites.
Points de repère

Il existe 21 repères de main, chacun composé de coordonnées x, y et z. Les coordonnées x et y sont normalisées à [0.0, 1.0] par la largeur et la hauteur de l'image, respectivement. La coordonnée z représente la profondeur du point de repère, l'origine étant la profondeur au niveau du poignet. Plus la valeur est petite, plus le point de repère est proche de la caméra. L'ampleur de z utilise à peu près la même échelle que x.
Monuments du monde

Les 21 repères de la main sont également présentés dans les coordonnées du monde. Chaque point de repère est composé de x, y et z, qui représentent des coordonnées 3D réelles en mètres, l'origine étant le centre géométrique de la main.

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

L'image suivante montre une visualisation du résultat de la tâche :

Main levant le pouce, avec le squelette de la main représenté

L'exemple de code Hand Landmarker montre comment afficher les résultats renvoyés par la tâche. Pour en savoir plus, consultez l'exemple.