Backend für die Suche nach Produktbildern mit der Vision API-Produktsuche erstellen

1. Hinweis

25939f5a13eeb3c3.png

Im Lernpfad zur Produktsuche mit Bildern haben Sie bereits gelernt, wie Sie ein mit der Vision API-Produktsuche erstelltes Backend für die Produktsuche aufrufen, um visuell ähnliche Produkte aus einem Produktkatalog zu finden.

In diesem Codelab erfahren Sie, wie Sie ein ähnliches Backend mit Ihrem Produktkatalog erstellen.

Lerninhalte

  • Backend für die Produktsuche mit der Vision API-Produktsuche erstellen
  • API-Schlüssel für den Zugriff auf die Vision API über mobile Apps einrichten

Voraussetzungen

  • Ein Google Cloud-Konto mit aktivierter Abrechnung (kann ein Konto für den kostenlosen Testzeitraum sein)

2. Informationen zur Vision API-Produktsuche

Die Vision API-Produktsuche ist eine Funktion in Google Cloud, mit der Einzelhändler Produkte mit Referenzbildern erstellen können, die das Produkt optisch aus mehreren Perspektiven darstellen. Einzelhändler können diese Produkte dann Produktgruppen hinzufügen. Derzeit unterstützt die Vision API-Produktsuche die folgenden Produktkategorien: Haushaltswaren, Bekleidung, Spielzeug, abgepackte Waren und allgemein.

Wenn ein Nutzer die Produktgruppe mit eigenen Bildern abfragt, nutzt die API Vision-Produktsuche maschinelles Lernen, um das Produkt im Bild des Nutzers mit den Bildern in der Produktgruppe des Einzelhändlers zu vergleichen. Zurückgegeben wird eine nach Rang sortierte Liste mit optisch und semantisch ähnlichen Ergebnissen.

3. Back-End mit Google Cloud erstellen

Zuvor haben Sie im Lernpfad zur Suche nach Produktbildern ein mit der Vision API-Produktsuche erstelltes Demo-Backend für die Produktsuche verwendet. Erstellen Sie dasselbe Backend in Ihrem Google Cloud-Konto, indem Sie dieser Anleitung folgen:

Nachdem Sie das Tutorial durchgearbeitet haben, fahren Sie mit den folgenden Schritten fort, um einen API-Schlüssel zum Aufrufen des Back-Ends über Ihre mobilen Apps einzurichten.

4. API-Schlüssel einrichten

In der Kurzanleitung zur Vision API-Produktsuche haben Sie ein Backend für die Produktsuche erstellt, das ein Abfragebild entgegennehmen und visuell ähnliche Produkte zurückgeben kann. Wenn Sie die Produktsuche-API über eine mobile App aufrufen möchten, müssen Sie einen API-Schlüssel einrichten und den Zugriff auf den API-Schlüssel auf Ihre eigenen mobilen Apps beschränken, um eine unbefugte Nutzung zu vermeiden.

API-Schlüssel erstellen

  1. Rufen Sie die Cloud Console > APIs & Dienste > Anmeldedaten auf. Sie können auch auf diese URL klicken und das Projekt auswählen, das Sie in der Kurzanleitung zur Produktsuche verwendet haben.
  2. Wählen Sie Anmeldedaten erstellen > API-Schlüssel aus. Wenn Ihr API-Schlüssel erstellt wurde, wird dieses Dialogfeld angezeigt:

d0bc04782a41a698.png

Notieren Sie sich diesen API-Schlüssel. Sie benötigen sie später in diesem Codelab.

Zugriff auf den API-Schlüssel einschränken

Wenn die oben genannte Aufforderung angezeigt wird, wählen Sie Schlüssel einschränken aus.

Folgen Sie der Anleitung auf dem Bildschirm, um diese Einschränkungen anzuwenden:

  • „Anwendungseinschränkungen“ > „Android-Apps“
  • „API-Einschränkungen“ > „Schlüssel einschränken“ > „Cloud Vision API“

5. Mobile App herunterladen und ausführen

Sie können die zuvor erstellte Android-App herunterladen, die das Demo-Backend für die Produktsuche verwendet, und sie so ändern, dass sie das neue Backend verwendet, das Sie gerade erstellt haben.

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-pathway-codelabs) mit allen erforderlichen Ressourcen entpackt. Für dieses Codelab benötigen Sie nur die Quellen im Unterverzeichnis „product-search/codelab2/android/final“.

Die App verwendet die ML Kit Object Detection and Tracking API und ein Demo-Backend für die Produktsuche, das mit der Vision API-Produktsuche erstellt wurde. So können Nutzer ein Foto aufnehmen und im Demoproduktkatalog nach visuell ähnlichen Produkten suchen.

App in Android Studio importieren

Importieren Sie zuerst die Starter-App in Android Studio.

Wählen Sie in Android Studio Projekt importieren (Gradle, Eclipse ADT usw.) aus und wählen Sie den Ordner product-search/codelab2/android/final aus dem Quellcode aus, den Sie zuvor heruntergeladen haben.

7c0f27882a2698ac.png

Start-App ausführen

Nachdem Sie das Projekt in Android Studio importiert haben, kann die App zum ersten Mal ausgeführt werden.

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).

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

Die App sollte jetzt auf Ihrem Android-Gerät gestartet worden sein. Es funktioniert bereits, verwendet aber das Demo-Backend für die Produktsuche, das Google für Sie bereitgestellt hat.

Als Nächstes aktualisieren Sie die App, damit sie das Backend verwendet, das Sie zuvor in diesem Codelab erstellt haben.

6. API-Endpunkte aktualisieren

API-Konfigurationen ändern

Rufen Sie die Klasse ProductSearchAPIClient auf. Dort sind die Konfigurationen des Back-Ends für die Produktsuche bereits definiert. Kommentieren Sie die Konfigurationen des Demobackends aus:

// Define the product search backend
// Option 1: Use the demo project that we have already deployed for you
// const val VISION_API_URL =
    "https://us-central1-odml-codelabs.cloudfunctions.net/productSearch"
// const val VISION_API_KEY = ""
// const val VISION_API_PROJECT_ID = "odml-codelabs"
// const val VISION_API_LOCATION_ID = "us-east1"
// const val VISION_API_PRODUCT_SET_ID = "product_set0"

Ersetzen Sie sie dann durch Ihre Konfiguration:

// Option 2: Go through the Vision API Product Search quickstart and deploy to your project.
// Fill in the const below with your project info.
const val VISION_API_URL = "https://vision.googleapis.com/v1"
const val VISION_API_KEY = "YOUR_API_KEY"
const val VISION_API_PROJECT_ID = "YOUR_PROJECT_ID"
const val VISION_API_LOCATION_ID = "YOUR_LOCATION_ID"
const val VISION_API_PRODUCT_SET_ID = "YOUR_PRODUCT_SET_ID"
  • VISION_API_URL ist der API-Endpunkt der Cloud Vision API.
  • VISION_API_KEY ist der API-Schlüssel, den Sie zuvor in diesem Codelab erstellt haben.
  • VISION_API_PROJECT_ID , VISION_API_LOCATION_ID und VISION_API_PRODUCT_SET_ID sind die Werte , die Sie im Vision API-Produktsuche-Schnellstart weiter oben in diesem Codelab verwendet haben.

Ausführen

Klicken Sie nun in der Android Studio-Symbolleiste auf Ausführen ( execute.png). Tippen Sie nach dem Laden der App auf ein beliebiges voreingestelltes Bild, wählen Sie ein erkanntes Objekt aus und tippen Sie auf die Schaltfläche Suchen, um die Suchergebnisse aufzurufen. Die App verwendet jetzt das von Ihnen gerade erstellte Backend für die Produktsuche.

25939f5a13eeb3c3.png

7. Glückwunsch!

Sie haben gelernt, wie Sie mit der Vision API-Produktsuche ein Backend für die Produktsuche erstellen.

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

Behandelte Themen

  • Backend für die Produktsuche mit Ihrem Produktkatalog und der Vision API-Produktsuche erstellen
  • API-Schlüssel einrichten, um das Back-End der Produktsuche über eine mobile App aufzurufen
  • Back-End über eine mobile App aufrufen

Nächste Schritte

  • Video zur Verwendung der Vision API-Produktsuche zum Erstellen eines intelligenten Kleiderschranks
  • Im Lernpfad „On-Device-ML für die Produktsuche“ finden Sie alle Schritte, die zum Erstellen einer Produktsuche erforderlich sind.
  • Das Gelernte in Ihrer eigenen App anwenden

Weitere Informationen