Rileva oggetti nelle immagini per creare una ricerca visiva dei prodotti con ML Kit: Android

1. Prima di iniziare

Hai visto la demo di Google Lens, in cui puoi puntare la fotocamera dello smartphone verso un oggetto e scoprire dove puoi acquistarlo online? Se vuoi scoprire come aggiungere la stessa funzionalità alla tua app, questo codelab fa al caso tuo. Fa parte di un percorso di apprendimento che ti insegna come integrare una funzionalità di ricerca di immagini di prodotti in un'app mobile.

In questo codelab imparerai il primo passaggio per creare una funzionalità di ricerca immagini prodotto: come rilevare gli oggetti nelle immagini e consentire all'utente di scegliere gli oggetti che vuole cercare. Per creare questa funzionalità, utilizzerai ML Kit Object Detection and Tracking.

Puoi scoprire di più sui passaggi rimanenti, incluso come creare un backend per la ricerca di prodotti con Vision API Product Search, nel percorso di apprendimento.

Cosa creerai

In questo codelab, creerai un'app per Android con ML Kit. La tua app utilizzerà l'API ML Kit Object Detection and Tracking per rilevare gli oggetti in una determinata immagine. L'utente sceglierà quindi un oggetto da cercare nel nostro database dei prodotti.
Alla fine, dovresti vedere qualcosa di simile all'immagine a destra.

Cosa imparerai a fare

Come integrare l'SDK ML Kit nella tua app per Android
API ML Kit Object Detection and Tracking

Che cosa ti serve

Una versione recente di Android Studio (v4.1.2 o versioni successive)
Emulatore Android Studio o un dispositivo Android fisico
Il codice campione
Conoscenza di base dello sviluppo Android in Kotlin

Questo codelab è incentrato su ML Kit. Altri concetti e blocchi di codice non vengono studiati e sono forniti solo per operazioni di copia e incolla.

2. Configurazione

Scarica il codice

Fai clic sul seguente link per scaricare tutto il codice per questo codelab:

Decomprimi il file ZIP scaricato. Verrà estratta una cartella principale (odml-pathways-main) con tutte le risorse necessarie. Per questo codelab, ti serviranno solo le origini nella sottodirectory product-search/codelab1/android.

La sottodirectory object-detection nel repository mlkit-android contiene due directory:

starter: il codice di partenza su cui si basa questo codelab.
final: codice completato per l'app di esempio finita.

3. Aggiungi l'API ML Kit Object Detection and Tracking al progetto

Importa l'app in Android Studio

Inizia importando l'app starter in Android Studio.

Vai ad Android Studio, seleziona Import Project (Gradle, Eclipse ADT, ecc.) e scegli la cartella starter dal codice sorgente che hai scaricato in precedenza.

Aggiungere le dipendenze per il rilevamento e il monitoraggio degli oggetti di ML Kit

Le dipendenze di ML Kit ti consentono di integrare l'SDK ML Kit ODT nella tua app.

Vai al file app/build.gradle del tuo progetto e verifica che la dipendenza sia già presente:

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

Sincronizzare il progetto con i file Gradle

Per assicurarti che tutte le dipendenze siano disponibili per la tua app, a questo punto devi sincronizzare il progetto con i file Gradle.

Seleziona Sincronizza progetto con file Gradle ( ) dalla barra degli strumenti di Android Studio.

Se questo pulsante è disattivato, assicurati di importare solo starter/app/build.gradle e non l'intero repository.

4. Esegui l'app di base

Ora che hai importato il progetto in Android Studio e aggiunto le dipendenze per il rilevamento e il monitoraggio degli oggetti di ML Kit, puoi eseguire l'app per la prima volta.

Collega il tuo dispositivo Android tramite USB all'host o avvia l'emulatore Android Studio e fai clic su Esegui ( ) nella barra degli strumenti di Android Studio.

Esegui ed esplora l'app

L'app dovrebbe avviarsi sul tuo dispositivo Android. Contiene del codice boilerplate per consentirti di acquisire una foto o selezionare un'immagine preset e inserirla in una pipeline di rilevamento e monitoraggio degli oggetti che creerai in questo codelab. Esplora un po' l'app prima di scrivere il codice:

Innanzitutto, in basso è presente un pulsante ( ) per

avvia l'app Fotocamera integrata nel dispositivo/emulatore
scattare una foto all'interno dell'app Fotocamera
ricevere l'immagine acquisita nell'app di base
visualizzare l'immagine

Prova il pulsante "Scatta foto". Segui le istruzioni per scattare una foto, accettala e osservala visualizzata all'interno dell'app di base.

In secondo luogo, puoi scegliere tra tre immagini preimpostate. Puoi utilizzare queste immagini in un secondo momento per testare il codice di rilevamento degli oggetti se utilizzi un emulatore Android.

Seleziona un'immagine tra le tre preimpostate.
Verifica che l'immagine venga visualizzata nella visualizzazione più grande.

5. Aggiungere il rilevamento di oggetti sul dispositivo

In questo passaggio, aggiungerai all'app di base la funzionalità per rilevare gli oggetti nelle immagini. Come hai visto nel passaggio precedente, l'app di base contiene codice boilerplate per scattare foto con l'app Fotocamera sul dispositivo. Se esegui il codelab su un emulatore Android, nell'app sono disponibili anche tre immagini preimpostate su cui puoi provare il rilevamento degli oggetti.

Quando selezioni un'immagine, dalle immagini preimpostate o scattando una foto con l'app Fotocamera, il codice boilerplate decodifica l'immagine in un'istanza Bitmap, la mostra sullo schermo e chiama il metodo runObjectDetection con l'immagine.

In questo passaggio, aggiungerai codice al metodo runObjectDetection per eseguire il rilevamento degli oggetti.

Configurare ed eseguire il rilevamento di oggetti sul dispositivo su un'immagine

Per configurare ML Kit ODT bastano tre semplici passaggi con tre API

preparare un'immagine: InputImage
crea un oggetto rilevatore: ObjectDetection.getClient(options)
collega i due oggetti sopra: process(image)

Questi risultati vengono ottenuti all'interno della funzione **runObjectDetection(bitmap: Bitmap)**nel file MainActivity.kt.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

Al momento la funzione è vuota. Passa ai passaggi successivi per integrare ML Kit ODT. Durante la procedura, Android Studio ti chiederà di aggiungere le importazioni necessarie.

com.google.mlkit.vision.common.InputImage
com.google.mlkit.vision.objects.ObjectDetection
com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

Passaggio 1: crea un InputImage

ML Kit fornisce un'API semplice per creare un InputImage da un Bitmap. Poi puoi inserire un InputImage nelle API ML Kit.

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

Aggiungi il codice riportato sopra all'inizio di runObjectDetection(bitmap:Bitmap).

Passaggio 2: crea un'istanza del rilevatore

ML Kit segue il pattern di progettazione Builder, quindi devi passare la configurazione al builder e acquisire un detector. Esistono tre opzioni di configurazione (quella in grassetto viene utilizzata nel codelab):

modalità di rilevamento (singola immagine o flusso)
modalità di rilevamento (singolo o multiplo rilevamento di oggetti)
modalità di classificazione (on o off)

Questo codelab riguarda il rilevamento e la classificazione di più oggetti in una singola immagine. Vediamo come fare:

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

Passaggio 3: fornisci una o più immagini al rilevatore

Il rilevamento e la classificazione degli oggetti sono un'elaborazione asincrona:

invii un'immagine al rilevatore (tramite process())
il rilevatore ci lavora sodo
il rilevatore ti comunica il risultato tramite un callback

Il seguente codice esegue questa operazione (copialo e aggiungilo al codice esistente all'interno di fun runObjectDetection(bitmap:Bitmap)):

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

Al termine, il rilevatore ti avvisa con

Numero totale di oggetti rilevati
Ogni oggetto rilevato è descritto con

trackingId: un numero intero che utilizzi per monitorarlo tra i frame (NON utilizzato in questo codelab)
boundingBox: riquadro di delimitazione dell'oggetto
Elenco labels: di etichette per l'oggetto rilevato (solo quando la classificazione è abilitata)
index (recupera l'indice di questa etichetta)
text (ottieni il testo di questa etichetta, tra cui "Articoli di moda", "Alimenti", "Articoli per la casa", "Luogo", "Pianta")
confidence (un valore float compreso tra 0,0 e 1,0, dove 1,0 indica il 100%)

Probabilmente avrai notato che il codice stampa i risultati rilevati in Logcat con debugPrint(). Aggiungilo al corso MainActivity:

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

Ora puoi accettare le immagini per il rilevamento.

Esegui il codelab facendo clic su Esegui ( ) nella barra degli strumenti di Android Studio. Prova a selezionare un'immagine preimpostata o scatta una foto, quindi guarda la finestra logcat( ) all'interno dell'IDE. Dovresti vedere qualcosa di simile a questo:

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

Ciò significa che il rilevatore ha visto 3 oggetti di:

Le categorie sono Articoli di moda e Articoli per la casa.
per il secondo non viene restituita alcuna categoria perché si tratta di una classe sconosciuta.
nessun trackingId (perché questa è la modalità di rilevamento di una singola immagine)
posizione all'interno del rettangolo boundingBox (ad es. (481, 2021) - (2426, 3376))
Il rilevatore è abbastanza sicuro che il primo sia un articolo di moda (90%) (è un vestito)

Tecnicamente, questo è tutto ciò che ti serve per far funzionare il rilevamento degli oggetti di ML Kit. In questo momento hai tutto. Congratulazioni!

Sì, per quanto riguarda l'interfaccia utente, sei ancora alla fase iniziale, ma potresti utilizzare i risultati rilevati nell'interfaccia utente, ad esempio disegnare il riquadro di delimitazione per creare un'esperienza migliore. Il passaggio successivo è visualizzare i risultati rilevati.

6. Post-elaborazione dei risultati del rilevamento

Nei passaggi precedenti, hai stampato il risultato rilevato in logcat: semplice e veloce.

In questa sezione utilizzerai il risultato nell'immagine:

disegna il riquadro di delimitazione sull'immagine
disegna il nome della categoria e la confidenza all'interno del riquadro di delimitazione

Informazioni sulle utilità di visualizzazione

All'interno del codelab è presente del codice boilerplate per aiutarti a visualizzare il risultato del rilevamento. Sfrutta queste utilità per semplificare il codice di visualizzazione:

class ImageClickableView Si tratta di una classe di visualizzazione delle immagini che fornisce alcune utilità pratiche per la visualizzazione e l'interazione con il risultato del rilevamento.
fun drawDetectionResults(results: List<DetectedObject>) Questo metodo disegna cerchi bianchi al centro di ogni oggetto rilevato.
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Questo è un callback per ricevere l'immagine ritagliata che contiene solo l'oggetto su cui l'utente ha toccato. In un codelab successivo, invierai questa immagine ritagliata al backend della ricerca immagini per ottenere un risultato visivamente simile. In questo codelab, non utilizzerai ancora questo metodo.

Mostra il risultato del rilevamento di ML Kit

Utilizza le utilità di visualizzazione per mostrare il risultato del rilevamento di oggetti di ML Kit sopra l'immagine di input.

Vai al punto in cui chiami debugPrint() e aggiungi il seguente snippet di codice:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Run it

Ora fai clic su Esegui ( ) nella barra degli strumenti di Android Studio.

Una volta caricata l'app, premi il pulsante con l'icona della fotocamera, punta la fotocamera verso un oggetto, scatta una foto, accettala (nell'app Fotocamera) oppure tocca una delle immagini preimpostate. Dovresti visualizzare il risultato del rilevamento. Premi di nuovo il pulsante o seleziona un'altra immagine per ripetere l'operazione un paio di volte e provare l'ultima versione di ML Kit ODT.

7. Complimenti!

Hai utilizzato ML Kit per aggiungere funzionalità di rilevamento degli oggetti alla tua app:

3 passaggi con 3 API
Crea immagine di input
Crea rilevatore
Inviare l'immagine al rilevatore

Questo è tutto ciò che ti serve per iniziare.

Argomenti trattati

Come aggiungere il rilevamento e il monitoraggio degli oggetti di ML Kit alla tua app per Android
Come utilizzare il rilevamento e il monitoraggio degli oggetti sul dispositivo in ML Kit per rilevare oggetti nelle immagini

Passaggi successivi

Prova questo codelab su come inviare l'oggetto rilevato a un backend di ricerca di prodotti e mostrare i risultati di ricerca
Esplora altro con ML Kit ODT con più immagini e video in diretta per sperimentare l'accuratezza e il rendimento del rilevamento e della classificazione
Consulta il percorso di apprendimento Approfondisci il rilevamento di oggetti per scoprire come addestrare un modello personalizzato.
Leggi i consigli di Material Design per il rilevamento di oggetti in immagini statiche e da fotocamera
Applicare l'estrazione di testo da immagini di ML Kit nella tua app per Android

Scopri di più

https://developers.google.com/ml-kit/vision/object-detection