La tarea de MediaPipe Image Segmenter te permite dividir las imágenes en regiones según categorías predefinidas para aplicar efectos visuales, como desenfoque de fondo. En estas instrucciones, se muestra cómo usar el Segmentador de imágenes para Node y apps web. Para 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 para el Segmentador de imágenes brinda una implementación completa de este 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 codificar proyectos específicamente para usar Image Segmenter. Para obtener información general configurar tu entorno de desarrollo para usar tareas de MediaPipe, como 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 contenido (CDN), agrega el siguiente código en la etiqueta en tu archivo HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea del segmentador de imágenes MediaPipe requiere un modelo entrenado que sea compatible con esta tarea. Para obtener más información sobre los modelos entrenados disponibles para el segmentador de imágenes, consulta la sección Modelos de la descripción general de la tarea.
Selecciona y descarga un modelo y, luego, guárdalo en el directorio de tu proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Utiliza una de las funciones createFrom...() del segmentador de imágenes 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().
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 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:
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 una tarea del Segmentador de imágenes, consulta el ejemplo de código de barras.
Opciones de configuración
Esta tarea tiene las siguientes opciones de configuración para aplicaciones web:
| Nombre de la opción | Descripción | Rango de valores | Valor predeterminado |
|---|---|---|---|
outputCategoryMask |
Si se establece en True, el resultado incluirá una máscara de segmentación.
como una imagen de uint8, en la que cada valor de píxel indica la categoría ganadora
valor. |
{True, False} |
False |
outputConfidenceMasks |
Si se establece en True, el resultado incluye una máscara de segmentación como una imagen de valor de punto flotante, en la que cada valor de punto flotante representa el mapa de puntuación de confianza de la categoría. |
{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á disponible. 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 |
resultListener |
Establece el objeto de escucha de resultados para que reciba los resultados de la segmentación de forma asíncrona cuando el segmentador de imágenes esté en el modo LIVE_STREAM.
Solo se puede usar cuando el modo de ejecución está establecido en LIVE_STREAM |
N/A | N/A |
Preparar los datos
que puede segmentar objetos en imágenes en cualquier formato compatible con el navegador del host. La tarea también controla el procesamiento previo de la entrada de datos, lo que incluye 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 la interfaz de usuario. Si segmentas objetos en los fotogramas de video de 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 usa el método segment() con el modo de imagen y el método segmentForVideo() con el modo video para activar inferencias. El segmentador de imágenes muestra los segmentos detectados como datos de imagen a una función de devolución de llamada que configuraste cuando ejecutaste una inferencia para la tarea.
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; 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 una tarea de Image Segmenter, 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 la imagen del segmento a una función de devolución de llamada. El contenido del resultado depende del outputType que establezcas.
cuando configuraste la tarea.
En las siguientes secciones, se muestran ejemplos de los datos de salida de esta tarea:
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 de números de punto flotante entre [0, 1].
Imagen original y resultado de la máscara de confianza de la categoría. Imagen de origen de Pascal VOC 2012 conjunto de datos.
Valor 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. El rango de la máscara de categorías es [0, 255] y cada valor de píxel representa el índice de categoría ganador del resultado del modelo. La categoría ganadora
índice tiene la puntuación más alta entre las categorías que el modelo puede reconocer.
Imagen original y resultado de la máscara de categoría. Imagen de origen de Pascal VOC 2012 conjunto de datos.
El código de ejemplo del segmentador de imágenes demuestra cómo mostrar la segmentación resultados que devolvió la tarea, consulta la ejemplo de código para conocer los detalles.