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. Estas instrucciones te muestran cómo usar la herramienta de incorporación de imágenes para aplicaciones web y de nodos.
Para obtener más información sobre las capacidades, los modelos y las opciones de configuración para completar esta tarea, consulta la Descripción general.
Ejemplo de código
El ejemplo de código para Image Embedder ofrece 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 app de incorporación de imágenes. Puedes ver, ejecutar y edita el Código de ejemplo de Image Embedder usando solo el 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. 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 de Image Embedder 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 @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:
<!-- 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 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 al modelo
Puedes crear una tarea con las opciones predeterminadas mediante createFromModelPath().
método:
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
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 MediaPipe Image Embedder usa la función createFromOptions para establecer
para completar la tarea. La función createFromOptions acepta valores para
opciones de configuración. Para obtener más información
de configuración, consulta Opciones de configuración.
En el siguiente código, se muestra cómo compilar y configurar la tarea con Opciones:
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 entradas de una sola imagen. VIDEO: el modo para fotogramas decodificados de una 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 mostrado con la norma L2. Usa esta opción solo si el modelo no contiene un código nativo L2_NORMALIZATION TFLite Op. En la mayoría de los casos, esto ya es así y Así, la normalización de L2 se logra mediante la inferencia de TFLite sin necesidad para esta opción. | Boolean |
False |
quantize |
Si la incorporación devuelta se debe cuantificar a bytes mediante la cuantización escalar. Se supone implícitamente que las incorporaciones son norma de unidad y por lo que se garantiza que cualquier dimensión tendrá un valor en [-1.0, 1.0]. Usa la opción l2Normalizar si no es así. | Boolean |
False |
Preparar los datos
La incorporación de imágenes puede incorporar imágenes en cualquier formato que admita 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 a los métodos embed() y embedForVideo() de la incorporación de imágenes.
de forma síncrona y bloquea el subproceso de la interfaz de usuario. Si quieres extraer
vectores de atributos de fotogramas de video, cada incorporación bloqueará el subproceso principal.
Para evitar esto, implementa trabajadores web para ejecutar embed() y
Métodos embedForVideo() en otro subproceso.
Ejecuta la tarea
La incorporación de imágenes usa embed() (con modo de ejecución image) y
Métodos embedForVideo() (con el modo de ejecución video) para activar
para hacer inferencias. La API de Image Embedder devolverá los vectores de incorporación para el
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 resultados
Luego de ejecutar la inferencia, la tarea de incorporación de imágenes muestra un
Un objeto ImageEmbedderResult que contiene los vectores de incorporación para la entrada
imagen o marco.
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 con la incorporación de la siguiente imagen:
Puedes comparar la similitud semántica de dos incorporaciones con el
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 la herramienta de incorporación de imágenes demuestra cómo mostrar la incorporación. resultados que devolvió la tarea, consulta la ejemplo de código para conocer los detalles.