La tarea MediaPipe Object Detector permite detectar la presencia y ubicación de varios clases de objetos. Esta tarea toma datos de imágenes y genera una lista de detección resultados, 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.
Para ver esta tarea en acción, consulta el demostración. Para obtener más información sobre las funciones, los modelos y de configuración de esta tarea, consulta la Descripción general.
Ejemplo de código
El código de ejemplo para el detector de objetos brinda una implementación completa de este en JavaScript para tu referencia. Este código te ayuda a probar la tarea y comienza a compilar tu propia app de clasificación de texto. Puedes ver, ejecutar y Edita el código de ejemplo del detector de objetos. usando solo el navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo específicamente para usar el detector de objetos. Para obtener información general configurar tu entorno de desarrollo web y de JavaScript, lo que incluye 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 @mediapipe/tasks-vision de MediaPipe.
NPM. Puedes
sigue las instrucciones de la plataforma para encontrar y descargar estas bibliotecas.
Guía de configuración.
Puedes instalar los paquetes requeridos a través de NPM con el siguiente comando:
npm install @mediapipe/tasks-vision
Si quieres importar el código de la tarea a través de una 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 del detector de objetos MediaPipe requiere un modelo entrenado que sea compatible con este 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, luego, guárdalo en el directorio de tu proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Usa una de las funciones ObjectDetector.createFrom...() del detector de objetos para lo siguiente:
preparan la tarea para ejecutar inferencias. Usa el createFromModelPath()
con una ruta de acceso absoluta o relativa al archivo de modelo entrenado.
Si tu modelo ya está cargado en la memoria, puedes usar
createFromModelBuffer(). El siguiente ejemplo de código demuestra cómo usar
la función createFromOptions(), que te permite establecer más parámetros
opciones de estado. Para obtener más información sobre las opciones de configuración disponibles, consulta
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 detector de objetos, consulta el ejemplo de código de barras.
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: IMAGE: Es el modo para entradas de una sola imagen. VIDEO: el modo para fotogramas decodificados de una 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 que se proporcionan en la
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 |
Establece el número máximo opcional de resultados de detección con la puntuación más alta para el resultado. | Cualquier número positivo | -1 (se devuelven todos los resultados) |
scoreThreshold |
Establece el umbral de puntuación de predicción que anula el que se proporciona en los metadatos del modelo (si los hay). Se rechazarán los resultados por debajo de este valor. | Cualquier número de punto flotante | Sin establecer |
categoryAllowlist |
Establece la lista opcional de nombres de categorías permitidas. Si no está vacío,
los resultados de detección cuyo nombre de categoría no se encuentre en este conjunto serán
filtrado. Se ignoran los nombres de categoría duplicados o desconocidos.
Esta opción es mutuamente excluyente con categoryDenylist y usa
ambos darán como resultado un error. |
Cualquier cadena | Sin establecer |
categoryDenylist |
Establece la lista opcional de nombres de categorías que no están permitidos. Si
no vacío, los resultados de detección cuyo nombre de categoría se encuentre en este conjunto se filtrarán
y sale de ella. Se ignoran los nombres de categoría duplicados o desconocidos. Esta opción es mutuamente
excluyente con categoryAllowlist y usar ambos dará como resultado un error. |
Cualquier cadena | Sin establecer |
Preparar los datos
Object Detector puede detectar objetos en imágenes en cualquier formato compatible con el navegador del host. La tarea también maneja el procesamiento previo de la entrada de datos, lo que incluye cambio de tamaño, rotación y normalización de valores. Para detectar objetos en videos, puedes puedes usar la API para procesar rápidamente un fotograma a la vez, con la marca de tiempo del fotograma para determinar cuándo ocurren los gestos en el video.
Ejecuta la tarea
El detector de objetos usa detect() para trabajar en imágenes individuales y
detectForVideo() funciona detectando objetos en fotogramas de video. Los procesos de la tarea
los datos, intenta reconocer objetos y, luego, informa los resultados.
Se ejecutan las llamadas a los métodos detect() y detectForVideo().
de forma síncrona y bloquea el subproceso de la interfaz de usuario. Si reconoces objetos en
fotogramas de video de la cámara de un dispositivo, cada clasificación bloquea la principal
conversación. Para evitar esto, implementa trabajadores web para que ejecuten la detección en
en otra conversación.
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 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 de detector de objetos, consulta el ejemplo de código de barras.
Cómo controlar y mostrar 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 delimitador y la información de categoría del 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:
El código de ejemplo del detector de objetos muestra cómo mostrar el valor resultados que devolvió la tarea, consulta la ejemplo de código para conocer los detalles.