L'attività MediaPipe Object Detector consente di rilevare la presenza e la posizione di più classi di oggetti. Questa attività acquisisce i dati immagine e genera un elenco di risultati di rilevamento, ciascuno dei quali rappresenta un oggetto identificato nell'immagine. L'esempio di codice descritto in queste istruzioni è disponibile su CodePen.
Puoi vedere questa attività in azione guardando la demo. Per saperne di più sulle funzionalità, sui modelli e sulle opzioni di configurazione di questa attività, consulta la Panoramica.
Esempio di codice
Il codice di esempio per il Rilevamento oggetti fornisce un'implementazione completa di questa attività in JavaScript per riferimento futuro. Questo codice ti aiuta a testare questa attività e a iniziare a creare la tua app di classificazione del testo. Puoi visualizzare, eseguire e modificare il codice di esempio di Rilevamento oggetti utilizzando solo il browser web.
Configurazione
Questa sezione descrive i passaggi chiave per configurare l'ambiente di sviluppo specificamente per utilizzare Rilevamento oggetti. 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 Rilevamento oggetti è disponibile tramite il pacchetto MediaPipe @mediapipe/tasks-vision
NPM. 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.js"
crossorigin="anonymous"></script>
</head>
Modello
L'attività MediaPipe Object Detector 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 memorizzalo nella directory del progetto:
<dev-project-root>/app/shared/models/
Crea l'attività
Utilizza una delle funzioni di Detector di oggetti ObjectDetector.createFrom...() per preparare l'attività all'esecuzione di 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(), che consente di impostare più opzioni di configurazione. Per ulteriori informazioni sulle opzioni di configurazione disponibili, consulta la sezione Opzioni di configurazione.
Il codice seguente 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 di oggetti, consulta l'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 |
|---|---|---|---|
runningMode |
Imposta la modalità di esecuzione dell'attività. Esistono due modi: 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 di 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 disponibile. 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 delle 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 stato mobile | Non impostato |
categoryAllowlist |
Imposta l'elenco facoltativo dei nomi delle categorie consentite. Se non è vuoto,
i risultati di rilevamento il cui nome della categoria non è presente in questo insieme verranno
eliminati. I nomi di categorie duplicati o sconosciuti vengono ignorati.
Questa opzione è mutuamente esclusiva con categoryDenylist e l'utilizzo di entrambe genera un errore. |
Qualsiasi stringa | Non impostato |
categoryDenylist |
Imposta l'elenco facoltativo dei nomi di categorie non consentiti. Se non è vuoto, i risultati di rilevamento il cui nome della categoria è presente in questo insieme verranno esclusi. I nomi di categorie duplicati o sconosciuti vengono ignorati. Questa opzione è mutuamente esclusa da categoryAllowlist e l'utilizzo di entrambe genera un errore. |
Qualsiasi stringa | Non impostato |
Preparazione dei dati
Il Rilevamento di oggetti può rilevare 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. Per rilevare gli oggetti nei video, puoi utilizzare l'API per elaborare rapidamente un fotogramma alla volta, utilizzando il timestamp del fotogramma per determinare quando si verificano i gesti nel video.
Esegui l'attività
Il Rilevamento di oggetti utilizza detect() per lavorare su singole immagini e
detectForVideo() per rilevare gli oggetti nei fotogrammi video. L'attività elabora
i dati, tenta di riconoscere gli oggetti e poi genera un report sui risultati.
Le chiamate ai metodi detect() e detectForVideo() vengono eseguite
in modo sincrono e bloccano il thread dell'interfaccia utente. Se riconosci oggetti nei frame video della fotocamera di un dispositivo, ogni classificazione blocca il thread principale. Per evitarlo, puoi implementare i worker web 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 oggetti, consulta l'esempio di codice.
Gestire e visualizzare i risultati
Il Rilevamento di oggetti genera un oggetto con i risultati del rilevamento per ogni esecuzione del rilevamento. L'oggetto results 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à:
Il codice di esempio di Rilevamento oggetti mostra come visualizzare i risultati di rilevamento restituiti dall'attività. Per maggiori dettagli, consulta l'esempio di codice.