1. Zanim zaczniesz
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
|
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:
- starter – kod początkowy, który utworzysz w ramach tego ćwiczenia z programowania.
- final – 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.
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) () 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 ( ) 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 ( ), 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.
- Wybierz obraz z 3 gotowych zdjęć.
- Zobacz, że obraz wyświetla się w większym widoku.
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
- Łączna liczba wykrytych obiektów
- 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 ( ) na pasku narzędzi Android Studio. Wybierz gotowy obraz lub zrób zdjęcie, a następnie spójrz na okno logcat( ) 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 ( ) 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.
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