Upload 23 files

Initial Deployment Commit

app.py

@@ -0,0 +1,476 @@
+import os
+# CRITICAL: Set environment variables BEFORE any imports to prevent training
+os.environ['YOLO_VERBOSE'] = 'False'
+os.environ['ULTRALYTICS_AUTOINSTALL'] = 'False'
+
+# Force all HF caches to a writable place
+_cache = "/data/hf-cache" if os.getenv("HF_SPACE") else os.getenv("HF_CACHE_DIR", "/tmp/hf-cache")
+for var in ["HF_HOME", "HUGGINGFACE_HUB_CACHE", "HF_HUB_CACHE", "HF_CACHE_DIR", "XDG_CACHE_HOME"]:
+    os.environ.setdefault(var, _cache)
+os.makedirs(_cache, exist_ok=True)
+
+from flask import Flask, render_template, request, jsonify, send_from_directory, url_for, Response
+from werkzeug.utils import secure_filename
+import os
+from PIL import Image
+import io
+import torch
+import cv2
+import numpy as np
+from datetime import datetime
+from huggingface_hub import hf_hub_download
+import time
+from collections import deque
+import shutil
+
+app = Flask(__name__)
+app.config["UPLOAD_FOLDER"] = os.environ.get("UPLOAD_DIR", "/data/uploads")
+app.config["VIDEO_FOLDER"] = os.path.join(app.config["UPLOAD_FOLDER"], "videos")
+os.makedirs(app.config["UPLOAD_FOLDER"], exist_ok=True)
+os.makedirs(app.config["VIDEO_FOLDER"], exist_ok=True)
+
+# Exercise classes
+CLASSES = [
+    "benchpress",
+    "deadlift", 
+    "squat",
+    "leg_ext",
+    "pushup",
+    "shoulder_press"
+]
+
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'webp'}
+
+# OPTIMIZED Performance settings
+SKIP_FRAMES = 4
+TARGET_FPS = 15
+INFERENCE_SIZE = 416
+JPEG_QUALITY = 75
+CONF_THRESHOLD = 0.25
+IOU_THRESHOLD = 0.5
+
+# Global variables
+model = None
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+frame_times = deque(maxlen=30)
+last_frame_cache = None
+
+def allowed_file(filename: str) -> bool:
+    return "." in filename and filename.rsplit(".", 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def allowed_video(filename: str) -> bool:
+    VIDEO_EXTENSIONS = {'mp4', 'avi', 'mov', 'mkv', 'webm'}
+    return "." in filename and filename.rsplit(".", 1)[1].lower() in VIDEO_EXTENSIONS
+
+def load_model():
+    """Load the trained object detection model with STRICT anti-training safeguards"""
+    global model
+    
+    print("\n" + "=" * 60)
+    print("STARTING MODEL LOAD (INFERENCE-ONLY MODE)")
+    print("=" * 60)
+    
+    # CRITICAL: Set anti-training environment variables
+    os.environ['YOLO_VERBOSE'] = 'False'
+    os.environ['ULTRALYTICS_AUTOINSTALL'] = 'False'
+    
+    try:
+        # IMPORTANT: Update this with YOUR model repo
+        if os.getenv("HF_SPACE"):
+            print("Running in Hugging Face Space")
+            # Download from your model repo
+            checkpoint_path = hf_hub_download(
+                repo_id="gym-vision/Object-Detection-Space",  # ← CHANGE THIS!
+                filename="best_v4.pt",
+                repo_type="model",
+                cache_dir=os.environ["HF_CACHE_DIR"]
+            )
+        else:
+            checkpoint_path = "best_v4.pt"
+            print(f"Local mode - Model at: {os.path.abspath(checkpoint_path)}")
+            if not os.path.exists(checkpoint_path):
+                raise FileNotFoundError(f"Model not found: {checkpoint_path}")
+        
+        print(f"Device: {device}")
+        
+        from ultralytics import YOLO
+        
+        # Load model
+        model = YOLO(checkpoint_path)
+        model.to(device)
+        
+        # Force evaluation mode
+        if hasattr(model, 'model'):
+            model.model.eval()
+            model.model.requires_grad_(False)
+            for param in model.model.parameters():
+                param.requires_grad = False
+        
+        # Disable trainer
+        if hasattr(model, 'trainer'):
+            model.trainer = None
+        
+        # Override ALL settings
+        if hasattr(model, 'overrides'):
+            model.overrides = {
+                'task': 'detect',
+                'mode': 'predict',
+                'model': checkpoint_path,
+                'data': None,
+                'epochs': 0,
+                'save': False,
+                'save_txt': False,
+                'save_conf': False,
+                'save_crop': False,
+                'show': False,
+                'plots': False,
+                'verbose': False,
+                'conf': CONF_THRESHOLD,
+                'iou': IOU_THRESHOLD,
+                'max_det': 10,
+                'half': device.type == 'cuda',
+                'device': device.type,
+                'augment': False,
+                'visualize': False,
+                'batch': 1,
+                'imgsz': INFERENCE_SIZE,
+                'workers': 0,
+            }
+        
+        if hasattr(model, 'predictor'):
+            model.predictor = None
+        
+        print("✓ Model loaded in INFERENCE-ONLY mode")
+        
+        # Warmup
+        print("\nWarming up model...")
+        dummy_img = np.random.randint(0, 255, (INFERENCE_SIZE, INFERENCE_SIZE, 3), dtype=np.uint8)
+        
+        with torch.no_grad():
+            try:
+                _ = model(dummy_img, verbose=False)
+            except:
+                pass
+        
+        print("\n" + "=" * 60)
+        print("MODEL READY FOR INFERENCE")
+        print(f"Device: {device}")
+        print("=" * 60 + "\n")
+        
+        return True
+        
+    except Exception as e:
+        print("\n" + "=" * 60)
+        print("MODEL LOADING FAILED")
+        print(f"Error: {e}")
+        import traceback
+        traceback.print_exc()
+        print("=" * 60 + "\n")
+        model = None
+        return False
+
+# Pre-define colors for faster lookup (BGR format)
+COLORS_BGR = {
+    "benchpress": (107, 107, 255),
+    "deadlift": (196, 205, 78),
+    "squat": (209, 183, 69),
+    "leg_ext": (122, 160, 255),
+    "pushup": (200, 216, 152),
+    "shoulder_press": (111, 220, 247)
+}
+
+def draw_detections_fast(image, detections):
+    """Optimized drawing with smart label positioning"""
+    if isinstance(image, Image.Image):
+        image = np.array(image)
+    
+    img_h, img_w = image.shape[:2]
+    font = cv2.FONT_HERSHEY_SIMPLEX
+    font_scale = 0.6
+    thickness = 2
+    
+    for det in detections:
+        x1, y1, x2, y2 = det['bbox']
+        label = det['label']
+        conf = det['confidence']
+        
+        color = COLORS_BGR.get(label, (255, 255, 255))
+        cv2.rectangle(image, (x1, y1), (x2, y2), color, 2)
+        
+        text = f"{label} {conf:.2f}"
+        (text_w, text_h), _ = cv2.getTextSize(text, font, font_scale, thickness)
+        
+        label_margin = 8
+        
+        if y1 - text_h - label_margin >= 0:
+            label_y1 = y1 - text_h - label_margin
+            label_y2 = y1
+            text_y = y1 - 4
+        elif y2 + text_h + label_margin <= img_h:
+            label_y1 = y2
+            label_y2 = y2 + text_h + label_margin
+            text_y = y2 + text_h + 2
+        else:
+            label_y1 = y1
+            label_y2 = y1 + text_h + label_margin
+            text_y = y1 + text_h + 2
+        
+        label_x2 = min(x1 + text_w + 4, img_w)
+        cv2.rectangle(image, (x1, label_y1), (label_x2, label_y2), color, -1)
+        cv2.putText(image, text, (x1 + 2, text_y), font, font_scale, (0, 0, 0), thickness)
+    
+    return image
+
+@torch.no_grad()
+def detect_objects_fast(image_array, verbose=False):
+    """Optimized object detection"""
+    if model is None:
+        return []
+    
+    try:
+        start_time = time.time()
+        detections = []
+        
+        # Use model call
+        results = model(image_array, verbose=False, imgsz=INFERENCE_SIZE)
+        
+        if results and len(results) > 0:
+            result = results[0]
+            
+            if hasattr(result, 'boxes') and result.boxes is not None:
+                boxes = result.boxes
+                
+                for box in boxes:
+                    xyxy = box.xyxy[0].cpu().numpy()
+                    x1, y1, x2, y2 = map(int, xyxy)
+                    conf = float(box.conf[0].cpu().numpy())
+                    cls_id = int(box.cls[0].cpu().numpy())
+                    
+                    label = model.names[cls_id] if hasattr(model, 'names') and cls_id < len(model.names) else CLASSES[cls_id]
+                    
+                    detections.append({
+                        'bbox': [x1, y1, x2, y2],
+                        'label': label,
+                        'confidence': conf
+                    })
+        
+        inference_time = (time.time() - start_time) * 1000
+        
+        if verbose:
+            print(f"Inference: {inference_time:.1f}ms | Detections: {len(detections)}")
+        
+        return detections
+        
+    except Exception as e:
+        print(f"Detection error: {e}")
+        return []
+
+def process_frame_optimized(frame, frame_count=0):
+    """Optimized frame processing with caching"""
+    global last_frame_cache
+    
+    if frame_count % SKIP_FRAMES != 0 and last_frame_cache is not None:
+        return last_frame_cache['annotated'], last_frame_cache['detections']
+    
+    rgb_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+    detections = detect_objects_fast(rgb_frame)
+    annotated_frame = draw_detections_fast(rgb_frame.copy(), detections)
+    
+    last_frame_cache = {
+        'annotated': annotated_frame,
+        'detections': detections
+    }
+    
+    return annotated_frame, detections
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/uploads/<path:filename>")
+def uploaded_file(filename):
+    return send_from_directory(app.config["UPLOAD_FOLDER"], filename)
+
+@app.route("/webcam_feed")
+def webcam_feed():
+    """Note: Webcam will not work in Hugging Face Spaces (no camera access)"""
+    def generate():
+        global last_frame_cache
+        last_frame_cache = None
+        
+        if model is None:
+            print("ERROR: Model not loaded")
+            return
+            
+        cap = cv2.VideoCapture(0)
+        
+        if not cap.isOpened():
+            print("ERROR: Could not open webcam")
+            return
+        
+        cap.set(cv2.CAP_PROP_FRAME_WIDTH, 640)
+        cap.set(cv2.CAP_PROP_FRAME_HEIGHT, 480)
+        cap.set(cv2.CAP_PROP_FPS, 30)
+        cap.set(cv2.CAP_PROP_BUFFERSIZE, 1)
+        
+        frame_count = 0
+        encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), JPEG_QUALITY]
+        
+        try:
+            while True:
+                success, frame = cap.read()
+                if not success:
+                    break
+                
+                annotated_frame, detections = process_frame_optimized(frame, frame_count)
+                _, buffer = cv2.imencode('.jpg', cv2.cvtColor(annotated_frame, cv2.COLOR_RGB2BGR), encode_param)
+                frame_bytes = buffer.tobytes()
+                
+                frame_count += 1
+                yield (b'--frame\r\n'
+                       b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')
+                    
+        finally:
+            cap.release()
+            last_frame_cache = None
+    
+    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+@app.route("/analyze_image", methods=["POST"])
+def analyze_image():
+    """Analyze uploaded image"""
+    if model is None:
+        return jsonify({"ok": False, "error": "Model not loaded"}), 500
+    
+    if "image" not in request.files:
+        return jsonify({"ok": False, "error": "No file part"}), 400
+
+    file = request.files["image"]
+    if file.filename == "" or not allowed_file(file.filename):
+        return jsonify({"ok": False, "error": "Invalid file"}), 400
+
+    try:
+        image_bytes = file.read()
+        filename = secure_filename(file.filename)
+        filename = f"{datetime.now().strftime('%Y%m%d_%H%M%S_%f')}_{filename}"
+        save_path = os.path.join(app.config["UPLOAD_FOLDER"], filename)
+        
+        with open(save_path, 'wb') as f:
+            f.write(image_bytes)
+        
+        image = Image.open(io.BytesIO(image_bytes)).convert('RGB')
+        image_array = np.array(image)
+        
+        detections = detect_objects_fast(image_array, verbose=True)
+        
+        annotated_array = draw_detections_fast(image_array.copy(), detections)
+        annotated_image = Image.fromarray(annotated_array)
+        
+        annotated_filename = f"annotated_{filename}"
+        annotated_path = os.path.join(app.config["UPLOAD_FOLDER"], annotated_filename)
+        annotated_image.save(annotated_path, quality=95)
+        
+        tips = {
+            "benchpress": "Feet planted, slight arch, shoulder blades retracted; control bar path.",
+            "deadlift": "Hinge at hips, bar close to shins, lats tight; push the floor, don't jerk.",
+            "squat": "Keep knees tracking over toes; brace your core; maintain neutral spine.",
+            "leg_ext": "Control the movement, don't swing; focus on squeezing the quadriceps.",
+            "pushup": "Keep body straight, engage core; lower chest to floor with control.",
+            "shoulder_press": "Keep core tight, don't arch back excessively; press straight up."
+        }
+        
+        detected_exercises = list(set([d['label'] for d in detections]))
+        exercise_tips = [tips.get(ex, "") for ex in detected_exercises]
+        
+        return jsonify({
+            "ok": True,
+            "original_image": url_for("uploaded_file", filename=filename),
+            "annotated_image": url_for("uploaded_file", filename=annotated_filename),
+            "detections": detections,
+            "tips": exercise_tips
+        })
+        
+    except Exception as e:
+        print(f"Error: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({"ok": False, "error": str(e)}), 500
+
+@app.route("/upload_video", methods=["POST"])
+def upload_video():
+    """Upload video"""
+    if model is None:
+        return jsonify({"ok": False, "error": "Model not loaded"}), 500
+    
+    if "video" not in request.files:
+        return jsonify({"ok": False, "error": "No video file"}), 400
+    
+    file = request.files["video"]
+    if not file.filename or not allowed_video(file.filename):
+        return jsonify({"ok": False, "error": "Invalid video"}), 400
+    
+    filename = secure_filename(file.filename)
+    filename = f"{datetime.now().strftime('%Y%m%d_%H%M%S_%f')}_{filename}"
+    save_path = os.path.join(app.config["VIDEO_FOLDER"], filename)
+    file.save(save_path)
+    
+    return jsonify({"ok": True, "video_id": filename})
+
+@app.route("/video_feed/<video_id>")
+def video_feed(video_id):
+    """Optimized video streaming"""
+    global last_frame_cache
+    
+    if model is None:
+        return jsonify({"ok": False, "error": "Model not loaded"}), 500
+        
+    video_path = os.path.join(app.config["VIDEO_FOLDER"], video_id)
+    
+    def generate():
+        global last_frame_cache
+        last_frame_cache = None
+        
+        cap = cv2.VideoCapture(video_path)
+        
+        frame_count = 0
+        encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), JPEG_QUALITY]
+        
+        while cap.isOpened():
+            success, frame = cap.read()
+            if not success:
+                break
+            
+            annotated_frame, detections = process_frame_optimized(frame, frame_count)
+            _, buffer = cv2.imencode('.jpg', cv2.cvtColor(annotated_frame, cv2.COLOR_RGB2BGR), encode_param)
+            frame_bytes = buffer.tobytes()
+            
+            frame_count += 1
+            
+            yield (b'--frame\r\n'
+                   b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')
+            
+            time.sleep(1.0 / TARGET_FPS)
+        
+        cap.release()
+        last_frame_cache = None
+    
+    return Response(generate(), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+# Load model on startup
+print("\n" + "="*60)
+print("FLASK APP STARTING")
+print("="*60)
+model_loaded = load_model()
+
+if model_loaded:
+    print("\n✓ App ready for inference")
+    print(f"Device: {device}")
+else:
+    print("\n✗ Model failed to load")
+
+print("="*60 + "\n")
+
+if __name__ == "__main__":
+    # IMPORTANT: Hugging Face Spaces requires port 7860
+    port = int(os.environ.get("PORT", 7860))
+    app.run(debug=False, host="0.0.0.0", port=port, threaded=True)

dockerfile.txt

@@ -0,0 +1,40 @@
+# Use Python 3.11 slim image
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY . .
+
+# Create necessary directories
+RUN mkdir -p /data/uploads /data/uploads/videos /data/hf-cache
+
+# Expose port 7860 (required by Hugging Face Spaces)
+EXPOSE 7860
+
+# Set environment variables
+ENV HF_SPACE=1
+ENV HF_CACHE_DIR=/data/hf-cache
+ENV UPLOAD_DIR=/data/uploads
+ENV PYTHONUNBUFFERED=1
+
+# Run the application
+CMD ["python", "app.py"]

readme.md

@@ -0,0 +1,32 @@
+---
+title: GymVision Exercise Detection
+emoji: 🏋️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
+# GymVision - Exercise Detection System
+
+Real-time exercise detection using YOLOv8 to identify and track gym exercises.
+
+## Features
+- 🎥 Webcam detection (real-time)
+- 📷 Image upload analysis
+- 🎬 Video upload processing
+
+## Detected Exercises
+- Bench Press
+- Deadlift
+- Squat
+- Leg Extension
+- Push-up
+- Shoulder Press
+
+## Technical Stack
+- YOLOv8 object detection
+- Flask web server
+- PyTorch inference
+- OpenCV processing

requirements.txt

@@ -0,0 +1,9 @@
+flask==3.0.0
+werkzeug==3.0.1
+torch==2.3.1
+torchvision==0.18.1
+ultralytics==8.3.0
+opencv-python-headless==4.9.0.80
+pillow==10.2.0
+numpy==1.26.4
+huggingface-hub==0.20.3

static/css/styles.css

@@ -0,0 +1,55 @@
+:root {
+  --ring-size: 32px;
+  --dot-size: 6px;
+}
+
+* { cursor: none; } /* use custom cursor */
+
+/* Custom cursor */
+#cursor-dot, #cursor-ring {
+  position: fixed;
+  pointer-events: none;
+  z-index: 50;
+  transition: transform 0.08s ease-out, opacity 0.2s ease-out;
+}
+
+#cursor-dot {
+  width: var(--dot-size);
+  height: var(--dot-size);
+  margin-left: calc(var(--dot-size) * -0.5);
+  margin-top: calc(var(--dot-size) * -0.5);
+  background: white;
+  border-radius: 9999px;
+  mix-blend-mode: difference; /* crisp candy feel */
+}
+
+#cursor-ring {
+  width: var(--ring-size);
+  height: var(--ring-size);
+  margin-left: calc(var(--ring-size) * -0.5);
+  margin-top: calc(var(--ring-size) * -0.5);
+  border: 1px solid rgba(255,255,255,0.6);
+  border-radius: 9999px;
+  backdrop-filter: blur(2px);
+}
+
+/* Scroll reveal defaults; JS will remove opacity/translate */
+.reveal {
+  will-change: transform, opacity;
+}
+
+/* file input nicer in dark bg (safari fix) */
+input[type="file"]::file-selector-button {
+  cursor: pointer;
+}
+
+/* Reduce selection glow */
+::selection {
+  background: rgba(255,255,255,0.2);
+}
+
+/* Smooth fonts */
+html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }
+
+* { cursor: none !important; }
+input, button, textarea, select, label { cursor: none !important; }

static/js/cursor.js

@@ -0,0 +1,47 @@
+(() => {
+  // Keep native cursor on touch devices
+  if ('ontouchstart' in window) return;
+
+  // Hide the old dot and ring (blurry circle)
+  const dot = document.getElementById('cursor-dot');
+  const ring = document.getElementById('cursor-ring');
+  if (dot) dot.style.display = 'none';
+  if (ring) ring.style.display = 'none';
+
+  // Create a simple white triangle cursor
+  const cursor = document.createElement('div');
+  cursor.style.position = 'fixed';
+  cursor.style.left = '0';
+  cursor.style.top = '0';
+  cursor.style.width = '0';
+  cursor.style.height = '0';
+  cursor.style.pointerEvents = 'none';
+  cursor.style.zIndex = '50';
+  cursor.style.transition = 'transform 0.08s ease-out';
+  cursor.innerHTML = `
+    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <!-- Classic arrow-style cursor pointing top-left -->
+      <polygon points="1,1 1,21 6,16 9,22 12,21 9,15 19,15" fill="white" shape-rendering="crispEdges"/>
+    </svg>
+  `;
+  document.body.appendChild(cursor);
+
+  // Smooth follow
+  let mx = window.innerWidth / 2;
+  let my = window.innerHeight / 2;
+  let ax = mx, ay = my;
+  const lerp = (a, b, t) => a + (b - a) * t;
+
+  function raf() {
+    ax = lerp(ax, mx, 0.25);
+    ay = lerp(ay, my, 0.25);
+    cursor.style.transform = `translate(${ax}px, ${ay}px)`;
+    requestAnimationFrame(raf);
+  }
+  requestAnimationFrame(raf);
+
+  window.addEventListener('mousemove', (e) => {
+    mx = e.clientX;
+    my = e.clientY;
+  });
+})();

static/js/detection.js

@@ -0,0 +1,212 @@
+// Object Detection Interface Handler
+document.addEventListener('DOMContentLoaded', () => {
+  // Mode switching
+  const modeButtons = document.querySelectorAll('.mode-btn');
+  const sections = {
+    'mode-webcam': document.getElementById('webcam-section'),
+    'mode-video': document.getElementById('video-section'),
+    'mode-image': document.getElementById('image-section')
+  };
+
+  modeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      // Update button styles
+      modeButtons.forEach(b => {
+        b.classList.remove('active', 'bg-white', 'text-zinc-900');
+        b.classList.add('bg-zinc-800', 'text-white');
+      });
+      btn.classList.add('active', 'bg-white', 'text-zinc-900');
+      btn.classList.remove('bg-zinc-800', 'text-white');
+
+      // Show/hide sections
+      Object.values(sections).forEach(s => s?.classList.add('hidden'));
+      sections[btn.id]?.classList.remove('hidden');
+
+      // Stop webcam if switching away
+      if (btn.id !== 'mode-webcam') {
+        stopWebcam();
+      }
+    });
+  });
+
+  // ===== WEBCAM MODE =====
+  const startWebcamBtn = document.getElementById('start-webcam');
+  const stopWebcamBtn = document.getElementById('stop-webcam');
+  const webcamStream = document.getElementById('webcam-stream');
+  const webcamStatus = document.getElementById('webcam-status');
+  let webcamInterval = null;
+
+  startWebcamBtn?.addEventListener('click', startWebcam);
+  stopWebcamBtn?.addEventListener('click', stopWebcam);
+
+  function startWebcam() {
+    webcamStatus.textContent = 'Starting webcam...';
+    webcamStream.src = '/webcam_feed';
+    webcamStream.classList.remove('hidden');
+    startWebcamBtn.classList.add('hidden');
+    stopWebcamBtn.classList.remove('hidden');
+    webcamStatus.textContent = 'Webcam active - detecting exercises...';
+    
+    // Handle errors
+    webcamStream.onerror = () => {
+      webcamStatus.textContent = 'Error: Could not access webcam';
+      stopWebcam();
+    };
+  }
+
+  function stopWebcam() {
+    if (webcamStream) {
+      webcamStream.src = '';
+      webcamStream.classList.add('hidden');
+    }
+    if (webcamInterval) {
+      clearInterval(webcamInterval);
+      webcamInterval = null;
+    }
+    startWebcamBtn?.classList.remove('hidden');
+    stopWebcamBtn?.classList.add('hidden');
+    webcamStatus.textContent = '';
+  }
+
+  // ===== VIDEO UPLOAD MODE =====
+  const videoForm = document.getElementById('video-form');
+  const videoInput = document.getElementById('video-input');
+  const videoStream = document.getElementById('video-stream');
+  const videoStatus = document.getElementById('video-status');
+
+  videoForm?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const file = videoInput.files?.[0];
+    if (!file) return;
+
+    videoStatus.textContent = 'Uploading video...';
+    
+    try {
+      const formData = new FormData();
+      formData.append('video', file);
+
+      const res = await fetch('/upload_video', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await res.json();
+
+      if (!res.ok || !data.ok) {
+        throw new Error(data.error || 'Upload failed');
+      }
+
+      videoStatus.textContent = 'Processing video...';
+      videoStream.src = `/video_feed/${data.video_id}`;
+      videoStream.classList.remove('hidden');
+      videoStatus.textContent = 'Video processing complete!';
+
+    } catch (err) {
+      console.error(err);
+      videoStatus.textContent = `Error: ${err.message}`;
+    }
+  });
+
+  // ===== IMAGE UPLOAD MODE =====
+  const imageForm = document.getElementById('image-form');
+  const imageInput = document.getElementById('image-input');
+  const previewBox = document.getElementById('preview');
+  const previewImg = document.getElementById('preview-img');
+  const imageStatus = document.getElementById('image-status');
+  const imageResult = document.getElementById('image-result');
+
+  // Preview handler
+  imageInput?.addEventListener('change', () => {
+    const file = imageInput.files?.[0];
+    if (!file) return;
+    
+    const url = URL.createObjectURL(file);
+    previewImg.src = url;
+    previewBox.classList.remove('hidden');
+    imageStatus.textContent = '';
+  });
+
+  // Submit handler
+  imageForm?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const file = imageInput.files?.[0];
+    if (!file) return;
+
+    imageStatus.textContent = 'Analyzing image...';
+    imageResult.innerHTML = '<div class="text-zinc-400 text-sm">Processing...</div>';
+
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const res = await fetch('/analyze_image', {
+        method: 'POST',
+        body: formData
+      });
+
+      const data = await res.json();
+
+      if (!res.ok || !data.ok) {
+        throw new Error(data.error || 'Analysis failed');
+      }
+
+      // Display results
+      const detections = data.detections || [];
+      const detectionCount = detections.length;
+      
+      let resultsHTML = `
+        <div class="space-y-4">
+          <div class="flex justify-center">
+            <img src="${data.annotated_image}" 
+                 alt="Detected exercises" 
+                 class="rounded-lg border border-white/10 max-w-full">
+          </div>
+          
+          <div class="text-lg font-semibold">
+            Found ${detectionCount} exercise${detectionCount !== 1 ? 's' : ''}
+          </div>
+      `;
+
+      if (detections.length > 0) {
+        resultsHTML += '<div class="space-y-3">';
+        
+        detections.forEach((det, idx) => {
+          const conf = (det.confidence * 100).toFixed(1);
+          resultsHTML += `
+            <div class="bg-zinc-800/50 rounded-lg p-4 border border-white/5">
+              <div class="flex justify-between items-center">
+                <span class="font-semibold text-lg capitalize">${det.label}</span>
+                <span class="text-zinc-400">${conf}% confident</span>
+              </div>
+            </div>
+          `;
+        });
+        
+        resultsHTML += '</div>';
+
+        // Add tips
+        if (data.tips && data.tips.length > 0) {
+          resultsHTML += '<div class="mt-4 space-y-2">';
+          resultsHTML += '<div class="font-semibold">Form Tips:</div>';
+          data.tips.forEach(tip => {
+            if (tip) {
+              resultsHTML += `<p class="text-zinc-300 text-sm">• ${tip}</p>`;
+            }
+          });
+          resultsHTML += '</div>';
+        }
+      }
+
+      resultsHTML += '</div>';
+      imageResult.innerHTML = resultsHTML;
+      imageStatus.textContent = '';
+
+    } catch (err) {
+      console.error(err);
+      imageStatus.textContent = `Error: ${err.message}`;
+      imageResult.innerHTML = '<div class="text-red-400 text-sm">Analysis failed. Please try again.</div>';
+    }
+  });
+});

static/js/particles.js

@@ -0,0 +1,72 @@
+// Animated dumbbell particles on a Canvas background
+(() => {
+  const canvas = document.getElementById('bg-canvas');
+  const ctx = canvas.getContext('2d', { alpha: true });
+
+  function resize() {
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.floor(innerWidth * dpr);
+    canvas.height = Math.floor(innerHeight * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  // Create particles shaped like tiny dumbbells
+  const NUM = Math.min(70, Math.floor((innerWidth * innerHeight) / 22000));
+  const particles = Array.from({ length: NUM }, () => spawn());
+
+  function spawn() {
+    const s = 0.5 + Math.random() * 1.2; // scale
+    return {
+      x: Math.random() * innerWidth,
+      y: Math.random() * innerHeight,
+      vx: -0.4 + Math.random() * 0.8,
+      vy: -0.4 + Math.random() * 0.8,
+      rot: Math.random() * Math.PI * 2,
+      vr: (-0.004 + Math.random() * 0.008),
+      s,
+      alpha: 0.15 + Math.random() * 0.35
+    };
+  }
+
+  function drawDumbbell(x, y, scale, rot, alpha) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rot);
+    ctx.scale(scale, scale);
+    ctx.globalAlpha = alpha;
+
+    // bar
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+    ctx.beginPath();
+    ctx.moveTo(-16, 0);
+    ctx.lineTo(16, 0);
+    ctx.stroke();
+
+    // plates
+    ctx.fillStyle = 'rgba(255,255,255,0.25)';
+    ctx.beginPath(); ctx.arc(-18, 0, 4, 0, Math.PI*2); ctx.fill();
+    ctx.beginPath(); ctx.arc(18, 0, 4, 0, Math.PI*2); ctx.fill();
+
+    ctx.restore();
+  }
+
+  function tick() {
+    ctx.clearRect(0, 0, innerWidth, innerHeight);
+    for (const p of particles) {
+      p.x += p.vx; p.y += p.vy; p.rot += p.vr;
+
+      // wrap-around
+      if (p.x < -30) p.x = innerWidth + 30;
+      if (p.x > innerWidth + 30) p.x = -30;
+      if (p.y < -30) p.y = innerHeight + 30;
+      if (p.y > innerHeight + 30) p.y = -30;
+
+      drawDumbbell(p.x, p.y, p.s, p.rot, p.alpha);
+    }
+    requestAnimationFrame(tick);
+  }
+  requestAnimationFrame(tick);
+})();

static/js/predict.js

@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form       = document.getElementById('upload-form');
+  const fileInput  = document.getElementById('file-input');
+  const previewBox = document.getElementById('preview');
+  const previewImg = document.getElementById('preview-img');
+  const statusEl   = document.getElementById('upload-status');
+  const resultEl   = document.getElementById('result');
+  const submitBtn  = form?.querySelector('button[type="submit"]');
+
+  if (!form) return;
+
+  // Local preview
+  let lastPreviewSrc = null;
+  fileInput.addEventListener('change', () => {
+    const f = fileInput.files?.[0];
+    if (!f) return;
+    lastPreviewSrc = URL.createObjectURL(f);
+    previewImg.src = lastPreviewSrc;
+    previewBox.classList.remove('hidden');
+    statusEl.textContent = '';
+  });
+
+  let busy = false;
+  form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (busy) return;
+    busy = true;
+    if (submitBtn) submitBtn.disabled = true;
+    statusEl.textContent = 'Analyzing…';
+    resultEl.innerHTML = '';
+
+    try {
+      const fd = new FormData(form);               // contains "image"
+      const url = form.action || '/analyze';       // action set in HTML
+      const res = await fetch(url, { method: 'POST', body: fd });
+
+      let data;
+      try { data = await res.json(); }
+      catch { throw new Error(`Bad JSON (HTTP ${res.status})`); }
+
+      if (!res.ok || data?.ok === false) {
+        throw new Error(data?.error || `HTTP ${res.status}`);
+      }
+
+      const pred = data?.prediction?.label ?? data?.label ?? '—';
+      const conf = data?.prediction?.confidence ?? data?.confidence;
+      const confTxt = (conf != null) ? ` (${(Number(conf) * 100).toFixed(1)}%)` : '';
+
+      // Prefer server-provided image; fall back to local preview
+      const imgSrc = data.image_url
+        ? data.image_url
+        : (data.image_b64 ? `data:image/png;base64,${data.image_b64}` : lastPreviewSrc);
+
+      resultEl.innerHTML = `
+        <div class="grid md:grid-cols-2 gap-4 items-start">
+          ${imgSrc ? `<img src="${imgSrc}" alt="Analyzed image"
+               class="rounded-lg border border-white/10 max-h-72 object-contain bg-black/20">` : ''}
+          <div>
+            <div class="text-xl font-semibold">Prediction: ${pred}${confTxt}</div>
+            ${data.form?.note ? `<p class="mt-2 text-zinc-400">${data.form.note}</p>` : ''}
+            ${data.tip ? `<p class="mt-2 text-zinc-300">${data.tip}</p>` : ''}
+          </div>
+        </div>
+      `;
+      statusEl.textContent = '';
+    } catch (err) {
+      console.error(err);
+      statusEl.textContent = err.message || 'Something went wrong. Please try again.';
+    } finally {
+      busy = false;
+      if (submitBtn) submitBtn.disabled = false;
+    }
+  });
+});

static/js/scroll-reveal.js

@@ -0,0 +1,15 @@
+// Fade-in on scroll (IntersectionObserver)
+(() => {
+  const els = document.querySelectorAll('.reveal');
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.remove('opacity-0', 'translate-y-4');
+        entry.target.classList.add('transition', 'duration-700', 'ease-out');
+        io.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.18 });
+
+  els.forEach(el => io.observe(el));
+})();

templates/index.html

@@ -0,0 +1,173 @@
+{% extends "base.html" %}
+{% block content %}
+
+<!-- Hero -->
+<section class="relative overflow-hidden">
+  <div class="max-w-7xl mx-auto px-6 pt-20 pb-24 text-center">
+    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-tight">
+      Real-time Exercise Detection
+    </h1>
+    <p class="mt-6 text-zinc-300 max-w-2xl mx-auto">
+      Detect exercises in real-time from your webcam, upload a video, or analyze a static image with bounding boxes and labels.
+    </p>
+
+    <a href="#detection"
+       class="inline-block mt-10 rounded-full px-6 py-3 bg-white text-zinc-900 font-semibold shadow-lg shadow-white/10 hover:shadow-white/20 transition hover:-translate-y-0.5">
+      Start Detection
+    </a>
+  </div>
+
+  <div class="h-[1px] w-full bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
+</section>
+
+<!-- Supported Exercises -->
+<section id="supported" class="max-w-7xl mx-auto px-6 py-16">
+  <h2 class="text-3xl font-extrabold mb-10">Supported Exercises</h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
+    <article class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 overflow-hidden hover:border-white/10 transition">
+      <img src="{{ url_for('static', filename='img/squat.png') }}" alt="Squat" class="w-full h-48 object-cover">
+      <div class="p-6">
+        <h3 class="text-xl font-bold">Squats</h3>
+        <p class="mt-2 text-zinc-300 text-sm">Detects barbell back/front squats.</p>
+      </div>
+    </article>
+
+    <article class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 overflow-hidden hover:border-white/10 transition">
+      <img src="{{ url_for('static', filename='img/bench.png') }}" alt="Bench Press" class="w-full h-48 object-cover">
+      <div class="p-6">
+        <h3 class="text-xl font-bold">Bench Press</h3>
+        <p class="mt-2 text-zinc-300 text-sm">Detects flat bench press.</p>
+      </div>
+    </article>
+
+    <article class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 overflow-hidden hover:border-white/10 transition">
+      <img src="{{ url_for('static', filename='img/deadlift.png') }}" alt="Deadlift" class="w-full h-48 object-cover">
+      <div class="p-6">
+        <h3 class="text-xl font-bold">Deadlifts</h3>
+        <p class="mt-2 text-zinc-300 text-sm">Detects conventional deadlifts.</p>
+      </div>
+    </article>
+
+    <article class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 overflow-hidden hover:border-white/10 transition">
+      <img src="{{ url_for('static', filename='img/leg_extension.png') }}" alt="Leg Extension" class="w-full h-48 object-cover">
+      <div class="p-6">
+        <h3 class="text-xl font-bold">Leg Extension</h3>
+        <p class="mt-2 text-zinc-300 text-sm">Detects machine-based leg extensions.</p>
+      </div>
+    </article>
+
+    <article class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 overflow-hidden hover:border-white/10 transition">
+      <img src="{{ url_for('static', filename='img/shoulder_press.png') }}" alt="Shoulder Press" class="w-full h-48 object-cover">
+      <div class="p-6">
+        <h3 class="text-xl font-bold">Shoulder Press</h3>
+        <p class="mt-2 text-zinc-300 text-sm">Detects seated shoulder press.</p>
+      </div>
+    </article>
+    
+    <article class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 overflow-hidden hover:border-white/10 transition">
+      <img src="{{ url_for('static', filename='img/pushup.png') }}" alt="Push-up" class="w-full h-48 object-cover">
+      <div class="p-6">
+        <h3 class="text-xl font-bold">Push-up</h3>
+        <p class="mt-2 text-zinc-300 text-sm">Detects standard push-ups and knee variations.</p>
+      </div>
+    </article>
+  </div>
+</section>
+
+<!-- Detection Section -->
+<section id="detection" class="max-w-7xl mx-auto px-6 pb-24">
+  <!-- Mode Selector -->
+  <div class="reveal opacity-0 translate-y-4 mb-8">
+    <div class="flex justify-center gap-4">
+      <button id="mode-webcam" class="mode-btn active px-6 py-3 rounded-xl bg-white text-zinc-900 font-semibold transition hover:-translate-y-0.5">
+        Webcam
+      </button>
+      <button id="mode-video" class="mode-btn px-6 py-3 rounded-xl bg-zinc-800 text-white font-semibold transition hover:-translate-y-0.5">
+        Video Upload
+      </button>
+      <button id="mode-image" class="mode-btn px-6 py-3 rounded-xl bg-zinc-800 text-white font-semibold transition hover:-translate-y-0.5">
+        Image Upload
+      </button>
+    </div>
+  </div>
+
+  <!-- Webcam Mode -->
+  <div id="webcam-section" class="detection-section">
+    <div class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 p-6">
+      <h3 class="text-2xl font-bold mb-4">Live Webcam Detection</h3>
+      <div class="flex justify-center mb-4">
+        <button id="start-webcam" class="px-6 py-3 rounded-xl bg-green-600 text-white font-semibold transition hover:bg-green-700">
+          Start Webcam
+        </button>
+        <button id="stop-webcam" class="hidden ml-4 px-6 py-3 rounded-xl bg-red-600 text-white font-semibold transition hover:bg-red-700">
+          Stop Webcam
+        </button>
+      </div>
+      <div class="flex justify-center">
+        <img id="webcam-stream" class="hidden rounded-lg border border-white/10 max-w-full" alt="Webcam feed">
+      </div>
+      <div id="webcam-status" class="mt-4 text-sm text-zinc-400 text-center"></div>
+    </div>
+  </div>
+
+  <!-- Video Upload Mode -->
+  <div id="video-section" class="detection-section hidden">
+    <div class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 p-6">
+      <h3 class="text-2xl font-bold mb-4">Video Detection</h3>
+      <form id="video-form">
+        <label class="block">
+          <span class="text-sm text-zinc-300">Choose video file (MP4, AVI, MOV, MKV, WEBM)</span>
+          <input id="video-input" type="file" accept=".mp4,.avi,.mov,.mkv,.webm"
+                 class="mt-2 w-full rounded-lg bg-zinc-800 border border-white/10 p-3 file:mr-4 file:rounded file:border-0 file:bg-white file:text-zinc-900 file:px-4 file:py-2 hover:cursor-pointer" required>
+        </label>
+        <button type="submit" class="mt-4 w-full rounded-xl bg-white text-zinc-900 font-semibold py-3 hover:-translate-y-0.5 transition">
+          Process Video
+        </button>
+        <p id="video-status" class="mt-2 text-sm text-zinc-400"></p>
+      </form>
+      <div class="flex justify-center mt-6">
+        <img id="video-stream" class="hidden rounded-lg border border-white/10 max-w-full" alt="Video feed">
+      </div>
+    </div>
+  </div>
+
+  <!-- Image Upload Mode -->
+  <div id="image-section" class="detection-section hidden">
+    <div class="grid lg:grid-cols-2 gap-10 items-start">
+      <!-- Upload panel -->
+      <div class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 p-6">
+        <h3 class="text-2xl font-bold">Upload an Image</h3>
+        <p class="text-zinc-300 text-sm mt-1">JPG/PNG up to ~10MB.</p>
+
+        <form id="image-form">
+          <label class="block">
+            <span class="text-sm text-zinc-300">Choose file</span>
+            <input id="image-input" type="file" accept=".jpg,.jpeg,.png,.webp"
+                   class="mt-2 w-full rounded-lg bg-zinc-800 border border-white/10 p-3 file:mr-4 file:rounded file:border-0 file:bg-white file:text-zinc-900 file:px-4 file:py-2 hover:cursor-pointer" required>
+          </label>
+
+          <div id="preview" class="hidden mt-4">
+            <img id="preview-img" class="rounded-lg border border-white/10 max-h-64 object-contain mx-auto" alt="Preview">
+          </div>
+
+          <button type="submit"
+                  class="mt-4 w-full rounded-xl bg-white text-zinc-900 font-semibold py-3 hover:-translate-y-0.5 transition shadow-lg shadow-white/10 hover:shadow-white/20">
+            Analyze
+          </button>
+          <p id="image-status" class="mt-2 text-sm text-zinc-400"></p>
+        </form>
+      </div>
+
+      <!-- Results panel -->
+      <div class="reveal opacity-0 translate-y-4 bg-zinc-900/50 rounded-2xl border border-white/5 p-6">
+        <h3 class="text-2xl font-bold">Detection Results</h3>
+        <div id="image-result" class="mt-4 space-y-4">
+          <div class="text-zinc-400 text-sm">Upload an image to see detections.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{% endblock %}