La tâche d'embedding d'image MediaPipe vous permet de convertir les données d'image en représentation numérique pour effectuer des tâches de traitement d'image liées au ML, telles que la comparaison de la similarité de deux images. Ces instructions vous expliquent comment utiliser l'outil d'intégration d'images pour Node et les applications 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 de l'outil d'intégration d'images 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 d'intégration d'images. Vous pouvez afficher, exécuter et modifier l'exemple de code de l'outil d'intégration d'images à l'aide de votre navigateur Web.
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 Embedder. 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 de l'outil d'intégration 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 @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:
<!-- You can replace jsDelivr with your preferred CDN -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modèle
La tâche d'encapsulation d'image 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 Embedder, 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
Spécifier un chemin d'accès au modèle
Vous pouvez créer une tâche avec les options par défaut à l'aide de la méthode createFromModelPath():
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
},
});
Spécifier le tampon du modèle
Si votre modèle est déjà chargé en mémoire, vous pouvez utiliser la méthode createFromModelBuffer():
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
vision,
new Uint8Array(...)
);
Spécifier des options personnalisées
La tâche d'encapsulation d'images MediaPipe utilise la fonction createFromOptions pour configurer la tâche. La fonction createFromOptions accepte des valeurs pour les 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:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
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 |
|---|---|---|---|
running_mode |
Définit le mode d'exécution de la tâche. Il existe deux modes: IMAGE: mode pour les entrées d'une seule image. VIDEO: mode des images décodées d'une vidéo ou d'un flux en direct de données d'entrée, par exemple d'une caméra. |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
Indique si le vecteur de caractéristiques renvoyé doit être normalisé avec la norme L2. N'utilisez cette option que si le modèle ne contient pas déjà une opération TFLite L2_NORMALIZATION native. Dans la plupart des cas, c'est déjà le cas, et la normalisation L2 est donc obtenue via l'inférence TFLite sans avoir besoin de cette option. | Boolean |
False |
quantize |
Indique si l'embedding renvoyé doit être quantifié en octets via une quantification scalaire. Les représentations vectorielles continues sont implicitement supposées avoir une norme unitaire. Par conséquent, toute dimension a une valeur comprise dans la plage [-1,0, 1,0]. Utilisez l'option l2Normalize si ce n'est pas le cas. | Boolean |
False |
Préparer les données
Image Embedder peut intégrer 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.
Les appels aux méthodes embed() et embedForVideo() de l'outil d'intégration d'images s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous souhaitez extraire des vecteurs de caractéristiques à partir de frames vidéo, chaque intégration bloquera le thread principal.
Pour éviter cela, implémentez des travailleurs Web pour exécuter les méthodes embed() et embedForVideo() sur un autre thread.
Exécuter la tâche
L'outil d'intégration d'images utilise les méthodes embed() (avec le mode d'exécution image) et embedForVideo() (avec le mode d'exécution video) pour déclencher des inférences. L'API Image Embedder renvoie les vecteurs d'embedding pour l'image d'entrée.
Le code suivant montre comment exécuter le traitement avec le modèle de tâche:
Image
const image = document.getElementById("image") as HTMLImageElement; const imageEmbedderResult = imageEmbedder.embed(image);
Vidéo
const video = document.getElementById("webcam"); const startTimeMs = performance.now(); const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Gérer et afficher les résultats
Lors de l'exécution de l'inférence, la tâche Image Embedder renvoie un objet ImageEmbedderResult contenant les vecteurs d'embedding pour l'image ou le frame d'entrée.
Voici un exemple des données de sortie de cette tâche:
ImageEmbedderResult:
Embedding #0 (sole embedding head):
float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
head_index: 0
Ce résultat a été obtenu en encapsulant l'image suivante:
Vous pouvez comparer la similarité sémantique de deux embeddings à l'aide de la fonction ImageEmbedder.cosineSimilarity. Pour en savoir plus, consultez le code suivant.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
L'exemple de code de l'outil d'intégration d'images montre comment afficher les résultats de l'outil d'intégration renvoyés par la tâche. Pour en savoir plus, consultez l'exemple de code.