Guía de clasificación de imágenes para la Web

La tarea del clasificador de imágenes MediaPipe te permite clasificar imágenes. Puedes usar esta tarea para identificar lo que representa una imagen entre un conjunto de categorías definidas en el momento del entrenamiento. En estas instrucciones, se muestra cómo usar el clasificador de imágenes para aplicaciones web y de nodo.

Para ver esta tarea en acción, consulta la demostración. Para obtener más información sobre las funciones, los modelos y las opciones de configuración de esta tarea, consulta la Descripción general.

Ejemplo de código

El código de ejemplo para el clasificador de imágenes proporciona una implementación completa de esta tarea en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y comenzar a compilar tu propia app de clasificación de imágenes. Puedes ver, ejecutar y editar el código de ejemplo del clasificador de imágenes con tu navegador web.

Configuración

En esta sección, se describen los pasos clave para configurar el entorno de desarrollo y los proyectos de código específicamente para usar el clasificador de imágenes. Si deseas obtener información general sobre cómo configurar el entorno de desarrollo para usar tareas de MediaPipe, incluidos los requisitos de la versión de la plataforma, consulta la Guía de configuración para la Web.

Paquetes de JavaScript

El código del clasificador de imágenes está disponible a través del paquete NPM @mediapipe/tasks-vision de MediaPipe. Puedes encontrar y descargar estas bibliotecas desde los vínculos que se proporcionan en la Guía de configuración de la plataforma.

Puedes usar el siguiente comando para instalar los paquetes obligatorios con el siguiente código para la etapa de pruebas local:

npm install @mediapipe/tasks-vision

Si deseas importar el código de tarea a través de un servicio de red de distribución de contenidos (CDN), agrega el siguiente código en la etiqueta de tu archivo 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>

Modelo

La tarea del clasificador de imágenes MediaPipe requiere un modelo entrenado que sea compatible con esta tarea. Si deseas obtener más información sobre los modelos entrenados disponibles para el clasificador de imágenes, consulta la descripción general de la tarea Sección de modelos.

Selecciona y descarga un modelo y, luego, guárdalo en el directorio de tu proyecto:

<dev-project-root>/app/shared/models/

Crea la tarea

Usa una de las funciones createFrom...() del clasificador de imágenes a fin de preparar la tarea para ejecutar las inferencias. Usa la función createFromModelPath() con una ruta de acceso relativa o absoluta al archivo de modelo entrenado. Si tu modelo ya está cargado en la memoria, puedes usar el método createFromModelBuffer().

En el siguiente ejemplo de código, se demuestra el uso de la función createFromOptions() para configurar la tarea. La función createFromOptions te permite personalizar el clasificador de imágenes con opciones de configuración. Para obtener más información sobre las opciones de configuración, consulta Opciones de configuración.

En el siguiente código, se muestra cómo compilar y configurar la tarea con opciones personalizadas:

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`
    },
  });
}

Opciones de configuración

Esta tarea tiene las siguientes opciones de configuración para las aplicaciones web:

Nombre de la opción Descripción Rango de valores Valor predeterminado
runningMode Establece el modo de ejecución de la tarea. Existen dos modos:

IMAGEN: El modo para entradas de imagen única.

VIDEO: Es el modo para los fotogramas decodificados de un video o en una transmisión en vivo de datos de entrada, como los de una cámara.
{IMAGE, VIDEO} IMAGE
displayNamesLocale Establece el idioma de las etiquetas que se usarán para los nombres visibles proporcionados en los metadatos del modelo de la tarea, si están disponibles. El valor predeterminado es en para el inglés. Puedes agregar etiquetas localizadas a los metadatos de un modelo personalizado con la API de Metadata Writer de TensorFlow Lite. Código de configuración regional en
maxResults Establece la cantidad máxima opcional de resultados de clasificación con puntuación más alta que se mostrarán. Si es < 0, se devolverán todos los resultados disponibles. Cualquier número positivo -1
scoreThreshold Establece el umbral de puntuación de predicción que anula el que se proporciona en los metadatos del modelo (si corresponde). Se rechazarán los resultados por debajo de este valor. Cualquier número de punto flotante No establecida
categoryAllowlist Establece la lista opcional de nombres de categorías permitidas. Si no están vacíos, se filtrarán los resultados de clasificación cuyo nombre de categoría no se encuentre en este conjunto. Se ignoran los nombres de categoría duplicados o desconocidos. Esta opción es mutuamente excluyente con categoryDenylist y usar ambas genera un error. Cualquier cadena No establecida
categoryDenylist Establece la lista opcional de nombres de categorías que no están permitidos. Si no está vacío, se filtrarán los resultados de clasificación cuyo nombre de categoría esté en este conjunto. Se ignoran los nombres de categoría duplicados o desconocidos. Esta opción es mutuamente excluyente con categoryAllowlist y usar ambas genera un error. Cualquier cadena No establecida
resultListener Configura el objeto de escucha de resultados para recibir los resultados de clasificación de forma asíncrona cuando el clasificador de imágenes está en el modo de transmisión en vivo. Solo se puede usar cuando el modo de ejecución está establecido en LIVE_STREAM N/A No establecida

prepara los datos

El clasificador de imágenes puede clasificar objetos en imágenes en cualquier formato que admita el navegador del host. La tarea también maneja el procesamiento previo de la entrada de datos, incluidos el cambio de tamaño, la rotación y la normalización de valores.

Las llamadas a los métodos classify() y classifyForVideo() del clasificador de imágenes se ejecutan de forma síncrona y bloquean el subproceso de la interfaz de usuario. Si clasificas objetos en fotogramas de video desde la cámara de un dispositivo, cada clasificación bloqueará el subproceso principal. A fin de evitar esto, implementa trabajadores web para que ejecuten classify() y classifyForVideo() en otro subproceso.

Ejecuta la tarea

El clasificador de imágenes usa el método classify() con el modo de imagen y el método classifyForVideo() con el modo video para activar las inferencias. La API de Image Classifier mostrará las posibles categorías para los objetos dentro de la imagen de entrada.

En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:

Imagen

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

Video

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

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

Para obtener una implementación más completa de la ejecución de una tarea del clasificador de imágenes, consulta el ejemplo de código.

Cómo controlar y mostrar resultados

Después de ejecutar la inferencia, la tarea del clasificador de imágenes muestra un objeto ImageClassifierResult que contiene la lista de categorías posibles para los objetos dentro de la imagen o el marco de entrada.

A continuación, se muestra un ejemplo de los datos de salida de esta tarea:

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

Este resultado se obtuvo mediante la ejecución del clasificador de aves en:

El código de ejemplo del clasificador de imágenes demuestra cómo mostrar los resultados de clasificación que se muestran en la tarea. Consulta el ejemplo de código para obtener más detalles.