L'attività MediaPipe Image Segmenter ti consente di suddividere le immagini in regioni in base a categorie predefinite per applicare effetti visivi come la sfocatura dello sfondo. Queste istruzioni mostrano come utilizzare lo strumento di segmentazione delle immagini per app web e Node. 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 Image Segmenter 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 segmentazione delle immagini. Puoi visualizzare, eseguire e modificare il codice di esempio di 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 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 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 MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per Image Segmenter, 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 createFrom...() di Image Segmenter 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 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à 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 il valore della categoria migliore. |
{True, False} |
False |
outputConfidenceMasks |
Se impostato su True, l'output include una maschera di segmentazione
come immagine del valore float, in cui 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 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 |
resultListener |
Imposta l'ascoltatore dei risultati in modo da ricevere i risultati della segmentazione
in modo asincrono quando lo 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 segment() e segmentForVideo() di Image Segmenter vengono eseguite
in modo sincrono 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 utilizza il metodo segment() con la modalità immagine e il metodo segmentForVideo() con la modalità video per attivare le deduzioni. Lo strumento
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à:
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 di codice.
Gestire e visualizzare i risultati
Dopo l'esecuzione dell'inferenza, l'attività Image Segmenter restituisce i dati dell'immagine del segmento a una funzione di callback. I contenuti dell'output dipendono dal valore outputType impostato
quando hai configurato l'attività.
Le seguenti sezioni mostrano esempi dei dati di output di questa attività:
Affidabilità della categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una maschera di attendibilità della categoria. L'output della maschera di confidenza contiene valori float compresi tra
[0, 1].
Output della maschera di affidabilità dell'immagine e della categoria originale. Immagine di origine del set di dati Pascal VOC 2012.
Valore della categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una maschera di valore della categoria. L'intervallo della maschera di categoria è [0, 255] e ogni valore del 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 del set di dati Pascal VOC 2012.
Il codice di esempio di Image Segmenter mostra come visualizzare i risultati della segmentazione restituiti dall'attività. Per maggiori dettagli, consulta l'esempio di codice.