L'attività Segmentazione di immagini interattive MediaPipe prende una posizione in un'immagine, stima i limiti di un oggetto in quella posizione e restituisce la segmentazione per l'oggetto come dati immagine. Queste istruzioni mostrano come utilizzare il segmentatore di immagini interattivo 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 il segmenter immagini interattivo fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti consente di testare questa attività e iniziare a creare la tua app interattiva di segmentazione delle immagini. Puoi visualizzare, eseguire e modificare il codice di esempio del segmento di pubblico interattivo di immagini utilizzando semplicemente il tuo browser web. Puoi anche esaminare il codice per questo esempio su GitHub.
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 Interactive Image Segmenter. 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 del segmentatore di immagini interattivo è 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 --save @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:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
Modello
L'attività Segmenter di immagini interattive MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per il Segmenter di immagini interattivo, 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à
Utilizza una delle funzioni Interactive Image Segmenter createFrom...() per preparare l'attività all'esecuzione delle inferenze. Utilizza la funzione createFromModelPath()
con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già stato 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
il Segmenter di immagini interattivo con 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:
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à prevede 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 di pixel indica se il pixel fa parte
dell'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 l'affidabilità
che il pixel fa parte dell'oggetto situato 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 disponibili. Il valore predefinito è en per
l'inglese. Puoi aggiungere etichette localizzate ai metadati di un modello personalizzato utilizzando l'API Metadata Writer di TensorFlow Lite
| Codice impostazioni internazionali | it |
Preparazione dei dati
Il Segmenter di immagini interattivo può segmentare gli oggetti nelle 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 Interactive Image Segmenter segment() e segmentForVideo() vengono eseguite
in modo sincrono e bloccano il thread dell'interfaccia utente. Se suddividi gli oggetti nei frame video dalla fotocamera di un dispositivo, ogni attività di segmentazione blocca il thread principale. Puoi evitare questo problema implementando i web worker per l'esecuzione di
segment() e segmentForVideo() su un altro thread.
Esegui l'attività
Il segmenter immagini interattivo utilizza il metodo segment() per attivare le inferenze. Il segmenter di immagini interattivo restituisce i segmenti rilevati come dati di 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 interattive, consulta l'esempio di codice.
Gestire e visualizzare i risultati
Dopo l'esecuzione dell'inferenza, l'attività Segmentazione delle immagini interattive restituisce i dati dell'immagine di segmento a una funzione di callback. Il contenuto dell'output è costituito da dati di immagine e potrebbe includere una maschera di categoria, una maschera di confidenza 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 categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una maschera del valore di categoria con un'area punti di interesse indicata. Ogni pixel è un valore uint8 che indica se il pixel fa parte dell'oggetto situato nell'area di interesse. Il cerchio bianco e nero sulla seconda immagine indica
l'area di interesse selezionata.
Output della maschera di categoria e immagine originale. Immagine di origine dal set di dati di Pascal VOC 2012.
Maschera di confidenza
L'output per una maschera di confidenza contiene valori in virgola mobile compresi tra [0, 1] per ogni canale di input dell'immagine. Valori più elevati indicano una maggiore affidabilità
che il pixel immagine fa parte dell'oggetto situato nell'area di interesse.
Il codice di esempio del segmentazione per immagini interattivo mostra come visualizzare i risultati di classificazione restituiti dall'attività. Per i dettagli, consulta l'esempio di codice.