modularize both backend and frontend js part

Dockerfile

@@ -9,6 +9,7 @@ ENV PYTHONUNBUFFERED=1 \
 
 # Install system dependencies with full ffmpeg and x264
 RUN apt-get update && apt-get install -y --no-install-recommends \
+    redis-tools \
     libgl1 \
     libglib2.0-0 \
     libsm6 \

backend/app/__init__.py

@@ -7,9 +7,9 @@ __version__ = "1.0.0"
 __author__ = "Prathamesh Vaidya"
 
 from .config import Config
-from .pose_analyzer import PoseAnalyzer, PoseKeypoints
-from .movement_classifier import MovementClassifier, MovementType, MovementMetrics
-from .video_processor import VideoProcessor
+from .core.pose_analyzer import PoseAnalyzer, PoseKeypoints
+from .core.movement_classifier import MovementClassifier, MovementType, MovementMetrics
+from .core.video_processor import VideoProcessor
 from .utils import (
     generate_session_id,
     validate_file_extension,

backend/app/api/__init__.py

@@ -0,0 +1,14 @@
+"""
+API layer - routes and websocket handling
+"""
+
+from .routes import router
+from .websocket import manager, ConnectionManager
+from .dependencies import get_video_processor
+
+__all__ = [
+    'router',
+    'manager',
+    'ConnectionManager',
+    'get_video_processor'
+]

backend/app/api/dependencies.py

@@ -0,0 +1,21 @@
+"""
+Shared API dependencies
+"""
+
+from typing import Optional
+from app.core.video_processor import VideoProcessor
+
+# Global processor instance
+global_processor: Optional[VideoProcessor] = None
+
+
+def get_video_processor() -> VideoProcessor:
+    """Get or create the global VideoProcessor instance"""
+    global global_processor
+    if global_processor is None:
+        import logging
+        logger = logging.getLogger(__name__)
+        logger.info("Initializing VideoProcessor (first use)...")
+        global_processor = VideoProcessor()
+        logger.info("✅ VideoProcessor initialized")
+    return global_processor

backend/app/api/routes.py

@@ -0,0 +1,316 @@
+"""
+API Routes
+"""
+
+from fastapi import APIRouter, File, UploadFile, HTTPException, WebSocket, WebSocketDisconnect
+from fastapi.responses import StreamingResponse
+from datetime import datetime
+from pathlib import Path
+import asyncio
+import logging
+
+from app.config import Config
+from app.services.session_manager import session_manager
+from app.services.video_service import video_service
+from app.services.processing_service import processing_service
+from app.api.websocket import manager
+from app.models.responses import (
+    HealthResponse,
+    SessionListResponse,
+    ResultsResponse
+)
+from app.utils.file_utils import generate_session_id
+from app.services.cleanup_service import cleanup_service
+
+logger = logging.getLogger(__name__)
+
+# Create router
+router = APIRouter()
+
+@router.get("/health", response_model=HealthResponse)
+async def health_check():
+    """Health check endpoint"""
+    return HealthResponse(
+        status="healthy",
+        models_loaded=video_service.processor is not None,
+        models_ready=True,
+        timestamp=datetime.now().isoformat(),
+        active_sessions=session_manager.get_active_count()
+    )
+
+
+@router.post("/api/upload")
+async def upload_video(file: UploadFile = File(...)):
+    """Upload a video file for processing"""
+    try:
+        session_id = generate_session_id()
+        
+        # Validate file
+        validation = video_service.validate_video(file.filename)
+        if not validation["valid"]:
+            raise HTTPException(status_code=400, detail=validation["error"])
+        
+        # Save uploaded file
+        upload_path = video_service.save_upload(file, session_id, file.filename)
+        
+        # Load video info
+        video_info = video_service.load_video_info(upload_path)
+        
+        # Create session
+        session_manager.create_session(
+            session_id=session_id,
+            filename=file.filename,
+            upload_path=str(upload_path),
+            video_info=video_info
+        )
+        
+        logger.info(f"File uploaded: {session_id} - {file.filename}")
+        
+        return {
+            "success": True,
+            "session_id": session_id,
+            **video_info
+        }
+        
+    except Exception as e:
+        logger.error(f"Upload error: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Upload failed: {str(e)}")
+
+
+# @router.post("/api/analyze/{session_id}")
+# async def analyze_video(session_id: str):
+#     """Start video analysis for uploaded file"""
+#     try:
+#         # Check if session exists
+#         session = session_manager.get_session(session_id)
+#         if not session:
+#             raise HTTPException(status_code=404, detail="Session not found")
+        
+#         if session["status"] != "uploaded":
+#             raise HTTPException(
+#                 status_code=400,
+#                 detail=f"Invalid session status: {session['status']}"
+#             )
+        
+#         # Update status
+#         session_manager.update_session(session_id, {
+#             "status": "processing",
+#             "start_time": datetime.now().isoformat()
+#         })
+        
+#         # Start async processing
+#         asyncio.create_task(
+#             processing_service.process_video_async(session_id, manager)
+#         )
+        
+#         return {
+#             "success": True,
+#             "message": "Analysis started",
+#             "session_id": session_id,
+#             "websocket_url": f"/ws/{session_id}"
+#         }
+        
+#     except HTTPException:
+#         raise
+#     except Exception as e:
+#         logger.error(f"Analysis error: {str(e)}")
+#         raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")
+
+
+@router.post("/api/analyze/{session_id}")
+async def analyze_video(session_id: str):
+    """Start video analysis with Celery worker"""
+    try:
+        session = session_manager.get_session(session_id)
+        if not session:
+            raise HTTPException(status_code=404, detail="Session not found")
+        
+        if session["status"] != "uploaded":
+            raise HTTPException(
+                status_code=400,
+                detail=f"Invalid session status: {session['status']}"
+            )
+        
+        # Start processing with Celery
+        task_info = processing_service.start_processing(session_id)
+        
+        return {
+            "success": True,
+            "message": "Analysis queued",
+            "session_id": session_id,
+            "task_id": task_info["task_id"],
+            "poll_url": f"/api/task/{task_info['task_id']}"
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Analysis error: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")
+
+
+@router.get("/api/task/{task_id}")
+async def get_task_status(task_id: str):
+    """Get Celery task status (polling endpoint)"""
+    try:
+        status = processing_service.get_task_status(task_id)
+        return {
+            "success": True,
+            "task_id": task_id,
+            **status
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+    
+
+@router.get("/api/results/{session_id}", response_model=ResultsResponse)
+async def get_results(session_id: str):
+    """Get analysis results for a session"""
+    session = session_manager.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found")
+    
+    if session["status"] != "completed":
+        return ResultsResponse(
+            success=False,
+            session_id=session_id,
+            status=session["status"],
+            results=None,
+            download_url=None
+        )
+    
+    # Convert results to ensure JSON serialization
+    from app.services.processing_service import convert_to_native_bool
+    safe_results = convert_to_native_bool(session.get("results", {}))
+    
+    return ResultsResponse(
+        success=True,
+        session_id=session_id,
+        status=session["status"],
+        results=safe_results,
+        download_url=f"/api/download/{session_id}"
+    )
+
+
+@router.get("/api/download/{session_id}")
+async def download_video(session_id: str):
+    """Download processed video"""
+    session = session_manager.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found")
+    
+    if session["status"] != "completed":
+        raise HTTPException(status_code=400, detail="Processing not complete")
+    
+    output_path = Path(session["output_path"])
+    
+    if not output_path.exists():
+        raise HTTPException(status_code=404, detail="Output file not found")
+    
+    # Get file size
+    file_size = output_path.stat().st_size
+    
+    # Stream video
+    def iterfile():
+        with open(output_path, mode="rb") as file_like:
+            chunk_size = 8192
+            while True:
+                chunk = file_like.read(chunk_size)
+                if not chunk:
+                    break
+                yield chunk
+    
+    return StreamingResponse(
+        iterfile(),
+        media_type="video/mp4",
+        headers={
+            "Accept-Ranges": "bytes",
+            "Content-Length": str(file_size),
+            "Content-Disposition": f'inline; filename="analyzed_{session["filename"]}"',
+            "Cache-Control": "no-cache",
+            "X-Content-Type-Options": "nosniff"
+        }
+    )
+
+
+@router.delete("/api/session/{session_id}")
+async def delete_session(session_id: str):
+    """Delete a session and its files"""
+    session = session_manager.get_session(session_id)
+    if not session:
+        raise HTTPException(status_code=404, detail="Session not found")
+    
+    # Delete files
+    video_service.cleanup_session_files(session)
+    
+    # Remove session
+    session_manager.delete_session(session_id)
+    
+    return {
+        "success": True,
+        "message": "Session deleted",
+        "session_id": session_id
+    }
+
+
+@router.get("/api/sessions", response_model=SessionListResponse)
+async def list_sessions():
+    """List all active sessions"""
+    sessions = session_manager.list_sessions()
+    
+    return SessionListResponse(
+        success=True,
+        count=len(sessions),
+        sessions=sessions
+    )
+
+
+@router.websocket("/ws/{session_id}")
+async def websocket_endpoint(websocket: WebSocket, session_id: str):
+    """WebSocket endpoint for real-time updates"""
+    await manager.connect(session_id, websocket)
+    
+    try:
+        # Send initial connection message
+        await websocket.send_json({
+            "type": "connected",
+            "message": "WebSocket connected",
+            "session_id": session_id
+        })
+        
+        # Keep connection alive
+        while True:
+            try:
+                data = await asyncio.wait_for(websocket.receive_text(), timeout=30.0)
+                
+                # Echo heartbeat
+                if data == "ping":
+                    await websocket.send_json({"type": "pong"})
+                    
+            except asyncio.TimeoutError:
+                # Send keepalive
+                await websocket.send_json({"type": "keepalive"})
+                
+    except WebSocketDisconnect:
+        manager.disconnect(session_id)
+        logger.info(f"Client disconnected: {session_id}")
+    except Exception as e:
+        logger.error(f"WebSocket error: {str(e)}")
+        manager.disconnect(session_id)
+
+# Add this endpoint
+@router.get("/api/admin/storage")
+async def get_storage_stats():
+    """Get storage statistics (admin endpoint)"""
+    return cleanup_service.get_storage_stats()
+
+
+@router.post("/api/admin/cleanup")
+async def trigger_cleanup():
+    """Manually trigger cleanup (admin endpoint)"""
+    result = await cleanup_service.run_cleanup()
+    return {
+        "success": True,
+        "message": "Cleanup completed",
+        **result
+    }

backend/app/api/websocket.py

@@ -0,0 +1,50 @@
+"""
+WebSocket connection management
+"""
+
+from typing import Dict
+from fastapi import WebSocket
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class ConnectionManager:
+    """Manages WebSocket connections for real-time updates"""
+    
+    def __init__(self):
+        self.active_connections: Dict[str, WebSocket] = {}
+    
+    async def connect(self, session_id: str, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections[session_id] = websocket
+        logger.info(f"WebSocket connected: {session_id}")
+    
+    def disconnect(self, session_id: str):
+        if session_id in self.active_connections:
+            del self.active_connections[session_id]
+            logger.info(f"WebSocket disconnected: {session_id}")
+    
+    async def send_message(self, session_id: str, message: dict):
+        if session_id in self.active_connections:
+            try:
+                await self.active_connections[session_id].send_json(message)
+            except Exception as e:
+                logger.error(f"Error sending message to {session_id}: {e}")
+                self.disconnect(session_id)
+    
+    async def broadcast(self, message: dict):
+        """Send message to all connected clients"""
+        disconnected = []
+        for session_id, connection in self.active_connections.items():
+            try:
+                await connection.send_json(message)
+            except Exception:
+                disconnected.append(session_id)
+        
+        for session_id in disconnected:
+            self.disconnect(session_id)
+
+
+# Global manager instance
+manager = ConnectionManager()

backend/app/celery_app.py

@@ -0,0 +1,32 @@
+"""
+Celery application for background task processing
+"""
+
+from celery import Celery
+from app.config import Config
+import os
+
+# Redis URL from environment or default
+REDIS_URL = os.getenv("REDIS_URL", "redis://localhost:6379/0")
+
+# Create Celery app
+celery_app = Celery(
+    "dance_analyzer",
+    broker=REDIS_URL,
+    backend=REDIS_URL,
+    include=['app.tasks']
+)
+
+# Celery configuration
+celery_app.conf.update(
+    task_serializer='json',
+    accept_content=['json'],
+    result_serializer='json',
+    timezone='UTC',
+    enable_utc=True,
+    task_track_started=True,
+    task_time_limit=600,  # 10 minutes max per task
+    task_soft_time_limit=540,  # 9 minutes soft limit
+    worker_prefetch_multiplier=1,  # Take one task at a time
+    worker_max_tasks_per_child=10,  # Restart worker after 10 tasks (prevent memory leaks)
+)

backend/app/core/__init__.py

@@ -0,0 +1,16 @@
+"""
+Core business logic for pose detection and movement analysis
+"""
+
+from .pose_analyzer import PoseAnalyzer, PoseKeypoints
+from .movement_classifier import MovementClassifier, MovementType, MovementMetrics
+from .video_processor import VideoProcessor
+
+__all__ = [
+    'PoseAnalyzer',
+    'PoseKeypoints',
+    'MovementClassifier',
+    'MovementType',
+    'MovementMetrics',
+    'VideoProcessor'
+]

backend/app/{movement_classifier.py → core/movement_classifier.py}

@@ -9,9 +9,9 @@ from dataclasses import dataclass
 from enum import Enum
 import logging
 
-from .config import Config
-from .pose_analyzer import PoseKeypoints
-from .utils import safe_divide
+from app.config import Config
+from app.core.pose_analyzer import PoseKeypoints
+from app.utils.validation import safe_divide
 
 logger = logging.getLogger(__name__)
 

backend/app/{pose_analyzer.py → core/pose_analyzer.py}

@@ -10,8 +10,8 @@ from typing import List, Tuple, Optional, Dict, Any
 from dataclasses import dataclass
 import logging
 
-from .config import Config
-from .utils import timing_decorator
+from app.config import Config
+from app.utils.helpers import timing_decorator
 
 logger = logging.getLogger(__name__)
 

backend/app/{video_processor.py → core/video_processor.py}

@@ -9,10 +9,11 @@ from pathlib import Path
 from typing import Optional, Callable, Dict, Any, List, Tuple
 import logging
 
-from .config import Config
-from .pose_analyzer import PoseAnalyzer, PoseKeypoints
-from .movement_classifier import MovementClassifier, MovementMetrics
-from .utils import timing_decorator, format_file_size
+from app.config import Config
+from app.core.pose_analyzer import PoseAnalyzer, PoseKeypoints
+from app.core.movement_classifier import MovementClassifier, MovementMetrics
+from app.utils.helpers import timing_decorator
+from app.utils.file_utils import format_file_size
 
 logger = logging.getLogger(__name__)
 

backend/app/main.py

@@ -1,27 +1,20 @@
 """
-FastAPI Application with Optimized Startup for Hugging Face Spaces
+FastAPI Application - Main Entry Point
 """
 
-from fastapi import FastAPI, File, UploadFile, WebSocket, WebSocketDisconnect, HTTPException, Request
-from fastapi.responses import FileResponse, JSONResponse, HTMLResponse, StreamingResponse
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 from contextlib import asynccontextmanager
 from pathlib import Path
-import asyncio
-import json
-import uuid
-import sys
-import shutil
-from typing import Optional, Dict, Any
 import logging
-from datetime import datetime
-import numpy as np
+import sys
 
 from .config import Config
-from .video_processor import VideoProcessor
-from .utils import validate_file_extension, format_file_size, timing_decorator
-from fastapi.templating import Jinja2Templates
+from .api.routes import router
+from .services.cleanup_service import cleanup_service
 
 # Configure logging
 logging.basicConfig(
@@ -30,23 +23,16 @@ logging.basicConfig(
 )
 logger = logging.getLogger(__name__)
 
-# Global processor instance (initialized on startup)
-global_processor: Optional[VideoProcessor] = None
-
 @asynccontextmanager
 async def lifespan(app: FastAPI):
-    """Lifespan event handler - lazy model loading"""
-    
+    """Lifespan event handler"""
     # Startup
     logger.info("🚀 Starting Dance Movement Analyzer...")
-    
-    # Initialize folders
     Config.initialize_folders()
     logger.info("✅ Folders initialized")
     
-    # Don't initialize VideoProcessor here - let it lazy load on first request
-    # This avoids the permission error during startup
-    logger.info("📦 Models pre-downloaded, will initialize on first request")
+    # Start cleanup service
+    await cleanup_service.start()
     
     logger.info("🎉 Application startup complete!")
     
@@ -54,11 +40,12 @@ async def lifespan(app: FastAPI):
     
     # Shutdown
     logger.info("👋 Shutting down application...")
+    await cleanup_service.stop()
 
-# Initialize FastAPI app with lifespan
+# Initialize FastAPI app
 app = FastAPI(
     title="Dance Movement Analysis API",
-    description="AI-powered dance movement analysis with pose detection and classification",
+    description="AI-powered dance movement analysis with pose detection",
     version="1.0.0",
     docs_url="/api/docs",
     redoc_url="/api/redoc",
@@ -74,92 +61,32 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Compute the frontend folder path correctly.
-# backend/app/main.py -> go up two levels to repo root then /frontend
-static_path = Path(__file__).parent.parent / "frontend"
-
-# Debugging helper (optional) to log the resolved path during startup
-import logging
-logging.getLogger("uvicorn").info(f"Resolved frontend path: {static_path.resolve()}")
+# Mount static files (frontend)
+static_path = Path(__file__).parent.parent.parent / "frontend"
+logger.info(f"Frontend path: {static_path.resolve()}")
 
 if static_path.exists() and static_path.is_dir():
-    # Mount the entire frontend folder at /static so references like /static/css/styles.css work.
     app.mount("/static", StaticFiles(directory=str(static_path)), name="static")
-    # Point the Jinja2 templates loader to the frontend directory so index.html is found.
     templates = Jinja2Templates(directory=str(static_path))
 else:
-    # If frontend folder missing, fall back to templates pointing to an empty dir
-    templates = Jinja2Templates(directory=str(static_path))  # will throw at request time
-    # Optionally log a warning so you notice in logs
-    import logging
-    logging.getLogger("uvicorn.error").warning(f"Frontend directory not found at {static_path.resolve()}")
-
-
-# Active WebSocket connections
-active_connections: Dict[str, WebSocket] = {}
-
-# Processing sessions
-processing_sessions: Dict[str, Dict[str, Any]] = {}
-
-def convert_to_native_bool(obj):
-    """Recursively convert numpy types to native Python types."""
-    if isinstance(obj, np.bool_):
-        return bool(obj)
-    elif isinstance(obj, (np.integer, np.floating)):
-        return obj.item()
-    elif isinstance(obj, dict):
-        return {k: convert_to_native_bool(v) for k, v in obj.items()}
-    elif isinstance(obj, (list, tuple)):
-        return [convert_to_native_bool(v) for v in obj]
-    else:
-        return obj
+    templates = Jinja2Templates(directory=str(static_path))
+    logger.warning(f"Frontend directory not found at {static_path.resolve()}")
 
-class ConnectionManager:
-    """Manages WebSocket connections for real-time updates"""
-    
-    def __init__(self):
-        self.active_connections: Dict[str, WebSocket] = {}
-    
-    async def connect(self, session_id: str, websocket: WebSocket):
-        await websocket.accept()
-        self.active_connections[session_id] = websocket
-        logger.info(f"WebSocket connected: {session_id}")
-    
-    def disconnect(self, session_id: str):
-        if session_id in self.active_connections:
-            del self.active_connections[session_id]
-            logger.info(f"WebSocket disconnected: {session_id}")
-    
-    async def send_message(self, session_id: str, message: dict):
-        if session_id in self.active_connections:
-            try:
-                await self.active_connections[session_id].send_json(message)
-            except Exception as e:
-                logger.error(f"Error sending message to {session_id}: {e}")
-                self.disconnect(session_id)
-    
-    async def broadcast(self, message: dict):
-        """Send message to all connected clients"""
-        disconnected = []
-        for session_id, connection in self.active_connections.items():
-            try:
-                await connection.send_json(message)
-            except Exception:
-                disconnected.append(session_id)
-        
-        for session_id in disconnected:
-            self.disconnect(session_id)
+# Include API routes
+app.include_router(router)
 
-manager = ConnectionManager()
 
 @app.get("/", response_class=HTMLResponse)
 async def home(request: Request):
-    """Home page."""
+    """Home page"""
     return templates.TemplateResponse("index.html", {"request": request})
 
+
 @app.get("/info")
 async def root():
-    """Root endpoint - serves API info"""
+    """Root endpoint - API info"""
+    from app.api.dependencies import global_processor
+    
     return {
         "name": "Dance Movement Analysis API",
         "version": "1.0.0",
@@ -174,477 +101,20 @@ async def root():
         }
     }
 
-@app.get("/health")
-async def health_check():
-    """Health check endpoint"""
-    return {
-        "status": "healthy",
-        "models_loaded": global_processor is not None,
-        "models_ready": True,  # Models are pre-downloaded
-        "timestamp": datetime.now().isoformat(),
-        "active_sessions": len(processing_sessions)
-    }
-
-def get_video_processor() -> VideoProcessor:
-    """Get or create the global VideoProcessor instance"""
-    global global_processor
-    if global_processor is None:
-        logger.info("Initializing VideoProcessor (first use)...")
-        global_processor = VideoProcessor()
-        logger.info("✅ VideoProcessor initialized")
-    return global_processor
-
-@app.post("/api/upload")
-async def upload_video(file: UploadFile = File(...)):
-    """Upload a video file for processing"""
-    from typing import List
-    allowed_extensions: List[str] = [".mp4", ".avi", ".mov", ".mkv", ".webm"]
-
-    try:
-        session_id = str(uuid.uuid4())
-
-        # Validate file
-        validation = validate_file_extension(file.filename, allowed_extensions)
-        if not validation["valid"]:
-            raise HTTPException(status_code=400, detail=validation["error"])
-        
-        # Save uploaded file
-        upload_path = Config.UPLOAD_FOLDER / f"{session_id}_{file.filename}"
-        
-        with open(upload_path, "wb") as buffer:
-            shutil.copyfileobj(file.file, buffer)
-        
-        # Use pre-initialized processor
-        processor = global_processor or VideoProcessor()
-        video_info = processor.load_video(upload_path)
-        
-        # Store session info
-        processing_sessions[session_id] = {
-            "filename": file.filename,
-            "upload_path": str(upload_path),
-            "upload_time": datetime.now().isoformat(),
-            "status": "uploaded",
-            "video_info": video_info
-        }
-        
-        logger.info(f"File uploaded: {session_id} - {file.filename}")
-        
-        return {
-            "success": True,
-            "session_id": session_id,
-            "filename": file.filename,
-            "size": format_file_size(video_info["size_bytes"]),
-            "duration": f"{video_info['duration']:.1f}s",
-            "resolution": f"{video_info['width']}x{video_info['height']}",
-            "fps": video_info["fps"],
-            "frame_count": video_info["frame_count"]
-        }
-        
-    except Exception as e:
-        logger.error(f"Upload error: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Upload failed: {str(e)}")
-
-
-@app.post("/api/analyze/{session_id}")
-async def analyze_video(session_id: str):
-    """
-    Start video analysis for uploaded file
-    
-    Args:
-        session_id: Session ID from upload
-        
-    Returns:
-        JSON indicating analysis started
-    """
-    try:
-        # Check if session exists
-        if session_id not in processing_sessions:
-            raise HTTPException(status_code=404, detail="Session not found")
-        
-        session = processing_sessions[session_id]
-        
-        if session["status"] != "uploaded":
-            raise HTTPException(
-                status_code=400,
-                detail=f"Invalid session status: {session['status']}"
-            )
-        
-        # Update status
-        session["status"] = "processing"
-        session["start_time"] = datetime.now().isoformat()
-        
-        # Start async processing
-        asyncio.create_task(process_video_async(session_id))
-        
-        return {
-            "success": True,
-            "message": "Analysis started",
-            "session_id": session_id,
-            "websocket_url": f"/ws/{session_id}"
-        }
-        
-    except HTTPException:
-        raise
-    except Exception as e:
-        logger.error(f"Analysis error: {str(e)}")
-        raise HTTPException(status_code=500, detail=f"Analysis failed: {str(e)}")
-
-
-# async def process_video_async(session_id: str):
-#     """
-#     Async video processing task
-    
-#     Args:
-#         session_id: Session ID to process
-#     """
-#     try:
-#         session = processing_sessions[session_id]
-#         input_path = Path(session["upload_path"])
-#         output_path = Config.OUTPUT_FOLDER / f"analyzed_{session_id}.mp4"
-#         results_path = Config.OUTPUT_FOLDER / f"results_{session_id}.json"
-        
-#         # Create processor
-#         processor = VideoProcessor()
-        
-#         # Create progress callback
-#         async def progress_cb(progress: float, message: str):
-#             await manager.send_message(session_id, {
-#                 "type": "progress",
-#                 "progress": progress,
-#                 "message": message,
-#                 "timestamp": datetime.now().isoformat()
-#             })
-        
-#         # Process video
-#         await manager.send_message(session_id, {
-#             "type": "status",
-#             "status": "processing",
-#             "message": "Starting pose detection..."
-#         })
-        
-#         # Run processing in thread pool to avoid blocking
-#         loop = asyncio.get_event_loop()
-#         results = await loop.run_in_executor(
-#             None,
-#             lambda: processor.process_video(
-#                 video_path=input_path,
-#                 output_path=output_path,
-#                 progress_callback=lambda p, m: asyncio.run(progress_cb(p, m))
-#             )
-#         )
-        
-#         # ✅ Convert NumPy objects before saving or storing
-#         results = convert_to_native_bool(raw_results)
-
-#         # Save clean JSON results
-#         with open(results_path, 'w') as f:
-#             json.dump(results, f, indent=2, default=str)
-        
-#         # Update session
-#         session["status"] = "completed"
-#         session["output_path"] = str(output_path)
-#         session["results_path"] = str(results_path)
-#         session["end_time"] = datetime.now().isoformat()
-#         session["results"] = results
-        
-#         # Before sending the message, convert results:
-#         print("Before sending the message, we convert results here")
-#         results = convert_to_native_bool(results)
-
-#         # Send completion message
-#         await manager.send_message(session_id, {
-#             "type": "complete",
-#             "status": "completed",
-#             "message": "Analysis complete!",
-#             "results": results,
-#             "download_url": f"/api/download/{session_id}"
-#         })
-        
-#         logger.info(f"Processing completed: {session_id}")
-        
-#     except Exception as e:
-#         logger.error(f"Processing error for {session_id}: {str(e)}")
-        
-#         session["status"] = "failed"
-#         session["error"] = str(e)
-        
-#         await manager.send_message(session_id, {
-#             "type": "error",
-#             "status": "failed",
-#             "message": f"Processing failed: {str(e)}"
-#         })
-
-async def process_video_async(session_id: str):
-    try:
-        session = processing_sessions[session_id]
-        input_path = Path(session["upload_path"])
-        output_path = Config.OUTPUT_FOLDER / f"analyzed_{session_id}.mp4"
-        results_path = Config.OUTPUT_FOLDER / f"results_{session_id}.json"
-        
-        processor = VideoProcessor()
-
-        async def progress_cb(progress: float, message: str):
-            await manager.send_message(session_id, {
-                "type": "progress",
-                "progress": progress,
-                "message": message,
-                "timestamp": datetime.now().isoformat()
-            })
-
-        await manager.send_message(session_id, {
-            "type": "status",
-            "status": "processing",
-            "message": "Starting pose detection..."
-        })
-
-        loop = asyncio.get_event_loop()
-        raw_results = await loop.run_in_executor(
-            None,
-            lambda: processor.process_video(
-                video_path=input_path,
-                output_path=output_path,
-                progress_callback=lambda p, m: asyncio.run(progress_cb(p, m))
-            )
-        )
-
-        # ✅ Convert NumPy objects before saving or storing
-        results = convert_to_native_bool(raw_results)
-
-        # Save clean JSON results
-        with open(results_path, 'w') as f:
-            json.dump(results, f, indent=2, default=str)
-
-        session.update({
-            "status": "completed",
-            "output_path": str(output_path),
-            "results_path": str(results_path),
-            "end_time": datetime.now().isoformat(),
-            "results": results
-        })
-
-        # Send final WebSocket message
-        await manager.send_message(session_id, {
-            "type": "complete",
-            "status": "completed",
-            "message": "Analysis complete!",
-            "results": results,
-            "download_url": f"/api/download/{session_id}"
-        })
-
-        logger.info(f"Processing completed: {session_id}")
-
-    except Exception as e:
-        logger.error(f"Processing error for {session_id}: {str(e)}")
-        session["status"] = "failed"
-        session["error"] = str(e)
-
-        await manager.send_message(session_id, {
-            "type": "error",
-            "status": "failed",
-            "message": f"Processing failed: {str(e)}"
-        })
-
-@app.get("/api/results/{session_id}")
-async def get_results(session_id: str):
-    """
-    Get analysis results for a session
-    
-    Args:
-        session_id: Session ID
-        
-    Returns:
-        JSON with analysis results
-    """
-    if session_id not in processing_sessions:
-        raise HTTPException(status_code=404, detail="Session not found")
-    
-    session = processing_sessions[session_id]
-    
-    if session["status"] != "completed":
-        return {
-            "status": session["status"],
-            "message": "Processing not complete"
-        }
-
-    # ✅ Ensure safe serialization
-    safe_results = convert_to_native_bool(session.get("results", {}))
-    
-    return {
-        "success": True,
-        "session_id": session_id,
-        "status": session["status"],
-        # "results": session.get("results", {}),
-        "results": safe_results,
-        "download_url": f"/api/download/{session_id}"
-    }
-
-
-@app.get("/api/download/{session_id}")
-async def download_video(session_id: str):
-    """
-    Download processed video
-    
-    Args:
-        session_id: Session ID
-        
-    Returns:
-        Video file
-    """
-    if session_id not in processing_sessions:
-        raise HTTPException(status_code=404, detail="Session not found")
-    
-    session = processing_sessions[session_id]
-    
-    if session["status"] != "completed":
-        raise HTTPException(status_code=400, detail="Processing not complete")
-    
-    output_path = Path(session["output_path"])
-    
-    if not output_path.exists():
-        raise HTTPException(status_code=404, detail="Output file not found")
-    
-    # Get file size for Content-Length header
-    file_size = output_path.stat().st_size
-    
-    # Use StreamingResponse with proper headers for browser video playback
-    def iterfile():
-        with open(output_path, mode="rb") as file_like:
-            chunk_size = 8192  # 8KB chunks
-            while True:
-                chunk = file_like.read(chunk_size)
-                if not chunk:
-                    break
-                yield chunk
-
-    return StreamingResponse(
-        iterfile(),
-        media_type="video/mp4",
-        headers={
-            "Accept-Ranges": "bytes",
-            "Content-Length": str(file_size),
-            "Content-Disposition": f'inline; filename="analyzed_{session["filename"]}"',
-            "Cache-Control": "no-cache",
-            "X-Content-Type-Options": "nosniff"
-        }
-    )
-
-
-@app.websocket("/ws/{session_id}")
-async def websocket_endpoint(websocket: WebSocket, session_id: str):
-    """
-    WebSocket endpoint for real-time updates
-    
-    Args:
-        websocket: WebSocket connection
-        session_id: Session ID to monitor
-    """
-    await manager.connect(session_id, websocket)
-    
-    try:
-        # Send initial connection message
-        await websocket.send_json({
-            "type": "connected",
-            "message": "WebSocket connected",
-            "session_id": session_id
-        })
-        
-        # Keep connection alive
-        while True:
-            # Wait for messages (heartbeat)
-            try:
-                data = await asyncio.wait_for(websocket.receive_text(), timeout=30.0)
-                
-                # Echo heartbeat
-                if data == "ping":
-                    await websocket.send_json({"type": "pong"})
-                    
-            except asyncio.TimeoutError:
-                # Send keepalive
-                await websocket.send_json({"type": "keepalive"})
-                
-    except WebSocketDisconnect:
-        manager.disconnect(session_id)
-        logger.info(f"Client disconnected: {session_id}")
-    except Exception as e:
-        logger.error(f"WebSocket error: {str(e)}")
-        manager.disconnect(session_id)
-
-
-@app.delete("/api/session/{session_id}")
-async def delete_session(session_id: str):
-    """
-    Delete a session and its files
-    
-    Args:
-        session_id: Session ID to delete
-        
-    Returns:
-        Success message
-    """
-    if session_id not in processing_sessions:
-        raise HTTPException(status_code=404, detail="Session not found")
-    
-    session = processing_sessions[session_id]
-    
-    # Delete files
-    try:
-        if "upload_path" in session:
-            Path(session["upload_path"]).unlink(missing_ok=True)
-        if "output_path" in session:
-            Path(session["output_path"]).unlink(missing_ok=True)
-        if "results_path" in session:
-            Path(session["results_path"]).unlink(missing_ok=True)
-    except Exception as e:
-        logger.error(f"Error deleting files: {str(e)}")
-    
-    # Remove session
-    del processing_sessions[session_id]
-    
-    return {
-        "success": True,
-        "message": "Session deleted",
-        "session_id": session_id
-    }
-
-
-@app.get("/api/sessions")
-async def list_sessions():
-    """
-    List all active sessions
-    
-    Returns:
-        List of sessions with their status
-    """
-    sessions = []
-    
-    for session_id, session in processing_sessions.items():
-        sessions.append({
-            "session_id": session_id,
-            "filename": session["filename"],
-            "status": session["status"],
-            "upload_time": session["upload_time"]
-        })
-    
-    return {
-        "success": True,
-        "count": len(sessions),
-        "sessions": sessions
-    }
 
 def start_web_app():
-    """Start the web application."""
+    """Start the web application"""
     logger.info('🌐 Starting web application...')
     
     try:
         import uvicorn
         logger.info('✅ Uvicorn imported successfully')
         
-        # Start the server
         uvicorn.run(
             app,
             host=Config.API_HOST,
             port=Config.API_PORT,
-            workers=1, 
+            workers=1,
             log_level='info',
             access_log=True
         )
@@ -655,7 +125,6 @@ def start_web_app():
         logger.error(f'❌ Failed to start web application: {e}')
         sys.exit(1)
 
-if __name__ == "__main__":
 
-    # Start the web application
+if __name__ == "__main__":
     start_web_app()

backend/app/models/__init__.py

@@ -0,0 +1,31 @@
+"""
+Data models for API requests and responses
+"""
+
+from .requests import (
+    VideoUploadResponse,
+    AnalysisStartRequest,
+    AnalysisStartResponse
+)
+
+from .responses import (
+    HealthResponse,
+    SessionInfo,
+    SessionListResponse,
+    ResultsResponse,
+    ErrorResponse
+)
+
+__all__ = [
+    # Requests
+    'VideoUploadResponse',
+    'AnalysisStartRequest',
+    'AnalysisStartResponse',
+    
+    # Responses
+    'HealthResponse',
+    'SessionInfo',
+    'SessionListResponse',
+    'ResultsResponse',
+    'ErrorResponse'
+]

backend/app/models/requests.py

@@ -0,0 +1,31 @@
+"""
+Request models for API validation
+"""
+
+from typing import Optional
+from pydantic import BaseModel, Field
+
+
+class VideoUploadResponse(BaseModel):
+    """Response model for video upload"""
+    success: bool
+    session_id: str
+    filename: str
+    size: str
+    duration: str
+    resolution: str
+    fps: float
+    frame_count: int
+
+
+class AnalysisStartRequest(BaseModel):
+    """Request model to start analysis"""
+    session_id: str = Field(..., description="Session ID from upload")
+
+
+class AnalysisStartResponse(BaseModel):
+    """Response model for analysis start"""
+    success: bool
+    message: str
+    session_id: str
+    websocket_url: str

backend/app/models/responses.py

@@ -0,0 +1,46 @@
+"""
+Response models for API
+"""
+
+from typing import Dict, Any, Optional, List
+from pydantic import BaseModel
+
+
+class HealthResponse(BaseModel):
+    """Health check response"""
+    status: str
+    models_loaded: bool
+    models_ready: bool
+    timestamp: str
+    active_sessions: int
+
+
+class SessionInfo(BaseModel):
+    """Session information"""
+    session_id: str
+    filename: str
+    status: str
+    upload_time: str
+
+
+class SessionListResponse(BaseModel):
+    """List of sessions response"""
+    success: bool
+    count: int
+    sessions: List[SessionInfo]
+
+
+class ResultsResponse(BaseModel):
+    """Analysis results response"""
+    success: bool
+    session_id: str
+    status: str
+    results: Optional[Dict[str, Any]] = None
+    download_url: Optional[str] = None
+
+
+class ErrorResponse(BaseModel):
+    """Error response model"""
+    success: bool = False
+    error: str
+    details: Optional[str] = None

backend/app/services/__init__.py

@@ -0,0 +1,19 @@
+"""
+Business services
+"""
+
+from .session_manager import session_manager, SessionManager
+from .video_service import video_service, VideoService
+from .processing_service import processing_service, ProcessingService
+from .cleanup_service import cleanup_service, CleanupService
+
+__all__ = [
+    'session_manager',
+    'SessionManager',
+    'video_service',
+    'VideoService',
+    'processing_service',
+    'ProcessingService',
+    'cleanup_service',
+    'CleanupService'
+]

backend/app/services/cleanup_service.py

@@ -0,0 +1,218 @@
+"""
+File cleanup service for managing storage
+"""
+
+import asyncio
+import logging
+from pathlib import Path
+from datetime import datetime, timedelta
+from typing import Optional
+
+from app.config import Config
+from app.services.session_manager import session_manager
+
+logger = logging.getLogger(__name__)
+
+
+class CleanupService:
+    """Manages automatic file cleanup"""
+    
+    def __init__(
+        self,
+        max_file_age_hours: int = 24,
+        cleanup_interval_minutes: int = 60,
+        max_storage_gb: float = 10.0
+    ):
+        """
+        Args:
+            max_file_age_hours: Delete files older than this
+            cleanup_interval_minutes: Run cleanup every N minutes
+            max_storage_gb: Maximum storage allowed (GB)
+        """
+        self.max_file_age_hours = max_file_age_hours
+        self.cleanup_interval = cleanup_interval_minutes * 60  # Convert to seconds
+        self.max_storage_bytes = max_storage_gb * 1024 * 1024 * 1024
+        self.cleanup_task: Optional[asyncio.Task] = None
+        self.is_running = False
+    
+    async def start(self):
+        """Start background cleanup task"""
+        if self.is_running:
+            logger.warning("Cleanup service already running")
+            return
+        
+        self.is_running = True
+        self.cleanup_task = asyncio.create_task(self._cleanup_loop())
+        logger.info(f"✅ Cleanup service started (interval: {self.cleanup_interval/60:.0f}min)")
+    
+    async def stop(self):
+        """Stop background cleanup task"""
+        self.is_running = False
+        if self.cleanup_task:
+            self.cleanup_task.cancel()
+            try:
+                await self.cleanup_task
+            except asyncio.CancelledError:
+                pass
+        logger.info("🛑 Cleanup service stopped")
+    
+    async def _cleanup_loop(self):
+        """Background loop for periodic cleanup"""
+        while self.is_running:
+            try:
+                await self.run_cleanup()
+                await asyncio.sleep(self.cleanup_interval)
+            except asyncio.CancelledError:
+                break
+            except Exception as e:
+                logger.error(f"Cleanup error: {e}")
+                await asyncio.sleep(60)  # Wait 1 min before retry
+    
+    async def run_cleanup(self):
+        """Run cleanup operation"""
+        logger.info("🧹 Starting cleanup operation...")
+        
+        # Cleanup old files
+        deleted_by_age = await self._cleanup_old_files()
+        
+        # Cleanup by storage limit
+        deleted_by_size = await self._cleanup_by_storage_limit()
+        
+        # Cleanup orphaned sessions
+        cleaned_sessions = await self._cleanup_orphaned_sessions()
+        
+        total = deleted_by_age + deleted_by_size
+        logger.info(
+            f"✅ Cleanup complete: {total} files deleted, "
+            f"{cleaned_sessions} sessions cleaned"
+        )
+        
+        return {
+            "deleted_by_age": deleted_by_age,
+            "deleted_by_size": deleted_by_size,
+            "cleaned_sessions": cleaned_sessions,
+            "total_deleted": total
+        }
+    
+    async def _cleanup_old_files(self) -> int:
+        """Delete files older than max_file_age_hours"""
+        deleted_count = 0
+        cutoff_time = datetime.now() - timedelta(hours=self.max_file_age_hours)
+        
+        for folder in [Config.UPLOAD_FOLDER, Config.OUTPUT_FOLDER]:
+            if not folder.exists():
+                continue
+            
+            for file_path in folder.iterdir():
+                if not file_path.is_file():
+                    continue
+                
+                # Check file age
+                file_mtime = datetime.fromtimestamp(file_path.stat().st_mtime)
+                
+                if file_mtime < cutoff_time:
+                    try:
+                        file_path.unlink()
+                        deleted_count += 1
+                        logger.info(f"🗑️  Deleted old file: {file_path.name}")
+                    except Exception as e:
+                        logger.error(f"Failed to delete {file_path.name}: {e}")
+        
+        return deleted_count
+    
+    async def _cleanup_by_storage_limit(self) -> int:
+        """Delete oldest files if storage exceeds limit"""
+        deleted_count = 0
+        
+        # Calculate total storage
+        total_size = 0
+        file_list = []
+        
+        for folder in [Config.UPLOAD_FOLDER, Config.OUTPUT_FOLDER]:
+            if not folder.exists():
+                continue
+            
+            for file_path in folder.iterdir():
+                if file_path.is_file():
+                    size = file_path.stat().st_size
+                    mtime = file_path.stat().st_mtime
+                    total_size += size
+                    file_list.append((file_path, size, mtime))
+        
+        # Check if over limit
+        if total_size <= self.max_storage_bytes:
+            return 0
+        
+        # Sort by modification time (oldest first)
+        file_list.sort(key=lambda x: x[2])
+        
+        # Delete oldest files until under limit
+        for file_path, size, _ in file_list:
+            if total_size <= self.max_storage_bytes:
+                break
+            
+            try:
+                file_path.unlink()
+                total_size -= size
+                deleted_count += 1
+                logger.info(f"🗑️  Deleted for storage: {file_path.name}")
+            except Exception as e:
+                logger.error(f"Failed to delete {file_path.name}: {e}")
+        
+        return deleted_count
+    
+    async def _cleanup_orphaned_sessions(self) -> int:
+        """Remove sessions with missing files or old failed sessions"""
+        cleaned_count = 0
+        sessions_to_remove = []
+        
+        for session_id, session in session_manager.sessions.items():
+            # Remove failed sessions older than 1 hour
+            if session.get("status") == "failed":
+                upload_time = datetime.fromisoformat(session["upload_time"])
+                if datetime.now() - upload_time > timedelta(hours=1):
+                    sessions_to_remove.append(session_id)
+                    continue
+            
+            # Remove sessions with missing files
+            upload_path = session.get("upload_path")
+            if upload_path and not Path(upload_path).exists():
+                sessions_to_remove.append(session_id)
+        
+        for session_id in sessions_to_remove:
+            session_manager.delete_session(session_id)
+            cleaned_count += 1
+            logger.info(f"🗑️  Cleaned orphaned session: {session_id}")
+        
+        return cleaned_count
+    
+    def get_storage_stats(self) -> dict:
+        """Get current storage statistics"""
+        total_size = 0
+        file_count = 0
+        
+        for folder in [Config.UPLOAD_FOLDER, Config.OUTPUT_FOLDER]:
+            if not folder.exists():
+                continue
+            
+            for file_path in folder.iterdir():
+                if file_path.is_file():
+                    total_size += file_path.stat().st_size
+                    file_count += 1
+        
+        return {
+            "total_size_bytes": total_size,
+            "total_size_mb": total_size / (1024 * 1024),
+            "total_size_gb": total_size / (1024 * 1024 * 1024),
+            "file_count": file_count,
+            "max_storage_gb": self.max_storage_bytes / (1024 * 1024 * 1024),
+            "usage_percentage": (total_size / self.max_storage_bytes) * 100
+        }
+
+
+# Global cleanup service instance
+cleanup_service = CleanupService(
+    max_file_age_hours=24,
+    cleanup_interval_minutes=60,
+    max_storage_gb=10.0
+)

backend/app/services/processing_service.py

@@ -0,0 +1,82 @@
+"""
+Video processing service - Updated for Celery
+"""
+
+from app.tasks import process_video_task
+from app.services.session_manager import session_manager
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class ProcessingService:
+    """Handles video processing tasks"""
+    
+    def start_processing(self, session_id: str) -> dict:
+        """
+        Start video processing with Celery
+        
+        Args:
+            session_id: Session ID to process
+            
+        Returns:
+            Dict with task info
+        """
+        try:
+            # Submit task to Celery
+            task = process_video_task.delay(session_id)
+            
+            # Update session with task ID
+            session_manager.update_session(session_id, {
+                "status": "queued",
+                "celery_task_id": task.id
+            })
+            
+            logger.info(f"✅ Task queued: {session_id} (task_id: {task.id})")
+            
+            return {
+                "task_id": task.id,
+                "status": "queued"
+            }
+            
+        except Exception as e:
+            logger.error(f"Failed to queue task: {e}")
+            raise
+    
+    def get_task_status(self, task_id: str) -> dict:
+        """Get Celery task status"""
+        from celery.result import AsyncResult
+        
+        task = AsyncResult(task_id, app=process_video_task.app)
+        
+        if task.state == 'PENDING':
+            response = {
+                'state': task.state,
+                'progress': 0,
+                'message': 'Task pending...'
+            }
+        elif task.state == 'PROGRESS':
+            response = {
+                'state': task.state,
+                'progress': task.info.get('progress', 0),
+                'message': task.info.get('message', ''),
+                'session_id': task.info.get('session_id', '')
+            }
+        elif task.state == 'SUCCESS':
+            response = {
+                'state': task.state,
+                'progress': 1.0,
+                'result': task.info
+            }
+        else:  # FAILURE, RETRY, etc.
+            response = {
+                'state': task.state,
+                'progress': 0,
+                'error': str(task.info)
+            }
+        
+        return response
+
+
+# Global processing service instance
+processing_service = ProcessingService()

backend/app/services/session_manager.py

@@ -0,0 +1,73 @@
+"""
+Session management service
+"""
+
+from typing import Dict, Any, Optional
+from datetime import datetime
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class SessionManager:
+    """Manages processing sessions"""
+    
+    def __init__(self):
+        self.sessions: Dict[str, Dict[str, Any]] = {}
+    
+    def create_session(self, session_id: str, filename: str, upload_path: str, video_info: Dict) -> Dict[str, Any]:
+        """Create a new session"""
+        session = {
+            "session_id": session_id,
+            "filename": filename,
+            "upload_path": upload_path,
+            "upload_time": datetime.now().isoformat(),
+            "status": "uploaded",
+            "video_info": video_info,
+            "results": None,
+            "progress": 0.0,
+            "message": ""
+        }
+        
+        self.sessions[session_id] = session
+        logger.info(f"Created session: {session_id}")
+        return session
+    
+    def get_session(self, session_id: str) -> Optional[Dict[str, Any]]:
+        """Get session by ID"""
+        return self.sessions.get(session_id)
+    
+    def update_session(self, session_id: str, updates: Dict[str, Any]) -> bool:
+        """Update session data"""
+        if session_id in self.sessions:
+            self.sessions[session_id].update(updates)
+            return True
+        return False
+    
+    def delete_session(self, session_id: str) -> bool:
+        """Delete a session"""
+        if session_id in self.sessions:
+            del self.sessions[session_id]
+            logger.info(f"Deleted session: {session_id}")
+            return True
+        return False
+    
+    def list_sessions(self) -> list:
+        """List all sessions"""
+        return [
+            {
+                "session_id": sid,
+                "filename": s["filename"],
+                "status": s["status"],
+                "upload_time": s["upload_time"]
+            }
+            for sid, s in self.sessions.items()
+        ]
+    
+    def get_active_count(self) -> int:
+        """Get count of active sessions"""
+        return len(self.sessions)
+
+
+# Global session manager instance
+session_manager = SessionManager()

backend/app/services/video_service.py

@@ -0,0 +1,75 @@
+"""
+Video handling service
+"""
+
+from pathlib import Path
+from typing import Optional
+import shutil
+import logging
+
+from app.config import Config
+from app.utils.file_utils import validate_file_extension, format_file_size
+from app.core.video_processor import VideoProcessor
+
+logger = logging.getLogger(__name__)
+
+
+class VideoService:
+    """Handles video upload and validation"""
+    
+    def __init__(self):
+        self.processor: Optional[VideoProcessor] = None
+    
+    def get_processor(self) -> VideoProcessor:
+        """Get or create VideoProcessor instance"""
+        if self.processor is None:
+            logger.info("Initializing VideoProcessor...")
+            self.processor = VideoProcessor()
+            logger.info("✅ VideoProcessor initialized")
+        return self.processor
+    
+    def validate_video(self, filename: str) -> dict:
+        """Validate video file"""
+        from typing import List
+        allowed_extensions: List[str] = [".mp4", ".avi", ".mov", ".mkv", ".webm"]
+        return validate_file_extension(filename, allowed_extensions)
+    
+    def save_upload(self, file, session_id: str, filename: str) -> Path:
+        """Save uploaded file"""
+        upload_path = Config.UPLOAD_FOLDER / f"{session_id}_{filename}"
+        
+        with open(upload_path, "wb") as buffer:
+            shutil.copyfileobj(file.file, buffer)
+        
+        logger.info(f"Saved upload: {upload_path.name}")
+        return upload_path
+    
+    def load_video_info(self, upload_path: Path) -> dict:
+        """Load video metadata"""
+        processor = self.get_processor()
+        video_info = processor.load_video(upload_path)
+        
+        return {
+            "filename": upload_path.name,
+            "size": format_file_size(video_info["size_bytes"]),
+            "duration": f"{video_info['duration']:.1f}s",
+            "resolution": f"{video_info['width']}x{video_info['height']}",
+            "fps": video_info["fps"],
+            "frame_count": video_info["frame_count"]
+        }
+    
+    def cleanup_session_files(self, session: dict):
+        """Delete session files"""
+        try:
+            if "upload_path" in session:
+                Path(session["upload_path"]).unlink(missing_ok=True)
+            if "output_path" in session:
+                Path(session["output_path"]).unlink(missing_ok=True)
+            if "results_path" in session:
+                Path(session["results_path"]).unlink(missing_ok=True)
+        except Exception as e:
+            logger.error(f"Error deleting files: {e}")
+
+
+# Global video service instance
+video_service = VideoService()

backend/app/tasks.py

@@ -0,0 +1,117 @@
+"""
+Celery background tasks
+"""
+
+from pathlib import Path
+from datetime import datetime
+import json
+import logging
+
+from app.celery_app import celery_app
+from app.config import Config
+from app.core.video_processor import VideoProcessor
+from app.services.session_manager import session_manager
+
+logger = logging.getLogger(__name__)
+
+
+def convert_to_native_bool(obj):
+    """Convert numpy types to native Python types"""
+    import numpy as np
+    if isinstance(obj, np.bool_):
+        return bool(obj)
+    elif isinstance(obj, (np.integer, np.floating)):
+        return obj.item()
+    elif isinstance(obj, dict):
+        return {k: convert_to_native_bool(v) for k, v in obj.items()}
+    elif isinstance(obj, (list, tuple)):
+        return [convert_to_native_bool(v) for v in obj]
+    else:
+        return obj
+
+
+@celery_app.task(bind=True, name='process_video_task')
+def process_video_task(self, session_id: str):
+    """
+    Celery task for video processing
+    
+    Args:
+        self: Celery task instance
+        session_id: Session ID to process
+    """
+    try:
+        logger.info(f"🎬 Starting processing for session: {session_id}")
+        
+        # Get session (need to recreate session_manager in worker)
+        # In production, you'd fetch from Redis/DB
+        session = session_manager.get_session(session_id)
+        if not session:
+            raise ValueError(f"Session not found: {session_id}")
+        
+        input_path = Path(session["upload_path"])
+        output_path = Config.OUTPUT_FOLDER / f"analyzed_{session_id}.mp4"
+        results_path = Config.OUTPUT_FOLDER / f"results_{session_id}.json"
+        
+        # Update session status
+        session_manager.update_session(session_id, {
+            "status": "processing",
+            "celery_task_id": self.request.id
+        })
+        
+        # Create processor
+        processor = VideoProcessor()
+        
+        # Progress callback (updates Celery task state)
+        def progress_callback(progress: float, message: str):
+            self.update_state(
+                state='PROGRESS',
+                meta={
+                    'progress': progress,
+                    'message': message,
+                    'session_id': session_id
+                }
+            )
+            logger.info(f"Progress {session_id}: {progress*100:.1f}% - {message}")
+        
+        # Process video
+        logger.info(f"Processing video: {input_path}")
+        raw_results = processor.process_video(
+            video_path=input_path,
+            output_path=output_path,
+            progress_callback=progress_callback
+        )
+        
+        # Convert results
+        results = convert_to_native_bool(raw_results)
+        
+        # Save JSON
+        with open(results_path, 'w') as f:
+            json.dump(results, f, indent=2, default=str)
+        
+        # Update session
+        session_manager.update_session(session_id, {
+            "status": "completed",
+            "output_path": str(output_path),
+            "results_path": str(results_path),
+            "end_time": datetime.now().isoformat(),
+            "results": results
+        })
+        
+        logger.info(f"✅ Processing completed: {session_id}")
+        
+        return {
+            "status": "completed",
+            "session_id": session_id,
+            "results": results,
+            "output_path": str(output_path)
+        }
+        
+    except Exception as e:
+        logger.error(f"❌ Processing failed for {session_id}: {str(e)}")
+        
+        session_manager.update_session(session_id, {
+            "status": "failed",
+            "error": str(e)
+        })
+        
+        raise  # Re-raise for Celery to mark as failed

backend/app/utils/__init__.py

@@ -0,0 +1,40 @@
+"""
+Utility functions
+"""
+
+from .file_utils import (
+    generate_session_id,
+    validate_file_extension,
+    validate_file_size,
+    format_file_size,
+    cleanup_old_files
+)
+
+from .validation import (
+    safe_divide,
+    calculate_percentage
+)
+
+from .helpers import (
+    timing_decorator,
+    create_success_response,
+    create_error_response
+)
+
+__all__ = [
+    # File utilities
+    'generate_session_id',
+    'validate_file_extension',
+    'validate_file_size',
+    'format_file_size',
+    'cleanup_old_files',
+    
+    # Validation
+    'safe_divide',
+    'calculate_percentage',
+    
+    # Helpers
+    'timing_decorator',
+    'create_success_response',
+    'create_error_response'
+]

backend/app/{utils.py → utils/file_utils.py}

@@ -1,31 +1,18 @@
 """
-Utility functions for Dance Movement Analyzer
-Provides helper functions for validation, logging, and common operations
+File handling utilities
 """
 
 import os
 import uuid
-import time
-import logging
 from pathlib import Path
-from typing import Optional, Dict, Any
-from functools import wraps
-from typing import List
-
-# Configure logging
-logging.basicConfig(
-    level=logging.INFO,
-    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
-)
-logger = logging.getLogger(__name__)
-
+from typing import Dict, List
 
 def generate_session_id() -> str:
     """Generate unique session ID for tracking"""
     return str(uuid.uuid4())
 
 
-def validate_file_extension(filename: str, allowed_extensions: List[str] = [".mp4", ".avi", ".mov", ".mkv", ".webm"]) -> bool:
+def validate_file_extension(filename: str, allowed_extensions: List[str] = [".mp4", ".avi", ".mov", ".mkv", ".webm"]) -> Dict:
     """
     Validate if file has allowed extension
     
@@ -34,9 +21,8 @@ def validate_file_extension(filename: str, allowed_extensions: List[str] = [".mp
         allowed_extensions: List of allowed extensions (e.g., ['.mp4', '.avi'])
     
     Returns:
-        True if valid, False otherwise
+        Dict with valid status and error message
     """
-    
     ext = Path(filename).suffix.lower()
     if ext in allowed_extensions:
         return {"valid": True, "error": ""}
@@ -77,84 +63,19 @@ def format_file_size(size_bytes: int) -> str:
     return f"{size_bytes:.1f} TB"
 
 
-def timing_decorator(func):
-    """
-    Decorator to measure function execution time
-    Useful for performance monitoring
-    """
-    @wraps(func)
-    def wrapper(*args, **kwargs):
-        start_time = time.time()
-        result = func(*args, **kwargs)
-        end_time = time.time()
-        execution_time = end_time - start_time
-        logger.info(f"{func.__name__} executed in {execution_time:.2f} seconds")
-        return result
-    return wrapper
-
-
-def safe_divide(numerator: float, denominator: float, default: float = 0.0) -> float:
-    """
-    Safely divide two numbers, returning default if denominator is zero
-    
-    Args:
-        numerator: Number to divide
-        denominator: Number to divide by
-        default: Default value if division by zero
-    
-    Returns:
-        Result of division or default value
-    """
-    return numerator / denominator if denominator != 0 else default
-
-
-def create_success_response(data: Any, message: str = "Success") -> Dict[str, Any]:
-    """
-    Create standardized success response
-    
-    Args:
-        data: Response data
-        message: Success message
-    
-    Returns:
-        Formatted response dictionary
-    """
-    return {
-        "status": "success",
-        "message": message,
-        "data": data
-    }
-
-
-def create_error_response(error: str, details: Optional[str] = None) -> Dict[str, Any]:
-    """
-    Create standardized error response
-    
-    Args:
-        error: Error message
-        details: Additional error details
-    
-    Returns:
-        Formatted error dictionary
-    """
-    response = {
-        "status": "error",
-        "error": error
-    }
-    if details:
-        response["details"] = details
-    return response
-
-
 def cleanup_old_files(directory: Path, max_age_hours: int = 24):
     """
     Clean up files older than specified hours
-    Useful for managing temporary upload/output files
     
     Args:
         directory: Directory to clean
         max_age_hours: Maximum file age in hours
     """
+    import time
+    import logging
+    
+    logger = logging.getLogger(__name__)
+    
     if not directory.exists():
         return
     
@@ -169,18 +90,4 @@ def cleanup_old_files(directory: Path, max_age_hours: int = 24):
                     file_path.unlink()
                     logger.info(f"Deleted old file: {file_path.name}")
                 except Exception as e:
-                    logger.error(f"Error deleting {file_path.name}: {e}")
-
-
-def calculate_percentage(part: float, whole: float) -> float:
-    """
-    Calculate percentage with safe division
-    
-    Args:
-        part: Part value
-        whole: Whole value
-    
-    Returns:
-        Percentage (0-100)
-    """
-    return safe_divide(part * 100, whole, 0.0)
+                    logger.error(f"Error deleting {file_path.name}: {e}")

backend/app/utils/helpers.py

@@ -0,0 +1,49 @@
+"""
+General helper functions
+"""
+
+import time
+import logging
+from functools import wraps
+from typing import Any, Dict, Optional
+
+logger = logging.getLogger(__name__)
+
+
+def timing_decorator(func):
+    """
+    Decorator to measure function execution time
+    """
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        start_time = time.time()
+        result = func(*args, **kwargs)
+        end_time = time.time()
+        execution_time = end_time - start_time
+        logger.info(f"{func.__name__} executed in {execution_time:.2f} seconds")
+        return result
+    return wrapper
+
+
+def create_success_response(data: Any, message: str = "Success") -> Dict[str, Any]:
+    """
+    Create standardized success response
+    """
+    return {
+        "status": "success",
+        "message": message,
+        "data": data
+    }
+
+
+def create_error_response(error: str, details: Optional[str] = None) -> Dict[str, Any]:
+    """
+    Create standardized error response
+    """
+    response = {
+        "status": "error",
+        "error": error
+    }
+    if details:
+        response["details"] = details
+    return response

backend/app/utils/throttle.py

@@ -0,0 +1,52 @@
+"""
+Progress throttling utility
+"""
+
+import time
+from typing import Callable, Optional
+
+
+class ProgressThrottler:
+    """Throttles progress updates to reduce message frequency"""
+    
+    def __init__(
+        self,
+        callback: Callable,
+        min_interval: float = 0.5,  # Minimum 0.5s between updates
+        key_milestones: list = [0.0, 0.3, 0.5, 0.7, 0.9, 1.0]
+    ):
+        """
+        Args:
+            callback: Function to call with (progress, message)
+            min_interval: Minimum seconds between updates
+            key_milestones: Always send these progress values
+        """
+        self.callback = callback
+        self.min_interval = min_interval
+        self.key_milestones = set(key_milestones)
+        self.last_update_time = 0
+        self.last_progress = -1
+    
+    async def update(self, progress: float, message: str):
+        """
+        Send progress update only if:
+        1. It's a key milestone (0%, 30%, 50%, 70%, 90%, 100%), OR
+        2. Enough time has passed since last update
+        """
+        current_time = time.time()
+        
+        # Round progress to 2 decimals for milestone comparison
+        progress_rounded = round(progress, 2)
+        
+        # Always send key milestones
+        if progress_rounded in self.key_milestones:
+            await self.callback(progress, message)
+            self.last_update_time = current_time
+            self.last_progress = progress
+            return
+        
+        # Send if enough time passed
+        if current_time - self.last_update_time >= self.min_interval:
+            await self.callback(progress, message)
+            self.last_update_time = current_time
+            self.last_progress = progress

backend/app/utils/validation.py

@@ -0,0 +1,34 @@
+"""
+Data validation utilities
+"""
+
+from typing import Optional
+
+
+def safe_divide(numerator: float, denominator: float, default: float = 0.0) -> float:
+    """
+    Safely divide two numbers, returning default if denominator is zero
+    
+    Args:
+        numerator: Number to divide
+        denominator: Number to divide by
+        default: Default value if division by zero
+    
+    Returns:
+        Result of division or default value
+    """
+    return numerator / denominator if denominator != 0 else default
+
+
+def calculate_percentage(part: float, whole: float) -> float:
+    """
+    Calculate percentage with safe division
+    
+    Args:
+        part: Part value
+        whole: Whole value
+    
+    Returns:
+        Percentage (0-100)
+    """
+    return safe_divide(part * 100, whole, 0.0)

backend/requirements.txt

@@ -28,4 +28,10 @@ websockets==12.0
 python-jose==3.3.0
 
 # Templating Support
-jinja2==3.1.2  # Add this line
+jinja2==3.1.2
+
+# Celery and Redis
+celery==5.5.3
+redis==7.0.
+
+flower==2.0.1  # Optional: Celery monitoring UI

docker_compose.yml

@@ -1,6 +1,19 @@
 version: '3.8'
 
 services:
+  # Redis for Celery broker
+  redis:
+    image: redis:7-alpine
+    container_name: dance-analyzer-redis
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_data:/data
+    restart: unless-stopped
+    networks:
+      - dance-analyzer-network
+
+  # Main web application
   dance-analyzer:
     build:
       context: .
@@ -9,35 +22,59 @@ services:
     ports:
       - "7860:7860"
     volumes:
-      # Mount for persistent storage
       - ./uploads:/app/uploads
       - ./outputs:/app/outputs
       - ./logs:/app/logs
     environment:
-      # API Configuration
       - API_HOST=0.0.0.0
       - API_PORT=7860
       - DEBUG=false
-      
-      # File Limits
+      - REDIS_URL=redis://redis:6379/0
       - MAX_FILE_SIZE=104857600
       - MAX_VIDEO_DURATION=60
-      
-      # MediaPipe Settings
       - MEDIAPIPE_MODEL_COMPLEXITY=1
-      - MEDIAPIPE_MIN_DETECTION_CONFIDENCE=0.5
-      - MEDIAPIPE_MIN_TRACKING_CONFIDENCE=0.5
-      - MEDIAPIPE_SMOOTH_LANDMARKS=true
-      
-      # Processing Settings
       - MAX_WORKERS=2
+    depends_on:
+      - redis
+    restart: unless-stopped
+    networks:
+      - dance-analyzer-network
+
+  # Celery worker
+  celery-worker:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: dance-analyzer-worker
+    command: celery -A app.celery_app worker --loglevel=info --concurrency=2
+    volumes:
+      - ./uploads:/app/uploads
+      - ./outputs:/app/outputs
+      - ./logs:/app/logs
+    environment:
+      - REDIS_URL=redis://redis:6379/0
+      - MEDIAPIPE_MODEL_COMPLEXITY=1
+    depends_on:
+      - redis
+    restart: unless-stopped
+    networks:
+      - dance-analyzer-network
+
+  # Flower (Celery monitoring UI) - Optional
+  flower:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: dance-analyzer-flower
+    command: celery -A app.celery_app flower --port=5555
+    ports:
+      - "5555:5555"
+    environment:
+      - REDIS_URL=redis://redis:6379/0
+    depends_on:
+      - redis
+      - celery-worker
     restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "python", "-c", "import requests; requests.get('http://localhost:7860/health')"]
-      interval: 30s
-      timeout: 10s
-      retries: 3
-      start_period: 40s
     networks:
       - dance-analyzer-network
 
@@ -46,6 +83,7 @@ networks:
     driver: bridge
 
 volumes:
+  redis_data:
   uploads:
   outputs:
-  logs:
+  logs:

frontend/index.html

@@ -79,6 +79,10 @@
                             <span class="stat-label">Elapsed:</span>
                             <span class="stat-value" id="elapsedTime">0s</span>
                         </div>
+                        <div class="stat-item">
+                            <span class="stat-label">⏱️ ETA:</span>
+                            <span class="stat-value" id="etaTime">--</span>
+                        </div>
                     </div>
                 </div>
             </section>
@@ -235,9 +239,6 @@
     <div class="toast" id="toast"></div>
 
     <!-- Scripts -->
-    <script src="/static/js/visualization.js"></script>
-    <script src="/static/js/video-handler.js"></script>
-    <script src="/static/js/websocket-client.js"></script>
-    <script src="/static/js/app.js"></script>
+    <script type="module" src="/static/js/main.js"></script>
 </body>
 </html>

frontend/js/app.js

@@ -1,617 +0,0 @@
-/**
- * Main Application Logic
- * Handles UI state, file uploads, and result display
- */
-
-const API_BASE_URL = window.location.origin;
-
-// Application State
-const AppState = {
-    sessionId: null,
-    uploadedFile: null,
-    videoInfo: null,
-    results: null,
-    ws: null,
-    startTime: null
-};
-
-// DOM Elements
-const elements = {
-    uploadZone: document.getElementById('uploadZone'),
-    fileInput: document.getElementById('fileInput'),
-    fileInfo: document.getElementById('fileInfo'),
-    fileName: document.getElementById('fileName'),
-    fileMeta: document.getElementById('fileMeta'),
-    analyzeBtn: document.getElementById('analyzeBtn'),
-    
-    uploadSection: document.getElementById('uploadSection'),
-    processingSection: document.getElementById('processingSection'),
-    resultsSection: document.getElementById('resultsSection'),
-    
-    progressFill: document.getElementById('progressFill'),
-    progressText: document.getElementById('progressText'),
-    processingMessage: document.getElementById('processingMessage'),
-    statusValue: document.getElementById('statusValue'),
-    elapsedTime: document.getElementById('elapsedTime'),
-    
-    originalVideo: document.getElementById('originalVideo'),
-    analyzedVideo: document.getElementById('analyzedVideo'),
-    videoFallback: document.getElementById('videoFallback'),
-    downloadBtn: document.getElementById('downloadBtn'),
-    
-    movementType: document.getElementById('movementType'),
-    intensityValue: document.getElementById('intensityValue'),
-    intensityFill: document.getElementById('intensityFill'),
-    detectionRate: document.getElementById('detectionRate'),
-    framesDetected: document.getElementById('framesDetected'),
-    totalFrames: document.getElementById('totalFrames'),
-    confidenceScore: document.getElementById('confidenceScore'),
-    smoothnessScore: document.getElementById('smoothnessScore'),
-    
-    bodyParts: document.getElementById('bodyParts'),
-    rhythmCard: document.getElementById('rhythmCard'),
-    bpmValue: document.getElementById('bpmValue'),
-    consistencyValue: document.getElementById('consistencyValue'),
-    
-    newAnalysisBtn: document.getElementById('newAnalysisBtn'),
-    shareBtn: document.getElementById('shareBtn'),
-    toast: document.getElementById('toast')
-};
-
-// Initialize Application
-function initApp() {
-    setupEventListeners();
-    checkBrowserCompatibility();
-    showToast('Ready to analyze dance videos!', 'info');
-}
-
-// Setup Event Listeners
-function setupEventListeners() {
-    // Upload zone events
-    elements.uploadZone.addEventListener('click', () => elements.fileInput.click());
-    elements.uploadZone.addEventListener('dragover', handleDragOver);
-    elements.uploadZone.addEventListener('dragleave', handleDragLeave);
-    elements.uploadZone.addEventListener('drop', handleDrop);
-    
-    // File input change
-    elements.fileInput.addEventListener('change', handleFileSelect);
-    
-    // Analyze button
-    elements.analyzeBtn.addEventListener('click', startAnalysis);
-    
-    // Download button
-    // elements.downloadBtn.addEventListener('click', downloadVideo);
-    
-    // New analysis button
-    elements.newAnalysisBtn.addEventListener('click', resetApp);
-    
-    // Share button
-    elements.shareBtn.addEventListener('click', shareResults);
-}
-
-// File Upload Handlers
-function handleDragOver(e) {
-    e.preventDefault();
-    elements.uploadZone.classList.add('drag-over');
-}
-
-function handleDragLeave(e) {
-    e.preventDefault();
-    elements.uploadZone.classList.remove('drag-over');
-}
-
-function handleDrop(e) {
-    e.preventDefault();
-    elements.uploadZone.classList.remove('drag-over');
-    
-    const files = e.dataTransfer.files;
-    if (files.length > 0) {
-        handleFile(files[0]);
-    }
-}
-
-function handleFileSelect(e) {
-    const files = e.target.files;
-    if (files.length > 0) {
-        handleFile(files[0]);
-    }
-}
-
-// Validate and Handle File
-async function handleFile(file) {
-    // Validate file type
-    const validTypes = ['video/mp4', 'video/webm', 'video/avi'];
-    if (!validTypes.includes(file.type)) {
-        showToast('Please upload a valid video file (MP4, WebM, AVI)', 'error');
-        return;
-    }
-    
-    // Validate file size (100MB)
-    const maxSize = 100 * 1024 * 1024;
-    if (file.size > maxSize) {
-        showToast('File size exceeds 100MB limit', 'error');
-        return;
-    }
-    
-    AppState.uploadedFile = file;
-    
-    // Display file info
-    elements.fileName.textContent = file.name;
-    elements.fileMeta.textContent = `${formatFileSize(file.size)} • ${file.type}`;
-    elements.fileInfo.style.display = 'flex';
-    
-    // Upload file to server
-    await uploadFile(file);
-}
-
-// Upload File to Server
-async function uploadFile(file) {
-    try {
-        elements.analyzeBtn.disabled = true;
-        elements.analyzeBtn.textContent = '⏳ Uploading...';
-        
-        const formData = new FormData();
-        formData.append('file', file);
-        
-        const response = await fetch(`${API_BASE_URL}/api/upload`, {
-            method: 'POST',
-            body: formData
-        });
-        
-        if (!response.ok) {
-            throw new Error('Upload failed');
-        }
-        
-        const data = await response.json();
-        
-        AppState.sessionId = data.session_id;
-        AppState.videoInfo = data;
-        
-        // Create object URL for original video preview
-        const videoURL = URL.createObjectURL(file);
-        elements.originalVideo.src = videoURL;
-        
-        elements.analyzeBtn.disabled = false;
-        elements.analyzeBtn.textContent = '✨ Start Analysis';
-        
-        showToast('Video uploaded successfully!', 'success');
-        
-    } catch (error) {
-        console.error('Upload error:', error);
-        showToast('Failed to upload video. Please try again.', 'error');
-        elements.analyzeBtn.disabled = false;
-        elements.analyzeBtn.textContent = '✨ Start Analysis';
-    }
-}
-
-// Start Analysis
-async function startAnalysis() {
-    if (!AppState.sessionId) {
-        showToast('Please upload a video first', 'error');
-        return;
-    }
-    
-    try {
-        // Show processing section
-        elements.uploadSection.style.display = 'none';
-        elements.processingSection.style.display = 'block';
-        
-        // Initialize WebSocket
-        initWebSocket(AppState.sessionId);
-        
-        // Start analysis
-        const response = await fetch(`${API_BASE_URL}/api/analyze/${AppState.sessionId}`, {
-            method: 'POST'
-        });
-        
-        if (!response.ok) {
-            throw new Error('Analysis failed to start');
-        }
-        
-        const data = await response.json();
-        
-        AppState.startTime = Date.now();
-        startElapsedTimer();
-        
-        showToast('Analysis started!', 'info');
-        
-    } catch (error) {
-        console.error('Analysis error:', error);
-        showToast('Failed to start analysis. Please try again.', 'error');
-        elements.uploadSection.style.display = 'block';
-        elements.processingSection.style.display = 'none';
-    }
-}
-
-// Initialize WebSocket
-function initWebSocket(sessionId) {
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${wsProtocol}//${window.location.host}/ws/${sessionId}`;
-    
-    AppState.ws = new WebSocket(wsUrl);
-    
-    AppState.ws.onopen = () => {
-        console.log('WebSocket connected');
-    };
-    
-    AppState.ws.onmessage = (event) => {
-        const message = JSON.parse(event.data);
-        handleWebSocketMessage(message);
-    };
-    
-    AppState.ws.onerror = (error) => {
-        console.error('WebSocket error:', error);
-    };
-    
-    AppState.ws.onclose = () => {
-        console.log('WebSocket closed');
-    };
-    
-    // Send heartbeat every 20 seconds
-    setInterval(() => {
-        if (AppState.ws && AppState.ws.readyState === WebSocket.OPEN) {
-            AppState.ws.send('ping');
-        }
-    }, 20000);
-}
-
-// Handle WebSocket Messages
-function handleWebSocketMessage(message) {
-    switch (message.type) {
-        case 'connected':
-            console.log('WebSocket ready');
-            break;
-            
-        case 'progress':
-            updateProgress(message.progress, message.message);
-            break;
-            
-        case 'status':
-            elements.statusValue.textContent = message.status;
-            elements.processingMessage.textContent = message.message;
-            break;
-            
-        case 'complete':
-            handleAnalysisComplete(message);
-            break;
-            
-        case 'error':
-            handleAnalysisError(message);
-            break;
-            
-        case 'pong':
-            // Heartbeat response
-            break;
-    }
-}
-
-// Update Progress
-function updateProgress(progress, message) {
-    const percentage = Math.round(progress * 100);
-    elements.progressFill.style.width = `${percentage}%`;
-    elements.progressText.textContent = `${percentage}%`;
-    elements.processingMessage.textContent = message;
-}
-
-// Start Elapsed Timer
-function startElapsedTimer() {
-    const timer = setInterval(() => {
-        if (AppState.startTime) {
-            const elapsed = Math.floor((Date.now() - AppState.startTime) / 1000);
-            elements.elapsedTime.textContent = `${elapsed}s`;
-        } else {
-            clearInterval(timer);
-        }
-    }, 1000);
-}
-
-// Handle Analysis Complete
-async function handleAnalysisComplete(message) {
-    AppState.startTime = null;
-    
-    // Fetch complete results from API
-    try {
-        const response = await fetch(`${API_BASE_URL}/api/results/${AppState.sessionId}`);
-        
-        if (!response.ok) {
-            throw new Error('Failed to fetch results');
-        }
-        
-        const data = await response.json();
-        AppState.results = data.results || message.results;
-        
-    } catch (error) {
-        console.error('Error fetching results:', error);
-        AppState.results = message.results;
-    }
-    
-    // Hide processing, show results
-    elements.processingSection.style.display = 'none';
-    elements.resultsSection.style.display = 'block';
-    
-    // Load analyzed video with proper error handling
-    const videoUrl = `${API_BASE_URL}/api/download/${AppState.sessionId}`;
-    
-    // Set up error handler BEFORE setting src
-    elements.analyzedVideo.onerror = (e) => {
-        console.error("Analyzed video failed to load:", e);
-        console.log("Video URL:", videoUrl);
-        elements.videoFallback.style.display = 'block';
-        elements.analyzedVideo.style.display = 'none';
-        document.getElementById('downloadFallback').href = videoUrl;
-        document.getElementById('downloadFallback').download = `analyzed_${AppState.uploadedFile?.name || 'video.mp4'}`;
-    };
-    
-    // Set up success handler
-    elements.analyzedVideo.onloadedmetadata = () => {
-        console.log("✅ Analyzed video loaded successfully");
-        console.log("Video duration:", elements.analyzedVideo.duration);
-        console.log("Video dimensions:", elements.analyzedVideo.videoWidth, 'x', elements.analyzedVideo.videoHeight);
-        elements.videoFallback.style.display = 'none';
-        elements.analyzedVideo.style.display = 'block';
-    };
-    
-    // Set video source
-    console.log("Loading analyzed video from:", videoUrl);
-    elements.analyzedVideo.src = videoUrl;
-    elements.analyzedVideo.load(); // Force reload
-    
-    // Display results
-    displayResults(AppState.results);
-    
-    // Setup video sync
-    setupVideoSync();
-    
-    // Close WebSocket
-    if (AppState.ws) {
-        AppState.ws.close();
-        AppState.ws = null;
-    }
-    
-    // Scroll to results
-    elements.resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    
-    showToast('Analysis complete! 🎉', 'success');
-}
-
-// Handle Analysis Error
-function handleAnalysisError(message) {
-    showToast(message.message, 'error');
-    elements.uploadSection.style.display = 'block';
-    elements.processingSection.style.display = 'none';
-    AppState.startTime = null;
-}
-
-// Display Results
-function displayResults(results) {
-    console.log('Displaying results:', results);
-    
-    // Ensure results object exists
-    if (!results) {
-        console.error('No results to display');
-        showToast('Error: No results available', 'error');
-        return;
-    }
-    
-    // Movement Classification
-    const movement = results.movement_analysis;
-    if (movement) {
-        elements.movementType.textContent = movement.movement_type || 'Unknown';
-        const intensity = Math.round(movement.intensity || 0);
-        elements.intensityValue.textContent = intensity;
-        elements.intensityFill.style.width = `${intensity}%`;
-    } else {
-        elements.movementType.textContent = 'N/A';
-        elements.intensityValue.textContent = '0';
-        elements.intensityFill.style.width = '0%';
-    }
-    
-    // Detection Stats
-    const processing = results.processing;
-    if (processing) {
-        const detectionRate = ((processing.detection_rate || 0) * 100).toFixed(1);
-        elements.detectionRate.textContent = `${detectionRate}%`;
-        elements.framesDetected.textContent = processing.frames_with_pose || 0;
-        elements.totalFrames.textContent = processing.total_frames || 0;
-    } else {
-        elements.detectionRate.textContent = 'N/A';
-        elements.framesDetected.textContent = '0';
-        elements.totalFrames.textContent = '0';
-    }
-    
-    // Confidence
-    const poseAnalysis = results.pose_analysis;
-    if (poseAnalysis) {
-        const confidence = (poseAnalysis.average_confidence || 0).toFixed(2);
-        elements.confidenceScore.textContent = confidence;
-    } else {
-        elements.confidenceScore.textContent = 'N/A';
-    }
-    
-    // Smoothness
-    const smoothness = Math.round(results.smoothness_score || 0);
-    elements.smoothnessScore.textContent = smoothness;
-    
-    // Body Parts
-    if (movement && movement.body_part_activity) {
-        displayBodyParts(movement.body_part_activity);
-    } else {
-        elements.bodyParts.innerHTML = '<p style="text-align: center; color: var(--text-muted);">No body part data available</p>';
-    }
-    
-    // Rhythm
-    const rhythm = results.rhythm_analysis;
-    if (rhythm && rhythm.has_rhythm) {
-        elements.rhythmCard.style.display = 'block';
-        elements.bpmValue.textContent = Math.round(rhythm.estimated_bpm || 0);
-        elements.consistencyValue.textContent = `${Math.round((rhythm.rhythm_consistency || 0) * 100)}%`;
-    } else {
-        elements.rhythmCard.style.display = 'none';
-    }
-    
-    console.log('Results displayed successfully');
-}
-
-// Setup Video Synchronization
-function setupVideoSync() {
-    if (!elements.originalVideo || !elements.analyzedVideo) {
-        return;
-    }
-    
-    // Initialize video handler
-    if (window.videoHandler) {
-        videoHandler.init('originalVideo', 'analyzedVideo');
-    }
-    
-    // Ensure both videos are ready
-    elements.analyzedVideo.addEventListener('loadeddata', () => {
-        console.log('Analyzed video loaded and ready');
-        // Auto-play both videos when analyzed video is loaded
-        if (elements.originalVideo.readyState >= 3) {
-            // Both videos ready, can play
-            console.log('Both videos ready for playback');
-        }
-    });
-
-    elements.analyzedVideo.onerror = () => {
-        console.warn("Analyzed video failed to load — showing fallback");
-        elements.videoFallback.style.display = 'block';
-        document.getElementById('downloadFallback').href = `${API_BASE_URL}/api/download/${AppState.sessionId}`;
-    };
-    
-    elements.originalVideo.addEventListener('loadeddata', () => {
-        console.log('Original video loaded and ready');
-    });
-}
-
-// Display Body Parts Activity
-function displayBodyParts(bodyParts) {
-    elements.bodyParts.innerHTML = '';
-    
-    for (const [part, activity] of Object.entries(bodyParts)) {
-        const item = document.createElement('div');
-        item.className = 'body-part-item';
-        
-        const name = document.createElement('div');
-        name.className = 'body-part-name';
-        name.textContent = part.replace('_', ' ');
-        
-        const bar = document.createElement('div');
-        bar.className = 'body-part-bar';
-        
-        const fill = document.createElement('div');
-        fill.className = 'body-part-fill';
-        fill.style.width = `${activity}%`;
-        fill.textContent = `${Math.round(activity)}`;
-        
-        bar.appendChild(fill);
-        item.appendChild(name);
-        item.appendChild(bar);
-        elements.bodyParts.appendChild(item);
-    }
-}
-
-/*
-// Download Video
-function downloadVideo() {
-    if (!AppState.sessionId) {
-        showToast('No video available to download', 'error');
-        return;
-    }
-    
-    const url = `${API_BASE_URL}/api/download/${AppState.sessionId}`;
-    const filename = `analyzed_${AppState.uploadedFile?.name || 'video.mp4'}`;
-    
-    // Create temporary anchor element for download
-    const a = document.createElement('a');
-    a.style.display = 'none';
-    a.href = url;
-    a.download = filename;
-    
-    document.body.appendChild(a);
-    a.click();
-    
-    // Cleanup
-    setTimeout(() => {
-        document.body.removeChild(a);
-    }, 100);
-    
-    showToast('Download started! 💾', 'success');
-}
-*/
-
-// Share Results
-function shareResults() {
-    const text = `Check out my dance movement analysis! Movement: ${elements.movementType.textContent}, Intensity: ${elements.intensityValue.textContent}/100`;
-    
-    if (navigator.share) {
-        navigator.share({
-            title: 'Dance Movement Analysis',
-            text: text
-        }).catch(console.error);
-    } else {
-        // Fallback: copy to clipboard
-        navigator.clipboard.writeText(text).then(() => {
-            showToast('Results copied to clipboard!', 'success');
-        }).catch(() => {
-            showToast('Could not share results', 'error');
-        });
-    }
-}
-
-// Reset App
-function resetApp() {
-    // Reset state
-    AppState.sessionId = null;
-    AppState.uploadedFile = null;
-    AppState.videoInfo = null;
-    AppState.results = null;
-    AppState.startTime = null;
-    
-    // Reset UI
-    elements.fileInfo.style.display = 'none';
-    elements.uploadSection.style.display = 'block';
-    elements.processingSection.style.display = 'none';
-    elements.resultsSection.style.display = 'none';
-    
-    elements.fileInput.value = '';
-    elements.progressFill.style.width = '0%';
-    elements.progressText.textContent = '0%';
-    
-    // Clear videos
-    elements.originalVideo.src = '';
-    elements.analyzedVideo.src = '';
-    
-    showToast('Ready for new analysis!', 'info');
-}
-
-// Utility Functions
-function formatFileSize(bytes) {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
-}
-
-function showToast(message, type = 'info') {
-    elements.toast.textContent = message;
-    elements.toast.className = `toast ${type} show`;
-    
-    setTimeout(() => {
-        elements.toast.classList.remove('show');
-    }, 3000);
-}
-
-function checkBrowserCompatibility() {
-    if (!window.WebSocket) {
-        showToast('Your browser does not support WebSocket. Real-time updates may not work.', 'error');
-    }
-    
-    if (!window.FileReader) {
-        showToast('Your browser does not support file reading.', 'error');
-    }
-}
-
-// Initialize on DOM load
-document.addEventListener('DOMContentLoaded', initApp);

frontend/js/core/config.js

@@ -0,0 +1,25 @@
+/**
+ * Frontend Configuration
+ */
+
+export const APP_CONFIG = {
+    API_BASE_URL: window.location.origin,
+    WS_PROTOCOL: window.location.protocol === 'https:' ? 'wss:' : 'ws:',
+    
+    // Polling configuration (for Celery)
+    POLLING_INTERVAL: 2000, // 2 seconds
+    MAX_POLL_ATTEMPTS: 300,  // 10 minutes max
+    
+    // File validation
+    MAX_FILE_SIZE: 100 * 1024 * 1024, // 100MB
+    ALLOWED_EXTENSIONS: ['.mp4', '.webm', '.avi', '.mov'],
+    ALLOWED_MIME_TYPES: ['video/mp4', 'video/webm', 'video/x-msvideo', 'video/quicktime'],
+    
+    // UI
+    TOAST_DURATION: 3000,
+    PROGRESS_UPDATE_THROTTLE: 500,
+    
+    // Features
+    USE_WEBSOCKET: false,  // Set to true to use WebSocket instead of polling
+    SHOW_ETA: true
+};

frontend/js/core/state.js

@@ -0,0 +1,55 @@
+/**
+ * Application State Management
+ */
+
+export class AppState {
+    constructor() {
+        this.sessionId = null;
+        this.uploadedFile = null;
+        this.videoInfo = null;
+        this.results = null;
+        this.taskId = null;
+        this.pollingInterval = null;
+        this.startTime = null;
+        this.eta = null;
+    }
+    
+    reset() {
+        this.sessionId = null;
+        this.uploadedFile = null;
+        this.videoInfo = null;
+        this.results = null;
+        this.taskId = null;
+        this.startTime = null;
+        this.eta = null;
+        
+        if (this.pollingInterval) {
+            clearInterval(this.pollingInterval);
+            this.pollingInterval = null;
+        }
+    }
+    
+    setSession(sessionId, fileInfo) {
+        this.sessionId = sessionId;
+        this.videoInfo = fileInfo;
+    }
+    
+    setTask(taskId) {
+        this.taskId = taskId;
+        this.startTime = Date.now();
+    }
+    
+    updateETA(progress) {
+        if (!this.startTime || progress <= 0) return null;
+        
+        const elapsed = Date.now() - this.startTime;
+        const estimatedTotal = elapsed / progress;
+        const remaining = estimatedTotal - elapsed;
+        
+        this.eta = Math.max(0, Math.ceil(remaining / 1000)); // seconds
+        return this.eta;
+    }
+}
+
+// Global state instance
+export const appState = new AppState();

frontend/js/{video-handler.js → handlers/video-handler.js}

@@ -3,7 +3,7 @@
  * Utilities for video validation, preview, and synchronization
  */
 
-class VideoHandler {
+export class VideoHandler {
     constructor() {
         this.originalVideo = null;
         this.analyzedVideo = null;
@@ -154,9 +154,4 @@ class VideoHandler {
 }
 
 // Export for use in main app
-const videoHandler = new VideoHandler();
-
-// Initialize when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-    videoHandler.init('originalVideo', 'analyzedVideo');
-});
+export const videoHandler = new VideoHandler();

frontend/js/{old_app.js → main.js}

@@ -1,19 +1,14 @@
 /**
- * Main Application Logic
- * Handles UI state, file uploads, and result display
+ * Main Application Entry Point (Simplified with Polling)
  */
 
-const API_BASE_URL = window.location.origin;
-
-// Application State
-const AppState = {
-    sessionId: null,
-    uploadedFile: null,
-    videoInfo: null,
-    results: null,
-    ws: null,
-    startTime: null
-};
+import { APP_CONFIG } from './core/config.js';
+import { appState } from './core/state.js';
+import { apiService } from './services/api-service.js';
+import { pollingService } from './services/polling-service.js';
+import { toast } from './ui/toast.js';
+import { progressManager } from './ui/progress.js';
+import { videoHandler } from './handlers/video-handler.js';
 
 // DOM Elements
 const elements = {
@@ -28,15 +23,8 @@ const elements = {
     processingSection: document.getElementById('processingSection'),
     resultsSection: document.getElementById('resultsSection'),
     
-    progressFill: document.getElementById('progressFill'),
-    progressText: document.getElementById('progressText'),
-    processingMessage: document.getElementById('processingMessage'),
-    statusValue: document.getElementById('statusValue'),
-    elapsedTime: document.getElementById('elapsedTime'),
-    
     originalVideo: document.getElementById('originalVideo'),
     analyzedVideo: document.getElementById('analyzedVideo'),
-    downloadBtn: document.getElementById('downloadBtn'),
     
     movementType: document.getElementById('movementType'),
     intensityValue: document.getElementById('intensityValue'),
@@ -48,47 +36,28 @@ const elements = {
     smoothnessScore: document.getElementById('smoothnessScore'),
     
     bodyParts: document.getElementById('bodyParts'),
-    rhythmCard: document.getElementById('rhythmCard'),
-    bpmValue: document.getElementById('bpmValue'),
-    consistencyValue: document.getElementById('consistencyValue'),
     
     newAnalysisBtn: document.getElementById('newAnalysisBtn'),
-    shareBtn: document.getElementById('shareBtn'),
-    toast: document.getElementById('toast')
 };
 
-// Initialize Application
-function initApp() {
+// Initialize
+function init() {
     setupEventListeners();
-    checkBrowserCompatibility();
-    showToast('Ready to analyze dance videos!', 'info');
+    toast.info('Ready to analyze dance videos!');
 }
 
-// Setup Event Listeners
+// Event Listeners
 function setupEventListeners() {
-    // Upload zone events
     elements.uploadZone.addEventListener('click', () => elements.fileInput.click());
     elements.uploadZone.addEventListener('dragover', handleDragOver);
     elements.uploadZone.addEventListener('dragleave', handleDragLeave);
     elements.uploadZone.addEventListener('drop', handleDrop);
-    
-    // File input change
     elements.fileInput.addEventListener('change', handleFileSelect);
-    
-    // Analyze button
     elements.analyzeBtn.addEventListener('click', startAnalysis);
-    
-    // Download button
-    elements.downloadBtn.addEventListener('click', downloadVideo);
-    
-    // New analysis button
     elements.newAnalysisBtn.addEventListener('click', resetApp);
-    
-    // Share button
-    elements.shareBtn.addEventListener('click', shareResults);
 }
 
-// File Upload Handlers
+// File Handling
 function handleDragOver(e) {
     e.preventDefault();
     elements.uploadZone.classList.add('drag-over');
@@ -102,91 +71,66 @@ function handleDragLeave(e) {
 function handleDrop(e) {
     e.preventDefault();
     elements.uploadZone.classList.remove('drag-over');
-    
     const files = e.dataTransfer.files;
-    if (files.length > 0) {
-        handleFile(files[0]);
-    }
+    if (files.length > 0) handleFile(files[0]);
 }
 
 function handleFileSelect(e) {
     const files = e.target.files;
-    if (files.length > 0) {
-        handleFile(files[0]);
-    }
+    if (files.length > 0) handleFile(files[0]);
 }
 
-// Validate and Handle File
 async function handleFile(file) {
-    // Validate file type
-    const validTypes = ['video/mp4', 'video/webm', 'video/avi'];
-    if (!validTypes.includes(file.type)) {
-        showToast('Please upload a valid video file (MP4, WebM, AVI)', 'error');
+    // Validate
+    if (!APP_CONFIG.ALLOWED_MIME_TYPES.includes(file.type)) {
+        toast.error('Invalid file type. Please upload MP4, WebM, or AVI.');
         return;
     }
     
-    // Validate file size (100MB)
-    const maxSize = 100 * 1024 * 1024;
-    if (file.size > maxSize) {
-        showToast('File size exceeds 100MB limit', 'error');
+    if (file.size > APP_CONFIG.MAX_FILE_SIZE) {
+        toast.error('File exceeds 100MB limit.');
         return;
     }
     
-    AppState.uploadedFile = file;
+    appState.uploadedFile = file;
     
     // Display file info
     elements.fileName.textContent = file.name;
     elements.fileMeta.textContent = `${formatFileSize(file.size)} • ${file.type}`;
     elements.fileInfo.style.display = 'flex';
     
-    // Upload file to server
+    // Upload
     await uploadFile(file);
 }
 
-// Upload File to Server
 async function uploadFile(file) {
     try {
         elements.analyzeBtn.disabled = true;
         elements.analyzeBtn.textContent = '⏳ Uploading...';
         
-        const formData = new FormData();
-        formData.append('file', file);
-        
-        const response = await fetch(`${API_BASE_URL}/api/upload`, {
-            method: 'POST',
-            body: formData
-        });
-        
-        if (!response.ok) {
-            throw new Error('Upload failed');
-        }
+        const data = await apiService.uploadVideo(file);
         
-        const data = await response.json();
+        appState.setSession(data.session_id, data);
         
-        AppState.sessionId = data.session_id;
-        AppState.videoInfo = data;
-        
-        // Create object URL for original video preview
+        // Preview original video
         const videoURL = URL.createObjectURL(file);
         elements.originalVideo.src = videoURL;
         
         elements.analyzeBtn.disabled = false;
         elements.analyzeBtn.textContent = '✨ Start Analysis';
         
-        showToast('Video uploaded successfully!', 'success');
-        
+        toast.success('Video uploaded successfully!');
     } catch (error) {
         console.error('Upload error:', error);
-        showToast('Failed to upload video. Please try again.', 'error');
+        toast.error(`Upload failed: ${error.message}`);
         elements.analyzeBtn.disabled = false;
         elements.analyzeBtn.textContent = '✨ Start Analysis';
     }
 }
 
-// Start Analysis
 async function startAnalysis() {
-    if (!AppState.sessionId) {
-        showToast('Please upload a video first', 'error');
+    if (!appState.sessionId) {
+        toast.error('Please upload a video first');
         return;
     }
     
@@ -195,187 +139,104 @@ async function startAnalysis() {
         elements.uploadSection.style.display = 'none';
         elements.processingSection.style.display = 'block';
         
-        // Initialize WebSocket
-        initWebSocket(AppState.sessionId);
-        
         // Start analysis
-        const response = await fetch(`${API_BASE_URL}/api/analyze/${AppState.sessionId}`, {
-            method: 'POST'
-        });
+        const data = await apiService.startAnalysis(appState.sessionId);
         
-        if (!response.ok) {
-            throw new Error('Analysis failed to start');
-        }
+        appState.setTask(data.task_id);
+        progressManager.start();
         
-        const data = await response.json();
+        toast.info('Analysis started!');
         
-        AppState.startTime = Date.now();
-        startElapsedTimer();
-        
-        showToast('Analysis started!', 'info');
+        // Start polling
+        pollingService.startPolling(data.task_id, {
+            onProgress: (progress, message) => {
+                progressManager.update(progress, message);
+            },
+            onComplete: async (result) => {
+                await handleAnalysisComplete(result);
+            },
+            onError: (error) => {
+                handleAnalysisError(error);
+            }
+        });
         
     } catch (error) {
         console.error('Analysis error:', error);
-        showToast('Failed to start analysis. Please try again.', 'error');
+        toast.error(`Failed to start: ${error.message}`);
         elements.uploadSection.style.display = 'block';
         elements.processingSection.style.display = 'none';
     }
 }
 
-// Initialize WebSocket
-function initWebSocket(sessionId) {
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const wsUrl = `${wsProtocol}//${window.location.host}/ws/${sessionId}`;
-    
-    AppState.ws = new WebSocket(wsUrl);
-    
-    AppState.ws.onopen = () => {
-        console.log('WebSocket connected');
-    };
-    
-    AppState.ws.onmessage = (event) => {
-        const message = JSON.parse(event.data);
-        handleWebSocketMessage(message);
-    };
-    
-    AppState.ws.onerror = (error) => {
-        console.error('WebSocket error:', error);
-    };
+async function handleAnalysisComplete(result) {
+    progressManager.complete();
     
-    AppState.ws.onclose = () => {
-        console.log('WebSocket closed');
-    };
-    
-    // Send heartbeat every 20 seconds
-    setInterval(() => {
-        if (AppState.ws && AppState.ws.readyState === WebSocket.OPEN) {
-            AppState.ws.send('ping');
-        }
-    }, 20000);
-}
-
-// Handle WebSocket Messages
-function handleWebSocketMessage(message) {
-    switch (message.type) {
-        case 'connected':
-            console.log('WebSocket ready');
-            break;
-            
-        case 'progress':
-            updateProgress(message.progress, message.message);
-            break;
-            
-        case 'status':
-            elements.statusValue.textContent = message.status;
-            elements.processingMessage.textContent = message.message;
-            break;
-            
-        case 'complete':
-            handleAnalysisComplete(message);
-            break;
-            
-        case 'error':
-            handleAnalysisError(message);
-            break;
-            
-        case 'pong':
-            // Heartbeat response
-            break;
-    }
-}
-
-// Update Progress
-function updateProgress(progress, message) {
-    const percentage = Math.round(progress * 100);
-    elements.progressFill.style.width = `${percentage}%`;
-    elements.progressText.textContent = `${percentage}%`;
-    elements.processingMessage.textContent = message;
-}
-
-// Start Elapsed Timer
-function startElapsedTimer() {
-    const timer = setInterval(() => {
-        if (AppState.startTime) {
-            const elapsed = Math.floor((Date.now() - AppState.startTime) / 1000);
-            elements.elapsedTime.textContent = `${elapsed}s`;
-        } else {
-            clearInterval(timer);
-        }
-    }, 1000);
-}
-
-// Handle Analysis Complete
-async function handleAnalysisComplete(message) {
-    AppState.results = message.results;
-    AppState.startTime = null;
+    // Fetch complete results
+    const data = await apiService.getResults(appState.sessionId);
+    appState.results = data.results;
     
-    // Hide processing, show results
+    // Show results section
     elements.processingSection.style.display = 'none';
     elements.resultsSection.style.display = 'block';
     
     // Load analyzed video
-    const videoUrl = `${API_BASE_URL}/api/download/${AppState.sessionId}`;
+    const videoUrl = apiService.getDownloadURL(appState.sessionId);
     elements.analyzedVideo.src = videoUrl;
     
-    // Display results
-    displayResults(AppState.results);
+    // Initialize video sync  ← ADD THIS
+    videoHandler.init('originalVideo', 'analyzedVideo');  // ← ADD THIS
     
-    // Close WebSocket
-    if (AppState.ws) {
-        AppState.ws.close();
-        AppState.ws = null;
-    }
+    // Display results
+    displayResults(appState.results);
     
-    showToast('Analysis complete!', 'success');
+    toast.success('Analysis complete! 🎉');
 }
 
-// Handle Analysis Error
-function handleAnalysisError(message) {
-    showToast(message.message, 'error');
+
+
+function handleAnalysisError(error) {
+    toast.error(`Analysis failed: ${error.message}`);
     elements.uploadSection.style.display = 'block';
     elements.processingSection.style.display = 'none';
-    AppState.startTime = null;
+    progressManager.reset();
 }
 
-// Display Results
 function displayResults(results) {
-    // Movement Classification
+    if (!results) return;
+    
+    // Movement
     const movement = results.movement_analysis;
     if (movement) {
-        elements.movementType.textContent = movement.movement_type;
-        elements.intensityValue.textContent = Math.round(movement.intensity);
-        elements.intensityFill.style.width = `${movement.intensity}%`;
+        elements.movementType.textContent = movement.movement_type || 'Unknown';
+        const intensity = Math.round(movement.intensity || 0);
+        elements.intensityValue.textContent = intensity;
+        elements.intensityFill.style.width = `${intensity}%`;
     }
     
-    // Detection Stats
+    // Detection
     const processing = results.processing;
-    const detectionRate = (processing.detection_rate * 100).toFixed(1);
-    elements.detectionRate.textContent = `${detectionRate}%`;
-    elements.framesDetected.textContent = processing.frames_with_pose;
-    elements.totalFrames.textContent = processing.total_frames;
+    if (processing) {
+        const rate = ((processing.detection_rate || 0) * 100).toFixed(1);
+        elements.detectionRate.textContent = `${rate}%`;
+        elements.framesDetected.textContent = processing.frames_with_pose || 0;
+        elements.totalFrames.textContent = processing.total_frames || 0;
+    }
     
     // Confidence
-    const poseAnalysis = results.pose_analysis;
-    elements.confidenceScore.textContent = poseAnalysis.average_confidence.toFixed(2);
+    const pose = results.pose_analysis;
+    if (pose) {
+        elements.confidenceScore.textContent = (pose.average_confidence || 0).toFixed(2);
+    }
     
     // Smoothness
-    elements.smoothnessScore.textContent = Math.round(results.smoothness_score);
+    elements.smoothnessScore.textContent = Math.round(results.smoothness_score || 0);
     
-    // Body Parts
+    // Body parts
     if (movement && movement.body_part_activity) {
         displayBodyParts(movement.body_part_activity);
     }
-    
-    // Rhythm
-    const rhythm = results.rhythm_analysis;
-    if (rhythm && rhythm.has_rhythm) {
-        elements.rhythmCard.style.display = 'block';
-        elements.bpmValue.textContent = Math.round(rhythm.estimated_bpm);
-        elements.consistencyValue.textContent = `${Math.round(rhythm.rhythm_consistency * 100)}%`;
-    }
 }
 
-// Display Body Parts Activity
 function displayBodyParts(bodyParts) {
     elements.bodyParts.innerHTML = '';
     
@@ -402,67 +263,23 @@ function displayBodyParts(bodyParts) {
     }
 }
 
-// Download Video
-function downloadVideo() {
-    if (!AppState.sessionId) return;
-    
-    const url = `${API_BASE_URL}/api/download/${AppState.sessionId}`;
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `analyzed_${AppState.uploadedFile?.name || 'video.mp4'}`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    
-    showToast('Download started!', 'success');
-}
-
-// Share Results
-function shareResults() {
-    const text = `Check out my dance movement analysis! Movement: ${elements.movementType.textContent}, Intensity: ${elements.intensityValue.textContent}/100`;
-    
-    if (navigator.share) {
-        navigator.share({
-            title: 'Dance Movement Analysis',
-            text: text
-        }).catch(console.error);
-    } else {
-        // Fallback: copy to clipboard
-        navigator.clipboard.writeText(text).then(() => {
-            showToast('Results copied to clipboard!', 'success');
-        }).catch(() => {
-            showToast('Could not share results', 'error');
-        });
-    }
-}
-
-// Reset App
 function resetApp() {
-    // Reset state
-    AppState.sessionId = null;
-    AppState.uploadedFile = null;
-    AppState.videoInfo = null;
-    AppState.results = null;
-    AppState.startTime = null;
+    appState.reset();
+    progressManager.reset();
+    pollingService.stopPolling();
     
-    // Reset UI
     elements.fileInfo.style.display = 'none';
     elements.uploadSection.style.display = 'block';
     elements.processingSection.style.display = 'none';
     elements.resultsSection.style.display = 'none';
     
     elements.fileInput.value = '';
-    elements.progressFill.style.width = '0%';
-    elements.progressText.textContent = '0%';
-    
-    // Clear videos
     elements.originalVideo.src = '';
     elements.analyzedVideo.src = '';
     
-    showToast('Ready for new analysis!', 'info');
+    toast.info('Ready for new analysis!');
 }
 
-// Utility Functions
 function formatFileSize(bytes) {
     if (bytes === 0) return '0 Bytes';
     const k = 1024;
@@ -471,24 +288,5 @@ function formatFileSize(bytes) {
     return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
 }
 
-function showToast(message, type = 'info') {
-    elements.toast.textContent = message;
-    elements.toast.className = `toast ${type} show`;
-    
-    setTimeout(() => {
-        elements.toast.classList.remove('show');
-    }, 3000);
-}
-
-function checkBrowserCompatibility() {
-    if (!window.WebSocket) {
-        showToast('Your browser does not support WebSocket. Real-time updates may not work.', 'error');
-    }
-    
-    if (!window.FileReader) {
-        showToast('Your browser does not support file reading.', 'error');
-    }
-}
-
-// Initialize on DOM load
-document.addEventListener('DOMContentLoaded', initApp);
+// Initialize on load
+document.addEventListener('DOMContentLoaded', init);

frontend/js/services/api-service.js

@@ -0,0 +1,73 @@
+/**
+ * API Communication Service
+ */
+
+import { APP_CONFIG } from '../core/config.js';
+
+export class APIService {
+    constructor(baseURL = APP_CONFIG.API_BASE_URL) {
+        this.baseURL = baseURL;
+    }
+    
+    async uploadVideo(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        const response = await fetch(`${this.baseURL}/api/upload`, {
+            method: 'POST',
+            body: formData
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Upload failed');
+        }
+        
+        return await response.json();
+    }
+    
+    async startAnalysis(sessionId) {
+        const response = await fetch(`${this.baseURL}/api/analyze/${sessionId}`, {
+            method: 'POST'
+        });
+        
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.detail || 'Analysis failed to start');
+        }
+        
+        return await response.json();
+    }
+    
+    async getTaskStatus(taskId) {
+        const response = await fetch(`${this.baseURL}/api/task/${taskId}`);
+        
+        if (!response.ok) {
+            throw new Error('Failed to get task status');
+        }
+        
+        return await response.json();
+    }
+    
+    async getResults(sessionId) {
+        const response = await fetch(`${this.baseURL}/api/results/${sessionId}`);
+        
+        if (!response.ok) {
+            throw new Error('Failed to get results');
+        }
+        
+        return await response.json();
+    }
+    
+    getDownloadURL(sessionId) {
+        return `${this.baseURL}/api/download/${sessionId}`;
+    }
+    
+    async getStorageStats() {
+        const response = await fetch(`${this.baseURL}/api/admin/storage`);
+        return await response.json();
+    }
+}
+
+// Global API service instance
+export const apiService = new APIService();

frontend/js/services/polling-service.js

@@ -0,0 +1,65 @@
+/**
+ * Task Polling Service (replaces WebSocket for Celery)
+ */
+
+import { APP_CONFIG } from '../core/config.js';
+import { apiService } from './api-service.js';
+
+export class PollingService {
+    constructor() {
+        this.pollInterval = null;
+        this.onProgress = null;
+        this.onComplete = null;
+        this.onError = null;
+        this.pollCount = 0;
+    }
+    
+    startPolling(taskId, callbacks = {}) {
+        this.onProgress = callbacks.onProgress || (() => {});
+        this.onComplete = callbacks.onComplete || (() => {});
+        this.onError = callbacks.onError || (() => {});
+        this.pollCount = 0;
+        
+        console.log(`Starting polling for task: ${taskId}`);
+        
+        this.pollInterval = setInterval(async () => {
+            try {
+                this.pollCount++;
+                
+                // Max poll attempts check
+                if (this.pollCount > APP_CONFIG.MAX_POLL_ATTEMPTS) {
+                    this.stopPolling();
+                    this.onError(new Error('Polling timeout'));
+                    return;
+                }
+                
+                const status = await apiService.getTaskStatus(taskId);
+                
+                if (status.state === 'PROGRESS' || status.state === 'PENDING') {
+                    this.onProgress(status.progress || 0, status.message || 'Processing...');
+                } else if (status.state === 'SUCCESS') {
+                    this.stopPolling();
+                    this.onComplete(status.result);
+                } else if (status.state === 'FAILURE') {
+                    this.stopPolling();
+                    this.onError(new Error(status.error || 'Task failed'));
+                }
+                
+            } catch (error) {
+                console.error('Polling error:', error);
+                // Don't stop on single error, retry
+            }
+        }, APP_CONFIG.POLLING_INTERVAL);
+    }
+    
+    stopPolling() {
+        if (this.pollInterval) {
+            clearInterval(this.pollInterval);
+            this.pollInterval = null;
+            console.log('Polling stopped');
+        }
+    }
+}
+
+// Global polling service instance
+export const pollingService = new PollingService();

frontend/js/ui/progress.js

@@ -0,0 +1,104 @@
+/**
+ * Progress Bar Manager
+ */
+
+export class ProgressManager {
+    constructor() {
+        this.elements = {
+            fill: document.getElementById('progressFill'),
+            text: document.getElementById('progressText'),
+            message: document.getElementById('processingMessage'),
+            elapsed: document.getElementById('elapsedTime'),
+            eta: document.getElementById('etaTime')  // New element for ETA
+        };
+        this.startTime = null;
+        this.interval = null;
+    }
+    
+    start() {
+        this.startTime = Date.now();
+        this.updateElapsedTime();
+        
+        // Update elapsed time every second
+        this.interval = setInterval(() => {
+            this.updateElapsedTime();
+        }, 1000);
+    }
+    
+    update(progress, message = '') {
+        const percentage = Math.round(progress * 100);
+        
+        if (this.elements.fill) {
+            this.elements.fill.style.width = `${percentage}%`;
+        }
+        
+        if (this.elements.text) {
+            this.elements.text.textContent = `${percentage}%`;
+        }
+        
+        if (this.elements.message && message) {
+            this.elements.message.textContent = message;
+        }
+        
+        // Update ETA
+        this.updateETA(progress);
+    }
+    
+    updateElapsedTime() {
+        if (!this.startTime || !this.elements.elapsed) return;
+        
+        const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
+        this.elements.elapsed.textContent = this.formatTime(elapsed);
+    }
+    
+    updateETA(progress) {
+        if (!this.startTime || !this.elements.eta || progress <= 0) return;
+        
+        const elapsed = Date.now() - this.startTime;
+        const estimatedTotal = elapsed / progress;
+        const remaining = Math.max(0, estimatedTotal - elapsed);
+        const etaSeconds = Math.ceil(remaining / 1000);
+        
+        this.elements.eta.textContent = this.formatTime(etaSeconds);
+    }
+    
+    formatTime(seconds) {
+        if (seconds < 60) {
+            return `${seconds}s`;
+        } else if (seconds < 3600) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins}m ${secs}s`;
+        } else {
+            const hours = Math.floor(seconds / 3600);
+            const mins = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${mins}m`;
+        }
+    }
+    
+    complete() {
+        this.update(1.0, 'Analysis complete!');
+        this.stop();
+    }
+    
+    stop() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+    
+    reset() {
+        this.stop();
+        this.startTime = null;
+        
+        if (this.elements.fill) this.elements.fill.style.width = '0%';
+        if (this.elements.text) this.elements.text.textContent = '0%';
+        if (this.elements.message) this.elements.message.textContent = '';
+        if (this.elements.elapsed) this.elements.elapsed.textContent = '0s';
+        if (this.elements.eta) this.elements.eta.textContent = '--';
+    }
+}
+
+// Global progress manager
+export const progressManager = new ProgressManager();

frontend/js/ui/toast.js

@@ -0,0 +1,41 @@
+/**
+ * Toast Notification System
+ */
+
+import { APP_CONFIG } from '../core/config.js';
+
+export class ToastManager {
+    constructor(toastElement) {
+        this.toastElement = toastElement || document.getElementById('toast');
+    }
+    
+    show(message, type = 'info') {
+        if (!this.toastElement) return;
+        
+        this.toastElement.textContent = message;
+        this.toastElement.className = `toast ${type} show`;
+        
+        setTimeout(() => {
+            this.toastElement.classList.remove('show');
+        }, APP_CONFIG.TOAST_DURATION);
+    }
+    
+    success(message) {
+        this.show(message, 'success');
+    }
+    
+    error(message) {
+        this.show(message, 'error');
+    }
+    
+    info(message) {
+        this.show(message, 'info');
+    }
+    
+    warning(message) {
+        this.show(message, 'warning');
+    }
+}
+
+// Global toast manager
+export const toast = new ToastManager();

frontend/js/{visualization.js → utils/visualization.js}

@@ -3,7 +3,7 @@
  * Handles canvas rendering, skeleton overlay, and visual effects
  */
 
-class Visualizer {
+export class Visualizer {
     constructor() {
         this.canvas = null;
         this.ctx = null;
@@ -419,9 +419,4 @@ class Visualizer {
 }
 
 // Create global instance
-const visualizer = new Visualizer();
-
-// Export for use in other modules
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = Visualizer;
-}
+export const visualizer = new Visualizer();

frontend/js/websocket-client.js

@@ -1,194 +0,0 @@
-/**
- * WebSocket Client Manager
- * Handles real-time communication with server
- */
-
-class WebSocketClient {
-    constructor() {
-        this.ws = null;
-        this.reconnectAttempts = 0;
-        this.maxReconnectAttempts = 5;
-        this.reconnectDelay = 2000;
-        this.heartbeatInterval = null;
-        this.callbacks = {
-            onOpen: null,
-            onClose: null,
-            onError: null,
-            onMessage: null,
-            onProgress: null,
-            onComplete: null
-        };
-    }
-    
-    /**
-     * Connect to WebSocket server
-     */
-    connect(sessionId) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${protocol}//${window.location.host}/ws/${sessionId}`;
-        
-        console.log(`Connecting to WebSocket: ${wsUrl}`);
-        
-        this.ws = new WebSocket(wsUrl);
-        
-        this.ws.onopen = (event) => {
-            console.log('WebSocket connected');
-            this.reconnectAttempts = 0;
-            this.startHeartbeat();
-            
-            if (this.callbacks.onOpen) {
-                this.callbacks.onOpen(event);
-            }
-        };
-        
-        this.ws.onmessage = (event) => {
-            try {
-                const message = JSON.parse(event.data);
-                this.handleMessage(message);
-            } catch (error) {
-                console.error('Failed to parse WebSocket message:', error);
-            }
-        };
-        
-        this.ws.onerror = (error) => {
-            console.error('WebSocket error:', error);
-            
-            if (this.callbacks.onError) {
-                this.callbacks.onError(error);
-            }
-        };
-        
-        this.ws.onclose = (event) => {
-            console.log('WebSocket closed');
-            this.stopHeartbeat();
-            
-            if (this.callbacks.onClose) {
-                this.callbacks.onClose(event);
-            }
-            
-            // Attempt reconnection
-            if (this.reconnectAttempts < this.maxReconnectAttempts) {
-                this.reconnectAttempts++;
-                console.log(`Attempting reconnection ${this.reconnectAttempts}/${this.maxReconnectAttempts}`);
-                
-                setTimeout(() => {
-                    this.connect(sessionId);
-                }, this.reconnectDelay);
-            }
-        };
-    }
-    
-    /**
-     * Handle incoming messages
-     */
-    handleMessage(message) {
-        console.log('WebSocket message:', message);
-        
-        if (this.callbacks.onMessage) {
-            this.callbacks.onMessage(message);
-        }
-        
-        switch (message.type) {
-            case 'connected':
-                console.log('WebSocket connection confirmed');
-                break;
-                
-            case 'progress':
-                if (this.callbacks.onProgress) {
-                    this.callbacks.onProgress(message.progress, message.message);
-                }
-                break;
-                
-            case 'status':
-                console.log('Status update:', message.status, message.message);
-                break;
-                
-            case 'complete':
-                if (this.callbacks.onComplete) {
-                    this.callbacks.onComplete(message);
-                }
-                this.close();
-                break;
-                
-            case 'error':
-                console.error('Server error:', message.message);
-                if (this.callbacks.onError) {
-                    this.callbacks.onError(new Error(message.message));
-                }
-                break;
-                
-            case 'pong':
-                // Heartbeat response
-                break;
-                
-            case 'keepalive':
-                // Server keepalive
-                break;
-        }
-    }
-    
-    /**
-     * Send message to server
-     */
-    send(message) {
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-            if (typeof message === 'object') {
-                this.ws.send(JSON.stringify(message));
-            } else {
-                this.ws.send(message);
-            }
-        } else {
-            console.warn('WebSocket is not open. Cannot send message.');
-        }
-    }
-    
-    /**
-     * Start heartbeat to keep connection alive
-     */
-    startHeartbeat() {
-        this.heartbeatInterval = setInterval(() => {
-            this.send('ping');
-        }, 20000); // Every 20 seconds
-    }
-    
-    /**
-     * Stop heartbeat
-     */
-    stopHeartbeat() {
-        if (this.heartbeatInterval) {
-            clearInterval(this.heartbeatInterval);
-            this.heartbeatInterval = null;
-        }
-    }
-    
-    /**
-     * Close WebSocket connection
-     */
-    close() {
-        this.stopHeartbeat();
-        
-        if (this.ws) {
-            this.ws.close();
-            this.ws = null;
-        }
-    }
-    
-    /**
-     * Check if WebSocket is connected
-     */
-    isConnected() {
-        return this.ws && this.ws.readyState === WebSocket.OPEN;
-    }
-    
-    /**
-     * Set callback handlers
-     */
-    on(event, callback) {
-        if (this.callbacks.hasOwnProperty(`on${event.charAt(0).toUpperCase() + event.slice(1)}`)) {
-            this.callbacks[`on${event.charAt(0).toUpperCase() + event.slice(1)}`] = callback;
-        }
-    }
-}
-
-// Export for use in main app
-const wsClient = new WebSocketClient();