L'attività MediaPipe Image Embedder consente di convertire i dati immagine in una rappresentazione numerica per svolgere attività di elaborazione delle immagini correlate 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 nodi.
Per ulteriori informazioni su funzionalità, modelli e opzioni di configurazione di questa attività, consulta la Panoramica.
Esempio di codice
Il codice di esempio per Image Embedder fornisce un'implementazione completa in JavaScript come riferimento. Questo codice è utile per testare l'attività a creare la tua app di incorporamento di immagini. Puoi visualizzare, eseguire e modificare il Esempio di codice di incorporamento di immagini usando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e per i progetti di codice specifici per l'uso di Image Embedder. Per informazioni generali su configurare l'ambiente di sviluppo per l'utilizzo delle attività di MediaPipe, tra cui: i requisiti di versione della piattaforma, consulta Guida alla configurazione per il web.
Pacchetti JavaScript
Il codice dell'incorporamento di immagini è disponibile tramite MediaPipe @mediapipe/tasks-vision
Pacchetto NPM. Puoi
puoi trovare e scaricare queste librerie dai link forniti nella piattaforma
Guida alla configurazione.
Puoi installare i pacchetti richiesti con il seguente codice per la gestione temporanea locale utilizzando il seguente comando:
npm install @mediapipe/tasks-vision
Se vuoi importare il codice dell'attività tramite una 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.js"
crossorigin="anonymous"></script>
</head>
Modello
L'attività Embedder di immagini MediaPipe richiede un modello addestrato che sia compatibile con dell'attività. Per ulteriori informazioni sui modelli addestrati disponibili per l'incorporamento di immagini, consulta la panoramica delle attività nella sezione Modelli.
Seleziona e scarica un modello, quindi archivialo nella directory del progetto:
<dev-project-root>/app/shared/models/
Crea l'attività
Specifica un percorso per il modello
Puoi creare un'attività con le opzioni predefinite utilizzando l'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
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à Embedder di immagini MediaPipe utilizza la funzione createFromOptions per impostare
l'attività. La funzione createFromOptions accetta valori per
opzioni di configurazione. Per ulteriori informazioni
di configurazione, vedi Opzioni di configurazione.
Il codice seguente mostra come creare e configurare l'attività con opzioni:
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à include 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 metodi
modalità: IMAGE: la modalità per gli input di immagini singole. VIDEO: La modalità per i fotogrammi decodificati di un in 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 L2_NORMALIZZAZIONE TFLite Op. Nella maggior parte dei casi, questo è già il caso. La normalizzazione L2 viene quindi ottenuta attraverso l'inferenza TFLite senza necessità per questa opzione. | Boolean |
False |
quantize |
Indica se l'incorporamento restituito deve essere quantizzato in byte tramite quantizzazione scalare. Gli incorporamenti sono implicitamente considerati come norma unitaria. pertanto è garantito che qualsiasi dimensione abbia un valore pari a [-1,0, 1,0]. Utilizza le funzionalità di l'opzione l2Normalize in caso contrario. | Boolean |
False |
Preparazione dei dati
L'incorporamento di immagini può incorporare immagini in qualsiasi formato supportato browser host. L'attività gestisce anche la pre-elaborazione dell'input di dati, tra cui ridimensionamento, rotazione e normalizzazione dei valori.
Esecuzione di chiamate ai metodi embed() e embedForVideo() dell'incorporamento di immagini
in modo sincrono e bloccare il thread dell'interfaccia utente. Se vuoi estrarre
vettori di caratteristiche dai fotogrammi video, ogni incorporamento bloccherà il thread principale.
Puoi ovviare a questo problema implementando i web worker per eseguire embed() e
embedForVideo() metodi su un altro thread.
Esegui l'attività
L'incorporamento di immagini utilizza embed() (con la modalità di esecuzione image) e
Metodi embedForVideo() (con modalità di esecuzione video) per attivare
le inferenze. L'API Image Embedder restituirà i vettori di incorporamento per
come 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 aver eseguito l'inferenza, l'attività Incorporatore di immagini restituisce un
Oggetto ImageEmbedderResult che contiene i vettori di incorporamento per l'input
un'immagine o un 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 incorporamenti utilizzando
Funzione ImageEmbedder.cosineSimilarity. Consulta il seguente codice per
esempio.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Il codice di esempio dell'incorporamento di immagini mostra come visualizzare l'incorporamento i risultati restituiti dall'attività, controlla esempio di codice per maggiori dettagli.