Flutter ML Kit: Text Recognition

How to implement text recognition ML Kit with Flutter

Pengenalan

ML Kit merupakan salah satu fungsi dari Firebase yang berfokus pada machine learning. Hanya saja penggunaannya lebih sederhana sehingga kita tidak sulit untuk menggunakannya. Salah satu diantara dari fitur machine learning-nya adalah text recognition. Di tulisan sebelum-sebelumnya saya sudah pernah membahas tulisan ini di Android native yang bisa kamu baca ditulisan berikut ya.

Text Recognize with ML Kit

Sekarang ditulisan ini saya akan membahasnya pada Flutter. Seperti yang kita tahu bahwa Flutter mendukung untuk berbagai platform seperti Android, IOS, Web, dan Desktop. Untuk saat ini kita berfokus pada Android dan IOS saja ya.

Persiapan

Sebelum kita masuk ke contoh projek kita perlu mempersiapkan projek di Firebase. Untuk langkah-langkahnya tidak perlu saya jelaskan disini ya karena langkah-langkahnya cukup panjang. Silakan kamu ikuti saja ya langkah-langkah berikut.

Menambahkan Firebase ke aplikasi Flutter

Mulai Pembuatan Projek

Sekarang kita masuk ke tahap mulai pembuatan projek ya. Untuk mulai buat projeknya silakan pakai Text Editor atau IDE favorit kita ya seperti VS Code, Android Studio atau IntelliJ IDEA.

Atur pubspec.yaml

Setelah selesai buat projek, langkah berikutnya adalah atur dependencies yang akan kita gunakan didalam file pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3

  # Flutter plugin for Firebase Core
  firebase_core: ^0.4.5

  # Flutter plugin for Firebase maching learning vision services.
  firebase_ml_vision: ^0.9.4

  # Flutter plugin for selecting images from the Android and IOS image library, and taking
  # new pictures with the camera.
  image_picker: ^0.6.7+3

Adapun dependencies yang akan kita gunakan ada 3 yaitu sebagai berikut.

1. Firebase Core, berfungsi sebagai fungsi utama menggunakan fitur-fitur Firebase.
2. Firebase ML Vision, berfungsi untuk meng-implementasikan fitur-fitur machine learning vision.
3. Image Picker, berfungsi untuk fitur mengambil gambar dari kamera dan galeri.

Setelah kita tambahkan dependencies tersebut kemudian, jalankan perintah berikut.

flutter pub get

Firebase Core

Sekarang kita perlu meng-integrasikan plugin Firebase Core untuk platform Android dan IOS.

Untuk Android silakan ikuti langkah-langkah berikut ya.

• Unduh file google-services.json dari Firebase Console dan masukkan kedalam direktori android/app seperti gambar berikut.

Lokasi file google-services.json

• Buka file build.gradle yang berada didalam direktori android. Kemudian, tambahkan kode berikut didalam blok dependencies.

buildscript {
    ...

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.3'
    }
}

...

• Buka file build.gradle yang berada didalam direktori android/app. Kemudian, tambahkan kode berikut dibaris paling akhir.

...

apply plugin: 'com.google.gms.google-services'

Untuk IOS silakan ikuti langkah-langkah berikut ya.

• Unduh file GoogleService-Info.plist dari Firebase Console dan masukkan kedalam projek didalam direktori ios/Runner seperti gambar berikut.

Lokasi file GoogleService-Info.plist

Firebase ML Vision

Sekarang kita perlu meng-integrasikan plugin Firebase ML Vision untuk platform Android dan IOS.

Untuk Android silakan ikuti langkah-langkah berikut ya.

• Buka file AndroidManifest.xml yang berada di android/app/src/main. Kemudian, kita ubah kode didalamnya menjadi seperti berikut.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.fluttermlkitocr">
    ...
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="fluttermlkitocr"
        android:icon="@mipmap/ic_launcher">
        <meta-data
            android:name="com.google.firebase.ml.vision.DEPENDENCIES"
            android:value="ocr" />
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            ...
    </application>
</manifest>

Untuk IOS silakan ikuti langkah-langkah berikut ya.

• Buka file Podfile dan ubah kode didalamnya menjadi seperti berikut.

# Uncomment this line to define a global platform for your project
platform :ios, '9.0' # Add in the first line
...

...
pod 'Firebase/MLVisionTextModel' # Add in the last line

• Kemudian, buka aplikasi terminal atau cmd atau sejenisnya dan jalankan perintah pod update .

Semua langkah-langkah diatas merupakan hasil terjemahan saya dari dokumentasinya langsung ya. Jikalau ternyata langkah-langkah saya diatas sudah tidak berfungsi lagi atau ada error silakan lihat langsung ke dokumentasinya ya. Untuk dokumentasi aslinya bisa kamu lihat di link berikut ya.

firebase_ml_vision | Flutter Package

Image Picker

Sekarang kita perlu meng-integrasikan plugin Image Picker untuk platform Android dan IOS.

Untuk Android silakan ikuti langkah-langkah berikut ya.

• [OPTIONAL] Kita buka file AndroidManifest.xml yang berada didalam android/app/src/main. Kemudian, kita tambahkan kode android:requestLegacyExternalStorage="true" didalam tag <application> . Kode tersebut kita tambahkan berfungsi untuk dukungan di Android10 atau Android Q agar bisa mengambil gambar dari galeri atau storage. Tapi, berhubung langkah-langkah ini hanya untuk mengambil gambar dari galeri atau storage jadi, saya rasa kita bisa skip saja ya langkah ini.

Android 10 open failed: EACCES (Permission denied)

Untuk IOS silakan ikuti langkah-langkah berikut ya.

• Kita buka file Info.plist yang berada didalam ios/Runner/Info.plist. Kemudian, perlu menambahkan beberapa permission yang akan kita pakai seperti photo library, camera, dan microphone. Tapi, karena pada contoh kali ini kita hanya mengambil gambar jadi, kita cukup menambahkan permission camera saja seperti berikut.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
   ...
   <key>NSCameraUsageDescription</key>
   <string>Take photo from camera</string>
</dict>
</plist>

Langkah-langkah diatas merupakan hasil terjemahan saya dari dokumentasinya langsung. Dokumentasi lengkapnya bisa kamu baca di link berikut ya.

image_picker | Flutter Package

Buat UI

Langkah berikutnya kita akan membuat tampilan app-nya. Silakan buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  File imageFile;
  var isLoading = false;
  var result = 'Result In Here';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ML Kit Text'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        width: double.infinity,
        child: Column(
          children: [
            Expanded(
              flex: 3,
              child: imageFile == null
                  ? Container()
                  : Image.file(
                      imageFile,
                      fit: BoxFit.cover,
                    ),
            ),
            Expanded(
              child: Center(
                child: isLoading ? _buildWidgetLoading() : Text(result),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera_alt),
        onPressed: () {
          // TODO: take picture from camera
        },
      ),
    );
  }

  Widget _buildWidgetLoading() {
    return Platform.isIOS ? CupertinoActivityIndicator() : CircularProgressIndicator();
  }
}

Adapun output dari kode diatas adalah sebagai berikut.

Tampilan Utama App

Jadi, nantinya cara kerjanya adalah si pengguna cukup tap button kamera lalu, nanti app akan mengarah ke aplikasi kamera untuk mengambil foto. Kemudian, ketika accept dengan hasil gambarnya app akan memproses gambar tersebut dan menampilkan tulisan yang ada pada gambar.

Buat Fungsi Text Recognition

Sekarang kita akan mengubah kode berikut

onPressed: () {
  // TODO: take picture from camera
},

Diubah menjadi kode berikut.

onPressed: () async {
  var pickedFile = await ImagePicker().getImage(source: ImageSource.camera);
  if (pickedFile != null) {
    setState(() {
      isLoading = true;
    });
    imageFile = File(pickedFile.path);
    var firebaseVisionImage = FirebaseVisionImage.fromFile(imageFile);
    var textRecognizer = FirebaseVision.instance.textRecognizer();
    var visionText = await textRecognizer.processImage(firebaseVisionImage);
    result = 'Result: ${visionText.text}';
    debugPrint('result: $result');
    textRecognizer.close();
    setState(() {
      isLoading = false;
    });
  }
},

Sekarang kita test jalankan lagi app-nya maka, outputnya akan menjadi seperti berikut.

Output di Android

Diatas merupakan output di aplikasi Android. Untuk yang IOS sudah saya tes namun, hasilnya tidak bekerja sebagaimana mestinya. Berikut output di IOS.

Output di IOS

Kesimpulan

Jadi, kesimpulannya adalah Text Recognition pada ML Kit di Flutter menurut saya sudah bisa dipakai dan pemakaiannya juga termasuk gampang. Untuk di sisi IOS yang tidak bisa membaca teks-nya saya rasa ini hanya masalah waktu saja atau mungkin saya ada salah konfigurasi. Bagi yang sudah coba di IOS dan berfungsi dengan baik silakan beritahu saya di kolom komentar ya. Untuk kode lengkap dari projek ditulisan ini bisa kamu lihat di Github ya.

CoderJava/flutter_mlkit_ocr