Guide de classification d'images pour le Web

La tâche de classification d'images MediaPipe vous permet d'effectuer une classification sur des images. Vous pouvez utiliser cette tâche pour identifier ce qu'une image représente dans un ensemble de catégories définies au moment de l'entraînement. Ces instructions vous expliquent comment utiliser le classificateur d'images pour les applications Node et Web.

Pour voir cette tâche en action, regardez la démonstration. 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 le classificateur d'images 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 classification d'images. Vous pouvez afficher, exécuter et modifier l'exemple de code du classificateur d'images en utilisant simplement votre navigateur Web.

Préparation

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 le classificateur d'images. Pour obtenir des informations générales sur la configuration de votre environnement de développement pour l'utilisation des 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 classificateur d'images est disponible via le package NPM de MediaPipe @mediapipe/tasks-vision. 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 la préproduction locale à l'aide de la commande suivante:

npm install @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 le tag de votre fichier HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modèle

La tâche de classification 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 classificateur 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 classificateur d'images pour préparer la tâche en vue d'exécuter des inférences. Utilisez la fonction 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 illustre l'utilisation de la fonction createFromOptions() pour configurer la tâche. La fonction createFromOptions vous permet de personnaliser le classificateur d'images avec des options de configuration. Pour en savoir plus sur les options de configuration, consultez la page Options de configuration.

Le code suivant montre comment compiler et configurer la tâche avec des options personnalisées:

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

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
runningMode Définit le mode d'exécution de la tâche. Il existe deux modes:

IMAGE: mode utilisé pour les entrées d'une seule image.

VIDEO: mode des frames décodés d'une vidéo ou d'une diffusion en direct de données d'entrée, par exemple celles d'une caméra.
{IMAGE, VIDEO} IMAGE
displayNamesLocale Définit la langue des étiquettes à 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 des paramètres régionaux en
maxResults Définit le nombre maximal facultatif de résultats de classification les mieux notés à renvoyer. Si la valeur est inférieure à 0, tous les résultats disponibles sont renvoyés. Tous les nombres positifs -1
scoreThreshold Définit le seuil de score de prédiction qui remplace celui fourni dans les métadonnées du modèle (le cas échéant). Les résultats inférieurs à cette valeur sont refusés. N'importe quel nombre décimal Non définie
categoryAllowlist Définit la liste facultative des noms de catégories autorisés. Si ce champ n'est pas vide, les résultats de classification dont le nom de catégorie ne figure pas dans cet ensemble seront filtrés. Les noms de catégories en double ou inconnus sont ignorés. Cette option s'exclue mutuellement avec categoryDenylist, et l'utilisation de ces deux options génère une erreur. Toutes les chaînes Non définie
categoryDenylist Définit la liste facultative des noms de catégories non autorisés. Si cette valeur n'est pas vide, les résultats de classification dont le nom de catégorie se trouve dans cet ensemble seront filtrés. Les noms de catégories en double ou inconnus sont ignorés. Cette option s'exclue mutuellement avec categoryAllowlist. Si vous utilisez les deux, une erreur est générée. Toutes les chaînes Non définie
resultListener Définit l'écouteur des résultats pour recevoir les résultats de classification de manière asynchrone lorsque l'outil de classification d'images est en mode de diffusion en direct. Ne peut être utilisé que lorsque le mode d'exécution est défini sur LIVE_STREAM N/A Non définie

Préparation des données

Le classificateur d'images peut classer 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 de l'entrée des données, y compris le redimensionnement, la rotation et la normalisation des valeurs.

Les appels aux méthodes classify() et classifyForVideo() du classificateur d'images s'exécutent de manière synchrone et bloquent le thread de l'interface utilisateur. Si vous classez des objets dans des images vidéo à partir de l'appareil photo d'un appareil, chaque classification bloque le thread principal. Pour éviter cela, mettez en œuvre des nœuds de calcul Web afin qu'ils exécutent classify() et classifyForVideo() sur un autre thread.

Exécuter la tâche

L'outil de classification d'images utilise la méthode classify() avec le mode Image et la méthode classifyForVideo() avec le mode video pour déclencher des inférences. L'API Image Classifier renvoie les catégories possibles pour les objets dans 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 imageClassifierResult = imageClassifier.classify(image);

Vidéo

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Pour une implémentation plus complète de l'exécution d'une tâche de classificateur d'images, consultez l'exemple de code.

Gérer et afficher les résultats

Lors de l'exécution de l'inférence, la tâche de classification d'images renvoie un objet ImageClassifierResult qui contient la liste des catégories possibles pour les objets se trouvant dans l'image ou la trame d'entrée.

Voici un exemple de données de sortie de cette tâche:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Ce résultat a été obtenu en exécutant le classificateur d'oiseaux sur:

L'exemple de code du classificateur d'images montre comment afficher les résultats de classification renvoyés par la tâche. Consultez l'exemple de code pour en savoir plus.