Upload 6 files

Dockerfile

@@ -0,0 +1,36 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# System deps
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    libgl1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install CPU-only PyTorch first
+RUN pip install --no-cache-dir \
+    torch==2.4.0+cpu \
+    torchvision==0.19.0+cpu \
+    --index-url https://download.pytorch.org/whl/cpu
+
+# Install remaining deps
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install --no-deps --no-cache-dir facenet-pytorch==2.6.0
+
+# Copy app + static frontend files
+COPY app.py .
+COPY static/ ./static/
+# Copy model checkpoint (uploaded separately to HF Space repo)
+COPY best_model.pth .
+
+# HF Spaces requires port 7860
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860", "--timeout-keep-alive", "120"]

README.md

@@ -1,11 +1,18 @@
 ---
-title: DeepShield Web2
-emoji: 🌖
-colorFrom: red
+title: DeepShield AI
+emoji: 🛡️
+colorFrom: purple
 colorTo: indigo
 sdk: docker
 pinned: false
-short_description: updated
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# DeepShield AI — Deepfake Detector (DINO-G50)
+
+Full-stack deepfake detection web app powered by DINO-G50 Vision AI.
+
+Upload a video → frames extract → AI analyzes each frame → REAL or FAKE verdict with % confidence.
+
+## Files needed
+- `best_model.pth` — Upload manually to this Space (450MB model checkpoint)

app.py

@@ -0,0 +1,342 @@
+"""
+DeepShield AI — Full-Stack FastAPI Backend
+Serves the frontend UI + deepfake detection API from one HF Space.
+
+Routes:
+  GET  /          → Serves index.html (the web UI)
+  GET  /health    → JSON health check
+  POST /predict   → Video upload → REAL/FAKE prediction
+"""
+
+import os
+import sys
+import uuid
+import shutil
+import logging
+import tempfile
+from pathlib import Path
+from functools import lru_cache
+
+import cv2
+import torch
+import torch.nn as nn
+import numpy as np
+from PIL import Image, ImageFile
+from facenet_pytorch import MTCNN
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+import torchvision.transforms as T
+
+ImageFile.LOAD_TRUNCATED_IMAGES = True
+logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s")
+logger = logging.getLogger(__name__)
+
+# ─────────────────────────────────────────────
+# Model Definition (self-contained)
+# ─────────────────────────────────────────────
+
+class DINOv2Extractor(nn.Module):
+    def __init__(self, variant: str = "dinov2_vitb14"):
+        super().__init__()
+        logger.info(f"Loading {variant} from torch.hub...")
+        self.backbone = torch.hub.load(
+            "facebookresearch/dinov2", variant, pretrained=True
+        )
+        self.feature_dim = 768
+        for p in self.backbone.parameters():
+            p.requires_grad = False
+        logger.info("DINOv2 backbone loaded (frozen).")
+
+    def forward(self, x: torch.Tensor) -> torch.Tensor:
+        return self.backbone(x)
+
+
+class MLPClassifier(nn.Module):
+    def __init__(self, input_dim: int = 1536, num_classes: int = 2, dropout: float = 0.3):
+        super().__init__()
+        self.net = nn.Sequential(
+            nn.Linear(input_dim, 512),
+            nn.LayerNorm(512),
+            nn.GELU(),
+            nn.Dropout(dropout),
+            nn.Linear(512, 256),
+            nn.LayerNorm(256),
+            nn.GELU(),
+            nn.Dropout(dropout / 2),
+            nn.Linear(256, num_classes),
+        )
+
+    def forward(self, x: torch.Tensor) -> torch.Tensor:
+        return self.net(x)
+
+
+class DeepfakeDetector(nn.Module):
+    def __init__(self, dual_input: bool = True):
+        super().__init__()
+        self.dual_input = dual_input
+        self.extractor = DINOv2Extractor()
+        feat_dim = 1536 if dual_input else 768
+        self.classifier = MLPClassifier(input_dim=feat_dim)
+
+    def forward(self, full_img: torch.Tensor, face_img: torch.Tensor = None) -> torch.Tensor:
+        full_feat = self.extractor(full_img)
+        if self.dual_input and face_img is not None:
+            face_feat = self.extractor(face_img)
+            feats = torch.cat([full_feat, face_feat], dim=1)
+        else:
+            feats = full_feat
+        return self.classifier(feats)
+
+
+# ─────────────────────────────────────────────
+# App Setup
+# ─────────────────────────────────────────────
+
+app = FastAPI(
+    title="DeepShield AI",
+    description="DINO-G50 deepfake detector — full-stack web app",
+    version="2.0.0",
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+DEVICE = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+CHECKPOINT_PATH = Path("best_model.pth")
+MAX_FRAMES = 20
+MAX_FILE_MB = 30
+MAX_DURATION_SEC = 60
+
+# MTCNN face detector (initialized once, CPU is fine for detection)
+try:
+    MTCNN_DETECTOR = MTCNN(
+        image_size=224,
+        margin=40,
+        min_face_size=20,
+        thresholds=[0.6, 0.7, 0.9],
+        keep_all=False,
+        device='cpu'
+    )
+    logger.info("MTCNN face detector initialized.")
+except Exception as e:
+    MTCNN_DETECTOR = None
+    logger.warning(f"MTCNN init failed (will use full frame fallback): {e}")
+
+TRANSFORM = T.Compose([
+    T.Resize((224, 224)),
+    T.ToTensor(),
+    T.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
+])
+
+
+def detect_face_crop(img: Image.Image) -> Image.Image:
+    """Detect face with MTCNN and return cropped face, or None if not found."""
+    if MTCNN_DETECTOR is None:
+        return None
+    try:
+        # MTCNN returns the cropped tensor directly
+        face_tensor = MTCNN_DETECTOR(img)
+        if face_tensor is not None:
+            # Convert tensor back to PIL Image
+            face_np = face_tensor.permute(1, 2, 0).numpy()
+            face_np = ((face_np * 128) + 127.5).clip(0, 255).astype(np.uint8)
+            return Image.fromarray(face_np)
+    except Exception:
+        pass
+    return None
+
+
+@lru_cache(maxsize=1)
+def load_model() -> DeepfakeDetector:
+    if not CHECKPOINT_PATH.exists():
+        raise RuntimeError("best_model.pth not found. Upload it to this HF Space.")
+
+    logger.info(f"Loading checkpoint on {DEVICE}...")
+    ckpt = torch.load(CHECKPOINT_PATH, map_location=DEVICE)
+    state = ckpt.get("model_state_dict", ckpt)
+
+    mlp_w = state.get("classifier.net.0.weight", None)
+    dual = (mlp_w.shape[1] == 1536) if mlp_w is not None else True
+
+    model = DeepfakeDetector(dual_input=dual).to(DEVICE)
+    model.load_state_dict(state, strict=False)
+    model.eval()
+    logger.info(f"Model ready. dual_input={dual}, device={DEVICE}")
+    return model
+
+
+def extract_frames(video_path: str, output_dir: str, num_frames: int = MAX_FRAMES) -> list:
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        raise ValueError("Cannot open video file.")
+
+    total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    fps = cap.get(cv2.CAP_PROP_FPS) or 25
+    duration = total_frames / fps if fps > 0 else 0
+
+    if duration > MAX_DURATION_SEC:
+        cap.release()
+        raise ValueError(f"Video too long ({duration:.0f}s). Max: {MAX_DURATION_SEC}s.")
+
+    if total_frames <= 0:
+        total_frames = int(fps * MAX_DURATION_SEC)
+
+    step = max(1, total_frames // num_frames)
+    target_indices = set(range(0, total_frames, step))
+    saved_paths = []
+    frame_idx = 0
+
+    while len(saved_paths) < num_frames:
+        ret, frame = cap.read()
+        if not ret:
+            break
+        if frame_idx in target_indices:
+            rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+            path = os.path.join(output_dir, f"frame_{len(saved_paths):04d}.jpg")
+            Image.fromarray(rgb).save(path, quality=90)
+            saved_paths.append(path)
+        frame_idx += 1
+
+    cap.release()
+    return saved_paths
+
+
+def run_inference(model: DeepfakeDetector, frame_paths: list) -> dict:
+    fake_probs = []
+    with torch.no_grad():
+        for fpath in frame_paths:
+            try:
+                img = Image.open(fpath).convert("RGB")
+                t_img = TRANSFORM(img).unsqueeze(0).to(DEVICE)
+
+                # Try MTCNN face detection first (same as test_real.py)
+                t_face = t_img  # default fallback = full frame
+                if model.dual_input:
+                    face_crop = detect_face_crop(img)
+                    if face_crop is not None:
+                        t_face = TRANSFORM(face_crop).unsqueeze(0).to(DEVICE)
+                    # else: fallback to full image (face not detected)
+
+                logits = model(t_img, t_face if model.dual_input else None)
+                prob = torch.softmax(logits, dim=1)[0, 1].item()
+                fake_probs.append(prob)
+            except Exception as e:
+                logger.warning(f"Skipping frame {fpath}: {e}")
+
+    if not fake_probs:
+        raise ValueError("No frames could be processed.")
+
+    # 1. Advanced Aggregation (Top 50% Mean)
+    # Deepfake artifacts might only appear in parts of the video.
+    # Averaging all frames dilutes the score. We take the top 50% most suspicious frames.
+    sorted_probs = sorted(fake_probs, reverse=True)
+    top_k = max(1, len(sorted_probs) // 2)
+    video_fake_prob = float(np.mean(sorted_probs[:top_k]))
+
+    # 2. Ratio Check
+    # If at least 30% of frames are distinctly flagged as Fake, mark the whole video as Fake.
+    fake_frame_count = sum(1 for p in fake_probs if p > 0.5)
+    fake_ratio = fake_frame_count / len(fake_probs)
+
+    is_fake = (video_fake_prob > 0.5) or (fake_ratio >= 0.3)
+
+    # Ensure UI consistency: If flagged as FAKE by ratio, but probability is low, boost it to 51%
+    if is_fake and video_fake_prob <= 0.5:
+        video_fake_prob = 0.51
+
+    avg_real = 1.0 - video_fake_prob
+
+    return {
+        "verdict": "FAKE" if is_fake else "REAL",
+        "fake_probability": round(video_fake_prob * 100, 1),
+        "real_probability": round(avg_real * 100, 1),
+        "frame_count": len(fake_probs),
+        "confidence": round(max(video_fake_prob, avg_real) * 100, 1),
+        "per_frame_scores": [round(p * 100, 1) for p in fake_probs],
+    }
+
+
+# ─────────────────────────────────────────────
+# API Routes (must be defined BEFORE static mount)
+# ─────────────────────────────────────────────
+
+@app.on_event("startup")
+async def startup_event():
+    try:
+        load_model()
+    except Exception as e:
+        logger.error(f"Startup model load failed: {e}")
+
+
+@app.get("/health")
+def health_check():
+    return {
+        "status": "ok",
+        "model": "DINO-G50 Deepfake Detector",
+        "device": str(DEVICE),
+        "model_loaded": CHECKPOINT_PATH.exists(),
+    }
+
+
+@app.post("/predict")
+async def predict(file: UploadFile = File(...)):
+    allowed_exts = {".mp4", ".mov", ".avi", ".mkv"}
+    ext = Path(file.filename).suffix.lower() if file.filename else ""
+
+    if ext not in allowed_exts:
+        raise HTTPException(400, f"Unsupported type '{ext}'. Use: {allowed_exts}")
+
+    content = await file.read()
+    size_mb = len(content) / (1024 * 1024)
+    if size_mb > MAX_FILE_MB:
+        raise HTTPException(413, f"File too large ({size_mb:.1f} MB). Max: {MAX_FILE_MB} MB.")
+
+    job_id = str(uuid.uuid4())[:8]
+    temp_dir = Path(tempfile.gettempdir()) / f"deepshield_{job_id}"
+    frames_dir = temp_dir / "frames"
+    frames_dir.mkdir(parents=True, exist_ok=True)
+    video_path = temp_dir / f"input{ext}"
+
+    try:
+        with open(video_path, "wb") as f:
+            f.write(content)
+        del content
+
+        model = load_model()
+        logger.info(f"[{job_id}] Processing: {file.filename} ({size_mb:.1f} MB)")
+
+        frame_paths = extract_frames(str(video_path), str(frames_dir))
+        if not frame_paths:
+            raise HTTPException(422, "No frames could be extracted from video.")
+
+        result = run_inference(model, frame_paths)
+        result["filename"] = file.filename
+        result["file_size_mb"] = round(size_mb, 2)
+        result["job_id"] = job_id
+
+        logger.info(f"[{job_id}] Result: {result['verdict']} ({result['fake_probability']}% fake)")
+        return JSONResponse(content=result)
+
+    except HTTPException:
+        raise
+    except ValueError as e:
+        raise HTTPException(422, str(e))
+    except Exception as e:
+        logger.error(f"[{job_id}] Error: {e}", exc_info=True)
+        raise HTTPException(500, f"Internal error: {str(e)}")
+    finally:
+        shutil.rmtree(temp_dir, ignore_errors=True)
+        logger.info(f"[{job_id}] Cleanup done.")
+
+
+# ─────────────────────────────────────────────
+# Static Frontend (mounted LAST — serves index.html at /)
+# ─────────────────────────────────────────────
+app.mount("/", StaticFiles(directory="static", html=True), name="static")

requirements.txt

@@ -0,0 +1,10 @@
+--extra-index-url https://download.pytorch.org/whl/cpu
+fastapi==0.115.0
+uvicorn[standard]==0.30.6
+python-multipart==0.0.9
+torch==2.4.0+cpu
+torchvision==0.19.0+cpu
+Pillow==10.4.0
+opencv-python-headless==4.10.0.84
+numpy==1.26.4
+tqdm==4.66.5

static/index.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DeepShield AI — Deepfake Detector</title>
+  <meta name="description" content="Upload a video and detect deepfakes instantly using DINO-G50 AI with confidence scores and per-frame analysis." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+
+  <!-- Animated Background -->
+  <div class="bg-orbs">
+    <div class="orb orb-1"></div>
+    <div class="orb orb-2"></div>
+    <div class="orb orb-3"></div>
+  </div>
+
+  <!-- Navbar -->
+  <nav class="navbar">
+    <div class="nav-brand" onclick="location.reload()" style="cursor:pointer" title="Click to refresh">
+      <span class="brand-icon">🛡️</span>
+      <span class="brand-name">DeepShield <span class="brand-accent">AI</span></span>
+    </div>
+    <div class="nav-right" style="display:flex; align-items:center; gap:16px;">
+      <div id="server-status" class="server-status status-checking">
+        <span class="status-dot"></span>
+        <span id="status-text">Checking API...</span>
+      </div>
+      <div class="nav-badge">DINO-G50 Powered</div>
+    </div>
+  </nav>
+
+  <!-- Hero -->
+  <header class="hero">
+    <div class="hero-tag">⚡ Real-time Detection</div>
+    <h1 class="hero-title">
+      Detect <span class="gradient-text">Deepfakes</span><br />Instantly
+    </h1>
+    <p class="hero-subtitle">
+      Upload any video. Our DINO-G50 Vision AI analyzes every frame<br />
+      and tells you exactly how likely a video is to be fake.
+    </p>
+  </header>
+
+  <!-- Main Card -->
+  <main class="main-card">
+
+    <!-- ── Upload Section ── -->
+    <section id="upload-section" class="upload-section">
+      <div
+        id="drop-zone"
+        class="drop-zone"
+        role="button"
+        tabindex="0"
+        aria-label="Upload video file"
+        ondragover="onDragOver(event)"
+        ondragleave="onDragLeave(event)"
+        ondrop="onDrop(event)"
+        onclick="document.getElementById('file-input').click()"
+        onkeypress="if(event.key==='Enter') document.getElementById('file-input').click()"
+      >
+        <div class="drop-icon">
+          <svg id="upload-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="32" cy="32" r="30" fill="rgba(139,92,246,0.12)" stroke="rgba(139,92,246,0.4)" stroke-width="1.5"/>
+            <path d="M32 44V28M32 28L24 36M32 28L40 36" stroke="url(#g1)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M20 44h24" stroke="url(#g1)" stroke-width="2" stroke-linecap="round"/>
+            <defs>
+              <linearGradient id="g1" x1="20" y1="28" x2="44" y2="44" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#8B5CF6"/><stop offset="1" stop-color="#06B6D4"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+        <p class="drop-title">Drop your video here</p>
+        <p class="drop-sub">or <span class="link-text">browse files</span></p>
+        <p class="drop-limits">MP4 · MOV · AVI · MKV &nbsp;|&nbsp; Max 30 MB &nbsp;|&nbsp; Max 60 sec</p>
+      </div>
+      <input
+        id="file-input"
+        type="file"
+        accept=".mp4,.mov,.avi,.mkv,video/*"
+        style="display:none"
+        onchange="onFileSelected(event)"
+      />
+
+      <!-- File Preview -->
+      <div id="file-preview" class="file-preview hidden">
+        <div class="file-info">
+          <span class="file-icon">🎬</span>
+          <div class="file-meta">
+            <span id="file-name" class="file-name"></span>
+            <span id="file-size" class="file-size"></span>
+          </div>
+          <button class="remove-btn" onclick="resetUpload()" aria-label="Remove file">✕</button>
+        </div>
+        <div id="video-container" class="video-container">
+          <video id="video-preview" class="video-preview" controls muted></video>
+        </div>
+        <button id="analyze-btn" class="analyze-btn" onclick="analyzeVideo()">
+          <span class="btn-icon">🔍</span>
+          <span>Analyze for Deepfakes</span>
+        </button>
+      </div>
+    </section>
+
+    <!-- ── Loading Section ── -->
+    <section id="loading-section" class="loading-section hidden">
+      <div class="loading-animation">
+        <div class="spinner-ring"></div>
+        <div class="spinner-ring ring-2"></div>
+        <div class="spinner-ring ring-3"></div>
+        <div class="spinner-center">🤖</div>
+      </div>
+      <h3 class="loading-title">Analyzing Video...</h3>
+      <div class="loading-steps">
+        <div id="step-1" class="step active">
+          <span class="step-dot"></span>
+          <span>Extracting frames</span>
+        </div>
+        <div id="step-2" class="step">
+          <span class="step-dot"></span>
+          <span>Running DINOv2 inference</span>
+        </div>
+        <div id="step-3" class="step">
+          <span class="step-dot"></span>
+          <span>Generating results</span>
+        </div>
+      </div>
+      <p class="loading-note">⏳ This may take 30–90 seconds on CPU. Please wait…</p>
+    </section>
+
+    <!-- ── Results Section ── -->
+    <section id="results-section" class="results-section hidden">
+
+      <!-- Verdict Card -->
+      <div id="verdict-card" class="verdict-card">
+        <div class="verdict-left">
+          <div class="verdict-circle-wrap">
+            <svg class="verdict-ring" viewBox="0 0 120 120">
+              <circle cx="60" cy="60" r="50" class="ring-bg"/>
+              <circle id="ring-fill" cx="60" cy="60" r="50" class="ring-progress"/>
+            </svg>
+            <div class="verdict-inner">
+              <span id="verdict-pct" class="verdict-pct">0%</span>
+              <span id="verdict-label" class="verdict-label">FAKE</span>
+            </div>
+          </div>
+          <p class="verdict-desc">Probability of being fake</p>
+        </div>
+
+        <div class="verdict-right">
+          <div id="verdict-badge" class="verdict-badge">⚠ FAKE</div>
+          <div class="verdict-stats">
+            <div class="stat-row">
+              <span class="stat-label">🎭 Fake probability</span>
+              <span id="stat-fake" class="stat-val fake-val">—</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">✅ Real probability</span>
+              <span id="stat-real" class="stat-val real-val">—</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">🎞 Frames analyzed</span>
+              <span id="stat-frames" class="stat-val">—</span>
+            </div>
+            <div class="stat-row">
+              <span class="stat-label">📁 File size</span>
+              <span id="stat-size" class="stat-val">—</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Per-Frame Chart -->
+      <div class="chart-card">
+        <h3 class="chart-title">📊 Per-Frame Detection Scores</h3>
+        <p class="chart-sub">Higher bar = more likely FAKE for that frame</p>
+        <div id="frame-chart" class="frame-chart"></div>
+        <div class="chart-legend">
+          <span class="legend-item"><span class="dot dot-fake"></span>Fake</span>
+          <span class="legend-item"><span class="dot dot-real"></span>Real</span>
+          <span class="legend-item"><span class="dot dot-thresh"></span>50% Threshold</span>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="result-actions">
+        <button class="action-btn action-primary" onclick="resetUpload()">
+          🔄 Analyze Another Video
+        </button>
+        <button class="action-btn action-secondary" onclick="copyResult()">
+          📋 Copy Result
+        </button>
+      </div>
+    </section>
+
+    <!-- ── Error Section ── -->
+    <section id="error-section" class="error-section hidden">
+      <div class="error-icon">❌</div>
+      <h3 class="error-title">Analysis Failed</h3>
+      <p id="error-msg" class="error-msg"></p>
+      <button class="action-btn action-primary" onclick="resetUpload()">Try Again</button>
+    </section>
+
+  </main>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <p><strong>MADE BY G50</strong></p>
+    <p class="footer-note">All Rights Reserved © G50 &nbsp;·&nbsp; Max 30 MB · 60 sec · Results are probabilistic, not legal evidence</p>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,572 @@
+/* ──────────────────────────────────────────
+   DeepShield AI — style.css
+   Premium dark glassmorphism design
+   ────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:          #08080f;
+  --surface:     rgba(255,255,255,0.04);
+  --surface-2:   rgba(255,255,255,0.07);
+  --border:      rgba(255,255,255,0.08);
+  --border-glow: rgba(139,92,246,0.35);
+  --text:        #f0f0ff;
+  --text-sub:    rgba(240,240,255,0.55);
+  --purple:      #8B5CF6;
+  --cyan:        #06B6D4;
+  --green:       #22c55e;
+  --red:         #ef4444;
+  --orange:      #f97316;
+  --radius:      18px;
+  --radius-sm:   10px;
+  --transition:  0.3s cubic-bezier(0.4,0,0.2,1);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Inter', sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* ── Background Orbs ── */
+.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.18;
+  animation: drift 12s ease-in-out infinite alternate;
+}
+.orb-1 { width: 500px; height: 500px; background: var(--purple); top: -150px; left: -100px; animation-delay: 0s; }
+.orb-2 { width: 400px; height: 400px; background: var(--cyan); bottom: -100px; right: -80px; animation-delay: -5s; }
+.orb-3 { width: 300px; height: 300px; background: #ec4899; top: 40%; left: 60%; animation-delay: -9s; }
+
+@keyframes drift {
+  from { transform: translate(0, 0) scale(1); }
+  to   { transform: translate(30px, 20px) scale(1.08); }
+}
+
+/* ── Navbar ── */
+.navbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 32px;
+  background: rgba(8,8,15,0.85);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+}
+.nav-brand { display: flex; align-items: center; gap: 10px; }
+.brand-icon { font-size: 24px; }
+.brand-name {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+}
+.brand-accent { color: var(--purple); }
+.nav-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 99px;
+  background: rgba(139,92,246,0.15);
+  border: 1px solid rgba(139,92,246,0.3);
+  color: var(--purple);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+/* ── Server Status Badge ── */
+.server-status {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; font-weight: 600;
+  padding: 4px 12px; border-radius: 99px;
+  background: var(--surface-2); border: 1px solid var(--border);
+  transition: all 0.3s;
+}
+.status-dot { width: 8px; height: 8px; border-radius: 50%; }
+.status-checking { color: #facc15; border-color: rgba(250,204,21,0.3); background: rgba(250,204,21,0.1); }
+.status-checking .status-dot { background: #facc15; animation: pulse-dot 1s infinite alternate; }
+.status-connected { color: #4ade80; border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.1); }
+.status-connected .status-dot { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
+.status-error { color: #f87171; border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.1); }
+.status-error .status-dot { background: #f87171; box-shadow: 0 0 8px #f87171; }
+
+
+/* ── Hero ── */
+.hero {
+  text-align: center;
+  padding: 60px 24px 36px;
+  position: relative;
+  z-index: 1;
+}
+.hero-tag {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  padding: 6px 16px;
+  border-radius: 99px;
+  background: rgba(6,182,212,0.1);
+  border: 1px solid rgba(6,182,212,0.25);
+  color: var(--cyan);
+  margin-bottom: 20px;
+}
+.hero-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: clamp(36px, 6vw, 64px);
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: 18px;
+  letter-spacing: -1px;
+}
+.gradient-text {
+  background: linear-gradient(135deg, var(--purple), var(--cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.hero-subtitle {
+  color: var(--text-sub);
+  font-size: 17px;
+  max-width: 540px;
+  margin: 0 auto;
+  line-height: 1.7;
+}
+
+/* ── Main Card ── */
+.main-card {
+  position: relative;
+  z-index: 1;
+  max-width: 820px;
+  margin: 0 auto 60px;
+  padding: 40px 32px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 28px;
+  backdrop-filter: blur(24px);
+  box-shadow: 0 32px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03) inset;
+}
+
+/* ── Drop Zone ── */
+.drop-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 52px 32px;
+  border: 2px dashed rgba(139,92,246,0.3);
+  border-radius: var(--radius);
+  background: rgba(139,92,246,0.04);
+  cursor: pointer;
+  transition: all var(--transition);
+  outline: none;
+}
+.drop-zone:hover, .drop-zone:focus, .drop-zone.dragging {
+  border-color: var(--purple);
+  background: rgba(139,92,246,0.1);
+  box-shadow: 0 0 0 4px rgba(139,92,246,0.12);
+  transform: translateY(-2px);
+}
+.drop-icon svg { width: 64px; height: 64px; }
+.drop-title { font-size: 19px; font-weight: 600; color: var(--text); }
+.drop-sub { color: var(--text-sub); }
+.link-text { color: var(--purple); text-decoration: underline; cursor: pointer; }
+.drop-limits {
+  font-size: 12px;
+  color: var(--text-sub);
+  opacity: 0.7;
+  margin-top: 4px;
+  letter-spacing: 0.3px;
+}
+
+/* ── File Preview ── */
+.file-preview { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.file-icon { font-size: 28px; }
+.file-meta { flex: 1; display: flex; flex-direction: column; }
+.file-name { font-weight: 600; font-size: 14px; color: var(--text); word-break: break-all; }
+.file-size { font-size: 12px; color: var(--text-sub); }
+.remove-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-sub);
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all var(--transition);
+  display: flex; align-items: center; justify-content: center;
+}
+.remove-btn:hover { background: rgba(239,68,68,0.1); border-color: var(--red); color: var(--red); }
+
+.video-container {
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: #000;
+  border: 1px solid var(--border);
+}
+.video-preview { width: 100%; max-height: 300px; display: block; }
+
+.analyze-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  padding: 16px;
+  font-size: 16px;
+  font-weight: 700;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: linear-gradient(135deg, var(--purple), var(--cyan));
+  color: #fff;
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 0.3px;
+  box-shadow: 0 8px 24px rgba(139,92,246,0.35);
+}
+.analyze-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(139,92,246,0.45); }
+.analyze-btn:active { transform: translateY(0); }
+.analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-icon { font-size: 18px; }
+
+/* ── Loading ── */
+.loading-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  padding: 40px 0;
+}
+.loading-animation {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 3px solid transparent;
+  border-top-color: var(--purple);
+  animation: spin 1s linear infinite;
+}
+.ring-2 {
+  inset: 8px;
+  border-top-color: var(--cyan);
+  animation-duration: 1.4s;
+  animation-direction: reverse;
+}
+.ring-3 {
+  inset: 16px;
+  border-top-color: rgba(139,92,246,0.4);
+  animation-duration: 2s;
+}
+.spinner-center { font-size: 28px; z-index: 1; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.loading-title { font-size: 22px; font-weight: 700; text-align: center; }
+.loading-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; }
+.step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--text-sub);
+  transition: all var(--transition);
+}
+.step.active { color: var(--text); }
+.step-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--border);
+  transition: all var(--transition);
+  flex-shrink: 0;
+}
+.step.active .step-dot {
+  background: var(--purple);
+  box-shadow: 0 0 8px var(--purple);
+  animation: pulse-dot 1s ease-in-out infinite;
+}
+.step.done .step-dot { background: var(--green); animation: none; }
+.step.done { color: var(--green); }
+@keyframes pulse-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.4); } }
+.loading-note { font-size: 12px; color: var(--text-sub); text-align: center; opacity: 0.7; }
+
+/* ── Results ── */
+.results-section { display: flex; flex-direction: column; gap: 24px; }
+
+.verdict-card {
+  display: flex;
+  gap: 32px;
+  padding: 28px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-glow);
+  background: var(--surface-2);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.verdict-card.is-fake { border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.04); }
+.verdict-card.is-real { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.04); }
+
+.verdict-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  min-width: 160px;
+}
+.verdict-circle-wrap { position: relative; width: 140px; height: 140px; }
+.verdict-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
+.ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 8; }
+.ring-progress {
+  fill: none;
+  stroke: var(--purple);
+  stroke-width: 8;
+  stroke-linecap: round;
+  stroke-dasharray: 314;
+  stroke-dashoffset: 314;
+  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1), stroke 0.4s;
+}
+.verdict-inner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.verdict-pct {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1;
+}
+.verdict-label {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+.verdict-desc { font-size: 12px; color: var(--text-sub); text-align: center; }
+
+.verdict-right { flex: 1; min-width: 220px; }
+.verdict-badge {
+  display: inline-block;
+  font-size: 20px;
+  font-weight: 800;
+  font-family: 'Space Grotesk', sans-serif;
+  padding: 8px 20px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 18px;
+  letter-spacing: 1px;
+}
+.verdict-badge.fake {
+  background: rgba(239,68,68,0.15);
+  border: 1px solid rgba(239,68,68,0.4);
+  color: #f87171;
+}
+.verdict-badge.real {
+  background: rgba(34,197,94,0.15);
+  border: 1px solid rgba(34,197,94,0.4);
+  color: #4ade80;
+}
+
+.verdict-stats { display: flex; flex-direction: column; gap: 10px; }
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  font-size: 14px;
+}
+.stat-label { color: var(--text-sub); }
+.stat-val { font-weight: 700; }
+.fake-val { color: #f87171; }
+.real-val { color: #4ade80; }
+
+/* ── Frame Chart ── */
+.chart-card {
+  padding: 24px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.chart-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
+.chart-sub { font-size: 12px; color: var(--text-sub); margin-bottom: 18px; }
+.frame-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 120px;
+  position: relative;
+  padding: 0 4px;
+}
+.frame-chart::after {
+  content: "50%";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 10px;
+  color: var(--text-sub);
+  opacity: 0.6;
+}
+.frame-chart::before {
+  content: "";
+  position: absolute;
+  left: 4px; right: 24px;
+  top: 50%;
+  border-top: 1px dashed rgba(255,255,255,0.12);
+}
+.bar-wrap {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  position: relative;
+}
+.bar {
+  width: 100%;
+  border-radius: 4px 4px 0 0;
+  min-height: 4px;
+  transition: height 0.8s cubic-bezier(0.4,0,0.2,1);
+  cursor: default;
+  position: relative;
+}
+.bar::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0,0,0,0.85);
+  color: var(--text);
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+.bar:hover::after { opacity: 1; }
+.bar.bar-fake { background: linear-gradient(to top, #ef4444, #f97316); }
+.bar.bar-real { background: linear-gradient(to top, #22c55e, #06B6D4); }
+
+.chart-legend {
+  display: flex;
+  gap: 18px;
+  margin-top: 12px;
+}
+.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }
+.dot { width: 10px; height: 10px; border-radius: 3px; }
+.dot-fake { background: #ef4444; }
+.dot-real { background: #22c55e; }
+.dot-thresh { background: transparent; border: 1px dashed rgba(255,255,255,0.3); }
+
+/* ── Actions ── */
+.result-actions { display: flex; gap: 12px; flex-wrap: wrap; }
+.action-btn {
+  flex: 1;
+  min-width: 160px;
+  padding: 14px 20px;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+  border: none;
+  outline: none;
+  letter-spacing: 0.2px;
+}
+.action-primary {
+  background: linear-gradient(135deg, var(--purple), var(--cyan));
+  color: #fff;
+  box-shadow: 0 6px 20px rgba(139,92,246,0.3);
+}
+.action-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(139,92,246,0.4); }
+.action-secondary {
+  background: var(--surface-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+.action-secondary:hover { background: var(--surface); border-color: var(--purple); }
+
+/* ── Error ── */
+.error-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 40px 0;
+  text-align: center;
+}
+.error-icon { font-size: 48px; }
+.error-title { font-size: 22px; font-weight: 700; color: var(--red); }
+.error-msg { color: var(--text-sub); max-width: 400px; font-size: 14px; }
+
+/* ── Footer ── */
+.footer {
+  text-align: center;
+  padding: 28px 24px 40px;
+  color: var(--text-sub);
+  font-size: 13px;
+  position: relative;
+  z-index: 1;
+  line-height: 1.8;
+}
+.footer-note { font-size: 11px; opacity: 0.5; }
+
+/* ── Utility ── */
+.hidden { display: none !important; }
+
+/* ── Responsive ── */
+@media (max-width: 600px) {
+  .main-card { padding: 24px 16px; border-radius: 20px; margin: 0 12px 40px; }
+  .verdict-card { flex-direction: column; align-items: center; text-align: center; }
+  .verdict-right { width: 100%; }
+  .hero { padding: 40px 16px 24px; }
+  .navbar { padding: 12px 16px; }
+  .result-actions { flex-direction: column; }
+}
+
+/* ── Entrance Animation ── */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.results-section > * {
+  animation: fadeUp 0.5s ease both;
+}
+.results-section > *:nth-child(2) { animation-delay: 0.1s; }
+.results-section > *:nth-child(3) { animation-delay: 0.2s; }