La tâche MediaPipe Image Segmenter vous permet de diviser des images en régions en fonction de catégories prédéfinies pour appliquer des effets visuels tels que le flou d'arrière-plan. Ces instructions vous expliquent comment utiliser Image Segmenter 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 pour 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. Vous pouvez afficher, exécuter, et modifier l'exemple 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 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 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 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 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'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 Image Segmenter avec des options de configuration. Pour en savoir plus sur la configuration des tâches, consultez la section Options de configuration.
Le code suivant montre comment créer et configurer la tâche avec des options personnalisées :
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
Pour une implémentation plus complète de la création d'une tâche Image Segmenter, consultez l' exemple de code.
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 la valeur de catégorie gagnante. |
{True, False} |
False |
outputConfidenceMasks |
Si la valeur est définie sur True, la sortie inclut un masque de segmentation
sous forme d'image de valeur flottante, où chaque valeur flottante représente la carte de score de confiance
de la catégorie. |
{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 |
resultListener |
Définit l'écouteur de résultats pour recevoir les résultats de segmentation
de manière asynchrone lorsque le segmentateur d'images est en mode LIVE_STREAM.
Ne peut être utilisé que lorsque le mode d'exécution est défini sur LIVE_STREAM. |
N/A | N/A |
Préparer les données
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'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
Image Segmenter utilise la méthode segment() avec le mode image et la méthode segmentForVideo() avec le mode video pour déclencher des inférences. 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 :
Image
const image = document.getElementById("image") as HTMLImageElement; imageSegmenter.segment(image, callback);
Vidéo
async function renderLoop(): void { const video = document.getElementById("video"); let startTimeMs = performance.now(); imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo); requestAnimationFrame(() => { renderLoop(); }); }
Pour une implémentation plus complète de l'exécution d'une tâche Image Segmenter, consultez l' exemple.
Gérer et afficher les résultats
Lors de l'exécution de l'inférence, la tâche Image Segmenter renvoie les données d'image du segment à une fonction de rappel. Le contenu de la sortie dépend de la valeur outputType que vous avez définie
lors de la configuration de la tâche.
Les sections suivantes présentent des exemples de données de sortie de cette tâche :
Niveau de confiance pour chaque catégorie
Les images suivantes montrent une visualisation de la sortie de la tâche pour un masque de confiance de catégorie. La sortie du masque de confiance contient des valeurs flottantes comprises entre [0, 1].
Image d'origine et sortie du masque de confiance de catégorie. Source image de l'ensemble de données Pascal VOC 2012
Valeur de la catégorie
Les images suivantes montrent une visualisation de la sortie de la tâche pour un masque de valeur de catégorie. La plage du masque de catégorie est [0, 255] et chaque valeur de pixel représente l'index de catégorie gagnant de la sortie du modèle. L'index de catégorie gagnant est celui qui obtient le score le plus élevé parmi les catégories que le modèle peut reconnaître.
Image d'origine et sortie du masque de catégorie. Source image de l'ensemble de données Pascal VOC 2012
L'exemple de code Image Segmenter montre comment afficher les résultats de segmentation renvoyés par la tâche. Pour en savoir plus, consultez l' exemple .