La tâche de segmentation d'images MediaPipe vous permet de diviser les images en régions en fonction de catégories prédéfinies pour appliquer des effets visuels tels que le floutage de l'arrière-plan. Ces instructions vous expliquent comment utiliser le segmenteur d'images 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 Image Segmenter 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. Vous pouvez afficher, exécuter et modifier l'exemple de code du segmenteur d'images à 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 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 les versions de la plate-forme, consultez le guide de configuration pour le Web.
Packages JavaScript
Le code du segmenteur d'images 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 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 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...() du segmenteur d'images 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 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 de segmentation d'image, consultez l'exemple de code.
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 définie sur True, la sortie inclut un masque de segmentation sous la forme d'une image uint8, où chaque valeur de pixel indique la valeur de la catégorie gagnante. |
{True, False} |
False |
outputConfidenceMasks |
Si la valeur est définie sur True, la sortie inclut un masque de segmentation sous la forme d'une 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 qu'il reçoive les résultats de segmentation de manière asynchrone lorsque le segmenteur 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 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 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 utilise la méthode segment() avec le mode Image et la méthode segmentForVideo() avec le mode video pour déclencher des inférences. Le segmenteur d'images 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:
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 de segmentation d'image, consultez l'exemple de code.
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 de segment à une fonction de rappel. Le contenu de la sortie dépend de l'outputType que vous avez défini lorsque vous avez configuré la tâche.
Les sections suivantes présentent des exemples des données de sortie de cette tâche:
Confiance de la 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 la catégorie. Image source 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'indice de catégorie gagnante de la sortie du modèle. L'indice de catégorie gagnante affiche 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. Image source de l'ensemble de données Pascal VOC 2012.
L'exemple de code du segmenteur d'images montre comment afficher les résultats de segmentation renvoyés par la tâche. Pour en savoir plus, consultez l'exemple de code.