1. Sebelum memulai
Pernahkah Anda melihat demo Google Lens, di mana Anda dapat mengarahkan kamera ponsel ke suatu objek dan menemukan di mana Anda dapat membelinya secara online? Jika Anda ingin mempelajari cara menambahkan fitur yang sama ke aplikasi, codelab ini cocok untuk Anda. Ini adalah bagian dari jalur pembelajaran yang mengajarkan Anda cara membuat fitur penelusuran gambar produk ke dalam aplikasi seluler.
Dalam codelab ini, Anda akan mempelajari langkah pertama untuk membangun fitur penelusuran gambar produk: cara mendeteksi objek dalam gambar dan membiarkan pengguna memilih objek yang ingin mereka telusuri. Anda akan menggunakan Deteksi dan Pelacakan Objek ML Kit untuk membangun fitur ini.
Anda dapat mempelajari langkah-langkah yang tersisa, termasuk cara membangun backend penelusuran produk dengan Vision API Product Search, di jalur pembelajaran.
Yang akan Anda bangun
|
Yang akan Anda pelajari
- Cara mengintegrasikan ML Kit SDK ke dalam aplikasi Android Anda
- API Deteksi dan Pelacakan Objek ML Kit
Yang Anda butuhkan
- Versi terbaru Android Studio (v4.1.2+)
- Emulator Android Studio atau perangkat Android fisik
- Kode contoh
- Pengetahuan dasar tentang pengembangan Android di Kotlin
Codelab ini berfokus pada ML Kit. Konsep dan blok kode lainnya tidak dipelajari dan disediakan sehingga Anda cukup menyalin dan menempelkannya.
2. Memulai persiapan
Download Kode
Klik link berikut untuk mendownload semua kode untuk codelab ini:
Ekstrak file ZIP yang didownload. Tindakan ini akan mengekstrak folder root (odml-pathways-main
) dengan semua resource yang Anda perlukan. Untuk codelab ini, Anda hanya memerlukan sumber di subdirektori product-search/codelab1/android
.
Subdirektori deteksi objek di repositori mlkit-android berisi dua direktori:
- starter—Memulai kode yang Anda bangun untuk codelab ini.
- final—Kode lengkap untuk aplikasi contoh yang telah selesai.
3. Menambahkan Deteksi Objek dan Tracking API ML Kit ke project
Mengimpor aplikasi ke Android Studio
Mulai dengan mengimpor aplikasi starter ke Android Studio.
Buka Android Studio, pilih Import Project (Gradle, Eclipse ADT, dsb.) dan pilih folder starter dari kode sumber yang telah Anda download sebelumnya.
Menambahkan dependensi untuk Deteksi dan Pelacakan Objek ML Kit
Dependensi ML Kit memungkinkan Anda mengintegrasikan ML Kit ODT SDK di aplikasi Anda.
Buka file app/build.gradle
project Anda dan pastikan dependensi tersebut sudah ada:
build.gradle
dependencies {
// ...
implementation 'com.google.mlkit:object-detection:16.2.4'
}
Menyinkronkan project dengan file gradle
Guna memastikan bahwa semua dependensi tersedia untuk aplikasi, Anda harus menyinkronkan project dengan file gradle pada tahap ini.
Pilih Sync Project with Gradle Files ( ) dari toolbar Android Studio.
(Jika tombol ini dinonaktifkan, pastikan Anda hanya mengimpor starter/app/build.gradle, bukan seluruh repositori.)
4. Menjalankan aplikasi awal
Setelah mengimpor project ke Android Studio dan menambahkan dependensi untuk Deteksi dan Pelacakan Objek ML Kit, Anda siap menjalankan aplikasi untuk pertama kalinya.
Hubungkan perangkat Android Anda melalui USB ke host atau Start the Android Studio emulator, lalu klik Run ( ) di toolbar Android Studio.
Menjalankan dan menjelajahi aplikasi
Aplikasi akan diluncurkan di perangkat Android Anda. Library ini memiliki beberapa kode boilerplate yang memungkinkan Anda mengambil foto, atau memilih gambar preset, dan memasukkannya ke pipeline deteksi dan pelacakan objek yang akan Anda bangun di codelab ini. Jelajahi aplikasi sedikit sebelum menulis kode:
Pertama, ada Tombol ( ) di bagian bawah untuk
- luncurkan aplikasi kamera yang terintegrasi di perangkat/emulator Anda
- mengambil foto di dalam aplikasi kamera
- menerima gambar yang diambil di aplikasi awal
- tampilkan gambar
Coba "Ambil foto" tombol. Ikuti petunjuk untuk mengambil foto, menerima foto, dan amati foto tersebut ditampilkan di dalam aplikasi awal.
Kedua, ada 3 gambar preset yang dapat Anda pilih. Anda dapat menggunakan image ini nanti untuk menguji kode deteksi objek jika Anda menjalankannya di Android emulator.
- Pilih gambar dari 3 gambar preset.
- Lihat agar gambar ditampilkan dalam tampilan yang lebih besar.
5. Menambahkan deteksi objek di perangkat
Pada langkah ini, Anda akan menambahkan fungsi ke aplikasi awal untuk mendeteksi objek dalam gambar. Seperti yang Anda lihat di langkah sebelumnya, aplikasi awal berisi kode boilerplate untuk mengambil foto dengan aplikasi kamera di perangkat. Ada juga 3 gambar preset di aplikasi tempat Anda dapat mencoba deteksi objek, jika menjalankan codelab di emulator Android.
Saat Anda memilih gambar, baik dari gambar preset atau dengan mengambil foto menggunakan aplikasi kamera, kode boilerplate akan mendekode gambar tersebut ke dalam instance Bitmap
, menampilkannya di layar, dan memanggil metode runObjectDetection
bersama gambar.
Pada langkah ini, Anda akan menambahkan kode ke metode runObjectDetection
untuk melakukan deteksi objek.
Menyiapkan dan menjalankan deteksi objek di perangkat pada gambar
Hanya ada 3 langkah sederhana dengan 3 API untuk menyiapkan ML Kit ODT
- siapkan gambar:
InputImage
- buat objek detektor:
ObjectDetection.getClient(options)
- hubungkan 2 objek di atas:
process(image)
Anda dapat mencapainya dalam fungsi **runObjectDetection(bitmap: Bitmap)
**dalam file MainActivity.kt
.
/**
* ML Kit Object Detection Function
*/
private fun runObjectDetection(bitmap: Bitmap) {
}
Saat ini fungsi tersebut kosong. Lanjutkan ke langkah berikut untuk mengintegrasikan ML Kit ODT. Selama proses, Android Studio akan meminta Anda untuk menambahkan impor yang diperlukan
com.google.mlkit.vision.common.InputImage
com.google.mlkit.vision.objects.ObjectDetection
com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions
Langkah 1: Membuat InputImage
ML Kit menyediakan API sederhana untuk membuat InputImage
dari Bitmap
. Lalu, Anda dapat memasukkan InputImage
ke dalam API ML Kit.
// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)
Tambahkan kode di atas ke bagian atas runObjectDetection(bitmap:Bitmap)
.
Langkah 2: Membuat instance detektor
ML Kit mengikuti Pola Desain Builder, Anda akan meneruskan konfigurasi ke builder, lalu mendapatkan detektor darinya. Ada 3 opsi untuk mengonfigurasi (opsi yang dicetak tebal digunakan dalam codelab):
- mode detektor (gambar tunggal atau streaming)
- mode deteksi (satu atau beberapa deteksi objek)
- mode klasifikasi (aktif atau nonaktif)
Codelab ini ditujukan untuk gambar tunggal - deteksi beberapa objek & klasifikasi, mari kita lakukan:
// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
.setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
.enableMultipleObjects()
.enableClassification()
.build()
val objectDetector = ObjectDetection.getClient(options)
Langkah 3: Feed gambar ke detektor
Deteksi dan klasifikasi objek adalah pemrosesan asinkron:
- Anda mengirim gambar ke pendeteksi (melalui
process()
) - detektor bekerja cukup keras
- pendeteksi melaporkan hasilnya kembali kepada Anda melalui callback
Kode berikut melakukan hal tersebut (menyalin dan menambahkannya ke kode yang ada di dalam 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())
}
Setelah selesai, detektor akan memberi tahu Anda dengan
- Jumlah total objek yang terdeteksi
- Setiap objek yang terdeteksi dijelaskan dengan
trackingId
: bilangan bulat yang Anda gunakan untuk melacaknya lintas frame (TIDAK digunakan dalam codelab ini)boundingBox
: kotak pembatas objek- Daftar label
labels:
untuk objek yang terdeteksi (hanya jika klasifikasi diaktifkan) index
(Dapatkan indeks label ini)text
(Dapatkan teks label ini termasuk "Perlengkapan Mode", "Makanan", "Perlengkapan Rumah", "Tempat", "Tumbuhan")confidence
(float antara 0,0 hingga 1,0 dengan 1,0 berarti 100%)
Anda mungkin telah melihat bahwa kode mencetak hasil yang terdeteksi ke Logcat dengan debugPrint()
. Tambahkan ke class 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}")
}
}
}
Sekarang Anda siap menerima gambar untuk dideteksi.
Jalankan codelab dengan mengklik Run ( ) di toolbar Android Studio. Coba pilih gambar preset atau ambil foto, lalu lihat jendela logcat( ) di dalam IDE. Anda akan melihat sesuatu yang mirip dengan ini:
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
yang berarti bahwa detektor melihat 3 objek:
- kategori adalah Fashion baik dan Produk rumah tangga.
- tidak ada kategori yang ditampilkan untuk yang ke-2 karena ini adalah class yang tidak diketahui.
- tidak ada
trackingId
(karena ini adalah mode deteksi gambar tunggal) - posisi di dalam persegi panjang
boundingBox
(mis. (481, 2021) – (2426, 3376)) - detektor cukup yakin bahwa yang pertama adalah Fashion baik (90%) (itu adalah gaun)
Secara teknis, itulah yang Anda perlukan agar Deteksi Objek ML Kit berfungsi—Anda mendapatkan semuanya sekarang. Selamat!
Ya, di sisi UI, Anda masih berada pada tahap saat memulai, tetapi Anda dapat memanfaatkan hasil yang terdeteksi di UI seperti menggambar kotak pembatas untuk menciptakan pengalaman yang lebih baik. Langkah selanjutnya adalah memvisualisasikan hasil yang terdeteksi.
6. Pascapemrosesan hasil deteksi
Pada langkah sebelumnya, Anda mencetak hasil yang terdeteksi ke logcat: sederhana dan cepat.
Di bagian ini, Anda akan menggunakan hasilnya dalam gambar:
- gambar kotak pembatas pada gambar
- gambar nama kategori dan keyakinan di dalam kotak pembatas
Memahami utilitas visualisasi
Ada beberapa kode boilerplate di dalam codelab untuk membantu Anda memvisualisasikan hasil deteksi. Manfaatkan utilitas ini untuk membuat kode visualisasi kita menjadi sederhana:
class ImageClickableView
Ini adalah class tampilan gambar yang menyediakan beberapa utilitas praktis untuk visualisasi dan interaksi dengan hasil deteksi.fun drawDetectionResults(results: List<DetectedObject>)
Metode ini menggambar lingkaran putih di tengah setiap objek yang terdeteksi.fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit))
Ini adalah callback untuk menerima gambar yang dipangkas yang hanya berisi objek yang telah diketuk pengguna. Anda akan mengirim gambar yang dipangkas ini ke backend penelusuran gambar di codelab berikutnya untuk mendapatkan hasil yang mirip secara visual. Dalam codelab ini, Anda belum akan menggunakan metode ini.
Menampilkan hasil deteksi ML Kit
Gunakan utilitas visualisasi untuk menampilkan hasil deteksi objek ML Kit di atas gambar input.
Buka tempat Anda memanggil debugPrint()
, lalu tambahkan cuplikan kode berikut di bawahnya:
runOnUiThread {
viewBinding.ivPreview.drawDetectionResults(it)
}
Menjalankan aplikasi
Sekarang, klik Run ( ) di toolbar Android Studio.
Setelah aplikasi dimuat, tekan Tombol dengan ikon kamera, arahkan kamera ke suatu objek, ambil foto, terima foto (di Aplikasi Kamera), atau ketuk gambar preset mana pun dengan mudah. Anda akan melihat hasil deteksi; tekan lagi Tombol atau pilih gambar lain untuk diulangi beberapa kali, dan rasakan ML Kit ODT terbaru!
7. Selamat!
Anda telah menggunakan ML Kit untuk menambahkan kemampuan Deteksi Objek ke aplikasi Anda:
- 3 langkah dengan 3 API
- Buat Gambar Input
- Buat Pendeteksi
- Kirim Gambar ke Pendeteksi
Hanya ini yang Anda perlukan untuk mengaktifkannya.
Yang telah kita bahas
- Cara menambahkan Deteksi dan Pelacakan Objek ML Kit ke aplikasi Android Anda
- Cara menggunakan deteksi dan pelacakan objek di perangkat di ML Kit untuk mendeteksi objek dalam gambar
Langkah Berikutnya
- Coba codelab ini tentang cara mengirim objek yang terdeteksi ke backend penelusuran produk dan menampilkan hasil penelusurannya.
- Jelajahi lebih banyak hal dengan ML Kit ODT dengan lebih banyak gambar dan video live untuk mendeteksi & akurasi dan performa klasifikasi
- Lihat jalur pembelajaran Melangkah lebih lanjut dengan deteksi objek untuk mempelajari cara melatih model kustom
- Baca rekomendasi Desain Material untuk deteksi objek live-camera dan gambar statis
- Menerapkan ML Kit ODT di aplikasi Android Anda sendiri