L'attività MediaPipe Interactive Image Segmenter prende una posizione in un'immagine, stima i confini di un oggetto in quella posizione e restituisce la segmentazione dell'oggetto come dati dell'immagine. Queste istruzioni mostrano come utilizzare lo Segmentatore di immagini interattivo per Node e le applicazioni 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 lo strumento di segmentazione delle immagini interattivo 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 segmentazione delle immagini interattiva. Puoi visualizzare, eseguire e modificare il codice di esempio di Interactive Image Segmenter utilizzando solo il browser web. Puoi anche esaminare il codice di questo esempio su GitHub.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice specificamente per utilizzare lo strumento di segmentazione delle immagini interattive. 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 Interactive Image Segmenter è 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 --save @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:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modello
L'attività di segmentazione delle immagini interattive di MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per lo strumento di segmentazione delle immagini interattivo, 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à
Utilizza una delle funzioni di Interactive Image Segmenter createFrom...() per preparare l'attività all'esecuzione di inferenze. Utilizza la funzione createFromModelPath() con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già caricato in memoria, puoi utilizzare il metodo
createFromModelBuffer().
L'esempio di codice riportato di seguito mostra l'utilizzo della funzione createFromOptions() per configurare l'attività. La funzione createFromOptions consente di personalizzare lo Strumento di segmentazione delle immagini interattivo con 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:
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à offre 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 immagine uint8, in cui ogni valore del pixel indica se il pixel fa parte
dell'oggetto nell'area di interesse. |
{True, False} |
False |
outputConfidenceMasks |
Se impostato su True, l'output include una maschera di segmentazione
come immagine con valore float, in cui ogni valore float rappresenta la confidenza
che il pixel fa parte dell'oggetto nell'area di interesse. |
{True, False} |
True |
displayNamesLocale |
Imposta la lingua delle etichette da utilizzare per i nomi visualizzati forniti nei metadati del modello dell'attività, se disponibile. Il valore predefinito è en per
l'inglese. Puoi aggiungere etichette localizzate ai metadati di un modello personalizzato
utilizzando l'API TensorFlow Lite Metadata Writer
| Codice delle impostazioni internazionali | it |
Preparazione dei dati
Interactive Image Segmenter può segmentare gli oggetti nelle 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 segment() e segmentForVideo() di Interactive Image Segmenter vengono eseguite
in modo asincrono e bloccano il thread dell'interfaccia utente. Se segmenti gli oggetti nei frame video della fotocamera di un dispositivo, ogni attività di segmentazione blocca il thread principale. Puoi evitarlo implementando web worker per eseguire
segment() e segmentForVideo() su un altro thread.
Esegui l'attività
Lo strumento di segmentazione delle immagini interattive utilizza il metodo segment() per attivare le inferenze. Lo strumento Interactive Image Segmenter restituisce i segmenti rilevati come dati immagine a una funzione di callback 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);
Per un'implementazione più completa dell'esecuzione di un'attività di segmentazione delle immagini interattiva, consulta l'esempio di codice.
Gestire e visualizzare i risultati
Dopo l'esecuzione dell'inferenza, l'attività di segmentazione delle immagini interattiva restituisce i dati dell'immagine del segmento a una funzione di callback. I contenuti dell'output sono dati di immagini e possono includere una maschera di categoria, maschere di affidabilità o entrambe, a seconda di ciò che hai impostato quando hai configurato l'attività.
Le sezioni seguenti spiegano ulteriormente i dati di output di questa attività:
Maschera delle categorie
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una maschera di valore della categoria con un punto di interesse indicato. Ogni pixel è un valore uint8
che indica se il pixel fa parte dell'oggetto situato nell'area di
interesse. Il cerchio bianco e nero nella seconda immagine indica l'area di interesse selezionata.
Output dell'immagine originale e della maschera della categoria. Immagine di origine del set di dati Pascal VOC 2012.
Maschera di confidenza
L'output di una maschera di confidenza contiene valori di tipo float compresi tra [0, 1] per ogni canale di input dell'immagine. Valori più elevati indicano una maggiore certezza che il pixel dell'immagine faccia parte dell'oggetto nell'area di interesse.
Il codice di esempio di Interactive Image Segmenter mostra come visualizzare i risultati di classificazione restituiti dall'attività. Per maggiori dettagli, consulta l'esempio di codice.