Guide de classification d'images pour le Web

La tâche de classificateur d'images MediaPipe vous permet d'effectuer une classification d'images. Vous pouvez utiliser cette tâche pour identifier ce que représente une image parmi un ensemble de catégories définies lors 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 à créer votre propre application de classification d'images. Vous pouvez afficher, exécuter et modifier l'exemple de code du classificateur d'images à l'aide de votre navigateur Web.

Préparation

Cette section décrit les étapes clés de la configuration de votre environnement de développement et de vos projets de code spécifiquement pour l'utilisation du 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 sur les exigences de version 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 MediaPipe @mediapipe/tasks-vision NPM. 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 classificateur 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 à l'exécution d'inférences. Utilisez la fonction createFromModelPath() avec un chemin d'accès relatif ou absolu au fichier du 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 classificateur d'images avec des 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:

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 dispose des 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 pour les entrées d'une seule image.

VIDEO: mode pour les images décodées d'une vidéo ou d'une diffusion en direct de données d'entrée, par exemple depuis une caméra.
{IMAGE, VIDEO} IMAGE
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 thèmes 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. Tout nombre positif -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 quelle valeur flottante Non définie
categoryAllowlist Définit la liste facultative des noms de catégories autorisés. S'ils ne sont pas vides, les résultats de classification dont le nom de catégorie ne figure pas dans cet ensemble sont filtrés. Les noms de catégorie en double ou inconnus sont ignorés. Cette option s'exclut mutuellement avec categoryDenylist. L'utilisation des deux résultats génère une erreur. N'importe quelle chaîne Non définie
categoryDenylist Définit la liste facultative des noms de catégorie qui ne sont pas autorisés. S'ils ne sont pas vides, les résultats de classification dont le nom de catégorie figure dans cet ensemble seront filtrés. Les noms de catégorie en double ou inconnus sont ignorés. Cette option s'exclut mutuellement avec categoryAllowlist. L'utilisation des deux entraîne une erreur. N'importe quelle chaîne Non définie
resultListener Définit l'écouteur de résultats pour recevoir les résultats de la classification de manière asynchrone lorsque le classificateur d'images est en mode de diffusion en direct. Ne peut être utilisé que lorsque le mode En cours 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 les objets d'images dans n'importe quel format compatible avec le navigateur hôte. Cette 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 les images vidéo de l'appareil photo d'un appareil, chaque classification bloque le thread principal. Vous pouvez empêcher cela en implémentant des nœuds de calcul Web pour exécuter classify() et classifyForVideo() sur un autre thread.

Exécuter la tâche

Le classificateur 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:

Images

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 classificateur d'images renvoie un objet ImageClassifierResult contenant la liste des catégories possibles pour les objets de l'image ou du cadre d'entrée.

Voici un exemple des 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

Vous avez obtenu ce résultat 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. Pour en savoir plus, consultez cet exemple de code.