L'attività MediaPipe Image Embedder consente di convertire i dati delle immagini in una rappresentazione numerica per eseguire attività di elaborazione delle immagini correlate al ML, ad esempio confrontare la somiglianza di due immagini. Queste istruzioni mostrano come utilizzare Image Embedder per le app web e Node.
Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la panoramica.
Codice di esempio
Il codice di esempio per Image Embedder fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di embedding di immagini. Puoi visualizzare, eseguire, e modificare l'esempio di Image Embedder utilizzando semplicemente il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice specificamente per l'utilizzo di Image Embedder. Per informazioni generali sulla configurazione dell'ambiente di sviluppo per l'utilizzo delle attività MediaPipe, inclusi i requisiti della versione della piattaforma, consulta la guida alla configurazione per il web.
Pacchetti JavaScript
Il codice di Image Embedder è disponibile tramite il pacchetto @mediapipe/tasks-vision
NPM di MediaPipe. Puoi
trovare e scaricare queste librerie dai link forniti nella guida alla configurazione della piattaforma
Setup.
Puoi installare i pacchetti richiesti con il seguente codice per lo staging locale utilizzando il seguente comando:
npm install @mediapipe/tasks-vision
Se vuoi importare il codice dell'attività tramite un servizio di rete CDN (Content Delivery Network) , aggiungi il seguente codice nel tag nel file 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>
Modello
L'attività MediaPipe Image Embedder richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per Image Embedder, consulta la sezione Modelli della panoramica dell'attività.
Seleziona e scarica un modello, quindi archivialo nella directory del progetto:
<dev-project-root>/app/shared/models/
Crea l'attività
Specifica un percorso del modello
Puoi creare un'attività con le opzioni predefinite utilizzando il metodo 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`
},
});
Specifica il buffer del modello
Se il modello è già caricato in memoria, puoi utilizzare il metodo 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(...)
);
Specifica opzioni personalizzate
L'attività MediaPipe Image Embedder utilizza la createFromOptions funzione per configurare
l'attività. La funzione createFromOptions accetta valori per le opzioni di
configurazione. Per ulteriori informazioni sulle
opzioni di configurazione, consulta Opzioni di configurazione.
Il seguente codice mostra come creare e configurare l'attività con opzioni personalizzate:
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
});
Opzioni di configurazione
Questa attività ha le seguenti opzioni di configurazione per le applicazioni web:
| Nome opzione | Descrizione | Intervallo di valori | Valore predefinito |
|---|---|---|---|
running_mode |
Imposta la modalità di esecuzione per l'attività. Esistono due
modalità: IMAGE: la modalità per gli input di una singola immagine. VIDEO: la modalità per i frame decodificati di un video o di un live streaming di dati di input, ad esempio da una videocamera. |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
Indica se normalizzare il vettore di funzionalità restituito con la norma L2. Utilizza questa opzione solo se il modello non contiene già un'operazione TFLite L2_NORMALIZATION nativa. Nella maggior parte dei casi, questo è già il caso e la normalizzazione L2 viene quindi ottenuta tramite l'inferenza TFLite senza la necessità di questa opzione. | Boolean |
False |
quantize |
Indica se l'embedding restituito deve essere quantizzato in byte tramite la quantizzazione scalare. Si presuppone implicitamente che gli embedding siano di norma unitaria e pertanto è garantito che qualsiasi dimensione abbia un valore in [-1.0, 1.0]. Utilizza l'opzione l2Normalize se non è questo il caso. | Boolean |
False |
Preparazione dei dati
Image Embedder può incorporare immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input dei dati, inclusi il ridimensionamento, la rotazione e la normalizzazione dei valori.
Le chiamate ai metodi embed() e embedForVideo() di Image Embedder vengono eseguite in modo
sincrono e bloccano il thread dell'interfaccia utente. Se vuoi estrarre i vettori di funzionalità dai frame video, ogni embedding bloccherà il thread principale.
Puoi evitare questo problema implementando i web worker per eseguire i metodi embed() e
embedForVideo() su un altro thread.
Esegui l'attività
Image Embedder utilizza i metodi embed() (con la modalità di esecuzione image) e
embedForVideo() (con la modalità di esecuzione video) per attivare
le inferenze. L'API Image Embedder restituirà i vettori di embedding per l'
immagine di input.
Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:
Immagine
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);
Gestisci e visualizza i risultati
Dopo l'esecuzione dell'inferenza, l'attività Image Embedder restituisce un
ImageEmbedderResult oggetto che contiene i vettori di embedding per l'input
immagine o frame.
Di seguito è riportato un esempio dei dati di output di questa attività:
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
Questo risultato è stato ottenuto incorporando la seguente immagine:
Puoi confrontare la somiglianza semantica di due embedding utilizzando la funzione ImageEmbedder.cosineSimilarity. Per un esempio, consulta il seguente codice.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Il codice di esempio di Image Embedder mostra come visualizzare i risultati dell'embedder restituiti dall'attività. Per i dettagli, consulta l' esempio .