Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android

by - INFO TEKNNIK on - 4:18 AM
Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android - Hallo sahabat pawang bisnis, Pada sharing INFO TEKNIK berjudul Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android, saya telah menulis sebuah artikel. mudah-mudahan isi postingan dapat bermanfaat dan mudah anda pahami. okelah, ini dia isi contennya.

Artikel : Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android
Judul : Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android


Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android

Artikel Tugas Kuliah,
        Assalamu'alaikum Wr. Wb. pada kesempatan ini saya ingin melanjutkan tutorial sebelumnya yaitu Deep Learning dengan Convolutional Neural Network (CNN) pada Google Colaboratory. Pada tutorial ini akan menerapkan model hasil pelatihan CNN dari postingan sebelumnya pada perangkat Android. Agar CNN tersebut dapat digunakan pada perangkat Android maka diperlukan model hasil pelatihannya dalam bentuk TensorFlow Lite. TensorFlow Lite berfungsi untuk menjalankan model hasil pelatihan CNN pada perangkat dengan kebutuhan sumber daya yang rendah dan membutuhkan kecepatan proses yang tinggi. File Model TensorFlow Lite (.tflite) tersebut nantinya akan diimpor ke dalam folder project pada Android Studio.
        Sebelum menuju langkah pembuatannya, pastikan Anda telah memenuhi persyaratan sebagai berikut :
  1. Paham dalam menggunakan perangkat lunak Android Studio IDE.
  2. Mengerti bahasa pemrograman Java/Kotlin.
  3. Mengerti bahasa pemrograman Xml.
  4. Sudah melatih dan menyimpan model hasil pelatihan arsitektur CNN pada Google Colab.
  5. Sudah memasang aplikasi Android Studio IDE.
  6. Pastikan terkoneksi dengan Wi-Fi atau menggunakan paket internet unlimited, karena Android Studio akan men-download resources yang dibutuhkan dengan ukuran yang cukup besar selama pembuatan aplikasi Android.
Jika sudah terpenuhi semuanya maka langsung saja ke tahap pembuatannya.

  1. Buka software Android Studio yang sudah di-install sebelumnya.
  2. Membuat project baru dengan cara klik Menu File → New → New Project....
  3. Pada jendela "Create New Project" pilih "Empty Activity" dan klik "Next".
  4. Kemudian atur seperti pada gambar, untuk "Name" dan "Package Name" isi sesuai keinginan dan "Save location" sesuaikan dengan keinginan Anda.
  5. Tunggu proses sinkronisasi dan download resources sampai selesai.
  6. Jika sudah selesai prosesnya maka tampilannya akan seperti berikut.
  7. Selanjutnya buka "AndroidManifest.xml" dan tambahkan beberapa perizinan dan fitur yang nantinya akan digunakan seperti pada gambar.
    8. Tambahkan Source code program berikut tepat di atas tag "<application":
    1. <dist:module dist:instant="true"/>
    2. <uses-permission android:name="android.permission.CAMERA" />
    3. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    4. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    5. <uses-permission android:name="android.permission.WRITE_INTERNAL_STORAGE" />
    6. <uses-permission android:name="android.permission.READ_INTERNAL_STORAGE" />
    7. <uses-feature android:name="android.hardware.camera" />
    8. <uses-feature android:name="android.hardware.camera.autofocus" />
    9. <!--<uses-feature android:name="android.hardware.camera.flash" />-->
    10. <uses-permission android:name="android.permission.FLASHLIGHT"/>
  8. Jika terdapat source code yang error (berwarna merah) pada text editor maka cukup menekan tombol Alt+Enter pada keyboard untuk menambahkan attribute yang dibutuhkan.
  9. Setelah itu source code tersebut sudah tidak error lagi.
  10. Kemudian terdapat source code yang diberi highlight berwarna kuning yang menandakan adanya peringatan dalam source code tersebut. Peringatan tersebut terjadi karena program yang dibuat tidak dapat diindeks oleh pencarian Google.
  11. Untuk menghilangkan peringatannya maka perlu ditambah atribut seperti ini.
  12. Maka peringatan tersebut sudah tidak muncul kembali.
  13. Sesudah itu kita akan membuat sebuah Class Kotlin baru seperti berikut.
  14. Kemudian isi nama class-nya "Bantuan" dan ganti jenis file menjadi "Class".
  15. Selanjutnya klik "OK" pada jendela "New Kotlin File/Class".
  16. Lengkapi source code berikut pada Class Kotlin "Bantuan.kt". Class ini bertujuan untuk membuat aktivitas baru dengan title bar "Halaman Bantuan". Class ini nantinya digunakan untuk memberi petunjuk cara kerja dan cara menggunakan apikasi ini.
    1. class Bantuan : AppCompatActivity() {

    3.     override fun onCreate(savedInstanceState: Bundle?) {
    4.         super.onCreate(savedInstanceState)
    5.         setContentView(R.layout.activity_bantuan)

    7.         if (supportActionBar != null) {
    8.             (supportActionBar as ActionBar).title = "Halaman Bantuan"
    9.         }
    10.     }
    11. }
    Jika muncul jendela seperti gambar di bawah maka pilih saja semua library yang dibutuhkan kemudian klik "OK". Hal tersebut biasanya terjadi ketika Anda menyalin potongan source code program dari luar yang tidak disertakan library-nya.
  17. Selanjutnya tambahkan class "Bantuan.kt" ke dalam "AndroidManifest.xml" dengan cara seperti pada gambar di bawah ini.
  18. Setelah ditambahkan ke manifest, maka dapat dicek pada "AndroidManifest.xml" apakah aktivitas class "Bantuan" sudah ditambahkan secara otomatis.
  19. Selanjutnya kembali lagi ke aktivitas "Bantuan.kt". Terdapat referensi layout yang tidak ditemukan sehingga menjadi error (source code berwarna merah). Hal itu terjadi karena kita belum membuat tampilan layout dari class Bantuan. Layout tersebut dibuat dengan nama "activity_bantuan.xml". Untuk cara membuatnya seperti berikut.
  20. Setelah terbuka jendela "New Resource File" lakukan seperti berikut.
  21. Kemudian akan dibuat secara otomatis layout-nya pada direktori app → res → layout → activity_bantuan.xml di dalam project Android tersebut.
  22. Untuk mengedit antarmuka "activity_bantuan.xml" nanti akan dilakukan di langkah terakhir dikarenakan nilai string yang dimasukkan cukup banyak.
  23. Setelah itu kita membuat file class baru dengan nama "Deskripsi" serta tampilan layout pada aplikasi Android-nya dengan nama "activity_deskripsi". class Deskripsi ini berfungsi untuk menampilkan informasi varietas beras. Pembuatan antarmuka layout aktivitas tersebut juga sama akan di buat di bagian akhir.
    24. Lengkapi source code pada class tersebut seperti berikut :
    1. class Deskripsi : AppCompatActivity() {

    3.     override fun onCreate(savedInstanceState: Bundle?) {
    4.         super.onCreate(savedInstanceState)
    5.         setContentView(R.layout.activity_deskripsi)

    7.         if (supportActionBar != null) {
    8.             (supportActionBar as ActionBar).title = "Deskripsi Varietas Beras"
    9.         }
    10.     }
    11. }
  24. Sehingga program pada text editor-nya menjadi seperti ini.
  25. Setelah itu buat class "Klasifikasi.kt" dan lengkapi source code-nya seperti ini.
    1. <div style="-goog-ms-box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; border: 6px double #3399FF; color: #b4040; height: 200px; overflow: auto; padding: 0px; width: 450px;">
    2. <ol>
    3. <li style="text-align: justify;"><span style="color: orange; font-family: calibri;">class Deskripsi : AppCompatActivity() {</span></li>
    4. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">
    5. </span></li>
    6. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; override fun onCreate(savedInstanceState: Bundle?) {</span></li>
    7. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; &nbsp; &nbsp; super.onCreate(savedInstanceState)</span></li>
    8. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; &nbsp; &nbsp; setContentView(R.layout.activity_deskripsi)</span></li>
    9. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">
    10. </span></li>
    11. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; &nbsp; &nbsp; if (supportActionBar != null) {</span></li>
    12. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (supportActionBar as ActionBar).title = "Deskripsi Varietas Beras"</span></li>
    13. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; &nbsp; &nbsp; }</span></li>
    14. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">&nbsp; &nbsp; }</span></li>
    15. <li style="text-align: justify;"><span style="color: orange; font-family: &quot;calibri&quot;;">}</span></li>
    16. </ol>
    17. </div>
  26. Pada source code tersebut terdapat nama variabel "Interpreter" yang tidak dikenal sehingga menjadi berwarna merah seperti pada gambar berikut.
  27. Hal tersebut disebabkan oleh tidak adanya library yang cocok untuk ditambahkan. Sehingga diperlukannya penambahan modul dependency pada "build.gradle (Module: app)". Library yang dibutuhkan adalah TensorFlow Lite versi 1.13.1. Cara menambahkannya seperti berikut.
    28. Source code dependency untuk TensorFlow Lite :
    1. //menambah library tensorflowlite
    2.     implementation 'org.tensorflow:tensorflow-lite:1.13.1'
  28. Setelah itu kita dapat mengimpor library TensorFlow Lite pada class Klasifikasi dengan cara menekan Alt+Enter seperti pada langkah sebelumnya.
    29. Maka hasilnya akan seperti ini.
  29. Buat lagi class baru dengan nama "Deteksi". Class ini berfungsi untuk menyimpan nilai data hasil deteksi dari class "Pendeteksi" dan mengubah nilai probabilitasnya ke dalam bentuk persentase (%). Pada class "Deteksi" tidak perlu ditambahkan ke manifest karena class ini tidak akan ditampilkan pada layout aplikasi Android.
    30. Source code kelas Deteksi :
    1. data class Deteksi(
    2.     val name: String,
    3.     val probability: Float
    4. ) {
    5.     override fun toString() =
    6.         "$name : ${probability*100}%"
    7. }
  30. Selanjutnya buat class "Pendeteksi.kt" yang digunakan untuk mendeteksi obyek beras menggunakan fitur kamera pada smartphone Android. Setelah dibuat class-nya lalu tambahkan ke manifest yang sama seperti pada langkah2 sebelumnya.
    31. Source code class Pendeteksi.kt :
    1. class Pendeteksi : AppCompatActivity() {

    3.     private lateinit var classifier: Klasifikasi
    4.     //mendeklarasikan komponen TextView resultbar yang akan dimanipulasi
    5.     private lateinit var resultbar: TextView
    6.     private lateinit var processtime: TextView
    7.     //deklarasi variabel lastprocessingtimems bertipe data long
    8.     private var lastProcessingTimeMs: Long = 0

    10.     @SuppressLint("MissingPermission")
    11.     override fun onCreate(savedInstanceState: Bundle?) {
    12.         super.onCreate(savedInstanceState)
    13.         setContentView(R.layout.activity_pendeteksi)

    15.         //mengganti nama title bar tiap activity
    16.         if (supportActionBar != null) {
    17.             (supportActionBar as ActionBar).title = "Pendeteksi Varietas Beras"
    18.         }

    20.         //obyek TextView resultbar disesuaikan (cast) dengan komponen TextView ber-ID result_bar di layout activity_pendeteksi.xml melalui metode findViewById().
    21.         resultbar = findViewById(R.id.result_bar)
    22.         processtime = findViewById(R.id.process_time_bar)

    24.         classifier = Klasifikasi(assets)

    26.         if (!canUseCamera()) {
    27.             requestCameraPermissions()
    28.         } else {
    29.             setupCamera()
    30.         }
    31.     }

    33.     private fun requestCameraPermissions() {
    34.         ActivityCompat.requestPermissions(
    35.             this,
    36.             arrayOf(Manifest.permission.CAMERA),
    37.             REQUEST_CAMERA_CODE
    38.         )
    39.     }

    41.     @SuppressLint("MissingPermission", "SetTextI18n")
    42.     private fun setupCamera() {
    43.         camera.addPictureTakenListener {
    44.             AsyncTask.execute {
    45.                 val startTime = SystemClock.uptimeMillis()//menghitung waktu awal
    46.                 val recognitions = classifier.recognize(it.data)
    47.                 val txt = recognitions.joinToString(separator = "\n")
    48.                 lastProcessingTimeMs = SystemClock.uptimeMillis() - startTime//menghitung lamanya proses
    49.                 val waktu = lastProcessingTimeMs.toString()//konversi ke string
    50.                 runOnUiThread {
    51.                     /*menampilkan hasil pada UI*/
    52.                     //Toast.makeText(this, txt, Toast.LENGTH_LONG).show()
    53.                     /*menampilkan hasil pada layout TextView*/
    54.                     resultbar.text = txt
    55.                     processtime.text = "$waktu ms "
    56.                 }
    57.             }
    58.         }

    60.         capturePhoto.setOnClickListener {
    61.             camera.capture()
    62.         }

    64.     }

    66.     override fun onRequestPermissionsResult(
    67.         requestCode: Int,
    68.         permissions: Array<out String>,
    69.         grantResults: IntArray
    70.     ) {
    71.         super.onRequestPermissionsResult(requestCode, permissions, grantResults)

    73.         if (REQUEST_CAMERA_CODE == requestCode) {
    74.             if (grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
    75.                 setupCamera()
    76.             } else {
    77.                 Toast.makeText(this, "App needs camera in order to work.", Toast.LENGTH_LONG).show()
    78.                 requestCameraPermissions()
    79.             }
    80.         }
    81.     }

    83.     @SuppressLint("MissingPermission")
    84.     override fun onResume() {
    85.         super.onResume()
    86.         if (canUseCamera()) {
    87.             camera.start()
    88.         }
    89.     }

    91.     override fun onPause() {
    92.         if (canUseCamera()) {
    93.             camera.stop()
    94.         }
    95.         super.onPause()
    96.     }

    98.     override fun onDestroy() {
    99.         if (canUseCamera()) {
    100.             camera.destroy()
    101.         }
    102.         super.onDestroy()
    103.     }

    105.     private fun canUseCamera() =
    106.         ActivityCompat.checkSelfPermission(
    107.             this,
    108.             Manifest.permission.CAMERA
    109.         ) == PackageManager.PERMISSION_GRANTED

    111.     companion object {
    112.         private const val REQUEST_CAMERA_CODE = 1
    113.     }
    114. }
  31. Kemudian buat juga layout "activity_pendeteksi.xml" dengan jenis layout "ConstraintLayout" yang digunakan untuk class "Pendeteksi".
  32. Source code layout "activity_pendeteksi.xml" :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:background="@drawable/gradient_pendeteksi"
    8.     tools:context=".Pendeteksi">

    10.     <com.priyankvasa.android.cameraviewex.CameraView
    11.         android:id="@+id/camera"
    12.         android:layout_width="480dp"
    13.         android:layout_height="640dp"
    14.         android:layout_marginBottom="0dp"
    15.         android:adjustViewBounds="true"
    16.         android:keepScreenOn="true"
    17.         app:aspectRatio="4:3"
    18.         app:autoFocus="continuous_picture"
    19.         app:awb="auto"
    20.         app:cameraMode="single_capture"
    21.         app:facing="back"
    22.         app:flash="auto"
    23.         app:layout_constraintBottom_toBottomOf="parent"
    24.         app:layout_constraintEnd_toEndOf="parent"
    25.         app:layout_constraintStart_toStartOf="parent"
    26.         app:layout_constraintTop_toTopOf="parent"
    27.         app:opticalStabilization="true"
    28.         app:outputFormat="jpeg"
    29.         app:pinchToZoom="true"
    30.         app:shutter="short_time"
    31.         app:touchToFocus="true"
    32.         app:zsl="true" />

    34.     <TextView
    35.         android:id="@+id/process_time_bar"
    36.         android:layout_width="match_parent"
    37.         android:layout_height="wrap_content"
    38.         android:background="#CCFF6633"
    39.         android:padding="2dp"
    40.         android:fontFamily="times"
    41.         android:gravity="right"
    42.         android:text="@string/process_time"
    43.         android:textAlignment="gravity"
    44.         android:textColor="#FFFF00"
    45.         android:textSize="18sp"
    46.         app:layout_constraintBottom_toBottomOf="parent"
    47.         app:layout_constraintTop_toTopOf="parent"
    48.         app:layout_constraintVertical_bias="0.0"
    49.         tools:layout_editor_absoluteX="0dp" />

    51.     <TextView
    52.         android:id="@+id/process_name_bar"
    53.         android:layout_width="match_parent"
    54.         android:layout_height="wrap_content"
    55.         android:padding="2dp"
    56.         android:fontFamily="times"
    57.         android:gravity="left"
    58.         android:text="  Waktu Proses Deteksi : "
    59.         android:textAlignment="gravity"
    60.         android:textColor="#FFFF00"
    61.         android:textSize="18sp"
    62.         app:layout_constraintBottom_toBottomOf="parent"
    63.         app:layout_constraintTop_toTopOf="parent"
    64.         app:layout_constraintVertical_bias="0.0"
    65.         tools:layout_editor_absoluteX="0dp" />

    67.     <TextView
    68.         android:id="@+id/info_bar"
    69.         android:layout_width="match_parent"
    70.         android:layout_height="wrap_content"
    71.         android:background="#80000000"
    72.         android:fontFamily="times"
    73.         android:gravity="center"
    74.         android:padding="2dp"
    75.         android:text="@string/info"
    76.         android:textAlignment="gravity"
    77.         android:textColor="#FFFFFF"
    78.         android:textSize="16sp"
    79.         app:layout_constraintBottom_toBottomOf="parent"
    80.         app:layout_constraintTop_toTopOf="parent"
    81.         app:layout_constraintVertical_bias="0.05"
    82.         tools:layout_editor_absoluteX="0dp" />

    84.     <TextView
    85.         android:id="@+id/capturePhoto"
    86.         android:layout_width="wrap_content"
    87.         android:layout_height="wrap_content"
    88.         android:layout_marginBottom="84dp"
    89.         android:background="#8000CC33"
    90.         android:padding="7dp"
    91.         android:shadowColor="@android:color/darker_gray"
    92.         android:text="Deteksi"
    93.         android:textColor="@android:color/black"
    94.         android:textSize="30sp"
    95.         app:layout_constraintBottom_toBottomOf="parent"
    96.         app:layout_constraintLeft_toLeftOf="parent"
    97.         app:layout_constraintRight_toRightOf="parent" />

    99.     <TextView
    100.         android:id="@+id/prediction_bar"
    101.         android:layout_width="match_parent"
    102.         android:layout_height="wrap_content"
    103.         android:layout_marginBottom="63dp"
    104.         android:background="#9000CC33"
    105.         android:fontFamily="times"
    106.         android:text="HASIL PREDIKSI :"
    107.         android:textAlignment="center"
    108.         android:textColor="#000099"
    109.         android:textSize="16sp"
    110.         app:layout_constraintBottom_toBottomOf="parent" />

    112.     <TextView
    113.         android:id="@+id/result_bar"
    114.         android:layout_width="match_parent"
    115.         android:layout_height="wrap_content"
    116.         android:layout_marginBottom="0dp"
    117.         android:background="#9000CC33"
    118.         android:fontFamily="times"
    119.         android:text="@string/hasil_1_nhasil_2_nhasil_3"
    120.         android:textAlignment="center"
    121.         android:textColor="#000099"
    122.         android:textSize="16sp"
    123.         app:layout_constraintBottom_toBottomOf="parent" />

    125. </androidx.constraintlayout.widget.ConstraintLayout>
  33. Kemudian buat drawable resource file "gradient_pendeteksi.xml" yang digunakan untuk menambah warna latar belakang layout. Anda dapat melewati langkah ini jika tidak ingin menambahkan warna background (default warna putih). Jika ingin melewatinya anda tidak perlu membuat "gradient_pendeteksi.xml" dan hanya perlu menghapus baris program "android:background="@drawable/gradient_pendeteksi"". Jika ingin menambahkan warna background gradasi silahkan mengikutin langkah berikut.
  34. Setelah itu maka akan dibuat secara otomatis file resource-nya pada direktori app → res → drawable. Kemudian ubah source code-nya menjadi seperti ini. Untuk pengaturan warna dan efek gradasinya Anda bisa mengubahnya sendiri sesuai selera.
    35. Source code "gradient_pendeteksi.xml" :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <gradient
    4.         android:type="linear"
    5.         android:startColor="@android:color/holo_blue_bright"
    6.         android:centerColor="#FFFF66"
    7.         android:endColor="@android:color/holo_green_light"
    8.         android:angle="315"/>
    9. </shape>
  35. Selanjutnya buat nilai dari resources string untuk "process_time".
  36. Masukkan nilai string-nya seperti berikut dan klik "OK". Nilai string ini nantinya akan terus diupdate nilai waktunya seiring dilakukannya pendeteksian.
  37. Selanjutnya nilai string yang sudah dibuat pada direktori app → res → values → strings.xml diubah sesuai karakter yang disarankan oleh Android Studio.
  38. Selanjutnya buat nilai string untuk text "info". string ini digunakan untuk menampilkan informasi berupa karakter pada layout aplikasi Android.
  39. Selanjutnya buat string teks lagi untuk menampilkan Text View nilai probabilitas hasil deteksi.
  40. Kemudian menuju nilai string resources-nya dengan cara tekan tombol Ctrl+Klik kiri pada keyboard untuk mengubah nilai string-nya secara manual.
  41. Setelah itu ubah string-nya sesuai pada gambar
    42. Source code untuk string hasil prediksi deteksi :
    1. <string name="hasil_1_nhasil_2_nhasil_3"><b>Hasil 1</b>\nHasil 2\nHasil 3</string>
  42. Kembali lagi ke "activity_pendeteksi.xml" di sini terdapat baris kode yang jenis layout untuk kamera menggunakan library cameraview-ex milik google yang dimodifikasi oleh priyankvasa. Namun sumbernya masih tidak dikenal. Library tersebut sangat cocok digunakan untuk keperluan image processing menggunakan fitur kamera pada Android.
  43. Agar dapat menggunakannya, maka perlu ditambahkan implementation di dalam dependencies pada "build.gradle (Module: app)" seperti pada langkah 27 sebelumnya.
    44. Source code dependency untuk cameraview-ex :
    1. //menambah tampilan kamera
    2.     implementation "com.priyankvasa.android:cameraview-ex:3.5.1-alpha"
  44. Setelah ditambahkan dan disinkronisasi, maka library sudah dikenal.
  45. Sesudah itu kembali lagi menuju class "Pendeteksi.kt" untuk mengimpor library tersebut.
  46. Buat kelas baru lagi dengan nama "KlasifikasiDariGaleri.kt".
    47. Lengkapi source code-nya seperti berikut :
    1. class KlasifikasiDariGaleri(assetManager: AssetManager, modelPath: String, labelPath: String, inputSize: Int) {
    2.     private var interpreter: Interpreter
    3.     private var labellist: List<String>
    4.     private val inputsize: Int = inputSize
    5.     private val pixelsize: Int = 3
    6.     private val imagemean = 0
    7.     private val imagestd = 255.0f
    8.     private val maxresults = 3
    9.     private val threshold = 0.4f

    11.     data class Recognition(
    12.         var id: String = "",
    13.         var title: String = "",
    14.         var confidence: Float = 0F,
    15.         val percent: Float = confidence*100
    16.     )  {
    17.         override fun toString(): String {
    18.             return "Title = $title, Hasil Prediksi = $percent)"
    19.         }
    20.     }

    22.     init {
    23.         interpreter = Interpreter(loadModelFile(assetManager, modelPath))
    24.         labellist = loadLabelList(assetManager, labelPath)
    25.     }

    27.     private fun loadModelFile(assetManager: AssetManager, modelPath: String): MappedByteBuffer {
    28.         val fileDescriptor = assetManager.openFd(modelPath)
    29.         val inputStream = FileInputStream(fileDescriptor.fileDescriptor)
    30.         val fileChannel = inputStream.channel
    31.         val startOffset = fileDescriptor.startOffset
    32.         val declaredLength = fileDescriptor.declaredLength
    33.         return fileChannel.map(FileChannel.MapMode.READ_ONLY, startOffset, declaredLength)
    34.     }

    36.     private fun loadLabelList(assetManager: AssetManager, labelPath: String): List<String> {
    37.         return assetManager.open(labelPath).bufferedReader().useLines { it.toList() }

    39.     }

    41.     fun recognizeImage(bitmap: Bitmap): List<Recognition> {
    42.         val scaledBitmap = Bitmap.createScaledBitmap(bitmap, inputsize, inputsize, false)
    43.         val byteBuffer = convertBitmapToByteBuffer(scaledBitmap)
    44.         val result = Array(1) { FloatArray(labellist.size) }
    45.         interpreter.run(byteBuffer, result)
    46.         return getSortedResult(result)
    47.     }



    51.     private fun convertBitmapToByteBuffer(bitmap: Bitmap): ByteBuffer {
    52.         val byteBuffer = ByteBuffer.allocateDirect(4 * inputsize * inputsize * pixelsize)
    53.         byteBuffer.order(ByteOrder.nativeOrder())
    54.         val intValues = IntArray(inputsize * inputsize)

    56.         bitmap.getPixels(intValues, 0, bitmap.width, 0, 0, bitmap.width, bitmap.height)
    57.         var pixel = 0
    58.         for (i in 0 until inputsize) {
    59.             for (j in 0 until inputsize) {
    60.                 val `val` = intValues[pixel++]

    62.                 byteBuffer.putFloat((((`val`.shr(16)  and 0xFF) - imagemean) / imagestd))
    63.                 byteBuffer.putFloat((((`val`.shr(8) and 0xFF) - imagemean) / imagestd))
    64.                 byteBuffer.putFloat((((`val` and 0xFF) - imagemean) / imagestd))
    65.             }
    66.         }
    67.         return byteBuffer
    68.     }


    71.     private fun getSortedResult(labelProbArray: Array<FloatArray>): List<Recognition> {
    72.         Log.d("KlasifikasiDariGaleri", "List Size:(%d, %d, %d)".format(labelProbArray.size,labelProbArray[0].size,labellist.size))

    74.         val pq = PriorityQueue(
    75.             maxresults,
    76.             Comparator<Recognition> {
    77.                     (_, _, confidence1), (_, _, confidence2)
    78.                 -> confidence1.compareTo(confidence2) * -1
    79.             })

    81.         for (i in labellist.indices) {
    82.             val confidence = labelProbArray[0][i]
    83.             if (confidence >= threshold) {
    84.                 pq.add(Recognition("" + i,
    85.                     if (labellist.size > i) labellist[i] else "Unknown", confidence)
    86.                 )
    87.             }
    88.         }
    89.         Log.d("KlasifikasiDariGaleri", "pqsize:(%d)".format(pq.size))

    91.         val recognitions = ArrayList<Recognition>()
    92.         val recognitionsSize = pq.size.coerceAtMost(maxresults)
    93.         for (i in 0 until recognitionsSize) {
    94.             recognitions.add(pq.poll())
    95.         }
    96.         return recognitions
    97.     }
    98. }
  47. Buat lagi class "DeteksiDariGaleri.kt" dan tambahkan class tersebut ke manifest.
    48. Source code class "DeteksiDariGaleri.kt" :
    1. class DeteksiDariGaleri : AppCompatActivity() {
    2.     private lateinit var mClassifier: KlasifikasiDariGaleri
    3.     private lateinit var mBitmap: Bitmap

    5.     private val mGalleryRequestCode = 2

    7.     private val mInputSize = 224
    8.     private val mModelPath = "Klasifikasi_3_Varietas_Beras_MobileNet.tflite"
    9.     private val mLabelPath = "Klasifikasi_3_Varietas_Beras_MobileNet.txt"
    10.     private val mSamplePath = "basmathi.jpg"

    12.     private var lastProcessingTimeMs: Long = 0

    14.     @SuppressLint("SetTextI18n")
    15.     @RequiresApi(Build.VERSION_CODES.O)
    16.     override fun onCreate(savedInstanceState: Bundle?) {
    17.         super.onCreate(savedInstanceState)

    19.         if (supportActionBar != null) {
    20.             (supportActionBar as ActionBar).title = "Pendeteksi Varietas Beras"
    21.         }

    23.         requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
    24.         setContentView(R.layout.activity_import_gallery)
    25.         mClassifier = KlasifikasiDariGaleri(assets, mModelPath, mLabelPath, mInputSize)

    27.         resources.assets.open(mSamplePath).use {
    28.             mBitmap = BitmapFactory.decodeStream(it)
    29.             mBitmap = Bitmap.createScaledBitmap(mBitmap, mInputSize, mInputSize, true)
    30.             mPhotoImageView.setImageBitmap(mBitmap)
    31.         }

    33.         mGalleryButton.setOnClickListener {
    34.             val callGalleryIntent = Intent(Intent.ACTION_PICK)
    35.             callGalleryIntent.type = "image/*"
    36.             startActivityForResult(callGalleryIntent, mGalleryRequestCode)
    37.         }
    38.         mDetectButton.setOnClickListener {
    39.             val startTime = SystemClock.uptimeMillis()//menghitung waktu awal
    40.             val results = mClassifier.recognizeImage(mBitmap).firstOrNull()
    41.             mResultTextView.text= results?.title+"\n Probabilitas: "+results?.percent+"%"
    42.             lastProcessingTimeMs = SystemClock.uptimeMillis() - startTime//menghitung lamanya proses
    43.             val waktu = lastProcessingTimeMs.toString()//konversi ke string
    44.             delaytime.text = "$waktu ms "

    46.         }
    47.     }

    49.     @SuppressLint("MissingSuperCall", "SetTextI18n")
    50.     override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    51.         if(requestCode == mGalleryRequestCode) {
    52.             if (data != null) {
    53.                 val uri = data.data

    55.                 try {
    56.                     mBitmap = MediaStore.Images.Media.getBitmap(this.contentResolver, uri)
    57.                 } catch (e: IOException) {
    58.                     e.printStackTrace()
    59.                 }

    61.                 println("Selesai!")
    62.                 mBitmap = scaleImage(mBitmap)
    63.                 mPhotoImageView.setImageBitmap(mBitmap)

    65.             }
    66.         } else {
    67.             Toast.makeText(this, "Unrecognized request code", Toast.LENGTH_LONG).show()

    69.         }
    70.     }


    73.     fun scaleImage(bitmap: Bitmap?): Bitmap {
    74.         val orignalWidth = bitmap!!.width
    75.         val originalHeight = bitmap.height
    76.         val scaleWidth = mInputSize.toFloat() / orignalWidth
    77.         val scaleHeight = mInputSize.toFloat() / originalHeight
    78.         val matrix = Matrix()
    79.         matrix.postScale(scaleWidth, scaleHeight)
    80.         return Bitmap.createBitmap(bitmap, 0, 0, orignalWidth, originalHeight, matrix, true)
    81.     }
    82. }
  48. Kemudian buat layout-nya dengan nama "activity_import_gallery".
  49. Atur jenis layout-nya menjadi "ConstraintLayout" seperti pada gambar.
  50. Tambahkan source code berikut pada text editor di bawah "android:layout_height="match_parent"" kemudian tekan Alt+Enter untuk menambahkan library tools yang dibutuhkan.
    1. android:background="@drawable/gradient_pendeteksi"
    2.     tools:context=".DeteksiDariGaleri"
  51. Selanjutnya tambahkan source code berikut di bawah "tools:context=".DeteksiDariGaleri">".
    1. <TextView
    2.         android:id="@+id/delaytime"
    3.         android:layout_width="match_parent"
    4.         android:layout_height="wrap_content"
    5.         android:background="#CCFF6633"
    6.         android:padding="2dp"
    7.         android:fontFamily="times"
    8.         android:gravity="right"
    9.         android:text="@string/delay_time"
    10.         android:textAlignment="gravity"
    11.         android:textColor="#FFFF00"
    12.         android:textSize="18sp"
    13.         app:layout_constraintBottom_toBottomOf="parent"
    14.         app:layout_constraintTop_toTopOf="parent"
    15.         app:layout_constraintVertical_bias="0.0"
    16.         tools:layout_editor_absoluteX="0dp" />

    18.     <TextView
    19.         android:id="@+id/process_name_bar"
    20.         android:layout_width="match_parent"
    21.         android:layout_height="wrap_content"
    22.         android:padding="2dp"
    23.         android:fontFamily="times"
    24.         android:gravity="left"
    25.         android:text="  Waktu Proses Deteksi : "
    26.         android:textAlignment="gravity"
    27.         android:textColor="#FFFF00"
    28.         android:textSize="18sp"
    29.         app:layout_constraintBottom_toBottomOf="parent"
    30.         app:layout_constraintTop_toTopOf="parent"
    31.         app:layout_constraintVertical_bias="0.0"
    32.         tools:layout_editor_absoluteX="0dp" />

    34.     <TextView
    35.         android:id="@+id/hints_bar"
    36.         android:layout_width="match_parent"
    37.         android:layout_height="wrap_content"
    38.         android:background="#80000000"
    39.         android:fontFamily="times"
    40.         android:gravity="center"
    41.         android:padding="2dp"
    42.         android:text="@string/hints"
    43.         android:textAlignment="gravity"
    44.         android:textColor="#FFFFFF"
    45.         android:textSize="16sp"
    46.         app:layout_constraintBottom_toBottomOf="parent"
    47.         app:layout_constraintTop_toTopOf="parent"
    48.         app:layout_constraintVertical_bias="0.05"
    49.         tools:layout_editor_absoluteX="0dp" />

    51.     <Button
    52.         android:id="@+id/mGalleryButton"
    53.         android:layout_width="wrap_content"
    54.         android:layout_height="wrap_content"
    55.         android:layout_marginTop="0dp"
    56.         android:text="@string/buttonSelectPhoto"
    57.         android:textColor="@android:color/holo_green_dark"
    58.         android:textSize="18sp"
    59.         app:layout_constraintEnd_toEndOf="parent"
    60.         app:layout_constraintHorizontal_bias="0.5"
    61.         app:layout_constraintStart_toStartOf="parent"
    62.         app:layout_constraintTop_toBottomOf="@+id/hints_bar" />

    64.     <ImageView
    65.         android:id="@+id/mPhotoImageView"
    66.         android:layout_width="360dp"
    67.         android:layout_height="360dp"
    68.         android:contentDescription="@string/descriptionImage"
    69.         app:layout_constraintBottom_toTopOf="@+id/mDetectButton"
    70.         app:layout_constraintEnd_toEndOf="parent"
    71.         app:layout_constraintHorizontal_bias="0.5"
    72.         app:layout_constraintStart_toStartOf="parent"
    73.         app:layout_constraintTop_toBottomOf="@+id/mGalleryButton"
    74.         app:layout_constraintVertical_chainStyle="packed"
    75.         app:srcCompat="@android:color/darker_gray" />


    78.     <Button
    79.         android:id="@+id/mDetectButton"
    80.         android:layout_width="wrap_content"
    81.         android:layout_height="wrap_content"
    82.         android:layout_marginBottom="8dp"
    83.         android:background="#8000CC33"
    84.         android:padding="7dp"
    85.         android:shadowColor="@android:color/darker_gray"
    86.         android:text="Deteksi"
    87.         android:textColor="@android:color/black"
    88.         android:textSize="24sp"
    89.         app:layout_constraintBottom_toBottomOf="parent"
    90.         app:layout_constraintBottom_toTopOf="@+id/mResultTextView"
    91.         app:layout_constraintEnd_toEndOf="parent"
    92.         app:layout_constraintStart_toStartOf="parent" />

    94.     <TextView
    95.         android:id="@+id/mResultTextView"
    96.         android:layout_width="match_parent"
    97.         android:layout_height="wrap_content"
    98.         android:layout_marginBottom="0dp"
    99.         android:background="#9000CC33"
    100.         android:fontFamily="times"
    101.         android:text="@string/display_result"
    102.         android:textAlignment="center"
    103.         android:textColor="#000099"
    104.         android:textSize="16sp"
    105.         android:textStyle="bold"
    106.         app:layout_constraintBottom_toBottomOf="parent"
    107.         app:layout_constraintEnd_toEndOf="parent"
    108.         app:layout_constraintStart_toStartOf="parent" />
  52. Tambahkan lagi library skema layout untuk baris program "app".
  53. Selanjutnya buat nilai string untuk "delay_time" dan isi value-nya "… ms   ".
  54. Buat string untuk "hints" dan isikan value-nya dengan "Pilih Gambar Lalu Klik DETEKSI".
  55. Buat string untuk "buttonSelectPhoto", kemudian isi value-nya "Pilih Gambar".
  56. Buat string untuk "descriptionimage", isikan value-nya "Lihat untuk Menampilkan Gambar".
  57. Buat string untuk "display_result" dan isikan secara manual "<b>Hasil Prediksi</b>\n".
  58. Kembali ke "DeteksiDariGaleri.kt" untuk meingimpor library import gallery.
  59. Setelah itu buat class baru "SplashScreen" yang digunakan untuk menampilkan layout awal memulai ketika aplikasi Android baru dijalankan.
    60. Source code "SplashScreen.kt" :
    1. class SplashScreen : AppCompatActivity() {

    3.     override fun onCreate(savedInstanceState: Bundle?) {
    4.         super.onCreate(savedInstanceState)

    6.         //menghilangkan ActionBar
    7.         this.requestWindowFeature(Window.FEATURE_NO_TITLE)
    8.         setContentView(R.layout.activity_splash_screen)

    10.         //tvSplash = findViewById(R.id.tvSplash) as TextView

    12.         //setelah loading maka akan langsung berpindah ke MainActivity
    13.         val handler = Handler()
    14.         handler.postDelayed(Runnable {
    15.             startActivity(Intent(applicationContext, MainActivity::class.java))
    16.             finish()
    17.         }, 3000L) //3000 L = 3 detik

    19.     }
    20. }
  60. Kemudian tambahkan layout-nya "activity_splash_screen".
  61. Atur jenis layout-nya seperti pada gambar di bawah ini.
    62. Lengkapi source code-nya seperti berikut :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:id="@+id/activity_splash_screen"
    8.     android:background="@drawable/gradient_splash_screen"
    9.     android:gravity="center"
    10.     tools:context=".SplashScreen">

    12.     <TextView
    13.         android:id="@+id/tvSplash"
    14.         android:layout_width="match_parent"
    15.         android:layout_height="wrap_content"
    16.         android:layout_alignParentStart="true"
    17.         android:layout_alignParentLeft="true"
    18.         android:layout_alignParentTop="true"
    19.         android:layout_marginTop="280dp"
    20.         android:fontFamily="sans-serif-smallcaps"
    21.         android:text="Klasifikasi Varietas Beras"
    22.         android:textAlignment="center"
    23.         android:textColor="@android:color/holo_green_dark"
    24.         android:textSize="24sp"
    25.         android:textStyle="bold" />

    27.     <ImageView
    28.         android:id="@+id/logo_kvb"
    29.         android:layout_width="match_parent"
    30.         android:layout_height="100dp"
    31.         android:layout_alignParentStart="true"
    32.         android:layout_alignParentLeft="true"
    33.         android:layout_alignParentTop="true"
    34.         android:layout_marginTop="176dp"
    35.         android:scaleType="centerInside"
    36.         android:src="@drawable/logo_kvb" />

    38.     <ImageView
    39.         android:id="@+id/logo_tflite"
    40.         android:layout_width="match_parent"
    41.         android:layout_height="20dp"
    42.         android:layout_alignParentStart="true"
    43.         android:layout_alignParentLeft="true"
    44.         android:layout_alignParentTop="true"
    45.         android:layout_marginTop="320dp"
    46.         android:scaleType="centerInside"
    47.         android:src="@drawable/tflite" />

    49.     <ProgressBar
    50.         android:id="@+id/progresBar"
    51.         style="@style/Widget.AppCompat.ProgressBar"
    52.         android:layout_width="wrap_content"
    53.         android:layout_height="wrap_content"
    54.         android:layout_alignParentBottom="true"
    55.         android:layout_centerHorizontal="true"
    56.         android:layout_marginBottom="60dp" />

    58. </RelativeLayout>
  62. Tambahkan warna latar belakangnya jika Anda mau, jika tidak lewati saja.
    63. Kemudian ubah source code-nya seperti ini :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <gradient
    4.         android:type="linear"
    5.         android:startColor="@android:color/holo_blue_bright"
    6.         android:endColor="@android:color/holo_green_light"
    7.         android:angle="-90"/>
    8. </shape>
  63. Tambahkan juga logonya jika Anda mau, jika tidak hapus baris program ini.
  64. Untuk menambahkan logo maka copy gambar dari Windows Explorer.
  65. Kemudian paste-kan di direktori app → res → drawable → (di sini).
  66. Selanjutnya pilih yang hanya drawable saja dan klik "OK".
  67. Setelah itu samakan nama logonya dengan yang di layout.
  68. Jika sukses maka tampilannya akan seperti pada gambar di bawah.
  69. Jika Anda ingin menambahkan logo lain di bawahnya misal "TensorFlow Lite" maka langkahnya sama saja seperti pada langkah 63-68 di atas.
  70. Sesudah itu buat class "Tentang.kt" dan tambahkan juga ke manifest. Class pada aktivitas ini berfungsi untuk menampilkan halaman informasi aplikasi Android.
  71. Buat layout-nya dengan nama "activity_tentang".
  72. Atur jenis layout-nya menjadi "ScrollView" agar dapat digulir ke atas/bawah.
  73. Kemudian lengkapi source code-nya seperti di bawah ini :
    1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    2.     xmlns:app="http://schemas.android.com/apk/res-auto"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     android:background="@drawable/gradient_tentang"
    7.     android:textAlignment="center"
    8.     tools:context=".Tentang">

    10.     <LinearLayout
    11.         android:layout_width="match_parent"
    12.         android:layout_height="wrap_content"
    13.         android:orientation="vertical">
    14.         <TextView
    15.             android:layout_width="match_parent"
    16.             android:layout_height="wrap_content"
    17.             android:textSize="24sp"
    18.             android:fontFamily="times"
    19.             android:text="Klasifikasi Varietas Beras"
    20.             android:background="#20000000"
    21.             android:textAlignment="center"
    22.             android:layout_marginLeft="0dp"
    23.             android:layout_marginRight="0dp"
    24.             android:layout_marginTop="16dp"
    25.             android:layout_marginBottom="8dp"
    26.             android:textColor="@android:color/holo_blue_dark"/>
    27.         <TextView
    28.             android:layout_width="match_parent"
    29.             android:layout_height="wrap_content"
    30.             android:text="Versi 2.0"
    31.             android:fontFamily="times"
    32.             android:background="#80FFFFFF"
    33.             android:textSize="16sp"
    34.             android:textAlignment="center"
    35.             android:layout_marginLeft="16dp"
    36.             android:layout_marginRight="16dp"
    37.             android:layout_marginBottom="16dp"
    38.             android:textColor="@android:color/holo_green_dark"/>
    39.         <TextView
    40.             android:textSize="14dp"
    41.             android:layout_width="match_parent"
    42.             android:layout_height="wrap_content"
    43.             android:text="@string/update"
    44.             android:layout_marginLeft="16dp"
    45.             android:layout_marginRight="16dp"
    46.             android:layout_marginBottom="16dp"
    47.             android:lineSpacingMultiplier="1"
    48.             android:textColor="#000099"/>
    49.         <TableLayout
    50.             android:layout_width="match_parent"
    51.             android:layout_height="wrap_content"
    52.             android:layout_marginLeft="16dp"
    53.             android:layout_marginRight="16dp"
    54.             android:layout_marginBottom="16dp">
    55.             <TableRow
    56.                 android:layout_width="match_parent"
    57.                 android:layout_height="wrap_content"
    58.                 android:layout_marginBottom="8dp">
    59.                 <TextView
    60.                     android:layout_width="wrap_content"
    61.                     android:layout_height="wrap_content"
    62.                     android:textSize="14sp"
    63.                     android:layout_marginRight="16dp"
    64.                     android:textColor="#000099"
    65.                     android:text="1. "/>
    66.                 <TextView
    67.                     android:layout_width="match_parent"
    68.                     android:layout_height="wrap_content"
    69.                     android:textSize="14sp"
    70.                     android:layout_weight="1"
    71.                     android:text="@string/content_update_1"
    72.                     android:textColor="#000099"/>
    73.             </TableRow>
    74.             <TableRow
    75.                 android:layout_width="match_parent"
    76.                 android:layout_height="wrap_content"
    77.                 android:layout_marginBottom="8dp">
    78.                 <TextView
    79.                     android:layout_width="wrap_content"
    80.                     android:layout_height="wrap_content"
    81.                     android:textSize="14sp"
    82.                     android:layout_marginRight="16dp"
    83.                     android:textColor="#000099"
    84.                     android:text="2. "/>
    85.                 <TextView
    86.                     android:layout_width="match_parent"
    87.                     android:layout_height="wrap_content"
    88.                     android:textSize="14sp"
    89.                     android:layout_weight="1"
    90.                     android:text="@string/content_update_2"
    91.                     android:textColor="#000099"/>
    92.             </TableRow>
    93.         </TableLayout>
    94.         <TextView
    95.             android:layout_width="match_parent"
    96.             android:layout_height="wrap_content"
    97.             android:text="@string/content_about"
    98.             android:layout_marginLeft="16dp"
    99.             android:layout_marginRight="16dp"
    100.             android:layout_marginBottom="16dp"
    101.             android:lineSpacingMultiplier="1"
    102.             android:textColor="@android:color/black"
    103.             android:autoLink="all"
    104.             android:linksClickable="true"/>
    105.         <TextView
    106.             android:layout_width="match_parent"
    107.             android:layout_height="wrap_content"
    108.             android:textAlignment="center"
    109.             android:text="Author : Vidi Fitriansyah Hidarlan"
    110.             android:layout_marginTop="50dp"
    111.             app:layout_constraintBottom_toBottomOf="parent"
    112.             app:layout_constraintLeft_toLeftOf="parent"
    113.             app:layout_constraintRight_toRightOf="parent"
    114.             android:textColor="@android:color/black"/>
    115.     </LinearLayout>
    116. </ScrollView>
  74. Buat warna latar belakangnya seperti berikut jika diinginkan.
  75. Ubah source code "gradient_tentang.xml"nya menjadi seperti berikut :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <gradient
    4.         android:type="linear"
    5.         android:startColor="@android:color/holo_blue_bright"
    6.         android:centerColor="#FFFF66"
    7.         android:endColor="@android:color/holo_green_light"
    8.         android:angle="225"/>
    9. </shape>
  76. Selanjutnya buat string untuk "update" kemudian edit value-nya pada strings.xml.
  77. Lakukan hal yang sama untuk membuat nilai resources string dari "content_update_1","content_update_2","content_about" dan isikan nilai string-nya masing-masing dengan source code di bawah seperti pada gambar berikut.
    78. Nilai string yang diperlukan :
    1. <string name="content_about">Aplikasi ini dibuat hanya untuk klasifikasi tiga varietas beras (Basmathi, IR-64, dan Ketan) menggunakan sebuah metode CNN (<i>Convolutional Neural Network</i>) dengan model arsitektur MobileNetV1. Arsitektur tersebut dilatih pada <i>Google Colaboratory</i>. Setelah dilatih disimpan modelnya dan dikonversi menggunakan <i>TensorFlow Lite</i>. Setelah dikonversi diunduh <i>file</i> modelnya dan di-<i>import</i> untuk diimplementasikan pada <i>smartphone Android</i> agar dapat melakukan klasifikasi varietas beras secara langsung menggunakan sebuah perangkat Android.\n\n
    3.         Pada aplikasi ini juga diatur secara otomatis penggunaan <i>flash</i> kameranya agar perubahan cahaya yang ada tidak berbeda signifikan ketika berada di luar ruangan yang banyak cahaya maupun di dalam ruangan yang minim cahaya karena cahaya <i>flash</i> kamera <i>smartphone</i> dapat menyala dan mati secara otomatis berdasarkan intensitas cahaya yang ada. Hal itu dapat mempermudah pengguna untuk mendeteksi varietas berasnya.\n\n
    4.         <i>Sourcecode</i> program pada <i>Google Colaboratory</i> dan <i>Android Studio</i> : https://github.com/Soedirman-Machine-Learning/rice-varieties-classification\natau\nhttps://github.com/Vidi005/Klasifikasi-3-Varietas-Beras</string>
    5. <string name="update"><b>Pembaruan Fitur :</b></string>
    6. <string name="content_update_1">Versi 1.0\n- Klasifikasi 3 varietas beras dengan kamera\n- Memperbaiki <i>bug force closed</i>\n- Mengubah aspek rasio kamera menjadi 4:3\n- Menambah fitur waktu respon deteksi</string>
    7. <string name="content_update_2">Versi 2.0\n- Menambah fitur deteksi dengan impor galeri</string>
  78. Sehingga tampilan preview pada layout tentang akan seperti ini.
  79. Selanjutnya kita mengedit tampilan layout untuk "activity_bantuan.xml". Buat gambar untuk background-nya jika Anda mau dan letakan di dalam folder drawable.
  80. Lengkapi source code-nya seperti di bawah ini :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     android:background="@drawable/background"
    7.     tools:context=".Bantuan">

    9.     <LinearLayout
    10.         android:layout_width="match_parent"
    11.         android:layout_height="wrap_content"
    12.         android:orientation="vertical">
    13.         <TextView
    14.             android:layout_width="match_parent"
    15.             android:layout_height="wrap_content"
    16.             android:textSize="20sp"
    17.             android:textStyle="bold"
    18.             android:fontFamily="times"
    19.             android:text="1. Cara Kerja Aplikasi"
    20.             android:layout_marginLeft="16dp"
    21.             android:layout_marginRight="16dp"
    22.             android:layout_marginTop="16dp"
    23.             android:layout_marginBottom="8dp"
    24.             android:textColor="@android:color/holo_green_dark"/>
    25.         <TextView
    26.             android:layout_width="match_parent"
    27.             android:layout_height="wrap_content"
    28.             android:text="@string/content_work"
    29.             android:background="#80FF6600"
    30.             android:layout_marginLeft="16dp"
    31.             android:layout_marginRight="16dp"
    32.             android:layout_marginBottom="16dp"
    33.             android:lineSpacingMultiplier="1"
    34.             android:textColor="#FFFFFF"/>
    35.         <TextView
    36.             android:layout_width="match_parent"
    37.             android:layout_height="wrap_content"
    38.             android:textSize="20sp"
    39.             android:textStyle="bold"
    40.             android:fontFamily="times"
    41.             android:text="2. Cara Menggunakan"
    42.             android:layout_marginLeft="16dp"
    43.             android:layout_marginRight="16dp"
    44.             android:layout_marginTop="16dp"
    45.             android:layout_marginBottom="8dp"
    46.             android:textColor="@android:color/holo_green_dark"/>
    47.         <TableLayout
    48.             android:layout_width="match_parent"
    49.             android:layout_height="wrap_content"
    50.             android:layout_marginLeft="16dp"
    51.             android:layout_marginRight="16dp"
    52.             android:layout_marginBottom="16dp">
    53.             <TableRow
    54.                 android:layout_width="match_parent"
    55.                 android:layout_height="wrap_content"
    56.                 android:layout_marginBottom="8dp">
    57.                 <TextView
    58.                     android:layout_width="wrap_content"
    59.                     android:layout_height="wrap_content"
    60.                     android:textSize="14sp"
    61.                     android:layout_marginRight="16dp"
    62.                     android:textColor="#FFFFFF"
    63.                     android:text="1. "/>
    64.                 <TextView
    65.                     android:layout_width="match_parent"
    66.                     android:layout_height="wrap_content"
    67.                     android:textSize="14sp"
    68.                     android:layout_weight="1"
    69.                     android:text="@string/content_step_1"
    70.                     android:textColor="#FFFFFF"/>
    71.             </TableRow>
    72.             <TableRow
    73.                 android:layout_width="match_parent"
    74.                 android:layout_height="wrap_content"
    75.                 android:layout_marginBottom="8dp">
    76.                 <TextView
    77.                     android:layout_width="wrap_content"
    78.                     android:layout_height="wrap_content"
    79.                     android:textSize="14sp"
    80.                     android:layout_marginRight="16dp"
    81.                     android:textColor="#FFFFFF"
    82.                     android:text="2. "/>
    83.                 <TextView
    84.                     android:layout_width="match_parent"
    85.                     android:layout_height="wrap_content"
    86.                     android:textSize="14sp"
    87.                     android:layout_weight="1"
    88.                     android:text="@string/content_step_2"
    89.                     android:textColor="#FFFFFF"/>
    90.             </TableRow>
    91.             <TableRow
    92.                 android:layout_width="match_parent"
    93.                 android:layout_height="wrap_content"
    94.                 android:layout_marginBottom="8dp">
    95.                 <TextView
    96.                     android:layout_width="wrap_content"
    97.                     android:layout_height="wrap_content"
    98.                     android:textSize="14sp"
    99.                     android:layout_marginRight="16dp"
    100.                     android:textColor="#FFFFFF"
    101.                     android:text="3. "/>
    102.                 <TextView
    103.                     android:layout_width="match_parent"
    104.                     android:layout_height="wrap_content"
    105.                     android:textSize="14sp"
    106.                     android:layout_weight="1"
    107.                     android:text="@string/content_step_3"
    108.                     android:textColor="#FFFFFF"/>
    109.             </TableRow>
    110.             <TableRow
    111.                 android:layout_width="match_parent"
    112.                 android:layout_height="wrap_content"
    113.                 android:layout_marginBottom="8dp">
    114.                 <TextView
    115.                     android:layout_width="wrap_content"
    116.                     android:layout_height="wrap_content"
    117.                     android:textSize="14sp"
    118.                     android:layout_marginRight="16dp"
    119.                     android:textColor="#FFFFFF"
    120.                     android:text="4. "/>
    121.                 <TextView
    122.                     android:layout_width="match_parent"
    123.                     android:layout_height="wrap_content"
    124.                     android:textSize="14sp"
    125.                     android:layout_weight="1"
    126.                     android:text="@string/content_step_4"
    127.                     android:textColor="#FFFFFF"/>
    128.             </TableRow>
    129.             <TableRow
    130.                 android:layout_width="match_parent"
    131.                 android:layout_height="wrap_content"
    132.                 android:layout_marginBottom="8dp">
    133.                 <TextView
    134.                     android:layout_width="wrap_content"
    135.                     android:layout_height="wrap_content"
    136.                     android:textSize="14sp"
    137.                     android:layout_marginRight="16dp"
    138.                     android:textColor="#FFFFFF"
    139.                     android:text="5. "/>
    140.                 <TextView
    141.                     android:layout_width="match_parent"
    142.                     android:layout_height="wrap_content"
    143.                     android:textSize="14sp"
    144.                     android:layout_weight="1"
    145.                     android:text="@string/content_step_5"
    146.                     android:textColor="#FFFFFF"/>
    147.             </TableRow>
    148.             <TableRow
    149.                 android:layout_width="match_parent"
    150.                 android:layout_height="wrap_content"
    151.                 android:layout_marginBottom="8dp">
    152.                 <TextView
    153.                     android:layout_width="wrap_content"
    154.                     android:layout_height="wrap_content"
    155.                     android:textSize="14sp"
    156.                     android:layout_marginRight="16dp"
    157.                     android:textColor="#FFFFFF"
    158.                     android:text="6. "/>
    159.                 <TextView
    160.                     android:layout_width="match_parent"
    161.                     android:layout_height="wrap_content"
    162.                     android:textSize="14sp"
    163.                     android:layout_weight="1"
    164.                     android:text="@string/content_step_6"
    165.                     android:textColor="#FFFFFF"/>
    166.             </TableRow>
    167.             <TableRow
    168.                 android:layout_width="match_parent"
    169.                 android:layout_height="wrap_content"
    170.                 android:layout_marginBottom="8dp">
    171.                 <TextView
    172.                     android:layout_width="wrap_content"
    173.                     android:layout_height="wrap_content"
    174.                     android:textSize="14sp"
    175.                     android:layout_marginRight="16dp"
    176.                     android:textColor="#FFFFFF"
    177.                     android:text="7. "/>
    178.                 <TextView
    179.                     android:layout_width="match_parent"
    180.                     android:layout_height="wrap_content"
    181.                     android:textSize="14sp"
    182.                     android:layout_weight="1"
    183.                     android:text="@string/content_step_7"
    184.                     android:textColor="#FFFFFF"/>
    185.             </TableRow>
    186.         </TableLayout>
    187.     </LinearLayout>
    188. </ScrollView>
  81. Buat string untuk "content_work", masukkan value-nya kosong saja karena nanti akan dimasukkan secara manual ke dalam "strings.xml".
  82. Lakukan hal yang sama pada string "content_step_1" sampai dengan "content_step_7" seperti pada langkah 81. Kemudian isi masing-masing nilai value-nya seperti ini.
    83. Nilai string untuk "content_step_1" sampai "content step_7" :
    1. <string name="content_work">Aplikasi ini bekerja dengan cara mengambil citra/gambar obyek dari varietas beras menggunakan kamera <i>smartphone</i> atau mengimpor gambar dari galeri foto yang sudah tersimpan. Setelah itu diekstrak fitur dari piksel obyek tersebut dan diubah ke dalam bentuk <i>array</i> dengan ukuran piksel 224 x 224 dengan format gambar berwarna (RGB). Kemudian dilatih dan diproses menggunakan model yang sudah dilatih sebelumnya sehingga dapat diprediksi hasil keluaran dari varietas beras yang dideteksi.</string>
    2. <string name="content_step_1">Buka Aplikasi Klasifikasi Varietas Beras kemudian pilih menu "DETEKSI BERAS DENGAN KAMERA" untuk klasifikasi secara langsung</string>
    3. <string name="content_step_2">Setelah terbuka menu tersebut arahkan kamera ke obyek varietas beras yang ingin dideteksi (jarak kamera dengan obyek sekitar 10 cm), kemudian klik/tap tombol "Deteksi"</string>
    4. <string name="content_step_3">Hasil prediksi akan muncul beberapa saat setelah menekan tombol "Deteksi" di bagian bawah layar dalam persentase (% diurutkan dari yang tertinggi). Persentase tertinggi merupakan hasil prediksi yang paling mendekati/mirip</string>
    5. <string name="content_step_4">Buka menu "DETEKSI BERAS DARI GALERI" jika ingin mengklasifikasi secara manual dengan mengimpor gambar yang sudah tersimpan di galeri foto</string>
    6. <string name="content_step_5">Klik tombol "PILIH GAMBAR" dan cari gambar obyek beras yang ingin dideteksi</string>
    7. <string name="content_step_6">Selanjutnya tekan tombol DETEKSI dan hasil prediksinya akan muncul beberapa saat setelah menekannya di bagian bawah layar</string>
    8. <string name="content_step_7">Jika Anda ingin mengetahui penjelasan singkat tiap varietas beras pilih menu "DESKRIPSI VARIETAS BERAS, Menu "BANTUAN" untuk mengetahui cara penggunaan aplikasi ini, dan Menu "TENTANG APLIKASI" sebagai informasi pembuatan aplikasi ini.</string>
  83. Maka tampilan layout-nya akan seperti berikut.
  84. Kemudian kembali lagi ke "activity_deskripsi.xml" untuk mengedit layout-nya. Lengkapi source code programnya seperti di bawah ini.
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:background="@drawable/background"
    8.     tools:context=".Deskripsi">

    10.     <LinearLayout
    11.         android:layout_width="match_parent"
    12.         android:layout_height="wrap_content"
    13.         android:orientation="vertical">
    14.         <TextView
    15.             android:layout_width="match_parent"
    16.             android:layout_height="wrap_content"
    17.             android:textSize="26sp"
    18.             android:fontFamily="times"
    19.             android:text="Deskripsi Tiga Varietas Beras (Basmathi, IR-64, dan Ketan)"
    20.             android:layout_marginLeft="16dp"
    21.             android:layout_marginRight="16dp"
    22.             android:layout_marginTop="16dp"
    23.             android:layout_marginBottom="8dp"
    24.             android:textColor="@android:color/holo_blue_dark"/>
    25.         <TextView
    26.             android:layout_width="match_parent"
    27.             android:layout_height="wrap_content"
    28.             android:textStyle="bold"
    29.             android:text="1. Varietas Beras Basmathi"
    30.             android:textSize="20sp"
    31.             android:layout_marginLeft="16dp"
    32.             android:layout_marginRight="16dp"
    33.             android:layout_marginBottom="16dp"
    34.             android:textColor="@android:color/holo_green_dark"/>
    35.         <FrameLayout
    36.             android:layout_width="match_parent"
    37.             android:layout_height="wrap_content">

    39.             <ImageView
    40.                 android:layout_width="match_parent"
    41.                 android:layout_height="wrap_content"
    42.                 android:adjustViewBounds="true"
    43.                 android:scaleType="fitCenter"
    44.                 android:src="@drawable/basmathi" />
    45.         </FrameLayout>
    46.         <TextView
    47.             android:layout_width="match_parent"
    48.             android:layout_height="wrap_content"
    49.             android:text="@string/content_basmathi"
    50.             android:background="#60FFFFFF"
    51.             android:layout_marginLeft="16dp"
    52.             android:layout_marginRight="16dp"
    53.             android:layout_marginBottom="16dp"
    54.             android:lineSpacingMultiplier="1"
    55.             android:textColor="#FFFFFF"
    56.             android:autoLink="all"
    57.             android:linksClickable="true"/>

    59.         <TextView
    60.             android:layout_width="match_parent"
    61.             android:layout_height="wrap_content"
    62.             android:textStyle="bold"
    63.             android:text="2. Varietas Beras IR-64"
    64.             android:textSize="20sp"
    65.             android:layout_marginLeft="16dp"
    66.             android:layout_marginRight="16dp"
    67.             android:layout_marginBottom="16dp"
    68.             android:textColor="@android:color/holo_green_dark"/>
    69.         <FrameLayout
    70.             android:layout_width="match_parent"
    71.             android:layout_height="wrap_content">

    73.             <ImageView
    74.                 android:layout_width="match_parent"
    75.                 android:layout_height="wrap_content"
    76.                 android:adjustViewBounds="true"
    77.                 android:scaleType="fitCenter"
    78.                 android:src="@drawable/ir64" />
    79.         </FrameLayout>
    80.         <TextView
    81.             android:layout_width="match_parent"
    82.             android:layout_height="wrap_content"
    83.             android:text="@string/content_ir64"
    84.             android:background="#60FFFFFF"
    85.             android:layout_marginLeft="16dp"
    86.             android:layout_marginRight="16dp"
    87.             android:layout_marginBottom="16dp"
    88.             android:lineSpacingMultiplier="1"
    89.             android:textColor="#FFFFFF"/>

    91.         <TextView
    92.             android:layout_width="match_parent"
    93.             android:layout_height="wrap_content"
    94.             android:textStyle="bold"
    95.             android:text="3. Varietas Beras Ketan"
    96.             android:textSize="20sp"
    97.             android:layout_marginLeft="16dp"
    98.             android:layout_marginRight="16dp"
    99.             android:layout_marginBottom="16dp"
    100.             android:textColor="@android:color/holo_green_dark"/>
    101.         <FrameLayout
    102.             android:layout_width="match_parent"
    103.             android:layout_height="wrap_content">

    105.             <ImageView
    106.                 android:layout_width="match_parent"
    107.                 android:layout_height="wrap_content"
    108.                 android:adjustViewBounds="true"
    109.                 android:scaleType="fitCenter"
    110.                 android:src="@drawable/ketan" />
    111.         </FrameLayout>
    112.         <TextView
    113.             android:layout_width="match_parent"
    114.             android:layout_height="wrap_content"
    115.             android:text="@string/content_ketan"
    116.             android:background="#60FFFFFF"
    117.             android:layout_marginLeft="16dp"
    118.             android:layout_marginRight="16dp"
    119.             android:layout_marginBottom="16dp"
    120.             android:lineSpacingMultiplier="1"
    121.             android:textColor="#FFFFFF"
    122.             android:autoLink="all"
    123.             android:linksClickable="true"/>
    124.     </LinearLayout>
    125. </ScrollView>
  85. Kemudian masukkan gambar masing-masing jenis berasnya ke dalam folder drawable.
  86. Selain itu juga buat nilai string-nya masing-masing jenis beras.
  87. Isikan masing-masing nilai string-nya pada "string.xml".
    88. Nilai masing-masing string yang diperlukan :
    1. <string name="content_basmathi">Beras basmathi bersal dari negara india/pakistan, beras basmathi berasal dari bahasa sanskerta ‘basmathi’ artinya berarti harum atau wangi dalam bahasa india ia juga mempunyai maksud ”soft rice” yaitu lembut.\n
    2.             Beras ini akan melar memanjang butiran, sedikit pera, mudah terurai butiran berasnya dan aromanya sangat harum, beras ini memang aromanya sangat harum. Keistimewaan lainnya, butiran atau buliran beras ini panjang dan kecil melebihi ukuran beras yang biasanya agak pendek dan bulat.\n
    3.             Sumber : https://www.asshidiqaqiqah.com/kandungan-kandungan-beras-basmati/</string>
    4. <string name="content_ir64">Beras IR 64 merupakan salah satu jenis varietas padi sawah yang memiliki bentuk tegak, tinggi sekitar 115-126 cm. Gabahnya berbentuk ramping dan panjang dan berwarna kuning bersih. Padi jenis ini cocok ditanam di daerah lahan sawah irigasi dataran rendah sampai sedang.\n
    5.             Beras IR 64 adalah jenis beras yang pulen jika dimasak menjadi nasi karena memiliki kadar amilosa sebanyak 23%. Bobot beras per seribu butir beras IR64 adalah 24,1 gram.\n
    6.             Sumber : Suprihatno, B, Daradjat, dkk. 2010. Deskripsi Varietas Padi. Balai Besar Penelitian Tanaman Padi.\n</string>
    7. <string name="content_ketan">Beras ketan putih (Oryza sativa glutinosa) merupakan salah satu varietas padi yang termasuk dalam famili Graminae.\n
    8.             Butir beras sebagian besar terdiri dari zat pati sekitar 80-85% yang terdapat dalam endosperma yang tersusun oleh granula-granula pati yang berukuran 3-10 milimikron. Beras ketan juga mengandung vitamin (terutama pada bagian aleuron), mineral dan air. Dari komposisi kimiawinya diketahui bahwa karbohidrat penyusun utama beras ketan adalah pati. Pati merupakan karbohidrat polimer glukosa yang mempunyai dua struktur yakni amilosa dan amilopektin.\n
    9.             Sumber : http://www.alatcetakrengginang.com/2012/02/beras-ketan-sifat-fisika-kimianya.html</string>
  88. Sehingga tampilan layout-nya akan seperti berikut.
  89. Sesudah itu kita masuk ke tahap pembuatan intent untuk membuat tombol menu yang dapat berpindah menuju ke aktivitas lainnya. Untuk membuat intent pada Android perlu ditambahkan "View.OnClickListener" pada class "MainActivity.kt" yang berfungsi mendeteksi adanya penekanan tombol pada suatu aktivitas yang sudah dibuat.
  90. Kemudian tambahkan pada fungsi "onCreate" untuk memperkenalkan setiap tombol yang dibuat sesuai dengan nama id-nya masing-masing yang dipanggil pada layout "activity_main.xml". Selain itu juga dibuat fungsi untuk menambahkan kejadian "onClick" pada masing-masing tombol yang sudah dibuat. Selain itu tambahkan juga pada fungsi "onClick" untuk memindahkan suatu intent ketika adanya kondisi penekanan tombol.
    91. Source code "MainActivity.kt" :
    1. class MainActivity : AppCompatActivity(), View.OnClickListener {

    3.     override fun onCreate(savedInstanceState: Bundle?) {
    4.         super.onCreate(savedInstanceState)
    5.         setContentView(R.layout.activity_main)
    6.         //memperkenalkan button yang sudah ditambahkan di layout activity_main.xml
    7.         val btnPendeteksi: Button = findViewById(R.id.btn_move_detection)
    8.         //menambahkan event onClick pada button btnMoveDetection
    9.         btnPendeteksi.setOnClickListener(this)

    11.         val btnImporGaleri: Button = findViewById(R.id.btn_move_import)
    12.         btnImporGaleri.setOnClickListener(this)

    14.         val btnDeskripsi: Button = findViewById(R.id.btn_move_description)
    15.         btnDeskripsi.setOnClickListener(this)

    17.         val btnBantuan: Button = findViewById(R.id.btn_move_help)
    18.         btnBantuan.setOnClickListener(this)

    20.         val btnTentang: Button = findViewById(R.id.btn_move_about)
    21.         btnTentang.setOnClickListener(this)
    22.     }
    23.     override fun onClick(v: View) {
    24.         when (v.id) {
    25.             R.id.btn_move_detection -> {
    26.                 //menambahkan suatu Intent pada method onClick()
    27.                 val moveIntent = Intent(this@MainActivity, Pendeteksi::class.java)
    28.                 startActivity(moveIntent)
    29.             }
    30.             R.id.btn_move_import -> {
    31.                 val moveIntent = Intent(this@MainActivity, DeteksiDariGaleri::class.java)
    32.                 startActivity(moveIntent)
    33.             }
    34.             R.id.btn_move_description -> {
    35.                 val moveIntent = Intent(this@MainActivity, Deskripsi::class.java)
    36.                 startActivity(moveIntent)
    37.             }
    38.             R.id.btn_move_help -> {
    39.                 val moveIntent = Intent(this@MainActivity, Bantuan::class.java)
    40.                 startActivity(moveIntent)
    41.             }
    42.             R.id.btn_move_about -> {
    43.                 val moveIntent = Intent(this@MainActivity, Tentang::class.java)
    44.                 startActivity(moveIntent)
    45.             }
    46.         }
    47.     }
    48. }
  91. Selanjutnya menuju layout "activity_main.xml" ganti jenis layout-nya menjadi "LinearLayout" dan lengkapi source code-nya seperti di bawah ini.
    92. Source code "activity_main.xml" :
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     tools:context=".MainActivity"
    7.     android:orientation="vertical"
    8.     android:background="@drawable/background"
    9.     android:padding="16dp">

    11.     <Button
    12.         android:id="@+id/btn_move_detection"
    13.         android:layout_width="match_parent"
    14.         android:layout_height="wrap_content"
    15.         android:layout_marginTop="64dp"
    16.         android:layout_marginBottom="32dp"
    17.         android:textColor="@android:color/holo_green_dark"
    18.         android:text="@string/pendeteksi"
    19.         android:textStyle="bold"/>

    21.     <Button
    22.         android:id="@+id/btn_move_import"
    23.         android:layout_width="match_parent"
    24.         android:layout_height="wrap_content"
    25.         android:layout_marginBottom="32dp"
    26.         android:textColor="@android:color/holo_green_dark"
    27.         android:text="@string/import_gallery"
    28.         android:textStyle="bold"/>

    30.     <Button
    31.         android:id="@+id/btn_move_description"
    32.         android:layout_width="match_parent"
    33.         android:layout_height="wrap_content"
    34.         android:layout_marginBottom="32dp"
    35.         android:textColor="@android:color/holo_green_dark"
    36.         android:text="@string/deskripsi"
    37.         android:textStyle="bold"/>

    39.     <Button
    40.         android:id="@+id/btn_move_help"
    41.         android:layout_width="match_parent"
    42.         android:layout_height="wrap_content"
    43.         android:layout_marginBottom="32dp"
    44.         android:textColor="@android:color/holo_green_dark"
    45.         android:text="@string/bantuan"
    46.         android:textStyle="bold"/>

    48.     <Button
    49.         android:id="@+id/btn_move_about"
    50.         android:layout_width="match_parent"
    51.         android:layout_height="wrap_content"
    52.         android:layout_marginBottom="32dp"
    53.         android:textColor="@android:color/holo_green_dark"
    54.         android:text="@string/tentang"
    55.         android:textStyle="bold"/>

    57. </LinearLayout>
  92. Setelah itu buat masing-masing nama string yang ditampilkan pada tombol.
    93. Nilai untuk tiap string-nya adalah :
    1. <string name="pendeteksi">Deteksi Beras dengan Kamera</string>
    2. <string name="import_gallery">Deteksi Beras dari Galeri</string>
    3. <string name="deskripsi">Deskripsi Varietas Beras</string>
    4. <string name="bantuan">Bantuan</string>
    5. <string name="tentang">Tentang Aplikasi</string>
  93. Berikutnya menuju "styles.xml" yang terletak tepat di bawah "strings.xml" pada folder values. Kemudian ubah source code-nya menjadi seperti ini.
    94. Source code untuk "styles.xml" :
    1. <resources>

    3.     <!-- Base application theme. -->
    4.     <style name="AppThemeSplashScreen" parent="Theme.AppCompat.Light.NoActionBar">
    5.         <!-- Customize your theme here. -->
    6.         <item name="colorPrimary">@color/colorPrimary</item>
    7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    8.         <item name="colorAccent">@color/colorAccent</item>
    9.     </style>
    10.     <!-- Main application theme. -->
    11.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    12.         <!-- Customize your theme here. -->
    13.         <item name="colorPrimary">@android:color/holo_blue_dark</item>
    14.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    15.         <item name="colorAccent">@color/colorAccent</item>
    16.     </style>

    18. </resources>
  94. Kembali lagi ke "AndroidManifest.xml" dan lengkapi source code-nya seperti berikut untuk mengatur tampilan aktivitas awal dan orientasi tiap aktivitas.
    95. Source code ditempatkan di dalam tag "<application ...>(di sini)</application>" :
    1. <activity android:name=".SplashScreen"
    2.             android:label="@string/app_name"
    3.             android:noHistory="true"
    4.             android:screenOrientation="portrait"
    5.             android:theme="@style/AppThemeSplashScreen">
    6.             <intent-filter>
    7.                 <action android:name="android.intent.action.MAIN" />

    9.                 <category android:name="android.intent.category.LAUNCHER" />
    10.             </intent-filter>
    11.         </activity>
    12.         <activity android:name=".Bantuan" />
    13.         <activity android:name=".Deskripsi" />
    14.         <activity android:name=".Pendeteksi"
    15.             android:screenOrientation="portrait"
    16.             android:colorMode="wideColorGamut">
    17.         </activity>
    18.         <activity android:name=".DeteksiDariGaleri"
    19.             android:screenOrientation="portrait">
    20.         </activity>
    21.         <activity android:name=".MainActivity"
    22.             android:screenOrientation="portrait">
    23.         </activity>
    24.         <activity android:name=".Tentang" />
  95. Sesudah itu membuat folder "assets" pada direktori "app" di dalam project tersebut. Folder tersebut digunakan untuk menyimpan model hasil pelatihan dari arsitektur CNN dalam format "*.tflite" beserta labelnya berformat "*.txt" dan untuk menyimpan gambar contoh untuk pengujian varietas beras dengan menggunakan fitur import gallery (mengambil gambar dari galeri foto). Cara pembuatannya dapat dilihat langsung pada gambar berikut.
  96. Pilih target sumber "main" kemudian klik "Finish".
  97. Tunggu sinkronisasi gradle pada project Android hingga selesai.
  98. Selanjutnya copy contoh gambar pengujian yang berformat (.jpg), model hasil pelatihan arsitektur CNN berformat (.tflite), dan labelnya berformat (.txt).
  99. Paste-kan di dalam direktori folder "assets" dan samakan namanya.
  100. Anda juga dapat membuat/mengedit isi labelnya secara langsung.
  101. Kembali ke "build.gradle (Module: app)", tambahkan implementasi untuk penampil gambar di dalam tag dependencies seperti pada gambar.
    102. Source code dependency untuk menampilkan custom ImageView :
    1. //menampilkan sebuah custom ImageView dalam bentuk lingkaran
    2.     implementation 'de.hdodenhof:circleimageview:3.0.0'
  102. Kemudian tambahkan perintah sesuai pada gambar di bawah untuk mencegah terjadinya kompresi pada file ".tflite" dan mencegah duplikasi saat proses build. Setelah itu lakukan sinkronisasi kembali pada "build.gradle" untuk menerapkan perunbahan.
    103. Perintah yang perlu ditambahkan pada "build.gradle (Module: app)" :
    1. aaptOptions {
    2.         noCompress "tflite"
    3.         noCompress "lite"
    4.     }
    5.     packagingOptions {//mencegah duplikasi modul kotlin saat build aplikasi
    6.         pickFirst 'META-INF/kotlinx-io.kotlin_module'
    7.         pickFirst 'META-INF/atomicfu.kotlin_module'
    8.         pickFirst 'META-INF/kotlinx-coroutines-io.kotlin_module'
    9.     }
  103. Langkah terakhir adalah menambahkan ikon launcher pada aplikasi Android-nya. Caranya cukup mudah hanya perlu menyalin gambar ke dalam folder mipmap.
  104. Kemudian samakan namanya dengan yang ada pada "AndroidManifest.xml".
  105. Terakhir jalankan aplikasinya pada perangkat Android Anda. Untuk menjalankannya hubungkan HP Android Anda ke Laptop/Komputer dan aktifkan mode USB Debugging-nya yang terletak pada menu pengaturan "Developer Options". Kemudian tunggu nama device Anda sampai terdeteksi di Android Studio. Selanjutnya tekan tombol "Run".
  106. Tunggu sampai proses build dan instalasi aplikasi selesai.
  107. Berikut contoh tampilan aplikasinya setelah dijalankan di perangkat Android.
  108. Jika sudah berhasil dijalankan dan ingin meng-install-nya di perangkat lain, maka dapat dibuat juga file "*.apk"-nya dengan cara seperti berikut.
  109. Tunggu prosesnya hingga selesai, dan klik "locate" untuk menuju direktori dimana file aplikasi Android tersebut disimpan setelah di-build.
  110. File .apk sudah berhasil dibuat, sekarang Anda dapat mengirim/menyalinnya ke perangkat Android lainnya yang ingin Anda coba untuk di-install.
  111. Selesai !!
Keterangan :
  1. Bingkai textbox yang berwarna biru merupakan program Bahasa Kotlin, sedangkan yang berwarna oranye adalah program dalam bahasa ".xml".
  2. Gambar logo dan contoh pengujian bisa Anda buat atau cari sendiri.
  3. Untuk source code lengkapnya dapat diunduh  di sini.
Video tutorial hasil pelatihannya dapat dilihat di bawah.

Terima kasih atas kunjungannya semoga bermanfaat.



    Demikianlah Artikel Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android

    Sekian Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android, mudah-mudahan bisa memberi manfaat untuk anda semua.

    Anda sedang membaca artikel Klasifikasi Citra Menggunakan Convolutional Neural Network (CNN) dengan Model TensorFlow Lite pada Android dan artikel ini url permalinknya adalah https://pawang-bisnis.blogspot.com/2020/02/klasifikasi-citra-menggunakan.html Semoga artikel ini bisa bermanfaat.

    Tag : ,
    Tags
    Reactions