Spaces:

MrTsp
/

DeepShield-Web

Sleeping

App Files Files Community

MrTsp commited on Apr 20

Commit

718a321

1 Parent(s): 84e98d0

Upload 3 files

Browse files

Files changed (3) hide show

static/index.html +219 -0
static/script.js +284 -0
static/style.css +572 -0

static/index.html ADDED Viewed

	@@ -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/script.js ADDED Viewed

	@@ -0,0 +1,284 @@

+/**
+ * DeepShield AI — script.js (Full-Stack HF Space version)
+ * API_URL = "" means: same server, same domain. No CORS needed!
+ */
+const API_URL = "";  // Empty = same HF Space serves both UI and API
+// ── Server Status Ping ──
+async function checkServerStatus() {
+  const statusMenu = document.getElementById("server-status");
+  const statusText = document.getElementById("status-text");
+  const dropZone = document.getElementById("drop-zone");
+  if (!statusMenu) return;
+  try {
+    const res = await fetch(`${API_URL}/health`);
+    if (!res.ok) throw new Error("Server not OK");
+    const data = await res.json();
+    statusMenu.className = "server-status";
+    if (data.model_loaded === true) {
+      statusMenu.classList.add("status-connected");
+      statusText.textContent = "AI Ready ✓";
+      dropZone.style.pointerEvents = "auto";
+      dropZone.style.opacity = "1";
+      document.querySelector(".drop-title").innerHTML = "Drop your video here";
+      document.querySelector(".drop-sub").innerHTML = 'or <span class="link-text">browse files</span>';
+    } else {
+      statusMenu.classList.add("status-error");
+      statusText.textContent = "Model Missing";
+      dropZone.style.pointerEvents = "none";
+      dropZone.style.opacity = "0.5";
+      document.querySelector(".drop-title").innerHTML = "⚠️ Model Not Uploaded";
+      document.querySelector(".drop-sub").textContent = "Admin: Upload best_model.pth to this HF Space.";
+    }
+  } catch (err) {
+    statusMenu.className = "server-status status-error";
+    statusText.textContent = "Server Waking Up...";
+    dropZone.style.pointerEvents = "none";
+    dropZone.style.opacity = "0.5";
+    document.querySelector(".drop-title").innerHTML = "⚠️ Server is starting...";
+    document.querySelector(".drop-sub").textContent = "Takes ~60 sec. Page will auto-refresh status.";
+  }
+}
+// Check on load, then every 10 seconds (also keeps server alive!)
+checkServerStatus();
+setInterval(checkServerStatus, 10000);
+const MAX_FILE_MB = 30;
+const MAX_FILE_BYTES = MAX_FILE_MB * 1024 * 1024;
+let currentFile = null;
+let lastResult = null;
+function showSection(id) {
+  const sections = ["upload-section", "loading-section", "results-section", "error-section"];
+  sections.forEach(s => {
+    document.getElementById(s).classList.toggle("hidden", s !== id);
+  });
+}
+function onDragOver(e) {
+  e.preventDefault();
+  document.getElementById("drop-zone").classList.add("dragging");
+}
+function onDragLeave() {
+  document.getElementById("drop-zone").classList.remove("dragging");
+}
+function onDrop(e) {
+  e.preventDefault();
+  document.getElementById("drop-zone").classList.remove("dragging");
+  const file = e.dataTransfer?.files?.[0];
+  if (file) processFile(file);
+}
+function onFileSelected(e) {
+  const file = e.target.files?.[0];
+  if (file) processFile(file);
+}
+function processFile(file) {
+  const allowedExt = [".mp4", ".mov", ".avi", ".mkv"];
+  const ext = "." + file.name.split(".").pop().toLowerCase();
+  if (!allowedExt.includes(ext)) {
+    showError(`❌ Unsupported file type: "${ext}". Please upload MP4, MOV, AVI, or MKV.`);
+    return;
+  }
+  if (file.size > MAX_FILE_BYTES) {
+    const sizeMB = (file.size / 1024 / 1024).toFixed(1);
+    showError(`❌ File too large (${sizeMB} MB). Maximum allowed: ${MAX_FILE_MB} MB.`);
+    return;
+  }
+  currentFile = file;
+  document.getElementById("file-name").textContent = file.name;
+  document.getElementById("file-size").textContent = formatBytes(file.size);
+  const url = URL.createObjectURL(file);
+  document.getElementById("video-preview").src = url;
+  document.getElementById("drop-zone").classList.add("hidden");
+  document.getElementById("file-preview").classList.remove("hidden");
+}
+function resetUpload() {
+  currentFile = null;
+  lastResult = null;
+  document.getElementById("file-input").value = "";
+  const video = document.getElementById("video-preview");
+  if (video.src) URL.revokeObjectURL(video.src);
+  video.src = "";
+  document.getElementById("ring-fill").style.strokeDashoffset = "314";
+  document.getElementById("frame-chart").innerHTML = "";
+  document.getElementById("drop-zone").classList.remove("hidden");
+  document.getElementById("file-preview").classList.add("hidden");
+  showSection("upload-section");
+  const btn = document.getElementById("analyze-btn");
+  if (btn) {
+    btn.disabled = false;
+    btn.innerHTML = '<span class="btn-icon">🔍</span><span>Analyze for Deepfakes</span>';
+  }
+}
+async function analyzeVideo() {
+  if (!currentFile) return;
+  const btn = document.getElementById("analyze-btn");
+  btn.disabled = true;
+  btn.innerHTML = '<span class="btn-icon">⏳</span><span>Uploading...</span>';
+  showSection("loading-section");
+  animateLoadingSteps();
+  const formData = new FormData();
+  formData.append("file", currentFile);
+  try {
+    const response = await fetch(`${API_URL}/predict`, {
+      method: "POST",
+      body: formData,
+    });
+    if (!response.ok) {
+      const errData = await response.json().catch(() => ({ detail: "Unknown server error." }));
+      throw new Error(errData.detail || `Server error: ${response.status}`);
+    }
+    const data = await response.json();
+    lastResult = data;
+    renderResults(data);
+    showSection("results-section");
+  } catch (err) {
+    console.error("Analysis failed:", err);
+    let msg = err.message || "Analysis failed.";
+    if (msg.includes("fetch") || msg.includes("NetworkError") || msg.includes("Failed to fetch")) {
+      msg = "⚠️ Cannot reach the AI server. The server might be waking up. Please wait ~60 sec and try again.";
+    }
+    showError(msg);
+  }
+}
+function renderResults(data) {
+  const isFake = data.verdict === "FAKE";
+  const fakePct = data.fake_probability;
+  const realPct = data.real_probability;
+  const card = document.getElementById("verdict-card");
+  card.classList.remove("is-fake", "is-real");
+  card.classList.add(isFake ? "is-fake" : "is-real");
+  const ring = document.getElementById("ring-fill");
+  const circumference = 314;
+  ring.style.stroke = isFake ? "#ef4444" : "#22c55e";
+  setTimeout(() => {
+    ring.style.strokeDashoffset = circumference - (fakePct / 100) * circumference;
+  }, 100);
+  document.getElementById("verdict-pct").textContent = `${fakePct}%`;
+  const lbl = document.getElementById("verdict-label");
+  lbl.textContent = data.verdict;
+  lbl.style.color = isFake ? "#f87171" : "#4ade80";
+  const badge = document.getElementById("verdict-badge");
+  badge.textContent = isFake ? "⚠️  FAKE DETECTED" : "✅ REAL VIDEO";
+  badge.className = "verdict-badge " + (isFake ? "fake" : "real");
+  document.getElementById("stat-fake").textContent = `${fakePct}%`;
+  document.getElementById("stat-real").textContent = `${realPct}%`;
+  document.getElementById("stat-frames").textContent = `${data.frame_count} frames`;
+  document.getElementById("stat-size").textContent = `${data.file_size_mb} MB`;
+  renderFrameChart(data.per_frame_scores || []);
+}
+function renderFrameChart(scores) {
+  const container = document.getElementById("frame-chart");
+  container.innerHTML = "";
+  if (!scores.length) {
+    container.innerHTML = '<p style="color:var(--text-sub);font-size:13px;padding:20px 0;">No per-frame data.</p>';
+    return;
+  }
+  scores.forEach((score, i) => {
+    const isFakeBar = score > 50;
+    const wrap = document.createElement("div");
+    wrap.className = "bar-wrap";
+    const bar = document.createElement("div");
+    bar.className = `bar ${isFakeBar ? "bar-fake" : "bar-real"}`;
+    bar.style.height = "0%";
+    bar.setAttribute("data-tip", `Frame ${i + 1}: ${score}%`);
+    wrap.appendChild(bar);
+    container.appendChild(wrap);
+    setTimeout(() => { bar.style.height = `${Math.max(4, score)}%`; }, 100 + i * 30);
+  });
+}
+function showError(msg) {
+  document.getElementById("error-msg").textContent = msg;
+  showSection("error-section");
+}
+function animateLoadingSteps() {
+  const steps = ["step-1", "step-2", "step-3"];
+  steps.forEach(s => {
+    document.getElementById(s).classList.remove("active", "done");
+  });
+  let i = 0;
+  function next() {
+    if (i > 0) {
+      document.getElementById(steps[i - 1]).classList.remove("active");
+      document.getElementById(steps[i - 1]).classList.add("done");
+    }
+    if (i < steps.length) {
+      document.getElementById(steps[i]).classList.add("active");
+      i++;
+      setTimeout(next, i < steps.length ? 4000 : 99999);
+    }
+  }
+  next();
+}
+function copyResult() {
+  if (!lastResult) return;
+  const { verdict, fake_probability, real_probability, frame_count, filename } = lastResult;
+  const text =
+    `DeepShield AI — DINO-G50 Result\n` +
+    `File: ${filename}\n` +
+    `Verdict: ${verdict}\n` +
+    `Fake: ${fake_probability}% | Real: ${real_probability}%\n` +
+    `Frames Analyzed: ${frame_count}`;
+  navigator.clipboard?.writeText(text).then(() => {
+    const btn = document.querySelector(".action-secondary");
+    if (btn) {
+      const orig = btn.textContent;
+      btn.textContent = "✅ Copied!";
+      setTimeout(() => { btn.textContent = orig; }, 2000);
+    }
+  }).catch(() => alert(text));
+}
+function formatBytes(bytes) {
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / 1024 / 1024).toFixed(1) + " MB";
+}

static/style.css ADDED Viewed

	@@ -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; }