L'attività Segmenter di immagini MediaPipe consente di suddividere le immagini in regioni in base alle categorie predefinite per applicare effetti visivi come la sfocatura dello sfondo. Queste istruzioni mostrano come utilizzare il segmentatore di immagini 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 segmentazione delle immagini fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice consente di testare questa attività e di iniziare a creare la tua app di segmentazione delle immagini. Puoi visualizzare, eseguire e modificare il codice di esempio del segmento di pubblico immagini utilizzando solo il 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 del Segmenter immagini. 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 è disponibile tramite il pacchetto @mediapipe/tasks-vision
NPM 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 MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per il Segmenter immagini, 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 createFrom...() del Segmenter di immagini 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
segmentatore di immagini con opzioni di configurazione. Per saperne di più sulla configurazione delle attività, consulta Opzioni di configurazione.
Il codice seguente 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à prevede le seguenti opzioni di configurazione per le applicazioni web:
| Nome opzione | Descrizione | Intervallo di valori | Valore predefinito |
|---|---|---|---|
runningMode |
Imposta la modalità di esecuzione per l'attività. Esistono due
modalità: IMAGE: la modalità per gli input di singole immagini. VIDEO: la modalità per i fotogrammi decodificati di un video o durante un live streaming di dati di input, ad esempio da una videocamera. |
{IMAGE, VIDEO} |
IMAGE |
outputCategoryMask |
Se impostato su True, l'output include una maschera di segmentazione
come immagine uint8, in cui ogni valore di 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 valore in virgola mobile, in cui ogni valore in virgola mobile 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 Metadata Writer di TensorFlow Lite
| Codice impostazioni internazionali | it |
Preparazione dei dati
Il segmenter immagini 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 del segmentazione delle immagini 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 utilizza il metodo segment() con la modalità immagine e il metodo segmentForVideo() con la modalità video per attivare le inferenze. Il segmento di immagini 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à:
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à Segmenter di immagini restituisce i dati dell'immagine del segmento a una funzione di callback. Il contenuto dell'output dipende da outputType impostato
al momento della configurazione dell'attività.
Le seguenti sezioni mostrano esempi di dati di output di questa attività:
Confidenza della categoria
Le immagini seguenti mostrano una visualizzazione dell'output dell'attività per una maschera di confidenza della categoria. L'output della maschera di confidenza contiene valori in virgola mobile compresi tra [0, 1].
Output della maschera di confidenza della categoria e dell'immagine originale. Immagine di origine dal set di dati di Pascal VOC 2012.
Valore categoria
Le immagini seguenti mostrano una visualizzazione dell'output dell'attività per una maschera dei valori di categoria. L'intervallo di maschere di categoria è [0, 255] e ogni valore di pixel
rappresenta l'indice di categoria vincente dell'output del modello. L'indice delle categorie vincenti ha il punteggio più alto tra le categorie che il modello può riconoscere.
Output della maschera di categoria e immagine originale. Immagine di origine dal set di dati di Pascal VOC 2012.
Il codice di esempio del Segmenter immagine mostra come visualizzare i risultati della segmentazione restituiti dall'attività. Per i dettagli, consulta l'esempio di codice.