L'attività Rilevamento di oggetti MediaPipe consente di rilevare la presenza e la posizione di più classi di oggetti. Questa attività prende i dati dell'immagine e restituisce 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 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 per il rilevatore di oggetti fornisce un'implementazione completa di questa attività in JavaScript come riferimento. Questo codice consente di testare l'attività e iniziare a creare la tua app di classificazione del testo. Puoi visualizzare, eseguire e modificare il codice di esempio del rilevatore di oggetti utilizzando solo il browser web.
Configurazione
In questa sezione vengono descritti i passaggi chiave per configurare l'ambiente di sviluppo in modo specifico per l'utilizzo di Rilevamento di oggetti. Per informazioni generali sulla configurazione dell'ambiente di sviluppo web e JavaScript, inclusi i requisiti di versione della piattaforma, consulta la Guida alla configurazione per il web.
Pacchetti JavaScript
Il codice del rilevatore di oggetti è disponibile tramite il pacchetto NPM @mediapipe/tasks-vision di MediaPipe. Puoi trovare e scaricare queste librerie seguendo le istruzioni nella Guida alla configurazione della piattaforma.
Puoi installare i pacchetti richiesti tramite Gestione dei partner di rete 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 <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à Rilevamento di oggetti MediaPipe richiede un modello addestrato compatibile con questa attività. Per ulteriori informazioni sui modelli addestrati disponibili per il rilevatore di oggetti, consulta la panoramica dell'attività nella sezione Modelli.
Seleziona e scarica un modello, quindi archivialo all'interno della directory del progetto:
<dev-project-root>/app/shared/models/
Creare l'attività
Utilizza una delle funzioni ObjectDetector.createFrom...() del rilevatore di oggetti per
preparare l'attività per l'esecuzione di inferenze. Utilizza la funzione createFromModelPath()
con un percorso relativo o assoluto al file del modello addestrato.
Se il modello è già stato 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 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à prevede 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 singole immagini. VIDEO: la modalità per i fotogrammi decodificati di un video o durante 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 Metadata Writer di TensorFlow Lite
|
Codice impostazioni internazionali | it |
maxResults |
Imposta il numero massimo facoltativo di risultati di rilevamento con il punteggio più alto da restituire. | Eventuali numeri positivi | -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 elemento in virgola mobile | Non impostata |
categoryAllowlist |
Consente di impostare l'elenco facoltativo di nomi di categorie consentite. Se il campo non è vuoto,
i risultati del rilevamento il cui nome di categoria non è in questo set verranno
filtrati. I nomi di categoria duplicati o sconosciuti vengono ignorati.
Questa opzione si esclude a vicenda con categoryDenylist e l'utilizzo di entrambe genera un errore. |
Qualsiasi stringa | Non impostata |
categoryDenylist |
Consente di impostare l'elenco facoltativo di nomi di categorie non consentiti. Se il campo non è vuoto, i risultati del rilevamento il cui nome di categoria è presente in questo set verranno filtrati. I nomi di categoria duplicati o sconosciuti vengono ignorati. Questa opzione si esclude a vicenda con categoryAllowlist e l'uso di entrambe genera un errore. |
Qualsiasi stringa | Non impostata |
Preparazione dei dati
Il rilevatore di oggetti è in grado di rilevare gli oggetti nelle immagini in qualsiasi formato supportato dal browser host. L'attività gestisce anche la pre-elaborazione dell'input, come ridimensionamento, rotazione e normalizzazione del valore. Per rilevare gli oggetti nei video, puoi utilizzare l'API per elaborare rapidamente un fotogramma 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() mentre rileva oggetti nei frame video. L'attività elabora i dati, tenta di riconoscere gli oggetti e poi registra i risultati.
Le chiamate ai metodi detect() e detectForVideo() vengono eseguite
in modo sincrono e bloccano il thread dell'interfaccia utente. Se riconosci gli oggetti nei frame video dalla fotocamera di un dispositivo, ogni classificazione blocca il thread principale. Puoi evitare che ciò accada implementando i web worker per eseguire il rilevamento in 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 di oggetti, vedi l'esempio di codice.
Gestire e visualizzare i risultati
Il rilevatore di oggetti genera un oggetto dei risultati del rilevamento per ogni esecuzione di rilevamento. L'oggetto dei risultati contiene un elenco di rilevamenti, in cui ogni rilevamento include un riquadro di delimitazione e informazioni sulla categoria relative all'oggetto rilevato, inclusi il nome dell'oggetto e un punteggio di confidenza.
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 del rilevatore di oggetti mostra come visualizzare i risultati del rilevamento restituiti dall'attività. Per i dettagli, consulta l'esempio di codice.