L'attività MediaPipe Image Embedder consente di convertire i dati immagine in una rappresentazione numerica per svolgere attività di elaborazione delle immagini relative al machine learning, come il confronto della somiglianza tra due immagini. Queste istruzioni mostrano come utilizzare l'incorporamento di immagini per le app web e per i nodi.
Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la Panoramica.
Esempio di codice
Il codice di esempio per l'incorporamento di immagini fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti consente di testare questa attività e di iniziare a creare la tua app di incorporamento delle immagini. Puoi visualizzare, eseguire e modificare il codice di esempio di Image Embedder utilizzando semplicemente il tuo browser web.
Configurazione
In questa sezione vengono descritti i passaggi chiave per configurare l'ambiente di sviluppo e codificare i progetti in modo specifico per l'utilizzo di Image Embedder. Per informazioni generali sulla configurazione dell'ambiente di sviluppo per l'utilizzo delle attività di MediaPipe, inclusi i requisiti di versione della piattaforma, consulta la Guida alla configurazione per il web.
Pacchetti JavaScript
Il codice di incorporamento delle immagini è disponibile tramite il pacchetto NPM @mediapipe/tasks-vision di MediaPipe. Puoi
trovare e scaricare queste librerie dai link disponibili nella
Guida alla configurazione della piattaforma.
Puoi installare i pacchetti richiesti con il codice seguente per la gestione temporanea locale utilizzando il comando seguente:
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 del file 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>
Modello
L'attività Incorporamento di immagini MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per l'incorporamento di immagini, consulta la sezione Modelli della panoramica dell'attività.
Seleziona e scarica un modello, quindi archivialo all'interno della directory del progetto:
<dev-project-root>/app/shared/models/
Creare l'attività
Specifica un percorso per il 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à Incorporamento di immagini MediaPipe utilizza la funzione createFromOptions per configurarla. La funzione createFromOptions accetta valori per le opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione, consulta Opzioni di configurazione.
Il codice seguente 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à prevede 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 singole immagini. VIDEO: la modalità per i fotogrammi decodificati di un video o durante un live streaming di dati di input, ad esempio da una videocamera. |
{IMAGE, VIDEO} |
IMAGE |
l2Normalize |
Indica se normalizzare il vettore di caratteristiche restituito con la norma L2. Utilizza questa opzione solo se il modello non contiene già un'operatività TFLite L2_NORMALIZATION nativa. Nella maggior parte dei casi, è già così e la normalizzazione L2 viene quindi ottenuta tramite l'inferenza TFLite senza necessità di questa opzione. | Boolean |
False |
quantize |
Indica se l'incorporamento restituito deve essere quantizzato in byte tramite la quantizzazione scalare. Gli incorporamenti si presume implicitamente come unità-norm, pertanto è garantito che ogni dimensione abbia un valore in [-1.0, 1.0]. In caso contrario, utilizza l'opzione l2Normalize. | Boolean |
False |
Preparazione dei dati
L'incorporamento di immagini può incorporare immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input, come ridimensionamento, rotazione e normalizzazione del valore.
Le chiamate ai metodi embed() e embedForVideo() di incorporamento di immagini vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente. Se vuoi estrarre
i vettori di caratteristiche dai frame video, ogni incorporamento bloccherà il thread principale.
Puoi evitare che ciò accada implementando i web worker per eseguire i metodi embed() e embedForVideo() in un altro thread.
Esegui l'attività
L'incorporamento di immagini utilizza i metodi embed() (con modalità di esecuzione image) e embedForVideo() (con modalità di esecuzione video) per attivare le inferenze. L'API Image Embedder restituirà i vettori di incorporamento 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);
Gestire e visualizzare i risultati
Dopo l'esecuzione dell'inferenza, l'attività Incorporamento di immagini restituisce un oggetto ImageEmbedderResult che contiene i vettori di incorporamento per l'immagine o il frame di input.
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 incorporamenti utilizzando la
funzione ImageEmbedder.cosineSimilarity. Per un esempio, vedi il codice che segue.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Il codice di esempio dell'incorporamento di immagini mostra come visualizzare i risultati dell'incorporamento restituiti dall'attività. Per i dettagli, consulta l'esempio di codice.