√ Menciptakan Aplikasi Ocr Dengan Flutter Dan Ml Kit Firebase

Pada kesempatan kali ini saya akan mengatakan klarifikasi mengenai eksperimen saya dengan flutter yakni memadukan Flutter dengan Machine Learning Firebase. Sebelumnya saya mencoba bereksperimen memakai Android Native memakai Kotlin, namun pada kesannya alangkah lebih anggun apabila diterapkan di Flutter Dart juga. Eksperimen kali ini ialah berbagi aplikasi Flutter Optical Character Recognize (OCR) memakai Text Recognize Machine Learning Firebase, aplikasi ini akan memindai hasil dari jepretan kamera kemudian diekstrak teks dari gambar sehingga hasil final berupa teks yang ditampilkan di Textview.

;TLDR

Flutter sendiri merupakan Google Software Development Kit untuk berbagi aplikasi mobile Android dan iOS. Sedangkan Firebase (Milik Google juga) sendiri menunjukkan layanan backend khusus mobile. Ada berbagai produk atau layanan yang ditawarkan oleh Firebase khususnya yang kita akan kembangkan kali ini yakni Machine Learning (ML) Kit. ML kit ini juga merupakan SDK yang menghadirkan machine learning untuk aplikasi android dan iOS yang andal, tentunya mudah dipakai bagi para praktisi yang sebelumnya tidak ada latar belakang machine learning sekalipun. Nah, semua klasifikasi diatas terang dipergunakan untuk pembuatan mobile development, Google benar-benar fokus untuk mengatakan pengalaman development yang menyenangkan alias nggak usah mikirin kerepotan backend machine learning.

Show me your code

Hmm . . jangan dulu, quote diatas harusnya ditunda, kita harus mempersiapkan segala hal yang perlu dipergunakan misal SDK dan setting environtment. Nah sebelum memulai, Anda diharuskan sudah mempunyai Flutter SDK yang sudah ter-install, Editor menyerupai Visual Code atau Android Studio dengan plugin Dart/Flutter.

Membuat Firebase Project dan Setting Environtment

1. Membuat akun firebase, jikalau tidak mempunyai Anda sanggup membuatnya atau lebih mudah jikalau login memakai Akun Gmail (Milik Google juga). Untuk versi free Anda diharuskan masih mempunyai kuota project untuk menciptakan project baru, apabila tidak Anda sanggup menciptakan akun Gmail lagi. 😎


2. Masuk ke Firebase console kemudian bikin project baru
   
   


3. Lengkapi beberapa data yang dibutuhkan, jangan lupa untuk mengisi country atau region yang sesuai dengan lokasi Anda sekarang. Kemudian create project dan pilih/tambahkan Android development untuk melanjutkan.


4. Berikut tampilan sajian tambah Firebase ke aplikasi Android, lengkapi form tersebut dan sesuaikan dengan package Android, nah khusus Flutter kita akan mengambil nama package Android pada alamat berikut android/app/src/main/AndroidManifest.xml, ambil nama package string dalam elemen atribut Android package name (seperti com.example.scantext). Seperti yang Anda lihat folder direktori yang ada pada Flutter memang benar-benar menyerupai dengan folder direktori Android Native Kotlin.Kemudian lengkapi akta penandatanganan dengan menggenerate di Android studio atau Commandline. Anda sanggup menggenerate memakai Android Studio tutorial di laman ini atau pada laman ini. Langkah selanjutnya klik daftar aplikasi
   
   
   
   

   

   Direktori tree file Android Manifest

   
   

    

   
   

   

   Isi file Android manifest pada baris paling atas



5. Ikuti arahan yang ada dan Anda akan dibawa untuk mend0wnl0ad file google-services.json. Seusai did0wnl0ad copy atau move file tersebut kedalam direktori flutter pada android/app. Selanjutnya Anda sanggup melanjutkan pendaftaran ke Firebase(tenang tidak ada hal khusus sehabis Anda memperoleh file JSON tersebut).


6. Supaya project Flutter sanggup membaca file JSON tersebut maka project memerlukan plugin google service. Silakan buka IDE/Editor kemudian buka direktori android/app/build.gradle dan tambahkan satu baris kode berikut pada final baris file.
   
   apply plugin: ‘com.google.gms.google-services’


7. Dalam file android/build.gradle tambahkan classpath ‘com.google.gms:google-services:3.2.1’. Di dalam buildscript rujukan sebagai berikut, bagi yang masih galau sanggup ke laman ini, tapi ingat, jangan disamakan, alasannya pada tutorial laman tersebut tidak secara khusus mengintegrasikan pada project Flutter.


8. Berikutnya kita atur dependecies pada file pubspec.yaml. Nah file tersebut mempunyai kegunaan untuk mengatur segala environtment library eksternal misal Asset gambar, font, dan library. Dua library yang akan kita integrasikan, Library firebase_ml_vision untuk Machine learning kit dari firebase. Karena kita membutuhkan kamera untuk mengambil gambar kita harus menyertakan library image_picker. Masukkan kedua library tersebut ke dalam dependencies Untuk dokumentasi lengkapnya sanggup dikunjungi di firebase_ml dan image_picker di Dart package. Harap Anda memperoleh versi yang baru, versi yang saya cantumkan dalam screenshoot tersebut sudah tidak terbarukan.


9. Nah, ketika sudah mengatur environment, project Flutter Anda seharusnya sanggup berkomunikasi dengan Firebase service dan memperoleh layanan Firebase yang ada. Khususnya yang akan kita buat disini yakni ML kit.

Let’s Code😎

Sepertinya kita akan eksklusif menulis kode atau kopas kode dibawah ini, hehe akan saya coba terangkan beberapa serpihan khususnya pada Machine Learning kit Flutter. Perlu teman-teman perhatikan bahwa kode yang saya tampilkan dibawah hanya berupa potongan kode saja, untuk lebih lengkapnya Anda sanggup fork atau clone project saya di github diakhir tulisan.

Java

<br/>import 'package:flutter/material.dart';<br/><br/>import 'dart:async';<br/>import 'dart:io';<br/><br/>import 'package:firebase_ml_vision/firebase_ml_vision.dart';<br/>import 'package:flutter/material.dart';<br/>import 'package:image_picker/image_picker.dart';<br/>import 'detector_painter.dart';

1 2 3 4 5 6 7 8 9

import 'package:flutter/material.dart';   import 'dart:async'; import 'dart:io';   import 'package:firebase_ml_vision/firebase_ml_vision.dart'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; import 'detector_painter.dart';

Petikan baris kode berikut dipakai untuk mengimport kelas dari luar. Bagian utama terang menyerupai Flutter material dipakai untuk mengimplementasi widget material, kemudian async dipakai untuk proses asynchrounous, IO dipakai untuk fungsi input/output menyerupai parsing json dll. Jangan lupa untuk memasukkan image picker dan firebase ml vision. Sedangkan kelas dart terakhir ialah kelas kustomasi untuk menciptakan kotak abjad dari text recognize yang dibaca oleh machine learning.

Java

<br/>Future<void> _getImage() async {<br/> setState(() {<br/> _imageFile = null;<br/> _imageSize = null;<br/> });<br/><br/> final File imageFile =<br/> await ImagePicker.pickImage(source: ImageSource.camera);<br/><br/> if (imageFile != null) {<br/> _getImageSize(imageFile);<br/> _scanImage(imageFile);<br/> }<br/><br/> setState(() {<br/> _imageFile = imageFile;<br/> });<br/> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Future<void> _getImage() async {     setState(() {       _imageFile = null;       _imageSize = null;     });       final File imageFile =         await ImagePicker.pickImage(source: ImageSource.camera);       if (imageFile != null) {       _getImageSize(imageFile);       _scanImage(imageFile);     }       setState(() {       _imageFile = imageFile;     });   }

Fungsi _getImage() diatas dipakai untuk mengambil file image hasil dari kamera. setState diawal menginisiasi bahwa variabel imageFile dan imageSize ialah null, kemudian sesudah diproses secara asynchrounouse yakni yang tercantum istilah await didepannya gres pengecekan, apakah hasil proses tersebut kosong atau tidak apabila tidak maka fungsi _getImagesize() dan _scanImage() dijalankan dengan isian parameter imageFile

SetState dipakai lagi untuk mengupdate nilai _imageFile yang sebelumnya null. Future ialah kembalian pada fungsi _getImage() dipakai untuk proses return yang bersifat asynchronous atau menjalankan operasi asynchronous. Bila menjalankan operasi asynchronous async dan await akan kita gunakan. Kenapa harus Async? alasannya proses pengambilan image membutuhkan komputasi yang lebih atau ada proses yang membutuhkan waktu tunggu menyerupai mengambil respon dari API internet. Hal tersebut tidak sempurna dilakukan pada main thread apabila tidak memakai proses Async, maka berakibat aplikasi menjadi Freezee.

Java

<br/>Future<void> _getImageSize(File fileImage) async {<br/> final Completer<Size> completer = new Completer<Size>();<br/><br/> final Image image = new Image.file(fileImage);<br/> image.image<br/> .resolve(const ImageConfiguration())<br/> .addListener((ImageInfo info, bool _) {<br/> completer.complete(<br/> Size(info.image.width.toDouble(), info.image.height.toDouble()));<br/> });<br/><br/> final Size sizeImage = await completer.future;<br/><br/> setState(() {<br/> _imageSize = sizeImage;<br/> });<br/> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Future<void> _getImageSize(File fileImage) async {     final Completer<Size> completer = new Completer<Size>();       final Image image = new Image.file(fileImage);     image.image         .resolve(const ImageConfiguration())         .addListener((ImageInfo info, bool _) {       completer.complete(           Size(info.image.width.toDouble(), info.image.height.toDouble()));     });       final Size sizeImage = await completer.future;       setState(() {       _imageSize = sizeImage;     });   }

Fungsi selanjutnya ialah fungsi _getImageSize() yang mempunyai parameter berupa file image. fungsi ini dipakai untuk menciptakan object Size image untuk selanjutnya diolah kembali oleh kelas detector_painter.dart. Secara sederhana fungsi ini memetakan Size kotak teks yang dibaca oleh machine learning Firebase sehingga nanti ada garis kotak yang melingkupi teks.

Completer diatas ialah cara untuk menciptakan objek Future secara async nantinya Completer bertugas untuk mengatakan pesan error dan mengeluarkan hasil prosesnya. SetState bertugas untuk mengupdate data _imageSize yang sebelumnya null dengan data Size hasil proses pengolahan image.

Java

<br/>Future<String> textScaned(List<TextBlock> listString) async {<br/> StringBuffer buffer = new StringBuffer();<br/> listString.forEach((item) {<br/> buffer.write(item.text);<br/> });<br/> setState(() {<br/> text = buffer.toString();<br/> });<br/> }

1 2 3 4 5 6 7 8 9

Future<String> textScaned(List<TextBlock> listString) async {     StringBuffer buffer = new StringBuffer();     listString.forEach((item) {       buffer.write(item.text);     });     setState(() {       text = buffer.toString();     });   }

textScanned() berfungsi sebagai penyedia teks yang ingin diolah, parameter fungsi tersebut ialah listString yakni list yang berisi objek TextBlock. TextBlock ialah salah satu API Firebase atau mesin OCR untuk membaca satu blok teks. Proses diatas me-looping listString yang kemudian di gabungkan menjadi satu kesatuan teks String memakai StringBuffer. setText kemudian mengupdate variabel text dengan hasil teks yang sudah disatukan.

Java

<br/>Future<void> _scanImage(File imageFile) async {<br/> setState(() {<br/> _scanResult = null;<br/> });<br/><br/> final FirebaseVisionImage visionImage =<br/> FirebaseVisionImage.fromFile(imageFile);<br/> final FirebaseVisionDetector textDetector =<br/> FirebaseVision.instance.textDetector();<br/><br/> final List<TextBlock> result =<br/> await textDetector.detectInImage(visionImage) ?? <dynamic>[];<br/><br/> textScaned(result);<br/><br/> setState(() {<br/> _scanResult = result;<br/> _visibility = false;<br/> });<br/> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Future<void> _scanImage(File imageFile) async {     setState(() {       _scanResult = null;     });       final FirebaseVisionImage visionImage =         FirebaseVisionImage.fromFile(imageFile);     final FirebaseVisionDetector textDetector =         FirebaseVision.instance.textDetector();       final List<TextBlock> result =         await textDetector.detectInImage(visionImage) ?? <dynamic>[];       textScaned(result);       setState(() {       _scanResult = result;       _visibility = false;     });   }

Selanjutnya fungsi _scanImage(), fungsi ini yang memuat kelas-kelas API Firebase dari library firebase_ml_vision yang kita import tadi. Baiklah kita coba dedah satu persatu, variabel visionImage dipakai untuk memperoleh objek FirebaseVisionImage menurut file image. Sementara untuk menciptakan teks detektor atau pendeteksi teks kita harus menginisiasi FirebaseVision.instance.textDetector() terlebih dahulu kemudian memanggil detectImage().

Jangan lupa untuk mengisi parameter tersebut dengan visionImage dari file image. operator double question ialah operator untuk mengecek apakah null atau tidak apabila null maka aplikasi akan menciptakan objek list gres dengan tipe data dynamic. Nah proses tersebut menghasilkan List Text Block. Untuk memperoleh String dari proses tersebut kita memakai fungsi yang telah kita rancang tadi yakni fungsi textScaned(). SetState akan mengupdate data _scanResult dengan result dan _visibility dengan false. Variabel _visibility dipakai untuk menghilangkan FAB ketika gambar telah selesai di ekstrak menjadi teks.

Java

<br/>CustomPaint _buildResult(Size imageSize, List<dynamic> result) {<br/> CustomPainter painter;<br/> painter = new TextDetectorPainter(imageSize, result);<br/> return new CustomPaint(painter: painter);<br/> }

1 2 3 4 5

CustomPaint _buildResult(Size imageSize, List<dynamic> result) {     CustomPainter painter;     painter = new TextDetectorPainter(imageSize, result);     return new CustomPaint(painter: painter);   }

Fungsi diatas bertugas untuk menciptakan kotak teks yang akan ditampilkan diatas gambar yang kita ambil melalui kamera, kotak teks tersebut melingkupi teks yang ada pada gambar. CustomPaint merupakan kelas dari Flutter untuk menggambar, kemudian fungsi TextDetectorPainter() ialah fungsi kustomasi untuk menggambar kotak yang melingkupi teks. Hasil kesannya nanti berupa CustomPaint Widget yang akan kita terapkan pada User Interface (UI).

Java

<br/> Widget _buildImage() {<br/> return new Container(<br/> child: SingleChildScrollView(<br/> child: new ConstrainedBox(<br/> constraints: new BoxConstraints(),<br/> child: new Column(<br/> children: <Widget>[<br/> new Container(<br/> constraints: BoxConstraints.expand(height: 700.0),<br/> decoration: new BoxDecoration(<br/> image: new DecorationImage(<br/> image: Image.file(_imageFile).image, fit: BoxFit.fill)),<br/> child: _imageSize == null || _scanResult == null<br/> ? const Center(<br/> child: Text('Loading scan Image',<br/> style:<br/> TextStyle(color: Colors.green, fontSize: 30.0)),<br/> )<br/> : _buildResult(_imageSize, _scanResult)),<br/> new Container(<br/> padding: const EdgeInsets.all(10.0),<br/> child: new Text(text, textAlign: TextAlign.center),<br/> ),<br/> ],<br/> ),<br/> )),<br/> );<br/> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Widget _buildImage() {     return new Container(       child: SingleChildScrollView(           child: new ConstrainedBox(         constraints: new BoxConstraints(),         child: new Column(           children: <Widget>[             new Container(                 constraints: BoxConstraints.expand(height: 700.0),                 decoration: new BoxDecoration(                     image: new DecorationImage(                         image: Image.file(_imageFile).image, fit: BoxFit.fill)),                 child: _imageSize == null || _scanResult == null                     ? const Center(                         child: Text('Loading scan Image',                             style:                                 TextStyle(color: Colors.green, fontSize: 30.0)),                       )                     : _buildResult(_imageSize, _scanResult)),             new Container(               padding: const EdgeInsets.all(10.0),               child: new Text(text, textAlign: TextAlign.center),             ),           ],         ),       )),     );   }

Java

<br/>@override<br/> Widget build(BuildContext context) {<br/> return new Scaffold(<br/> appBar: new AppBar(<br/> title: const Text("ML Kit Flutter"),<br/> ),<br/> body: _imageFile == null<br/> ? const Center(<br/> child: Text("No image Selected"),<br/> )<br/> : _buildImage(),<br/> floatingActionButton: new Opacity(<br/> opacity: _visibility ? 1.0 : 0.0,<br/> child: new FloatingActionButton(<br/> onPressed: _getImage,<br/> tooltip: "picking image",<br/> child: const Icon(Icons.add_a_photo),<br/> ),<br/> ),<br/> floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,<br/> );<br/> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

@override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: const Text("ML Kit Flutter"),       ),       body: _imageFile == null           ? const Center(               child: Text("No image Selected"),             )           : _buildImage(),       floatingActionButton: new Opacity(         opacity: _visibility ? 1.0 : 0.0,         child: new FloatingActionButton(           onPressed: _getImage,           tooltip: "picking image",           child: const Icon(Icons.add_a_photo),         ),       ),       floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,     );   }

Sehabis kita berkutat pada logika tibalah kita untuk menciptakan User Interface. Fungsi diatas dipakai untuk menampilkan image hasil sebelum diolah dan sesudah diolah dibawah gambar terdapat Textview sebagai penampil hasil ekstrak gambar menjadi teks. UI diatas memakai Scroll layout sehingga apabila gambar terlalu besar kita masih sanggup menggulung layar hingga bawah untuk melihat hasil teks yang ditampilkan.

Silakan Anda jalankan dengan perintah flutter run pada terminal. Perlu diperhatikan bahwa Firebase membutuhkan beberapa komponen untuk menunjang layanan, khususnya ML kit. Sebelum kita menjalankan, Firebase akan mend0wnl0ad komponen dari Google service. Pastikan koneksi Anda lancar, apabila Anda menjalankan proses TextRecognize sebelum proses d0wnl0ad selesai Anda maka ekstrak teks dari gambar tidak sanggup dilakukan atau tidak ada hasilnya. Namun jikalau masih belum sanggup atau hasil ekstrak masih belum tampil, coba Anda cek logcat pada terminal, kesalahan atau error apa yang sedang terjadi. Kemungkinan Anda harus meng-clear cache dari data Google service agar komponen tersebut mempunyai cukup ruang dari hasil d0wnl0ad komponen. Proses d0wnl0ad komponen hanya berlangsung sekali saja dalam satu perangkat sehingga ketika Anda sudah mend0wnl0ad Anda sanggup menjalankan aplikasi tersebut secara luring.

project lengkap saya sanggup teman-teman peroleh di Github ini

Sekian dari saya kurang lebihnya mohon maaf. Apabila ada pertanyaan silakan isi kolom komentar dan mari kita berdiskusi. 😅

“Ngoding itu diketik bukan di copas”

Anonim

Sumber aciknadzirah.blogspot.com