Upload 24 files

Dockerfile

@@ -0,0 +1,28 @@
+FROM python:3.9-slim
+
+# Install system dependencies required for OpenCV
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+# Copy the requirements file and install dependencies
+COPY --chown=user requirements_web.txt .
+RUN pip install --no-cache-dir -r requirements_web.txt gunicorn
+
+# Copy the rest of the application
+COPY --chown=user . .
+
+# Expose port 7860 (Hugging Face Spaces default port)
+EXPOSE 7860
+
+# Command to run the Flask application using Gunicorn
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "--timeout", "120", "--workers", "1", "--threads", "2", "app:app"]

api/predict.py

@@ -0,0 +1,98 @@
+import os
+import sys
+import time
+import tempfile
+import uuid
+
+import torch
+import numpy as np
+from flask import Blueprint, request, jsonify, current_app
+
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from config import config
+from utils.video_utils import load_video_frames, normalize_frames, validate_video
+
+predict_bp = Blueprint("predict", __name__)
+
+ALLOWED_EXTENSIONS = {".mp4", ".avi", ".mkv", ".mov", ".webm"}
+
+
+def _allowed_file(filename: str) -> bool:
+    return os.path.splitext(filename.lower())[1] in ALLOWED_EXTENSIONS
+
+
+@predict_bp.route("/predict", methods=["POST"])
+def predict():
+    # ── Validate upload ───────────────────────────────────────────────────────
+    if "video" not in request.files:
+        return jsonify({"error": "No video file provided"}), 400
+
+    file = request.files["video"]
+    if file.filename == "":
+        return jsonify({"error": "Empty filename"}), 400
+
+    if not _allowed_file(file.filename):
+        exts = ", ".join(ALLOWED_EXTENSIONS)
+        return jsonify({"error": f"Unsupported format. Allowed: {exts}"}), 415
+
+    # ── Save to temp path ─────────────────────────────────────────────────────
+    suffix = os.path.splitext(file.filename)[1]
+    tmp_path = os.path.join(tempfile.gettempdir(), f"aivd_{uuid.uuid4().hex}{suffix}")
+    try:
+        file.save(tmp_path)
+    except Exception as e:
+        return jsonify({"error": f"Could not save file: {e}"}), 500
+
+    # ── Inference ─────────────────────────────────────────────────────────────
+    t_start = time.time()
+    try:
+        model = current_app.model
+        device = current_app.device
+
+        if not validate_video(tmp_path):
+            return jsonify({"error": "Invalid or corrupted video file"}), 422
+
+        frames = load_video_frames(
+            tmp_path,
+            num_frames=config.FRAMES_PER_VIDEO,
+            frame_size=(config.FRAME_HEIGHT, config.FRAME_WIDTH),
+            frame_skip=config.FRAME_SKIP,
+        )
+        if frames is None:
+            return jsonify({"error": "Could not extract frames from video"}), 422
+
+        frames = normalize_frames(frames)
+
+        frames_tensor = torch.from_numpy(frames).float()
+        frames_tensor = frames_tensor.permute(0, 3, 1, 2)   # (T, 3, H, W)
+        frames_tensor = frames_tensor.unsqueeze(0)            # (1, T, 3, H, W)
+        frames_tensor = frames_tensor.to(device)
+
+        with torch.no_grad():
+            output = model(frames_tensor)
+            prob = torch.sigmoid(output).item()
+
+        threshold = config.PREDICTION_THRESHOLD
+        is_ai = prob > threshold
+        verdict = "AI GENERATED" if is_ai else "REAL VIDEO"
+        confidence = prob if is_ai else (1.0 - prob)
+        elapsed = round(time.time() - t_start, 2)
+
+        return jsonify({
+            "verdict": verdict,
+            "is_ai": is_ai,
+            "probability": round(prob, 6),
+            "confidence": round(confidence * 100, 2),
+            "processing_time": elapsed,
+            "threshold": threshold,
+        })
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+    finally:
+        try:
+            os.remove(tmp_path)
+        except OSError:
+            pass

app.py

@@ -0,0 +1,63 @@
+import os
+import sys
+import torch
+from flask import Flask, send_from_directory, jsonify
+from flask_cors import CORS
+
+# ── Project root on sys.path so existing modules resolve ──────────────────────
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+from config import config
+from models.model import ResNetLSTM
+
+# ── Flask setup ───────────────────────────────────────────────────────────────
+app = Flask(__name__, static_folder="static", static_url_path="")
+CORS(app)
+
+# ── Load model once at startup ────────────────────────────────────────────────
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+model = ResNetLSTM()
+
+_model_path = os.path.join(
+    os.path.dirname(os.path.abspath(__file__)),
+    "models", "checkpoints", "last_checkpoint.pth"
+)
+
+print(f"[startup] Loading model from {_model_path} …")
+_checkpoint = torch.load(_model_path, map_location=device, weights_only=False)
+if "model_state_dict" in _checkpoint:
+    model.load_state_dict(_checkpoint["model_state_dict"])
+else:
+    model.load_state_dict(_checkpoint)
+model.to(device)
+model.eval()
+print(f"[startup] Model ready on {device}")
+
+# ── Attach model / device to app context so blueprints can use them ───────────
+app.model = model
+app.device = device
+
+# ── Register API blueprint ────────────────────────────────────────────────────
+from api.predict import predict_bp
+app.register_blueprint(predict_bp, url_prefix="/api")
+
+# ── Serve SPA ─────────────────────────────────────────────────────────────────
+@app.route("/", defaults={"path": ""})
+@app.route("/<path:path>")
+def serve(path):
+    if path and os.path.exists(os.path.join(app.static_folder, path)):
+        return send_from_directory(app.static_folder, path)
+    return send_from_directory(app.static_folder, "index.html")
+
+
+@app.route("/api/status")
+def status():
+    return jsonify({
+        "status": "ok",
+        "device": str(device),
+        "threshold": config.PREDICTION_THRESHOLD,
+    })
+
+
+if __name__ == "__main__":
+    app.run(debug=False, host="0.0.0.0", port=5000)

config/config.py

@@ -0,0 +1,23 @@
+
+import os
+
+# Paths
+# Paths
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+DATASET_DIR = os.path.join(BASE_DIR, 'dataset')
+AI_VIDEO_DIR = os.path.join(DATASET_DIR, 'ai')
+REAL_VIDEO_DIR = os.path.join(DATASET_DIR, 'real')
+
+# Data config
+FRAMES_PER_VIDEO = 30  # Increased to capture more temporal info, or keep small if memory constraint
+FRAME_HEIGHT = 224
+FRAME_WIDTH = 224
+FRAME_SKIP = 5 # Sample every 5th frame to cover more time
+
+# Training config
+BATCH_SIZE = 4 # Reduced to avoid OOM
+LEARNING_RATE = 1e-4
+NUM_EPOCHS = 20
+
+# Inference config
+PREDICTION_THRESHOLD = 0.4539

models/checkpoints/best_model.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fd0eee56178feb1ebc326021d0df92d3116ee6e9d33069282a1a6d5c0fbcbfb6
+size 50047564

models/checkpoints/last_checkpoint.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3da65722ae81b846e9aba0c33a79b7e475a78388cb30cf0d143bca226ca4682
+size 150042045

models/model.py

@@ -0,0 +1,64 @@
+
+import torch
+import torch.nn as nn
+import torchvision.models as models
+
+class ResNetLSTM(nn.Module):
+    def __init__(self, num_classes=1, hidden_size=256, num_layers=2):
+        super(ResNetLSTM, self).__init__()
+        
+        # Load Pretrained ResNet
+        resnet = models.resnet18(pretrained=True)
+        
+        # Remove last fully connected layer
+        # ResNet18 fc input size is 512
+        modules = list(resnet.children())[:-1] 
+        self.resnet = nn.Sequential(*modules)
+        
+        # Freeze ResNet params (Optional: unfreeze later or partial unfreeze)
+        # For now, let's fine-tune all or freeze? 
+        # Fine-tuning is usually better if we have enough data. 
+        # User has ~4k videos, which is decent. Let's NOT freeze.
+        
+        self.lstm = nn.LSTM(
+            input_size=512, 
+            hidden_size=hidden_size, 
+            num_layers=num_layers, 
+            batch_first=True,
+            dropout=0.5
+        )
+        
+        self.fc = nn.Linear(hidden_size, num_classes)
+        self.sigmoid = nn.Sigmoid() # For binary classification logic if needed manually, but we use BCEWithLogitsLoss
+        
+    def forward(self, x):
+        # x shape: (Batch, Frames, Channels, Height, Width)
+        # Example: (B, 30, 3, 224, 224)
+        
+        b, t, c, h, w = x.size()
+        
+        # Flatten batch and frames for CNN processing
+        # (B*T, 3, 224, 224)
+        c_in = x.view(b * t, c, h, w)
+        
+        # CNN Feature Extraction
+        # Output: (B*T, 512, 1, 1) -> squeeze -> (B*T, 512)
+        features = self.resnet(c_in)
+        features = features.view(features.size(0), -1) 
+        
+        # Reshape back to (B, T, Features)
+        r_in = features.view(b, t, -1)
+        
+        # LSTM Temporal processing
+        # Output: (B, T, Hidden)
+        # hidden/cell: (Layers, B, Hidden)
+        lstm_out, _ = self.lstm(r_in)
+        
+        # Take the output from the last time step
+        # (B, Hidden)
+        last_out = lstm_out[:, -1, :]
+        
+        # Classification
+        out = self.fc(last_out)
+        
+        return out

requirements_web.txt

@@ -0,0 +1,6 @@
+flask>=2.3
+flask-cors>=4.0
+torch
+torchvision
+opencv-python
+numpy

static/css/style.css

@@ -0,0 +1,691 @@
+/* ═══════════════════════════════════════════════════════════
+   AI VIDEO DETECTOR  –  Premium Dark UI
+   ═══════════════════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ── Reset & Base ─────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg-base:        #060912;
+  --bg-surface:     #0d1220;
+  --bg-card:        rgba(15, 22, 40, 0.85);
+  --bg-card-hover:  rgba(20, 30, 56, 0.92);
+
+  --accent-blue:    #4f8ef7;
+  --accent-cyan:    #00d4ff;
+  --accent-purple:  #a855f7;
+  --accent-green:   #22d3a0;
+  --accent-red:     #f44c6a;
+  --accent-orange:  #f97316;
+
+  --text-primary:   #e8edf8;
+  --text-secondary: #8892aa;
+  --text-muted:     #4a5568;
+
+  --border:         rgba(79, 142, 247, 0.18);
+  --border-glow:    rgba(0, 212, 255, 0.35);
+  --glass:          rgba(255, 255, 255, 0.04);
+
+  --radius-sm:  8px;
+  --radius-md:  14px;
+  --radius-lg:  20px;
+  --radius-xl:  28px;
+
+  --shadow-card: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
+  --shadow-glow: 0 0 40px rgba(79, 142, 247, 0.2);
+  --shadow-ai:   0 0 60px rgba(248, 71, 107, 0.25);
+  --shadow-real: 0 0 60px rgba(34, 211, 160, 0.25);
+
+  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+  line-height: 1.6;
+}
+
+/* ── Animated Background ──────────────────────────────────── */
+.bg-canvas {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.bg-canvas::before {
+  content: '';
+  position: absolute;
+  width: 700px; height: 700px;
+  top: -200px; left: -150px;
+  background: radial-gradient(circle, rgba(79,142,247,0.12) 0%, transparent 70%);
+  animation: driftA 18s ease-in-out infinite alternate;
+}
+.bg-canvas::after {
+  content: '';
+  position: absolute;
+  width: 600px; height: 600px;
+  bottom: -150px; right: -100px;
+  background: radial-gradient(circle, rgba(168,85,247,0.10) 0%, transparent 70%);
+  animation: driftB 22s ease-in-out infinite alternate;
+}
+.bg-orb {
+  position: absolute;
+  width: 400px; height: 400px;
+  top: 45%; left: 55%;
+  background: radial-gradient(circle, rgba(0,212,255,0.07) 0%, transparent 65%);
+  animation: driftC 14s ease-in-out infinite alternate;
+}
+
+@keyframes driftA { to { transform: translate(80px, 60px); } }
+@keyframes driftB { to { transform: translate(-70px, -50px); } }
+@keyframes driftC { to { transform: translate(-60px, 80px); } }
+
+/* ── Layout ───────────────────────────────────────────────── */
+.page-wrap {
+  position: relative;
+  z-index: 1;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px 80px;
+}
+
+/* ── Navbar ───────────────────────────────────────────────── */
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 0 20px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 0;
+}
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.nav-logo {
+  width: 38px; height: 38px;
+  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
+  border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px;
+  box-shadow: 0 0 20px rgba(79,142,247,0.4);
+}
+.nav-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--text-primary), var(--accent-cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.nav-badge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--accent-cyan);
+  border: 1px solid var(--accent-cyan);
+  border-radius: 20px;
+  padding: 2px 10px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  opacity: 0.8;
+}
+.nav-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+}
+.status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--accent-green);
+  box-shadow: 0 0 10px var(--accent-green);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+.status-dot.offline { background: var(--accent-red); box-shadow: 0 0 10px var(--accent-red); }
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(0.85); }
+}
+
+/* ── Hero ─────────────────────────────────────────────────── */
+.hero {
+  text-align: center;
+  padding: 52px 0 40px;
+  animation: fadeUp 0.7s ease both;
+}
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent-cyan);
+  background: rgba(0,212,255,0.08);
+  border: 1px solid rgba(0,212,255,0.2);
+  border-radius: 20px;
+  padding: 6px 16px;
+  margin-bottom: 24px;
+}
+.hero-title {
+  font-size: clamp(2.4rem, 5vw, 3.8rem);
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  margin-bottom: 18px;
+}
+.hero-title .gradient-text {
+  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 50%, var(--accent-purple) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.hero-sub {
+  font-size: 1.05rem;
+  color: var(--text-secondary);
+  max-width: 480px;
+  margin: 0 auto 0;
+  line-height: 1.7;
+}
+
+/* ── Main Detection Card ──────────────────────────────────── */
+.detector-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 40px;
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  animation: fadeUp 0.7s 0.15s ease both;
+}
+
+/* ── Upload Zone ──────────────────────────────────────────── */
+.upload-zone {
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-lg);
+  padding: 52px 32px;
+  text-align: center;
+  cursor: pointer;
+  transition: var(--transition);
+  background: rgba(255,255,255,0.02);
+  position: relative;
+  overflow: hidden;
+}
+.upload-zone::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(79,142,247,0.05), rgba(0,212,255,0.03));
+  opacity: 0;
+  transition: var(--transition);
+}
+.upload-zone:hover, .upload-zone.drag-over {
+  border-color: var(--accent-cyan);
+  box-shadow: 0 0 30px rgba(0,212,255,0.15), inset 0 0 30px rgba(0,212,255,0.05);
+  transform: translateY(-2px);
+}
+.upload-zone:hover::before, .upload-zone.drag-over::before { opacity: 1; }
+.upload-zone.drag-over {
+  border-color: var(--accent-blue);
+  animation: borderPulse 1s ease infinite;
+}
+@keyframes borderPulse {
+  0%, 100% { box-shadow: 0 0 20px rgba(79,142,247,0.25), inset 0 0 20px rgba(79,142,247,0.08); }
+  50%       { box-shadow: 0 0 40px rgba(79,142,247,0.45), inset 0 0 40px rgba(79,142,247,0.12); }
+}
+.upload-icon {
+  width: 64px; height: 64px;
+  margin: 0 auto 20px;
+  background: linear-gradient(135deg, rgba(79,142,247,0.15), rgba(0,212,255,0.1));
+  border-radius: 18px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px;
+  border: 1px solid rgba(79,142,247,0.25);
+  transition: var(--transition);
+}
+.upload-zone:hover .upload-icon {
+  background: linear-gradient(135deg, rgba(79,142,247,0.25), rgba(0,212,255,0.18));
+  transform: scale(1.08);
+  box-shadow: 0 0 24px rgba(0,212,255,0.3);
+}
+.upload-title {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+.upload-sub {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 24px;
+}
+.upload-formats {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.fmt-tag {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--accent-blue);
+  background: rgba(79,142,247,0.1);
+  border: 1px solid rgba(79,142,247,0.2);
+  border-radius: 6px;
+  padding: 3px 10px;
+  font-family: 'JetBrains Mono', monospace;
+}
+#file-input { display: none; }
+
+/* ── Video Preview ────────────────────────────────────────── */
+.preview-area {
+  display: none;
+  margin-top: 28px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: #000;
+  position: relative;
+}
+.preview-area.visible { display: block; animation: fadeUp 0.4s ease both; }
+#preview-video {
+  width: 100%;
+  max-height: 340px;
+  object-fit: contain;
+  display: block;
+}
+.preview-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: rgba(255,255,255,0.03);
+  border-top: 1px solid var(--border);
+}
+.preview-name {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60%;
+}
+.preview-meta {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  font-family: 'JetBrains Mono', monospace;
+}
+.preview-remove {
+  background: rgba(244,76,106,0.15);
+  border: 1px solid rgba(244,76,106,0.3);
+  color: var(--accent-red);
+  border-radius: 6px;
+  padding: 4px 12px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+}
+.preview-remove:hover {
+  background: rgba(244,76,106,0.28);
+  box-shadow: 0 0 14px rgba(244,76,106,0.25);
+}
+
+/* ── Analyze Button ───────────────────────────────────────── */
+.btn-analyze {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  margin-top: 28px;
+  padding: 17px 32px;
+  font-size: 1rem;
+  font-weight: 700;
+  font-family: 'Inter', sans-serif;
+  letter-spacing: -0.01em;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(79,142,247,0.35);
+}
+.btn-analyze::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
+  opacity: 0;
+  transition: var(--transition);
+}
+.btn-analyze:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 36px rgba(79,142,247,0.5);
+}
+.btn-analyze:hover:not(:disabled)::before { opacity: 1; }
+.btn-analyze:active:not(:disabled) { transform: translateY(0); }
+.btn-analyze:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-spinner {
+  width: 18px; height: 18px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  display: none;
+}
+.btn-analyze.loading .btn-spinner { display: block; }
+.btn-analyze.loading .btn-label { opacity: 0.7; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── Progress Bar ─────────────────────────────────────────── */
+.progress-wrap {
+  margin-top: 22px;
+  display: none;
+}
+.progress-wrap.visible { display: block; animation: fadeUp 0.3s ease both; }
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+.progress-bar-track {
+  height: 5px;
+  background: rgba(255,255,255,0.06);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
+  border-radius: 999px;
+  width: 0%;
+  transition: width 0.4s ease;
+  box-shadow: 0 0 12px rgba(0,212,255,0.5);
+}
+.progress-steps {
+  display: flex;
+  gap: 6px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+.pstep {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  background: rgba(255,255,255,0.04);
+  border-radius: 20px;
+  padding: 3px 10px;
+  transition: var(--transition);
+}
+.pstep.active {
+  color: var(--accent-cyan);
+  background: rgba(0,212,255,0.1);
+  box-shadow: 0 0 12px rgba(0,212,255,0.2);
+}
+.pstep.done {
+  color: var(--accent-green);
+  background: rgba(34,211,160,0.1);
+}
+
+/* ── Results Panel ────────────────────────────────────────── */
+.results-panel {
+  display: none;
+  margin-top: 32px;
+}
+.results-panel.visible { display: block; animation: fadeUp 0.5s ease both; }
+
+.result-card {
+  border-radius: var(--radius-lg);
+  padding: 36px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+}
+.result-card.ai-result {
+  border-color: rgba(244,76,106,0.35);
+  box-shadow: var(--shadow-ai);
+}
+.result-card.real-result {
+  border-color: rgba(34,211,160,0.35);
+  box-shadow: var(--shadow-real);
+}
+
+.result-layout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 36px;
+  align-items: center;
+}
+
+/* Gauge */
+.gauge-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.gauge-svg { width: 160px; height: 160px; }
+.gauge-track {
+  fill: none;
+  stroke: rgba(255,255,255,0.06);
+  stroke-width: 12;
+}
+.gauge-fill {
+  fill: none;
+  stroke-width: 12;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
+}
+.gauge-fill.ai-fill   { stroke: url(#gaugeGradAI); }
+.gauge-fill.real-fill { stroke: url(#gaugeGradReal); }
+.gauge-center {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 1.3rem;
+  font-weight: 700;
+  fill: var(--text-primary);
+}
+.gauge-label-svg {
+  font-size: 0.6rem;
+  fill: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Verdict Info */
+.verdict-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 22px;
+  border-radius: var(--radius-md);
+  font-size: 1.2rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 18px;
+  border: 1px solid;
+}
+.verdict-badge.ai-badge {
+  color: var(--accent-red);
+  background: rgba(244,76,106,0.1);
+  border-color: rgba(244,76,106,0.3);
+}
+.verdict-badge.real-badge {
+  color: var(--accent-green);
+  background: rgba(34,211,160,0.1);
+  border-color: rgba(34,211,160,0.3);
+}
+.verdict-icon { font-size: 1.5rem; }
+
+.result-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+  margin-bottom: 18px;
+}
+.metric-item {
+  background: rgba(255,255,255,0.03);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+}
+.metric-label {
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 6px;
+}
+.metric-value {
+  font-size: 1.05rem;
+  font-weight: 700;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--text-primary);
+}
+.metric-value.green { color: var(--accent-green); }
+.metric-value.red   { color: var(--accent-red); }
+.metric-value.blue  { color: var(--accent-blue); }
+
+.result-desc {
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+  line-height: 1.65;
+  padding: 14px;
+  background: rgba(255,255,255,0.025);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid;
+}
+.result-desc.ai  { border-color: var(--accent-red); }
+.result-desc.real{ border-color: var(--accent-green); }
+
+.btn-reset {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  padding: 10px 22px;
+  font-size: 0.87rem;
+  font-weight: 600;
+  font-family: 'Inter', sans-serif;
+  color: var(--text-secondary);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition);
+}
+.btn-reset:hover {
+  color: var(--text-primary);
+  background: rgba(255,255,255,0.09);
+  border-color: rgba(255,255,255,0.2);
+}
+
+
+/* ── Footer ───────────────────────────────────────────────── */
+footer {
+  margin-top: 64px;
+  padding-top: 28px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.footer-brand {
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+/* ── Toast Notifications ──────────────────────────────────── */
+.toast-container {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  border-radius: var(--radius-md);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  font-size: 0.87rem;
+  font-weight: 500;
+  max-width: 360px;
+  animation: slideInRight 0.3s ease;
+  border: 1px solid;
+}
+.toast.error {
+  background: rgba(244,76,106,0.15);
+  border-color: rgba(244,76,106,0.35);
+  color: #ffaab8;
+}
+.toast.success {
+  background: rgba(34,211,160,0.12);
+  border-color: rgba(34,211,160,0.3);
+  color: #7fffd4;
+}
+.toast.info {
+  background: rgba(79,142,247,0.12);
+  border-color: rgba(79,142,247,0.3);
+  color: #aaccff;
+}
+.toast-icon { font-size: 1.1rem; }
+.toast-exit { animation: slideOutRight 0.3s ease forwards; }
+@keyframes slideInRight {
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+@keyframes slideOutRight {
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+}
+
+/* ── Animations ───────────────────────────────────────────── */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Responsive ───────────────────────────────────────────── */
+@media (max-width: 700px) {
+  .detector-card { padding: 24px 18px; }
+  .result-layout { grid-template-columns: 1fr; }
+  .gauge-wrap { margin: 0 auto; }
+  .result-metrics { grid-template-columns: 1fr 1fr; }
+  .navbar { flex-direction: column; align-items: flex-start; gap: 14px; }
+}
+@media (max-width: 480px) {
+  .page-wrap { padding: 0 14px 60px; }
+  .result-metrics { grid-template-columns: 1fr; }
+}

static/index.html

@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Video Detector – Instant Video Authenticity Check</title>
+  <meta name="description" content="Instantly detect whether a video is AI-generated or real. Upload and get your result in seconds." />
+  <link rel="stylesheet" href="/css/style.css?v=3" />
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔍</text></svg>" />
+</head>
+<body>
+
+<!-- Animated background -->
+<div class="bg-canvas" aria-hidden="true">
+  <div class="bg-orb"></div>
+</div>
+
+<!-- Toast container -->
+<div class="toast-container" id="toast-container" aria-live="polite"></div>
+
+<!-- SVG Gradient Defs (hidden) -->
+<svg width="0" height="0" style="position:absolute">
+  <defs>
+    <linearGradient id="gaugeGradAI" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%"   stop-color="#f44c6a"/>
+      <stop offset="100%" stop-color="#f97316"/>
+    </linearGradient>
+    <linearGradient id="gaugeGradReal" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%"   stop-color="#22d3a0"/>
+      <stop offset="100%" stop-color="#4f8ef7"/>
+    </linearGradient>
+  </defs>
+</svg>
+
+<div class="page-wrap">
+
+  <!-- ── Navbar ──────────────────────────────────────────────── -->
+  <nav class="navbar" role="navigation" aria-label="Main navigation">
+    <div class="nav-brand">
+      <div class="nav-logo" aria-hidden="true">🔍</div>
+      <span class="nav-title">AI Video Detector</span>
+    </div>
+    <div class="nav-status" id="nav-status" aria-live="polite">
+      <div class="status-dot offline" id="status-dot"></div>
+      <span id="status-text">Connecting…</span>
+    </div>
+  </nav>
+
+  <!-- ── Hero ────────────────────────────────────────────────── -->
+  <header class="hero" role="banner">
+    <h1 class="hero-title">
+      Is this video <span class="gradient-text">AI Generated?</span>
+    </h1>
+    <p class="hero-sub">
+      Upload any video and get an instant authenticity verdict.
+      Powered by deep learning — no sign-up required.
+    </p>
+  </header>
+
+  <!-- ── Detector Card ────────────────────────────────────────── -->
+  <main class="detector-card" id="detector-main" role="main" aria-label="Video detection interface">
+
+    <!-- Upload Zone -->
+    <div
+      class="upload-zone"
+      id="upload-zone"
+      role="button"
+      tabindex="0"
+      aria-label="Upload video file. Click or drag and drop."
+      aria-dropeffect="copy"
+    >
+      <div class="upload-icon" aria-hidden="true">🎬</div>
+      <p class="upload-title">Drop your video here</p>
+      <p class="upload-sub">or click to browse files</p>
+      <div class="upload-formats" aria-label="Supported formats">
+        <span class="fmt-tag">.MP4</span>
+        <span class="fmt-tag">.AVI</span>
+        <span class="fmt-tag">.MKV</span>
+        <span class="fmt-tag">.MOV</span>
+        <span class="fmt-tag">.WEBM</span>
+      </div>
+    </div>
+
+    <input
+      type="file"
+      id="file-input"
+      accept=".mp4,.avi,.mkv,.mov,.webm,video/*"
+      aria-label="Select video file"
+    />
+
+    <!-- Video Preview -->
+    <div class="preview-area" id="preview-area" aria-label="Video preview">
+      <video id="preview-video" controls preload="metadata" aria-label="Preview of uploaded video"></video>
+      <div class="preview-info">
+        <span class="preview-name" id="preview-name"></span>
+        <span class="preview-meta" id="preview-meta"></span>
+        <button class="preview-remove" id="btn-remove" aria-label="Remove selected video">✕ Remove</button>
+      </div>
+    </div>
+
+    <!-- Analyze Button -->
+    <button
+      class="btn-analyze"
+      id="btn-analyze"
+      disabled
+      aria-label="Analyze video for AI generation"
+      aria-busy="false"
+    >
+      <div class="btn-spinner" aria-hidden="true"></div>
+      <span class="btn-label">⚡ Analyze Video</span>
+    </button>
+
+    <!-- Progress -->
+    <div class="progress-wrap" id="progress-wrap" aria-label="Analysis progress" aria-live="polite">
+      <div class="progress-header">
+        <span id="progress-label">Analyzing…</span>
+        <span id="progress-pct">0%</span>
+      </div>
+      <div class="progress-bar-track" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Analysis progress">
+        <div class="progress-bar-fill" id="progress-bar"></div>
+      </div>
+      <div class="progress-steps">
+        <span class="pstep" id="ps-upload">📤 Uploading</span>
+        <span class="pstep" id="ps-extract">🎞️ Reading Video</span>
+        <span class="pstep" id="ps-cnn">🧠 Analyzing</span>
+        <span class="pstep" id="ps-lstm">⏱️ Processing</span>
+        <span class="pstep" id="ps-verdict">⚖️ Verdict</span>
+      </div>
+    </div>
+
+    <!-- Results Panel -->
+    <section class="results-panel" id="results-panel" aria-label="Analysis results" aria-live="polite">
+      <div class="result-card" id="result-card">
+        <div class="result-layout">
+
+          <!-- Gauge -->
+          <div class="gauge-wrap" aria-hidden="true">
+            <svg class="gauge-svg" viewBox="0 0 160 160" id="gauge-svg">
+              <circle class="gauge-track" cx="80" cy="80" r="64"
+                stroke-dasharray="330" stroke-dashoffset="0"
+                transform="rotate(-230 80 80)" />
+              <circle class="gauge-fill" id="gauge-fill"
+                cx="80" cy="80" r="64"
+                stroke-dasharray="330" stroke-dashoffset="330"
+                transform="rotate(-230 80 80)" />
+              <text class="gauge-center" id="gauge-pct-text"
+                x="80" y="75" text-anchor="middle" dominant-baseline="middle">--</text>
+              <text class="gauge-label-svg"
+                x="80" y="95" text-anchor="middle" dominant-baseline="middle">Confidence</text>
+            </svg>
+          </div>
+
+          <!-- Info -->
+          <div class="result-info">
+            <div class="verdict-badge" id="verdict-badge" role="status" aria-live="polite">
+              <span class="verdict-icon" id="verdict-icon"></span>
+              <span id="verdict-text"></span>
+            </div>
+
+            <div class="result-metrics" role="list">
+              <div class="metric-item" role="listitem">
+                <div class="metric-label">Confidence Score</div>
+                <div class="metric-value" id="m-conf"></div>
+              </div>
+              <div class="metric-item" role="listitem">
+                <div class="metric-label">AI Probability</div>
+                <div class="metric-value" id="m-prob"></div>
+              </div>
+              <div class="metric-item" role="listitem">
+                <div class="metric-label">Processing Time</div>
+                <div class="metric-value blue" id="m-time"></div>
+              </div>
+              <div class="metric-item" role="listitem">
+                <div class="metric-label">Result</div>
+                <div class="metric-value" id="m-thresh"></div>
+              </div>
+            </div>
+
+            <p class="result-desc" id="result-desc" role="note"></p>
+
+            <button class="btn-reset" id="btn-reset" aria-label="Analyze another video">
+              ↩ Check Another Video
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <!-- ── Footer ───────────────────────────────────────────────── -->
+  <footer role="contentinfo">
+    <span class="footer-brand">AI Video Detector</span>
+    <span>© 2025 · All rights reserved</span>
+  </footer>
+
+</div><!-- /page-wrap -->
+
+<script src="/js/app.js?v=3"></script>
+</body>
+</html>

static/js/app.js

@@ -0,0 +1,349 @@
+/**
+ * AI Video Detector – Frontend Application
+ * Handles: drag-drop upload, video preview, API call, animated gauge, results
+ */
+
+"use strict";
+
+// ── DOM References ────────────────────────────────────────────────────────────
+const uploadZone   = document.getElementById("upload-zone");
+const fileInput    = document.getElementById("file-input");
+const previewArea  = document.getElementById("preview-area");
+const previewVideo = document.getElementById("preview-video");
+const previewName  = document.getElementById("preview-name");
+const previewMeta  = document.getElementById("preview-meta");
+const btnRemove    = document.getElementById("btn-remove");
+const btnAnalyze   = document.getElementById("btn-analyze");
+const progressWrap = document.getElementById("progress-wrap");
+const progressBar  = document.getElementById("progress-bar");
+const progressLbl  = document.getElementById("progress-label");
+const progressPct  = document.getElementById("progress-pct");
+const resultsPanel = document.getElementById("results-panel");
+const resultCard   = document.getElementById("result-card");
+const verdictBadge = document.getElementById("verdict-badge");
+const verdictIcon  = document.getElementById("verdict-icon");
+const verdictText  = document.getElementById("verdict-text");
+const gaugeFill    = document.getElementById("gauge-fill");
+const gaugePctTxt  = document.getElementById("gauge-pct-text");
+const mProb        = document.getElementById("m-prob");
+const mConf        = document.getElementById("m-conf");
+const mTime        = document.getElementById("m-time");
+const mThresh      = document.getElementById("m-thresh");
+const resultDesc   = document.getElementById("result-desc");
+const btnReset     = document.getElementById("btn-reset");
+const statusDot    = document.getElementById("status-dot");
+const statusText   = document.getElementById("status-text");
+const toastCont    = document.getElementById("toast-container");
+
+// Progress steps
+const psUpload  = document.getElementById("ps-upload");
+const psExtract = document.getElementById("ps-extract");
+const psCnn     = document.getElementById("ps-cnn");
+const psLstm    = document.getElementById("ps-lstm");
+const psVerdict = document.getElementById("ps-verdict");
+const pSteps    = [psUpload, psExtract, psCnn, psLstm, psVerdict];
+
+// ── State ─────────────────────────────────────────────────────────────────────
+let selectedFile = null;
+let analysisTimer = null;
+
+// ── Gauge constants ───────────────────────────────────────────────────────────
+const GAUGE_CIRCUMFERENCE = 330; // stroke-dasharray value in SVG
+
+// ── Server Status Check ───────────────────────────────────────────────────────
+async function checkServerStatus() {
+  try {
+    const res = await fetch("/api/status", { signal: AbortSignal.timeout(4000) });
+    if (res.ok) {
+      const data = await res.json();
+      statusDot.classList.remove("offline");
+      statusText.textContent = `Model ready · ${data.device?.toUpperCase() ?? "CPU"}`;
+      statusDot.setAttribute("title", "Server online");
+      return true;
+    }
+  } catch (_) {}
+  statusDot.classList.add("offline");
+  statusText.textContent = "Server offline";
+  return false;
+}
+
+// ── Toast Notifications ───────────────────────────────────────────────────────
+function toast(message, type = "info", duration = 4500) {
+  const icons = { error: "❌", success: "✅", info: "ℹ️" };
+  const el = document.createElement("div");
+  el.className = `toast ${type}`;
+  el.setAttribute("role", "alert");
+  el.innerHTML = `<span class="toast-icon" aria-hidden="true">${icons[type]}</span><span>${message}</span>`;
+  toastCont.appendChild(el);
+  setTimeout(() => {
+    el.classList.add("toast-exit");
+    el.addEventListener("animationend", () => el.remove());
+  }, duration);
+}
+
+// ── File Handling ─────────────────────────────────────────────────────────────
+const ALLOWED_TYPES = ["video/mp4", "video/avi", "video/x-msvideo", "video/x-matroska", "video/quicktime", "video/webm", "video/x-ms-wmv"];
+const MAX_SIZE_MB   = 500;
+
+function isVideoFile(file) {
+  if (ALLOWED_TYPES.includes(file.type)) return true;
+  const ext = file.name.split(".").pop().toLowerCase();
+  return ["mp4","avi","mkv","mov","webm","wmv"].includes(ext);
+}
+
+function formatBytes(bytes) {
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function setFile(file) {
+  if (!isVideoFile(file)) {
+    toast("Unsupported file type. Please upload a video (MP4, AVI, MKV, MOV, WEBM).", "error");
+    return;
+  }
+  if (file.size > MAX_SIZE_MB * 1024 * 1024) {
+    toast(`File too large. Maximum allowed size is ${MAX_SIZE_MB} MB.`, "error");
+    return;
+  }
+
+  selectedFile = file;
+
+  // Preview
+  const url = URL.createObjectURL(file);
+  previewVideo.src = url;
+  previewName.textContent = file.name;
+  previewMeta.textContent = formatBytes(file.size);
+  previewArea.classList.add("visible");
+
+  btnAnalyze.disabled = false;
+
+  hideResults();
+  toast(`Video selected: ${file.name}`, "success", 3000);
+}
+
+function clearFile() {
+  selectedFile = null;
+  fileInput.value = "";
+  previewVideo.src = "";
+  previewArea.classList.remove("visible");
+  btnAnalyze.disabled = true;
+  hideResults();
+}
+
+// ── Upload Zone Events ────────────────────────────────────────────────────────
+uploadZone.addEventListener("click", () => fileInput.click());
+uploadZone.addEventListener("keydown", e => { if (e.key === "Enter" || e.key === " ") fileInput.click(); });
+
+fileInput.addEventListener("change", () => {
+  if (fileInput.files[0]) setFile(fileInput.files[0]);
+});
+
+uploadZone.addEventListener("dragenter", e => { e.preventDefault(); uploadZone.classList.add("drag-over"); });
+uploadZone.addEventListener("dragover",  e => { e.preventDefault(); uploadZone.classList.add("drag-over"); });
+uploadZone.addEventListener("dragleave", e => {
+  if (!uploadZone.contains(e.relatedTarget)) uploadZone.classList.remove("drag-over");
+});
+uploadZone.addEventListener("drop", e => {
+  e.preventDefault();
+  uploadZone.classList.remove("drag-over");
+  const files = e.dataTransfer?.files;
+  if (files && files[0]) setFile(files[0]);
+});
+
+btnRemove.addEventListener("click", clearFile);
+
+// ── Progress Simulation ───────────────────────────────────────────────────────
+function setProgress(pct, label, activeStep) {
+  progressBar.style.width = `${pct}%`;
+  progressBar.parentElement.setAttribute("aria-valuenow", pct);
+  progressLbl.textContent = label;
+  progressPct.textContent = `${Math.round(pct)}%`;
+
+  pSteps.forEach(s => {
+    s.classList.remove("active", "done");
+    const idx = pSteps.indexOf(s);
+    const activeIdx = pSteps.indexOf(activeStep);
+    if (idx < activeIdx) s.classList.add("done");
+    else if (idx === activeIdx) s.classList.add("active");
+  });
+}
+
+function startProgressSimulation() {
+  clearTimeout(analysisTimer);
+  setProgress(5, "Uploading video…", psUpload);
+  progressWrap.classList.add("visible");
+
+  const steps = [
+    { delay: 800,  pct: 20, label: "Extracting frames from video…", step: psExtract },
+    { delay: 2200, pct: 45, label: "Running CNN feature extraction…", step: psCnn },
+    { delay: 4000, pct: 70, label: "Processing LSTM temporal sequence…", step: psLstm },
+    { delay: 5500, pct: 90, label: "Computing classification verdict…", step: psVerdict },
+  ];
+
+  steps.forEach(({ delay, pct, label, step }) => {
+    analysisTimer = setTimeout(() => setProgress(pct, label, step), delay);
+  });
+}
+
+function finishProgress() {
+  clearTimeout(analysisTimer);
+  setProgress(100, "Analysis complete!", psVerdict);
+  psVerdict.classList.remove("active");
+  psVerdict.classList.add("done");
+}
+
+// ── Gauge Animation ───────────────────────────────────────────────────────────
+/**
+ * The gauge covers ~280° of 360°. stroke-dasharray=330 corresponds to the arc.
+ * A confidence of 0% → dashoffset=330 (empty), 100% → dashoffset=0 (full).
+ */
+function animateGauge(confidencePct, isAI) {
+  const fillClass = isAI ? "ai-fill" : "real-fill";
+  gaugeFill.setAttribute("class", `gauge-fill ${fillClass}`);
+
+  const offset = GAUGE_CIRCUMFERENCE - (confidencePct / 100) * GAUGE_CIRCUMFERENCE;
+  // Start at empty
+  gaugeFill.style.strokeDashoffset = GAUGE_CIRCUMFERENCE;
+  gaugePctTxt.textContent = "--";
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      gaugeFill.style.strokeDashoffset = offset;
+    });
+  });
+
+  // Animate number counter
+  let start = 0;
+  const end = confidencePct;
+  const duration = 1200;
+  const startTime = performance.now();
+
+  function step(now) {
+    const elapsed = now - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    const ease = 1 - Math.pow(1 - progress, 3);
+    start = Math.round(ease * end);
+    gaugePctTxt.textContent = `${start}%`;
+    if (progress < 1) requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+
+// ── Results Rendering ─────────────────────────────────────────────────────────
+function showResults(data) {
+  const { verdict, is_ai, probability, confidence, processing_time, threshold } = data;
+
+  // Card theme
+  resultCard.classList.remove("ai-result", "real-result");
+  resultCard.classList.add(is_ai ? "ai-result" : "real-result");
+
+  // Verdict badge
+  verdictBadge.classList.remove("ai-badge", "real-badge");
+  verdictBadge.classList.add(is_ai ? "ai-badge" : "real-badge");
+  verdictIcon.textContent = is_ai ? "🤖" : "✅";
+  verdictText.textContent = verdict;
+  verdictBadge.setAttribute("aria-label", `Verdict: ${verdict}`);
+
+  // Gauge
+  animateGauge(Math.round(confidence), is_ai);
+
+  // Metrics
+  mProb.textContent   = probability.toFixed(4);
+  mProb.className     = "metric-value";
+  mProb.classList.add(is_ai ? "red" : "green");
+  mConf.textContent   = `${confidence.toFixed(1)}%`;
+  mConf.className     = "metric-value";
+  mConf.classList.add(is_ai ? "red" : "green");
+  mTime.textContent   = `${processing_time}s`;
+  mThresh.textContent = is_ai ? "No ✗" : "Yes ✓";
+  mThresh.className   = `metric-value ${is_ai ? "red" : "green"}`;
+
+  // Description
+  resultDesc.className = "result-desc";
+  resultDesc.classList.add(is_ai ? "ai" : "real");
+  resultDesc.textContent = is_ai
+    ? `This video shows strong indicators of AI generation. The model found temporal artifacts and synthetic patterns across the frame sequence — characteristic of AI-created content such as deepfakes or generative video models. Confidence: ${confidence.toFixed(1)}%.`
+    : `This video exhibits natural, organic characteristics consistent with real-world footage. The temporal patterns and spatial features analysed across frames match those of authentic video capture. Confidence: ${confidence.toFixed(1)}%.`;
+
+  resultsPanel.classList.add("visible");
+}
+
+function hideResults() {
+  resultsPanel.classList.remove("visible");
+  progressWrap.classList.remove("visible");
+  pSteps.forEach(s => s.classList.remove("active", "done"));
+}
+
+// ── Analyze ───────────────────────────────────────────────────────────────────
+btnAnalyze.addEventListener("click", async () => {
+  if (!selectedFile) return;
+
+  const online = await checkServerStatus();
+  if (!online) {
+    toast("Cannot connect to the server. Make sure app.py is running.", "error", 6000);
+    return;
+  }
+
+  // UI: loading state
+  btnAnalyze.disabled = true;
+  btnAnalyze.classList.add("loading");
+  btnAnalyze.setAttribute("aria-busy", "true");
+  hideResults();
+  startProgressSimulation();
+
+  const formData = new FormData();
+  formData.append("video", selectedFile, selectedFile.name);
+
+  try {
+    const res = await fetch("/api/predict", {
+      method: "POST",
+      body: formData,
+    });
+
+    finishProgress();
+
+    if (!res.ok) {
+      let errMsg = `Server error ${res.status}`;
+      try {
+        const errData = await res.json();
+        errMsg = errData.error || errMsg;
+      } catch (_) {}
+      toast(`Analysis failed: ${errMsg}`, "error", 7000);
+      return;
+    }
+
+    const data = await res.json();
+
+    // Brief pause so progress animation finishes
+    await new Promise(r => setTimeout(r, 500));
+    showResults(data);
+    toast(
+      `Analysis complete: ${data.verdict} (${data.confidence.toFixed(1)}% confidence)`,
+      data.is_ai ? "info" : "success",
+      5000
+    );
+
+  } catch (err) {
+    toast(`Network error: ${err.message}`, "error", 7000);
+    console.error(err);
+  } finally {
+    btnAnalyze.disabled = false;
+    btnAnalyze.classList.remove("loading");
+    btnAnalyze.setAttribute("aria-busy", "false");
+  }
+});
+
+// ── Reset ─────────────────────────────────────────────────────────────────────
+btnReset.addEventListener("click", () => {
+  clearFile();
+  hideResults();
+  window.scrollTo({ top: 0, behavior: "smooth" });
+  toast("Ready for a new analysis.", "info", 2500);
+});
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+(async function init() {
+  await checkServerStatus();
+  // Recheck every 30 seconds
+  setInterval(checkServerStatus, 30_000);
+})();

utils/video_utils.py

@@ -0,0 +1,153 @@
+
+import cv2
+import numpy as np
+import torch
+import os
+from typing import List, Tuple, Optional
+
+def get_video_properties(video_path: str) -> dict:
+    """
+    Get video properties.
+    """
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        return {}
+    
+    props = {
+        'width': int(cap.get(cv2.CAP_PROP_FRAME_WIDTH)),
+        'height': int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT)),
+        'fps': cap.get(cv2.CAP_PROP_FPS),
+        'frame_count': int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    }
+    cap.release()
+    return props
+
+def load_video_frames(
+    video_path: str, 
+    num_frames: int = 30, 
+    frame_size: Tuple[int, int] = (224, 224),
+    frame_skip: int = 1
+) -> Optional[np.ndarray]:
+    """
+    Load frames from a video with robust preprocessing:
+    1. Center crop to square (min dimension).
+    2. Resize to frame_size.
+    3. Sample frames uniformly.
+    """
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        print(f"Error opening video: {video_path}")
+        return None
+        
+    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    if total_frames <= 0:
+        cap.release()
+        return None
+        
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    
+    # Calculate crop coordinates for center square crop
+    min_dim = min(width, height)
+    start_x = (width - min_dim) // 2
+    start_y = (height - min_dim) // 2
+    
+    # Calculate frame indices to sample
+    # We want 'num_frames' frames. 
+    # Strategy: evenly space them across the video duration we look at.
+    # But for simplicity and consistency, let's just grab them with a stride, 
+    # or if video is short, grab all and pad.
+    
+    # Let's try to span as much of the video as possible? 
+    # Or just stick to the requested architecture of sampling segments.
+    # The prompt asked for "preprocess ... not based on aspect ratio".
+    
+    # Simple strategy: Read frames with skip, up to num_frames.
+    # If video is too short, loop/pad? 
+    # Better: Reservoir sampling or Linspace if we want fixed count?
+    # Let's stick to the user's likely need: Fixed number of frames.
+    
+    sampled_frames = []
+    
+    # We'll seek effectively.
+    # But looping is safer for some codecs.
+    
+    # Improved sampling: pick indices using linspace if we want to span whole video?
+    # Or just sequential for temporal consistency (RNN prefer sequences).
+    # Let's do sequential with skip.
+    
+    frame_idx = 0
+    frames_collected = 0
+    
+    while frames_collected < num_frames:
+        ret, frame = cap.read()
+        if not ret:
+            break
+            
+        if frame_idx % frame_skip == 0:
+            # Preprocess Frame
+            
+            # 1. Center Crop
+            crop = frame[start_y:start_y+min_dim, start_x:start_x+min_dim]
+            
+            # 2. Resize
+            resized = cv2.resize(crop, frame_size)
+            
+            # 3. Convert BGR to RGB
+            rgb = cv2.cvtColor(resized, cv2.COLOR_BGR2RGB)
+            
+            sampled_frames.append(rgb)
+            frames_collected += 1
+            
+        frame_idx += 1
+        
+    cap.release()
+    
+    # Handle insufficient frames
+    if len(sampled_frames) == 0:
+        return None
+        
+    if len(sampled_frames) < num_frames:
+        # Pad with last frame or zeros?
+        # Let's pad with zeros (black frames) or loop?
+        # Zero padding is safer to avoid motion artifacts.
+        padding = [np.zeros((frame_size[1], frame_size[0], 3), dtype=np.uint8)] * (num_frames - len(sampled_frames))
+        sampled_frames.extend(padding)
+        
+    return np.array(sampled_frames)
+
+def normalize_frames(frames: np.ndarray) -> np.ndarray:
+    """
+    Normalize frames to [0, 1] and then standard ImageNet mean/std.
+    Frames input: (N, H, W, C) in RGB, uint8 [0,255]
+    """
+    # Convert to float32 [0, 1]
+    frames_norm = frames.astype(np.float32) / 255.0
+    
+    # Standard ImageNet mean and std
+    mean = np.array([0.485, 0.456, 0.406], dtype=np.float32)
+    std = np.array([0.229, 0.224, 0.225], dtype=np.float32)
+    
+    # Apply normalization
+    # frames is (N, H, W, C), mean/std are (3,)
+    # We allow broadcasting on the last dimension
+    frames_norm = (frames_norm - mean) / std
+    
+    return frames_norm
+
+def validate_video(video_path: str) -> bool:
+    """
+    Check if video is valid and openable.
+    """
+    if not os.path.exists(video_path):
+        return False
+    try:
+        cap = cv2.VideoCapture(video_path)
+        if not cap.isOpened():
+            return False
+        # Read one frame to be sure
+        ret, _ = cap.read()
+        cap.release()
+        return ret
+    except Exception:
+        return False