Upload folder using huggingface_hub

frontend/index.html

@@ -390,13 +390,22 @@
   <section class="how-section">
     <div class="how-inner">
       <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">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
+          </svg>
+        </div>
         <div class="how-title">Upload</div>
         <div class="how-desc">Drag & drop any image — real photo or AI-generated</div>
       </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">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4M12 8h.01" />
+          </svg>
+        </div>
         <div class="how-title">5-Branch Analysis</div>
         <div class="how-desc">Spectral · Edge · CNN · ViT · Diffusion run in parallel</div>
       </div>
@@ -413,7 +422,11 @@
       </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">
+            <path d="M18 20V10M12 20V4M6 20v-6" />
+          </svg>
+        </div>
         <div class="how-title">Results</div>
         <div class="how-desc">Prediction, confidence & explainability maps</div>
       </div>
@@ -444,39 +457,69 @@
       <div class="footer-col">
         <div class="footer-col-title">Tech Stack</div>
         <ul class="footer-list">
-          <li>🧠 TensorFlow 2 · EfficientNet-B0</li>
-          <li>👁️ PyTorch 2 · ViT-B/16 · timm</li>
-          <li>📡 FastAPI · Uvicorn</li>
-          <li>🖼️ OpenCV · NumPy · SciPy</li>
-          <li>📊 scikit-learn · Matplotlib</li>
-          <li>🌐 HTML5 · CSS3 · Vanilla JS</li>
+          <li><svg class="footer-icon">
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            </svg> TensorFlow 2 · EfficientNet-B0</li>
+          <li><svg class="footer-icon">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg> PyTorch 2 · ViT-B/16 · timm</li>
+          <li><svg class="footer-icon">
+              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+            </svg> FastAPI · Uvicorn</li>
+          <li><svg class="footer-icon">
+              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2zM12 8v8M8 12h8" />
+            </svg> OpenCV · NumPy · SciPy</li>
+          <li><svg class="footer-icon">
+              <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
+              <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
+            </svg> scikit-learn · Matplotlib</li>
+          <li><svg class="footer-icon">
+              <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" />
+              <path d="M12 6v12M6 12h12" />
+            </svg> HTML5 · CSS3 · Vanilla JS</li>
         </ul>
       </div>
 
-      <div class="footer-col">
+      <div class="footer-col divider">
         <div class="footer-col-title">Detection Branches</div>
-        <ul class="footer-list">
-          <li>🌊 Spectral — FFT/DCT Artifacts</li>
-          <li>✏️ Edge — Sobel/Laplacian</li>
-          <li>🧠 CNN — Texture & Patches</li>
-          <li>👁️ ViT — Global Semantics <span class="footer-accuracy">99.30%</span></li>
-          <li>💨 Diffusion — Noise Residuals</li>
-          <li>⚖️ Fusion — Certainty-Weighted</li>
+        <ul class="footer-list highlight">
+          <li><svg class="footer-icon spectral">
+              <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> Spectral — FFT/DCT</li>
+          <li><svg class="footer-icon edge">
+              <path d="M12 3v18M3 12h18M18 9l-3 3 3 3M6 9l3 3-3 3" />
+            </svg> Edge — Sobel/Laplacian</li>
+          <li><svg class="footer-icon cnn">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+              <path d="M12 8v4M12 16h.01" />
+            </svg> CNN — Texture & Patches</li>
+          <li><svg class="footer-icon vit">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M12 5V3M12 21v-2M5 12H3m18 0h-2M7 7L5.6 5.6m12.8 12.8L17 17M7 17l-1.4 1.4M18.4 5.6L17 7" />
+            </svg> ViT — Global Semantics <span class="footer-accuracy">99.30%</span></li>
+          <li><svg class="footer-icon diffusion">
+              <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" />
+            </svg> Diffusion — Noise Residuals</li>
+          <li><svg class="footer-icon fusion">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg> Fusion — Certainty-Weighted</li>
         </ul>
       </div>
 
-      <div class="footer-col">
+      <div class="footer-col divider">
         <div class="footer-col-title">Research References</div>
-        <ul class="footer-list">
-          <li>Wang et al. (2020) — CNN Detection</li>
-          <li>Frank et al. (2020) — FFT Analysis</li>
+        <ul class="footer-list mini">
+          <li>Wang et al. (2020) — CNN</li>
+          <li>Frank et al. (2020) — FFT</li>
           <li>Corvi et al. (2023) — Diffusion</li>
           <li>Ojha et al. (2023) — Universal Det.</li>
           <li>Selvaraju et al. (2017) — Grad-CAM</li>
         </ul>
-        <div class="footer-col-title" style="margin-top:1rem">Dataset</div>
-        <ul class="footer-list">
-          <li>CIFAKE — 120K images (Kaggle)</li>
+        <div class="footer-col-title" style="margin-top:1.5rem">Dataset</div>
+        <ul class="footer-list mini">
+          <li>CIFAKE — 120K images</li>
           <li>Stable Diffusion v1.4 generated</li>
         </ul>
       </div>

frontend/style.css

@@ -1103,6 +1103,39 @@ body {
   margin-bottom: 0.9rem;
 }
 
+.footer-col.divider {
+  border-left: 1px solid var(--border);
+  padding-left: 2.5rem;
+}
+
+.footer-icon {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.6rem;
+  color: var(--text3);
+  opacity: 0.8;
+  transition: transform 0.2s, color 0.2s;
+}
+
+.footer-list li:hover .footer-icon {
+  color: var(--accent);
+  transform: translateX(2px);
+  opacity: 1;
+}
+
+.footer-list.highlight .footer-icon {
+  color: var(--accent);
+  opacity: 1;
+}
+
+.footer-list.mini li {
+  font-size: 0.7rem;
+  color: var(--text3);
+  margin-bottom: 0.3rem;
+}
+
 .footer-list {
   list-style: none;
   display: flex;
@@ -1114,6 +1147,8 @@ body {
   font-size: 0.76rem;
   color: var(--text3);
   line-height: 1.4;
+  display: flex;
+  align-items: center;
 }
 
 .footer-accuracy {
@@ -1126,16 +1161,16 @@ body {
   margin-left: 0.3rem;
 }
 
-/* Bottom bar */
 .footer-bar {
   max-width: 1100px;
-  margin: 0 auto;
+  margin: 1.5rem auto 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.2rem 0;
   gap: 1rem;
   flex-wrap: wrap;
+  border-top: 1px solid var(--border);
 }
 
 .footer-bar>div {
@@ -1204,31 +1239,37 @@ body {
   .main {
     padding: 2rem 1rem 4rem;
   }
-}
 
-.verdict-card {
-  flex-direction: column;
-  text-align: center;
-  padding: 1.5rem;
-  gap: 1.5rem;
-}
+  .verdict-card {
+    flex-direction: column;
+    text-align: center;
+    padding: 1.5rem;
+    gap: 1.5rem;
+  }
 
-.verdict-text {
-  font-size: clamp(1.4rem, 5vw, 1.8rem);
-}
+  .verdict-text {
+    font-size: clamp(1.4rem, 5vw, 1.8rem);
+  }
 
-.viz-grid {
-  grid-template-columns: repeat(auto-fill, minmax(140px, 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;
+  }
+
+  .footer-col.divider {
+    border-left: none;
+    padding-left: 0;
+    border-top: 1px solid var(--border);
+    padding-top: 1.5rem;
+  }
 }