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 Interactive Image Segmenter pour les applications Web et Node. 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 Interactive Image Segmenter 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 segmentation d'images interactive. Vous pouvez afficher, exécuter et modifier l'exemple Interactive Image Segmenter à l'aide de votre navigateur Web.
Configuration
Cette section décrit les étapes clés pour configurer votre environnement de développement et vos projets de code spécifiquement pour utiliser Interactive Image Segmenter. 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 la version de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code Interactive Image Segmenter 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
Setup.
Vous pouvez installer les packages requis avec le code suivant pour la préparation 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 la balise de votre fichier HTML :
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
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 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...() d'Interactive Image Segmenter 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 Interactive Image Segmenter 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 comporte 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 définie sur True, la sortie inclut un masque de segmentation
sous forme d'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 définie sur True, la sortie inclut un masque de segmentation
sous forme d'image à 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 langue | en |
Préparer les données
Interactive Image Segmenter peut segmenter des objets dans des images dans n'importe quel format compatible avec le navigateur hôte. La tâche gère également le prétraitement des entrées de données, y compris le redimensionnement, la rotation et la normalisation des valeurs.
Les appels aux méthodes segment() et segmentForVideo() d'Interactive Image Segmenter 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 provenant de l'appareil photo d'un appareil, chaque tâche de segmentation bloque le thread principal. Vous pouvez éviter cela en implémentant des Web Workers 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. Interactive Image Segmenter 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);