Aplikasi Pendeteksi Masker di Flutter dengan TensorFlow Lite

Cara membuat aplikasi pendeteksi masker di Flutter menggunakan TensorFlow Lite

Pengenalan

Di masa pandemi seperti ini saya mendapatkan ide mengenai cara membuat aplikasi pendeteksi masker di wajah. Di kantor tempat saya bekerja saat ini sebelum masa pandemi kami menggunakan fingerprint scanner setiap kali mau masuk ke kantor. Namun, dikarenakan sekarang lagi adanya masa pandemi maka, kantor kami pun mengganti alat tersebut dengan alat face scanner. Alat tersebut mampu mengurangi media penularan Covid-19 yaitu melalui jari. Sekarang kami kalau mau masuk ke kantor cukup arahkan saja wajah kami ke alat tersebut dan pintu pun terbuka.

Dari kejadian tersebut saya mendapatkan ide kira-kira apakah Flutter mampu membuat hal seperti itu. Ekspektasi saya adalah minimal bisa mendeteksi sebuah objek pada gambar saja itu sudah cukup membantu. Lalu, saya mulai cari-cari di internet mengenai teknologi apa saja yang mampu membantu saya untuk mewujudkan ide tersebut dan akhirnya ketemulah yang namanya TensorFlow. Bagi yang belum tahu apa itu TensorFlow berikut adalah kutipan yang saya ambil dari Wikipedia.

TensorFlow is a free and open-source software library for dataflow and differentiable programming across a range of tasks. It is a symbolic math library, and is also used for machine learning applications such as neural networks.

Jadi, secara singkat saya katakan saja bahwa TensorFlow adalah pustaka yang mampu membantu kita untuk mengembangkan aplikasi yang berhubungan dengan machine learning. Untuk di mobile, kita bisa menggunakan TensorFlow Lite.

Contoh Aplikasi

Pada tulisan ini saya akan mencoba membuat aplikasi yang mampu mendeteksi apakah kita sedang mengenakan masker atau tidak. Sederhana banget tapi, saya harap ini bisa jadi awal pemahaman kamu mengenai teknologi TensorFlow. Sebenarnya tugas utamanya ialah terletak pada TensorFlow yang mampu melakukan training terhadap model-model yang sudah kita berikan. Dan nantinya file hasil training tersebut akan kita unduh dan kita masukkan ke dalam projek kita di mobile.

Persiapan TensorFlow

Persiapan pertama yang perlu kita lakukan adalah membuat file training model-nya terlebih dahulu. Untuk membuatnya silakan buka website berikut.

Teachable Machine

https://teachablemachine.withgoogle.com/

Kemudian, kita pilih Get Started. Dan nantinya akan muncul tampilan seperti berikut.

Pilih Image Project

Selanjutnya, kita pilih Image Project. Kemudian, secara default nantinya akan tersedia 2 class yang sudah dibuat yaitu Class 1 dan Class 2. Silakan ubah Class 1 menjadi Masker dan Class 2 menjadi No Masker.

Buat class Masker dan No Masker

Kemudian, di dalam class Masker silakan upload gambar kamu yang sedang mengenakan masker. Kamu bisa meng-upload-nya via Webcam atau Upload file. Biar prosesnya sama saya harap kita pakai Webcam saja ya.

Upload gambar via Webcam

Kemudian, kita tekan dan tahan tombol Hold to Record untuk mengambil gambar dari webcam. Usahakan gambarnya bervariasi agar hasilnya bisa lebih tepat.

Gambar yang sudah diupload untuk sample Masker

Selanjutnya, kita pindah ke class No Masker dan lakukanlah hal yang sama hanya saja gambarnya kita nggak pakai masker ya.

Gambar yang sudah diupload untuk sample No Masker

Langkah berikutnya, kita pilih Train Model dan tunggu beberapa saat sampai prosesnya selesai.

Training model sedang dilakukan

Tunggu beberapa saat sampai proses training model-nya selesai

Setelah selesai training model-nya kita bisa menguji coba hasil training-nya apakah sudah pas atau belum. Caranya seperti berikut.

Uji coba hasil training

Seperti yang kamu lihat pada video diatas bahwa hasil training-nya sudah bisa mendeteksi apakah kita sedang mengenakan masker atau tidak. Selanjutnya, kita pilih Export Model lalu, pilih Tensorflow Lite. Dan pilih Floating point dan pilih Download my model.

Unduh file model

File model sedang diunduh

Silakan kamu ekstrak file unduhannya dan kamu akan mendapatkan 2 file yaitu, labels.txt dan model_unquant.tflite.

Buat Aplikasi di Flutter

Sekarang kita masuk di bagian Flutter-nya. Silakan kamu buat projek baru di Flutter lalu, kamu tambahkan plugin berikut.

tflite | Flutter Package

image_picker | Flutter Package

Pada contoh kali ini saya hanya bisa mencontohkan yang di Android saja jadi, untuk konfigurasi dari plugin tflite saya hanya mengikuti yang untuk Android saja.

Konfigurasi Plugin tflite

Silakan buka file android/app/build.gradle dan tambahkan kode berikut di dalam blok android .

aaptOptions {
    noCompress 'tflite'
    noCompress 'lite'
}

Masih di file yang sama. Kemudian, kita ubah nilai minSdkVersion menjadi 19.

Ubah nilai minSdkVersion menjadi 19

Masukkan File Model

Langkah berikutnya kita perlu memasukkan file model yang sudah kita unduh tadi kedalam projek kita. Caranya, kita buat folder baru bernama assets lalu, kita masukkan file labels.txt dan model_unquant.tflite.

Masukkan file model kedalam projek

Jangan lupa kita deklarasikan folder assets di dalam file pubspec.yaml.

Deklarasikan assets di dalam pubspec.yaml

Jika sudah jangan lupa untuk menjalankan perintah flutter pub get .

Buat Fitur Pendeteksi Masker

Pada langkah ini kita akan membuat UI beserta dengan fitur pendeteksi maskernya. Silakan buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

Adapun penjelasan dari kode diatas adalah sebagai berikut.

1. Ketika app kita pertama kali dibuka maka, app kita ada melakukan proses untuk memuat modelnya. Proses ini bisa kamu lihat di dalam blok kode initState() .
2. Selanjutnya, didalam property floatingActionButton kita ada membuat 2 widget FloatingActionButton yang berfungsi untuk meng-upload gambar via kamera dan gallery.
3. Ketika gambar diupload (via kamera atau gallery) maka, proses selanjutnya ialah masuk ke fungsi processImage . Di dalam fungsi inilah kita melakukan pengolahan pada gambar yang kita upload dan coba kita proses dengan file model sehingga nantinya output dari fungsi ini ialah Masker atau No Masker sesuai dengan nama class yang sudah kita buat ditahap TensorFlow tadi.
4. Jika kamu bertanya mengapa kita ada menggunakan fungsi reguler expression pada kode diatas ketika menampilkan hasilnya maka, jawabannya adalah karena output dari label-nya adalah seperti berikut. Sehingga kamu perlu menghapus angka 0 yang berada di depannya.

Output dari proses Tflite.runModelOnImage

Sekarang silakan kita jalankan programnya maka, hasilnya akan menjadi seperti berikut.

Kesimpulan

Jadi kesimpulannya ialah TensorFlow merupakan sebuah pustaka yang mampu membantu kita untuk mengembangkan aplikasi yang berhubungan dengan machine learning. Di mobile kita bisa menggunakan TensorFlow Lite. Dan untuk melakukan training-nya saya rasa sangatlah mudah dan di Flutter-nya menurut saya juga cukup gampang. Untuk source code lengkap dari contoh projek ditulisan ini bisa kamu lihat di Github ya.

CoderJava/flutter-masker-detection-app