Emotions and the emotional expressions on our face plays a huge rule everywhere, whether you're working somewhere, or you're a student. Emotional expressions are directly connected to our body language.
Also, emotions let's us understand ourselves better.
That's why we came up with the idea of Visualise. Visualise is a tool that lets you visualise (literally) your emotions and presents to you the data for the same.

What it does

A user just need to open up the website, and then they'll be facing the webcam. Visualise will read their emotions, through the Artificial Intelligence and Machine Learning framework and will formulate the data. The user can see a real-time live graph that'll show them their emotions. Emotions include happiness, sadness, surprise, anger, disgust, neutral and fear. After the user decides to stop, Visualise will present to them a pie-chart that'll describe what their face expressions were saying throughout the session. We personally feel it can be a very important tool for people who are trying to improve their public skills, or are at a professional level where they're required to attend meetings, or maybe just to understand themselves better :)

How we built it

For the frontend, we used HTML - CSS
For backend, we majorly used javascript and its libraries, including

  • face-api.js (for recognizing emotions) [primary built on the 'Tensorflow framework by Google']
  • Canva.js (for showing the real-time graph)
  • Google charts (for showing the pie-chart after each session)
    For deploying the website, we've used vercel
    For domain, we used For video editing and logo designing, tools like PowerDirector, Canva, PicsArt are used. For IDE, vscode and atom code editor were used

Challenges we faced

We had a hard time to get the data from the emotion detection, as that data was in a Array and took us a while to realise.
Github Pages was down so we deployed it on Vercel (our first time doing that)
Also, building a whole web application in 24hrs was tough indeed.
..but eventually everything turned out good!

Accomplishments we're proud of

We're proud that in 24 hours, we were able to make a whole web application, and we are also proud of our idea, and the impact that we feel that it holds on the current world.

What's next for Visualise?

Well we'll be hopefully working on improvements, and would be planning to launch this application in real world pretty soon!!


We'd like to compete for the following categories:-
Best Startup
We feel that our hack is really connected with real world and can be a great success if we work on it over time!
Best Use of Google Services
We implemented the API that is based on Tensorflow ML and AI models, also we used Google Pie chart to show the data at the end of session.

note: it says it might take upto 24 hrs for the .xyz domain to redirect, so we're attaching our non-custom domain that we got from vercel:-

Built With

Share this project: