Mengintegrasikan Model Kustom ke dalam Aplikasi

1. Sebelum memulai

Dalam Codelab pertama dalam seri ini, Anda membuat aplikasi yang sangat sederhana yang menggunakan Pelabelan Gambar untuk mengurai konten gambar. Anda memberinya gambar bunga aster, dan aplikasi tersebut memberi tahu Anda bahwa ia melihat hal-hal seperti kelopak bunga atau langit. Kemudian, di Codelab kedua, Anda beralih ke Python untuk melatih model kustom baru yang mengenali lima jenis bunga yang berbeda.

Dalam codelab ini, Anda akan mengupdate aplikasi dari lab pertama dengan model dari lab kedua.

Anda bisa mendapatkan kode sumber lengkap untuk lab kode ini dengan meng-clone repositori ini. Anda akan melihat subdirektori untuk Android dan iOS. Kode codelab sebelumnya tersedia sebagai ImageClassifierStep1 jika Anda ingin mengikutinya. Kode akhir untuk codelab ini tersedia sebagai ImageClassifierStep2.

Prasyarat

  • Anda seharusnya telah menyelesaikan dua codelab pertama di jalur pembelajaran ini

Yang akan Anda bangun dan pelajari

  • Mengintegrasikan model kustom, yang dilatih di lab sebelumnya, ke dalam aplikasi Android atau iOS

Yang Anda butuhkan

  • Android Studio, tersedia di developer.android.com/studio untuk bagian Android dalam lab
  • Xcode, yang tersedia di Apple App Store, untuk bagian iOS dari lab

2. Mendapatkan Aplikasi Awal

Pertama, Anda memerlukan aplikasi dari Codelab Membangun Aplikasi Computer Vision Pertama Anda di Android atau iOS. Jika Anda telah menyelesaikan lab, file tersebut akan disebut ImageClassifierStep1. Jika tidak ingin menyelesaikan lab, Anda dapat meng-clone versi yang sudah selesai dari repo

Buka di Android Studio, lakukan update yang diperlukan, dan setelah siap, jalankan aplikasi untuk memastikan aplikasi berfungsi. Anda akan melihat yang seperti ini:

f3703d45d1332d1d.png

Aplikasi ini cukup primitif, tetapi menunjukkan beberapa fungsi yang sangat canggih hanya dengan sedikit kode. Namun, jika Anda ingin bunga ini dikenali sebagai bunga aster, dan bukan hanya sebagai bunga, Anda harus memperbarui aplikasi untuk menggunakan model kustom dari codelab Membuat model kustom untuk pengklasifikasi gambar.

3. Perbarui build.gradle untuk menggunakan Model ML Kit Kustom

  1. Dengan menggunakan Android Studio, temukan file build.gradle level aplikasi. Cara termudah untuk melakukannya adalah di penjelajah project. Pastikan Android dipilih di bagian atas, dan Anda akan melihat folder untuk Gradle Scripts di bagian bawah.
  2. Buka file yang ditujukan untuk Module, dengan nama aplikasi Anda diikuti dengan ‘.app' seperti yang ditunjukkan di sini – (Module: ImageClassifierStep1.app):

8fe1d04b40610047.png

  1. Di bagian bawah file, temukan setelan dependencies. Di sana, Anda akan melihat baris ini:
implementation 'com.google.mlkit:image-labeling:17.0.1'

Nomor versi mungkin berbeda. Selalu temukan nomor versi terbaru dari situs ML Kit di: https://developers.google.com/ml-kit/vision/image-labeling/android

  1. Ganti ini dengan referensi library pelabelan gambar kustom. Nomor versi untuk hal ini dapat ditemukan di: https://developers.google.com/ml-kit/vision/image-labeling/custom-models/android
implementation 'com.google.mlkit:image-labeling-custom:16.3.1'
  1. Selain itu, Anda akan menambahkan model .tflite yang Anda buat di lab sebelumnya. Anda tidak ingin model ini dikompresi saat Android Studio mengompilasi aplikasi Anda, jadi pastikan Anda menggunakan setelan ini di bagian Android pada file build.gradle yang sama:
aaptOptions{
    noCompress "tflite"
}

Pastikan tidak ada dalam setelan lain. Tag ini harus disarankan langsung di bawah tag android. Berikut contohnya:

62d546bff11d2a50.png

4. Tambahkan Model TFLite

Dalam codelab sebelumnya, Anda telah membuat model kustom dan mendownloadnya sebagai model.tflite.

Di project Anda, temukan folder assets yang saat ini berisi flower1.jpg. Salin model ke folder tersebut sebagai berikut:

  1. Klik kanan folder Assets di Android Studio. Di menu yang terbuka, pilih Tampilkan di Finder. (‘Tampilkan di Explorer' di Windows, dan ‘Tampilkan di Files' di Linux.)

db30b47e419a326b.png

  1. Anda akan diarahkan ke direktori di sistem file. Salin file model.tflite ke direktori tersebut, bersama dengan flower1.jpg.

36de0c51bec1c19e.png

Android Studio akan diupdate untuk menampilkan kedua file di folder aset Anda:

e9f4e9f394d9b357.png

Sekarang Anda siap memperbarui kode.

5. Memperbarui kode untuk model kustom

Langkah pertama adalah menambahkan beberapa kode untuk memuat model kustom.

  1. Dalam file MainActivity, tambahkan kode berikut ke onCreate Anda, tepat di bawah baris yang berbunyi setContentView(R.layout.activity_main).

Tindakan ini akan menggunakan LocalModel untuk membangun dari aset model.tflite. Jika Android Studio mengeluh dengan mengubah 'LocalModel' menjadi merah, tekan ALT + Enter untuk mengimpor library. IDE akan menambahkan impor ke com.google.mlkit.common.model.LocalModel untuk Anda.

val localModel = LocalModel.Builder()
        .setAssetFilePath("model.tflite")
        .build()

Sebelumnya, di pengendali btn.setOnClickListener, Anda menggunakan model default. Perangkat disiapkan dengan kode ini:

val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)

Anda akan menggantinya untuk menggunakan model kustom.

  1. Siapkan objek opsi kustom:
val options = CustomImageLabelerOptions.Builder(localModel)
        .setConfidenceThreshold(0.7f)
        .setMaxResultCount(5)
        .build()

Tindakan ini akan mengganti opsi default dengan set opsi yang disesuaikan. Nilai minimum keyakinan menetapkan standar untuk kualitas prediksi yang akan ditampilkan. Jika melihat kembali contoh di bagian atas codelab ini, saat gambar adalah bunga daisy, Anda akan melihat 4 prediksi, yang masing-masing memiliki nilai di sampingnya, seperti 'Langit' dengan nilai 0,7632.

Anda dapat secara efektif memfilter hasil berkualitas lebih rendah dengan menggunakan nilai minimum keyakinan yang tinggi. Misalnya, jika Anda menyetelnya ke 0,9, tidak ada label dengan prioritas yang lebih rendah dari itu yang akan ditampilkan. setMaxResultCount() berguna dalam model dengan banyak class, tetapi karena model ini hanya memiliki 5 class, Anda cukup membiarkannya di angka 5.

Setelah memiliki opsi untuk pelabel, Anda dapat mengubah instansiasi pelabel menjadi:

val labeler = ImageLabeling.getClient(options)

Kode lainnya akan berjalan tanpa modifikasi. Cobalah!

dd40c36c4edbb33.png

Di sini Anda dapat melihat bahwa bunga ini sekarang diidentifikasi sebagai bunga aster dengan probabilitas 0,959.

Misalnya, Anda menambahkan gambar bunga kedua, dan menjalankan ulang dengan gambar tersebut:

8556a5fbea487842.png

Aplikasi ini mengidentifikasinya sebagai mawar.

Anda mungkin bertanya-tanya mengapa tertulis mawar, bukan hanya "mawar". Hal ini karena dalam set data, label diberikan oleh nama folder, dan sayangnya nama folder tersebut sedikit tidak konsisten, terkadang menggunakan bentuk tunggal (seperti 'daisy') dan terkadang menggunakan bentuk jamak (seperti 'roses'). Jangan keliru menganggap ini sebagai upaya model untuk menghitung item dalam gambar – ini jauh lebih sederhana, dan hanya dapat mengidentifikasi jenis bunga.

6. Mendapatkan Aplikasi Start iOS

  1. Pertama, Anda memerlukan aplikasi dari Codelab pertama. Jika Anda telah menyelesaikan lab, file tersebut akan disebut ImageClassifierStep1. Jika tidak ingin mengikuti lab, Anda dapat meng-clone versi yang sudah selesai dari repo. Perhatikan bahwa pod dan .xcworkspace tidak ada di repo, jadi sebelum melanjutkan ke langkah berikutnya, pastikan untuk menjalankan'pod install' dari direktori yang sama dengan .xcproject.
  2. Buka ImageClassifierStep1.xcworkspace di Xcode. Perhatikan bahwa Anda harus menggunakan .xcworkspace, bukan .xcproject karena Anda telah memaketkan ML Kit menggunakan pod, dan ruang kerja akan memuatnya.

Untuk sisa lab ini, saya akan menjalankan aplikasi di simulator iPhone yang akan mendukung target build dari codelab. Jika ingin menggunakan perangkat Anda sendiri, Anda mungkin perlu mengubah target build di setelan project agar sesuai dengan versi iOS Anda.

Jalankan dan Anda akan melihat tampilan seperti ini:

9e151ed18f99fb98.png

Perhatikan klasifikasi yang sangat umum – kelopak, bunga, langit. Model yang Anda buat di codelab sebelumnya dilatih untuk mendeteksi 5 varietas bunga, termasuk bunga ini – bunga aster.

Untuk bagian codelab ini, Anda akan melihat apa yang diperlukan untuk mengupgrade aplikasi dengan model kustom.

7. Menggunakan Pod Pemberi Label Gambar ML Kit Kustom

Aplikasi pertama menggunakan file pod untuk mendapatkan model dan library Pemberi Label Gambar ML Kit dasar. Anda harus memperbaruinya untuk menggunakan library pelabelan gambar kustom.

  1. Temukan file bernama podfile di direktori project Anda. Buka, dan Anda akan melihat sesuatu seperti ini:
platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end
  1. Ubah deklarasi pod dari ImageLabeling menjadi ImageLabelingCustom, seperti ini:
platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabelingCustom'
end
  1. Setelah selesai, gunakan terminal untuk membuka direktori yang berisi podfile (serta .xcworkspace) dan jalankan pod install.

bb5d78eb7c7ab975.png

Setelah beberapa saat, library MLKitImageLabeling akan dihapus, dan library kustom akan ditambahkan. Sekarang Anda dapat membuka .xcworkspace untuk mengedit kode.

8. Menambahkan Model TFLite ke Xcode

Di codelab sebelumnya, Anda telah membuat model kustom dan mendownloadnya sebagai model.tflite. Jika Anda tidak memilikinya, kembali dan jalankan codelab tersebut, atau buka kode colab di sini. Jika Anda tidak memiliki akses ke Google Colab, notebook tersedia di link ini

  1. Dengan ruang kerja terbuka di Xcode, tarik model.tflite ke project Anda. File ini harus berada di folder yang sama dengan file Anda yang lain seperti ViewController.swift atau Main.storyboard.
  2. Dialog akan muncul dengan opsi untuk menambahkan file. Pastikan Tambahkan ke Target dipilih, atau model tidak akan dibundel dengan aplikasi saat di-deploy ke perangkat.

Perhatikan bahwa entri 'Add to Targets' akan memiliki ImageClassifierStep1 jika Anda memulainya dari sana dan melanjutkan langkah demi langkah di lab ini atau ImageClassifierStep2 (seperti yang ditunjukkan) jika Anda langsung membuka kode yang sudah selesai.

5b6a7f40c73f0f1f.png

Tindakan ini akan memastikan Anda dapat memuat model. Anda akan melihat cara melakukannya di langkah berikutnya.

9. Memperbarui Kode untuk Model Kustom

  1. Buka file ViewController.swift Anda. Anda mungkin melihat error pada 'import MLKitImageLabeling' di bagian atas file. Hal ini karena Anda menghapus library pelabelan gambar generik saat memperbarui file pod. Anda dapat menghapus baris ini, dan memperbarui dengan kode berikut:
import MLKitVision
import MLKit
import MLKitImageLabelingCommon
import MLKitImageLabelingCustom

Anda mungkin dengan mudah membaca cepat kode ini dan mengira bahwa kode tersebut mengulangi kode yang sama. Namun, "Umum" dan "Kustom" ada di bagian akhir.

  1. Selanjutnya, Anda akan memuat model kustom yang ditambahkan pada langkah sebelumnya. Temukan fungsi getLabels(). Di bawah baris yang bertuliskan visionImage.orientation = image.imageOrientation, tambahkan baris berikut:
// Add this code to use a custom model
let localModelFilePath = Bundle.main.path(forResource: "model", ofType: "tflite")
let localModel = LocalModel(path: localModelFilePath!)
  1. Temukan kode untuk menentukan opsi untuk ImageLabeler generik. Kemungkinan Anda akan mendapatkan error karena pustaka tersebut telah dihapus:
let options = ImageLabelerOptions()

Ganti dengan kode ini, untuk menggunakan CustomImageLabelerOptions, dan yang menentukan model lokal:

let options = CustomImageLabelerOptions(localModel: localModel)

...dan selesai! Coba jalankan aplikasi Anda sekarang. Saat Anda mencoba mengklasifikasikan gambar, hasilnya akan lebih akurat – dan memberi tahu Anda bahwa Anda sedang melihat bunga aster dengan probabilitas tinggi.

238cd21748a97cf4.png

Misalnya, Anda menambahkan gambar bunga kedua, dan menjalankan ulang dengan gambar tersebut:

75f3970a6b509bfe.png

Aplikasi berhasil mendeteksi bahwa gambar ini cocok dengan label 'mawar'!

10. Selamat!

Sekarang Anda telah beralih dari membangun aplikasi yang menggunakan model generik untuk mengenali konten gambar, hingga membuat model ML Anda sendiri untuk mengenali hal-hal tertentu, seperti bunga, lalu memperbarui aplikasi Anda untuk menggunakan model kustom Anda.

Tentu saja, aplikasi yang dihasilkan sangat terbatas karena mengandalkan aset gambar yang dibundel. Namun, bagian ML berfungsi dengan baik. Misalnya, Anda dapat menggunakan AndroidX Camera untuk mengambil frame dari feed live dan mengklasifikasikannya untuk melihat bunga apa yang dikenali ponsel Anda.

Dari sini, kemungkinannya tidak terbatas – dan jika Anda memiliki data Anda sendiri untuk sesuatu selain bunga, Anda memiliki dasar-dasar yang diperlukan untuk membangun aplikasi yang dapat mengenalinya menggunakan Computer Vision. Ini hanyalah beberapa langkah pertama menuju dunia yang jauh lebih luas, dan semoga Anda menikmati prosesnya.