La tarea de incorporación de imágenes de MediaPipe te permite convertir datos de imágenes en una representación numérica para realizar tareas de procesamiento de imágenes relacionadas con el AA, como comparar la similitud de dos imágenes. En estas instrucciones, se muestra cómo usar la incorporación de imágenes 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 Incorporación 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 incorporación de imágenes. Puedes ver, ejecutar y editar el código de ejemplo de la Incorporación de imágenes solo con tu navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar el entorno de desarrollo y los proyectos de código específicamente a fin de usar la incorporación 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 de incorporación 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 @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:
<!-- You can replace jsDelivr with your preferred CDN -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea de incorporación 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 la incorporación 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
Especifica una ruta de acceso al modelo
Puedes crear una tarea con las opciones predeterminadas mediante el método createFromModelPath():
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
baseOptions: {
modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
},
});
Especifica el búfer del modelo
Si tu modelo ya está cargado en la memoria, puedes usar el método createFromModelBuffer():
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
vision,
new Uint8Array(...)
);
Cómo especificar opciones personalizadas
La tarea de incorporación de imágenes de MediaPipe usa la función createFromOptions para configurarla. La función createFromOptions acepta valores para las opciones de configuración. Para obtener más información sobre las opciones de configuración, consulta Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con opciones personalizadas:
const vision = await FilesetResolver.forVisionTasks(
// path/to/wasm/root
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "model.tflite"
},
quantize: true
});
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 |
|---|---|---|---|
running_mode |
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 |
l2Normalize |
Indica si se debe normalizar el vector de atributos mostrados con la norma L2. Usa esta opción solo si el modelo todavía no contiene una operación nativa de TFLite L2_NORMALIZATION. En la mayoría de los casos, este ya es el caso y, por lo tanto, la normalización L2 se logra a través de inferencia de TFLite sin necesidad de esta opción. | Boolean |
False |
quantize |
Indica si la incorporación que se muestra debe cuantizarse en bytes a través de la cuantización escalar. Se supone implícitamente que las incorporaciones son la norma unitaria y, por lo tanto, se garantiza que cualquier dimensión tenga un valor en [-1.0, 1.0]. Si este no es el caso, usa la opción l2Normalize. | Boolean |
False |
Preparar los datos
La incorporación de imágenes puede incorporar 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 embed() y embedForVideo() de la incorporación de imágenes se ejecutan de forma síncrona y bloquean el subproceso de interfaz de usuario. Si deseas extraer vectores de atributos de fotogramas de video, cada incorporación bloqueará el subproceso principal.
Puedes evitarlo implementando trabajadores web para ejecutar los métodos embed() y embedForVideo() en otro subproceso.
Ejecuta la tarea
La incorporación de imágenes usa los métodos embed() (con el modo de ejecución image) y embedForVideo() (con el modo de ejecución video) para activar las inferencias. La API de Image Embedder mostrará los vectores de incorporación de la imagen de entrada.
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;
const imageEmbedderResult = imageEmbedder.embed(image);
Video
const video = document.getElementById("webcam");
const startTimeMs = performance.now();
const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
Cómo controlar y mostrar los resultados
Cuando se ejecuta la inferencia, la tarea de incorporación de imágenes muestra un objeto ImageEmbedderResult que contiene los vectores de incorporación para la imagen o el marco de entrada.
A continuación, se muestra un ejemplo de los datos de salida de esta tarea:
ImageEmbedderResult:
Embedding #0 (sole embedding head):
float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
head_index: 0
Este resultado se obtuvo mediante la incorporación de la siguiente imagen:
Puedes comparar la similitud semántica de dos incorporaciones con la función ImageEmbedder.cosineSimilarity. Consulta el siguiente código para ver un ejemplo.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
En el código de ejemplo de la incorporación de imágenes, se demuestra cómo mostrar los resultados de la incorporación que muestra la tarea. Consulta el ejemplo de código para obtener más información.