Integrating Flutter and TensorflowLite My First Experience.

Photo: Google Images

I have been working on flutter for a long time but integrating Tensorflow lite & Flutter is always tricky in some sort, in the area of satisfying dependencies required. And that’s where Dev experience comes in the phase of Debugging.

Today, we’ll be developing a cat & dog classifier application. In the process, playing with the dataset and training it for the final application.

Resolving Prerequisites

Moving on assuming that your flutter systems are up-to-date and working fine.

First, Create and set up a new flutter project.

Now, We can start a project by simple Command

Ctrl+Shift+P

Name the project and specify the project location

Setup is completed successfully.

Step-1: Declaring Required Packages in pubspec.yaml

Go to the pub. dev & search for respective packages, ultimately declaring them in pubspec.yaml file.

Run the command

flutter pub get

For TFLite, some further steps are required

For Android, In android/app/build.gradle, add the following setting in android block.

aaptOptions {
        noCompress 'tflite'
        noCompress 'lite'
    }

And here we are now getting started.

Step-2: Creating SplashScreen

While our main.dart is short, sweet, and concise, as shown below. Routing directly to the MySplash() class in splashscreen.dart, would be fun.

Expanding the context about the package we are using: A splash screen package to be used for an intro for any flutter application easily with a lot of customization. This package is a really good starting point for beginners playing with flutter splash screens.

So after creating a new dart file in the lib directory.

We create a stateful widget and develop the Splashscreen UI. Code has been commented so it is understandable, for implementation.

As of now, our Splash Screen UI is complete, let's test the application.

Shall We?

Splash Screen

So We are on the Right Track, our next task would be to complete the homepage.

Step-3: Creating Homepage UI and Training classification model

Now, we are getting to GOOOD STUFF!!!

This can start to seem a little scary, but bear with me if you are curious about your potential with flutter. It’s all Worth it! :)

Our User-Interface consists of a simple button layout to simplify functionality.

Pretty decent, actually.

Home page

After this point, The developer in me started getting excited, cause I was starting to do something new. :D

• Go to kaggle.com & search for Cat & Dog Dataset.
• You’ll come across something like this.

Cat and Dog Dataset

• Now Download it & Extract it.
• You’ll get 2 folders: training_dataset & test_dataset.
• Here enters an essential tool “Teachable Machine” -->

Teachable Machine is a web-based tool that makes creating machine learning models fast, easy, and accessible to everyone.

• This tool leads to a more efficient approach for training a respective model. Caution: Not Applicable for larger Dataset.

Teachable Machine

• Enter labels in the respective classes and train the model, finally exporting a tflite model data file for further use.
• Which would be transferred to the assets folder in Flutter App Folder as shown below.

Labels & tflite model files

Hence, Our Step-3 is completed and all is left to implement the functionality of Tensorflow lite & Camera invocation.

Step-4: Implementing Tensorflow & Camera Invoke Methods

Now reaching in final steps of development, we have to implement methods to ensure Camera invocation and TFlite model running on the image.

So Adding Remaining Code in home.dart, comment shown in step-3.

This code consists of initState(), detectImage(), loadModel(), pickImage(), pickGalleryImage():

• initState(): Initializes the state & loads model simultaneously.
• detectImage(): Triggers TFlite Classification model.
• loadModel(): Declares the labels.txt and model_unquant.tflite to integrate.
• pickImage(): Invokes the device camera & facilitate image capture, simulataneously predicting result.
• pickGalleryImage(): Invokes the Gallery & traversing saved photos and using for prediction.

Hence, Ultimately, The Application Is Done.

Creating a Live App with a computing module for relevant inferences is pretty exciting and cool in its own right.

Here, you can see a final screenshot of the beta app.

Wrapping Up

From my developer point-of-view, This project is really intuitive and cool in its own right. Staring the experience of integrating complex TFlite models.

Creating Really Cool Apps.

For Live Demo, Code and testing it. Project Github Link is down below:

Cyclostone/Cat_Dog_Classifier

Give it some love 💌

Try this one 👌

Keep Creating & Inventing 🔧