La tarea de incorporación de imágenes de MediaPipe te permite convertir datos de imagen 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 el incorporador 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 de Image Embedder proporciona una implementación completa de esta tarea en JavaScript como 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 Image Embedder solo con tu navegador web.
Configuración
En esta sección, se describen los pasos clave para configurar tu entorno de desarrollo y codificar proyectos específicamente para usar el Insertador 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 incorporador 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 contenido (CDN), agrega el siguiente código en la etiqueta en 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 MediaPipe Image Embedder requiere un modelo entrenado que sea compatible con esta tarea. Para obtener más información sobre los modelos entrenados disponibles para Image Embedder, 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
Especifica una ruta de acceso del 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 se cargó 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(...)
);
Especifica 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 tiene las siguientes opciones de configuración para aplicaciones web:
| Nombre de la opción | Descripción | Rango de valores | Valor predeterminado |
|---|---|---|---|
running_mode |
Establece el modo de ejecución de la tarea. Existen dos modos: IMAGE: Es 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 características que se muestra con la norma L2. Usa esta opción solo si el modelo aún no contiene una operación nativa de TFLite L2_NORMALIZATION. En la mayoría de los casos, ya es así, y la normalización de L2 se logra a través de la inferencia de TFLite sin necesidad de esta opción. | Boolean |
False |
quantize |
Indica si la incorporación que se muestra debe cuantificarse en bytes a través de la cuantificación escalar. Se supone implícitamente que las incorporaciones tienen una norma de unidad y, por lo tanto, se garantiza que cualquier dimensión tenga un valor en [-1.0, 1.0]. Usa la opción l2Normalize si no es así. | Boolean |
False |
Preparar los datos
Image Embedder puede incorporar imágenes en cualquier formato compatible con el navegador anfitrión. 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 embed() y embedForVideo() del incorporador de imágenes se ejecutan de forma síncrona y bloquean el subproceso de la interfaz de usuario. Si quieres extraer vectores de características de los fotogramas de video, cada incorporación bloqueará el subproceso principal.
Para evitar esto, puedes implementar trabajadores web para ejecutar los métodos embed() y embedForVideo() en otro subproceso.
Ejecuta la tarea
El incorporador 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 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:
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 Image Embedder muestra un objeto ImageEmbedderResult que contiene los vectores de incorporación para la imagen o el fotograma de entrada.
A continuación, se muestra un ejemplo de los datos de resultado 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 incorporando 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 del incorporador de imágenes, se muestra cómo mostrar los resultados del incorporador que se devuelven de la tarea. Consulta el ejemplo de código para obtener más información.