Mobile Application

Some Documentation for the Mobile App needed


General

General Documentation like diagrams, tasks and roles


FotoFaces

Some Documentation for the FotoFaces API and algorithms

Functional Requirements

  • The system must allow the user to login with username and password (or SSO)
  • The system must allow the user to check his current photo
  • The system must allow the user to check the properties needed for a photo to be valid
  • The system must allow the user to pick between taking a live photo or choosing a photo from the gallery and do one of them
  • The system must allow the user to choose between updating a valid photo, going back to the last menu or return to the main page
  • The system must send a photo and the user ID to the FotoFaces API
  • The system must receive a JSON from the FotoFaces API with the validation properties
  • The system must check the validity of a photo (based on its properties)
  • The system must show the user if the chosen photo is valid

Development Tools

React Native

React Native

Database

Database

Mock-Ups

Home Page

Home Page

Login

Login

Register

Register

Photo Upload

Photo Upload

Update Photo

Update Photo



Construction Phase

Photo


Take Photo

Take photo from camera roll

Choose Photo

Choose photo from gallery


Design

Home Page

Start Screen

Login

Login Screen

Register

Register Screen

Photo Upload

Main Screen for Validation

Main Page

Main Screen with properties

Accept Photo

Phot Accept Screen


Live Detection

The Three Steps

Home Page

Winking

Home Page

Rotating the head

Home Page

Smiling


Algorithm

The Live Detection algorithm is used when a user chooses to take a new photo in the main screen or the register screen. The camera option will take the user to an interface, based on a project done by Osama Qarem, where he has to put his face inside a frame and do some verification steps, like winking an eye.

We use an expo package called FaceDetector which uses functions of Google Mobile Vision framework to detect the faces on images and gives an array that contains information about the face, e.g. the coordinates of the center of the nose, the winking probability, etc.. The FaceDetector package is usually used along with the Camera package also from expo, where we can define the properties of the FaceDetector detection, as for example the minimum detection interval, which defines in what space of time it should return a new array of the properties of the face. By analysing that array, we can confirm if the user is smiling or not, by checking the value of the key 'smilingProbability', if the number is bigger, it means that the user is most likely smiling.

Architecture

Simple Architecture

Simple Architecture



Inception Phase

Communication Plan

Discord

Team communication

Slack

Advisor-Team discussion

Github

Project Bakclog management

Website

Promotional Website

Development Tools

React Native

Mobile App building

Github

Code repository

React

Website building

Discord

Team communication

Project Calendar

Project Calendar



Elaboration Phase

Non-Functional Requirements

  • Scalability - When many users use the API at the same time
  • Reliability - It shouldn’t crash all the time
  • Availability - Always available to any user
  • Maintainability - Maintain documentation and infrastructure
  • Usability - Intuitive application

Actors

Employees
Human Resources representatives

Use Cases

Use Case
User opens app, makes login, checks his or her photo, decides to take a newer photo, the app offers mechanisms to upload or to take a new photo, User waits for the response containing all the metrics of the FotoFaces then the mobile app validates those criterias and a new screen appears to the user offering them to take the red or the blue pill, while exhibiting the photo after cropping and fixing the pitch, yaw and raw.

Domain Model

Domain Model

Deployment Diagram

Deployment Model

State of Art

id.ua.pt already offers services that includes a similar software than the one we are going to build





Construction Phase

Database

Create

Database Creation

Update

Database Update

Get

Database Get

Get

Database Endpoints


Message Dealing

Get

Http message Example

Functional Requirements

  • The system must be able to receive a photo and an user ID
  • The system must get the user old photo from the database
  • The system must compare the photos and check if it’s the same person
  • The system must detect a series of properties from the new photo
  • The system must send the detected properties in a JSON format to the user
  • The systen must allow for plugins to be added for detection of more properties

Development Tools

React Native

Flask

React Native

OpenCV

React Native

Dlib

Algorithms

  • Facial Recognition
  • Face Reference Detected
  • Face Orientation
  • Frontal Face
  • Analyse photo quality
  • Analyse photo brightness
  • Analyse colored Picture
  • Blur background
  • Resize
  • Cropping
  • EyesOpen
  • Gaze
  • Hat
  • Glasses
  • Sunglasses
  • Implement deep learning

Properties

Returns True or False for the following:
Returns Levels for the following:
  • Has a face
  • Macthes old photo
  • Blurred
  • Cropped
  • Live
  • Colored
  • Eyes Open
  • Frontal Profile
  • Hat
  • Glasses
  • Sunglasses
  • Brightness
  • Quality



Construction Phase

Plugin Arquitecture

plugin

Each plugin folder (like Gaze) contains a python file with the algorithm code, with useful functions if needed, and a .yaml configuration file.

The main application will gather all the plugins and run them consecutively, until there are no more to execute.

Then it will gather each algorithm result and convert it into a single json message



Testing

All tests are conducted to a specified algorithm

They were made to observe the time the algorithms take to execute, from both the old and new fotofaces, as well as how well do they work

Face Detection

faceDetection


Facial Comparison

comparison_success

Same person = True

comparison_fail

Different people = False


Algorithms Implemented

Face Detection

Face Recognition

faceDetection
face recognition 1
face recognition 2

Returns a shape

Returns true or false, will return true


Sunglasses Detection

Glasses Detection

sunglasses 1
sunglasses 2
glasses 1
glasses 2

Returns true or false, will return true to the left and true to the right

Returns true or false, will return true to the left and true to the right


Focus/ Gaze

Image Quality

gaze 1
gaze 2
img quality 1
img quality 2

Returns bewteen 50 and 100, the higher the better

Returns value above 0, the lower the better


Head Position

Hat Detection

head pose 1
head pose 2
hats 1
hats 2

Returns values above 0, the lower the better

Returns true or false, will return true to the left and true to the right


Brightness

Open Eyes

brightness 1
brightness 2
openeyes 1
openeyes 2

Returns value above 0, the higher the better

Returns values between 0.10 and 0.50, the higher the better


Cropping

cropped 1
cropped 2

Returns a cropped image