Mit ML Kit: Android Objekte in Bildern erkennen, um eine visuelle Produktsuche zu erstellen

1. Hinweis

727608486a28395d.png

Haben Sie die Google Lens-Demo gesehen, bei der Sie die Kamera Ihres Smartphones auf ein Objekt richten und herausfinden können, wo Sie es online kaufen können? In diesem Codelab erfahren Sie, wie Sie diese Funktion in Ihre App einbinden. Es ist Teil eines Lernpfads, in dem Sie erfahren, wie Sie eine Produktbildsuche in eine mobile App einbinden.

In diesem Codelab erfahren Sie, wie Sie eine Funktion für die Produktbildsuche erstellen. Dazu müssen Sie zuerst lernen, wie Sie Objekte in Bildern erkennen und Nutzer die Möglichkeit geben, die Objekte auszuwählen, nach denen sie suchen möchten. Sie verwenden ML Kit Object Detection and Tracking, um diese Funktion zu erstellen.

Weitere Informationen zu den verbleibenden Schritten, einschließlich der Erstellung eines Produktsuch-Backends mit der Vision API-Produktsuche, finden Sie im Lernpfad.

Umfang

  • In diesem Codelab erstellen Sie eine Android-App mit ML Kit. Ihre App verwendet die ML Kit Object Detection and Tracking API, um Objekte in einem bestimmten Bild zu erkennen. Anschließend wählt der Nutzer ein Objekt aus, nach dem er in unserer Produktdatenbank suchen möchte.
  • Am Ende sollte das Bild rechts zu sehen sein.

Aufgaben in diesem Lab

  • ML Kit SDK in Ihre Android-Anwendung einbinden
  • ML Kit Object Detection and Tracking API

Voraussetzungen

  • Eine aktuelle Version von Android Studio (Version 4.1.2 oder höher)
  • Android Studio-Emulator oder ein physisches Android-Gerät
  • Beispielcode
  • Grundkenntnisse in der Android-Entwicklung mit Kotlin

In diesem Codelab geht es um ML Kit. Andere Konzepte und Codeblöcke werden nicht behandelt und können einfach kopiert und eingefügt werden.

2. Einrichten

Code herunterladen

Klicken Sie auf den folgenden Link, um den gesamten Code für dieses Codelab herunterzuladen:

Entpacken Sie die heruntergeladene ZIP-Datei. Dadurch wird ein Stammordner (odml-pathways-main) mit allen erforderlichen Ressourcen entpackt. Für dieses Codelab benötigen Sie nur die Quellen im Unterverzeichnis product-search/codelab1/android.

Das Unterverzeichnis „object-detection“ im mlkit-android-Repository enthält zwei Verzeichnisse:

  • android_studio_folder.pngstarter: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
  • android_studio_folder.pngfinal: Der vollständige Code der fertigen Beispiel-App.

3. ML Kit Object Detection and Tracking API zum Projekt hinzufügen

App in Android Studio importieren

Importieren Sie zuerst die starter in Android Studio.

Öffnen Sie Android Studio, wählen Sie „Import Project“ (Projekt importieren, z. B. Gradle, Eclipse ADT) aus und wählen Sie den Ordner starter aus dem zuvor heruntergeladenen Quellcode aus.

7c0f27882a2698ac.png

Abhängigkeiten für die Objekterkennung und das Objekt-Tracking von ML Kit hinzufügen

Mit den ML Kit-Abhängigkeiten können Sie das ML Kit ODT SDK in Ihre App einbinden.

Rufen Sie die Datei app/build.gradle Ihres Projekts auf und prüfen Sie, ob die Abhängigkeit bereits vorhanden ist:

build.gradle

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

Projekt mit Gradle-Dateien synchronisieren

Damit alle Abhängigkeiten für Ihre App verfügbar sind, sollten Sie Ihr Projekt jetzt mit den Gradle-Dateien synchronisieren.

Wählen Sie in der Android Studio-Symbolleiste Projekt mit Gradle-Dateien synchronisieren ( b451ab2d04d835f9.png) aus.

Wenn diese Schaltfläche deaktiviert ist, importieren Sie nur „starter/app/build.gradle“, nicht das gesamte Repository.

4. Start-App ausführen

Nachdem Sie das Projekt in Android Studio importiert und die Abhängigkeiten für die ML Kit Object Detection und das Tracking hinzugefügt haben, können Sie die App zum ersten Mal ausführen.

Verbinden Sie Ihr Android-Gerät über USB mit Ihrem Host oder starten Sie den Android Studio-Emulator und klicken Sie in der Android Studio-Symbolleiste auf Ausführen ( execute.png).

App ausführen und testen

Die App sollte auf Ihrem Android-Gerät gestartet werden. Es enthält einige Boilerplate-Code, mit dem Sie ein Foto aufnehmen oder ein vordefiniertes Bild auswählen und in eine Objekterkennungs- und -verfolgungspipeline einspeisen können, die Sie in diesem Codelab erstellen. Sehen Sie sich die App an, bevor Sie Code schreiben:

Unten befindet sich eine Schaltfläche ( c6d965d639c3646.png), über die Sie

  • Starten Sie die in Ihrem Gerät oder Emulator integrierte Kamera-App.
  • ein Foto in der Kamera App aufnehmen
  • das aufgenommene Bild in der Startanwendung empfängt
  • Bild anzeigen

Probieren Sie die Schaltfläche Foto aufnehmen aus. Folgen Sie der Anleitung, um ein Foto aufzunehmen, nehmen Sie es an und sehen Sie sich an, wie es in der Start-App angezeigt wird.

Zweitens: Es stehen drei voreingestellte Bilder zur Auswahl. Sie können diese Bilder später verwenden, um den Code für die Objekterkennung zu testen, wenn Sie einen Android-Emulator verwenden.

  1. Wählen Sie ein Bild aus den drei voreingestellten Bildern aus.
  2. Achten Sie darauf, dass das Bild in der größeren Ansicht angezeigt wird.

1290481786af21b9.png

5. Objekterkennung auf dem Gerät hinzufügen

In diesem Schritt fügen Sie der Starter App die Funktion hinzu, mit der Objekte in Bildern erkannt werden. Wie Sie im vorherigen Schritt gesehen haben, enthält die Starter App Boilerplate-Code zum Aufnehmen von Fotos mit der Kamera-App auf dem Gerät. In der App gibt es außerdem drei vordefinierte Bilder, mit denen Sie die Objekterkennung ausprobieren können, wenn Sie das Codelab in einem Android-Emulator ausführen.

Wenn Sie ein Bild aus den voreingestellten Bildern auswählen oder ein Foto mit der Kamera-App aufnehmen, decodiert der Boilerplate-Code dieses Bild in eine Bitmap-Instanz, zeigt es auf dem Bildschirm an und ruft die runObjectDetection-Methode mit dem Bild auf.

In diesem Schritt fügen Sie der Methode runObjectDetection Code für die Objekterkennung hinzu.

On-Device-Objekterkennung für ein Bild einrichten und ausführen

ML Kit ODT lässt sich mit drei APIs in nur drei einfachen Schritten einrichten.

  • Bild vorbereiten: InputImage
  • Erstellen Sie ein Detektorobjekt: ObjectDetection.getClient(options)
  • Verbinden Sie die beiden Objekte oben: process(image)

Sie finden sie in der Funktion **runObjectDetection(bitmap: Bitmap)**in der Datei MainActivity.kt.

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

Derzeit ist die Funktion leer. Gehen Sie mit den folgenden Schritten zur Integration von ML Kit ODT fort. Android Studio fordert Sie während des Vorgangs auf, die erforderlichen Importe hinzuzufügen.

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

Schritt 1: InputImage erstellen

ML Kit bietet eine einfache API, mit der eine InputImage aus einer Bitmap erstellt werden kann. Anschließend können Sie eine InputImage in die ML Kit APIs einspeisen.

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

Fügen Sie den Code oben in runObjectDetection(bitmap:Bitmap) ein.

Schritt 2: Detektorinstanz erstellen

ML Kit folgt dem Builder-Designmuster. Sie übergeben die Konfiguration an den Builder und erhalten dann einen Detektor. Es gibt drei Optionen, die konfiguriert werden können. Die Option in fett wird im Codelab verwendet:

  • Detektormodus (Einzelbild oder Stream)
  • Erkennungsmodus (einzelne oder mehrere Objekterkennung)
  • Klassifizierungsmodus (aktiviert oder deaktiviert)

Dieses Codelab bezieht sich auf die Erkennung und Klassifizierung mehrerer Objekte in einem einzelnen Bild. Gehen wir so vor:

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

Schritt 3: Bilder an den Detector übergeben

Die Objekterkennung und -klassifizierung erfolgt asynchron:

  • Sie senden ein Bild (über process()) an den Detector.
  • Der Detektor arbeitet ziemlich hart daran.
  • Der Detector meldet das Ergebnis über einen Callback an Sie zurück.

Der folgende Code tut genau das: Er kopiert den Code und fügt ihn dem vorhandenen Code in fun runObjectDetection(bitmap:Bitmap)): hinzu.

// 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())
   }

Nach Abschluss werden Sie vom Detector mit folgenden Informationen benachrichtigt:

  1. Gesamtzahl der erkannten Objekte
  2. Jedes erkannte Objekt wird mit folgenden Informationen beschrieben:
  • trackingId: eine Ganzzahl, mit der Sie den Frame erfassen (wird in diesem Codelab NICHT verwendet)
  • boundingBox: Begrenzungsrahmen des Objekts
  • labels: Liste der Label für das erkannte Objekt (nur, wenn die Klassifizierung aktiviert ist)
  • index (Index dieses Labels abrufen)
  • text (Text dieses Labels abrufen, einschließlich „Fashion Goods“, „Food“, „Home Goods“, „Place“ und „Plant“)
  • confidence (Gleitkommazahl zwischen 0,0 und 1,0, wobei 1,0 100 % entspricht)

Sie haben wahrscheinlich bemerkt, dass der Code erkannte Ergebnisse mit debugPrint() in Logcat ausgibt. Fügen Sie sie der Klasse MainActivity hinzu:

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}")
       }
   }
}

Jetzt können Sie Bilder zur Erkennung akzeptieren.

Führen Sie das Codelab aus, indem Sie in der Android Studio-Symbolleiste auf Ausführen ( execute.png) klicken. Wählen Sie ein vordefiniertes Bild aus oder machen Sie ein Foto und sehen Sie sich dann das Logcat-Fenster( 16bd6ea224cf8cf1.png) in der IDE an. Die Ausgabe sollte etwa so aussehen:

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

Das bedeutet, dass der Detektor drei Objekte erkannt hat:

  • Kategorien sind Fashion good und Home good.
  • Für die zweite Zeile wird keine Kategorie zurückgegeben, da es sich um eine unbekannte Klasse handelt.
  • Nein, trackingId (da dies der Modus für die Erkennung einzelner Bilder ist)
  • Position innerhalb des Rechtecks boundingBox (z.B. (481, 2021) bis (2426, 3376))
  • Der Detektor ist ziemlich sicher, dass das erste Bild ein Modeartikel (90%) ist (es ist ein Kleid).

Technisch gesehen ist das alles, was Sie für die ML Kit-Objekterkennung benötigen. Glückwunsch!

Ja, auf der Benutzeroberfläche sind Sie noch in der Phase, in der Sie angefangen haben. Sie könnten jedoch die erkannten Ergebnisse in der Benutzeroberfläche verwenden, z. B. den Begrenzungsrahmen zeichnen, um die Nutzerfreundlichkeit zu verbessern. Im nächsten Schritt werden die erkannten Ergebnisse visualisiert.

6. Nachbearbeitung der Erkennungsergebnisse

In den vorherigen Schritten haben Sie das erkannte Ergebnis in logcat ausgegeben: einfach und schnell.

In diesem Abschnitt verwenden Sie das Ergebnis im Bild:

  • Begrenzungsrahmen auf dem Bild zeichnen
  • den Namen der Kategorie und den Konfidenzwert innerhalb des Begrenzungsrahmens zeichnen

Visualisierungstools

Im Codelab finden Sie einige Vorlagencodes, mit denen Sie das Erkennungsergebnis visualisieren können. Mit diesen Dienstprogrammen können Sie den Visualisierungscode vereinfachen:

  • class ImageClickableView Dies ist eine Bildansichtsklasse, die einige praktische Tools zur Visualisierung und Interaktion mit dem Erkennungsergebnis bietet.
  • fun drawDetectionResults(results: List<DetectedObject>) Bei dieser Methode werden weiße Kreise in der Mitte jedes erkannten Objekts gezeichnet.
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Das ist ein Rückruf, um das zugeschnittene Bild zu erhalten, das nur das Objekt enthält, auf das der Nutzer getippt hat. Sie senden dieses zugeschnittene Bild in einem späteren Codelab an das Backend der Bildsuche, um ein visuell ähnliches Ergebnis zu erhalten. In diesem Codelab verwenden Sie diese Methode noch nicht.

ML Kit-Erkennungsergebnis anzeigen

Mit den Visualisierungs-Dienstprogrammen können Sie das Ergebnis der ML Kit-Objekterkennung über dem Eingabebild anzeigen.

Gehen Sie zu der Stelle, an der Sie debugPrint() aufrufen, und fügen Sie das folgende Code-Snippet darunter ein:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Ausführen

Klicken Sie jetzt in der Android Studio-Symbolleiste auf Ausführen ( execute.png).

Sobald die App geladen ist, drücken Sie die Schaltfläche mit dem Kamerasymbol, richten Sie die Kamera auf ein Objekt, nehmen Sie ein Foto auf, akzeptieren Sie das Foto (in der Kamera App) oder tippen Sie einfach auf ein vordefiniertes Bild. Das Erkennungsergebnis sollte angezeigt werden. Drücken Sie noch einmal auf die Schaltfläche oder wählen Sie ein anderes Bild aus, um das Ganze noch einmal zu wiederholen und die neueste ML Kit ODT zu testen.

5027148750dc0748.png

7. Glückwunsch!

Sie haben Ihrer App mit ML Kit Funktionen zur Objekterkennung hinzugefügt:

  • 3 Schritte mit 3 APIs
  • Eingabebild erstellen
  • Detektor erstellen
  • Bild an den Detektor senden

Das ist alles, was du brauchst, um loszulegen.

Behandelte Themen

  • ML Kit-Objekterkennung und -Tracking in Ihrer Android-App verwenden
  • On-Device-Objekterkennung und -Tracking in ML Kit verwenden, um Objekte in Bildern zu erkennen

Nächste Schritte

  • In diesem Codelab erfahren Sie, wie Sie das erkannte Objekt an ein Produktsuch-Back-End senden und die Suchergebnisse anzeigen.
  • Mit ML Kit ODT mehr herausfinden – mit mehr Bildern und Livevideos, um die Genauigkeit und Leistung der Erkennung und Klassifizierung zu testen
  • Im Lernpfad Mehr über die Objekterkennung erfahren erfahren Sie, wie Sie ein benutzerdefiniertes Modell trainieren.
  • Weitere Informationen zu den Material Design-Empfehlungen für die Objekterkennung bei Live-Kameras und statischen Bildern
  • ML Kit ODT in Ihrer eigenen Android-App anwenden

Weitere Informationen