Apr 17, 2023 3 min read Git Commit Show

Can a piece of code fix my posture? Yes, using ml5.js, P5.js, Angular, and Electron

In this Git Commit Show showcase, Ahsan showcased his project that helps people improve their posture. He shared how he built and learnt from this project.

Photo by Keenan Constance / Unsplash

Technology can improve health and lifestyle, and even the way we live as humans today. This is a showcase of a side project based on Angular, Machine Learning, and Electron that detects if you've been sitting with the correct posture or not. If you sit in an incorrect posture for about a minute, the project/app immediately alerts you about it so you sit straight.

This is the written version of the showcase presented by Mohammad Ahsan Ayaz at Git Commit Show 2021. Learn how he built a side project to improve posture and what he learned from it.

Full recording of the showcase from Git Commit Show S3, held in 2021

About the speaker

Muhammad Ahsan Ayaz is a Google Developers Expert in Angular and a Software Architect at Syncron. He loves helping the startup ecosystem and product owners bring their ideas to life using Javascript & Web Technologies. He also contributes to open-source projects, speaks at events, writes articles, and makes video tutorials on YouTube. He also runs NodeSchool Karachi and Angular Pakistan.

Today, I would like to share my experience with a fun project I worked on that combines several technologies, including Angular, ml5.js, P5.js, and Electron, to help fix your posture.

Can a piece of code fix my posture?

The answer is yes. By combining Angular with ml5.js, P5.js, and Electron, we can create an application that detects your posture and sends you a notification when you need to sit up straight.

How does the application work?

When you open the app, it trains on your data by detecting your correct posture and incorrect posture. You can provide as much data as possible to improve accuracy. Once trained, the app detects if you are sitting in the correct posture or not and sends a notification when you need to adjust your posture.

How it was built?

The tech stack of the project

Tech Stack - ml5.js, P5.js, Angular, and Electron

What is Angular?

In one word, Angular is magic. It's not just a library, but a development platform that comprises a component-based framework, a strong ecosystem of tools, and a suite of development tools that make it easier for everyone to build applications. Angular's library ecosystem is vast, making it easier for developers to find tools for routing, HTTP calls, and more.

What is P5.js?

P5.js is a library used to draw things on the UI, including HTML elements like DIVS and spans.

What is Electron?

Electron is a tool used to create desktop applications that can be distributed across multiple platforms.

What is ml5.js?

ml5.js is a library that provides a range of tools for classifications, including image classification, sound classification, and text classification.

What is Posenet?

Posenet is a machine learning model trained by ml5.js that detects your posture by detecting all the joints in your body, including your hands, shoulders, nose, and eyes. By using Posenet, we can detect your posture accurately and send you a notification when you're sitting incorrectly.

Future scope

Moving forward, I plan to refine the application by using more advanced machine-learning models like Movenet or Blazemove. The project is open source, so anyone can use and contribute to it. I also recommend checking out the Angular book I worked on if you want to polish your web development skills.

Conclusion

By combining Angular with ml5.js, P5.js, and Electron, we can create an application that detects your posture and helps you improve it. This fun project was a great way for me to learn more about machine learning and how it can be used in web development.

Thank you for reading. If you want to see breakthrough project showcases live or want to showcase your project, register for the next season of Git Commit Show