---
description: >-
  This Flutter demo app demonstrates face recognition, face liveness detection,
  face auto-capture, age/gender detection, automatic face capture, face quality
  facial occlusion, eye closure.
---

# FaceAttribute - Flutter

## Overview

This demo project integrates several facial recognition technologies, including 3D passive face liveness detection, face recognition, automatic face capture, and analysis of various face attributes such as age, gender, face quality, facial occlusion, eye closure, and mouth opening.

The system utilizes face liveness detection technology to generate a real-time liveness score based on a single image captured by the camera.

Additionally, the demo offers face recognition capabilities, enabling enrollment from a gallery and real-time identification of faces captured by the camera.

The demo also features an automatic face capture function that verifies various facial attributes, such as face quality, facial orientation (yaw, roll, pitch), facial occlusion (e.g., mask, sunglass, hand over face), eye closure, mouth opening, and the position of the face within the region of interest (ROI).

## Github

{% embed url="https://github.com/kby-ai/FaceAttribute-Flutter" %}

## Google Play

{% embed url="https://play.google.com/store/apps/details?hl=en_US&id=com.kbyai.faceattribute" %}

## YouTube

{% embed url="https://www.youtube.com/watch?v=-WiAethTacc" %}

## Screenshots

<div><figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FypwECVCx3ttLjlWud1kI%2F285462563-66a5037d-426c-4ea0-8e65-db0f456360d0.png?alt=media&#x26;token=38bcbcb2-3d21-4554-9253-8b7e46ec6634" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FsifYpnZaLkeReRQlhmzQ%2F238231607-2214b69f-39e6-4f3f-9cd9-731fa869c57c.png?alt=media&#x26;token=fad2fb60-a812-45d2-acb3-e10f6d383db9" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FeNdjYnr4n3VjXN9Q3b8Y%2F238231655-2d119006-1f2f-4852-aa99-7b3f81e6d73a.png?alt=media&#x26;token=85572948-3c11-496f-b199-cddc75045b44" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FlItuhjF3WinoSYZmuf5D%2F238231576-eaeb83b5-fb22-4c20-986c-bc8c8597d8a4.png?alt=media&#x26;token=05627a1c-7eb7-4ac3-b814-7ad707a65e20" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FTBpWjbZaCJCcBvpq9eiO%2F238232235-1b04943f-c00a-4632-857a-8b53485c962e.png?alt=media&#x26;token=e21a6a8e-23ec-40b5-a0c7-7279451acb75" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2Fld4MajBVmwceQAIxFu4P%2F238232177-8e1d34a5-8171-4334-9a44-e761460f63cd.png?alt=media&#x26;token=dbce9666-87c3-48c4-8bb5-f49cc0ede3a1" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FbOYqHraRXVU6boBhjMPD%2F238232354-63c283a2-d25d-46c9-82bb-2b9c7abd5b2c.png?alt=media&#x26;token=9e9062eb-90a1-4395-8bb7-5a5493bc928c" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FneJSCXLoObJHqx7Wkf6O%2F238232400-ff9758fd-51ed-4c78-a1fd-074fed5a33e4.png?alt=media&#x26;token=1577b311-1311-4297-a3e4-d5a0c9282242" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FkaGfRLIp386c0XagUQQP%2F238232323-4a270e7c-8840-44ea-8e55-9625bd70f196.png?alt=media&#x26;token=b1fdf77c-b717-40d2-b508-66872e2df45f" alt=""><figcaption></figcaption></figure></div>

## How to Run

### 1. Flutter Setup

Make sure you have Flutter installed.

We have tested the project with Flutter version `3.22.3`.

If you don't have `Flutter` installed, please follow the instructions provided in the official `Flutter` documentation:

{% embed url="https://docs.flutter.dev/get-started/install" %}
flutter installation reference
{% endembed %}

### 2. Running the App

Run the following commands:

```bash
flutter clean
flutter pub get
flutter run
```

If you plan to run the iOS app, please refer to the following link for detailed instructions:

{% embed url="https://docs.flutter.dev/deployment/ios" %}

## FaceSDK Plugin

#### 1.1 \`Face SDK\` Setup

> Android

* Copy the SDK (`libfacesdk` folder) to the `android` folder in your project.
* Add SDK to the project in `settings.gradle`

```gradle
include ':libfacesdk'
```

#### 1.2 \`FaceSDK Plugin\` Setup

* Copy `facesdk_plugin` folder to the root folder of your project.
* Add the dependency in `pubspec.yaml` file.

```yaml
facesdk_plugin:
    path: ./facesdk_plugin
```

* Import the `facesdk_plugin` package.

```dart
import 'package:facesdk_plugin/facesdk_plugin.dart';
import 'package:facesdk_plugin/facedetection_interface.dart';
```

### 2. API Usage

#### 2.1 FacesdkPlugin

* Activate the `FacesdkPlugin` by calling the `setActivation` method:

```dart
  final _facesdkPlugin = FacesdkPlugin();
  ...
  await _facesdkPlugin
          .setActivation(
              "Os8QQO1k4+7MpzJ00bVHLv3UENK8YEB04ohoJsU29wwW1u4fBzrpF6MYoqxpxXw9m5LGd0fKsuiK"
              "fETuwulmSR/gzdSndn8M/XrEMXnOtUs1W+XmB1SfKlNUkjUApax82KztTASiMsRyJ635xj8C6oE1"
              "gzCe9fN0CT1ysqCQuD3fA66HPZ/Dhpae2GdKIZtZVOK8mXzuWvhnNOPb1lRLg4K1IL95djy0PKTh"
              "BNPKNpI6nfDMnzcbpw0612xwHO3YKKvR7B9iqRbalL0jLblDsmnOqV7u1glLvAfSCL7F5G1grwxL"
              "Yo1VrNPVGDWA/Qj6Z2tPC0ENQaB4u/vXAS0ipg==")
          .then((value) => facepluginState = value ?? -1);
```

* Initialize the `FacesdkPlugin`:

```dart
await _facesdkPlugin
          .init()
          .then((value) => facepluginState = value ?? -1)
```

* Set parameters using the `setParam` method:

```dart
await _facesdkPlugin.setParam({
      'check_liveness_level': livenessLevel ?? 0,
      'check_eye_closeness': true,
      'check_face_occlusion': true,
      'check_mouth_opened': true,
      'estimate_age_gender': true
    });
```

* Extract face feature using the `extractFaces` method:

```dart
final faces = await _facesdkPlugin.extractFaces(image.path)
```

* Calculate similarity between faces using the `similarityCalculation` method:

```dart
double similarity = await _facesdkPlugin.similarityCalculation(
              face['templates'], person.templates) ??
          -1;
```

#### 2.2 FaceDetectionInterface

To build the native camera screen and process face detection, please refer to the following file in the Github repository.

This file contains the necessary code for implementing the camera screen and performing face detection.

{% embed url="https://github.com/kby-ai/FaceAttribute-Flutter" %}
