La tarea MediaPipe Interactive Image Segmenter toma una ubicación en una imagen, estima los límites de un objeto en esa ubicación y devuelve la segmentación del objeto como datos de imagen. En estas instrucciones, se muestra cómo usar Interactive Image Segmenter para apps web y de Node. 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
El código de ejemplo de Interactive Image Segmenter proporciona una implementación completa de esta tarea en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y a comenzar a compilar tu propia app interactiva de segmentación de imágenes. Puedes ver, ejecutar y editar el ejemplo de Interactive Image Segmenter con solo tu navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo y proyectos de código específicamente para usar Interactive Image Segmenter. Si deseas obtener información general para configurar tu entorno de desarrollo para usar las tareas de MediaPipe, incluidos los requisitos de versión de la plataforma, consulta la guía de configuración para la Web.
Paquetes de JavaScript
El código de Interactive Image Segmenter está disponible a través del paquete @mediapipe/tasks-vision de NPM 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 instalar los paquetes requeridos con el siguiente código para la organización local con el siguiente comando:
npm install --save @mediapipe/tasks-vision
Si deseas importar el código de la tarea a través de un servicio de red de distribución de contenido (CDN), agrega el siguiente código en la etiqueta <head> de tu archivo HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea MediaPipe Interactive Image Segmenter requiere un modelo entrenado que sea compatible con esta tarea. Para obtener más información sobre los modelos entrenados disponibles para Interactive Image Segmenter, consulta la sección Modelos del resumen de la tarea.
Selecciona y descarga un modelo, y, luego, almacénalo en el directorio de tu proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Usa una de las funciones de Interactive Image Segmenter createFrom...() para preparar la tarea para ejecutar inferencias. Usa la función createFromModelPath() con una ruta de acceso 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() para configurar la tarea. La función createFromOptions te permite personalizar el segmentador de imágenes interactivas con opciones de configuración. Para obtener más información sobre las opciones de configuración, consulta Opciones de configuración.
El siguiente código muestra cómo compilar y configurar la tarea con opciones personalizadas:
async function createSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
},
});
}
createSegmenter();
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 |
|---|---|---|---|
outputCategoryMask |
Si se configura como True, el resultado incluye una máscara de segmentación como una imagen uint8, en la que cada valor de píxel indica si el píxel forma parte del objeto ubicado en el área de interés. |
{True, False} |
False |
outputConfidenceMasks |
Si se configura como True, el resultado incluye una máscara de segmentación como una imagen de valores de punto flotante, en la que cada valor representa la confianza de que el píxel forma parte del objeto ubicado en el área de interés. |
{True, False} |
True |
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 inglés. Puedes agregar etiquetas localizadas a los metadatos de un modelo personalizado con la API de TensorFlow Lite Metadata Writer.
| Código de configuración regional | en |
Preparar los datos
Interactive Image Segmenter puede segmentar objetos en imágenes en cualquier formato compatible con el navegador host. La tarea también controla el preprocesamiento de la entrada de datos, incluido el cambio de tamaño, la rotación y la normalización de valores.
Las llamadas a los métodos segment() y segmentForVideo() de Interactive Image Segmenter se ejecutan de forma síncrona y bloquean el subproceso de la interfaz de usuario. Si segmentas objetos en fotogramas de video desde la cámara de un dispositivo, cada tarea de segmentación bloquea el subproceso principal. Puedes evitar esto implementando trabajadores web para ejecutar segment() y segmentForVideo() en otro subproceso.
Ejecuta la tarea
El segmentador de imágenes interactivo usa el método segment() para activar las inferencias. El Interactive Image Segmenter devuelve los segmentos detectados como datos de imagen a una función de devolución de llamada que estableces cuando ejecutas una inferencia para la tarea.
En el siguiente código, se muestra cómo ejecutar el procesamiento con el modelo de tareas:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);
Para obtener una implementación más completa de la ejecución de una tarea de Interactive Image Segmenter, consulta el ejemplo.
Cómo controlar y mostrar los resultados
Cuando se ejecuta la inferencia, la tarea Interactive Image Segmenter devuelve datos de imágenes segmentadas a una función de devolución de llamada. El contenido del resultado son datos de imagen y puede incluir una máscara de categoría, máscaras de confianza o ambas, según lo que hayas configurado cuando configuraste la tarea.
En las siguientes secciones, se explica con más detalle los datos de salida de esta tarea:
Máscara de categoría
En las siguientes imágenes, se muestra una visualización del resultado de la tarea para una máscara de valor de categoría con un área de interés de punto indicada. Cada píxel es un valor uint8 que indica si el píxel forma parte del objeto ubicado en el área de interés. El círculo en blanco y negro de la segunda imagen indica el área de interés seleccionada.
Imagen original y máscara de categoría de salida. Imagen de origen del conjunto de datos Pascal VOC 2012.
Máscara de confianza
La salida de una máscara de confianza contiene valores de números de punto flotante entre [0, 1] para cada canal de entrada de la imagen. Los valores más altos indican una mayor confianza en que el píxel de imagen forma parte del objeto ubicado en el área de interés.
En el código de ejemplo de Interactive Image Segmenter, se muestra cómo visualizar los resultados de clasificación que devuelve la tarea. Consulta el ejemplo para obtener más detalles.