L'attività MediaPipe Image Segmenter consente di dividere le immagini in regioni in base a categorie predefinite per l'applicazione di effetti visivi come la sfocatura dello sfondo. Queste istruzioni mostrano come utilizzare Image Segmenter per le app web e Node. Per ulteriori informazioni sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la Panoramica.
Codice di esempio
Il codice di esempio per Image Segmenter fornisce un'implementazione completa di questa attività in JavaScript a scopo di riferimento. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di segmentazione delle immagini. Puoi visualizzare, eseguire e modificare l'esempio di Image Segmenter utilizzando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice specifici per l'utilizzo di Image Segmenter. 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 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 lo staging 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 del file HTML:
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
Modello
L'attività MediaPipe Image Segmenter richiede un modello addestrato compatibile con questa attività. Per saperne di più sui modelli addestrati disponibili per Image Segmenter, consulta la sezione Modelli della panoramica dell'attività.
Seleziona e scarica un modello, quindi archivialo nella directory del progetto:
<dev-project-root>/app/shared/models/
Creare l'attività
Utilizza una delle funzioni Image Segmenter createFrom...() per
preparare l'attività per l'esecuzione delle 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 ti consente di personalizzare
Image Segmenter con le opzioni di configurazione. Per ulteriori informazioni sulla configurazione
delle attività, consulta Opzioni di configurazione.
Il seguente codice mostra come creare e configurare l'attività con opzioni personalizzate:
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
Per un'implementazione più completa della creazione di un'attività di segmentazione delle immagini, consulta l'esempio di codice.
Opzioni di configurazione
Questa attività ha 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 pixel indica il valore della categoria
vincente. |
{True, False} |
False |
outputConfidenceMasks |
Se impostato su True, l'output include una maschera di segmentazione
come immagine con valori float, dove ogni valore float rappresenta la mappa
del punteggio di confidenza della categoria. |
{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 TensorFlow Lite Metadata Writer. |
Codice di impostazioni internazionali | it |
resultListener |
Imposta il listener dei risultati per ricevere i risultati della segmentazione
in modo asincrono quando il segmentatore di immagini è in modalità LIVE_STREAM.
Può essere utilizzato solo quando la modalità di esecuzione è impostata su LIVE_STREAM |
N/D | N/D |
Preparazione dei dati
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 Image Segmenter segment() e segmentForVideo() vengono eseguite
in modo sincrono e bloccano il thread dell'interfaccia utente. Se segmenti gli oggetti nei
fotogrammi video della videocamera di un dispositivo, ogni attività di segmentazione blocca il thread
principale. Puoi evitarlo implementando i web worker per eseguire
segment() e segmentForVideo() su un altro thread.
Esegui l'attività
Image Segmenter utilizza il metodo segment() con la modalità immagine e il metodo segmentForVideo() con la modalità video per attivare le inferenze. Lo
strumento di segmentazione delle immagini restituisce i segmenti rilevati come dati immagine a una funzione di callback
che imposti quando esegui un'inferenza per l'attività.
Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:
Immagine
const image = document.getElementById("image") as HTMLImageElement; imageSegmenter.segment(image, callback);
Video
async function renderLoop(): void { const video = document.getElementById("video"); let startTimeMs = performance.now(); imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo); requestAnimationFrame(() => { renderLoop(); }); }
Per un'implementazione più completa dell'esecuzione di un'attività di segmentazione delle immagini, consulta l'esempio.
Gestire e visualizzare i risultati
Dopo l'esecuzione dell'inferenza, l'attività Segmentatore di immagini restituisce i dati dell'immagine segmentata a una
funzione di callback. Il contenuto dell'output dipende dal outputType che hai impostato
quando hai configurato l'attività.
Le sezioni seguenti mostrano esempi dei dati di output di questa attività:
Confidenza della categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una maschera di confidenza della categoria. L'output della maschera di confidenza contiene valori float compresi tra
[0, 1].
Output della maschera di confidenza dell'immagine originale e della categoria. Immagine di origine dal set di dati Pascal VOC 2012.
Valore della categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una maschera
di valori di categoria. L'intervallo della maschera di categoria è [0, 255] e ogni valore pixel
rappresenta l'indice della categoria vincente dell'output del modello. L'indice della categoria vincente ha il punteggio più alto tra le categorie che il modello può riconoscere.
Output dell'immagine originale e della maschera della categoria. Immagine di origine dal set di dati Pascal VOC 2012.
L'esempio di codice Image Segmenter mostra come visualizzare i risultati della segmentazione restituiti dall'attività. Per maggiori dettagli, consulta l'esempio.