L'attività MediaPipe Interactive Image Segmenter accetta una posizione in un'immagine, stima i limiti di un oggetto in quella posizione e restituisce la segmentazione dell'oggetto come dati immagine. Queste istruzioni mostrano come utilizzare Interactive 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 Interactive Image Segmenter fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di segmentazione dell'immagine interattiva. Puoi visualizzare, eseguire e modificare l'esempio di Interactive Image Segmenter esempio utilizzando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice specificamente per l'utilizzo di Interactive 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 Interactive 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
Setup.
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 di 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.mjs"
crossorigin="anonymous"></script>
</head>
Modello
L'attività MediaPipe Interactive Image Segmenter richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per Interactive 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 createFrom...() di Interactive Image Segmenter 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à caricato in memoria, puoi utilizzare il metodo createFromModelBuffer().
L'esempio di codice riportato di seguito mostra come utilizzare la funzione createFromOptions() per configurare l'attività. La funzione createFromOptions ti consente di personalizzare Interactive Image Segmenter con le opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione, consulta Opzioni di configurazione.
Il seguente codice mostra come creare e configurare l'attività con opzioni personalizzate:
async function createSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
},
});
}
createSegmenter();
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 di pixel indica se il pixel fa parte dell'
oggetto che si trova nell'area di interesse. |
{True, False} |
False |
outputConfidenceMasks |
Se impostato su True, l'output include una maschera di segmentazione
come immagine con valori float, in cui ogni valore float rappresenta la confidenza
che il pixel fa parte dell'oggetto che si trova nell'area di interesse. |
{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 locale | it |
Preparazione dei dati
Interactive Image Segmenter può segmentare gli oggetti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input dei dati, inclusi il ridimensionamento, la rotazione e la normalizzazione dei valori.
Le chiamate ai metodi segment() e segmentForVideo() di Interactive Image Segmenter vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente. Se segmenti gli oggetti nei frame video della videocamera di un dispositivo, ogni attività di segmentazione blocca il thread principale. Puoi evitare questo problema implementando i web worker per eseguire segment() e segmentForVideo() su un altro thread.
Esegui l'attività
Interactive Image Segmenter utilizza il metodo segment() per attivare le inferenze. Interactive Image Segmenter restituisce i segmenti rilevati come dati immagine a una funzione di callback che hai impostato durante l'esecuzione di un'inferenza per l'attività.
Il seguente codice mostra come eseguire l'elaborazione con il modello dell'attività:
const image = document.getElementById("image") as HTMLImageElement; interactiveSegmenter.segment( image, { keypoint: { x: event.offsetX / event.target.width, y: event.offsetY / event.target.height } }, callback);