La tarea del Segmentador de imágenes de MediaPipe te permite dividir las imágenes en regiones según categorías para aplicar efectos visuales, como difuminado del fondo. Estos este instructivo te muestra cómo usar el Segmentador de imágenes para aplicaciones web y de nodos. 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 la tarea y Comienza a compilar tu propia aplicación de segmentación de imágenes. Puedes ver, ejecutar y editar el Segmento de imágenes código de ejemplo usando solo el 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 proyectos de código específicamente para usar el segmento de imágenes. 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 segmento de imágenes está disponible a través de MediaPipe @mediapipe/tasks-vision.
NPM. Puedes
encuentra y descarga estas bibliotecas desde los vínculos proporcionados en la plataforma.
Guía de configuración.
Puedes instalar los paquetes obligatorios con el siguiente código para la etapa de pruebas local con el siguiente comando:
npm install --save @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 en 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 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 segmento de imágenes para hacer 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 la
Segmentador de imágenes con opciones de configuración. Para obtener más información sobre la tarea
configuración, 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 las 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 incluirá una máscara de segmentación.
como una imagen de valor flotante, donde cada valor flotante representa la confianza
mapa de puntuaciones de la categoría. |
{True, False} |
True |
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 |
resultListener |
Configura el objeto de escucha de resultados para recibir los resultados de la segmentación.
de forma asíncrona cuando el segmento 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 la 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.
Las llamadas a los métodos segment() y segmentForVideo() del segmentador de imágenes se ejecutan
de forma síncrona y bloquea 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 la principal
conversación. Para evitar esto, implementa trabajadores web para que se 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 inferencias El
El segmentador de imágenes devuelve los segmentos detectados como datos de imagen a una devolución de llamada
que configuraste al ejecutar 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 del Segmentador de imágenes, consulta el ejemplo de código de barras.
Cómo controlar y mostrar resultados
Luego de ejecutar la inferencia, la tarea del Segmentador de imágenes devuelve los datos de la imagen del segmento a un
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 categoría
máscara de confianza. El resultado de la máscara de confianza contiene valores flotantes entre
[0, 1]
Resultado de la máscara de confianza de imagen y categoría original. 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 categoría
de valor. 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. La categoría ganadora
índice tiene la puntuación más alta entre las categorías que el modelo puede reconocer.
Resultado de imagen original y 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.