Guida al rilevamento di oggetti per il web

L'attività di rilevamento degli oggetti MediaPipe consente di rilevare la presenza e la posizione di più classi di oggetti. Questa attività prende i dati immagine e restituisce un elenco di risultati di rilevamento, ognuno dei quali rappresenta un oggetto identificato nell'immagine. Puoi visualizzare, eseguire e modificare l'esempio di Object Detector utilizzando solo il browser web.

Per saperne di più sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la panoramica.

Configurazione

Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo specificamente per utilizzare Object Detector. Per informazioni generali sulla configurazione dell'ambiente di sviluppo web e JavaScript, inclusi i requisiti della versione della piattaforma, consulta la Guida alla configurazione per il web.

Pacchetti JavaScript

Il codice di Object Detector è disponibile tramite il pacchetto NPM @mediapipe/tasks-vision NPM di MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni riportate nella guida alla configurazione della piattaforma.

Puoi installare i pacchetti richiesti tramite NPM 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 <head> 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à Rilevatore di oggetti MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per il rilevamento di oggetti, consulta la panoramica dell'attività nella sezione Modelli.

Seleziona e scarica un modello, quindi archivialo nella directory del progetto:

<dev-project-root>/app/shared/models/

Creare l'attività

Utilizza una delle funzioni ObjectDetector.createFrom...() di Object Detector 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(), che consente di impostare più opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione disponibili, consulta la sezione Opzioni di configurazione.

Il seguente codice mostra come creare e configurare questa attività:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

Per un'implementazione più completa della creazione di un'attività di rilevamento degli oggetti, consulta l'esempio di codice.

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 rilevamento con il punteggio più alto da restituire. Qualsiasi numero positivo -1 (vengono restituiti tutti i risultati)
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 del rilevamento il cui nome della 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 del rilevamento la cui categoria è presente in questo insieme verranno filtrati in uscita. 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

Preparazione dei dati

Il rilevatore di oggetti può rilevare 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. Per rilevare gli oggetti nei video, puoi utilizzare l'API per elaborare rapidamente un frame alla volta, utilizzando il timestamp del frame per determinare quando si verificano i gesti nel video.

Esegui l'attività

Il rilevatore di oggetti utilizza detect() per lavorare su singole immagini e detectForVideo() per rilevare oggetti nei frame video. L'attività elabora i dati, tenta di riconoscere gli oggetti e poi riporta i risultati.

Le chiamate ai metodi detect() e detectForVideo() vengono eseguite in modo sincrono e bloccano il thread dell'interfaccia utente. Se riconosci oggetti nei fotogrammi video della videocamera di un dispositivo, ogni classificazione blocca il thread principale. Puoi evitarlo implementando i web worker per eseguire il rilevamento su un altro thread.

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

Immagine

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

Video

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

Per un'implementazione più completa dell'esecuzione di un'attività di rilevamento degli oggetti, consulta l'esempio di codice.

Gestire e visualizzare i risultati

Object Detector genera un oggetto dei risultati del rilevamento per ogni esecuzione del rilevamento. L'oggetto dei risultati contiene un elenco di rilevamenti, in cui ogni rilevamento include un riquadro di delimitazione e informazioni sulla categoria dell'oggetto rilevato, tra cui il nome dell'oggetto e un punteggio di affidabilità.

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

L'immagine seguente mostra una visualizzazione dell'output dell'attività:

Due cani evidenziati con riquadri di delimitazione

L'esempio di codice Object Detector mostra come visualizzare i risultati del rilevamento restituiti dall'attività. Per maggiori dettagli, consulta l'esempio di codice.