Upload folder using huggingface_hub

frontend/index.html

@@ -20,9 +20,18 @@
   <header class="header">
     <div class="header-inner">
       <div class="logo">
-        <span class="logo-icon">⬡</span>
-        <div>
-          <span class="logo-title">ImageForensics</span><span class="logo-accent">Detect</span>
+        <svg class="logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+          stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 2l9 4.5v9L12 20l-9-4.5v-9L12 2z" />
+          <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+          <path d="M12 7.5l0 1" />
+          <path d="M12 15.5l0 1" />
+          <path d="M7.5 12l1 0" />
+          <path d="M15.5 12l1 0" />
+        </svg>
+        <div class="logo-text-group">
+          <div class="logo-main"><span class="logo-title">ImageForensics</span><span class="logo-accent">Detect</span>
+          </div>
           <div class="logo-sub">Multi-Branch Forensic Analysis System</div>
         </div>
       </div>
@@ -72,7 +81,14 @@
       <div class="section-label">STEP 1 — UPLOAD IMAGE FOR FORENSIC ANALYSIS</div>
       <div class="upload-zone" id="uploadZone">
         <input type="file" id="fileInput" accept="image/*" hidden />
-        <div class="upload-icon">🔬</div>
+        <div class="upload-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="17 8 12 3 7 8" />
+            <line x1="12" y1="3" x2="12" y2="15" />
+          </svg>
+        </div>
         <div class="upload-title">Drop an image here or click to upload</div>
         <div class="upload-sub">Supports JPG · PNG · WebP · BMP · Max 15 MB</div>
         <div class="upload-hint">System detects: <strong>Real Camera Photo</strong> vs <strong>AI-Generated
@@ -105,7 +121,16 @@
 
     <!-- ── Analyzing Spinner ──────────────────────────────────── -->
     <div class="analyzing-state" id="analyzingState" style="display:none">
-      <div class="spinner-ring"></div>
+      <div class="spinner-container">
+        <div class="spinner-ring"></div>
+        <div class="spinner-core">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </div>
+      </div>
       <div class="analyzing-title">Running 5-Branch Forensic Analysis...</div>
       <div class="analyzing-steps" id="analyzingSteps">
         <div class="step-item" id="step-spectral">○ Spectral FFT/DCT Frequency Analysis</div>
@@ -170,7 +195,13 @@
 
         <!-- Spectral -->
         <div class="branch-card" id="bc-spectral">
-          <div class="branch-icon">🌊</div>
+          <div class="branch-icon spectral">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M2 10s3-3 3-3 2 1 2 1 3-3 3-3 2 1 2 1 3-3 3-3" />
+              <path d="M22 14s-3 3-3 3-2-1-2-1-3 3-3 3-2-1-2-1-3 3-3 3" />
+            </svg>
+          </div>
           <div class="branch-info">
             <div class="branch-name">Spectral Branch <span class="branch-tag">Signal</span></div>
             <div class="branch-desc">FFT/DCT frequency-domain artifact detection</div>
@@ -187,7 +218,15 @@
 
         <!-- Edge -->
         <div class="branch-card" id="bc-edge">
-          <div class="branch-icon">✏️</div>
+          <div class="branch-icon edge">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M12 3v18" />
+              <path d="M3 12h18" />
+              <path d="M18 9l-3 3 3 3" />
+              <path d="M6 9l3 3-3 3" />
+            </svg>
+          </div>
           <div class="branch-info">
             <div class="branch-name">Edge Branch <span class="branch-tag">Signal</span></div>
             <div class="branch-desc">Sobel/Laplacian edge & gradient statistics</div>
@@ -204,7 +243,14 @@
 
         <!-- CNN -->
         <div class="branch-card" id="bc-cnn">
-          <div class="branch-icon">🧠</div>
+          <div class="branch-icon cnn">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+              <path d="M12 8v4" />
+              <path d="M12 16h.01" />
+            </svg>
+          </div>
           <div class="branch-info">
             <div class="branch-name">CNN Branch <span class="branch-tag trained">Trained</span></div>
             <div class="branch-desc">EfficientNet-B0 texture & patch analysis</div>
@@ -221,7 +267,14 @@
 
         <!-- ViT -->
         <div class="branch-card" id="bc-vit">
-          <div class="branch-icon">👁️</div>
+          <div class="branch-icon vit">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            </svg>
+          </div>
           <div class="branch-info">
             <div class="branch-name">ViT Branch <span class="branch-tag trained">99.30%</span></div>
             <div class="branch-desc">Vision Transformer global semantic analysis</div>
@@ -238,7 +291,14 @@
 
         <!-- Diffusion -->
         <div class="branch-card" id="bc-diffusion">
-          <div class="branch-icon">💨</div>
+          <div class="branch-icon diffusion">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+              <path d="M4.5 16.5c-1.5 1.26-2 3.1--1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
+              <path d="M15 7c-1.5 1.26-2 3.1--1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
+              <path d="M8 8c-1.5 1.26-2 3.1--1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
+            </svg>
+          </div>
           <div class="branch-info">
             <div class="branch-name">Diffusion Branch <span class="branch-tag">Signal</span></div>
             <div class="branch-desc">Noise residual & denoising trace analysis</div>
@@ -342,7 +402,12 @@
       </div>
       <div class="how-arrow">→</div>
       <div class="how-step">
-        <div class="how-icon">⚖️</div>
+        <div class="how-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </div>
         <div class="how-title">Fusion</div>
         <div class="how-desc">Certainty-weighted probabilistic fusion</div>
       </div>
@@ -361,7 +426,10 @@
 
       <div class="footer-col">
         <div class="footer-brand">
-          <span class="footer-brand-icon">⬡</span>
+          <svg class="footer-brand-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2l9 4.5v9L12 20l-9-4.5v-9L12 2z" />
+          </svg>
           <span class="footer-brand-name">ImageForensics<span class="footer-brand-accent">Detect</span></span>
         </div>
         <p class="footer-tagline">Research-grade multi-branch AI image forensics system for detecting AI-generated

frontend/regenerate_css.py

@@ -0,0 +1,495 @@
+import os
+
+CSS_PATH = "/Users/Deepakkumar/Desktop/B.Tech Project/Image_forensic/ImageForensics-Detect/frontend/style.css"
+
+# I'll use the content I know and the fixes I designed
+new_css = """/* ================================================================
+   ImageForensics-Detect — Frontend CSS
+   Dark theme, glassmorphism, premium micro-animations
+   ================================================================ */
+
+/* ── Tokens ─────────────────────────────────────────────────── */
+:root {
+  --bg: #06080f;
+  --bg2: #0c1018;
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface2: rgba(255, 255, 255, 0.07);
+  --border: rgba(255, 255, 255, 0.08);
+  --border2: rgba(255, 255, 255, 0.14);
+  --accent: #6d9dff;
+  --accent2: #a78bfa;
+  --real: #34d399;
+  --fake: #f87171;
+  --warn: #fbbf24;
+  --text: #e8ecf4;
+  --text2: #8892a4;
+  --text3: #4e5668;
+  --radius: 14px;
+  --radius-lg: 22px;
+  --font: 'Inter', system-ui, -apple-system, sans-serif;
+  --mono: 'JetBrains Mono', monospace;
+  --glow-accent: 0 0 40px rgba(109, 157, 255, 0.18);
+  --glow-fake: 0 0 30px rgba(248, 113, 113, 0.20);
+  --glow-real: 0 0 30px rgba(52, 211, 153, 0.20);
+}
+
+/* ── Reset ───────────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  line-height: 1.6;
+  font-size: clamp(14px, 1.2vw, 16px);
+  background-image:
+    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(109, 157, 255, 0.10) 0%, transparent 70%),
+    radial-gradient(ellipse 60% 40% at 90% 90%, rgba(167, 139, 250, 0.06) 0%, transparent 60%);
+  overflow-x: hidden;
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(6, 8, 15, 0.85);
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+}
+
+.header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+.logo-svg {
+  width: 38px;
+  height: 38px;
+  color: var(--accent);
+  filter: drop-shadow(0 0 8px rgba(109, 157, 255, 0.5));
+  flex-shrink: 0;
+}
+
+.logo-main {
+  display: flex;
+  align-items: center;
+}
+
+.logo-title {
+  font-size: clamp(1.1rem, 2vw, 1.35rem);
+  font-weight: 800;
+  color: var(--text);
+  letter-spacing: -0.5px;
+}
+
+.logo-accent {
+  font-size: clamp(1.1rem, 2vw, 1.35rem);
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.logo-sub {
+  font-size: 0.65rem;
+  color: var(--text3);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-top: 0.1rem;
+}
+
+.header-badges {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* ── Badges ─────────────────────────────────────────────────── */
+.badge {
+  font-size: 0.72rem;
+  font-weight: 600;
+  padding: 0.3rem 0.75rem;
+  border-radius: 999px;
+  letter-spacing: 0.3px;
+}
+
+.badge-research {
+  background: rgba(109, 157, 255, 0.12);
+  color: var(--accent);
+  border: 1px solid rgba(109, 157, 255, 0.25);
+}
+
+.badge-live {
+  background: rgba(52, 211, 153, 0.10);
+  color: var(--real);
+  border: 1px solid rgba(52, 211, 153, 0.25);
+  font-variant-numeric: tabular-nums;
+}
+
+.badge-live.offline {
+  color: var(--fake);
+  background: rgba(248, 113, 113, 0.10);
+  border-color: rgba(248, 113, 113, 0.25);
+}
+
+/* ── Stats Bar ───────────────────────────────────────────────── */
+.stats-bar {
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  padding: 0.8rem 1rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.stats-inner {
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  min-width: 700px;
+}
+
+.stat-item {
+  text-align: center;
+  padding: 0.4rem 1.5rem;
+  transition: transform 0.2s;
+}
+
+.stat-item:hover { transform: translateY(-1px); }
+
+.stat-value {
+  font-size: 1.15rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-label {
+  font-size: 0.62rem;
+  color: var(--text3);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  margin-top: 0.1rem;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+/* ── Main ────────────────────────────────────────────────────── */
+.main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 3rem 1.5rem 5rem;
+}
+
+.section-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--text3);
+  text-transform: uppercase;
+  margin-bottom: 1.2rem;
+}
+
+/* ── Upload Zone ─────────────────────────────────────────────── */
+.upload-zone {
+  border: 2px dashed var(--border2);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  padding: 3.5rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.25s, background 0.25s, transform 0.2s;
+  position: relative;
+}
+
+.upload-zone:hover, .upload-zone.drag-over {
+  border-color: var(--accent);
+  background: rgba(109, 157, 255, 0.05);
+  transform: translateY(-2px);
+  box-shadow: var(--glow-accent);
+}
+
+.upload-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 1.2rem;
+  color: var(--accent);
+  filter: drop-shadow(0 0 15px rgba(109, 157, 255, 0.4));
+}
+
+.upload-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 0.4rem;
+}
+
+.upload-sub { font-size: 0.85rem; color: var(--text2); margin-bottom: 0.4rem; }
+.upload-hint { font-size: 0.78rem; color: var(--text3); margin-bottom: 1.8rem; }
+
+.fmt-chip {
+  font-size: 0.62rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text3);
+  border: 1px solid var(--border);
+  margin: 0 0.2rem;
+}
+
+.preview-area {
+  margin-top: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.2rem;
+  animation: fadeIn 0.3s ease;
+}
+
+.preview-img {
+  width: 90px;
+  height: 90px;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 2px solid var(--border2);
+}
+
+.preview-info { flex: 1; }
+.preview-filename { font-weight: 600; font-size: 0.9rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
+.preview-filesize { font-size: 0.78rem; color: var(--text3); margin-top: 0.2rem; }
+
+/* ── Buttons ─────────────────────────────────────────────────── */
+.btn-upload, .btn-analyze {
+  border: none;
+  cursor: pointer;
+  font-family: var(--font);
+  transition: all 0.2s;
+}
+
+.btn-upload {
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff;
+  border-radius: var(--radius);
+  padding: 0.75rem 2.2rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.btn-analyze {
+  background: linear-gradient(135deg, #3b5bdb, var(--accent2));
+  color: #fff;
+  border-radius: var(--radius);
+  padding: 0.85rem 2.4rem;
+  font-size: 1rem;
+  font-weight: 700;
+  box-shadow: 0 6px 25px rgba(59, 91, 219, 0.4);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-analyze:hover { transform: translateY(-2px); box-shadow: 0 10px 35px rgba(59, 91, 219, 0.5); }
+.btn-clear { background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 1.6rem; font-size: 0.85rem; cursor: pointer; margin-left: 0.8rem; transition: all 0.2s; }
+.btn-clear:hover { border-color: var(--fake); color: var(--fake); }
+
+/* ── Analyzing State ─────────────────────────────────────────── */
+.analyzing-state {
+  text-align: center;
+  padding: 3rem 2rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  animation: fadeIn 0.3s ease;
+}
+
+.spinner-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1.5rem;
+}
+
+.spinner-ring {
+  width: 100%; height: 100%;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+.spinner-core {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--accent); padding: 1.2rem; animation: pulse 1.5s infinite;
+}
+
+.analyzing-title { font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 700; margin-bottom: 1.5rem; color: var(--text); }
+.analyzing-steps { display: inline-flex; flex-direction: column; gap: 0.55rem; text-align: left; }
+.step-item { font-family: var(--mono); font-size: 0.82rem; color: var(--text3); transition: color 0.3s; }
+.step-item.done { color: var(--real); }
+.step-item.active { color: var(--accent); animation: pulse 1s infinite; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+/* ── Verdict Card ────────────────────────────────────────────── */
+.results-section { animation: fadeIn 0.4s ease; }
+.verdict-card {
+  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
+  padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--border);
+  margin-bottom: 2rem; position: relative; overflow: hidden;
+}
+
+.verdict-card.real { border-color: rgba(52, 211, 153, 0.3); box-shadow: var(--glow-real); background: rgba(52, 211, 153, 0.02); }
+.verdict-card.fake { border-color: rgba(248, 113, 113, 0.3); box-shadow: var(--glow-fake); background: rgba(248, 113, 113, 0.02); }
+
+.verdict-icon { font-size: 3.5rem; }
+.verdict-content { flex: 1; min-width: 160px; }
+.verdict-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; color: var(--text3); text-transform: uppercase; margin-bottom: 0.35rem; }
+.verdict-text { font-size: clamp(1.8rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -1px; }
+.verdict-text.real { color: var(--real); }
+.verdict-text.fake { color: var(--fake); }
+.verdict-sub { font-size: 0.85rem; color: var(--text2); margin-top: 0.4rem; }
+
+/* Confidence Ring */
+.confidence-ring-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
+.ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
+.ring-fill { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.ring-fill.real { stroke: var(--real); }
+.ring-fill.fake { stroke: var(--fake); }
+.confidence-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.conf-value { font-size: 1.5rem; font-weight: 800; }
+.conf-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 1px; color: var(--text3); text-transform: uppercase; white-space: nowrap; }
+
+/* Probability Bar */
+.prob-bar-section { margin-top: 1.2rem; }
+.prob-bar-labels { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 600; margin-bottom: 0.4rem; }
+.prob-label-real { color: var(--real); }
+.prob-label-fake { color: var(--fake); }
+.prob-bar-track { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); display: flex; }
+.prob-bar-real { height: 100%; background: var(--real); transition: width 1s ease; }
+.prob-bar-fake { height: 100%; background: var(--fake); transition: width 1s ease; }
+.prob-bar-values { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text3); margin-top: 0.3rem; font-family: var(--mono); }
+
+/* ── Branch Cards ────────────────────────────────────────────── */
+.branches-grid { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; }
+.branches-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; flex-wrap: wrap; gap: 0.5rem; }
+.branches-legend { display: flex; gap: 1rem; align-items: center; font-size: 0.75rem; color: var(--text2); }
+.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.25rem; }
+.legend-dot.real { background: var(--real); }
+.legend-dot.fake { background: var(--fake); }
+
+.branch-card { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--border); transition: background 0.2s; }
+.branch-card:last-child { border-bottom: none; }
+.branch-card:hover { background: rgba(255, 255, 255, 0.02); border-radius: 8px; }
+
+.branch-icon {
+  width: 38px; height: 38px; padding: 0.5rem; display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--text3);
+}
+.branch-icon.spectral { color: #60a5fa; }
+.branch-icon.edge { color: #818cf8; }
+.branch-icon.cnn { color: #34d399; }
+.branch-icon.vit { color: #a78bfa; }
+.branch-icon.diffusion { color: #f472b6; }
+
+.branch-info { flex: 1; min-width: 0; }
+.branch-name { font-weight: 600; font-size: 0.88rem; }
+.branch-desc { font-size: 0.72rem; color: var(--text3); margin-bottom: 0.5rem; }
+.branch-bar-wrap { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 999px; overflow: hidden; }
+.branch-bar { height: 100%; border-radius: 999px; width: 0%; transition: width 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.branch-score-col { text-align: right; flex-shrink: 0; min-width: 80px; }
+.branch-prob { font-family: var(--mono); font-size: 0.9rem; font-weight: 700; }
+.branch-conf { font-size: 0.7rem; color: var(--text3); }
+
+/* ── Viz Section ─────────────────────────────────────────────── */
+.viz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
+.viz-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; }
+.viz-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #000; }
+.viz-img { width: 100%; height: 100%; object-fit: cover; display: none; }
+.viz-img.loaded { display: block; }
+.viz-unavailable { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--text3); padding: 0.5rem; }
+
+/* ── How section & Footer ─────────────────────────────────── */
+.how-section { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3rem 1.5rem; }
+.how-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
+.how-step { text-align: center; flex: 1; min-width: 140px; padding: 1.5rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
+.how-icon { width: 44px; height: 44px; margin: 0 auto 0.8rem; color: var(--accent); }
+.how-arrow { font-size: 1.5rem; color: var(--text3); }
+
+.footer { background: var(--bg2); padding: 4rem 2rem 0; }
+.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border); }
+.footer-brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
+.footer-brand-svg { width: 28px; height: 28px; color: var(--accent); }
+.footer-brand-name { font-size: 1.1rem; font-weight: 800; }
+.footer-brand-accent { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
+.footer-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
+.footer-list li { font-size: 0.78rem; color: var(--text3); }
+.footer-bar { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; padding: 1.5rem 0; font-size: 0.72rem; color: var(--text3); flex-wrap: wrap; gap: 1rem; }
+
+/* ── Responsive ──────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .footer-grid { grid-template-columns: 1fr 1fr; }
+  .how-arrow { display: none; }
+}
+
+@media (max-width: 640px) {
+  .header-inner { flex-direction: column; gap: 1.2rem; text-align: center; }
+  .logo-text-group { text-align: center; }
+  .main { padding: 2rem 1rem 4rem; }
+  .verdict-card { flex-direction: column; text-align: center; padding: 1.5rem; }
+  .verdict-text { font-size: clamp(1.4rem, 5vw, 1.8rem); }
+  .viz-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
+  .footer-grid { grid-template-columns: 1fr; }
+  .footer-bar { flex-direction: column; text-align: center; }
+  .stats-inner { min-width: 600px; justify-content: flex-start; }
+  .branch-desc { display: none; }
+  .branch-card { padding: 0.8rem 0.2rem; gap: 0.75rem; }
+}
+
+@media (max-width: 400px) {
+  .logo-svg { width: 32px; height: 32px; }
+}
+"""
+
+with open(CSS_PATH, "w") as f:
+    f.write(new_css)
+
+print(f"SUCCESS: Regenerated style.css at {CSS_PATH}")

frontend/style.css

@@ -21,7 +21,7 @@
   --text3: #4e5668;
   --radius: 14px;
   --radius-lg: 22px;
-  --font: 'Inter', sans-serif;
+  --font: 'Inter', system-ui, -apple-system, sans-serif;
   --mono: 'JetBrains Mono', monospace;
   --glow-accent: 0 0 40px rgba(109, 157, 255, 0.18);
   --glow-fake: 0 0 30px rgba(248, 113, 113, 0.20);
@@ -47,9 +47,12 @@ body {
   color: var(--text);
   min-height: 100vh;
   line-height: 1.6;
+  font-size: clamp(14px, 1.2vw, 16px);
+  /* Fluid typography */
   background-image:
     radial-gradient(ellipse 80% 50% at 50% -10%, rgba(109, 157, 255, 0.10) 0%, transparent 70%),
     radial-gradient(ellipse 60% 40% at 90% 90%, rgba(167, 139, 250, 0.06) 0%, transparent 60%);
+  overflow-x: hidden;
 }
 
 /* ── Header ─────────────────────────────────────────────────── */
@@ -77,20 +80,28 @@ body {
   gap: 0.9rem;
 }
 
-.logo-icon {
-  font-size: 2rem;
-  filter: drop-shadow(0 0 12px rgba(109, 157, 255, 0.6));
+.logo-svg {
+  width: 38px;
+  height: 38px;
+  color: var(--accent);
+  filter: drop-shadow(0 0 8px rgba(109, 157, 255, 0.5));
+  flex-shrink: 0;
+}
+
+.logo-main {
+  display: flex;
+  align-items: center;
 }
 
 .logo-title {
-  font-size: 1.35rem;
+  font-size: clamp(1.1rem, 2vw, 1.35rem);
   font-weight: 800;
   color: var(--text);
   letter-spacing: -0.5px;
 }
 
 .logo-accent {
-  font-size: 1.35rem;
+  font-size: clamp(1.1rem, 2vw, 1.35rem);
   font-weight: 800;
   background: linear-gradient(135deg, var(--accent), var(--accent2));
   -webkit-background-clip: text;
@@ -99,7 +110,7 @@ body {
 }
 
 .logo-sub {
-  font-size: 0.68rem;
+  font-size: 0.65rem;
   color: var(--text3);
   letter-spacing: 0.5px;
   text-transform: uppercase;
@@ -145,7 +156,9 @@ body {
 .stats-bar {
   background: var(--bg2);
   border-bottom: 1px solid var(--border);
-  padding: 0.8rem 2rem;
+  padding: 0.8rem 1rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .stats-inner {
@@ -153,9 +166,10 @@ body {
   margin: 0 auto;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   gap: 0;
-  flex-wrap: wrap;
+  min-width: 700px;
+  /* Force scroll on mobile */
 }
 
 .stat-item {
@@ -234,8 +248,10 @@ body {
 }
 
 .upload-icon {
-  font-size: 3.5rem;
-  margin-bottom: 1rem;
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 1rem;
+  color: var(--accent);
   filter: drop-shadow(0 0 15px rgba(109, 157, 255, 0.4));
 }
 
@@ -412,27 +428,38 @@ body {
   animation: fadeIn 0.3s ease;
 }
 
+.analyzing-title {
+  font-size: clamp(0.95rem, 2vw, 1.1rem);
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  color: var(--text);
+}
+
+.spinner-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1.5rem;
+}
+
 .spinner-ring {
-  width: 64px;
-  height: 64px;
+  width: 100%;
+  height: 100%;
   border: 3px solid var(--border);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: spin 0.9s linear infinite;
-  margin: 0 auto 1.5rem;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
 }
 
-.analyzing-title {
-  font-size: 1.1rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-  color: var(--text);
+.spinner-core {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  padding: 1.2rem;
+  animation: pulse 1.5s infinite;
 }
 
 .analyzing-steps {
@@ -606,6 +633,7 @@ body {
   letter-spacing: 1px;
   color: var(--text3);
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
 /* ── Probability Bar ─────────────────────────────────────────── */
@@ -753,10 +781,36 @@ body {
 }
 
 .branch-icon {
-  font-size: 1.5rem;
   width: 38px;
-  text-align: center;
+  height: 38px;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--text3);
+}
+
+.branch-icon.spectral {
+  color: #60a5fa;
+}
+
+.branch-icon.edge {
+  color: #818cf8;
+}
+
+.branch-icon.cnn {
+  color: #34d399;
+}
+
+.branch-icon.vit {
+  color: #a78bfa;
+}
+
+.branch-icon.diffusion {
+  color: #f472b6;
 }
 
 .branch-info {
@@ -948,8 +1002,13 @@ body {
 }
 
 .how-icon {
-  font-size: 1.8rem;
-  margin-bottom: 0.5rem;
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 0.5rem;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .how-title {
@@ -1134,33 +1193,42 @@ body {
 @media (max-width: 640px) {
   .header-inner {
     padding: 0.75rem 1rem;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .logo-text-group {
+    text-align: center;
   }
 
   .main {
     padding: 2rem 1rem 4rem;
   }
+}
 
-  .verdict-card {
-    flex-direction: column;
-    text-align: center;
-  }
+.verdict-card {
+  flex-direction: column;
+  text-align: center;
+  padding: 1.5rem;
+  gap: 1.5rem;
+}
 
-  .verdict-text {
-    font-size: 1.7rem;
-  }
+.verdict-text {
+  font-size: clamp(1.4rem, 5vw, 1.8rem);
+}
 
-  .viz-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.viz-grid {
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+}
 
-  .footer-grid {
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-  }
+.footer-grid {
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
 
-  .footer-bar {
-    flex-direction: column;
-    text-align: center;
-    gap: 0.4rem;
-  }
+.footer-bar {
+  flex-direction: column;
+  text-align: center;
+  gap: 0.4rem;
+}
 }