L'attività Interactive Image Segmenter di MediaPipe prende una posizione in un'immagine, stima i confini di un oggetto in quella posizione e restituisce la segmentazione per l'oggetto come immagine e i dati di Google Cloud. Queste istruzioni mostrano come utilizzare il Segmenter di immagini interattive per nodi e web app. Per ulteriori informazioni su funzionalità, modelli e configurazione opzioni di questa attività, consulta la Panoramica.
Esempio di codice
Il codice d'esempio del Segmentazione delle immagini interattive fornisce un'implementazione completa in JavaScript come riferimento. Questo codice è utile per testare l'attività iniziare a creare la tua app interattiva per la segmentazione delle immagini. Puoi visualizza, esegui e modifica la segmentazione interattiva delle immagini esempio di codice usando solo il browser web. Puoi anche rivedere il codice per questo esempio su GitHub.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e per i progetti di codice che utilizzano specificatamente la segmentazione delle immagini interattive. 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 del programma di segmentazione delle immagini interattive è disponibile tramite @mediapipe/tasks-vision di MediaPipe
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 --save @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:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modello
L'attività Interactive Image Segmenter di MediaPipe richiede un modello addestrato compatibile con questo dell'attività. Per ulteriori informazioni sui modelli addestrati disponibili per la segmentazione interattiva delle 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à
Usa una delle funzioni createFrom...() di segmentazione delle immagini interattiva per
per preparare l'attività per l'esecuzione delle inferenze. Usa createFromModelPath()
con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già caricato in memoria, puoi utilizzare
createFromModelBuffer().
L'esempio di codice seguente mostra l'utilizzo della funzione createFromOptions() per
configurare l'attività. La funzione createFromOptions ti consente di personalizzare
Segmentazione di immagini interattiva con opzioni di configurazione. Per ulteriori informazioni sulla configurazione
vedi Opzioni di configurazione.
Il codice seguente mostra come creare e configurare l'attività con opzioni:
async function createSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
},
});
}
createSegmenter();
Opzioni di configurazione
Questa attività include le seguenti opzioni di configurazione per le applicazioni web:
| Nome opzione | Descrizione | Intervallo di valori | Valore predefinito |
|---|---|---|---|
outputCategoryMask |
Se impostato su True, l'output include una maschera di segmentazione
come un'immagine uint8, dove ogni valore di pixel indica se il pixel fa parte di
all'oggetto situato nell'area di interesse. |
{True, False} |
False |
outputConfidenceMasks |
Se impostato su True, l'output include una maschera di segmentazione
come immagine con valore in virgola mobile, in cui ogni valore in virgola mobile rappresenta la confidenza
che il pixel sia parte dell'oggetto che si trova nell'area di interesse. |
{True, False} |
True |
displayNamesLocale |
Imposta la lingua delle etichette da utilizzare per i nomi visualizzati forniti nel
metadati del modello dell'attività, se disponibili. Il valore predefinito è en per
Inglese. Puoi aggiungere etichette localizzate ai metadati di un modello personalizzato
Utilizzando l'API TensorFlow Metadata Writer
| Codice impostazioni internazionali | it |
Preparazione dei dati
Il segmento interattivo di immagini può segmentare oggetti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input di dati, tra cui ridimensionamento, rotazione e normalizzazione dei valori.
Vengono eseguite le chiamate ai metodi Interactive Image Segmenter segment() e segmentForVideo()
in modo sincrono e bloccare il thread dell'interfaccia utente. Se segmenti gli oggetti
fotogrammi dalla fotocamera di un dispositivo; ogni attività di segmentazione blocca l'immagine
. Puoi evitarlo implementando i web worker per eseguire
segment() e segmentForVideo() su un altro thread.
Esegui l'attività
Il segmento di immagini interattive utilizza il metodo segment() per attivare le inferenze. La
Il segmento interattivo di immagini restituisce i segmenti rilevati come dati immagine a un callback
funzione impostata durante l'esecuzione di un'inferenza per l'attività.
Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);