Posture-detection-using-PoseNet

Posture_detection_using_PoseNet_23B2476

PoseNet Live Filter Demo 🎥🕶️

This project uses ml5.js and PoseNet to perform real-time human pose detection via webcam and apply fun visual filters like glasses and a cigar based on facial keypoints.

🔍 Overview

• 📸 Accesses the user's webcam and detects body keypoints using PoseNet
• 🧠 Uses ml5.js for simplified machine learning integration in the browser
• 🕶️ Dynamically overlays filters (like glasses or cigar) onto detected facial points
• 🔄 Flipped video rendering to simulate a mirror-like experience
• ✅ Option to toggle filters directly from the UI

💻 Tech Stack

• HTML5 / CSS3
• JavaScript
• p5.js — creative coding library for rendering
• ml5.js — friendly ML library built on TensorFlow.js

📁 Folder Structure

PoseNet-Filter-Demo/ ├── index.html ├── sketch.js ├── images/ │ ├── spects.png │ ├── cigar.png

🚀 How to Run

1. Clone the repository:

   git clone https://github.com/yourusername/posenet-filter-demo.git
   cd posenet-filter-demo
   

2. Start a local live server (VSCode extension or Python HTTP server):

Python 3.x

python -m http.server

3. Open your browser and navigate to: http://localhost:8000

4. Allow camera access to begin real-time pose tracking.

🧪 Features Real-time pose detection via webcam

Draws keypoints and skeleton overlay

Applies virtual filters using facial landmark positioning

Filter toggle control via checkbox (no page reload)