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

1. Zanim zaczniesz

727608486a28395d.png

Czy widziałeś(-aś) pokaz Obiektywu Google, w którym można skierować aparat w telefonie na obiekt i sprawdzić, gdzie można go kupić online? Jeśli chcesz się dowiedzieć, jak dodać tę samą funkcję do swojej aplikacji, to ćwiczenia z programowania są dla Ciebie. Jest to część ścieżki szkoleniowej, dzięki której dowiesz się, jak umieścić w aplikacji mobilnej funkcję wyszukiwania zdjęć produktów.

Dzięki tym ćwiczeniom w Codelabs dowiesz się, jak utworzyć funkcję wyszukiwania obrazów produktów: jak wykrywać obiekty na obrazach i pozwolić użytkownikom wybierać obiekty do wyszukania. Do stworzenia tej funkcji będziesz używać wykrywania i śledzenia obiektów ML Kit.

Informacje o pozostałych krokach, w tym o tworzeniu backendu wyszukiwania produktów za pomocą Wyszukiwarki produktów Vision API, znajdziesz na ścieżce szkoleniowej.

Co utworzysz

  • W ramach tego ćwiczenia w Codelabs dowiesz się, jak utworzyć aplikację na Androida przy użyciu ML Kit. Twoja aplikacja będzie używać interfejsu ML Kit Object Detection i Tracking API do wykrywania obiektów na danym obrazie. Następnie użytkownik wybiera obiekt, który chce wyszukać w naszej bazie danych produktów.
  • W ostatecznym rozrachunku powinieneś zobaczyć obraz podobny do tego, który znajduje się po prawej stronie.

Czego się nauczysz

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

Czego potrzebujesz

  • najnowszą wersję Android Studio (4.1.2 lub nowszą),
  • Emulator Android Studio lub fizyczne urządzenie z Androidem
  • Przykładowy kod
  • Podstawowa wiedza o programowaniu na Androida w Kotlin

To ćwiczenia w programowaniu koncentrują się na ML Kit. Inne koncepcje i bloki kodu nie zostały omówione. Można je po prostu skopiować i wkleić.

2. Konfiguracja

Pobieranie kodu

Kliknij poniższy link, aby pobrać cały kod do tego ćwiczenia w Codelabs:

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

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

  • android_studio_folder.pngstarter – kod początkowy, który utworzysz w ramach tego ćwiczenia z programowania.
  • android_studio_folder.pngfinal – kompletny kod gotowej przykładowej aplikacji.

3. Dodaj do projektu interfejs ML Kit Object Detection i Tracking API

Importowanie aplikacji do Android Studio

Zacznij od zaimportowania aplikacji starter do Android Studio.

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

7c0f27882a2698ac.png

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

Zależności ML Kit umożliwiają zintegrowanie pakietu ML Kit ODT SDK z aplikacją.

Otwórz plik app/build.gradle projektu i sprawdź, czy zależność już istnieje:

build.gradle

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

Synchronizowanie projektu z plikami Gradle

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

Wybierz Sync Project with Gradle Files (Synchronizuj projekt z plikami Gradle) (b451ab2d04d835f9.png) na pasku narzędzi Android Studio.

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

4. Uruchom aplikację startową

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

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

Uruchamianie i poznawanie aplikacji

Aplikacja powinna uruchomić się na urządzeniu z Androidem. Zawiera stały kod, który umożliwia zrobienie zdjęcia lub wybranie gotowego obrazu i przekazanie go do potoku wykrywania i śledzenia obiektów, który utworzysz w ramach tego ćwiczenia. Poznaj aplikację, zanim zaczniesz pisać kod:

Po pierwsze, na dole znajduje się przycisk ( c6d965d639c3646.png), który

  • uruchom aplikację aparatu zintegrowaną z urządzeniem/emulatorem
  • zrób zdjęcie w aplikacji aparatu
  • otrzymuj zrzut ekranu w aplikacji startowej
  • wyświetl obraz

Wypróbuj funkcję „Zrób zdjęcie” Przycisk Postępuj zgodnie z instrukcjami, aby zrobić zdjęcie, zaakceptuj je i zobacz, jak wyświetla się w aplikacji startowej.

Masz do wyboru 3 gotowe obrazy. Możesz ich później użyć do przetestowania kodu wykrywania obiektów, jeśli korzystasz z emulatora Androida.

  1. Wybierz obraz z 3 gotowych zdjęć.
  2. Zobacz, że obraz wyświetla się w większym widoku.

1290481786af21b9.png

5. Dodaj wykrywanie obiektów na urządzeniu

W tym kroku dodasz do aplikacji startowej funkcję wykrywania obiektów na obrazach. Jak widać w poprzednim kroku, aplikacja startowa zawiera stały kod służący do robienia zdjęć aparatem na urządzeniu. W aplikacji są też 3 gotowe obrazy, w których możesz wypróbować wykrywanie obiektów, jeśli wykonujesz ćwiczenia z programowania w emulatorze Androida.

Gdy wybierzesz obraz z gotowych obrazów lub zrobisz zdjęcie za pomocą aplikacji aparatu, stały kod dekoduje ten obraz do instancji Bitmap, pokazuje go na ekranie i wywołuje metodę runObjectDetection z obrazem.

W tym kroku dodasz do metody runObjectDetection kod służący do wykrywania obiektów.

Konfigurowanie i uruchamianie wykrywania obiektów na urządzeniu na zdjęciu

Aby skonfigurować ML Kit ODT, musisz wykonać tylko 3 proste kroki i 3 interfejsy API

  • przygotuj obraz: InputImage
  • utwórz obiekt wzorca: ObjectDetection.getClient(options)
  • połącz 2 obiekty powyżej: process(image)

Osiągasz je w funkcji **runObjectDetection(bitmap: Bitmap)**w pliku MainActivity.kt.

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

W tej chwili funkcja jest pusta. Przejdź do poniższych kroków, aby zintegrować ML Kit ODT. W czasie Android Studio wyświetli prośbę 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 obraz wejściowy

ML Kit zapewnia 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 górze runObjectDetection(bitmap:Bitmap).

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

ML Kit jest zgodny ze wzorcem projektu konstruktora, należy przekazać konfigurację do konstruktora, a następnie pozyskać z niego detektor. Dostępne są 3 opcje konfiguracji (wyróżniona pogrubieniem jest używana w ćwiczeniach z programowania):

  • tryb wzorca do wykrywania (pojedynczy obraz lub strumień)
  • tryb wykrywania (wykrywanie pojedynczego lub wielu obiektów)
  • tryb klasyfikacji (wł. lub wyłączony)

To ćwiczenie w Codelabs dotyczy pojedynczych zdjęć, wykrywania wielu obiektów klasyfikację, zróbmy to:

// 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 zdjęcia do wzorca

Wykrywanie i klasyfikacja obiektów jest przetwarzane asynchroniczne:

  • wysyłasz obraz do detektora (przy użyciu aplikacji process())
  • detektor działa dość intensywnie
  • detektor zgłasza wynik przez wywołanie zwrotne.

Służy do tego poniższy kod (skopiuj i dołącz go do istniejącego kodu wewnątrz tagu 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 detektor powiadomi Cię o

  1. Łączna liczba wykrytych obiektów
  2. Każdy wykryty obiekt jest opisany za pomocą:
  • trackingId: liczba całkowita służąca do śledzenia jej w wielu ramkach (NIE jest używana w tym ćwiczeniu w Codelabs).
  • boundingBox: ramka ograniczająca obiektu
  • Lista labels: etykiet wykrytego obiektu (tylko wtedy, gdy włączona jest klasyfikacja)
  • index (Pobierz indeks tej etykiety)
  • text (pobierz tekst tej etykiety, np. „Odzież”, „Żywność”, „Wyposażenie domu”, „Miejsce”, „Roślina”)
  • confidence (liczba zmiennoprzecinkowa między 0,0 a 1,0 z wartością 1,0 oznacza 100%)

Jak już pewnie wiesz, kod wydrukuje wykryte wyniki w aplikacji Logcat z debugPrint(). Dodaj je do MainActivity zajęć:

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

Teraz możesz akceptować obrazy do wykrywania.

Uruchom ćwiczenia w Codelabs, klikając Uruchom ( Wykonaj.png) na pasku narzędzi Android Studio. Wybierz gotowy obraz lub zrób zdjęcie, a następnie spójrz na okno logcat( 16bd6ea224cf8cf1.png) w IDE. Zobaczysz tekst 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:

  • to Odzież i Produkty domowe.
  • dla 2 dnia nie została zwrócona kategoria, ponieważ jest to klasa nieznana.
  • brak trackingId (ponieważ jest to tryb wykrywania pojedynczego obrazu)
  • pozycja wewnątrz prostokąta boundingBox (np. (481, 2021) – (2426, 3376))
  • wzorzec ma wystarczającą pewność, że pierwszy to towary mody (90%) (to sukienka).

Technicznie to wszystko, czego potrzebujesz, aby wykrywanie obiektów ML Kit działało. Nie masz nic przeciwko temu. Gratulacje!

Jeśli chodzi o interfejs, to w momencie rozpoczęcia pracy wciąż jesteś na tym etapie, ale możesz wykorzystać wykryte wyniki w interfejsie, na przykład narysować ramkę ograniczającą, aby poprawić wrażenia użytkownika. Następnym krokiem jest wizualizacja wykrytych wyników.

6. Przetwarzanie wyników wykrywania

W poprzednich krokach wykryty wynik został wydrukowany do pliku logcat. To proste i szybkie rozwiązanie.

W tej sekcji wykorzystasz wynik widoczny na obrazie:

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

Korzystanie z narzędzi do wizualizacji

W ćwiczeniach z programowania znajdziesz stały kod, który pomoże Ci zwizualizować wynik wykrywania. Opisane poniżej narzędzia pozwalają uprościć kod wizualizacji:

  • class ImageClickableView Jest to klasa widoku obrazu, która udostępnia wygodne narzędzia do wizualizacji i interakcji z wynikami wykrywania.
  • fun drawDetectionResults(results: List<DetectedObject>) Ta metoda rysuje białe okręgi na środku każdego wykrytego obiektu.
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Jest to wywołanie zwrotne umożliwiające otrzymanie przyciętego obrazu zawierającego tylko obiekt, który użytkownik kliknął. W ramach późniejszego ćwiczenia w Codelabs wyślesz ten przycięty obraz do backendu wyszukiwania obrazów, aby uzyskać podobny wizualnie wynik. W ramach tego ćwiczenia w Codelabs nie będziesz jeszcze używać tej metody.

Pokaż wynik wykrywania ML Kit

Za pomocą narzędzi do wizualizacji możesz wyświetlać wynik wykrywania obiektów ML Kit na obrazie wejściowym.

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

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Uruchamianie

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

Po załadowaniu aplikacji naciśnij przycisk z ikoną aparatu, skieruj aparat na obiekt, zrób zdjęcie lub zaakceptuj je (w aplikacji Aparat) albo z łatwością kliknij dowolne z gotowych zdjęć. Powinien pojawić się wynik wykrycia. naciśnij przycisk jeszcze raz lub wybierz inny obraz, aby powtórzyć te czynności i zobaczyć najnowszą wersję ML Kit ODT.

5027148750dc0748.png

7. Gratulacje!

Udało Ci się dodać do swojej aplikacji funkcje wykrywania obiektów za pomocą ML Kit:

  • 3 kroki z 3 interfejsami API
  • Utwórz obraz wejściowy
  • Utwórz detektor
  • Wyślij obraz do detektora

To wszystko, czego potrzebujesz, aby zacząć korzystać z tej funkcji.

Omówione zagadnienia

  • Jak dodać wykrywanie i śledzenie obiektów ML Kit do aplikacji na Androida
  • Jak używać wykrywania i śledzenia obiektów na urządzeniu w ML Kit do wykrywania obiektów na obrazach

Następne kroki

  • Z tego ćwiczenia w Codelabs dowiesz się, jak wysyłać wykryte obiekty do backendu wyszukiwania produktów i wyświetlać wyniki wyszukiwania
  • Dowiedz się więcej dzięki ML Kit ODT z większą liczbą obrazów i transmisji wideo na żywo, aby wykryć dokładność i skuteczność klasyfikacji
  • Zapoznaj się ze ścieżką szkoleniową Więcej informacji o wykrywaniu obiektów, aby dowiedzieć się, jak wytrenować model niestandardowy
  • Dowiedz się więcej o zaleceniach Material Design w zakresie wykrywania obiektów z użyciem kamery na żywo i obrazu statycznego.
  • Stosowanie ML Kit ODT w własnej aplikacji na Androida

Więcej informacji