Pocket Therapy

Inspiration

Mental health proves to be a challenge for many people in the world, so we wanted to help remedy that in any way we could. It can be especially challenging for low-income families and communities to find mental health care, as it is extremely expensive. However, they deserve the same level of guidance and help. That's where our app comes in. We were also inspired by our schools - they focus heavily on mental health, providing counseling and a Wellness Center for students. Some people do not have access to these services, so we tried to create this app to benefit them as well. We tried to recreate that with our own website; we created a personalized therapist chatbot, as well as a space to try relaxing activities and games.

What it does

Pocket Therapy is a trusted friend and mental health advisor all in one. Our project uses AI-powered facial detection to detect signs of distress and discomfort through your webcam, providing instant and reliable access to emotional support for those who need it. In addition, we have a therapist chatbot that lends a listening ear and offers gentle advice. Features:

• The Garden. It's a safe, calm environment where users can go to de-stress. It includes fidget games and a Sound Studio where you can mix and match relaxing sounds (raindrops, wind, coffee shops, etc.)
• A personalized therapist chatbot. It recognizes your emotions and responds appropriately, providing gentle conversation.

How we built it

Programming languages: HTML, Javascript, and CSS. How we built the individual features:

• Chatbot: We wrote code primarily in Javascript and connected the Gemini API. We provided specific instructions in the context of mental health (and the guidelines of our app) to modify the chatbot's responses.
• Emotion classification: We used the Javascript face-api.js and the computer's camera in order to detect the user's different emotions.
• The Garden: We used HTML, CSS, and JS elements in order to create fun games, adding audio effects to improve the experience.

Challenges we ran into

At first, we had difficulty deciding on a topic to focus on for the hackathon. We had to compromise and find an idea that utilized all of our skill sets while also fulfilling the prompt. Another challenge we ran into when designing our website was CSS graphics. None of us were very familiar with CSS but we learned how to incorporate animation in our website.

Accomplishments that we're proud of

After facing a lot of trial and error while building the app, we are proud of a few features and triumphs:

• Animated CSS button! We had never created this type of animation before, so we were really proud to succeed in making one for the homepage.
• Improving the chatbot's functionality and look! Again, it was a very new experience for us, and none of us had really worked in-depth with chatbots or face recognition API. It was great to explore these concepts.

What we learned

• How to use AI and customize the chatbot's responses. It was definitely a challenge, but a rewarding and fun one. We learned something useful for the future.
• Face recognition API. Again, this was really new, and it wasn't always the easiest to implement. We had to learn how to use and incorporate it correctly.

What's next for Pocket Therapy

We plan to make the facial recognition and chatbot responses more reliable! We'd also like to add more emotions and situations to the facial recognition program. That will allow us to customize the chatbot's responses even more and bring it closer to the quality of a real-life, human therapist. Additionally, we wanted to implement a profile creation function, so that the chatbot remembers your past conversations and addresses you with context in mind.

Built With

• css
• face-api.js
• geminiapi
• html
• javascript