La tâche de segmentation d'image interactive MediaPipe prend un emplacement dans une image, estime les limites d'un objet à cet emplacement et renvoie la segmentation de l'objet sous forme de données d'image. Ces instructions vous expliquent comment utiliser le segmenteur d'images interactif pour les applications Node et Web. Pour en savoir plus sur les fonctionnalités, les modèles et les options de configuration de cette tâche, consultez la section Présentation.
Exemple de code
L'exemple de code pour le segmenteur d'images interactif fournit une implémentation complète de cette tâche en JavaScript pour référence. Ce code vous aide à tester cette tâche et à commencer à créer votre propre application de segmentation d'images interactive. Vous pouvez afficher, exécuter et modifier l'exemple de code du segmenteur d'images interactif à l'aide de votre navigateur Web. Vous pouvez également consulter le code de cet exemple sur GitHub.
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement et vos projets de code spécifiquement pour utiliser le segmenteur d'images interactif. Pour obtenir des informations générales sur la configuration de votre environnement de développement pour utiliser les tâches MediaPipe, y compris les exigences concernant les versions de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code du segmenteur d'images interactif est disponible via le package @mediapipe/tasks-vision
NPM MediaPipe. Vous pouvez trouver et télécharger ces bibliothèques à partir des liens fournis dans le guide de configuration de la plate-forme.
Vous pouvez installer les packages requis avec le code suivant pour le préproduction local à l'aide de la commande suivante:
npm install --save @mediapipe/tasks-vision
Si vous souhaitez importer le code de tâche via un service de réseau de diffusion de contenu (CDN), ajoutez le code suivant dans la balise de votre fichier HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modèle
La tâche de segmentation d'images interactive MediaPipe 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 le segmenteur d'images interactif, 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...() du segmenteur d'images interactif pour préparer la tâche à l'exécution d'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 segmenteur d'images interactif 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:
async function createSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
},
});
}
createSegmenter();
Options de configuration
Cette tâche propose les options de configuration suivantes pour les applications Web:
| Nom de l'option | Description | Plage de valeurs | Valeur par défaut |
|---|---|---|---|
outputCategoryMask |
Si la valeur est True, la sortie inclut un masque de segmentation sous la forme d'une image uint8, où chaque valeur de pixel indique si le pixel fait partie de l'objet situé dans la zone d'intérêt. |
{True, False} |
False |
outputConfidenceMasks |
Si la valeur est True, la sortie inclut un masque de segmentation sous la forme d'une image de valeur flottante, où chaque valeur flottante représente la confiance que le pixel fait partie de l'objet situé dans la zone d'intérêt. |
{True, False} |
True |
displayNamesLocale |
Définit la langue des libellés à utiliser pour les noms à afficher fournis dans les métadonnées du modèle de la tâche, le cas échéant. La valeur par défaut est en pour l'anglais. Vous pouvez ajouter des libellés localisés aux métadonnées d'un modèle personnalisé à l'aide de l'API TensorFlow Lite Metadata Writer.
| Code de paramètres régionaux | en |
Préparer les données
Le segmenteur d'images interactif peut segmenter les objets dans les images dans n'importe quel format compatible avec le navigateur hôte. La tâche gère également le prétraitement de l'entrée des données, y compris le redimensionnement, la rotation et la normalisation des valeurs.
Les appels aux méthodes segment() et segmentForVideo() du segmenteur d'images interactif s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous segmentez des objets dans des images vidéo à partir de la caméra d'un appareil, chaque tâche de segmentation bloque le thread principal. Pour éviter cela, implémentez des travailleurs Web pour exécuter segment() et segmentForVideo() sur un autre thread.
Exécuter la tâche
Le segmenteur d'images interactif utilise la méthode segment() pour déclencher des inférences. Le segmenteur d'images interactif renvoie les segments détectés en tant que données d'image à une fonction de rappel que vous définissez lorsque vous exécutez une inférence pour la tâche.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);
Pour une implémentation plus complète de l'exécution d'une tâche de segmentation d'image interactive, consultez l'exemple de code.
Gérer et afficher les résultats
Lors de l'exécution de l'inférence, la tâche Interactive Image Segmenter renvoie les données d'image de segment à une fonction de rappel. Le contenu de la sortie est constitué de données d'image et peut inclure un masque de catégorie, des masques de confiance ou les deux, en fonction de ce que vous avez défini lors de la configuration de la tâche.
Les sections suivantes expliquent plus en détail les données de sortie de cette tâche:
Masque de catégorie
Les images suivantes montrent une visualisation de la sortie de la tâche pour un masque de valeur de catégorie avec une zone d'intérêt indiquée. Chaque pixel est une valeur uint8 indiquant si le pixel fait partie de l'objet situé dans la zone d'intérêt. Le cercle noir et blanc de la deuxième image indique la zone d'intérêt sélectionnée.
Image d'origine et sortie du masque de catégorie. Image source de l'ensemble de données Pascal VOC 2012.
Masque de confiance
La sortie d'un masque de confiance contient des valeurs flottantes comprises entre [0, 1] pour chaque canal d'entrée d'image. Des valeurs plus élevées indiquent une plus grande confiance que le pixel de l'image fait partie de l'objet situé dans la zone d'intérêt.
L'exemple de code du segmenteur d'images interactif montre comment afficher les résultats de classification renvoyés par la tâche. Pour en savoir plus, consultez l'exemple de code.