Unleashing the Power of TensorFlow: Integrating Machine Learning Magic into Your Flutter Apps 🚀✨
Tags: flutter
Published: 2023-11-26 16:31:44

In a world where machine learning seamlessly intertwines with our daily routines, from personalized music recommendations on YouTube to curated suggestions on Amazon, the potential of this technology is boundless. But how can we harness its power?

Join us on a journey through the intricacies of incorporating machine learning models as the brains behind your Flutter applications. This blog unveils the simplicity of creating robust ML-driven Flutter experiences, offering a glimpse into the vast possibilities that await. Let's delve into the realm of technology where innovation meets accessibility.

## Definitions

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utlfnwizxs4y2djcxhog.png)


## 1. Artificial Intelligence (AI):
Artificial Intelligence, or AI, refers to machines performing tasks in a smart and intelligent manner. Consider your experience with YouTube's search bar—typing even non-starting lyrics fetches almost perfect results. AI enables machines to handle tasks that typically require human intelligence, demonstrating the ability to discern and understand.

## 1.2. Machine Learning (ML):
Machine Learning is a subset of AI, focusing on exposing machines to new data and enabling them to decide future outputs. Think of it as a sub-field of AI dedicated to extracting patterns from data sets. With exposure to new data and iterative processing, machines gradually reach expected results, finding rules for optimal behavior and adapting to changing data, much like humans do.

## 1.3. Deep Learning (DL):
Deep Learning is a subset of Machine Learning, involving neural networks with multiple layers. These networks aim to simulate human brain behavior, essentially creating an artificial human brain. Even with a single layer, approximate predictions are possible, but additional layers optimize and refine accuracy, making the system more sophisticated.

## Types of ML
Before diving into implementation, understanding the types of machine learning is crucial. Let's explore the landscape to determine which type best suits our intended functionality.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m62if40q6yaqeez1bgcm.png)
2.1. Supervised Learning
In the realm of supervised learning, the process unfolds under watchful guidance. The machine learns from data that is already classified — each piece with fixed labels, mapping inputs to outputs. Once mastered, the machine becomes adept at classifying new data. Think fraud detection, spam filtering, and beyond.

2.2. Unsupervised Learning
Contrasting the structured nature of supervised learning, unsupervised learning operates in a realm of raw, untagged data. Here, the machine takes the reins, creating new classes by uncovering patterns. Ideal for tasks like clustering and association.

2.3. Semi-Supervised Learning
Recognizing the limitations of both supervised and unsupervised learning, semi-supervised learning blends the strengths of both. By feeding both raw and categorized data to the machine, it overcomes constraints. The machine classifies raw data and, if needed, forms new clusters.

2.4. Reinforcement Learning
Enter reinforcement learning, where the machine learns from its own journey. Feedback from the last output, coupled with new data, guides the machine's evolution. This feedback loop continues until perfection is reached, akin to a human child learning from exploration and correction. Users provide feedback in the form of punishment or reward, shaping the machine's growth — much like a search algorithm refining its results based on user interaction.

Embark on this journey through machine learning types, and discover the nuances that make each methodology a powerful tool in shaping intelligent systems.

## TensorFlow
Machine learning, a labyrinth of tasks encompassing data acquisition, model training, prediction serving, and result refinement, finds its ally in TensorFlow. Developed by Google in November 2015, TensorFlow is a comprehensive framework that streamlines these intricate processes, making them more accessible.

## 3.1. TensorFlow Lite: Unleashing Possibilities on Limited Resources
Enter TensorFlow Lite, a nimble sibling of the comprehensive TensorFlow framework. Tailored for devices with constrained resources like limited RAM or memory, TensorFlow Lite allows the seamless execution of machine learning models in such resource-challenged environments.

## 3.2. TensorFlow Lite Features: A Compact Powerhouse
TensorFlow Lite addresses five pivotal constraints, optimizing on-device machine learning:

1. **Latency**: Eliminates the need for round-trip communication with a server.
2. **Privacy**: Ensures no personal data leaves the device, prioritizing user privacy.
3. **Connectivity**: Operates independently of internet connectivity, enhancing accessibility.
4. Size: Reduces the model and binary size, minimizing the footprint on the device.
5. **Power Consumption**: Prioritizes efficiency in inference and lacks the need for constant network connections.

**Versatility and Performance in a Compact Package:
**

- **Device Compatibility**: Extends support to Android and iOS devices, embedded Linux, and microcontrollers.
- **Programming Languages**: Adaptable to Java, Swift, Objective-C, C++, and Python, offering flexibility in development.
- **High Performance**: Leverages hardware acceleration and model optimization for seamless, high-performance execution.
- **End-to-End Examples**: TensorFlow Lite boasts end-to-end examples for prevalent machine learning tasks, such as image classification, object detection, pose estimation, question answering, text classification, and more. These examples cater to multiple platforms, providing a versatile toolkit for developers.

In the realm of machine learning, TensorFlow Lite emerges as a compact powerhouse, unlocking the potential of on-device ML even in resource-constrained settings. Let's embark on a journey where efficiency meets versatility in the palm of your hand.

## What is Flutter?

Flutter is an open source, cross-platform development framework. With the help of Flutter by using a single code base, we can create applications for Android, iOS, web, as well as desktop. It was created by Google and uses Dart as a development language. The first stable version of Flutter was released in Apr 2018, and since then, there have been many improvements. 

## Building an ML-Flutter Application
Embark on a journey of innovation as we dive into the creation of a captivating Flutter application, a marvel that unravels the mysteries of gauging a person's state of mind through facial expressions. Brace yourself for a captivating adventure as we unfold the steps tailored for an Android-native application. If you're venturing into the realm of iOS, worry not! Find the corresponding steps and enchanting guidance in the links provided. Let the magic of machine learning and Flutter converge in this spellbinding creation! 🚀✨

**1. TensorFlow Lite - Native setup (Android)**

- In android/app/build.gradle, add the following setting in the android block:
` aaptOptions {
        noCompress 'tflite'
        noCompress 'lite'
    }`

**2. TensorFlow Lite - Flutter setup (Dart)**

- Create an assets folder and place your label file and model file in it. (These files we will create shortly.) In pubspec.yaml add:
` assets:
   - assets/labels.txt
   - assets/<file_name>.tflite`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57s4513k1dd1z32asy1c.png)

- Run this command (Install TensorFlow Light package): 
`$ flutter pub add tflite
`

- Add the following line to your package's pubspec.yaml (and run an implicit flutter pub get):
`dependencies:
     tflite_flutter: ^0.10.3`


- Now in your Dart code, you can use:
`import 'package:tflite/tflite.dart';
`

- Add camera dependencies to your package's pubspec.yaml (optional):
`dependencies:
     camera: ^0.10.0+1`

- Now in your Dart code, you can use:
`import 'package:camera/camera.dart';
`

- As the camera is a hardware feature, in the native code, there are few updates we need to do for both Android & iOS.  To learn more, visit:
https://pub.dev/packages/camera

- Following is the code that will appear under dependencies in pubspec.yaml once the the setup is complete.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5hcsgkm857melki91cj.png)

- Flutter will automatically download the most recent version if you ignore the version number of packages.

- Do not forget to add the assets folder in the root directory.

## 5.3. Generate model (using website)

- Visit the following website 

- https://teachablemachine.withgoogle.com/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fdou451cgtmchsbjmkc.png)

- Click on Get Started


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p63dagg6s6xf9hi2bqsc.png)



- Select Image project

- There are three different categories of ML projects available. We'll choose an image project since we're going to develop a project that analyzes a person's facial expression to determine their emotional condition.

- The other two types, audio project and pose project, will be useful for creating projects that involve audio operation and human pose indication, respectively.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ljrk7q6ljviztznjhb0.png)


- Select Standard Image model

- Once more, there are two distinct groups of image machine learning projects. Since we are creating a project for an Android smartphone, we will select a standard picture project.

- The other type, an Embedded Image Model project, is designed for hardware with relatively little memory and computing power.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok3sah3c9ksfkjucj8n7.png)

- Upload images for training the classes

- We will create new classes by clicking on “Add a class.”

- We must upload photographs to these classes as we are developing a project that analyzes a person's emotional state from their facial expression.

- The more photographs we upload, the more precise our result will be.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05n3mfe1v2m0949kwq0a.png)

- Click on train model and wait till training is over


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/705mxhcdr4kat2abc9ov.png)

- Click on Export model

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dthqllkg91dvigjxntje.png)

- Select TensorFlow Lite Tab -> Quantized  button -> Download my model

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1lp5xwij30r2vme74bf.png)

## 5.4. Add files/models to the Flutter project

- Labels.txt
File contains all the class names which you created during model creation.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5j5wonissootm6rze8b.png)

- *.tflite
File contains the original model file as well as associated files a ZIP.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3qa9xpz0dbhhzxllf0u.png)

## 5.5. Load & Run ML-Model


- We are importing the model from assets, so this line of code is crucial. This model will serve as the project's brain.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk7m032k8m14wxjeorpi.png)

- Here, we're configuring the camera using a camera controller and obtaining a live feed (Cameras[0] is the front camera).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yfjkja2l78dfvje34or.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urthp8vmvcon40dqy4jz.png)

## Conclusion

We can achieve good performance of a Flutter app with an appropriate architecture, as discussed in this blog.