Mendeteksi objek pada gambar untuk membuat penelusuran produk visual dengan ML Kit: Android

1. Sebelum memulai

727608486a28395d.png

Pernahkah Anda melihat demo Google Lens, tempat Anda dapat mengarahkan kamera ponsel ke sebuah objek dan mencari tempat untuk membelinya secara online? Jika Anda ingin mempelajari cara menambahkan fitur yang sama ke aplikasi, codelab ini memang 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 membuat fitur penelusuran gambar produk: cara mendeteksi objek dalam gambar dan mengizinkan pengguna memilih objek yang ingin ditelusuri. Anda akan menggunakan Deteksi dan Pelacakan Objek ML Kit untuk membuat fitur ini.

Anda dapat mempelajari langkah-langkah lainnya, termasuk cara membuat backend penelusuran produk dengan Vision API Product Search, di jalur pembelajaran.

Yang akan Anda buat

  • Dalam codelab ini, Anda akan membuat aplikasi Android dengan ML Kit. Aplikasi Anda akan menggunakan ML Kit Object Detection and Tracking API untuk mendeteksi objek dalam gambar tertentu. Kemudian, pengguna akan memilih objek yang ingin ditelusuri di database produk kami.
  • Di bagian akhir, Anda akan melihat sesuatu yang mirip dengan gambar di sebelah kanan.

Yang akan Anda pelajari

  • Cara mengintegrasikan ML Kit SDK ke dalam aplikasi Android
  • API Deteksi dan Pelacakan Objek ML Kit

Yang Anda butuhkan

  • Versi terbaru Android Studio (v4.1.2+)
  • Android Studio Emulator 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 agar Anda dapat dengan mudah menyalin dan menempelnya.

2. Memulai persiapan

Download Kode

Klik link berikut untuk mendownload semua kode untuk codelab ini:

Mengekstrak file zip yang didownload. Ini akan mengekstrak folder root (odml-pathways-main) dengan semua resource yang Anda butuhkan. Untuk codelab ini, Anda hanya memerlukan sumber di subdirektori product-search/codelab1/android.

Subdirektori deteksi objek di repositori mlkit-android berisi dua direktori:

  • android_studio_folder.pngstarter—Kode awal yang Anda build untuk codelab ini.
  • android_studio_folder.pngfinal—Kode lengkap untuk aplikasi contoh yang sudah selesai.

3 Menambahkan API Deteksi dan Pelacakan Objek ML Kit ke project

Mengimpor aplikasi ke Android Studio

Mulailah dengan mengimpor aplikasi starter ke Android Studio.

Buka Android Studio, pilih Import Project (Gradle, Eclipse ADT, etc.) dan pilih folder starter dari kode sumber yang telah Anda download sebelumnya.

7c0f27882a2698ac.png

Menambahkan dependensi untuk Deteksi dan Pelacakan Objek ML Kit

Dependensi ML Kit memungkinkan Anda mengintegrasikan ODT SDK ML Kit di aplikasi Anda.

Buka file app/build.gradle project Anda dan pastikan dependensi sudah ada di sana:

build.gradle

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

Menyinkronkan project Anda dengan file gradle

Untuk memastikan bahwa semua dependensi tersedia untuk aplikasi Anda, Anda harus menyinkronkan project dengan file gradle pada tahap ini.

Pilih Sync Project with Gradle Files ( b451ab2d04d835f9.png) dari toolbar Android Studio.

(Jika tombol ini dinonaktifkan, pastikan Anda hanya mengimpor starter/app/build.gradle, bukan seluruh repositori.)

4. Menjalankan aplikasi awal

Setelah Anda 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 melalui USB ke host atau Start emulator Android Studio, dan klik Run ( execute.png) di toolbar Android Studio.

Menjalankan dan menjelajahi aplikasi

Aplikasi akan diluncurkan di perangkat Android. Kode ini memiliki beberapa kode boilerplate untuk memungkinkan Anda mengambil foto atau memilih gambar preset, dan memberikannya ke pipeline deteksi dan pelacakan objek yang akan Anda buat dalam codelab ini. Jelajahi aplikasi sedikit sebelum menulis kode:

Pertama, terdapat Tombol ( c6d965d639c3646.png) di bagian bawah

  • buka aplikasi kamera yang terintegrasi di perangkat/emulator Anda
  • ambil foto di dalam aplikasi kamera Anda
  • menerima gambar yang diambil di aplikasi awal
  • tampilkan gambar

Coba tombol "Ambil foto". Ikuti petunjuk untuk mengambil foto, terima foto, dan amati foto yang ditampilkan di dalam aplikasi awal.

Kedua, ada 3 gambar preset yang dapat Anda pilih. Anda dapat menggunakan gambar ini nanti untuk menguji kode deteksi objek jika menjalankan pada emulator Android.

  1. Pilih gambar dari 3 gambar preset.
  2. Perhatikan bahwa gambar muncul di tampilan yang lebih besar.

1290481786af21b9.png

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 pada perangkat. Ada juga 3 gambar preset di aplikasi tempat Anda dapat mencoba deteksi objek, jika Anda menjalankan codelab di emulator Android.

Saat Anda memilih gambar, baik dari gambar preset maupun dengan mengambil foto dengan aplikasi kamera, kode boilerplate mendekode gambar tersebut menjadi instance Bitmap, menampilkannya di layar dan memanggil metode runObjectDetection dengan atribut 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 ODT ML Kit

  • siapkan gambar: InputImage
  • buat objek detektor: ObjectDetection.getClient(options)
  • hubungkan 2 objek di atas: process(image)

Anda mencapai ini di 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 ODT ML Kit Seiring berjalannya waktu, 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: Buat InputImage

ML Kit menyediakan API sederhana untuk membuat InputImage dari Bitmap. Kemudian, Anda dapat memasukkan InputImage ke dalam ML Kit API.

// 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: Buat instance pendeteksi

ML Kit mengikuti Pola Desain Builder, Anda akan meneruskan konfigurasi ke builder, lalu mendapatkan pendeteksi dari sana. Ada 3 opsi untuk mengonfigurasi (opsi dalam tebal digunakan dalam codelab):

  • mode pendeteksi (gambar tunggal atau streaming)
  • mode deteksi (satu atau beberapa deteksi objek)
  • mode klasifikasi (aktif atau nonaktif)

Codelab ini ditujukan untuk gambar tunggal - beberapa deteksi & klasifikasi objek, 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 pendeteksi

Deteksi dan klasifikasi objek adalah pemrosesan asinkron:

  • Anda mengirim gambar ke pendeteksi (melalui process())
  • pendeteksi berfungsi cukup keras
  • pendeteksi melaporkan hasilnya kembali kepada Anda melalui callback

Kode berikut melakukan hal tersebut (salin dan tambahkan 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, pendeteksi memberi tahu Anda melalui

  1. Jumlah total objek yang terdeteksi
  2. Setiap objek yang terdeteksi dijelaskan dengan
  • trackingId: bilangan bulat yang digunakan untuk melacaknya lintas frame (TIDAK digunakan dalam codelab ini)
  • boundingBox: kotak pembatas objek
  • labels: daftar label untuk objek yang terdeteksi (hanya saat klasifikasi diaktifkan)
  • index (Dapatkan indeks label ini)
  • text (Dapatkan teks label ini termasuk "Perabotan Mode", "Makanan", "Perabot Rumah Tangga", "Tempat", "Tanaman")
  • confidence (float antara 0,0 hingga 1,0 dengan 1,0 berarti 100%)

Anda mungkin telah mengetahui bahwa kode akan mendeteksi hasil 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 ( execute.png) pada toolbar Android Studio. Coba pilih gambar preset atau ambil foto, lalu lihat jendela logcat(16bd6ea224cf8cf1.png) 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 pendeteksi melihat 3 objek dari:

  • kategori adalah Fashion bagus dan Kebaikan rumah.
  • tidak ada kategori yang ditampilkan untuk kelas 2 karena merupakan kelas yang tidak dikenal.
  • tidak ada trackingId (karena ini adalah mode deteksi gambar tunggal)
  • posisi di dalam persegi panjang boundingBox (misalnya (481, 2021) – (2426, 3376))
  • detektor cukup yakin bahwa urutan pertama adalah Mode yang baik (90%) (itu adalah gaun)

Secara teknis itulah yang Anda perlukan agar Deteksi Objek ML Kit berfungsi—Anda sudah mendapatkan semuanya saat ini! Selamat.

Ya, di sisi UI, Anda masih di tahap saat memulai, tetapi Anda dapat menggunakan hasil yang terdeteksi di UI seperti menggambar kotak pembatas untuk membuat pengalaman yang lebih baik. Langkah berikutnya adalah memvisualisasikan hasil yang terdeteksi.

6. Pascapemrosesan hasil deteksi

Pada langkah sebelumnya, Anda telah 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

Terdapat beberapa kode boilerplate di dalam codelab untuk membantu Anda memvisualisasikan hasil deteksi. Manfaatkan utilitas ini untuk menyederhanakan kode visualisasi kami:

  • 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 dalam codelab berikutnya untuk mendapatkan hasil yang serupa secara visual. Dalam codelab ini, Anda belum akan menggunakan metode ini.

Tampilkan hasil deteksi ML Kit

Gunakan utilitas visualisasi untuk menampilkan hasil deteksi objek ML Kit di bagian atas gambar input.

Buka tempat Anda memanggil debugPrint() dan tambahkan cuplikan kode berikut di bawahnya:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Menjalankan aplikasi

Sekarang klik Run ( execute.png) di toolbar Android Studio.

Setelah aplikasi dimuat, tekan Tombol dengan ikon kamera, arahkan kamera ke sebuah objek, ambil foto, terima foto (di Aplikasi Kamera), atau Anda dapat dengan mudah mengetuk gambar preset. Anda akan melihat hasil deteksi; tekan Tombol lagi atau pilih gambar lain untuk mengulangi beberapa kali, dan nikmati MLD ODT terbaru.

5027148750dc0748.png

7. Selamat!

Anda telah menggunakan ML Kit untuk menambahkan kemampuan Deteksi Objek ke aplikasi Anda:

  • 3 langkah dengan 3 API
  • Membuat Gambar Input
  • Buat Pendeteksi
  • Kirim Gambar ke Pendeteksi

Hanya itu yang Anda perlukan untuk mengaktifkan dan menjalankan!

Yang telah kita bahas

  • Cara menambahkan Deteksi dan Pelacakan Objek ML Kit ke aplikasi Android Anda
  • Cara menggunakan deteksi dan pelacakan objek di perangkat dalam 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 penelusuran
  • Jelajahi lebih banyak hal dengan ODT ML Kit dengan lebih banyak gambar dan video live untuk merasakan deteksi & akurasi klasifikasi dan performa
  • Lihat jalur pembelajaran Mempelajari lebih lanjut dengan deteksi objek untuk mempelajari cara melatih model kustom
  • Baca tentang rekomendasi Desain Material untuk kamera live dan static-image deteksi objek
  • Terapkan ODT ML Kit di aplikasi Android Anda sendiri

Pelajari Lebih Lanjut