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

1. Zanim zaczniesz

Czy widziałeś(-aś) prezentację Obiektywu Google, w której można skierować aparat telefonu na obiekt i sprawdzić, gdzie można go kupić online? Jeśli chcesz się dowiedzieć, jak dodać tę samą funkcję do swojej aplikacji, to ćwiczenie jest dla Ciebie. Jest to część ścieżki szkoleniowej, która uczy, jak zaimplementować w aplikacji mobilnej funkcję wyszukiwania zdjęć produktów.

W tym ćwiczeniu poznasz pierwszy krok w tworzeniu funkcji wyszukiwania zdjęć produktów: jak wykrywać obiekty na obrazach i umożliwiać użytkownikowi wybieranie obiektów, których chce wyszukać. Do utworzenia tej funkcji użyjesz ML Kit do wykrywania i śledzenia obiektów.

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

Co utworzysz

W tym ćwiczeniu utworzysz aplikację na Androida z ML Kit. Twoja aplikacja będzie używać interfejsu ML Kit do wykrywania i śledzenia obiektów, aby wykrywać obiekty na danym obrazie. Następnie użytkownik wybierze obiekt, którego chce wyszukać w naszej bazie danych produktów.
Na koniec zobaczysz coś podobnego do obrazu po prawej stronie.

Czego się nauczysz

Jak zintegrować pakiet SDK ML Kit z aplikacją na Androida
Interfejs 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 wiedza na temat tworzenia aplikacji na Androida w Kotlinie

To ćwiczenie koncentruje się na ML Kit. Inne koncepcje i bloki kodu nie są omawiane i służą tylko do kopiowania i wklejania.

2. Konfiguracja

Pobieranie kodu

Kliknij ten link, aby pobrać cały kod do tego ćwiczenia:

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

Podkatalog object-detection w repozytorium mlkit-android zawiera 2 katalogi:

starter – kod początkowy, na którym będziesz pracować w tym ćwiczeniu.
final— ukończony kod gotowej przykładowej aplikacji.

3. Dodawanie interfejsu ML Kit do wykrywania i śledzenia obiektów do projektu

Importowanie aplikacji do Android Studio

Zacznij od zaimportowania aplikacji starter do Android Studio.

Otwórz Android Studio, kliknij Import Project (Gradle, Eclipse ADT, etc.) i wybierz folder starter z pobranego wcześniej kodu źródłowego.

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

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

Otwórz plik app/build.gradle w projekcie i sprawdź, czy zależność jest już tam:

build.gradle

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

Synchronizowanie projektu z plikami Gradle

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

Na pasku narzędzi Android Studio kliknij Sync Project with Gradle Files ( ).

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

4. Uruchamianie aplikacji startowej

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

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

Uruchamianie i testowanie aplikacji

Aplikacja powinna się uruchomić na urządzeniu z Androidem. Zawiera ona powtarzalny 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 tym ćwiczeniu. Zanim zaczniesz pisać kod, zapoznaj się z aplikacją:

U dołu znajduje się przycisk ( ), który umożliwia:

uruchomienie aplikacji Aparat zintegrowanej z urządzeniem lub emulatorem,
zrobienie zdjęcia w aplikacji Aparat ,
otrzymanie zrobionego zdjęcia w aplikacji startowej
wyświetlenie obrazu.

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

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

Wybierz obraz spośród 3 gotowych obrazów.
Sprawdź, czy obraz wyświetla się w większym widoku.

5. Dodawanie wykrywania obiektów na urządzeniu

W tym kroku dodasz do aplikacji startowej funkcję wykrywania obiektów na obrazach. Jak widzisz w poprzednim kroku, aplikacja startowa zawiera powtarzalny kod, który umożliwia robienie zdjęć za pomocą aplikacji Aparat na urządzeniu. W aplikacji są też 3 gotowe obrazy, na których możesz przetestować wykrywanie obiektów, jeśli korzystasz z emulatora Androida.

Gdy wybierzesz obraz (spośród gotowych obrazów lub zrobisz zdjęcie za pomocą aplikacji Aparat), powtarzalny kod dekoduje ten obraz do instancji Bitmap, wyświetla go na ekranie i wywołuje metodę runObjectDetection z obrazem.

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

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

Aby skonfigurować ML Kit ODT, wystarczy wykonać 3 proste kroki z użyciem 3 interfejsów API:

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

Wykonasz te czynności w funkcji **runObjectDetection(bitmap: Bitmap)**w pliku MainActivity.kt.

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

Obecnie funkcja jest pusta. Aby zintegrować ML Kit ODT, wykonaj kolejne kroki. W trakcie pracy Android Studio będzie Cię prosić 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 przekazać InputImage do interfejsów ML Kit.

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

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

Krok 2. Utwórz instancję detektora

ML Kit korzysta z wzorca projektowego Builder. Przekazujesz konfigurację do narzędzia do tworzenia, a następnie pobierasz z niego detektor. Możesz skonfigurować 3 opcje (w tym ćwiczeniu używamy opcji pogrubionej):

tryb detektora (pojedynczy obraz lub strumień)
tryb wykrywania (pojedynczy lub wiele obiektów)
tryb klasyfikacji (włączony lub wyłączony)

To ćwiczenie dotyczy wykrywania i klasyfikowania wielu obiektów na jednym obrazie. Wykonaj te czynności:

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

Krok 3. Przekaż obrazy do detektora

Wykrywanie i klasyfikowanie obiektów to przetwarzanie asynchroniczne:

wysyłasz obraz do detektora (za pomocą process()),
detektor intensywnie go przetwarza,
detektor zwraca wynik za pomocą wywołania zwrotnego.

Poniższy kod robi dokładnie to (skopiuj go i dodaj do istniejącego kodu w 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 powiadamia Cię o:

łącznej liczbie wykrytych obiektów,
każdy wykryty obiekt jest opisany za pomocą:

trackingId: liczba całkowita, której używasz do śledzenia obiektu w różnych klatkach (NIE jest używana w tym ćwiczeniu),
boundingBox: ramka ograniczająca obiekt,
labels: lista etykiet wykrytego obiektu (tylko wtedy, gdy włączona jest klasyfikacja),
index (pobierz indeks tej etykiety),
text (pobierz tekst tej etykiety, w tym „Fashion Goods”, „Food”, „Home Goods”, „Place”, „Plant”),
confidence (liczba zmiennoprzecinkowa od 0,0 do 1,0, gdzie 1,0 oznacza 100%).

Prawdopodobnie zauważysz, że kod wyświetla wykryte wyniki w Logcat za pomocą debugPrint(). Dodaj go do zajęć 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}")
       }
   }
}

Teraz możesz akceptować obrazy do wykrywania.

Aby uruchomić ćwiczenie, na pasku narzędzi Android Studio kliknij Uruchom ( ). Spróbuj wybrać gotowy obraz lub zrobić zdjęcie, a następnie spójrz na okno logcat( ) w IDE. Powinno się wyświetlić coś podobnego 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

Oznacza to, że detektor wykrył 3 obiekty:

kategorie to Fashion good i Home good.
w przypadku drugiego obiektu nie ma kategorii, ponieważ jest to nieznana klasa.
brak trackingId (ponieważ jest to tryb wykrywania pojedynczego obrazu),
pozycja w prostokącie boundingBox (np. (481, 2021) – (2426, 3376)),
detektor jest dość pewny, że pierwszy obiekt to Fashion good (90%) (jest to sukienka).

Technicznie to wszystko, czego potrzebujesz, aby ML Kit do wykrywania obiektów działał – masz już wszystko! Gratulacje!

Tak, po stronie interfejsu użytkownika nadal jesteś na etapie, na którym zaczęłaś(-eś), ale możesz wykorzystać wykryte wyniki w interfejsie, np. rysując ramkę ograniczającą, aby zwiększyć wygodę użytkownika. Następnym krokiem jest wizualizacja wykrytych wyników.

6. Przetwarzanie końcowe wyników wykrywania

W poprzednich krokach wyświetlałeś(-aś) wykryte wyniki w logcat: prosto i szybko.

W tej sekcji wykorzystasz wynik na obrazie:

narysuj ramkę ograniczającą na obrazie,
narysuj nazwę kategorii i pewność w ramce ograniczającej.

Poznaj narzędzia do wizualizacji

W ćwiczeniu znajduje się powtarzalny kod, który pomaga wizualizować wynik wykrywania. Wykorzystaj te narzędzia, aby uprościć kod wizualizacji:

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

Wyświetlanie wyniku wykrywania ML Kit

Użyj narzędzi do wizualizacji, aby wyświetlić wynik wykrywania obiektów ML Kit na obrazie wejściowym.

Przejdź do miejsca, w którym wywołujesz debugPrint(), i dodaj poniższy fragment kodu:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Stosowanie

Na pasku narzędzi Android Studio kliknij Uruchom ( ).

Gdy aplikacja się wczyta, naciśnij przycisk z ikoną aparatu, skieruj aparat na obiekt, zrób zdjęcie, zaakceptuj je (w aplikacji Aparat) lub po prostu kliknij dowolny gotowy obraz. Powinien się wyświetlić wynik wykrywania. Naciśnij ponownie przycisk lub wybierz inny obraz, aby powtórzyć kilka razy i przetestować najnowszy ML Kit ODT.

7. Gratulacje!

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

3 kroki z użyciem 3 interfejsów API
Utwórz obraz wejściowy.
Utwórz detektor.
Wyślij obraz do detektora.

To wszystko, czego potrzebujesz, aby uruchomić aplikację.

Omówione zagadnienia

Jak dodać do aplikacji na Androida ML Kit do wykrywania i śledzenia obiektów
Jak używać ML Kit do wykrywania i śledzenia obiektów na urządzeniu, aby wykrywać obiekty na obrazach

Następne kroki

Wypróbuj to ćwiczenie, aby dowiedzieć się, jak wysłać wykryty obiekt do backendu wyszukiwania produktów i wyświetlić wyniki wyszukiwania.
Odkryj więcej funkcji ML Kit ODT, korzystając z większej liczby obrazów i transmisji na żywo, aby sprawdzić dokładność i wydajność wykrywania i klasyfikacji.
Zapoznaj się ze ścieżką szkoleniową dotyczącą wykrywania obiektów Go further with object detection, aby dowiedzieć się, jak wytrenować własny model.
Przeczytaj rekomendacje Material Design dotyczące wykrywania obiektów na obrazach statycznych i z kamery na żywo.
Zastosuj ML Kit ODT w swojej aplikacji na Androida.

Więcej informacji

https://developers.google.com/ml-kit/vision/object-detection