Flutter Firebase ML Vision Examples

FFlutter Firebase ML Vision How To Examples

Firebase ML Vision is a powerful library that allows you to easily integrate machine learning models into your Flutter applications. With Firebase ML Vision, you can perform various tasks such as text recognition, image labeling, face detection, and more. In this tutorial, we will explore different examples of using the firebase_ml_vision package in Flutter.

Installation

To get started, you need to add the firebase_ml_vision package to your Flutter project. Open your project's pubspec.yaml file and add the following dependency:

dependencies:
  firebase_ml_vision: ^0.12.0+2

Save the file and run the following command in your terminal to fetch the package:

flutter pub get

Now that you have installed the package, let's dive into some examples.

Example 1: Text Recognition

Text recognition is a common use case in mobile applications. With Firebase ML Vision, you can easily extract text from images. Let's create a simple Flutter application that recognizes text from an image.

1. Import the necessary packages:

import 'package:firebase_ml_vision/firebase_ml_vision.dart';
import 'package:image_picker/image_picker.dart';

2. Create a method to pick an image from the gallery using the image_picker package:

Future<File> pickImageFromGallery() async {
  final picker = ImagePicker();
  final pickedFile = await picker.getImage(source: ImageSource.gallery);
  return File(pickedFile.path);
}

3. Display a button to pick an image and recognize the text:

FlatButton(
  onPressed: () async {
    final imageFile = await pickImageFromGallery();
    final firebaseVisionImage = FirebaseVisionImage.fromFile(imageFile);
    final textRecognizer = FirebaseVision.instance.textRecognizer();
    final visionText = await textRecognizer.processImage(firebaseVisionImage);

    for (final textBlock in visionText.blocks) {
      for (final textLine in textBlock.lines) {
        for (final textElement in textLine.elements) {
          print(textElement.text);
        }
      }
    }
  },
  child: Text('Pick Image'),
),

In this example, we use the textRecognizer to process the image and extract the text. The recognized text is then printed to the console.

Example 2: Image Labeling

Image labeling is another useful feature provided by Firebase ML Vision. It allows you to classify images into different categories. Let's create a Flutter application that labels images using Firebase ML Vision.

1. Import the necessary packages:

import 'package:firebase_ml_vision/firebase_ml_vision.dart';
import 'package:image_picker/image_picker.dart';

2. Create a method to pick an image from the gallery:

Future<File> pickImageFromGallery() async {
  final picker = ImagePicker();
  final pickedFile = await picker.getImage(source: ImageSource.gallery);
  return File(pickedFile.path);
}

3. Display a button to pick an image and perform image labeling:

FlatButton(
  onPressed: () async {
    final imageFile = await pickImageFromGallery();
    final firebaseVisionImage = FirebaseVisionImage.fromFile(imageFile);
    final imageLabeler = FirebaseVision.instance.imageLabeler();
    final labels = await imageLabeler.processImage(firebaseVisionImage);

    for (final label in labels) {
      print('${label.label}: ${label.confidence}');
    }
  },
  child: Text('Pick Image'),
),

In this example, we use the imageLabeler to classify the image and obtain a list of labels. The labels and their corresponding confidences are then printed to the console.

Example 3: Face Detection

Face detection is a popular feature in many applications. With Firebase ML Vision, you can detect faces in images and perform various operations on them. Let's create a Flutter application that detects faces using Firebase ML Vision.

1. Import the necessary packages:

import 'package:firebase_ml_vision/firebase_ml_vision.dart';
import 'package:image_picker/image_picker.dart';

2. Create a method to pick an image from the gallery:

Future<File> pickImageFromGallery() async {
  final picker = ImagePicker();
  final pickedFile = await picker.getImage(source: ImageSource.gallery);
  return File(pickedFile.path);
}

3. Display a button to pick an image and detect faces:

FlatButton(
  onPressed: () async {
    final imageFile = await pickImageFromGallery();
    final firebaseVisionImage = FirebaseVisionImage.fromFile(imageFile);
    final faceDetector = FirebaseVision.instance.faceDetector();
    final faces = await faceDetector.processImage(firebaseVisionImage);

    for (final face in faces) {
      final bounds = face.boundingBox;
      final smileProb = face.smilingProbability;
      final leftEyeOpenProb = face.leftEyeOpenProbability;
      final rightEyeOpenProb = face.rightEyeOpenProbability;

      print('Bounds: $bounds');
      print('Smile Probability: $smileProb');
      print('Left Eye Open Probability: $leftEyeOpenProb');
      print('Right Eye Open Probability: $rightEyeOpenProb');
    }
  },
  child: Text('Pick Image'),
),

In this example, we use the faceDetector to detect faces in the image. We can then access various properties of each detected face, such as the bounding box, smile probability, and eye open probabilities.

These are just a few examples of what you can do with the firebase_ml_vision package in Flutter. Experiment with different ML Vision features and explore their capabilities to enhance your applications.