Ti presentiamo Google AI Edge Portal: esegui il benchmarking dell'IA di Edge su larga scala. Registrati per richiedere l'accesso durante l'anteprima privata.

Guida alla classificazione delle immagini per il web

L'attività Classificatore di immagini MediaPipe consente di eseguire la classificazione delle immagini. Puoi utilizzare questa attività per identificare cosa rappresenta un'immagine in un insieme di categorie definite durante l'addestramento. Queste istruzioni mostrano come utilizzare il classificatore di immagini per app Node.js e web.

Puoi vedere questa attività in azione visualizzando la demo. Per saperne di più sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la panoramica.

Codice di esempio

Il codice di esempio per il classificatore di immagini fornisce un'implementazione completa di questa attività in JavaScript a scopo di riferimento. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di classificazione delle immagini. Puoi visualizzare, eseguire e modificare l'esempio di classificazione delle immagini utilizzando solo il browser web.

Configurazione

Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo e i progetti di codice in modo specifico per utilizzare Image Classifier. 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 classificatore di immagini è 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.

Puoi installare i pacchetti richiesti con il seguente codice per lo staging locale utilizzando il seguente comando:

npm install @mediapipe/tasks-vision

Se vuoi importare il codice dell'attività tramite un servizio 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.mjs"
    crossorigin="anonymous"></script>
</head>

Modello

L'attività Classificatore di immagini MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per Image Classifier, 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/

Creare l'attività

Utilizza una delle funzioni createFrom...() di Image Classifier 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 riportato di seguito mostra l'utilizzo della funzione createFromOptions() per configurare l'attività. La funzione createFromOptions ti consente di personalizzare il classificatore di immagini con 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 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à ha le seguenti opzioni di configurazione per le applicazioni web:

Nome opzione	Descrizione	Intervallo di valori	Valore predefinito
`runningMode`	Imposta la modalità di esecuzione dell'attività. Esistono due modalità: IMMAGINE: la modalità per gli input di singole immagini. VIDEO: la modalità per i frame decodificati di un video o di 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 Lite Metadata Writer.	Codice di impostazioni internazionali	it
`maxResults`	Imposta il numero massimo facoltativo di risultati di classificazione con il punteggio più alto da restituire. Se < 0, verranno restituiti tutti i risultati disponibili.	Qualsiasi numero positivo	`-1`
`scoreThreshold`	Imposta la soglia del punteggio di previsione che sostituisce quella fornita nei metadati del modello (se presenti). I risultati inferiori a questo valore vengono rifiutati.	Qualsiasi numero in virgola mobile	Non impostato
`categoryAllowlist`	Imposta l'elenco facoltativo dei nomi delle categorie consentiti. Se non è vuoto, i risultati della classificazione la cui categoria non è presente in questo insieme verranno filtrati. I nomi di categorie duplicati o sconosciuti vengono ignorati. Questa opzione si esclude a vicenda con `categoryDenylist` e l'utilizzo di entrambe genera un errore.	Qualsiasi stringa	Non impostato
`categoryDenylist`	Imposta l'elenco facoltativo di nomi di categorie non consentiti. Se non vuoto, i risultati della classificazione il cui nome della categoria è in questo insieme verranno filtrati. I nomi di categorie duplicati o sconosciuti vengono ignorati. Questa opzione è mutualmente esclusiva con `categoryAllowlist` e l'utilizzo di entrambe genera un errore.	Qualsiasi stringa	Non impostato
`resultListener`	Imposta il listener dei risultati per ricevere i risultati della classificazione in modo asincrono quando Image Classifier è in modalità live streaming. Può essere utilizzato solo quando la modalità di esecuzione è impostata su `LIVE_STREAM`	N/D	Non impostato

Preparazione dei dati

Image Classifier può classificare gli oggetti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la preelaborazione dell'input dei dati, tra cui ridimensionamento, rotazione e normalizzazione dei valori.

Le chiamate ai metodi Image Classifier classify() e classifyForVideo() vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente. Se classifichi gli oggetti nei fotogrammi video della videocamera 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à

Image Classifier 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 all'interno dell'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.

Gestire e visualizzare i risultati

Dopo l'esecuzione dell'inferenza, l'attività Classificatore di immagini restituisce un oggetto ImageClassifierResult che contiene l'elenco delle 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 il classificatore di uccelli su:

Fotografia ravvicinata di una passera domestica

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