Wykrywanie obiektów na obrazach w celu wizualnego wyszukiwania produktów za pomocą ML Kit: Android

1. Zanim zaczniesz

727608486a28395d.png

Czy widziałaś/widziałeś prezentację Obiektywu Google, w której można skierować aparat telefonu na jakiś obiekt, aby znaleźć, gdzie można go kupić online? Jeśli chcesz dowiedzieć się, jak dodać tę samą funkcję do swojej aplikacji, ten projekt jest dla Ciebie. Jest to część ścieżki edukacyjnej, która uczy, jak utworzyć w aplikacji mobilnej funkcję wyszukiwania zdjęć produktów.

Z tego ćwiczenia z programowania dowiesz się, jak wykonać pierwszy krok do tworzenia funkcji wyszukiwania zdjęć produktów: jak wykrywać obiekty na zdjęciach i umożliwiać użytkownikowi wybór obiektów, których ma dotyczyć wyszukiwanie. Aby stworzyć tę funkcję, użyjesz ML Kit do wykrywania i śledzenia obiektów.

Więcej informacji o pozostałych krokach, w tym o tym, jak utworzyć backend wyszukiwarki produktów za pomocą Wyszukiwarki produktów Vision API, znajdziesz w ścieżce edukacyjnej.

Co utworzysz

  • W tym ćwiczeniu z programowania utworzysz aplikację na Androida za pomocą ML Kit. Aplikacja będzie używać interfejsu ML Kit Object Detection and Tracking API do wykrywania obiektów na danym obrazie. Następnie użytkownik wybierze obiekt, którego chce wyszukać w naszej bazie danych produktów.
  • Ostatecznie powinno się wyświetlić coś podobnego do obrazu po prawej stronie.

Czego się nauczysz

  • Jak zintegrować pakiet ML Kit SDK z aplikacją na Androida
  • Interfejs API ML Kit do wykrywania i śledzenia obiektów

Czego potrzebujesz

  • najnowsza wersja Android Studio (4.1.2 lub nowsza);
  • emulator Android Studio lub fizyczne urządzenie z Androidem,
  • Przykładowy kod
  • podstawowa znajomość tworzenia aplikacji na Androida w Kotlinie;

Ten moduł dotyczy ML Kit. Inne koncepcje i bloki kodu nie zostały omówione. Można je po prostu skopiować i wkleić.

2. Konfiguracja

Pobieranie kodu

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

Rozpakuj pobrany plik ZIP. Spowoduje to rozpakowanie folderu głównego (odml-pathways-main) ze wszystkimi potrzebnymi zasobami. W tym ćwiczeniu będziesz potrzebować tylko źródeł w podkatalogu product-search/codelab1/android.

Podkatalog wykrywania obiektów w repozytorium mlkit-android zawiera 2 katalogi:

  • android_studio_folder.pngstarter – kod startowy, na którym możesz budować w ramach tego ćwiczenia z programowania.
  • android_studio_folder.pngfinal – gotowy kod gotowej przykładowej aplikacji.

3. Dodawanie do projektu interfejsu ML Kit Object Detection and Tracking API

Importowanie aplikacji do Android Studio

Zacznij od zaimportowania do Android Studio starter aplikacji.

Otwórz Android Studio, wybierz Importuj projekt (Gradle, Eclipse ADT itp.) i wybierz folder starter z poprzednio pobranego kodu źródłowego.

7c0f27882a2698ac.png

Dodawanie zależności dla wykrywania i śledzenia obiektów w ML Kit

Zależność ML Kit umożliwia zintegrowanie pakietu SDK ODT ML Kit z aplikacją.

Otwórz plik app/build.gradle projektu i sprawdź, czy dana zależność już się w nim znajduje:

build.gradle

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

Synchronizacja projektu z plikami Gradle

Aby mieć pewność, że wszystkie zależności są dostępne dla aplikacji, na tym etapie zsynchronizuj projekt z plikami Gradle.

Na pasku narzędzi Android Studio wybierz Synchronizuj projekt z plikami Gradle ( b451ab2d04d835f9.png).

(Jeśli ten przycisk jest wyłączony, zaimportuj tylko starter/app/build.gradle, a nie całe repozytorium).

4. Uruchamianie aplikacji wyjściowej

Po zaimportowaniu projektu do Android Studio i dodaniu zależności dla wykrywania i śledzenia obiektów w ML Kit możesz uruchomić aplikację po raz pierwszy.

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

Uruchamianie i poznawanie aplikacji

Aplikacja powinna się uruchomić na urządzeniu z Androidem. Zawiera on pewien szablon kodu, który umożliwia zrobienie zdjęcia lub wybranie wstępnie ustawionego obrazu i przekazanie go do systemu wykrywania i śledzenia obiektów, który utworzysz w tym ćwiczeniu. Zanim zaczniesz pisać kod, sprawdź aplikację:

Na dole znajduje się przycisk ( c6d965d639c3646.png), który umożliwia

  • uruchom aplikację aparatu zintegrowaną z urządzeniem lub emulatorem.
  • zrobić zdjęcie w aplikacji aparatu,
  • otrzymasz zrobione zdjęcie w aplikacji startowej.
  • wyświetlać obraz.

Wypróbuj przycisk „Zrób zdjęcie”. Postępuj zgodnie z instrukcjami, aby zrobić zdjęcie, zaakceptować zdjęcie i obserwować, jak wyświetla się ono w aplikacji startowej.

Po drugie, możesz wybrać 1 z 3 wstępnie przygotowanych obrazów. Jeśli używasz emulatora Androida, możesz później użyć tych obrazów do przetestowania kodu wykrywania obiektów.

  1. Wybierz jeden z 3 gotowych obrazów.
  2. Sprawdź, czy obraz wyświetla się w większym widoku.

1290481786af21b9.png

5. Dodawanie wykrywania obiektów na urządzeniu

W tym kroku dodasz do aplikacji startowej funkcję wykrywania obiektów na zdjęciach. Jak widzisz w poprzednim kroku, aplikacja startowa zawiera kod szablonowy do robienia zdjęć za pomocą aplikacji aparatu na urządzeniu. W aplikacji znajdziesz też 3 wstępnie ustawione obrazy, na których możesz przetestować wykrywanie obiektów, jeśli korzystasz z ćwiczenia z programowania na emulatorze Androida.

Gdy wybierzesz obraz z domyślnych obrazów lub zrobisz zdjęcie za pomocą aplikacji aparatu, kod szablonu dekoduje ten obraz w instancję Bitmap, wyświetli go na ekranie i wywoła metodę runObjectDetection z tym obrazem.

W tym kroku dodasz kod do metody runObjectDetection, aby wykrywać obiekty.

Konfigurowanie i uruchamianie wykrywania obiektów na urządzeniu na obrazie

Konfiguracja ML Kit ODT wymaga wykonania 3 prostych kroków i użycia 3 interfejsów API

  • przygotuj obraz: InputImage
  • utworzyć obiekt detektora: ObjectDetection.getClient(options)
  • połącz 2 powyżej wymienione obiekty: process(image)

Dotyczy to funkcji **runObjectDetection(bitmap: Bitmap)**w pliku MainActivity.kt.

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

Obecnie funkcja jest pusta. Aby zintegrować ODT ML Kit, wykonaj te czynności. W trakcie procesu Android Studio poprosi Cię o dodanie niezbędnych importów.

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

Krok 1. Utwórz InputImage

ML Kit udostępnia prosty interfejs API do tworzenia InputImage z Bitmap. Następnie możesz przesłać InputImage do interfejsów ML Kit API.

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

Dodaj powyższy kod na początku pliku runObjectDetection(bitmap:Bitmap).

Krok 2. Utwórz instancję wzorca do wykrywania treści

ML Kit stosuje schemat projektowania kreatora. Konfigurację przekazujesz do kreatora, a potem uzyskujesz od niego detektor. Dostępne są 3 opcje konfiguracji (ta w pogrubieniu jest używana w ćwiczeniach z programowania):

  • tryb wzorca do wykrywania (pojedynczy obraz lub strumień);
  • tryb wykrywania (pojedyncze lub wielokrotne wykrywanie obiektów);
  • tryb klasyfikacji (włączony lub wyłączony);

To laboratorium kodu dotyczy wykrywania i klasyfikacji wielu obiektów na jednym obrazie. Zacznijmy:

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

Krok 3. Prześlij obrazy do wykrywacza

Wykrywanie i klasyfikowanie obiektów odbywa się asynchronicznie:

  • wysyłasz obraz do usługi wykrywania (za pomocą process()).
  • detektor działa bardzo dobrze
  • detektor zwraca wynik za pomocą wywołania zwrotnego.

Poniżej znajduje się kod, który to robi (skopiuj i dodaj go do istniejącego kodu w pliku fun runObjectDetection(bitmap:Bitmap)):).

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

Po zakończeniu procesu wykrywania detekcja powiadomi Cię o:

  1. Łączna liczba wykrytych obiektów
  2. Każdy wykryty obiekt jest opisany za pomocą
  • trackingId: liczba całkowita używana do śledzenia obiektu w ramach poszczególnych klatek (NIE jest używana w tym CodeLab)
  • boundingBox: ramka ograniczająca obiektu
  • labels: lista etykiet dla wykrytego obiektu (tylko gdy włączona jest klasyfikacja)
  • index (pobierz indeks tej etykiety)
  • text (uzyskaj tekst tej etykiety, w tym „Towary modowe”, „Produkty spożywcze”, „Towary domowe”, „Miejsca”, „Rośliny”)
  • confidence (liczba zmiennoprzecinkowa od 0,0 do 1,0, gdzie 1,0 oznacza 100%).

Zauważysz pewnie, że kod drukuje wykryte wyniki w Logcat za pomocą debugPrint(). Dodaj je do klasy MainActivity:

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

Możesz już akceptować obrazy do wykrywania.

Uruchom Codelab, klikając Uruchom ( execute.png) na pasku narzędzi Android Studio. Spróbuj wybrać gotowe zdjęcie lub zrobić zdjęcie, a potem zajrzyj do okna logcat( 16bd6ea224cf8cf1.png) w IDE. Powinien pojawić się ekran podobny do tego:

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

co oznacza, że detektor wykrył 3 obiekty:

  • kategorie Produkty modowe i Produkty do domu.
  • Druga kategoria nie jest zwracana, ponieważ jest to nieznany typ.
  • no trackingId (ponieważ jest to tryb wykrywania pojedynczego obrazu)
  • pozycja wewnątrz prostokąta boundingBox (np. (481, 2021) – (2426, 3376))
  • detektor jest dość pewny, że pierwszy to produkt modowy (90%) (jest to sukienka)

Technicznie to wszystko, czego potrzebujesz, aby uruchomić wykrywanie obiektów w ML Kit. Gratulacje!

Tak, jeśli chodzi o interfejs, to nadal jesteś na etapie, na którym zaczęliśmy, ale możesz wykorzystać wykryte wyniki w interfejsie, np. narysować prostokąt ograniczający, aby ulepszyć działanie. Następnym krokiem jest wizualizacja wykrytych wyników.

6. Przetwarzanie wyników wykrywania

W poprzednich krokach wydrukowaliśmy wykryty wynik w logcat: szybko i bezproblemowo.

W tej sekcji wykorzystasz wynik widoczny na obrazie:

  • narysuj ramkę ograniczającą na obrazie
  • narysuj nazwę kategorii i poziom pewności w ramce

Informacje o narzędziach do wizualizacji

W ramach tego ćwiczenia znajdziesz kod szablonowy, który pomoże Ci zwizualizować wynik wykrywania. Aby uprościć kod wizualizacji, użyj tych narzędzi:

  • class ImageClickableView To klasa wyświetlania obrazu, która udostępnia przydatne narzędzia do wizualizacji i interakcji z wynikiem wykrywania.
  • fun drawDetectionResults(results: List<DetectedObject>) Ta metoda rysuje białe kółka w środku każdego wykrytego obiektu.
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) To jest wywołanie zwrotne, które zwraca przycięty obraz zawierający tylko obiekt, który użytkownik kliknął. W późniejszym zadaniu w Codelab wyślesz ten przycięty obraz do backendu wyszukiwarki obrazów, aby uzyskać wizualnie podobny wynik. W tym ćwiczeniu nie będziesz jeszcze używać tej metody.

Pokaż wynik wykrywania ML Kit

Użyj narzędzi do wizualizacji, aby wyświetlić wynik wykrywania obiektów za pomocą ML Kit na wierzchu obrazu wejściowego.

Przejdź do miejsca, w którym wywołujesz funkcję debugPrint(), i dodaj pod nią ten fragment kodu:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Uruchom

Teraz na pasku narzędzi Android Studio kliknij Uruchom ( execute.png).

Po załadowaniu aplikacji naciśnij przycisk z ikoną aparatu, skieruj aparat na obiekt, zrób zdjęcie, zaakceptuj zdjęcie (w aplikacji Aparat) lub wybierz dowolne zdjęcie z biblioteki. Powinieneś zobaczyć wynik wykrywania. Naciśnij ponownie przycisk lub wybierz inny obraz, aby powtórzyć proces kilka razy, i spróbuj najnowszą wersję ML Kit ODT.

5027148750dc0748.png

7. Gratulacje!

Użyłeś/użyłaś ML Kit, aby dodać do aplikacji funkcję wykrywania obiektów:

  • 3 kroki z 3 interfejsami API
  • Tworzenie obrazu wejściowego
  • Tworzenie wzorca
  • Wysyłanie obrazu do wykrywacza

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

Omówione zagadnienia

  • Dodawanie wykrywania i śledzenia obiektów za pomocą ML Kit do aplikacji na Androida
  • Wykrywanie i śledzenie obiektów na urządzeniu w ML Kit do wykrywania obiektów na zdjęciach

Następne kroki

  • Wykonaj to ćwiczenie z programowania, aby dowiedzieć się, jak wysłać wykryty obiekt do backendu wyszukiwarki produktów i wyświetlić wyniki wyszukiwania.
  • Poznaj więcej możliwości ML Kit ODT dzięki większej liczbie obrazów i filmów na żywo, aby sprawdzić dokładność i skuteczność wykrywania oraz klasyfikacji
  • Aby dowiedzieć się, jak wytrenować model niestandardowy, zapoznaj się z ścieżką edukacyjną Wykorzystanie wykrywania obiektów w praktyce.
  • Zapoznaj się z rekomendacjami dotyczącymi Material Design w przypadku wykrywania obiektów na żywym obrazie i statycznym
  • Stosowanie pakietu ODT ML Kit w aplikacji na Androida

Więcej informacji