Implementasi Machine Learning di Flutter

Membuat aplikasi pendeteksi batu, gunting kertas menggunakan tensorflow dan flutter

Pada artikel ini kita akan mempelajari cara mengimplementasikan machine learning pada aplikasi mobile (flutter). pada artikel ini akan dijelaskan cara membuat model machine learning dan cara mengimplementasikannya ke aplikasi mobile (flutter).

Machine learning pada dasarnya adalah proses pelatihan sebuah perangkat lunak yang disebut model, yang berguna untuk mempelajari pola pada sebuah dataset. Model ini kemudian dapat digunakan untuk memprediksi data yang belum pernah dikenali sebelumnya.

Nantinya model yang sudah jadi bisa diexport dan setelah diexport bisa diimplementasikan ke flutter.

Cara Membuat Model

Cara membuat model machine learning sendiri ada banyak cara, kalian bisa membuatnya menggunakan bahasa python di anaconda navigator, google colab dll. Tapi buat kalian yang belum pernah membuat model sebelumnya ada cara lebih praktis untuk membuat model yaitu di teachablemachine.

Untuk kali ini kita akan membuat model di teachablemachine.

teachablemachine

Membuat image project

Pilih standard image model

Tampilan project

Pertama-tama kita harus menentukan berapa class yang akan kita set, lalu kita akan mengisi image sample dari masing-masing class.

Kita bisa langsung mengisi image sample-nya melaluli webcam, di atas adalah contoh class dan image sample yang sudah siap ditraining. Untuk pengaturan training modelnya bisa menggunakan pengaturan standard.

Hasil training saat ditest

Jika training selesai, kita bisa langsung mencobanya seperti gambar di atas.

Jika keakurasian dirasa sudah bagus maka proses selanjutnya adalah mengexport model menjadi tensorflow lite.

Model yang sudah didownload akan berbentuk file zip dan isinya seperti di bawah :

Membuat Aplikasi Flutter

Pada sesi ini kita akan memasukan model yang sudah dibuat tadi ke dalam aplikasi flutter.

Pertama-tama kita harus membuat project flutter lalu kita membuat folder asset dan memasukan model yang sudah kita unduh seperti di bawah :

Setelah itu kita mengimport library tflite ke dalam project flutter dan mendaftarkannya di pubspec.yaml.

Lalu mendaftarkan folder asset yang kita buat tadi ke pubspec.yaml agar bisa dipanggil.

Untuk pemanggilan library-nya seperti di bawah ini :

Untuk source code lengkapnya ada di bawah

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:tflite/tflite.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var isLoading = false;
  File fileImage;
  final listOutputs = [];

  @override
  void initState() {
    isLoading = true;
    loadModel().then((value) {
      setState(() => isLoading = false);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Flutter Image Classification',
        ),
      ),
      body: isLoading
          ? Center(
        child: CircularProgressIndicator(),
      )
          : Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            fileImage == null ? Container() : Image.file(fileImage),
            SizedBox(height: 16),
            listOutputs.length > 0
                ? Text(
              '${listOutputs[0]['label']}'.replaceAll(RegExp(r'[0-9]'), ''),
              style: TextStyle(
                fontSize: 20,
                background: Paint()..color = Colors.white,
                fontWeight: FontWeight.bold,
              ),
            )
                : Text('Upload your image'),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: Icon(Icons.camera),
            tooltip: 'Take Picture From Camera',
            onPressed: () => pickImage(ImageSource.camera),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            child: Icon(Icons.image),
            tooltip: 'Take Picture From Gallery',
            onPressed: () => pickImage(ImageSource.gallery),
          ),
        ],
      ),
    );
  }

  Future loadModel() async {
    await Tflite.loadModel(
        model: 'assets/tf/model_unquant.tflite',
        labels: 'assets/tf/labels.txt',
        numThreads: 1,
        useGpuDelegate: false
    );
  }
  
  void pickImage(ImageSource imageSource) async {
    var image = await ImagePicker().getImage(source: imageSource);
    if (image == null) {
      return null;
    }
    setState(() {
      isLoading = true;
      fileImage = File(image.path);
    });
    processImage(fileImage);
  }

  void processImage(File image) async {
    var output = await Tflite.runModelOnImage(
        path: image.path,
        numResults: 6,
        threshold: 0.05,
        imageMean: 0.0,
        imageStd: 255.0,
        asynch: true
    );
    setState(() {
      isLoading = false;
      listOutputs.clear();
      listOutputs.addAll(output);
      debugPrint('outputs: $listOutputs');
    });
  }
}

Percobaan Aplikasi

Setelah kita mendaftarkan asset dan library tensorflow ke dalam aplikasi flutter selanjutnya kita akan mencobanya.

Hasil pengetesan yang sudah saya jalankan sebagai berikut :

Seperti itu untuk pembahasan implementasi tensorflow di flutter, terima kasih untuk teman-teman yang sudah membaca artikel ini, jika ada pertanyaan atau diskusi bisa melalui kolom komentar di bawah.

GitHub - sultanjulyan/Flutter-Image-Classification: Flutter image classification rock scissor paper…