Tworzenie backendu do wyszukiwania obrazów produktów za pomocą Wyszukiwarki produktów Vision API

1. Zanim zaczniesz

25939f5a13eeb3c3.png

Wcześniej w ramach ścieżki szkoleniowej dotyczącej wyszukiwania obrazów produktów dowiedzieliśmy się, jak wywołać backend wyszukiwania produktów utworzony za pomocą Wyszukiwarki produktów Vision API w celu znalezienia podobnych wizualnie produktów z katalogu produktów.

Z tego ćwiczenia w Codelabs dowiesz się, jak utworzyć podobny backend, ale z katalogiem produktów.

Czego się nauczysz

  • Jak utworzyć backend wyszukiwania produktów za pomocą Wyszukiwarki produktów Vision API
  • Jak skonfigurować klucz interfejsu API, aby uzyskać dostęp do Vision API z aplikacji mobilnych

Czego potrzebujesz

  • Konto Google Cloud z włączonym rozliczeniem (może to być bezpłatne konto próbne).

2. Informacje o Wyszukiwarce produktów Vision API

Wyszukiwarka produktów Vision API to funkcja Google Cloud, która umożliwia sprzedawcom tworzenie produktów, z których każdy zawiera obrazy referencyjne opisujące go wizualnie z różnych punktów widzenia. Sprzedawcy mogą następnie dodawać te produkty do zestawów produktów. Obecnie Wyszukiwarka produktów Vision API obsługuje te kategorie produktów: artykuły gospodarstwa domowego, odzież, zabawki, produkty pakowane i ogólne.

Gdy użytkownicy wysyłają zapytania do zbioru produktów za pomocą własnych obrazów, Wyszukiwarka produktów Vision API stosuje uczenie maszynowe, aby porównać produkt na obrazie z zapytania użytkownika z obrazami w zbiorze produktów sprzedawcy, a następnie zwraca uporządkowaną listę podobnych wizualnie i semantycznie wyników.

3. Tworzenie backendu w Google Cloud

Wcześniej na ścieżce szkoleniowej dotyczącej wyszukiwania obrazów produktów używaliśmy demonstracyjnego backendu wyszukiwania produktów opartego na Wyszukiwarce produktów Vision API. Zbuduj to samo zaplecze na swoim koncie Google Cloud, korzystając z tego samouczka:

Po ukończeniu samouczka wykonaj kolejne czynności, aby skonfigurować klucz API do wywoływania backendu z aplikacji mobilnych.

4. Konfigurowanie klucza interfejsu API

W przewodniku Szybki start dotyczącym Wyszukiwarki produktów Vision API utworzyliśmy backend wyszukiwania produktów, który może przyjmować obraz zapytania i zwracać podobne wizualnie produkty. Aby wywoływać interfejs Product Search API z aplikacji mobilnej, musisz skonfigurować klucz interfejsu API, a następnie ograniczyć dostęp do niego tylko do swoich aplikacji mobilnych, aby uniknąć nieautoryzowanego użycia.

Utwórz klucz interfejsu API

  1. Otwórz konsolę Cloud > Interfejsy API i usługi > Dane logowania. Możesz też kliknąć ten adres URL i wybrać projekt, którego używasz w szybkim wprowadzeniu do wyszukiwania produktów.
  2. Kliknij Utwórz dane logowania > Klucz interfejsu API. Jeśli klucz interfejsu API został utworzony, zobaczysz to okno:

d0bc04782a41a698.png

Zanotuj ten klucz interfejsu API. Będzie on potrzebny w dalszej części tego laboratorium.

Ogranicz dostęp do klucza interfejsu API

Gdy zobaczysz powyższy komunikat, kliknij Ogranicz klucz.

Aby zastosować te ograniczenia, postępuj zgodnie z instrukcjami wyświetlanymi na ekranie:

  • Ograniczenia aplikacji > Aplikacje na Androida
  • Ograniczenia interfejsów API > Ogranicz klucz > Cloud Vision API

5. Pobieranie i uruchamianie aplikacji mobilnej

Możesz pobrać utworzoną wcześniej aplikację na Androida, która korzystała z demonstracyjnego zaplecza wyszukiwania produktów, i zmienić ją tak, aby używała nowego zaplecza, które właśnie zostało utworzone.

Pobieranie kodu

Aby pobrać cały kod do tego laboratorium, kliknij ten link:

Rozpakuj pobrany plik ZIP. Spowoduje to rozpakowanie folderu głównego (odml-pathway-codelabs) ze wszystkimi potrzebnymi zasobami. W tym ćwiczeniu potrzebne będą tylko źródła w podkatalogu product-search/codelab2/android/final.

Aplikacja korzysta z interfejsu ML Kit Object Detection and Tracking API oraz demonstracyjnego backendu wyszukiwania produktów zbudowanego za pomocą Wyszukiwarki produktów Vision API, aby umożliwić użytkownikom zrobienie zdjęcia i wyszukanie podobnych wizualnie produktów w demonstracyjnym katalogu produktów.

Importowanie aplikacji do Android Studio

Zacznij od zaimportowania aplikacji starter do Android Studio.

Otwórz Android Studio, kliknij Importuj projekt (Gradle, Eclipse ADT itp.) i wybierz folder product-search/codelab2/android/final z pobranego wcześniej kodu źródłowego.

7c0f27882a2698ac.png

Uruchom aplikację startową

Po zaimportowaniu projektu do Android Studio możesz po raz pierwszy uruchomić aplikację.

Podłącz urządzenie z Androidem do hosta za pomocą kabla USB lub uruchom emulator Androida Studio i kliknij Uruchom ( execute.png) na pasku narzędzi Androida Studio.

(Jeśli ten przycisk jest wyłączony, upewnij się, że importujesz tylko plik final/app/build.gradle, a nie całe repozytorium).

Aplikacja powinna się teraz uruchomić na urządzeniu z Androidem. Działa już, ale korzysta z demonstracyjnego backendu wyszukiwania produktów, który Google wdrożyło dla Ciebie.

Następnie zaktualizujesz aplikację, aby korzystała z backendu utworzonego wcześniej w tym ćwiczeniu.

6. Aktualizowanie punktów końcowych interfejsu API

Zmiana konfiguracji interfejsu API

Otwórz klasę ProductSearchAPIClient. Zobaczysz, że konfiguracje backendu wyszukiwania produktów są już zdefiniowane. Zakomentuj konfiguracje backendu demonstracyjnego:

// 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"

Następnie zastąp je swoją konfiguracją:

// 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 to punkt końcowy interfejsu Cloud Vision API.
  • VISION_API_KEY to klucz interfejsu API utworzony wcześniej w tym samouczku.
  • VISION_API_PROJECT_ID , VISION_API_LOCATION_ID , VISION_API_PRODUCT_SET_ID to wartości użyte w szybkim wprowadzeniu do wyszukiwania produktów w interfejsie Vision API na początku tego kursu.

Uruchom

Teraz na pasku narzędzi Android Studio kliknij Uruchom ( execute.png). Po wczytaniu aplikacji kliknij dowolny obraz z ustawień wstępnych, wybierz wykryty obiekt i kliknij przycisk Szukaj, aby wyświetlić wyniki wyszukiwania. Aplikacja korzysta teraz z utworzonego przez Ciebie zaplecza wyszukiwania produktów.

25939f5a13eeb3c3.png

7. Gratulacje!

Wiesz już, jak utworzyć backend wyszukiwania produktów za pomocą Wyszukiwarki produktów Vision API.

To wszystko, czego potrzebujesz, aby zacząć korzystać z usługi.

Omówione zagadnienia

  • Jak utworzyć backend wyszukiwania produktów za pomocą katalogu produktów i Wyszukiwarki produktów Vision API
  • Jak skonfigurować klucz interfejsu API, aby wywoływać backend wyszukiwania produktów z aplikacji mobilnej
  • Jak wywołać backend z aplikacji mobilnej

Następne kroki

  • Obejrzyj ten film o korzystaniu z Wyszukiwarki produktów Vision API do tworzenia inteligentnej szafy.
  • Zapoznaj się ze ścieżką szkoleniową dotyczącą uczenia maszynowego na urządzeniu w przypadku wyszukiwania produktów, aby poznać wszystkie kroki wymagane do utworzenia wyszukiwarki produktów.
  • Wykorzystywanie zdobytej wiedzy w własnej aplikacji

Więcej informacji