Upload 14 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/ui_preview.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,37 @@
+# Use official Python 3.10 slim image
+FROM python:3.10-slim
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Create a non-root user for Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:${PATH}"
+
+# Copy requirements and install
+COPY --chown=user:user requirements.txt .
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+# Copy the rest of the application
+COPY --chown=user:user . .
+
+# Create uploads directory structure explicitly to ensure permissions
+RUN mkdir -p uploads/models uploads/videos uploads/results uploads/temp
+
+# Set environment variables
+ENV PORT=7860
+ENV PYTHONUNBUFFERED=1
+
+# Expose the application port
+EXPOSE 7860
+
+# Command to run the application
+CMD ["python", "main.py"]

README.md

@@ -1,12 +1,63 @@
 ---
-title: Model Inference Studio
-emoji: 🏃
-colorFrom: green
-colorTo: blue
+title: Inference Studio | AI Vision Explorer
+emoji: 🚀
+colorFrom: blue
+colorTo: purple
 sdk: docker
+app_port: 7860
 pinned: false
-license: mit
-short_description: run your model with image and video online
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🚀 Inference Studio | AI Vision Explorer
+
+A premium, web-based interface for deploying and testing YOLO vision models with advanced controls for ROI (Region of Interest) filtering and confidence range analysis.
+
+![UI Preview](static/ui_preview.png)
+
+## ✨ Features
+
+-   **Interactive ROI Drawing**: Draw detection zones directly on a preview image or video frame.
+-   **Confidence Range Filtering**: Test model behavior by specifying both Min and Max confidence thresholds (e.g., visualize only low-confidence detections).
+-   **Video Studio**: Full support for video inference with automatic frame extraction for ROI setup and H.264 transcoding for web playback.
+-   **Glassmorphism UI**: Modern, dark-themed interface built for a premium developer experience.
+-   **Model Management**: Easily swap `.pt` models on the fly.
+
+## 🛠️ Setup
+
+### Prerequisites
+-   **Python 3.8+**
+-   **FFmpeg**: Required for video processing.
+    ```bash
+    # Ubuntu/Debian
+    sudo apt update && sudo apt install ffmpeg
+    ```
+
+### Installation
+1.  Clone the repository:
+    ```bash
+    git clone https://github.com/your-repo/inference-studio.git
+    cd inference-studio
+    ```
+2.  Install dependencies:
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+## 🚀 Running the Studio
+
+Start the server using the provided shell script:
+```bash
+chmod +x start.sh
+./start.sh
+```
+The studio will be available at `http://localhost:8000`.
+
+## 📂 Project Structure
+
+-   `main.py`: FastAPI backend handling inference and video tasks.
+-   `static/`: Frontend assets (styles, interactive JS).
+-   `templates/`: HTML templates.
+-   `uploads/`: Directory structure for models, videos, and results (ignored by Git).
+
+## 📝 License
+MIT

main.py

@@ -0,0 +1,294 @@
+import os
+import subprocess
+import shutil
+import base64
+import json
+from typing import Optional
+from fastapi import FastAPI, UploadFile, File, Request, HTTPException, Form
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from ultralytics import YOLO
+import cv2
+import numpy as np
+from pathlib import Path
+import uuid
+import time
+from fastapi import BackgroundTasks
+from fastapi.responses import FileResponse
+
+app = FastAPI()
+
+# Setup paths
+BASE_DIR = Path(__file__).resolve().parent
+UPLOAD_DIR = BASE_DIR / "uploads"
+MODEL_DIR = UPLOAD_DIR / "models"
+VIDEO_DIR = UPLOAD_DIR / "videos"
+RESULT_DIR = UPLOAD_DIR / "results"
+TEMP_DIR = UPLOAD_DIR / "temp"
+
+for d in [MODEL_DIR, TEMP_DIR, VIDEO_DIR, RESULT_DIR]:
+    d.mkdir(parents=True, exist_ok=True)
+
+# Global model state and task tracking
+current_model = None
+model_name = ""
+video_tasks = {} # task_id: {"progress": P, "status": S, "result": R}
+
+app.mount("/static", StaticFiles(directory=str(BASE_DIR / "static")), name="static")
+templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {
+        "request": request, 
+        "model_loaded": current_model is not None, 
+        "model_name": model_name
+    })
+
+@app.post("/upload-model")
+async def upload_model(file: UploadFile = File(...)):
+    global current_model, model_name
+    if not file.filename.endswith(".pt"):
+        raise HTTPException(status_code=400, detail="Only .pt files are supported")
+    
+    file_path = MODEL_DIR / file.filename
+    with open(file_path, "wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+    
+    try:
+        current_model = YOLO(str(file_path))
+        model_name = file.filename
+        return {"status": "success", "message": f"Model {model_name} loaded successfully"}
+    except Exception as e:
+        if os.path.exists(file_path):
+            os.remove(file_path)
+        raise HTTPException(status_code=500, detail=f"Failed to load model: {str(e)}")
+
+def apply_roi_filter(results, roi, img_w, img_h):
+    if not roi:
+        return results, []
+
+    x1_roi = int(roi['x1'] * img_w / 100)
+    y1_roi = int(roi['y1'] * img_h / 100)
+    x2_roi = int(roi['x2'] * img_w / 100)
+    y2_roi = int(roi['y2'] * img_h / 100)
+
+    indices = []
+    for i, box in enumerate(results.boxes):
+        bx1, by1, bx2, by2 = box.xyxy[0].tolist()
+        bcx = (bx1 + bx2) / 2
+        bcy = (by1 + by2) / 2
+        
+        if x1_roi <= bcx <= x2_roi and y1_roi <= bcy <= y2_roi:
+            indices.append(i)
+    
+    results.boxes = results.boxes[indices]
+    return results, [x1_roi, y1_roi, x2_roi, y2_roi]
+
+def draw_roi_on_img(img, roi_coords):
+    if not roi_coords:
+        return img
+    x1, y1, x2, y2 = roi_coords
+    # Draw a dashed or semi-transparent rectangle for ROI
+    overlay = img.copy()
+    cv2.rectangle(overlay, (x1, y1), (x2, y2), (0, 255, 255), 2)
+    cv2.putText(overlay, "ROI ZONE", (x1 + 5, y1 + 25), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 255), 2)
+    return cv2.addWeighted(overlay, 0.6, img, 0.4, 0)
+
+@app.post("/inference")
+async def run_inference(
+    file: UploadFile = File(...),
+    conf_min: float = Form(0.25),
+    conf_max: float = Form(1.0),
+    roi: Optional[str] = Form(None)
+):
+    global current_model
+    if current_model is None:
+        raise HTTPException(status_code=400, detail="No model loaded. Please upload a model first.")
+    
+    # Parse ROI if present
+    roi_data = json.loads(roi) if roi else None
+    
+    # Read image
+    contents = await file.read()
+    nparr = np.frombuffer(contents, np.uint8)
+    img = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+    
+    if img is None:
+        raise HTTPException(status_code=400, detail="Invalid image file")
+
+    h, w = img.shape[:2]
+
+    # Run inference with min threshold
+    results = current_model(img, conf=conf_min)[0]
+    
+    # Apply max confidence filtering
+    if conf_max < 1.0:
+        indices = [i for i, box in enumerate(results.boxes) if float(box.conf[0]) <= conf_max]
+        results.boxes = results.boxes[indices]
+
+    # Apply ROI filtering
+    results, roi_coords = apply_roi_filter(results, roi_data, w, h)
+    
+    # Draw results
+    annotated_img = results.plot()
+    
+    # Draw ROI box
+    annotated_img = draw_roi_on_img(annotated_img, roi_coords)
+    
+    # Encode to base64
+    _, buffer = cv2.imencode('.jpg', annotated_img)
+    img_str = base64.b64encode(buffer).decode('utf-8')
+    
+    # Extract box info
+    boxes = []
+    for box in results.boxes:
+        boxes.append({
+            "cls": int(box.cls[0]),
+            "conf": float(box.conf[0]),
+            "xyxy": box.xyxy[0].tolist()
+        })
+    
+    return {
+        "status": "success",
+        "image": f"data:image/jpeg;base64,{img_str}",
+        "count": len(results.boxes),
+        "boxes": boxes
+    }
+
+def process_video_task(task_id: str, input_path: str, output_path: str, conf_min: float, conf_max: float, roi: Optional[dict]):
+    global current_model, video_tasks
+    
+    # Temporary path for OpenCV output
+    temp_output = str(RESULT_DIR / f"temp_{task_id}.mp4")
+    
+    try:
+        cap = cv2.VideoCapture(input_path)
+        if not cap.isOpened():
+            video_tasks[task_id]["status"] = "error"
+            video_tasks[task_id]["message"] = "Could not open video file"
+            return
+
+        fps = cap.get(cv2.CAP_PROP_FPS)
+        w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+        h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        
+        # Using mp4v for the intermediate file
+        fourcc = cv2.VideoWriter_fourcc(*'mp4v')
+        out = cv2.VideoWriter(temp_output, fourcc, fps, (w, h))
+        
+        frame_count = 0
+        while cap.isOpened():
+            ret, frame = cap.read()
+            if not ret:
+                break
+            
+            # Inference with min threshold
+            results = current_model(frame, conf=conf_min)[0]
+            
+            # Apply max confidence filtering
+            if conf_max < 1.0:
+                indices = [i for i, box in enumerate(results.boxes) if float(box.conf[0]) <= conf_max]
+                results.boxes = results.boxes[indices]
+
+            # Apply ROI filtering
+            results, roi_coords = apply_roi_filter(results, roi, w, h)
+            
+            # Draw results
+            annotated_frame = results.plot()
+            
+            # Draw ROI box
+            annotated_frame = draw_roi_on_img(annotated_frame, roi_coords)
+            
+            out.write(annotated_frame)
+            frame_count += 1
+            
+            # Update progress (0-90% for processing)
+            progress = int((frame_count / total_frames) * 90)
+            video_tasks[task_id]["progress"] = progress
+            
+        cap.release()
+        out.release()
+        
+        # Transcode to H.264 for web compatibility
+        video_tasks[task_id]["progress"] = 95
+        video_tasks[task_id]["status"] = "transcoding"
+        
+        ffmpeg_cmd = [
+            'ffmpeg', '-y', '-i', temp_output,
+            '-c:v', 'libx264', '-preset', 'ultrafast', '-crf', '28',
+            '-pix_fmt', 'yuv420p', '-c:a', 'aac', '-b:a', '128k',
+            output_path
+        ]
+        
+        subprocess.run(ffmpeg_cmd, check=True, capture_output=True)
+        
+        video_tasks[task_id]["progress"] = 100
+        video_tasks[task_id]["status"] = "completed"
+        video_tasks[task_id]["result_url"] = f"/video-result/{task_id}"
+        
+    except Exception as e:
+        video_tasks[task_id]["status"] = "error"
+        video_tasks[task_id]["message"] = str(e)
+    finally:
+        # Cleanup files
+        if os.path.exists(input_path):
+            os.remove(input_path)
+        if os.path.exists(temp_output):
+            os.remove(temp_output)
+
+@app.post("/inference-video")
+async def run_video_inference(
+    background_tasks: BackgroundTasks, 
+    file: UploadFile = File(...),
+    conf_min: float = Form(0.25),
+    conf_max: float = Form(1.0),
+    roi: Optional[str] = Form(None)
+):
+    global current_model, video_tasks
+    if current_model is None:
+        raise HTTPException(status_code=400, detail="No model loaded. Please upload a model first.")
+    
+    # Parse ROI
+    roi_data = json.loads(roi) if roi else None
+    
+    task_id = str(uuid.uuid4())
+    input_filename = f"{task_id}_{file.filename}"
+    input_path = VIDEO_DIR / input_filename
+    output_filename = f"processed_{task_id}.mp4"
+    output_path = RESULT_DIR / output_filename
+    
+    with open(input_path, "wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+    
+    video_tasks[task_id] = {
+        "progress": 0,
+        "status": "processing",
+        "filename": file.filename
+    }
+    
+    background_tasks.add_task(process_video_task, task_id, str(input_path), str(output_path), conf_min, conf_max, roi_data)
+    
+    return {"status": "success", "task_id": task_id}
+
+@app.get("/video-progress/{task_id}")
+async def get_video_progress(task_id: str):
+    if task_id not in video_tasks:
+        raise HTTPException(status_code=404, detail="Task not found")
+    return video_tasks[task_id]
+
+@app.get("/video-result/{task_id}")
+async def get_video_result(task_id: str):
+    output_filename = f"processed_{task_id}.mp4"
+    output_path = RESULT_DIR / output_filename
+    if not output_path.exists():
+        raise HTTPException(status_code=404, detail="Result not found or still processing")
+    return FileResponse(path=output_path, filename=f"inference_{task_id}.mp4", media_type="video/mp4")
+
+if __name__ == "__main__":
+    import uvicorn
+    # Use port from environment variable for Hugging Face compatibility (default 7860)
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+ultralytics
+opencv-python
+numpy
+jinja2
+python-multipart

start.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Configuration
+PORT=8000
+HOST="0.0.0.0"
+
+echo "------------------------------------------------"
+echo "🚀 Starting Inference Studio..."
+echo "------------------------------------------------"
+
+# Check dependencies
+echo "🔍 Checking dependencies..."
+
+if ! command -v ffmpeg &> /dev/null; then
+    echo "⚠️  Warning: ffmpeg not found. Video transcoding will fail."
+else
+    echo "✅ ffmpeg found."
+fi
+
+# Create necessary directories
+echo "📁 Preparing directories..."
+mkdir -p uploads/models uploads/videos uploads/results uploads/temp
+
+# Start the server
+echo "📡 Server starting at http://localhost:$PORT"
+echo "------------------------------------------------"
+
+# Run with python directly as main.py has the uvicorn runner
+python3 main.py

static/app.js

@@ -0,0 +1,389 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // State management
+    let currentFile = null;
+    let isDrawing = false;
+    let startX, startY;
+    let roi = { x1: 0, y1: 0, x2: 100, y2: 100 };
+    let previewImage = new Image();
+
+    // Elements
+    const modelDropZone = document.getElementById('model-drop-zone');
+    const modelInput = document.getElementById('model-input');
+    const modelStatus = document.getElementById('model-status');
+    const statusText = document.getElementById('status-text');
+    const statusIcon = modelStatus.querySelector('i');
+
+    const mediaDropZone = document.getElementById('media-drop-zone');
+    const mediaInput = document.getElementById('media-input');
+    
+    const previewSection = document.getElementById('preview-section');
+    const roiCanvas = document.getElementById('roi-canvas');
+    const ctx = roiCanvas.getContext('2d');
+    
+    const thresholdInput = document.getElementById('threshold-input');
+    const confMaxInput = document.getElementById('conf-max-input');
+    const confRangeVal = document.getElementById('conf-range-val');
+    const roiX1 = document.getElementById('roi-x1');
+    const roiY1 = document.getElementById('roi-y1');
+    const roiX2 = document.getElementById('roi-x2');
+    const roiY2 = document.getElementById('roi-y2');
+    const resetRoiBtn = document.getElementById('reset-roi-btn');
+    
+    const progressCard = document.getElementById('progress-card');
+    const loading = document.getElementById('loading');
+    const videoProgressContainer = document.getElementById('video-progress-container');
+    const videoProgressBar = document.getElementById('video-progress-bar');
+    const videoStatusMsg = document.getElementById('video-status-msg');
+    const videoPercentage = document.getElementById('video-percentage');
+
+    const analyzeBtn = document.getElementById('analyze-btn');
+
+    const resultSection = document.getElementById('result-section');
+    const resultImage = document.getElementById('result-image');
+    const resultCount = document.getElementById('result-count');
+    const downloadBtn = document.getElementById('download-btn');
+
+    const videoResultSection = document.getElementById('video-result-section');
+    const resultVideo = document.getElementById('result-video');
+    const videoDownloadBtn = document.getElementById('video-download-btn');
+
+    // Drag and Drop Setup
+    [modelDropZone, mediaDropZone].forEach(zone => {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            zone.addEventListener(eventName, e => {
+                e.preventDefault();
+                e.stopPropagation();
+            });
+        });
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            zone.addEventListener(eventName, () => zone.classList.add('dragover'));
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            zone.addEventListener(eventName, () => zone.classList.remove('dragover'));
+        });
+    });
+
+    // Clicks
+    modelDropZone.addEventListener('click', () => modelInput.click());
+    mediaDropZone.addEventListener('click', () => mediaInput.click());
+
+    // File Handlers
+    modelInput.addEventListener('change', e => handleModelUpload(e.target.files[0]));
+    modelDropZone.addEventListener('drop', e => handleModelUpload(e.dataTransfer.files[0]));
+
+    mediaInput.addEventListener('change', e => handleMediaSelection(e.target.files[0]));
+    mediaDropZone.addEventListener('drop', e => handleMediaSelection(e.dataTransfer.files[0]));
+
+    // Settings
+    const updateConfLabel = () => {
+        const min = Math.round(thresholdInput.value * 100);
+        const max = Math.round(confMaxInput.value * 100);
+        confRangeVal.innerText = `${min}% - ${max}%`;
+    };
+
+    thresholdInput.addEventListener('input', updateConfLabel);
+    confMaxInput.addEventListener('input', updateConfLabel);
+
+    [roiX1, roiY1, roiX2, roiY2].forEach(input => {
+        input.addEventListener('change', updateROIFromInputs);
+    });
+
+    resetRoiBtn.addEventListener('click', () => {
+        roi = { x1: 0, y1: 0, x2: 100, y2: 100 };
+        updateInputsFromROI();
+        drawROI();
+    });
+
+    analyzeBtn.addEventListener('click', startInference);
+
+    // --- Functions ---
+
+    async function handleModelUpload(file) {
+        if (!file || !file.name.endsWith('.pt')) {
+            showToast('Please upload a valid YOLO .pt model.', 'error');
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        statusText.innerText = 'Uploading model...';
+        modelStatus.classList.remove('loaded');
+        statusIcon.className = 'fas fa-spinner fa-spin';
+
+        try {
+            const resp = await fetch('/upload-model', { method: 'POST', body: formData });
+            const data = await resp.json();
+            if (data.status === 'success') {
+                statusText.innerText = `Model: ${file.name}`;
+                modelStatus.classList.add('loaded');
+                statusIcon.className = 'fas fa-check-circle';
+                showToast('Model loaded successfully!', 'success');
+            } else {
+                throw new Error(data.detail);
+            }
+        } catch (err) {
+            statusText.innerText = 'Error loading model';
+            statusIcon.className = 'fas fa-exclamation-circle';
+            showToast(err.message, 'error');
+        }
+    }
+
+    async function handleMediaSelection(file) {
+        if (!file) return;
+        currentFile = file;
+
+        // Reset state
+        resultSection.classList.add('hidden');
+        videoResultSection.classList.add('hidden');
+        progressCard.classList.add('hidden');
+        
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = e => {
+                previewImage.onload = () => initCanvas();
+                previewImage.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        } else if (file.type.startsWith('video/')) {
+            extractVideoFrame(file);
+        } else {
+            showToast('Unsupported file type.', 'error');
+        }
+    }
+
+    function extractVideoFrame(file) {
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+        video.src = URL.createObjectURL(file);
+        video.onloadedmetadata = () => {
+            video.currentTime = 0.1; // Seek a bit in to avoid black frames
+        };
+        video.onseeked = () => {
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = video.videoWidth;
+            tempCanvas.height = video.videoHeight;
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCtx.drawImage(video, 0, 0);
+            previewImage.onload = () => initCanvas();
+            previewImage.src = tempCanvas.toDataURL('image/jpeg');
+            URL.revokeObjectURL(video.src);
+        };
+    }
+
+    function initCanvas() {
+        previewSection.classList.remove('hidden');
+        previewSection.scrollIntoView({ behavior: 'smooth' });
+        
+        // Scale canvas to fit container but keep aspect ratio
+        const containerWidth = roiCanvas.parentElement.clientWidth;
+        const scale = containerWidth / previewImage.width;
+        
+        roiCanvas.width = previewImage.width * scale;
+        roiCanvas.height = previewImage.height * scale;
+        
+        drawROI();
+    }
+
+    function drawROI() {
+        ctx.clearRect(0, 0, roiCanvas.width, roiCanvas.height);
+        ctx.drawImage(previewImage, 0, 0, roiCanvas.width, roiCanvas.height);
+        
+        // Darken outside
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+        
+        const x1 = (roi.x1 / 100) * roiCanvas.width;
+        const y1 = (roi.y1 / 100) * roiCanvas.height;
+        const x2 = (roi.x2 / 100) * roiCanvas.width;
+        const y2 = (roi.y2 / 100) * roiCanvas.height;
+        
+        const w = x2 - x1;
+        const h = y2 - y1;
+
+        // Draw overlay path with a "hole" for the ROI
+        ctx.beginPath();
+        ctx.rect(0, 0, roiCanvas.width, roiCanvas.height);
+        ctx.rect(x1, y1, w, h);
+        ctx.fill('evenodd');
+
+        // Draw border
+        ctx.strokeStyle = '#f59e0b';
+        ctx.lineWidth = 3;
+        ctx.setLineDash([5, 5]);
+        ctx.strokeRect(x1, y1, w, h);
+        
+        // Optional: corner handles design look
+        ctx.fillStyle = '#f59e0b';
+        ctx.fillRect(x1-4, y1-4, 8, 8);
+        ctx.fillRect(x2-4, y1-4, 8, 8);
+        ctx.fillRect(x1-4, y2-4, 8, 8);
+        ctx.fillRect(x2-4, y2-4, 8, 8);
+    }
+
+    // Canvas Events
+    roiCanvas.addEventListener('mousedown', e => {
+        isDrawing = true;
+        const rect = roiCanvas.getBoundingClientRect();
+        startX = e.clientX - rect.left;
+        startY = e.clientY - rect.top;
+        
+        roi.x1 = (startX / roiCanvas.width) * 100;
+        roi.y1 = (startY / roiCanvas.height) * 100;
+    });
+
+    roiCanvas.addEventListener('mousemove', e => {
+        if (!isDrawing) return;
+        const rect = roiCanvas.getBoundingClientRect();
+        const curX = e.clientX - rect.left;
+        const curY = e.clientY - rect.top;
+        
+        roi.x2 = (curX / roiCanvas.width) * 100;
+        roi.y2 = (curY / roiCanvas.height) * 100;
+        
+        updateInputsFromROI();
+        drawROI();
+    });
+
+    roiCanvas.addEventListener('mouseup', () => {
+        isDrawing = false;
+        // Normalize coordinates (ensure x1 < x2, y1 < y2)
+        if (roi.x1 > roi.x2) [roi.x1, roi.x2] = [roi.x2, roi.x1];
+        if (roi.y1 > roi.y2) [roi.y1, roi.y2] = [roi.y2, roi.y1];
+        updateInputsFromROI();
+        drawROI();
+    });
+
+    function updateInputsFromROI() {
+        roiX1.value = Math.round(roi.x1);
+        roiY1.value = Math.round(roi.y1);
+        roiX2.value = Math.round(roi.x2);
+        roiY2.value = Math.round(roi.y2);
+    }
+
+    function updateROIFromInputs() {
+        roi.x1 = parseInt(roiX1.value);
+        roi.y1 = parseInt(roiY1.value);
+        roi.x2 = parseInt(roiX2.value);
+        roi.y2 = parseInt(roiY2.value);
+        drawROI();
+    }
+
+    async function startInference() {
+        if (!currentFile) return;
+
+        progressCard.classList.remove('hidden');
+        progressCard.scrollIntoView({ behavior: 'smooth' });
+        
+        const isVideo = currentFile.type.startsWith('video/');
+        const formData = new FormData();
+        formData.append('file', currentFile);
+        formData.append('conf_min', thresholdInput.value);
+        formData.append('conf_max', confMaxInput.value);
+        formData.append('roi', JSON.stringify(roi));
+
+        if (isVideo) {
+            handleVideoInference(formData);
+        } else {
+            handleImageInference(formData);
+        }
+    }
+
+    async function handleImageInference(formData) {
+        loading.classList.remove('hidden');
+        videoProgressContainer.classList.add('hidden');
+        
+        try {
+            const resp = await fetch('/inference', { method: 'POST', body: formData });
+            const data = await resp.json();
+            if (data.status === 'success') {
+                resultImage.src = data.image;
+                resultCount.innerText = `${data.count} Detections`;
+                resultSection.classList.remove('hidden');
+                resultSection.scrollIntoView({ behavior: 'smooth' });
+            } else {
+                throw new Error(data.detail);
+            }
+        } catch (err) {
+            showToast(err.message, 'error');
+        } finally {
+            progressCard.classList.add('hidden');
+        }
+    }
+
+    async function handleVideoInference(formData) {
+        loading.classList.add('hidden');
+        videoProgressContainer.classList.remove('hidden');
+        videoProgressBar.style.width = '0%';
+        videoPercentage.innerText = '0%';
+        videoStatusMsg.innerText = 'Uploading video...';
+
+        try {
+            const resp = await fetch('/inference-video', { method: 'POST', body: formData });
+            const data = await resp.json();
+            if (data.status === 'success') {
+                videoStatusMsg.innerText = 'Processing frames...';
+                pollVideoProgress(data.task_id);
+            } else {
+                throw new Error(data.detail);
+            }
+        } catch (err) {
+            showToast(err.message, 'error');
+            progressCard.classList.add('hidden');
+        }
+    }
+
+    function pollVideoProgress(taskId) {
+        const interval = setInterval(async () => {
+            try {
+                const resp = await fetch(`/video-progress/${taskId}`);
+                const data = await resp.json();
+
+                if (data.status === 'processing') {
+                    videoProgressBar.style.width = `${data.progress}%`;
+                    videoPercentage.innerText = `${data.progress}%`;
+                } else if (data.status === 'completed') {
+                    clearInterval(interval);
+                    videoProgressBar.style.width = '100%';
+                    videoPercentage.innerText = '100%';
+                    videoStatusMsg.innerText = 'Processing complete!';
+                    
+                    showVideoResult(taskId);
+                } else if (data.status === 'error') {
+                    clearInterval(interval);
+                    showToast(data.message, 'error');
+                    progressCard.classList.add('hidden');
+                }
+            } catch (err) {
+                console.error(err);
+            }
+        }, 1000);
+    }
+
+    function showVideoResult(taskId) {
+        const url = `/video-result/${taskId}`;
+        resultVideo.src = url;
+        videoDownloadBtn.href = url;
+        videoResultSection.classList.remove('hidden');
+        videoResultSection.scrollIntoView({ behavior: 'smooth' });
+        progressCard.classList.add('hidden');
+    }
+
+    function showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        Object.assign(toast.style, {
+            position: 'fixed', bottom: '20px', right: '20px', padding: '1rem 1.5rem',
+            borderRadius: '10px', color: 'white', zIndex: '1000',
+            background: type === 'error' ? '#ef4444' : '#10b981',
+            boxShadow: '0 4px 15px rgba(0,0,0,0.3)', animation: 'slideIn 0.3s ease forwards'
+        });
+        toast.innerText = message;
+        document.body.appendChild(toast);
+        setTimeout(() => {
+            toast.style.animation = 'slideOut 0.3s ease forwards';
+            setTimeout(() => toast.remove(), 300);
+        }, 3000);
+    }
+});

static/style.css

@@ -0,0 +1,479 @@
+:root {
+    --primary: #4f46e5;
+    --primary-hover: #4338ca;
+    --bg-dark: #0f172a;
+    --card-bg: rgba(30, 41, 59, 0.7);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --accent: #06b6d4;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --error: #ef4444;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit', sans-serif;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    overflow-x: hidden;
+}
+
+.background-blob {
+    position: fixed;
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, rgba(0,0,0,0) 70%);
+    top: -200px;
+    left: -200px;
+    z-index: -1;
+    animation: pulse 10s infinite alternate;
+}
+
+.blob-2 {
+    top: auto;
+    left: auto;
+    bottom: -200px;
+    right: -200px;
+    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(0,0,0,0) 70%);
+}
+
+@keyframes pulse {
+    from { transform: scale(1); opacity: 0.5; }
+    to { transform: scale(1.2); opacity: 0.8; }
+}
+
+.container {
+    width: 100%;
+    max-width: 900px;
+    padding: 2rem;
+    position: relative;
+    z-index: 1;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.logo i {
+    font-size: 2.5rem;
+    color: var(--accent);
+    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.5));
+}
+
+.logo h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+
+.logo span {
+    color: var(--primary);
+}
+
+.subtitle {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+}
+
+.card {
+    background: var(--card-bg);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.glass {
+    backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.card:hover {
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.card-header i {
+    color: var(--accent);
+    font-size: 1.2rem;
+}
+
+.card-header h2 {
+    font-size: 1.3rem;
+    font-weight: 600;
+}
+
+.upload-zone {
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 15px;
+    padding: 2.5rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.upload-zone:hover, .upload-zone.dragover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--primary);
+}
+
+.upload-icon {
+    font-size: 2.5rem;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    transition: color 0.3s ease;
+}
+
+.upload-zone:hover .upload-icon {
+    color: var(--primary);
+}
+
+.upload-zone span {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.status-badge {
+    margin-top: 1rem;
+    padding: 0.6rem 1rem;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--error);
+    font-size: 0.95rem;
+}
+
+.status-badge.loaded {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--success);
+}
+
+/* Redesigned Preview Area */
+.preview-area {
+    width: 100%;
+    min-height: 300px;
+    background: radial-gradient(circle, #1e293b 0%, #000 100%);
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 20px rgba(79, 70, 229, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+#canvas-wrapper {
+    position: relative;
+    max-width: 100%;
+}
+
+#roi-canvas {
+    display: block;
+    max-width: 100%;
+    cursor: crosshair;
+}
+
+.hint-badge {
+    margin-left: auto;
+    font-size: 0.8rem;
+    background: var(--warning);
+    color: #000;
+    padding: 0.2rem 0.6rem;
+    border-radius: 20px;
+    font-weight: 600;
+}
+
+/* Settings Panel */
+.settings-panel {
+    background: rgba(0,0,0,0.2);
+    padding: 1.2rem;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+
+@media (max-width: 600px) {
+    .settings-panel { grid-template-columns: 1fr; }
+}
+
+.setting-item label {
+    display: block;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 0.8rem;
+}
+
+.setting-item.double-slider {
+    grid-column: 1 / -1;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1rem;
+    border-radius: 12px;
+}
+
+.slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.slider-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.slider-label {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    min-width: 40px;
+}
+
+.roi-controls {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+}
+
+.label-with-toggle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.8rem;
+}
+
+.btn-text {
+    background: none;
+    border: none;
+    color: var(--accent);
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 0;
+    transition: opacity 0.2s;
+}
+
+.btn-text:hover { opacity: 0.8; }
+
+.roi-inputs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+
+.roi-group {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 0.8rem;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.group-label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--accent);
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05rem;
+}
+
+.coord-inputs {
+    display: flex;
+    gap: 0.8rem;
+}
+
+.coord-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.coord-input span {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+}
+
+.coord-input input {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.5rem;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 0.95rem;
+    transition: border-color 0.2s;
+}
+
+.coord-input input:focus {
+    border-color: var(--primary);
+    outline: none;
+}
+
+/* Enhancing inputs */
+input[type="range"] {
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+    appearance: none;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    background: var(--primary);
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);
+}
+
+/* Actions */
+.action-bar {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: 0.8rem 2rem;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    font-size: 1rem;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.main-action {
+    width: 100%;
+    justify-content: center;
+    font-size: 1.1rem;
+    padding: 1rem;
+}
+
+/* Spinner & Progress */
+.spinner-container {
+    text-align: center;
+    padding: 2rem;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-top: 4px solid var(--accent);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.progress-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.8rem;
+    font-size: 0.95rem;
+}
+
+.progress-bar-bg {
+    background: rgba(255, 255, 255, 0.1);
+    height: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), var(--accent));
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+/* Results */
+.result-viewer {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.result-viewer img, .result-viewer video {
+    width: 100%;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.badge {
+    margin-left: auto;
+    background: var(--success);
+    color: white;
+    padding: 0.25rem 0.8rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.hidden { display: none !important; }
+
+/* Toast */
+@keyframes slideIn {
+    from { transform: translateX(100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideOut {
+    from { transform: translateX(0); opacity: 1; }
+    to { transform: translateX(100%); opacity: 0; }
+}

templates/index.html

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inference Studio | AI Vision Explorer</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+    <div class="background-blob"></div>
+    <div class="background-blob blob-2"></div>
+    
+    <div class="container">
+        <header>
+            <div class="logo">
+                <i class="fas fa-brain"></i>
+                <h1>Inference<span>Studio</span></h1>
+            </div>
+            <p class="subtitle">Deploy and test your vision models in seconds</p>
+        </header>
+
+        <main>
+            <!-- Model Section -->
+            <section class="card glass" id="model-section">
+                <div class="card-header">
+                    <i class="fas fa-microchip"></i>
+                    <h2>Model Management</h2>
+                </div>
+                <input type="file" id="model-input" accept=".pt" hidden>
+                <div class="upload-zone" id="model-drop-zone">
+                    <div class="upload-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                    <p>Drag & drop your <strong>YOLO .pt</strong> model</p>
+                    <span>or click to browse files</span>
+                </div>
+                <div id="model-status" class="status-badge {% if model_loaded %}loaded{% endif %}">
+                    <i class="fas {% if model_loaded %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i>
+                    <span id="status-text">{% if model_loaded %}Model: {{ model_name }}{% else %}No model loaded{% endif %}</span>
+                </div>
+            </section>
+
+            <!-- Media Upload Section -->
+            <section class="card glass" id="upload-section">
+                <div class="card-header">
+                    <i class="fas fa-file-import"></i>
+                    <h2>Step 1: Upload Media</h2>
+                </div>
+                <input type="file" id="media-input" accept="image/*,video/*" hidden>
+                <div class="upload-zone" id="media-drop-zone">
+                    <div class="upload-icon">
+                        <i class="fas fa-photo-video"></i>
+                    </div>
+                    <p>Drag & drop <strong>Image</strong> or <strong>Video</strong></p>
+                    <span>JPG, PNG, MP4, AVI, MOV supported</span>
+                </div>
+            </section>
+
+            <!-- Preview & ROI Section -->
+            <section class="card glass hidden" id="preview-section">
+                <div class="card-header">
+                    <i class="fas fa-crosshairs"></i>
+                    <h2>Step 2: Configure & Draw ROI</h2>
+                    <span class="hint-badge">Click & Drag on Preview</span>
+                </div>
+                
+                <div class="preview-area">
+                    <div id="canvas-wrapper">
+                        <canvas id="roi-canvas"></canvas>
+                    </div>
+                </div>
+
+                <div class="settings-panel">
+                    <div class="setting-item double-slider">
+                        <label>Confidence Range: <span id="conf-range-val">25% - 100%</span></label>
+                        <div class="slider-group">
+                            <div class="slider-row">
+                                <span class="slider-label">Min:</span>
+                                <input type="range" id="threshold-input" min="0.01" max="1.0" step="0.01" value="0.25">
+                            </div>
+                            <div class="slider-row">
+                                <span class="slider-label">Max:</span>
+                                <input type="range" id="conf-max-input" min="0.01" max="1.0" step="0.01" value="1.0">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="roi-controls">
+                        <div class="label-with-toggle">
+                            <label>ROI Boundary (%)</label>
+                            <button id="reset-roi-btn" class="btn-text">
+                                <i class="fas fa-undo"></i> Reset
+                            </button>
+                        </div>
+                        <div class="roi-inputs">
+                            <div class="roi-group">
+                                <span class="group-label">Top-Left</span>
+                                <div class="coord-inputs">
+                                    <div class="coord-input">
+                                        <span>X1</span>
+                                        <input type="number" id="roi-x1" value="0">
+                                    </div>
+                                    <div class="coord-input">
+                                        <span>Y1</span>
+                                        <input type="number" id="roi-y1" value="0">
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="roi-group">
+                                <span class="group-label">Bottom-Right</span>
+                                <div class="coord-inputs">
+                                    <div class="coord-input">
+                                        <span>X2</span>
+                                        <input type="number" id="roi-x2" value="100">
+                                    </div>
+                                    <div class="coord-input">
+                                        <span>Y2</span>
+                                        <input type="number" id="roi-y2" value="100">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="action-bar">
+                    <button id="analyze-btn" class="btn-primary main-action">
+                        <i class="fas fa-play"></i> Start Inference
+                    </button>
+                </div>
+            </section>
+
+            <!-- Progress Card -->
+            <section class="card glass hidden" id="progress-card">
+                <div id="loading" class="spinner-container">
+                    <div class="spinner"></div>
+                    <p>Running Vision AI Inference...</p>
+                </div>
+                
+                <div id="video-progress-container" class="hidden">
+                    <div class="progress-info">
+                        <span id="video-status-msg">Processing video...</span>
+                        <span id="video-percentage">0%</span>
+                    </div>
+                    <div class="progress-bar-bg">
+                        <div id="video-progress-bar" class="progress-bar-fill"></div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Results Section -->
+            <section class="card glass result-card hidden" id="video-result-section">
+                <div class="card-header">
+                    <i class="fas fa-video"></i>
+                    <h2>Video Results</h2>
+                </div>
+                <div class="result-viewer">
+                    <video id="result-video" controls></video>
+                    <div class="action-bar">
+                        <a id="video-download-btn" class="btn-primary" download>
+                            <i class="fas fa-download"></i> Download Video
+                        </a>
+                    </div>
+                </div>
+            </section>
+
+            <section class="card glass result-card hidden" id="result-section">
+                <div class="card-header">
+                    <i class="fas fa-poll"></i>
+                    <h2>Detection Summary</h2>
+                    <span id="result-count" class="badge">0 Detections</span>
+                </div>
+                <div class="result-viewer">
+                    <img id="result-image" src="" alt="Results">
+                    <div class="action-bar">
+                        <button id="download-btn" class="btn-primary">
+                            <i class="fas fa-download"></i> Save Image
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>