A facial recognition/detection app with Angular using Microsoft's Face API

Overview

Deja-Vu

Deja-Vu Banner

 

 


Overview

Deja-Vu is a client side application generated with Angular CLI version 13. The core function of this application is to detect, recognize and analyze human faces by uploading images to the web application with the help of Micrsoft's Face API; An AI service that analyzes faces in images. Face API's features include face detection that perceives facial features and attributesβ€”such as a face mask, glasses, or face locationβ€”in an image, and identification of a person by a match to your private repository or via photo ID.


Features and Capabilities

The application is capable of following functionalities, with room for improvement:

  • Detect: Facial features and attributes of a single person can be detected by uploading an image.
  • Train: A Person Group can be creaeted, withinn which, a Person can be created and his/her images can be trained.
  • Identify: A person can be identified from a pre-existing and pre-trained Person Group.

For more detail, please refer to Azure Face API documentation. PRs and Contributions are welcome.


Tech Stack

The application is built using following technologies:


Project Structure

A general overlay of Project Structure and it's components and assets.

Project Structure


Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.


Documentation GitHub Pages Deployment

Developer Documentation is available through compodoc. The documentation website can be served locally by running npm run compodoc, and is accessible at http://127.0.0.1:8080.


Sample Face Attrbutes Response

[
  {
    "faceId": "49d55c17-e018-4a42-ba7b-8cbbdfae7c6f",
    "faceRectangle": {
      "top": 131,
      "left": 177,
      "width": 162,
      "height": 162
    },
    "faceAttributes": {
      "smile": 0,
      "headPose": {
        "pitch": 0,
        "roll": 0.1,
        "yaw": -32.9
      },
      "gender": "female",
      "age": 22.9,
      "facialHair": {
        "moustache": 0,
        "beard": 0,
        "sideburns": 0
      },
      "glasses": "NoGlasses",
      "emotion": {
        "anger": 0,
        "contempt": 0,
        "disgust": 0,
        "fear": 0,
        "happiness": 0,
        "neutral": 0.986,
        "sadness": 0.009,
        "surprise": 0.005
      },
      "blur": {
        "blurLevel": "low",
        "value": 0.06
      },
      "exposure": {
        "exposureLevel": "goodExposure",
        "value": 0.67
      },
      "noise": {
        "noiseLevel": "low",
        "value": 0
      },
      "makeup": {
        "eyeMakeup": true,
        "lipMakeup": true
      },
      "accessories": [],
      "occlusion": {
        "foreheadOccluded": false,
        "eyeOccluded": false,
        "mouthOccluded": false
      },
      "hair": {
        "bald": 0,
        "invisible": false,
        "hairColor": [
          {
            "color": "brown",
            "confidence": 1
          },
          {
            "color": "black",
            "confidence": 0.87
          },
          {
            "color": "other",
            "confidence": 0.51
          },
          {
            "color": "blond",
            "confidence": 0.08
          },
          {
            "color": "red",
            "confidence": 0.08
          },
          {
            "color": "gray",
            "confidence": 0.02
          }
        ]
      }
    }
  }
]
You might also like...

Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap βœ¨πŸ‘Œ

Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap βœ¨πŸ‘Œ

⚠️ IMPORTANT UPDATE: July 13th, 2022 Hi, this is Oz Ramos and I wanted to quickly explain what happened to this project and what I plan to do moving f

Jan 3, 2023

Hand gesture recognition with React.js, Tensorflow.js and Fingerpose

Hand gesture recognition with React.js, Tensorflow.js and Fingerpose

Dec 7, 2022

🌠 Recognition platform built for developer endorsements

🌠 Recognition platform built for developer endorsements

Spekni Recognition platform built for developer endorsements Tech Stack 🎯 NextJS - UI framework β˜‘οΈ Vercel - Hosting and deployment πŸ”’ NextAuth.js: Gi

Aug 8, 2022

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular 14 File Upload to Firebase Storage example I will show you how to make Angular 14 Firebase Storage: File Upload/Display/Delete Application usi

Sep 7, 2022

Defacement detection with deep learning

 Defacement detection with deep learning

In0ri is a defacement detection system utilizing a image-classification convolutional neural network. Introduction When monitoring a website, In0ri wi

Nov 30, 2022

Ethereum smart contract gas cost waste pattern detection and patching tool

Ethereum smart contract gas cost waste pattern detection and patching tool

Ethereum smart contract gas cost waste pattern detection and patching tool

Mar 23, 2022

Open Horizon service container demonstrating Node-RED Object Detection

Open Horizon service container demonstrating Node-RED Object Detection

service-node-red-object-detection Open Horizon service container demonstrating Node-RED Object Detection. This is an Open Horizon configuration to dep

Dec 25, 2022

An Anime Game launcher for Linux with automatic patching fixing detection of Linux/Wine and telemetry disabling

An Anime Game launcher for Linux with automatic patching fixing detection of Linux/Wine and telemetry disabling

An Anime Game launcher for Linux with automatic patching fixing detection of Linux/Wine and telemetry disabling

Jan 4, 2023

This is food detection WebApp, which will tell users about the nutrients value of particular food image which they upload

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Sep 8, 2022
Owner
Wali Ullah
Proactive & enthusiastic computer engineer seeking challenging projects.
Wali Ullah
Smart-face-detector - A face detector application made with React JS, Node JS, Express JS, and PostgreSQL.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ken Tandrian 1 Sep 24, 2022
Implement MTCNN with Tensorflow.js. A face detection framework with MTCNN and Tensorflow.js

mtcnn-tfjs Implement mtcnn with Tensorflow.js What is this? A face detection framework with MTCNN and Tensorflow.js Give me a ⭐️ , if you like it ❀️ (

Dat Le 10 Nov 23, 2022
An application to map out game reserves using aerial photography, intelligent image stitching and AI driven recognition focus.

Map Out Game Reserves Using Aerial Photographs An application to map out game reserves using aerial photography, intelligent image stitching and AI dr

COS 301 - 2022 4 Sep 29, 2022
JSNation 2022 - Building a Solar System using Hand Recognition and Three.js

Building a Solar System using Hand Recognition and Three.js ?? Accompanying code for JSNation 2022 talk. Demo video here: https://www.youtube.com/watc

Liad Yosef 16 Dec 14, 2022
Solve reCAPTCHA challenges by using offline speech recognition.

reCAPTCHA Solver Solve reCAPTCHA challenges by using offline speech recognition. It can be very useful when you want to do E2E tests with your applica

JacobLinCool 9 Nov 28, 2022
With this script you can bypass both root detection and ssl pinning for your android app.

frida_rootansslbypas β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ•— β–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—

themalwarenews 14 Dec 24, 2022
πŸ“· Detects your face and adds filters from your webcam. You can capture and download images.

Snapchat Filters on WebCam ?? Detects your face and adds filters from your webcam. You can capture and download images. ?? Visit site ?? Screenshots ?

Orhan Emre Dikicigil 2 Apr 27, 2022
A web tool for you to record your face and turn it into a 3D animation file.

Web Face Capture A free, open-source web tool for you to record your face and turn it into a 3D animation file. Go to the website Allow camera permisi

James Lee 9 Jan 6, 2023
In Your Face shows you Doom 'Ouch Faces' that correlate to the number of errors in your code!

In Your Face Watch how I made this extension on YouTube here In Your Face is a VS Code extension that shows you Doom 'Ouch Faces' that correlate to th

Virej Dasani 125 Dec 25, 2022
A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!

Responsify.js A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D When images are used in a responsive container

Wenting Zhang 1.3k Dec 14, 2022