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 vous explique 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 le segment d'image fournit une implémentation complète de ce en JavaScript pour référence. Ce code vous aide à tester cette tâche et commencez à créer votre propre application de segmentation d'images. Vous pouvez afficher, exécuter et modifier le segmenteur d'images 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 et vos projets de code spécifiquement pour utiliser Image Segmenter. 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 segmenteur d'images est disponible via le package @mediapipe/tasks-visionNPM MediaPipe. 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 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 le segmenteur d'images, 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 segmenteur d'images pour préparer la tâche à l'exécution d'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 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
Segmenter l'image avec options de configuration. Pour en savoir plus sur la configuration des tâches, consultez la section Options de configuration.
Le code suivant montre comment compiler et configurer la tâche avec des options:
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'images, 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 True, la sortie inclut un masque de segmentation sous forme d'image uint8, où chaque valeur de pixel indique la valeur de la catégorie gagnante. |
{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
tableau des scores de la catégorie. |
{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 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 des paramètres régionaux | en |
resultListener |
Définit l'écouteur des résultats pour qu'il reçoive les résultats de la 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
Le segmenteur d'images peut segmenter les objets des 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.
Des 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
de la caméra d'un appareil, chaque tâche de segmentation bloque
thread. 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 de données de sortie de cette tâche:
Confiance de la catégorie
Les images suivantes illustrent le résultat des tâches pour une catégorie
de confiance. La sortie du masque de confiance contient des valeurs flottantes comprises entre [0, 1].
Sortie du masque de confiance des images et catégories d'origine. Image source de la Pascal VOC 2012 ensemble de données.
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. Catégorie gagnante
est le score le plus élevé parmi toutes les catégories reconnues par le modèle.
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 de l'outil de segmentation 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.