La tâche MediaPipe Interactive Image Segmenter 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 présentation.
Exemple de code
L'exemple de code d'Interactive Image Segmenter fournit une implémentation complète de cette tâche dans JavaScript à titre de référence. Ce code vous aide à tester cette tâche et à créer votre propre application interactive de segmentation d'images. Vous pouvez afficher, exécuter et modifier l'exemple de code Interactive Image Segmenter à l'aide de votre navigateur Web. Vous pouvez également examiner le code de cet exemple sur GitHub.
Préparation
Cette section décrit les étapes clés de la configuration de votre environnement de développement et de vos projets de code spécifiquement pour l'utilisation du segment d'images interactif. Pour obtenir des informations générales sur la configuration de votre environnement de développement pour l'utilisation des tâches MediaPipe, y compris sur les exigences de version de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code de segmentation d'images interactif est disponible via le package MediaPipe @mediapipe/tasks-vision
NPM. 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 la préproduction locale à l'aide de la commande suivante:
npm install --save @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 le tag 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 MediaPipe Interactive Image Segmenter 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 Interactive Image Segmenter, consultez la section Modèles de la présentation des tâches.
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 segmentateur d'images interactif pour préparer la tâche à l'exécution des inférences. Utilisez la fonction createFromModelPath() avec un chemin d'accès relatif ou absolu au fichier du 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 segmentateur d'images interactif à l'aide d'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 dispose des 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 à valeur flottante, où chaque valeur flottante représente la confiance selon laquelle 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 thèmes localisés aux métadonnées d'un modèle personnalisé à l'aide de l'API TensorFlow Lite Metadata Writer.
| Code des paramètres régionaux | en |
Préparation des données
Interactive Image Segmenter peut segmenter des objets dans des images dans n'importe quel format compatible avec le navigateur hôte. Cette 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 segmentateur 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 l'appareil photo d'un appareil, chaque tâche de segmentation bloque le thread principal. Vous pouvez empêcher cela en implémentant des nœuds de calcul Web pour exécuter segment() et segmentForVideo() sur un autre thread.
Exécuter la tâche
Interactive Image Segmenter utilise la méthode segment() pour déclencher des inférences. Il renvoie les segments détectés sous forme de données d'image à une fonction de rappel que vous définissez lors de l'exécution d'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 interactive de segmentation d'images, 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 une donnée 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 tâche pour un masque de valeur de catégorie avec une zone de point 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.
Sortie de l'image d'origine et 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 un degré de confiance élevé pour que le pixel de l'image fasse partie de l'objet situé dans la zone d'intérêt.
L'exemple de code de l'outil Interactive Image Segmenter montre comment afficher les résultats de classification renvoyés par la tâche. Pour en savoir plus, consultez l'exemple de code.