Hari-hari ini semua orang membicarakan Artificial Intelligence, Machine Learning, Deep Learning, dst, dst. teknologi-teknologi tersebut menjadi semakin populer dan (mungkin) akan tetap menjadi semakin populer di masa depan seiring berkembangnya teknologi pemrosesan data pada komputer yang semakin cepat serta “optimisme” para ilmuan komputer, perusahaan2 Startup, Tech Giant (seperti Google, Facebook, Microsoft, dll) terhadap potensi AI itu sendiri.

So, pada kesempatan kali ini kita akan sama-sama belajar membuat aplikasi Image Classification atau klasifikasi gambar menggunakan Flutter dan Teachable Machine. untuk studi kasus, kita akan mencoba membuat aplikasi klasifikasi gambar kucing dan anjing (mudah2an hasilnya nggak seperti meme di atas ya hehehe 😅)

Teachable Machine adalah tool yang dibuat oleh Google untuk membuat model Machine Learning seperti klasifikasi gambar, audio, bahkan pose dengan sangat mudah, tanpa coding sama sekali 😆

FYI: Model adalah sebuah file yang sudah dilatih dengan suatu algoritma tertentu untuk mengenali jenis pattern atau pola atas sekumpulan data yang disebut sebagai datasets. [1]

Sederhananya, model itu sama seperti otak manusia yang sudah bisa membedakan antara buah apel dan buah jeruk.

• kita bisa membedakan keduanya karena kita pernah melihat kedua buah tersebut di masa lalu dan berhasil mengenali pattern dari masing2 buah tersebut, misalkan kalau apel berwarna merah dan jeruk berwarna orange.

• Buah apel dan jeruk yang kita lihat di masa lalu itulah yang disebut sebagai “datasets”.

• Dan cara kita untuk mengenali mana apel dan mana jeruk adalah “algoritma”.

1. Membuat model

2. Setup project Flutter

3. Konfigurasi package tflite dan image_picker

4. Membuat UI

5. Implementasi package tflite dan image_picker

6. Testing aplikasi

Sebelum membuat model, kita harus menyiapkan datasets terlebih dahulu, silakan kamu cari gambar “kucing dan anjing” di situs https://www.kaggle.com atau bisa juga cari di google images, terserah kamu.

https://www.kaggle.com

setelah itu, pergi ke https://teachablemachine.withgoogle.com kemudian klik “Get Started” → “Image Project”.

kemudian ubah nama classnya menjadi “Kucing” dan “Anjing” seperti ini :

lalu upload datasets yang telah didownload tadi dengan cara klik “Upload”, setelah berhasil terupload, silakan klik “Train Model”, pada proses ini jangan pindah ke tab lain, tunggu aja sampai selesai (mungkin agak lama kalau datasetnya cukup banyak).

Setelah proses training selesai, kita akan Export model tersebut, tapi sebelum itu kamu bisa coba test modelnya dulu untuk mastiin aja apakah bisa berjalan dengan baik.

kalau dirasa sudah oke, silakan export modelnya dengan cara klik “Export Model”

lalu klik tab “Tensorflow Lite” dan Model conversion type pilih yang “Floating Point”.

terakhir, klik “Download my model”

Saya asumsikan kamu sudah bisa membuat project baru di Flutter, jadi saya skip aja bagian tersebut.

setelah project selesai dibuat, tambahkan package berikut di file pubspec.yaml :

pubspec.yaml
Copy
1image_picker: ^0.6.7+14
2tflite: ^1.1.1

pubspec.yaml

kemudian, silakan buat folder “assets” dan jangan lupa menambahkannya ke pubspec.yaml supaya bisa diakses oleh aplikasi Flutter kita.

pubspec.yaml

setelah itu extract file converted_tflite.zip yang telah didownload tadi, dan pindahkan semua isinya ke dalam folder assets.

labels.txt

Sebelum menggunakan kedua package tersebut, ada beberapa hal yang harus kita atur supaya tidak muncul error saat dibuild nantinya.

A. tflite

• android :

buka file android/app/build.gradle kemudian tambahkan kode berikut ke dalam block android :

android/app/build.gradle
Copy
1aaptOptions {
2    noCompress 'tflite'
3    noCompress 'lite'
4}

build.gradle

dan pada block android → defaultConfig ubah minSdkVersion menjadi 19

build.gradle

• ios

jika kamu mendapatkan build error seperti ini “vector file not found”, buka ios/Runner.xcworkspace melalui Xcode, kemudian klik Runner → Targets → Runner → Build Settings.

cari “Compile Sources As” dan ubah valuenya menjadi “Objective-C++”

B. image_picker

• android

untuk android, kita tidak perlu melakukan konfigurasi apapun.

• ios

buka file ios/Runner/Info.plist dan tambahkan kode berikut di dalam block <dict> :

ios/Runner/Info.plist
Copy
1<key>NSPhotoLibraryUsageDescription</key>
2<string>Untuk ...</string>
3<key>NSCameraUsageDescription</key>
4<string>Untuk ...</string>
5<key>NSMicrophoneUsageDescription</key>
6<string>Untuk ...</string>

Info.plist

Silakan copas kode berikut ke dalam file main.dart :

main.dart
Copy
1import 'dart:io';
2import 'package:flutter/material.dart';
3
4class MyApp extends StatefulWidget {
5  @override
6  _MyAppState createState() => _MyAppState();
7}
8
9class _MyAppState extends State<MyApp> {
10  File _image;
11  List _output;
12
13  void classifyImage() async {}
14
15  void chooseImage() async {}
16
17  void cameraRoll() async {}
18
19  void reset() {}
20
21  @override
22  Widget build(BuildContext context) {
23    return MaterialApp(
24      home: Scaffold(
25        backgroundColor: Colors.grey[850],
26        body: SingleChildScrollView(
27          child: Container(
28            padding: EdgeInsets.all(20),
29            width: double.infinity,
30            child: Column(
31              crossAxisAlignment: CrossAxisAlignment.center,
32              children: [
33                SizedBox(
34                  height: 50,
35                ),
36                Text(
37                  'Kucing ⚔︎ Anjing',
38                  style: TextStyle(
39                    color: Color(0xFFFFC324),
40                    fontSize: 24,
41                    fontWeight: FontWeight.w700,
42                  ),
43                  textAlign: TextAlign.center,
44                ),
45                Text(
46                  'Image Classification',
47                  style: TextStyle(
48                    color: Colors.white,
49                    fontSize: 18,
50                    fontWeight: FontWeight.w100,
51                  ),
52                  textAlign: TextAlign.center,
53                ),
54                SizedBox(
55                  height: 50,
56                ),
57                Center(
58                  child: ClipRRect(
59                    borderRadius: BorderRadius.circular(15),
60                    child: _image != null
61                        ? Image.file(
62                            _image,
63                            width: 250,
64                          )
65                        : Image.asset(
66                            'assets/logo.png',
67                            width: 250,
68                          ),
69                  ),
70                ),
71                if (_output != null)
72                  Column(
73                    children: [
74                      SizedBox(
75                        height: 10,
76                      ),
77                      Text(
78                        '${_output[0]["label"]} (${_output[0]["confidence"]})',
79                        style: TextStyle(
80                          color: Colors.white,
81                          fontSize: 18,
82                          fontWeight: FontWeight.w100,
83                        ),
84                        textAlign: TextAlign.center,
85                      ),
86                    ],
87                  ),
88                SizedBox(
89                  height: 50,
90                ),
91                Column(
92                  children: [
93                    SizedBox(
94                      width: double.infinity,
95                      child: RaisedButton(
96                        color: Color(0xFFFFC324),
97                        shape: RoundedRectangleBorder(
98                          borderRadius: BorderRadius.circular(8),
99                        ),
100                        onPressed: chooseImage,
101                        child: Text(
102                          'Pilih dari Galeri',
103                        ),
104                      ),
105                    ),
106                    SizedBox(
107                      width: double.infinity,
108                      child: RaisedButton(
109                        color: Colors.grey[350],
110                        shape: RoundedRectangleBorder(
111                          borderRadius: BorderRadius.circular(8),
112                        ),
113                        onPressed: cameraRoll,
114                        child: Text(
115                          'Ambil Foto',
116                        ),
117                      ),
118                    ),
119                    SizedBox(
120                      width: double.infinity,
121                      child: RaisedButton(
122                        color: Colors.grey[800],
123                        textColor: Colors.white,
124                        shape: RoundedRectangleBorder(
125                          borderRadius: BorderRadius.circular(8),
126                        ),
127                        onPressed: reset,
128                        child: Text(
129                          'RESET',
130                        ),
131                      ),
132                    ),
133                  ],
134                )
135              ],
136            ),
137          ),
138        ),
139      ),
140    );
141  }
142}
143
144void main() {
145  runApp(MyApp());
146}

Logonya bisa kamu download terlebih dahulu di sini, dan pindahkan ke dalam folder assets!

1

• Kode di atas akan mengecek apakah user sudah upload gambar atau belum, jika sudah maka akan menampilkan gambar yang diupload oleh user, dan jika belum maka akan menampilkan logo aplikasi kita.

Kalau kita jalankan aplikasinya, maka hasilnya kurang lebih akan seperti ini :

Silakan copas lagi kode berikut ke dalam file main.dart :

main.dart
Copy
1import 'dart:io';
2import 'package:flutter/material.dart';
3import 'package:image_picker/image_picker.dart';
4import 'package:tflite/tflite.dart';
5
6class MyApp extends StatefulWidget {
7  @override
8  _MyAppState createState() => _MyAppState();
9}
10
11class _MyAppState extends State<MyApp> {
12  File _image;
13  List _output;
14  final picker = ImagePicker();
15
16  @override
17  void initState() {
18    super.initState();
19    Tflite.loadModel(
20      model: 'assets/model_unquant.tflite',
21      labels: 'assets/labels.txt',
22    );
23  }
24
25  @override
26  void dispose() {
27    super.dispose();
28    Tflite.close();
29  }
30
31  void classifyImage() async {
32    var output = await Tflite.runModelOnImage(
33      path: _image.path,
34      numResults: 2,
35      threshold: 0.5,
36      imageMean: 127.5,
37      imageStd: 127.5,
38    );
39
40    setState(() {
41      _output = output;
42    });
43  }
44
45  void chooseImage() async {
46    var image = await picker.getImage(source: ImageSource.gallery);
47    if (image == null) return null;
48
49    setState(() {
50      _image = File(image.path);
51    });
52
53    classifyImage();
54  }
55
56  void cameraRoll() async {
57    var image = await picker.getImage(source: ImageSource.camera);
58    if (image == null) return null;
59
60    setState(() {
61      _image = File(image.path);
62    });
63
64    classifyImage();
65  }
66
67  void reset() {
68    setState(() {
69      _image = null;
70      _output = null;
71    });
72  }
73
74  @override
75  Widget build(BuildContext context) {
76    return MaterialApp(
77      home: Scaffold(
78        backgroundColor: Colors.grey[850],
79        body: SingleChildScrollView(
80          child: Container(
81            padding: EdgeInsets.all(20),
82            width: double.infinity,
83            child: Column(
84              crossAxisAlignment: CrossAxisAlignment.center,
85              children: [
86                SizedBox(
87                  height: 50,
88                ),
89                Text(
90                  'Kucing ⚔︎ Anjing',
91                  style: TextStyle(
92                    color: Color(0xFFFFC324),
93                    fontSize: 24,
94                    fontWeight: FontWeight.w700,
95                  ),
96                  textAlign: TextAlign.center,
97                ),
98                Text(
99                  'Image Classification',
100                  style: TextStyle(
101                    color: Colors.white,
102                    fontSize: 18,
103                    fontWeight: FontWeight.w100,
104                  ),
105                  textAlign: TextAlign.center,
106                ),
107                SizedBox(
108                  height: 50,
109                ),
110                Center(
111                  child: ClipRRect(
112                    borderRadius: BorderRadius.circular(15),
113                    child: _image != null
114                        ? Image.file(
115                            _image,
116                            width: 250,
117                          )
118                        : Image.asset(
119                            'assets/logo.png',
120                            width: 250,
121                          ),
122                  ),
123                ),
124                if (_output != null)
125                  Column(
126                    children: [
127                      SizedBox(
128                        height: 10,
129                      ),
130                      Text(
131                        '${_output[0]["label"]} (${_output[0]["confidence"]})',
132                        style: TextStyle(
133                          color: Colors.white,
134                          fontSize: 18,
135                          fontWeight: FontWeight.w100,
136                        ),
137                        textAlign: TextAlign.center,
138                      ),
139                    ],
140                  ),
141                SizedBox(
142                  height: 50,
143                ),
144                Column(
145                  children: [
146                    SizedBox(
147                      width: double.infinity,
148                      child: RaisedButton(
149                        color: Color(0xFFFFC324),
150                        shape: RoundedRectangleBorder(
151                          borderRadius: BorderRadius.circular(8),
152                        ),
153                        onPressed: chooseImage,
154                        child: Text(
155                          'Pilih dari Galeri',
156                        ),
157                      ),
158                    ),
159                    SizedBox(
160                      width: double.infinity,
161                      child: RaisedButton(
162                        color: Colors.grey[350],
163                        shape: RoundedRectangleBorder(
164                          borderRadius: BorderRadius.circular(8),
165                        ),
166                        onPressed: cameraRoll,
167                        child: Text(
168                          'Ambil Foto',
169                        ),
170                      ),
171                    ),
172                    SizedBox(
173                      width: double.infinity,
174                      child: RaisedButton(
175                        color: Colors.grey[800],
176                        textColor: Colors.white,
177                        shape: RoundedRectangleBorder(
178                          borderRadius: BorderRadius.circular(8),
179                        ),
180                        onPressed: reset,
181                        child: Text(
182                          'RESET',
183                        ),
184                      ),
185                    ),
186                  ],
187                )
188              ],
189            ),
190          ),
191        ),
192      ),
193    );
194  }
195}
196
197void main() {
198  runApp(MyApp());
199}

1

• Pertama, kita load dulu model ML nya pada saat aplikasi pertama kali dibuka.

2

• User akan memilih gambar terlebih dahulu, setelah selesai, tampung gambarnya di variabel image.

• kemudian convert image tersebut menjadi File agar bisa dipakai di widget Image.File (sebelumnya tipe datanya adalah PickedFile)

• lalu panggil method classifyImage() untuk memprediksi gambar apa yang diupload user.

3

• kode di atas adalah method untuk melakukan prediksi, apakah gambar yang diupload user itu gambar kucing atau anjing.

• yang perlu diperhatikan di sini adalah numResults , di situ saya beri value 2, kenapa? karena di model yang kita buat ada 2 class yaitu class “Kucing” dan class “Anjing”.

4

• Terakhir, kita panggil method Tflite.close() pada lifecycle dispose agar tidak terjadi Memory leak

Finally… ! 🥳 🎉

Silakan kamu test sendiri apakah bisa berjalan dengan baik? atau justru hasilnya sama persis seperti meme di atas? :v

Full Source Code nya bisa diakses di sini : https://github.com/alfinsyahruddin/kucing_anjing

Setelah mengikuti tutorial ini diharapkan kamu sudah bisa membuat aplikasi Image Classification sendiri, kamu juga bisa ngembangin lagi supaya bisa realtime saat mengklasifikasi gambar atau mungkin coba-coba bikin model pake Python misalnya, intinya Keep Learning! 😉

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏