L'attività Segmentazione delle immagini di MediaPipe consente di dividere le immagini in regioni in base a categorie per l'applicazione di effetti visivi, ad esempio la sfocatura dello sfondo. Questi che mostrano come utilizzare la funzionalità di segmentazione delle immagini per Node e app web. Per ulteriori informazioni su funzionalità, modelli e opzioni di configurazione questa attività, consulta la Panoramica.
Esempio di codice
Il codice di esempio dello strumento di segmentazione delle immagini fornisce un'implementazione completa in JavaScript come riferimento. Questo codice è utile per testare l'attività iniziare a creare la tua app di segmentazione delle immagini. Puoi visualizzare, eseguire e modifica la segmentazione delle immagini esempio di codice usando solo il browser web. Puoi anche rivedere il codice per questo esempio su GitHub.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e per i progetti di codice che utilizzano specificatamente la segmentazione delle immagini. Per informazioni generali su configurare l'ambiente di sviluppo per l'utilizzo delle attività di MediaPipe, tra cui: i requisiti di versione della piattaforma, consulta Guida alla configurazione per il web.
Pacchetti JavaScript
Il codice del segmento di pubblico delle immagini è disponibile tramite MediaPipe @mediapipe/tasks-vision
Pacchetto NPM. Puoi
puoi trovare e scaricare queste librerie dai link forniti nella piattaforma
Guida alla configurazione.
Puoi installare i pacchetti richiesti con il seguente codice per la gestione temporanea locale utilizzando il seguente comando:
npm install --save @mediapipe/tasks-vision
Se vuoi importare il codice dell'attività tramite una rete 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à Segmenter immagini MediaPipe richiede un modello addestrato che sia compatibile con dell'attività. Per ulteriori informazioni sui modelli addestrati disponibili per la segmentazione delle immagini, consulta la panoramica delle attività nella sezione Modelli.
Seleziona e scarica un modello, quindi archivialo nella directory del progetto:
<dev-project-root>/app/shared/models/
Crea l'attività
Utilizza una delle funzioni del segmento di pubblico createFrom...() per
per preparare l'attività per l'esecuzione delle inferenze. Usa createFromModelPath()
con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già caricato in memoria, puoi utilizzare
createFromModelBuffer().
L'esempio di codice seguente mostra l'utilizzo della funzione createFromOptions() per
configurare l'attività. La funzione createFromOptions ti consente di personalizzare
Segmentazione di immagini con opzioni di configurazione. Per ulteriori informazioni sull'attività
vedi Opzioni di configurazione.
Il codice seguente mostra come creare e configurare l'attività con opzioni:
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 le esempio di codice.
Opzioni di configurazione
Questa attività include 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 un'immagine uint8, in cui ogni valore di pixel indica la categoria vincente
valore. |
{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 confidenza
la mappa dei punteggi della categoria. |
{True, False} |
True |
displayNamesLocale |
Imposta la lingua delle etichette da utilizzare per i nomi visualizzati forniti nel
metadati del modello dell'attività, se disponibili. Il valore predefinito è en per
Inglese. Puoi aggiungere etichette localizzate ai metadati di un modello personalizzato
Utilizzando l'API TensorFlow Metadata Writer |
Codice impostazioni internazionali | it |
resultListener |
Imposta il listener di risultati per ricevere i risultati della segmentazione
in modo asincrono quando il segmento di immagini è in modalità LIVE_STREAM.
Può essere utilizzato solo quando la modalità di corsa è impostata su LIVE_STREAM |
N/D | N/D |
Preparazione dei dati
La funzionalità di segmentazione delle immagini può segmentare oggetti nelle immagini in qualsiasi formato supportato dalla browser host. L'attività gestisce anche la pre-elaborazione dell'input di dati, tra cui ridimensionamento, rotazione e normalizzazione dei valori.
Esecuzione di chiamate ai metodi segment() e segmentForVideo() del segmento di immagini
in modo sincrono e bloccare il thread dell'interfaccia utente. Se segmenti gli oggetti
fotogrammi dalla fotocamera di un dispositivo; ogni attività di segmentazione blocca l'immagine
. Puoi evitarlo implementando i web worker per eseguire
segment() e segmentForVideo() su un altro thread.
Esegui l'attività
La funzionalità di segmentazione delle immagini utilizza il metodo segment() con la modalità immagine e
Metodo segmentForVideo() con la modalità video per attivare le inferenze. La
La funzionalità di segmentazione delle immagini restituisce i segmenti rilevati come dati immagine a un callback
funzione 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 le esempio di codice.
Gestire e visualizzare i risultati
Dopo aver eseguito l'inferenza, l'attività Segmentazione delle immagini restituisce i dati dell'immagine del segmento a un
di chiamata. Il contenuto dell'output dipende dal valore outputType impostato
quando hai configurato l'attività.
Le seguenti sezioni mostrano esempi di dati di output di questa attività:
Confidenza nella categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una categoria
maschera di confidenza. L'output della maschera di confidenza contiene valori in virgola mobile tra
[0, 1].
Output della maschera di confidenza dell'immagine originale e della categoria. Immagine di origine dalla VOC Pascal 2012 del set di dati.
Valore categoria
Le seguenti immagini mostrano una visualizzazione dell'output dell'attività per una categoria
come maschera del valore. L'intervallo della maschera di categoria è [0, 255] e il valore di ogni pixel
rappresenta l'indice della categoria vincente dell'output del modello. La categoria vincente
ha il punteggio più alto tra le categorie che il modello può riconoscere.
Output della maschera di categoria e dell'immagine originale. Immagine di origine dalla VOC Pascal 2012 del set di dati.
Il codice di esempio del segmento di immagini mostra come visualizzare la segmentazione i risultati restituiti dall'attività, controlla esempio di codice per maggiori dettagli.