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

1. Hinweis

727608486a28395d.png

Kennst du die Google Lens-Demo, mit der du die Kamera deines Smartphones auf ein Objekt richten und herausfinden kannst, wo du es online kaufen kannst? Wenn Sie wissen möchten, wie Sie Ihrer App diese Funktion hinzufügen können, ist dieses Codelab genau das Richtige für Sie. Sie ist Teil eines Lernpfads, der Ihnen zeigt, wie Sie eine Funktion für die Produktbildersuche in eine mobile App integrieren.

In diesem Codelab lernen Sie den ersten Schritt zum Erstellen einer Funktion für die Produktbildersuche kennen: Sie erfahren, wie Sie Objekte in Bildern erkennen und die Nutzer die Objekte auswählen lassen, nach denen sie suchen möchten. Um diese Funktion zu erstellen, verwenden Sie die ML Kit-Objekterkennung und -verfolgung.

Weitere Informationen zu den verbleibenden Schritten, unter anderem zum Erstellen eines Backends für die Produktsuche mit der Vision API-Produktsuche, finden Sie im Lernpfad.

Inhalt

  • In diesem Codelab entwickeln 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. Dann wählen die Nutzenden ein Objekt aus, nach dem sie in unserer Produktdatenbank suchen möchten.
  • Am Ende sollten Sie etwas sehen, das dem Bild auf der rechten Seite ähnelt.

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 und höher)
  • Android Studio-Emulator oder ein physisches Android-Gerät
  • Beispielcode
  • Grundkenntnisse der Android-Entwicklung in Kotlin

In diesem Codelab geht es um ML Kit. Andere Konzepte und Codeblöcke werden nicht untersucht. Sie 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 der Stammordner (odml-pathways-main) mit allen benötigten Ressourcen entpackt. Für dieses Codelab benötigen Sie nur die Quellen im Unterverzeichnis product-search/codelab1/android.

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

  • android_studio_folder.pngstarter: Code wird gestartet, auf dem Sie für dieses Codelab aufbauen.
  • android_studio_folder.pngfinal: Der Code für die fertige Beispiel-App wurde fertiggestellt.

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

App in Android Studio importieren

Importiere zuerst die starter App in Android Studio.

Gehen Sie zu Android Studio, wählen Sie „Projekt importieren“ (Gradle, Eclipse ADT usw.) und dann den Ordner starter aus dem Quellcode aus, den Sie zuvor heruntergeladen haben.

7c0f27882a2698ac.png

Abhängigkeiten für ML Kit-Objekterkennung und -Tracking hinzufügen

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

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 Gradle-Dateien synchronisieren.

Wählen Sie in der Android Studio-Symbolleiste Sync Project with Gradle Files ( b451ab2d04d835f9.png) aus.

Wenn diese Schaltfläche deaktiviert ist, importieren Sie nur starter/app/build.gradle und 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-Objekterkennung und -verfolgung 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 kennenlernen

Die App sollte auf deinem Android-Gerät gestartet werden. Sie enthält Boilerplate-Code, mit dem Sie ein Foto aufnehmen oder ein voreingestelltes Bild auswählen und an eine Pipeline zur Objekterkennung und -verfolgung übergeben können, die Sie in diesem Codelab erstellen. Machen Sie sich mit der App vertraut, bevor Sie Code schreiben:

Zum einen befindet sich unten eine Schaltfläche ( c6d965d639c3646.png)

  • die in dein Gerät bzw. deinen Emulator integrierte Kamera-App starten
  • ein Foto mit der Kamera-App aufnehmen
  • Das aufgenommene Bild in der Starter App empfangen
  • zeig das Bild an

Teste die Funktion Foto aufnehmen Schaltfläche. Folgen Sie der Anleitung, um ein Foto aufzunehmen, akzeptieren Sie das Foto und sehen Sie sich an, wie es in der Starter-App angezeigt wird.

Zweitens gibt es drei voreingestellte Bilder, aus denen Sie auswählen können. Sie können diese Bilder später verwenden, um den Objekterkennungscode zu testen, wenn Sie mit einem Android-Emulator arbeiten.

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

1290481786af21b9.png

5. Objekterkennung auf dem Gerät hinzufügen

In diesem Schritt fügen Sie der Start-App die Funktion zum Erkennen von Objekten in Bildern hinzu. 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. In der App gibt es außerdem drei voreingestellte Images, an denen Sie die Objekterkennung ausprobieren 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 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.

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

In nur 3 einfachen Schritten mit 3 APIs ist ML Kit ODT eingerichtet

  • Bild vorbereiten: InputImage
  • Detektorobjekt erstellen: ObjectDetection.getClient(options)
  • Verbinde die beiden oben genannten Objekte: process(image)

Das können Sie in der Funktion **runObjectDetection(bitmap: Bitmap)**in der Datei MainActivity.kt tun.

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

Im Moment ist die Funktion leer. Fahren Sie mit den folgenden Schritten fort, um ML Kit ODT zu integrieren. Android Studio fordert Sie dann 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 einspeisen.

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

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

Schritt 2: Detektorinstanz erstellen

ML Kit folgt dem Builder-Designmuster. Sie würden die Konfiguration an den Builder übergeben und dann einen Detektor daraus abrufen. Es gibt drei Konfigurationsoptionen (im Codelab wird die fett gedruckte verwendet):

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

Dieses Codelab ist für die Erkennung mehrerer Bilder in einem Bild und Klassifizierung:

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

Schritt 3: Dem Detektor Bilder senden

Die Objekterkennung und -klassifizierung ist die asynchrone Verarbeitung:

  • du sendest ein Bild an den Detektor (über process())
  • dass der Detektor hart daran arbeitet
  • Detektor meldet das Ergebnis über einen Callback an dich

Mit dem folgenden Code ist genau das möglich (kopieren und an den vorhandenen Code in fun runObjectDetection(bitmap:Bitmap)): anhängen).

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

Sobald der Vorgang abgeschlossen ist, erhalten Sie eine Benachrichtigung mit

  1. Gesamtzahl der erkannten Objekte
  2. Jedes erkannte Objekt wird mit
  • trackingId: Ganzzahl, die Sie für das Tracking von Frames verwenden (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 "Modeartikel", "Lebensmittel", "Einrichtungsgegenstände", "Ort", "Pflanze")
  • confidence (eine Gleitkommazahl zwischen 0,0 und 1,0 mit 1,0 bedeutet 100%)

Sie haben wahrscheinlich bemerkt, dass der Code die erkannten Ergebnisse mit debugPrint() an Logcat ausgibt. Fügen Sie sie in MainActivity Kurs 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 annehmen.

Führen Sie das Codelab aus, indem Sie in der Android Studio-Symbolleiste auf Ausführen ( execute.png) klicken. Wählen Sie ein voreingestelltes Bild aus oder nehmen Sie ein Foto auf und schauen 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 3 Objekte erkannt hat:

  • Kategorien sind Modeartikel und Gute Wohnung.
  • wird für die zweite keine Kategorie zurückgegeben, da es sich um eine unbekannte Klasse handelt.
  • Nein trackingId (da es sich um den Einzelbilderkennungsmodus handelt)
  • Position innerhalb des boundingBox-Rechtecks (z.B. (481, 2021)– (2426, 3376))
  • Detektor ist ziemlich sicher, dass der erste ein Modegut ist (90%) (es ist ein Kleid).

Technisch ist das alles, was Sie brauchen, um die ML Kit-Objekterkennung zum Laufen zu bringen – Sie haben alles im Moment verstanden! Glückwunsch!

Ja, auf der UI-Seite sind Sie noch in der Anfangsphase, aber Sie könnten die erkannten Ergebnisse auf der Benutzeroberfläche nutzen, z. B. das Zeichnen des Begrenzungsrahmens, um eine bessere User Experience zu schaffen. Im nächsten Schritt visualisieren Sie die erkannten Ergebnisse.

6. Nachverarbeitung der Erkennungsergebnisse

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

In diesem Abschnitt nutzen Sie das Ergebnis im Bild:

  • Begrenzungsrahmen auf einem Bild zeichnen
  • Kategoriename und Konfidenz innerhalb des Markierungsrahmens zeichnen

Visualisierungsdienstprogramme

Das Codelab enthält Boilerplate-Code, mit dem Sie das Erkennungsergebnis visualisieren können. Nutzen Sie diese Dienstprogramme, um unseren Visualisierungscode einfach zu gestalten:

  • class ImageClickableView Dies ist eine Bildansichtsklasse, die einige praktische Tools zur Visualisierung und Interaktion mit dem Erkennungsergebnis bietet.
  • fun drawDetectionResults(results: List<DetectedObject>) Mit dieser Methode werden weiße Kreise in der Mitte jedes erkannten Objekts gezeichnet.
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Dies ist ein Callback, der das zugeschnittene Bild empfängt, 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 für die Bildersuche, um ein optisch ähnliches Ergebnis zu erhalten. In diesem Codelab verwenden Sie diese Methode noch nicht.

ML Kit-Erkennungsergebnis anzeigen

Verwenden Sie die Visualisierungsdienstprogramme, um das Ergebnis der ML Kit-Objekterkennung über dem Eingabebild anzuzeigen.

Rufen Sie debugPrint() auf und fügen Sie darunter das folgende Code-Snippet 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 Taste 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 voreingestellte Bilder. Das Ergebnis der Erkennung sollte angezeigt werden: Klicken Sie noch einmal auf die Schaltfläche oder wählen Sie ein anderes Bild aus, um den Vorgang einige Male zu wiederholen, und testen Sie die neueste ML Kit-ODT-Version.

5027148750dc0748.png

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

Das ist alles, was Sie brauchen, um loszulegen.

Behandelte Themen

  • Android-App Objekterkennung und -tracking mit ML Kit hinzufügen
  • Mit der Objekterkennung und -verfolgung auf dem Gerät in ML Kit Objekte in Bildern erkennen

Nächste Schritte

  • In diesem Codelab erfahren Sie, wie Sie das erkannte Objekt an ein Backend für die Produktsuche senden und die Suchergebnisse anzeigen lassen.
  • Mit ML Kit ODT können Sie mehr entdecken – mit mehr Bildern und Live-Videos zur Erkennung und Genauigkeit und Leistung der Klassifizierung
  • Im Lernpfad Mit der Objekterkennung weitermachen erfahren Sie, wie Sie ein benutzerdefiniertes Modell trainieren
  • Lesen Sie mehr über die Material Design-Empfehlungen für die Objekterkennung live-camera und static-image.
  • ML Kit ODT in Ihrer eigenen Android-App anwenden

Weitere Informationen