La tarea Segmentador de imágenes de MediaPipe te permite dividir las imágenes en regiones según las categorías predefinidas para aplicar efectos visuales, como el desenfoque del fondo. En estas instrucciones, se muestra cómo usar el Segmentador de imágenes para apps web y de Node. 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 del Segmentador 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 segmentación de imágenes. Puedes ver, ejecutar y editar el código de ejemplo del Segmentador de imágenes solo con tu navegador web. También puedes revisar el código de este ejemplo en GitHub.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo y los proyectos de código específicamente para usar el Segmentador de imágenes. Si deseas obtener información general sobre cómo configurar tu 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 segmentador de imágenes está disponible a través del paquete @mediapipe/tasks-vision
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 necesarios con el siguiente código para la etapa de pruebas 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 contenidos (CDN), agrega el siguiente código a la etiqueta de tu archivo HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea Segmentador de imágenes de 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 Segmentador de imágenes, 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 createFrom...() del Segmentador de imágenes 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() para configurar la tarea. La función createFromOptions te permite personalizar el Segmentador de imágenes con opciones de configuración. Para obtener más información sobre la configuración de tareas, consulta Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con opciones personalizadas:
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
Para obtener una implementación más completa de la creación de la tarea del Segmentador de imágenes, 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 |
outputCategoryMask |
Si se configura en True, el resultado incluye una máscara de segmentación como una imagen uint8, en la que cada valor de píxel indica el valor de la categoría ganadora. |
{True, False} |
False |
outputConfidenceMasks |
Si se configura como True, el resultado incluye una máscara de segmentación como una imagen de valor flotante, en la que cada valor flotante representa el mapa de puntuación de confianza de la categoría. |
{True, False} |
True |
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 |
Preparar los datos
El Segmentador de imágenes puede segmentar objetos en imágenes en cualquier formato compatible con 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.
Las llamadas a los métodos segment() y segmentForVideo() del Segmentador de imágenes se ejecutan de forma síncrona y bloquean el subproceso de interfaz de usuario. Si segmentas objetos en fotogramas de video desde la cámara de un dispositivo, cada tarea de segmentación bloqueará el subproceso principal. Puedes evitarlo implementando trabajadores web para que ejecuten segment() y segmentForVideo() en otro subproceso.
Ejecuta la tarea
El Segmentador de imágenes usa el método segment() con el modo de imagen y el método segmentForVideo() con el modo video para activar las inferencias. El Segmentador de imágenes muestra los segmentos detectados como datos de imágenes a una función de devolución de llamada que estableciste cuando ejecutas una inferencia para la tarea.
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;
imageSegmenter.segment(image, callback);
Video
async function renderLoop(): void {
const video = document.getElementById("video");
let startTimeMs = performance.now();
imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);
requestAnimationFrame(() => {
renderLoop();
});
}
Para obtener una implementación más completa de la ejecución de la tarea del Segmentador de imágenes, consulta el ejemplo de código.
Cómo controlar y mostrar los resultados
Cuando se ejecuta la inferencia, la tarea del Segmentador de imágenes muestra los datos de las imágenes de segmentos a una función de devolución de llamada. El contenido del resultado depende del outputType que estableciste cuando configuraste la tarea.
En las siguientes secciones, se muestran ejemplos de los datos de salida de esta tarea:
Nivel de confianza de la categoría
En las siguientes imágenes, se muestra una visualización del resultado de la tarea para una máscara de confianza de categoría. El resultado de la máscara de confianza contiene valores flotantes entre [0, 1].
Resultado original de la máscara de confianza de la imagen y la categoría. Imagen de origen del conjunto de datos Pascal VOC 2012.
Valor de la 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. El rango de máscara de categoría es [0, 255], y cada valor de píxel representa el índice de la categoría ganadora del resultado del modelo. El índice de la categoría ganadora tiene la puntuación más alta entre las categorías que el modelo puede reconocer.
Resultado original de la imagen y la máscara de categoría. Imagen de origen del conjunto de datos Pascal VOC 2012.
En el código de ejemplo del Segmentador de imágenes, se demuestra cómo mostrar los resultados de la segmentación que muestra la tarea. Consulta el ejemplo de código para obtener más detalles.