Inspiration
How do Emotions influence our body?
Occupational Wellness. We are living in a time of hustle culture. In the time of technological advance we have a tendency to work for hours on our devices and end up burnt out and exhausted without having time to look back and reflect on how what we do affects us.
What it does
Mood Mapper is an application that tracks your facial expression and records your mood throughout the use of your computer. Mood Mapper will visualize an accurate report of your mood during usage time of different sites through donut charts consisting of all the moods for each site. Mood Mapper will not only show you the time spent on each website which reflects your work pattern and behavior but also your mood response to them and how they affect you as the user
How we built it
We employ facial recognition technology through the utilization of the face-api.js library to examine the facial expressions of users. This is accomplished via a Google Chrome extension developed using JavaScript, which also obtains information on site names and usage time. The data is then injected into SQLAlchemy as a database to generate reports, which are presented on our main website through embedded report graphs that utilize Chart.js, HTML/CSS, and JavaScript. Prior to implementation, a mockup was created using Canva
Challenges we ran into
Building extensions was a challenging task for our team as we had no prior experience in this area. It required us to start from scratch and learn the process of programming an extension from the ground up. This involved understanding how extensions worked within the context of the Google Chrome browser and how to retrieve and manipulate data from various sources.
Also, we had a hard time determining how to implement a sliding scale to filter by time. After exploring various options, we ultimately decided to use a dropdown menu instead.
The most difficult part of implementing facial expression recognition was initially choosing what library to use and understanding how to set it up. As someone with little to no experience or education in machine learning, I had trouble understanding the complex vocabulary that was often used in the libraries' descriptions and tutorials. I had to dedicate a large amount of time to studying and experimenting with the code to get it to eventually work.
Accomplishments that we're proud of
Our team is proud of completing our project on time despite facing all new techniques. This required a lot of good teamwork, organization, and communication to bring our initial planned idea to reality.
What we learned
In addition to acquiring technical skills and utilizing new technologies during the product development process, we also learned how to support one another while experimenting and managing our personal schedules.
Implementing the face-api.js library and creating extensions were things we learned through this hackathon. We learned how to use the library to analyze and interpret facial expressions of users, which enabled us to design features that catered to our users' needs. Creating the extension involved learning to write code that integrated with the Google Chrome browser and retrieve data on site names and usage time. Overall, our experience in implementing the face-api.js library and creating extensions provided us with a valuable set of skills that we can use in future projects.
What's next for Mood Mapper
We hope to optimize our website so that information on site usage can be automatically updated and improve customization and add features like choosing to filter out specific emotions.
Log in or sign up for Devpost to join the conversation.