Loop Detector App

• 

  HTML, CSS, JS frontend with Python Backend Hosted; counting 1 Loop with two hands marked.

• 

  Plain prototype built with python before hosting counting 2 loops.

• 

  Plain prototype built with python before hosting counting 3 loops.

• 

  Plain prototype built with python before hosting counting 1 loops.

Inspiration

I wanted to explore tracking subtle interactions using AI. Detecting loops—such as a pink to white thread/yarn between hands—requires precise computer vision techniques. By leveraging MediaPipe and OpenCV, I built this app to enable real-time detection with potential applications in gesture recognition, knitting guidance, and interactive learning.

What It Does

The Loop Detector App: ✅ Tracks hand positions using MediaPipe
✅ Detects loops (e.g., a pink thread) with OpenCV
✅ Processes images in real time via a Flask API on Render
✅ Keeps the service awake with AWS Lambda + EventBridge

Users upload webcam frames, and the app analyzes spatial relations between hands to detect loops dynamically.

How I Built It

• Frontend: HTML, CSS, JavaScript
  
• Backend: Python Flask API hosted on Render
  
• Computer Vision: MediaPipe for hand tracking, OpenCV for loop detection
  
• Authentication: Dummy JWT-based login system
  
• Server Management: AWS Lambda + EventBridge to prevent downtime
  

Challenges I Ran Into

• Refining loop detection: Ensuring accuracy in detecting a thread without false positives.
  
• WebSocket troubleshooting: Handling real-time image streaming efficiently.
  
• Render service hibernation: Overcoming inactivity issues using Lambda triggers.
  
• Secure authentication: Finding a balance between simplicity and security.
  

Accomplishments That I'm Proud Of

🏆 Successfully integrated hand tracking & loop detection in real-time
🏆 Implemented AWS Lambda & EventBridge to keep the app responsive
🏆 Built an accessible interface for easy user interaction
🏆 Improved computational efficiency for loop detection

What I Learned

📚 Optimizing image-processing pipelines for speed & accuracy
📚 Balancing performance & cost in cloud hosting (Render + AWS)
📚 Building a scalable AI-powered vision system
📚 Enhancing API security with JWT & structured authentication

What’s Next for Loop Detector App

🔹 Refining detection algorithms for higher accuracy using real-world session data. 🔹 Integrating OAuth to securely identify users and log training data with consent. 🔹 Expanding UI features for user-friendly interaction and transparency.

Developed using MediaPipe, Flask, and a serverless architecture, this system enables real-time tracking of repetitive motion, making it ideal for fitness, rehabilitation, or detailed fine-tuning monitoring with quantitative analysis.

🔹 Real-time motion tracking 🔹 Lightweight & scalable

Thinking beyond reps—this could support post-treatment care too: ✔️ Focus on quantitative hand movement across defined zones. ✔️ Quantify hand movements across defined zones for structured training ✔️ Assist users in learning controller use, monitoring finger placement, and coordination. ✔️ Support precise hand movements, such as counting medication doses before distributing the dose to log treatment in real-time. ✔️ Aid in structured finger motion, including tracking rosary bead placement during prayer.

Cost-effective/Cross-platform solution—works with webcams and mobile cameras, making it accessible and mobile-friendly.

Built With

• amazon-eventbridge
• aws-lambda
• css
• fetch
• flask
• formdata
• html
• javascript
• mediapipe
• opencv
• python
• render
• rest-api
• vanillajavacript