Update templates/index.html

templates/index.html

@@ -8,6 +8,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;800&display=swap" rel="stylesheet" />
 
   <style>
+    /* ── Reset & CSS vars ───────────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
@@ -20,8 +21,8 @@
       --muted:     #6b6b80;
       --success:   #4dffb0;
       --radius:    16px;
-      --mono:      'Space Mono', monospace;
-      --sans:      'Syne', sans-serif;
+      --mono:      "Space Mono", monospace;
+      --sans:      "Syne", sans-serif;
     }
 
     body {
@@ -35,9 +36,9 @@
       padding: 40px 20px 80px;
     }
 
-    
+    /* ── Animated grid background ───────────────────────────────────── */
     body::before {
-      content: '';
+      content: "";
       position: fixed;
       inset: 0;
       background-image:
@@ -48,7 +49,7 @@
       z-index: 0;
     }
 
-    
+    /* ── Header ─────────────────────────────────────────────────────── */
     header {
       text-align: center;
       margin-bottom: 48px;
@@ -72,7 +73,7 @@
     }
 
     .logo-badge::before {
-      content: '';
+      content: "";
       width: 6px; height: 6px;
       background: var(--accent);
       border-radius: 50%;
@@ -102,7 +103,7 @@
       letter-spacing: 0.05em;
     }
 
-    
+    /* ── Main card ──────────────────────────────────────────────────── */
     .card {
       width: 100%;
       max-width: 640px;
@@ -117,7 +118,7 @@
 
     .card + .card { margin-top: 24px; }
 
-    
+    /* ── Form ───────────────────────────────────────────────────────── */
     .field-label {
       font-size: 11px;
       letter-spacing: 0.12em;
@@ -128,7 +129,7 @@
       display: block;
     }
 
-    
+    /* Model selector */
     .model-selector {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -267,6 +268,7 @@
       opacity: 0.7;
     }
 
+    /* ── Error banner ───────────────────────────────────────────────── */
     .error-banner {
       background: rgba(255, 80, 80, 0.1);
       border: 1px solid rgba(255, 80, 80, 0.3);
@@ -278,7 +280,7 @@
       margin-bottom: 24px;
     }
 
-  
+    /* ── Result section ─────────────────────────────────────────────── */
     .result-header {
       display: flex;
       align-items: center;
@@ -340,6 +342,7 @@
       margin-top: 8px;
     }
 
+    /* ── Probability bars ───────────────────────────────────────────── */
     .prob-list { display: flex; flex-direction: column; gap: 10px; }
 
     .prob-row {
@@ -380,7 +383,7 @@
     .prob-row.top .prob-name { color: var(--text); font-weight: bold; }
     .prob-row.top .prob-val  { color: var(--success); }
 
-   
+    /* ── Try again button ───────────────────────────────────────────── */
     .btn-reset {
       margin-top: 24px;
       display: block;
@@ -400,6 +403,7 @@
       color: var(--accent);
     }
 
+    /* ── Footer ─────────────────────────────────────────────────────── */
     footer {
       margin-top: 48px;
       font-size: 11px;
@@ -412,7 +416,7 @@
 
     footer span { color: var(--accent); }
 
-  
+    /* ── Responsive ─────────────────────────────────────────────────── */
     @media (max-width: 480px) {
       .card { padding: 24px 18px; }
       .model-btn .icon { font-size: 22px; }
@@ -428,14 +432,14 @@
     <p class="subtitle">// 6 classes · PyTorch & TensorFlow · Custom CNN</p>
   </header>
 
-  
+  <!-- Error banner (if any) -->
   {% if error %}
   <div class="card" style="max-width:640px;width:100%;position:relative;z-index:1;">
     <div class="error-banner">⚠ {{ error }}</div>
   </div>
   {% endif %}
 
-
+  <!-- ── RESULT CARD ─────────────────────────────────────────────────────── -->
   {% if result %}
   <div class="card">
 
@@ -467,7 +471,7 @@
           {{ class_icons.get(cls, '') }} {{ cls }}
         </span>
         <div class="prob-bar-bg">
-          <div class="prob-bar-fill" style="width: {{ prob }}%"></div>
+         <div class="prob-bar-fill" :style="{ width: prob + '%' }"></div>
         </div>
         <span class="prob-val">{{ prob }}%</span>
       </div>
@@ -477,7 +481,7 @@
     <a href="/" class="btn-reset">↩ Classify another image</a>
   </div>
 
-  <!-- UPLOAD FORM -->
+  <!-- ── UPLOAD FORM ──────────────────────────────────────────────────────── -->
   {% else %}
   <div class="card">
     <form method="POST" action="/predict" enctype="multipart/form-data" id="upload-form">
@@ -534,7 +538,7 @@
     Custom CNN — no pretrained weights
   </footer>
 
-
+  <!-- ── JS: drag-drop, preview, loading state ───────────────────────────── -->
   <script>
     const dropZone  = document.getElementById('drop-zone');
     const fileInput = document.getElementById('file-input');