Spaces:

Sara-Adjo
/

intel-image-classifier

Sleeping

App Files Files Community

Sara-Adjo commited on Apr 15

Commit

4d745da

verified ·

1 Parent(s): bc51538

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +16 -16

templates/index.html CHANGED Viewed

@@ -8,7 +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 {
@@ -36,7 +36,7 @@
       padding: 40px 20px 80px;
     }
-    /* ── Animated grid background ───────────────────────────────────── */
     body::before {
       content: "";
       position: fixed;
@@ -49,7 +49,7 @@
       z-index: 0;
     }
-    /* ── Header ─────────────────────────────────────────────────────── */
     header {
       text-align: center;
       margin-bottom: 48px;
@@ -103,7 +103,7 @@
       letter-spacing: 0.05em;
     }
-    /* ── Main card ──────────────────────────────────────────────────── */
     .card {
       width: 100%;
       max-width: 640px;
@@ -118,7 +118,7 @@
     .card + .card { margin-top: 24px; }
-    /* ── Form ───────────────────────────────────────────────────────── */
     .field-label {
       font-size: 11px;
       letter-spacing: 0.12em;
@@ -268,7 +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);
@@ -280,7 +280,7 @@
       margin-bottom: 24px;
     }
-    /* ── Result section ─────────────────────────────────────────────── */
     .result-header {
       display: flex;
       align-items: center;
@@ -342,7 +342,7 @@
       margin-top: 8px;
     }
-    /* ── Probability bars ───────────────────────────────────────────── */
     .prob-list { display: flex; flex-direction: column; gap: 10px; }
     .prob-row {
@@ -383,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;
@@ -403,7 +403,7 @@
       color: var(--accent);
     }
-    /* ── Footer ─────────────────────────────────────────────────────── */
     footer {
       margin-top: 48px;
       font-size: 11px;
@@ -416,7 +416,7 @@
     footer span { color: var(--accent); }
-    /* ── Responsive ─────────────────────────────────────────────────── */
     @media (max-width: 480px) {
       .card { padding: 24px 18px; }
       .model-btn .icon { font-size: 22px; }
@@ -425,21 +425,21 @@
 </head>
 <body>
-  <!-- Header -->
   <header>
     <div class="logo-badge">NEURAL SCENE CLASSIFIER</div>
     <h1>Intel Image<br/>Classification</h1>
     <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">
@@ -481,7 +481,7 @@
     <a href="/" class="btn-reset">↩ Classify another image</a>
   </div>
-  <!-- ── UPLOAD FORM ──────────────────────────────────────────────────────── -->
   {% else %}
   <div class="card">
     <form method="POST" action="/predict" enctype="multipart/form-data" id="upload-form">
@@ -538,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');

   <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 {
       padding: 40px 20px 80px;
     }
+    /* Animated grid background */
     body::before {
       content: "";
       position: fixed;
       z-index: 0;
     }
+    /* Header */
     header {
       text-align: center;
       margin-bottom: 48px;
       letter-spacing: 0.05em;
     }
+    /* Main card */
     .card {
       width: 100%;
       max-width: 640px;
     .card + .card { margin-top: 24px; }
+    /* Form */
     .field-label {
       font-size: 11px;
       letter-spacing: 0.12em;
       opacity: 0.7;
     }
+    /* Error banner */
     .error-banner {
       background: rgba(255, 80, 80, 0.1);
       border: 1px solid rgba(255, 80, 80, 0.3);
       margin-bottom: 24px;
     }
+    /* Result section */
     .result-header {
       display: flex;
       align-items: center;
       margin-top: 8px;
     }
+    /* Probability bars */
     .prob-list { display: flex; flex-direction: column; gap: 10px; }
     .prob-row {
     .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;
       color: var(--accent);
     }
+    /* Footer */
     footer {
       margin-top: 48px;
       font-size: 11px;
     footer span { color: var(--accent); }
+    /*  Responsive  */
     @media (max-width: 480px) {
       .card { padding: 24px 18px; }
       .model-btn .icon { font-size: 22px; }
 </head>
 <body>
   <header>
     <div class="logo-badge">NEURAL SCENE CLASSIFIER</div>
     <h1>Intel Image<br/>Classification</h1>
     <p class="subtitle">// 6 classes · PyTorch & TensorFlow · Custom CNN</p>
   </header>
   {% if error %}
   <div class="card" style="max-width:640px;width:100%;position:relative;z-index:1;">
     <div class="error-banner">⚠ {{ error }}</div>
   </div>
   {% endif %}
   {% if result %}
   <div class="card">
     <a href="/" class="btn-reset">↩ Classify another image</a>
   </div>
+  <!-- UPLOAD FORM -->
   {% else %}
   <div class="card">
     <form method="POST" action="/predict" enctype="multipart/form-data" id="upload-form">
     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');