Skip to content

abdilmajid/faceRecognitionAppReact

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Face Recognition App

This is a Full Stack Application that uses React for the frontend, Node-Express and PostgreSQL for the backend

FaceApp


Table of Contents


Synopsis

This project is a simple face recognition app that uses the Clarifai Api to find faces inside images. The Clarifai Api is able to recognize multiple faces in images but this project is limited to only recognizing a single face inside an image. Users insert the URL of an image and the app tries to outline the face.

Tools Used

Client Side

react-logo es6-logo

Server Side

node Express knex node-postgres (Node-Postgres) clarifai

Database

postgres pgAdmin

Other Tools

Heroku bcrypt-logo npm git github-logo

Walkthrough

⭐ The first page users see in the application is the Sign In page.

signin


⭐ If a user tries to sign in with an incorrect Email/Password, an error message will pop up, this also happens if the fields are empty when trying to sign in.

error1


⭐ Under the Sign In button there is a Register button that takes users to the registration page.

registration


⭐ If the user tries to register with credentials that already exists, an error message pops up.

error2


⭐ When a user submits the Registration form, the app sends that data to the server which inserts it to the database. The data is inserted into a login and user table. When the user first creates an account they enter a password which is stored as a hash. When the user tries to login again the server uses BCRYPT to validate the password.

homepage

login


⭐ After the user is registered or signs in, they are taken to the main page. This page displays the users name as well as the number of submissions made.

homepage


⭐ After the user inserts an image url and clicks Detect, a blue box appears over the location of the face. When the user clicks the detect button, the app send the image to the Clarifai API which uses an AI to guess the location of the faces in an image. The data that is sent back from Clarifai is coordinate information which is mapped out using CSS. After every submission a counter increments, showing the number of submissions a user has made.

face1

face2

face3

face4


About

Visit Site:

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published