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 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 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 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à 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 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 il metodo
createFromModelBuffer().
L'esempio di codice seguente 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 le 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 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 nei metadati del modello dell'attività, se disponibile. Il valore predefinito è en per
Inglese. Puoi aggiungere etichette localizzate ai metadati di un modello personalizzato
utilizzando l'API TensorFlow Lite 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
Image Segmenter può segmentare gli oggetti nelle immagini in qualsiasi formato supportato dal 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 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à
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 l'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 maschera di attendibilità 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 dalla VOC Pascal 2012 del set di dati.
Valore 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 il valore di ogni 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 dalla VOC Pascal 2012 del set di dati.
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.