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

1. Hinweis

Haben Sie schon 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? Wenn Sie wissen möchten, wie Sie diese Funktion in Ihre App einbauen können, ist dieses Codelab genau das Richtige für Sie. Es ist Teil eines Lernpfads, in dem Sie erfahren, wie Sie eine Produktsuche per Bild in eine mobile App einbauen.

In diesem Codelab lernen Sie den ersten Schritt zum Erstellen einer Produktsuche per Bild: Sie erfahren, wie Sie Objekte in Bildern erkennen und dem Nutzer die Möglichkeit geben, die Objekte auszuwählen, nach denen er suchen möchte. Für diese Funktion verwenden Sie ML Kit Object Detection and Tracking.

Die restlichen Schritte, einschließlich der Erstellung eines Back-Ends für die Produktsuche mit der Vision API-Produktsuche, finden Sie im Lernpfad.

Was Sie erstellen

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 Ergebnis in etwa so aussehen wie im Bild rechts.

Lerninhalte

So binden Sie das ML Kit SDK in Ihre Android-Anwendung ein
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
Der Beispielcode
Grundkenntnisse der Android-Entwicklung in Kotlin

Dieses Codelab konzentriert sich auf ML Kit. Andere Konzepte und Codeblöcke werden nicht behandelt und sind nur zum Kopieren und Einfügen vorgesehen.

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 Repository „mlkit-android“ enthält zwei Unterverzeichnisse:

starter: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
final: Der vollständige Code für die fertige Beispiel-App.

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

App in Android Studio importieren

Importieren Sie zuerst die starter -App in Android Studio.

Wählen Sie in Android Studio die Option „Import Project (Gradle, Eclipse ADT, etc.)“ (Projekt importieren (Gradle, Eclipse ADT usw.)) aus und wählen Sie den Ordner starter aus dem Quellcode aus, den Sie zuvor heruntergeladen haben.

Abhängigkeiten für ML Kit Object Detection and Tracking 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 die Option Sync Project with Gradle Files (Projekt mit Gradle-Dateien synchronisieren) ( ) aus.

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

4. Starter-App ausführen

Nachdem Sie das Projekt in Android Studio importiert und die Abhängigkeiten für ML Kit Object Detection and 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 Run (Ausführen) ().

App ausführen und testen

Die App sollte auf Ihrem Android-Gerät gestartet werden. Sie enthält etwas Boilerplate-Code, mit dem Sie ein Foto aufnehmen oder ein voreingestelltes Bild auswählen und es an eine Pipeline zur Objekterkennung und zum Objekt-Tracking senden können, die Sie in diesem Codelab erstellen. Testen Sie die App ein wenig, bevor Sie Code schreiben:

Unten befindet sich eine Button -Schaltfläche ( ), mit der Sie Folgendes tun können:

Die in Ihr Gerät/Ihren Emulator integrierte Kamera-App starten
Ein Foto in Ihrer Kamera-App aufnehmen
Das aufgenommene Bild in der Starter-App empfangen
Das Bild anzeigen

Testen Sie die Schaltfläche "Take photo" (Foto aufnehmen). Folgen Sie der Anleitung, um ein Foto aufzunehmen, bestätigen Sie das Foto und sehen Sie es sich in der Starter-App an.

Außerdem stehen drei voreingestellte Bilder zur Auswahl. Sie können diese Bilder später verwenden, um den Code zur Objekterkennung zu testen, wenn Sie einen Android-Emulator verwenden.

Wählen Sie ein Bild aus den drei voreingestellten Bildern aus.
Das Bild wird in der größeren Ansicht angezeigt.

5. Objekterkennung auf dem Gerät hinzufügen

In diesem Schritt fügen Sie der Starter-App die Funktion hinzu, Objekte in Bildern zu erkennen. Wie Sie im vorherigen Schritt gesehen haben, enthält die Starter-App Boilerplate-Code, mit dem Sie mit der Kamera-App auf dem Gerät Fotos aufnehmen können. Außerdem enthält die App drei voreingestellte Bilder, mit denen Sie die Objekterkennung testen können, wenn Sie das Codelab auf einem Android-Emulator ausführen.

Wenn Sie ein Bild auswählen, entweder aus den voreingestellten Bildern oder indem Sie mit der Kamera-App ein Foto aufnehmen, wird das Bild durch den Boilerplate-Code in eine Bitmap-Instanz decodiert, auf dem Bildschirm angezeigt und die Methode runObjectDetection mit dem Bild aufgerufen.

In diesem Schritt fügen Sie der Methode runObjectDetection Code hinzu, um die Objekterkennung durchzuführen.

Objekterkennung auf dem Gerät für ein Bild einrichten und ausführen

Es sind nur drei einfache Schritte mit drei APIs erforderlich, um ML Kit ODT einzurichten.

Bild vorbereiten: InputImage
Detektorobjekt erstellen: ObjectDetection.getClient(options)
Die beiden oben genannten Objekte verbinden: process(image)

Sie führen diese Schritte in der Funktion **runObjectDetection(bitmap: Bitmap)**in der Datei MainActivity.kt aus.

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

Die Funktion ist derzeit leer. Fahren Sie mit den folgenden Schritten fort, um ML Kit ODT zu integrieren. Android Studio fordert Sie dabei 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 zum Erstellen eines InputImage aus einem Bitmap. Anschließend können Sie ein InputImage in die ML Kit APIs einfügen.

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

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

Schritt 2: Detektorinstanz erstellen

ML Kit folgt dem Builder-Entwurfsmuster. Sie übergeben die Konfiguration an den Builder und rufen dann einen Detektor ab. Es gibt drei Konfigurationsoptionen (die fett gedruckte Option wird in diesem Codelab verwendet):

Detektormodus (Einzelbild oder Stream)
Erkennungsmodus (Einzel- oder Mehrfach Objekterkennung)
Klassifizierungsmodus (Ein oder Aus)

In diesem Codelab geht es um die Erkennung und Klassifizierung mehrerer Objekte in einem Einzelbild. Führen Sie dazu die folgenden Schritte aus:

// 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 Detektor senden

Die Objekterkennung und -klassifizierung ist eine asynchrone Verarbeitung:

Sie senden ein Bild an den Detektor (über process())
Der Detektor verarbeitet das Bild.
Der Detektor meldet das Ergebnis über einen Callback zurück.

Der folgende Code führt genau diese Schritte aus. Kopieren Sie ihn und fügen Sie 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 der Verarbeitung benachrichtigt der Detektor Sie mit folgenden Informationen:

Gesamtzahl der erkannten Objekte
Jedes erkannte Objekt wird mit folgenden Informationen beschrieben:

trackingId: Eine Ganzzahl, mit der Sie das Objekt über mehrere Frames hinweg verfolgen können (wird in diesem Codelab NICHT verwendet)
boundingBox: Begrenzungsrahmen des Objekts
labels: Liste der Labels 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“, „Plant“)
confidence (eine 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 ihn 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 Run (Ausführen) ( ) klicken. Wählen Sie ein voreingestelltes Bild aus oder nehmen Sie ein Foto auf und sehen Sie sich dann das Logcat-Fenster( ) 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 der folgenden Kategorien erkannt hat:

Die Kategorien sind Fashion good und Home good.
Für das zweite Objekt wird keine Kategorie zurückgegeben, da es sich um eine unbekannte Klasse handelt.
Keine trackingId (da dies der Einzelbilderkennungsmodus ist)
Position innerhalb des Rechtecks boundingBox (z.B. (481, 2021) – (2426, 3376))
Der Detektor ist sich ziemlich sicher, dass das erste Objekt ein Fashion good ist (90%) (es ist ein Kleid).

Technisch gesehen ist das alles, was Sie benötigen, um die ML Kit-Objekterkennung zu verwenden. Sie haben alles in diesem Moment erledigt. Herzlichen Glückwunsch!

Ja, auf der UI-Seite sind Sie noch am Anfang, aber Sie könnten die erkannten Ergebnisse auf der UI verwenden, z. B. den Begrenzungsrahmen zeichnen, um die Nutzerfreundlichkeit zu verbessern. Der nächste Schritt ist die Visualisierung der erkannten Ergebnisse.

6. Erkennungsergebnisse nachbearbeiten

In den vorherigen Schritten haben Sie das erkannte Ergebnis in Logcat ausgegeben. Das ist einfach und schnell.

In diesem Abschnitt verwenden Sie das Ergebnis im Bild:

Begrenzungsrahmen auf das Bild zeichnen
Kategoriename und Konfidenzwert innerhalb des Begrenzungsrahmens zeichnen

Visualisierungstools verstehen

Das Codelab enthält Boilerplate-Code, mit dem Sie das Erkennungsergebnis visualisieren können. Nutzen Sie diese Tools, um den Visualisierungscode zu vereinfachen:

class ImageClickableView : Dies ist eine Bildansichtsklasse, die einige praktische Tools für die Visualisierung und Interaktion mit dem Erkennungsergebnis bietet.
fun drawDetectionResults(results: List<DetectedObject>) : Diese Methode zeichnet weiße Kreise in die Mitte jedes erkannten Objekts.
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Dies ist ein Callback, 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 Back-End für die Bildsuche, um ein visuell ähnliches Ergebnis zu erhalten. In diesem Codelab verwenden Sie diese Methode noch nicht.

ML Kit-Erkennungsergebnis anzeigen

Verwenden Sie die Visualisierungstools, um das ML Kit-Erkennungsergebnis für Objekte über dem Eingabebild anzuzeigen.

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

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Ausführen

Klicken Sie in der Android Studio-Symbolleiste auf Run ( ).

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 und bestätigen Sie es in der Kamera-App. Alternativ können Sie auch auf ein voreingestelltes Bild tippen. Das Erkennungsergebnis wird angezeigt. Drücken Sie die Schaltfläche noch einmal oder wählen Sie ein anderes Bild aus, um den Vorgang mehrmals zu wiederholen und die neueste Version von ML Kit ODT zu testen.

7. Glückwunsch!

Sie haben ML Kit verwendet, um Ihrer App Funktionen zur Objekterkennung hinzuzufügen:

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

Das ist alles, was Sie für die Einrichtung und Ausführung benötigen.

Behandelte Themen

So fügen Sie Ihrer Android-App ML Kit Object Detection and Tracking hinzu
So verwenden Sie die Objekterkennung und das Objekt-Tracking auf dem Gerät in ML Kit, um Objekte in Bildern zu erkennen

Nächste Schritte

Probieren Sie dieses Codelab aus, in dem Sie erfahren, wie Sie das erkannte Objekt an ein Back-End für die Produktsuche senden und die Suchergebnisse anzeigen.
Testen Sie ML Kit ODT mit weiteren Bildern und Livevideos, um die Genauigkeit und Leistung der Erkennung und Klassifizierung zu prüfen.
Im Lernpfad „Go further with object detection“ (Weitere Informationen zur Objekterkennung) erfahren Sie, wie Sie ein benutzerdefiniertes Modell trainieren.
Lesen Sie die Material Design-Empfehlungen für die Objekterkennung mit Livekamera und statischen Bildern.
Wenden Sie ML Kit ODT in Ihrer eigenen Android-App an.

Weitere Informationen

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