La tarea MediaPipe Image Embedder 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 Image Embedder 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 Image Embedder proporciona una implementación completa de esta tarea en JavaScript para tu referencia. Este código te ayuda a probar esta tarea y a comenzar a compilar tu propia app de incorporación de imágenes. Puedes ver, ejecutar y editar el ejemplo de Image Embedder con solo tu navegador web.
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 Image Embedder. Si deseas obtener información general para configurar tu entorno de desarrollo para usar las tareas de MediaPipe, incluidos los requisitos de versión de la plataforma, consulta la guía de configuración para la Web.
Paquetes de JavaScript
El código de Image Embedder está disponible a través del paquete @mediapipe/tasks-vision de 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 requeridos con el siguiente código para la organización 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 <head> 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.mjs"
crossorigin="anonymous"></script>
</head>
Modelo
La tarea 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 del resumen de la tarea.
Selecciona y descarga un modelo, y, luego, almacénalo en el directorio de tu proyecto:
<dev-project-root>/app/shared/models/
Crea la tarea
Cómo especificar una ruta de acceso al modelo
Puedes crear una tarea con las opciones predeterminadas usando 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`
},
});
Cómo especificar 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 MediaPipe Image Embedder usa la función createFromOptions para configurar la tarea. 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.
El siguiente código 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 las 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 las entradas de una sola imagen. VIDEO: Es el modo para los fotogramas decodificados de un video o de 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 devuelto con la norma L2. Usa esta opción solo si el modelo aún no contiene una operación L2_NORMALIZATION nativa de TFLite. En la mayoría de los casos, esto ya sucede y, por lo tanto, la normalización L2 se logra a través de la inferencia de TFLite sin necesidad de esta opción. | Boolean |
False |
quantize |
Indica si el embedding devuelto se debe cuantificar en bytes a través de la cuantificación escalar. Se supone implícitamente que las incorporaciones tienen norma unitaria y, por lo tanto, se garantiza que cualquier dimensión tenga un valor en [-1.0, 1.0]. Usa la opción l2Normalize si este no es el caso. | Boolean |
False |
Preparar los datos
Image Embedder puede incorporar imágenes en cualquier formato compatible con el navegador host. La tarea también controla el preprocesamiento de la 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 Image Embedder se ejecutan de forma síncrona y bloquean el subproceso de la interfaz de usuario. Si deseas 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 las inferencias. La API de Image Embedder devolverá 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 devuelve un objeto ImageEmbedderResult que contiene los vectores de incorporación de 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 embeddings 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]);
El código de ejemplo de Image Embedder muestra cómo mostrar los resultados del modelo de lenguaje integrado que devuelve la tarea. Consulta el ejemplo para obtener más detalles.