La tarea Detector de objetos de MediaPipe te permite detectar la presencia y la ubicación de varias clases de objetos. En esta tarea, se toman datos de imágenes y se genera una lista de resultados de detección, cada uno de los cuales representa un objeto identificado en la imagen. La muestra de código que se describe en estas instrucciones está disponible en CodePen.
Puedes ver la tarea en acción en la demostración. Para obtener más información sobre las capacidades, los modelos y las opciones de configuración de esta tarea, consulta la Descripción general.
Ejemplo de código
En el código de ejemplo del detector de objetos, se 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 texto. Puedes ver, ejecutar y editar el código de ejemplo del detector de objetos solo con tu navegador web.
Configuración
En esta sección, se describen los pasos clave a fin de configurar tu entorno de desarrollo específicamente para usar el detector de objetos. Para obtener información general sobre cómo configurar tu entorno de desarrollo web y de JavaScript, 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 detector de objetos está disponible a través del paquete @mediapipe/tasks-vision
NPM de MediaPipe. Para encontrar y descargar estas bibliotecas, sigue las instrucciones de la Guía de configuración de la plataforma.
Puedes instalar los paquetes requeridos a través de NPM con el siguiente comando:
npm install @mediapipe/tasks-vision
Si deseas importar el código de la tarea a través de un servicio de red de distribución de contenidos (CDN), agrega el siguiente código a la etiqueta <head> 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 Detector de objetos de MediaPipe requiere un modelo entrenado que sea compatible con esta tarea. Si quieres obtener más información sobre los modelos entrenados disponibles para el detector de objetos, consulta la descripción general de la tarea en la sección Modelos.
Selecciona y descarga un modelo, y almacénalo en el directorio del proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Usa una de las funciones ObjectDetector.createFrom...() del detector de objetos a fin de preparar la tarea para ejecutar inferencias. Usa la función createFromModelPath() con una ruta relativa o absoluta al archivo del 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 muestra el uso de la función createFromOptions(), que te permite establecer más opciones de configuración. Para obtener más información sobre las opciones de configuración disponibles, consulta la sección Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar esta tarea:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
},
scoreThreshold: 0.5,
runningMode: runningMode
});
Para ver una implementación más completa de la creación de una tarea de detección de objetos, consulta el ejemplo de código.
Opciones de configuración
Esta tarea incluye 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 para la tarea. Existen dos modos: IMAGE: El modo para entradas de una sola imagen. 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 |
Configura 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 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 |
Configura la cantidad máxima opcional de resultados de detección con puntuaciones más altas que se mostrarán. | Cualquier número positivo | -1 (se muestran todos los resultados) |
scoreThreshold |
Establece el umbral de puntuación de predicción que anula el proporcionado en los metadatos del modelo (si corresponde). Se rechazarán los resultados inferiores a este valor. | Cualquier número de punto flotante | No establecida |
categoryAllowlist |
Establece la lista opcional de nombres de categorías permitidas. Si no está vacío, se filtrarán los resultados de detección cuyo nombre de categoría no esté en este conjunto. Los nombres de categorías duplicados o desconocidos se ignoran.
Esta opción es mutuamente excluyente con categoryDenylist, y el uso de ambos da como resultado un error. |
Cualquier cadena | No establecida |
categoryDenylist |
Establece la lista opcional de nombres de categorías que no están permitidas. Si no está vacío, se filtrarán los resultados de detección cuyo nombre de categoría se encuentre en este conjunto. Los nombres de categorías duplicados o desconocidos se ignoran. Esta opción es mutuamente
exclusiva con categoryAllowlist, y el uso de ambas da como resultado un error. |
Cualquier cadena | No establecida |
Preparar los datos
El detector de objetos puede detectar objetos en imágenes en cualquier formato que admita el navegador del host. La tarea también controla el procesamiento previo de entrada de datos, incluido el cambio de tamaño, la rotación y la normalización de valores. Si quieres detectar objetos en videos, puedes usar la API para procesar rápidamente un fotograma a la vez, y usar la marca de tiempo del fotograma para determinar cuándo se producen los gestos en el video.
Ejecuta la tarea
El detector de objetos usa detect() para trabajar en imágenes individuales y detectForVideo() para detectar objetos en fotogramas de video. La tarea procesa los datos, intenta reconocer objetos y, luego, informa los resultados.
Las llamadas a los métodos detect() y detectForVideo() se ejecutan de forma síncrona y bloquean el subproceso de interfaz de usuario. Si reconoces objetos en fotogramas de video de la cámara de un dispositivo, cada clasificación bloquea el subproceso principal. Puedes evitarlo implementando trabajadores web para que ejecuten la detección en otro subproceso.
En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:
De imagen
const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);
Video
await objectDetector.setOptions({ runningMode: "video" });
let lastVideoTime = -1;
function renderLoop(): void {
const video = document.getElementById("video");
if (video.currentTime !== lastVideoTime) {
const detections = detector.detectForVideo(video);
processResults(detections);
lastVideoTime = video.currentTime;
}
requestAnimationFrame(() => {
renderLoop();
});
}
Para ver una implementación más completa de la ejecución de una tarea del detector de objetos, consulta el ejemplo de código.
Cómo controlar y mostrar los resultados
El detector de objetos genera un objeto de resultados de detección para cada ejecución de detección. El objeto de resultados contiene una lista de detecciones, en la que cada detección incluye un cuadro de límite y la información de categoría sobre el objeto detectado, incluido el nombre del objeto y una puntuación de confianza.
A continuación, se muestra un ejemplo de los datos de salida de esta tarea:
ObjectDetectorResult:
Detection #0:
Box: (x: 355, y: 133, w: 190, h: 206)
Categories:
index : 17
score : 0.73828
class name : dog
Detection #1:
Box: (x: 103, y: 15, w: 138, h: 369)
Categories:
index : 17
score : 0.73047
class name : dog
En la siguiente imagen, se muestra una visualización del resultado de la tarea:
En el código de ejemplo del detector de objetos, se indica cómo mostrar los resultados de la detección que muestra la tarea. Consulta el ejemplo de código para obtener más información.