La tâche "Segmenter des images interactives MediaPipe" prend un emplacement dans une image, estime les limites de un objet à cet emplacement, puis renvoie la segmentation de l'objet sous forme d'image données. Ces instructions vous expliquent comment utiliser le Segmenter d'images interactif pour Node et le Web applications. Pour en savoir plus sur les fonctionnalités, les modèles et la configuration options 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 ce en JavaScript à titre de référence. Ce code vous aide à tester cette tâche et commencez à créer votre propre application interactive de segmentation d'images. Vous pouvez Afficher, exécuter et modifier le segmenteur d'images interactif exemple de code en utilisant uniquement votre navigateur Web. Vous pouvez également consulter le code de cet exemple GitHub
Configuration
Cette section décrit les étapes clés à suivre pour configurer votre environnement de développement spécifiques pour utiliser le Segmenter d'images interactif. Pour obtenir des informations générales sur configurer votre environnement de développement pour utiliser les tâches MediaPipe, y compris versions de la plate-forme requises, consultez la Guide de configuration pour le Web
Packages JavaScript
Le code du segment d'images interactif est disponible via MediaPipe @mediapipe/tasks-vision.
NPM. Vous pouvez
rechercher et télécharger ces bibliothèques à partir des liens fournis sur la plate-forme ;
Guide de configuration
Vous pouvez installer les packages requis avec le code suivant pour la préproduction locale en exécutant la commande suivante:
npm install --save @mediapipe/tasks-vision
Si vous souhaitez importer le code de la tâche via un 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 MediaPipe Interactive Image Segmenter nécessite un modèle entraîné compatible avec tâche. Pour en savoir plus sur les modèles entraînés disponibles pour le Segmenter d'images interactif, 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...() Interactive Image Segmenter pour
préparer la tâche à exécuter des inférences. Utiliser le createFromModelPath()
avec un chemin d'accès relatif ou absolu vers le fichier de modèle entraîné.
Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la
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
Segmenteur d'images interactif avec options de configuration Pour en savoir plus sur la configuration
consultez la section Options de configuration.
Le code suivant montre comment compiler et configurer la tâche avec des options:
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 True, le résultat inclut un masque de segmentation.
en tant qu'image uint8, où chaque valeur de pixel indique si le pixel fait partie
l'objet situé dans la zone d'intérêt. |
{True, False} |
False |
outputConfidenceMasks |
Si la valeur est True, le résultat inclut un masque de segmentation.
en tant qu'image d'une valeur flottante, où chaque valeur flottante représente le niveau de 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
les métadonnées du modèle de la tâche, le cas échéant. La valeur par défaut est en pour
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 des paramètres régionaux | en |
Préparer les données
Le segmenteur d'images interactif peut segmenter les objets des images dans n'importe quel format compatible avec le navigateur hôte. Elle gère également le prétraitement des entrées de données, le redimensionnement, la rotation et la normalisation des valeurs.
Des appels aux méthodes segment() et segmentForVideo() de Segmenter d'images interactif s'exécutent
de manière synchrone et
bloquent le thread de l'interface utilisateur. Si vous segmentez des objets
de la caméra d'un appareil, chaque tâche de segmentation bloque
thread. Pour éviter cela, implémentez des nœuds de calcul Web
segment() et segmentForVideo() sur un autre fil de discussion.
Exécuter la tâche
Le segmenteur d'images interactif utilise la méthode segment() pour déclencher des inférences. La
Le segmenteur d'images interactif renvoie les segments détectés sous forme de données d'image à un rappel
définie 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);