L'attività MediaPipe Image Embedder ti consente di convertire i dati delle immagini in una rappresentazione numerica per eseguire attività di elaborazione delle immagini correlate all'IA, ad esempio il confronto della somiglianza di due immagini. Queste istruzioni mostrano come utilizzare l'editor di immagini per Node e le app web.
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'inserimento di immagini fornisce un'implementazione completa di questa attività in JavaScript per riferimento futuro. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di incorporamento delle immagini. Puoi visualizzare, eseguire e modificare il codice di esempio dell'Incorporatore di immagini utilizzando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice in modo specifico per utilizzare 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.
Puoi installare i pacchetti richiesti con il seguente codice per l'implementazione locale utilizzando il seguente comando:
npm install @mediapipe/tasks-vision
Se vuoi importare il codice dell'attività tramite un servizio 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à 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 memorizzalo 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 le opzioni personalizzate
L'attività MediaPipe Image Embedder 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 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à offre le seguenti opzioni di configurazione per le applicazioni web:
| Nome opzione | Descrizione | Intervallo di valori | Valore predefinito |
|---|---|---|---|
running_mode |
Imposta la modalità di esecuzione dell'attività. Esistono due modi: IMMAGINE: la modalità per gli input di singole immagini. VIDEO: la modalità per i frame decodificati di un video o di un live streaming di dati di input, ad esempio di 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'operazione L2_NORMALIZATION TFLite nativa. Nella maggior parte dei casi, è già così e la normalizzazione L2 viene quindi raggiunta tramite l'inferenza TFLite senza bisogno di questa opzione. | Boolean |
False |
quantize |
Indica se l'embedding restituito deve essere quantizzato in byte tramite la quantizzazione scalare. Si presume implicitamente che gli incorporamenti siano di norma unitaria e quindi qualsiasi dimensione abbia un valore garantito compreso tra -1,0 e 1,0. Utilizza l'opzione l2Normalize se non è così. | Boolean |
False |
Preparazione dei dati
Image Embedder può incorporare immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la preelaborazione dell'input dei dati, tra cui ridimensionamento, rotazione e 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 vettori di funzionalità dai frame video, ogni embedding bloccherà il thread principale.
Puoi evitarlo implementando i worker web per eseguire i metodi embed() e embedForVideo() su un altro thread.
Esegui l'attività
L'Inserzionista 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 restituisce 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);
Gestire e visualizzare i risultati
Dopo l'esecuzione dell'inferenza, l'attività di incorporamento delle immagini restituisce un oggetto ImageEmbedderResult contenente 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 inserendo la seguente immagine:
Puoi confrontare la somiglianza semantica di due embedding utilizzando la funzioneImageEmbedder.cosineSimilarity. Vedi il codice seguente per un
esempio.
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
Il codice di esempio dell'evidenziatore di immagini mostra come visualizzare i risultati dell'evidenziatore retitrati dall'attività. Per maggiori dettagli, consulta l'esempio di codice.