PosturePaws

Demo of how the UI would look when you have a good posture!
Demo of how the UI would look when you have a bad posture!

Paws for a second. Sit up with PosturePaws.

Inspiration

Think back to the past week, how many times have you complained about a sore back? Maybe you were pulling your hair out debugging code, rushing to finish your assignment or getting lost in the latest chapter of your favourite Wattpad fanfic… not matter what you were doing, you were probably too invested in what was on your screen to realise your poor spine was slowly hunching over into a near 90 degree angle.

Bad posture causes back and neck pain, hindering your concentration and mood. Over time, it can also lead to serious health issues such as spinal misalignment, bloating, and reduced lung capacity, further impacting mobility and productivity.

We all know good posture is important, but remembering to sit up straight is easier said than done. That’s why we created PosturePaws! 🐼

What it does

Your PosturePaws widget livens up your screen with a furry friend who gently reminds you to sit up straight when they notice you slouching. You can monitor your posture in real time (and to be clowned when you slouch 🤡) and your posture pal stays by your side for motivation and reminders.

Whether you're coding, studying, or just browsing, PosturePaws has your back, literally!

How we built it

We utilised the pre-trained pose estimation model ‘MoveNet’ from the machine learning model library ‘ml5.js’ alongside the JavaScript library ‘p5.js’ to capture and process webcam footage, identifying keypoints of the upper body. By calculating the distance between the nose keypoint and the midpoint between the shoulders, we determine whether the user is slouching or sitting upright. Custom graphics and animations were digitally drawn, and the webcam feed, slouch detection, and animations are seamlessly integrated into the widget using ‘React.js’.

Challenges we ran into

Coming up with a unique and useful idea within a few hours Library integration issues: getting ml5.js and p5.js to work seamlessly in React required some debugging.
Formatting the video in terms of its size/appearance on the screen and its interactivity
Adding a hide/show video button, we thought we could make the widget smaller when the video was hidden and only the panda would be on display (checking your posture), but we were not able to implement this idea.

Accomplishments that we're proud of

PosturePaws can actually detect and remind you when you are slouching in real time!
Great communication and collaboration between team members, especially when deciding on a project idea
Learning new technologies we were interested in, including machine learning, React, and pose estimation, in such a short span of time!

What we learned

How to use a machine learning model in a web application
That there are a plethora of existing libraries/technologies to help make development easier!
React syntax

What's next for PosturePaws

Choose from a variety of animal friends (cat, dog, koala, etc.)
Your posture pal recommends stretching exercise to relieve back and neck tension
Get general physical wellbeing reminders (blinking more, staying hydrated, taking breaks, etc.)
Add a hide video feature