Skip to content

A bright and colorful game using facial recognition and emotion detection AI to have fun making faces! Entertaining for all types, and especially useful for people with autism and/or asperger's to learn and practice emotional recognition.

Notifications You must be signed in to change notification settings

naeohmi/emotiface

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

82 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo

Table of Contents:

  1. App/Game description
  2. App Flow Chart
  3. App Flow/Pseudo Code
  4. User Stories
  5. Wireframes
  6. Tech Stack
  7. Research on Facial Recognition/Emotion Detection
  8. Screenshots from Game
  9. See Project

A bright and colorful game using facial recognition and emotion detection AI to have fun making faces!

Useful and fun for people with autism and/or asperger's to learn and practice emotional recognition.

app-flow

  1. Display opening landing page with instructions and start button
  2. Player clicks start button
  3. Live webcam video is turned on
  4. Player makes a face conveying an extreme emotion
  5. If face is found (from facial recognition detection) -> then display the score of each emotion, as returned from AI, in a pop up modal window
  6. If face is NOT found (from facial recognition detection) -> then alert user the face was not found, and refresh the screen to allow user to try again

Target User Demographic = young people with Autism or Asperger's who want to practice reading facial expressions and have fun figuring out emotions and learning how their facial expressions might be perceived by others.

  1. As a user, I want to play a game with bright fun colors and simple, easy to understand button prompts.
  2. As a user, I want to take a photo of a face and see what emotions are found from that face.
  3. As a user, I want to play simply for my own personal enjoyment and edification. I don't want scores or competition.
  4. As a user, I want to see emoticons for each emotion checked so I can understand why that emotion was found, from the picture I took.
  5. As a user, I want to know if no face was found in the picture and be able to quickly and easily take another picture.

Home/Start Landing Page:

wire-frame

Game In Play - Current Face (with webcam):

wire-frame

Core Stack:

  • React
  • Node
  • Express
  • HTML
  • CSS
  • jQuery
  • Ajax
  • Git
  • PostgreSQL
  • AWS

Middleware:

  • React Webcam
  • React-Bootstrap
  • Isomorphic fetch
  • Axios
  • pg-promise
  • bluebird

APIs:

  • Cloudinary
  • Kairos Facial Recognition API
  • Kairos Emotion Detection API

JavaScript Libraries:

clmtrackr

Emotion Detection API tools:

Lambdal

microsoft-azure

google-vision

Play Game Page:

screenshots

(current version of the display emotions and score modal) screenshots

(older version of the display score screen) screenshots

About Page:

screenshots

screenshots

Home Page:

screenshots

End Page:

screenshots

Live Deployment of App: https://naeohmi.github.io/emotiface/

Download Project & Install

  1. Git clone or download this project
  2. Make sure to npm install
  3. Run npm start and app should be available on localhost:3000

Thanks :)

app-logo

Go Back to Table of Contents

About

A bright and colorful game using facial recognition and emotion detection AI to have fun making faces! Entertaining for all types, and especially useful for people with autism and/or asperger's to learn and practice emotional recognition.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published