Guida alla classificazione delle immagini per il web

L'attività Classificatore di immagini di MediaPipe consente di eseguire la classificazione sulle immagini. Puoi utilizzare questa attività per identificare ciò che un'immagine rappresenta in un insieme di categorie definite durante l'addestramento. Queste istruzioni mostrano come usare il classificatore di immagini per nodi e app web.

Puoi vedere questa attività in azione visualizzando la demo. 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 di Image Classifier fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice ti consente di testare questa attività e di iniziare a creare la tua app di classificazione delle immagini. Puoi visualizzare, eseguire e modificare il codice di esempio del classificatore di immagini utilizzando semplicemente il tuo browser web.

Imposta

Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice per l'utilizzo specifico del classificatore di 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 classificatore di immagini è disponibile tramite il pacchetto MediaPipe @mediapipe/tasks-vision NPM. 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 la gestione temporanea locale utilizzando il seguente comando:

npm install @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:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Modello

L'attività classificatore di immagini MediaPipe richiede un modello addestrato compatibile con questa attività. Per maggiori informazioni sui modelli addestrati disponibili per il classificatore di 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 createFrom...() di classificazione delle immagini per preparare l'attività per l'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 seguente mostra l'utilizzo della funzione createFromOptions() per configurare l'attività. La funzione createFromOptions consente di personalizzare il classificatore di immagini con opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione, vedi Opzioni di configurazione.

Il codice seguente mostra come creare e configurare l'attività con opzioni personalizzate:

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

Opzioni di configurazione

Questa attività include 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 immagini singole. VIDEO: la modalità per i fotogrammi decodificati di un video o in un live streaming di dati di input, ad esempio da una videocamera.	{`IMAGE, VIDEO`}	`IMAGE`
`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 Metadata Writer	Codice impostazioni internazionali	it
`maxResults`	Imposta il numero massimo facoltativo di risultati della classificazione con il punteggio più alto da restituire. Se < 0, vengono restituiti tutti i risultati disponibili.	Qualsiasi numero positivo	`-1`
`scoreThreshold`	Imposta la soglia del punteggio della previsione che sostituisce quella fornita nei metadati del modello (se presente). I risultati al di sotto di questo valore vengono rifiutati.	Qualsiasi numero in virgola mobile	Non impostata
`categoryAllowlist`	Consente di impostare l'elenco facoltativo di nomi di categorie consentiti. Se non è vuoto, i risultati della classificazione il cui nome della categoria non è incluso in questo set verranno filtrati. I nomi di categorie duplicati o sconosciuti vengono ignorati. Questa opzione si esclude a vicenda con `categoryDenylist` e utilizza entrambi i risultati in un errore.	Qualsiasi stringa	Non impostata
`categoryDenylist`	Consente di impostare un elenco facoltativo di nomi di categorie non consentiti. Se il campo non è vuoto, i risultati della classificazione con nome della categoria incluso in questo set verranno filtrati. I nomi di categorie duplicati o sconosciuti vengono ignorati. Questa opzione si esclude a vicenda con `categoryAllowlist` e utilizza entrambi i risultati in un errore.	Qualsiasi stringa	Non impostata
`resultListener`	Imposta il listener dei risultati in modo che riceva i risultati della classificazione in modo asincrono quando il classificatore di immagini è in modalità live streaming. Può essere utilizzato solo quando la modalità di corsa è impostata su `LIVE_STREAM`	N/A	Non impostata

preparazione dei dati

Il classificatore di immagini può classificare gli oggetti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input di dati, tra cui il ridimensionamento, la rotazione e la normalizzazione dei valori.

Le chiamate ai metodi classify() e classifyForVideo() del classificatore di immagini vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente. Se classifichi oggetti nei frame video provenienti dalla fotocamera di un dispositivo, ogni classificazione bloccherà il thread principale. Puoi evitarlo implementando i web worker per eseguire classify() e classifyForVideo() su un altro thread.

Esegui l'attività

Il classificatore di immagini utilizza il metodo classify() con la modalità immagine e il metodo classifyForVideo() con la modalità video per attivare le inferenze. L'API Image Classifier restituirà le possibili categorie per gli oggetti nell'immagine di input.

Il seguente codice mostra come eseguire l'elaborazione con il modello di attività:

Immagine

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

Video

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

Per un'implementazione più completa dell'esecuzione di un'attività di classificazione delle immagini, consulta l'esempio di codice.

Gestire e visualizzare i risultati

Dopo l'esecuzione dell'inferenza, l'attività Classificatore di immagini restituisce un oggetto ImageClassifierResult che contiene l'elenco di possibili categorie per gli oggetti all'interno dell'immagine o del frame di input.

Di seguito è riportato un esempio dei dati di output di questa attività:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

Questo risultato è stato ottenuto eseguendo la classe Bird Classifier su:

Il codice di esempio del classificatore di immagini mostra come visualizzare i risultati della classificazione restituiti dall'attività. Per i dettagli, consulta l'esempio di codice.