La tarea del Segmentador de imágenes interactiva de MediaPipe toma una ubicación en una imagen y estima los límites de un objeto en esa ubicación y devuelve la segmentación del objeto como imagen de datos no estructurados. Estas instrucciones te muestran cómo usar el Segmentador de imágenes interactivo para Node y la Web de Google Chat. Para obtener más información sobre las capacidades, los modelos y la configuración para realizar esta tarea, consulta la Descripción general.
Ejemplo de código
El código de ejemplo del Segmentador de imágenes interactivo 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 interactiva de segmentación de imágenes. Puedes ver, ejecutar y editar el Segmentador de imágenes interactivo 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 segmentador de imágenes interactivo. 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 interactivo 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 interactiva de 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 interactivo, 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 interactivo 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 interactivo con opciones de configuración. Para obtener más información sobre la configuración
consulta Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con Opciones:
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 establece en True, el resultado incluirá una máscara de segmentación.
que una imagen de uint8, donde cada valor de píxel indica si el píxel es parte de
el objeto ubicado en el área de interés. |
{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
que el píxel sea parte del objeto ubicado en el área de interés. |
{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 |
Preparar los datos
El segmentador de imágenes interactivo puede segmentar 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.
Se ejecutan las llamadas al segmento interactivo de imágenes de los métodos segment() y segmentForVideo().
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 interactivo usa el método segment() para activar las inferencias. El
El Segmentador de imágenes interactivo 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:
const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
image,
{
keypoint: {
x: event.offsetX / event.target.width,
y: event.offsetY / event.target.height
}
},
callback);