Emotion Detect

Website
Website
Live Demo of the AI

Inspiration

As a high schooler living in the Silicon Valley, I have often dealt with mental health problems, peer pressure, insecurities, and more. All of these are caused by emotions, that we can control, so I made this app so that everyone could not look down upon their emotions, but see them as something they can improve upon.

What it does

Emotion Detect is an app that uses AI and Machine Learning to detect the emotions of someone's face, and then display the information in the form of a ChatBot, that will engage in conversation with you.

How we built it

I used React js for the entirety of the project, FaceAPI.js for the AI recognition, and react-simple-chatbot for the ChatBot. I also used a piece of open-sourced code in order to help me implement the FaceAPI.js.

Challenges we ran into

At the beginning of this project, I was originally going to use Python, but then I didn't get around to doing it, so I tried React. That already took up a big amount of my time, so I wasn't at a good start. Also, integrating FaceAPI into my code was a bit hard, as I often had problems with the formatting, and implementing it with my CSS. React-router-dom also gave me a couple of problems because of the version, but all in all I didn't have as many problems as I usually have.

Accomplishments that we're proud of

I'm very proud of making my first AI App, as I've never actually made one before, and also in React. I always assumed that Python would be the only language to use AI in, but React held up very nicely in terms of AI and Machine Learning. I will definitely continue using it for my future projects.

What we learned

I learned that I have to set out a plan before I do my hackathons and code, because if I don't do that, then I rush in without any thought and just start coding without any clear picture in mind. I also want to use Figma, so that I can organize my thought process and how I will do my project.

What's next for Emotion Detect

I definitely want to improve the ChatBot, as I didn't get much time to develop it, so it's a bit limited, which I'm disappointed in. But, after the project is submitted, I will update the ChatBot and make it more enhancing to the user and more engaging. TailwindCSS will also be used more, because I'm sure I could've made the website more enhancing to the user if I had more time.