Spaces:

CyberAl
/

Image_Classification_Parfait_TOLEFO

Sleeping

App Files Files Community

cyberai-1 commited on Apr 15

Commit

fe2e5eb

1 Parent(s): 2390a6e

Update

Browse files

Files changed (2) hide show

templates/index.html +425 -677
templates/index_old.html +857 -648

templates/index.html CHANGED Viewed

@@ -7,507 +7,406 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
   <style>
-    /* ══════════════════════════════════════════════════════════════════
-       TOKENS
-    ══════════════════════════════════════════════════════════════════ */
     :root {
-      --g0:  #000000;
-      --g1:  #050d05;
-      --g2:  #0a150a;
-      --g3:  #0f1f0f;
-      --g4:  #1a2e1a;
-      --green:    #00ff41;
-      --green2:   #00cc33;
-      --green3:   #008f1f;
-      --green-dim:#004d11;
-      --green-glow: rgba(0,255,65,0.15);
-      --border:   rgba(0,255,65,0.18);
-      --border2:  rgba(0,255,65,0.35);
-      --muted:    rgba(0,255,65,0.45);
-      --ff-mono:  'Share Tech Mono', monospace;
-      --ff-head:  'Rajdhani', sans-serif;
-      --ff-body:  'Exo 2', sans-serif;
-      --r: 4px;
-      /*new add*/
-      --bg-main: #160a2f;
-      --bg-deep: #0e061f;
-      --pink: #ff4fa3;
-      --pink-soft: rgba(255, 79, 163, 0.18);
-      --pink-line: rgba(255, 79, 163, 0.28);
-      --white-soft: rgba(255,255,255,0.06);
-    }
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    html { font-size: 16px; scroll-behavior: smooth; }
     body {
       background: var(--g0);
       color: var(--green);
       font-family: var(--ff-body);
-      min-height: 100vh;
-      overflow-x: hidden;
-      cursor: default;
     }
-    /* ── Plexus canvas background ── */
     #plexus-bg {
-      position: fixed;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 0;
-      pointer-events: none;
     }
-    /* ── Grid overlay ── */
     body::before {
-      content: '';
-      position: fixed; inset: 0; z-index: 0; pointer-events: none;
       background-image:
         linear-gradient(rgba(0,255,65,0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0,255,65,0.03) 1px, transparent 1px);
       background-size: 40px 40px;
     }
-    /* Scanline overlay */
     body::after {
-      content: '';
-      position: fixed; inset: 0; z-index: 0; pointer-events: none;
       background: repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 2px,
-        rgba(0,0,0,0.07) 2px,
-        rgba(0,0,0,0.07) 4px
       );
     }
-    /* ══════════════════════════════════════════════════════════════════
-       LAYOUT
-    ══════════════════════════════════════════════════════════════════ */
     .wrapper {
       position: relative; z-index: 1;
-      max-width: 1140px;
       margin: 0 auto;
-      padding: 0 2rem;
     }
-    /* ── HEADER ── */
     header {
       border-bottom: 1px solid var(--border);
-      padding: 1.4rem 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      animation: fadeIn .6s ease both;
-    }
-    .logo {
-      display: flex; align-items: center; gap: 1rem;
     }
     .logo-icon {
-      width: 38px; height: 38px;
-      border: 1.5px solid var(--green);
-      display: grid; place-items: center;
-      font-size: 1.1rem;
       box-shadow: 0 0 14px var(--green-glow), inset 0 0 8px var(--green-glow);
       animation: pulse-box 3s ease-in-out infinite;
     }
     @keyframes pulse-box {
-      0%,100% { box-shadow: 0 0 10px var(--green-glow), inset 0 0 6px var(--green-glow); }
-      50%      { box-shadow: 0 0 22px rgba(0,255,65,.3), inset 0 0 14px rgba(0,255,65,.2); }
     }
     .logo-text {
-      font-family: var(--ff-head);
-      font-size: 1.8rem; font-weight: 700;
-      letter-spacing: .15em;
-      text-shadow: 0 0 20px rgba(0,255,65,.6);
     }
-    .logo-text span { color: var(--green3); }
-    .header-right {
-      display: flex; align-items: center; gap: 1.5rem;
     }
     .status-dot {
-      display: flex; align-items: center; gap: .45rem;
-      font-family: var(--ff-mono); font-size: .65rem; color: var(--muted);
     }
     .dot {
-      width: 6px; height: 6px; border-radius: 50%;
-      background: var(--green);
-      box-shadow: 0 0 8px var(--green);
-      animation: blink 2s step-end infinite;
-    }
-    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
-    .version {
-      font-family: var(--ff-mono); font-size: .6rem;
-      color: var(--green-dim); letter-spacing: .1em;
-    }
-    /* ── HERO ── */
-    .hero {
-      padding: 3rem 0 2rem;
-      animation: fadeIn .7s ease .1s both;
-    }
-    .hero-label {
-      font-family: var(--ff-mono); font-size: .62rem;
-      color: var(--green3); letter-spacing: .2em;
-      text-transform: uppercase; margin-bottom: .6rem;
-    }
-    .hero-title {
-      font-family: var(--ff-head);
-      font-size: clamp(2.2rem, 5vw, 3.4rem);
-      font-weight: 700; letter-spacing: -.01em;
-      line-height: 1.05;
-      text-shadow: 0 0 40px rgba(0,255,65,.3);
-    }
-    .hero-title em {
-      font-style: normal; color: var(--green2);
-      text-shadow: 0 0 30px rgba(0,204,51,.6);
     }
-    .hero-sub {
-      margin-top: .8rem;
-      font-size: .9rem; color: var(--muted);
-      font-family: var(--ff-mono); letter-spacing: .04em;
     }
-    /* ── MAIN GRID ── */
     .main-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      padding-bottom: 4rem;
-      animation: fadeIn .8s ease .2s both;
     }
-    /* ── PANEL BASE ── */
     .panel {
       background: var(--g2);
       border: 1px solid var(--border);
       border-radius: var(--r);
-      padding: 1.75rem;
       position: relative;
-      overflow: hidden;
     }
     .panel::before {
-      content: '';
-      position: absolute; top: 0; left: 0; right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, transparent, var(--green3), transparent);
     }
     .panel-title {
-      font-family: var(--ff-mono); font-size: .6rem;
-      letter-spacing: .2em; color: var(--green3);
-      text-transform: uppercase; margin-bottom: 1.4rem;
-      display: flex; align-items: center; gap: .6rem;
-    }
-    .panel-title::after {
-      content: ''; flex: 1; height: 1px; background: var(--border);
     }
     /* ── MODEL SELECTOR ── */
     .model-grid {
-      display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
-      margin-bottom: 1.5rem;
     }
     .model-card {
-      border: 1px solid var(--border);
-      border-radius: var(--r);
-      padding: 1rem .9rem;
-      cursor: pointer;
-      transition: all .2s;
-      background: var(--g1);
-      display: flex; flex-direction: column; gap: .3rem;
     }
-    .model-card:hover { border-color: var(--green3); background: var(--g3); }
     .model-card.active {
-      border-color: var(--green);
-      background: rgba(0,255,65,.06);
-      box-shadow: 0 0 16px rgba(0,255,65,.12), inset 0 0 12px rgba(0,255,65,.04);
     }
-    .model-card.active .mc-name { color: var(--green); }
-    .mc-icon { font-size: 1.2rem; }
-    .mc-name {
-      font-family: var(--ff-head); font-weight: 600; font-size: 1rem;
-      color: var(--green2); transition: color .2s;
-    }
-    .mc-sub  { font-family: var(--ff-mono); font-size: .58rem; color: var(--muted); }
     /* ── INPUT TABS ── */
     .input-tabs {
-      display: flex; gap: 0; margin-bottom: 1rem;
-      border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
     }
     .tab-btn {
-      flex: 1; padding: .55rem; background: var(--g1);
-      border: none; color: var(--muted); font-family: var(--ff-mono);
-      font-size: .65rem; letter-spacing: .1em; cursor: pointer;
-      transition: all .2s; text-transform: uppercase;
     }
-    .tab-btn:hover  { background: var(--g3); color: var(--green2); }
     .tab-btn.active {
-      background: rgba(0,255,65,.08); color: var(--green);
-      box-shadow: inset 0 -2px 0 var(--green);
     }
-    /* ── DROP ZONE ── */
     .drop-zone {
-      border: 1.5px dashed var(--border2);
-      border-radius: var(--r);
-      min-height: 190px;
-      display: flex; flex-direction: column;
-      align-items: center; justify-content: center;
-      gap: .75rem; cursor: pointer;
-      transition: all .25s; background: var(--g1);
-      position: relative; overflow: hidden;
-    }
-    .drop-zone:hover, .drop-zone.drag {
-      border-color: var(--green);
-      background: rgba(0,255,65,.04);
-      box-shadow: 0 0 20px rgba(0,255,65,.08);
-    }
-    .drop-zone.has-img .dz-ph { display: none; }
     #preview-img {
-      position: absolute; inset: 0;
-      width: 100%; height: 100%; object-fit: cover;
-      display: none; border-radius: calc(var(--r) - 1px);
-      opacity: .85;
-    }
-    .drop-zone.has-img #preview-img { display: block; }
-    .dz-corner {
-      position: absolute; width: 14px; height: 14px;
-      border-color: var(--green3); border-style: solid;
-    }
-    .dz-corner.tl { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
-    .dz-corner.tr { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
-    .dz-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1.5px 1.5px; }
-    .dz-corner.br { bottom: 8px; right: 8px; border-width: 0 1.5px 1.5px 0; }
-    .dz-ph {
-      display: flex; flex-direction: column; align-items: center; gap: .6rem;
-      pointer-events: none;
-    }
     .dz-icon {
-      width: 48px; height: 48px; border: 1px solid var(--border2);
-      border-radius: 50%; display: grid; place-items: center;
-      font-size: 1.3rem; color: var(--green3);
     }
-    .dz-ph p  { font-family: var(--ff-mono); font-size: .72rem; color: var(--muted); }
-    .dz-ph em { font-family: var(--ff-mono); font-size: .6rem; color: var(--green-dim); font-style: normal; }
-    #file-input { display: none; }
     /* ── URL INPUT ── */
-    .url-input-wrap { display: none; flex-direction: column; gap: .6rem; }
-    .url-input-wrap.show { display: flex; }
     .url-field {
-      display: flex; align-items: center;
-      border: 1px solid var(--border2); border-radius: var(--r);
-      background: var(--g1); overflow: hidden;
-    }
-    .url-prefix {
-      font-family: var(--ff-mono); font-size: .65rem;
-      color: var(--green3); padding: 0 .7rem; white-space: nowrap;
-      border-right: 1px solid var(--border);
     }
     .url-input {
-      flex: 1; background: transparent; border: none; outline: none;
-      color: var(--green); font-family: var(--ff-mono); font-size: .75rem;
-      padding: .75rem .8rem;
-      caret-color: var(--green);
     }
-    .url-input::placeholder { color: var(--green-dim); }
     .url-load-btn {
-      padding: .65rem .9rem;
-      background: rgba(0,255,65,.1); border: none;
-      border-left: 1px solid var(--border);
-      color: var(--green2); font-family: var(--ff-mono); font-size: .65rem;
-      cursor: pointer; transition: background .2s; white-space: nowrap;
     }
-    .url-load-btn:hover { background: rgba(0,255,65,.2); }
     .url-preview {
-      width: 100%; height: 140px; object-fit: cover;
-      border-radius: var(--r); border: 1px solid var(--border);
-      display: none;
     }
-    .url-preview.show { display: block; }
     /* ── CLASSIFY BTN ── */
     .classify-btn {
-      width: 100%; margin-top: 1rem;
-      padding: 1rem;
-      background: linear-gradient(135deg, var(--green3), var(--green-dim));
-      border: 1px solid var(--green3); border-radius: var(--r);
-      color: var(--green); font-family: var(--ff-head);
-      font-size: 1.1rem; font-weight: 700; letter-spacing: .1em;
-      cursor: pointer; position: relative; overflow: hidden;
-      transition: all .2s; text-transform: uppercase;
     }
     .classify-btn::before {
-      content: '';
-      position: absolute; top: -2px; left: -100%; width: 60%; height: calc(100% + 4px);
-      background: linear-gradient(90deg, transparent, rgba(0,255,65,.18), transparent);
-      transform: skewX(-15deg);
     }
-    .classify-btn.loading::before {
-      animation: sweep 1.2s linear infinite;
-    }
-    @keyframes sweep { to { left: 150%; } }
     .classify-btn:not(:disabled):hover {
-      background: linear-gradient(135deg, var(--green2), var(--green3));
-      box-shadow: 0 0 24px rgba(0,255,65,.3);
-      transform: translateY(-1px);
     }
-    .classify-btn:disabled { opacity: .35; cursor: default; }
-    /* ══════════════════════════════════════════════════════════════════
-       RIGHT PANEL — RESULTS
-    ══════════════════════════════════════════════════════════════════ */
-    /* Waiting state */
     .result-waiting {
-      display: flex; flex-direction: column;
-      align-items: flex-start; justify-content: center;
-      min-height: 200px; gap: .6rem;
-      padding: 1rem 0;
-    }
-    .result-waiting .rw-title {
-      font-family: var(--ff-head); font-size: 1rem; font-weight: 600;
-      color: var(--green3);
-    }
-    .result-waiting .rw-sub {
-      font-family: var(--ff-mono); font-size: .7rem;
-      color: var(--green-dim); line-height: 1.7;
     }
     .terminal-cursor {
-      display: inline-block; width: 8px; height: 14px;
-      background: var(--green); margin-left: 2px;
-      animation: blink-c .8s step-end infinite;
-      vertical-align: middle;
     }
-    @keyframes blink-c { 0%,100%{opacity:1} 50%{opacity:0} }
-    /* Result */
-    .result-content { display: none; flex-direction: column; gap: 1.4rem; }
-    .result-content.show { display: flex; animation: scanIn .4s ease; }
     @keyframes scanIn {
-      from { opacity: 0; clip-path: inset(0 0 100% 0); }
-      to   { opacity: 1; clip-path: inset(0 0 0% 0); }
     }
-    .rc-header { display: flex; flex-direction: column; gap: .25rem; }
-    .rc-label {
-      font-family: var(--ff-mono); font-size: .6rem;
-      letter-spacing: .2em; color: var(--green3);
     }
-    .rc-class {
-      font-family: var(--ff-head);
-      font-size: 3rem; font-weight: 700;
-      letter-spacing: -.01em; line-height: 1;
-      color: var(--green);
-      text-shadow: 0 0 30px rgba(0,255,65,.5);
-    }
-    .rc-conf {
-      font-family: var(--ff-mono); font-size: .78rem;
-      color: var(--muted); margin-top: .1rem;
-    }
-    .rc-conf strong { color: var(--green2); font-size: .9rem; }
-    /* Main confidence bar */
     .conf-track {
-      height: 3px; background: var(--g4);
-      border-radius: 99px; overflow: hidden; margin-top: .5rem;
     }
     .conf-fill {
-      height: 100%;
-      background: linear-gradient(90deg, var(--green3), var(--green));
-      border-radius: 99px; width: 0%;
-      transition: width 1s cubic-bezier(.4,0,.2,1);
-      box-shadow: 0 0 8px var(--green);
     }
-    /* Divider */
-    .rc-divider {
-      height: 1px; background: var(--border);
-    }
-    /* Probability bars */
-    .prob-list { display: flex; flex-direction: column; gap: .85rem; }
-    .prob-row  { display: flex; flex-direction: column; gap: .22rem; }
-    .prob-meta { display: flex; justify-content: space-between; align-items: baseline; }
     .prob-name {
-      font-family: var(--ff-body); font-size: .8rem;
-      font-weight: 400; color: var(--muted);
-      display: flex; align-items: center; gap: .4rem; text-transform: capitalize;
-    }
-    .prob-row.top .prob-name { color: var(--green); font-weight: 600; }
-    .prob-pct  { font-family: var(--ff-mono); font-size: .68rem; color: var(--green-dim); }
-    .prob-row.top .prob-pct { color: var(--green2); }
-    .prob-track {
-      height: 4px; background: var(--g4);
-      border-radius: 99px; overflow: hidden;
-    }
-    .prob-fill {
-      height: 100%; background: var(--green-dim);
-      border-radius: 99px; width: 0%;
-      transition: width .8s cubic-bezier(.4,0,.2,1);
     }
     .prob-row.top .prob-fill {
-      background: linear-gradient(90deg, var(--green3), var(--green));
-      box-shadow: 0 0 6px rgba(0,255,65,.4);
     }
-    /* Error */
     .result-error {
-      display: none; padding: 1rem;
-      border: 1px solid rgba(255,50,50,.3);
-      border-radius: var(--r); background: rgba(255,0,0,.05);
-      font-family: var(--ff-mono); font-size: .75rem; color: #ff4444;
-      line-height: 1.6;
     }
-    .result-error.show { display: block; animation: fadeIn .3s ease; }
-    /* ── CLASSES STRIP ── */
-    .classes-strip {
       border-top: 1px solid var(--border);
-      padding: 1rem 0;
-      display: flex; align-items: center; gap: 1.2rem;
-      flex-wrap: wrap;
-      animation: fadeIn .9s ease .3s both;
-    }
-    .cs-label { font-family: var(--ff-mono); font-size: .55rem; color: var(--green-dim); letter-spacing: .15em; }
-    .cs-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
-    .cs-pill {
-      font-family: var(--ff-mono); font-size: .6rem;
-      padding: .25rem .65rem;
-      border: 1px solid var(--border); border-radius: 2px;
-      color: var(--green-dim);
-      transition: all .2s; cursor: default;
-    }
-    .cs-pill:hover { border-color: var(--green3); color: var(--green2); }
-    /* ── FOOTER ── */
-    footer {
-      border-top: 1px solid var(--border);
-      padding: 1rem 0;
       display: flex; justify-content: space-between; align-items: center;
-      animation: fadeIn 1s ease .4s both;
     }
-    footer p { font-family: var(--ff-mono); font-size: .6rem; color: var(--green-dim); }
-    /* ── ANIMATIONS ── */
-    @keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1;transform:none} }
-    /* ── RESPONSIVE ── */
-    @media (max-width: 740px) {
-      .main-grid { grid-template-columns: 1fr; }
-      .hero-title { font-size: 2rem; }
-      .model-grid { grid-template-columns: 1fr 1fr; }
-    }
   </style>
 </head>
 <body>
-  <!-- Animated plexus background -->
   <canvas id="plexus-bg"></canvas>
     <!-- HEADER -->
     <header>
       <div class="logo">
@@ -520,11 +419,17 @@
       </div>
     </header>
-    <!-- HERO -->
-    <div class="hero">
-      <div class="hero-label">// Intel Image Classification · CNN</div>
-      <h1 class="hero-title">Scene Recognition<br><em>Powered by Neural Networks</em></h1>
-      <p class="hero-sub">Upload an image or provide a URL — select your model — get instant predictions across 6 scene categories.</p>
     </div>
     <!-- MAIN GRID -->
@@ -534,56 +439,58 @@
       <div class="panel">
         <div class="panel-title">01 // MODEL_SELECT</div>
-        <div class="model-grid">
-          <div class="model-card active" data-fw="pytorch" onclick="selectModel(this)">
-            <span class="mc-icon">⚡</span>
-            <span class="mc-name">PyTorch</span>
-            <span class="mc-sub">CNN_Torch · .pth</span>
           </div>
-          <div class="model-card" data-fw="tensorflow" onclick="selectModel(this)">
-            <span class="mc-icon">🧠</span>
-            <span class="mc-name">TensorFlow</span>
-            <span class="mc-sub">CNN_TF · .keras</span>
           </div>
-        </div>
-        <div class="panel-title">02 // INPUT_IMAGE</div>
-        <!-- Tabs: File / URL -->
-        <div class="input-tabs">
-          <button class="tab-btn active" onclick="switchTab('file', this)">↑ FILE_UPLOAD</button>
-          <button class="tab-btn" onclick="switchTab('url', this)">⬡ IMAGE_URL</button>
-        </div>
-        <!-- File drop zone -->
-        <div id="tab-file">
-          <div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()">
-            <div class="dz-corner tl"></div>
-            <div class="dz-corner tr"></div>
-            <div class="dz-corner bl"></div>
-            <div class="dz-corner br"></div>
-            <img id="preview-img" src="" alt="preview"/>
-            <div class="dz-ph">
-              <div class="dz-icon">↑</div>
-              <p>Drop image here or click</p>
-              <em>JPG · PNG · WEBP · GIF</em>
             </div>
           </div>
-          <input type="file" id="file-input" accept="image/*"/>
-        </div>
-        <!-- URL input -->
-        <div id="tab-url" class="url-input-wrap">
-          <div class="url-field">
-            <span class="url-prefix">URL://</span>
-            <input type="text" class="url-input" id="url-input"
-              placeholder="https://example.com/image.jpg"/>
-            <button class="url-load-btn" onclick="loadFromUrl()">LOAD</button>
           </div>
-          <img id="url-preview" class="url-preview" src="" alt="URL preview"/>
-        </div>
-        <div class="panel-title" style="margin-top:1.2rem;">03 // ANALYZE</div>
         <button class="classify-btn" id="classify-btn" disabled onclick="classify()">
           RUN CLASSIFICATION →
         </button>
@@ -593,92 +500,75 @@
       <div class="panel">
         <div class="panel-title">04 // SCAN_RESULTS</div>
-        <!-- Waiting -->
-        <div class="result-waiting" id="result-waiting">
-          <div class="rw-title">AWAITING INPUT</div>
-          <div class="rw-sub">
-            &gt; select_model()<br>
-            &gt; load_image() <span class="terminal-cursor"></span><br>
-            &gt; predict()
-          </div>
-        </div>
-        <!-- Results -->
-        <div class="result-content" id="result-content">
-          <div class="rc-header">
-            <div class="rc-label">// PREDICTED_CLASS</div>
-            <div class="rc-class" id="rc-class">—</div>
-            <div class="rc-conf">confidence : <strong id="rc-conf">—</strong></div>
-            <div class="conf-track"><div class="conf-fill" id="conf-fill"></div></div>
-          </div>
-          <div class="rc-divider"></div>
-          <div>
-            <div class="panel-title" style="margin-bottom:.9rem;">// CLASS_SCORES</div>
-            <div class="prob-list" id="prob-list"></div>
           </div>
-        </div>
-        <!-- Error -->
-        <div class="result-error" id="result-error"></div>
-      </div>
-    </div>
-    <!-- CLASSES STRIP -->
-    <div class="classes-strip">
-      <span class="cs-label">CLASSES</span>
-      <div class="cs-pills">
-        <span class="cs-pill">🏙 buildings</span>
-        <span class="cs-pill">🌲 forest</span>
-        <span class="cs-pill">🧊 glacier</span>
-        <span class="cs-pill">⛰ mountain</span>
-        <span class="cs-pill">🌊 sea</span>
-        <span class="cs-pill">🛣 street</span>
       </div>
-    </div>
-    <footer>
       <p>SCENEIQ · Intel Image Classification · CNN PyTorch &amp; TensorFlow</p>
       <p>by PARFAIT · seed=42 · reproducible</p>
-    </footer>
   </div><!-- /wrapper -->
   <script>
-    const EMOJIS = {buildings:"🏙",forest:"🌲",glacier:"🧊",mountain:"⛰",sea:"🌊",street:"🛣"};
     const CLASSES = ["buildings","forest","glacier","mountain","sea","street"];
-    let selectedFw   = "pytorch";
-    let selectedFile = null;
     let urlImageReady = false;
-    let currentTab   = "file";
-    /* ── Model selector ── */
     function selectModel(card) {
       document.querySelectorAll(".model-card").forEach(c => c.classList.remove("active"));
       card.classList.add("active");
       selectedFw = card.dataset.fw;
     }
-    /* ── Tab switcher ── */
     function switchTab(tab, btn) {
       currentTab = tab;
       document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
       btn.classList.add("active");
       document.getElementById("tab-file").style.display = tab === "file" ? "block" : "none";
-      const urlWrap = document.getElementById("tab-url");
-      urlWrap.classList.toggle("show", tab === "url");
       updateBtn();
     }
-    /* ── File drag & drop ── */
-    const dropZone = document.getElementById("drop-zone");
     const fileInput = document.getElementById("file-input");
-    fileInput.addEventListener("change", () => {
-      if (fileInput.files[0]) loadFile(fileInput.files[0]);
-    });
-    dropZone.addEventListener("dragover", e => { e.preventDefault(); dropZone.classList.add("drag"); });
     dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag"));
     dropZone.addEventListener("drop", e => {
       e.preventDefault(); dropZone.classList.remove("drag");
@@ -690,61 +580,37 @@
       selectedFile = file;
       const reader = new FileReader();
       reader.onload = e => {
-        const img = document.getElementById("preview-img");
-        img.src = e.target.result;
         dropZone.classList.add("has-img");
       };
       reader.readAsDataURL(file);
-      resetResult();
-      updateBtn();
     }
-    /* ── URL load ── */
     function loadFromUrl() {
-      const url = document.getElementById("url-input").value.trim();
       if (!url) return;
       const preview = document.getElementById("url-preview");
-      preview.onload = () => {
-        preview.classList.add("show");
-        urlImageReady = true;
-        resetResult();
-        updateBtn();
-      };
-      preview.onerror = () => {
-        preview.classList.remove("show");
-        urlImageReady = false;
-        updateBtn();
-      };
       preview.src = url;
     }
-    // Allow Enter key on URL input
-    document.getElementById("url-input").addEventListener("keydown", e => {
-      if (e.key === "Enter") loadFromUrl();
-    });
-    /* ── Update classify button ── */
     function updateBtn() {
-      const ready = (currentTab === "file" && selectedFile) ||
-                    (currentTab === "url"  && urlImageReady);
       document.getElementById("classify-btn").disabled = !ready;
     }
-    /* ── Classify ── */
     async function classify() {
       const btn = document.getElementById("classify-btn");
-      btn.disabled = true;
-      btn.textContent = "SCANNING…";
-      btn.classList.add("loading");
       const form = new FormData();
       form.append("model", selectedFw);
-      if (currentTab === "file" && selectedFile) {
-        form.append("image", selectedFile);
-      } else {
-        form.append("image_url", document.getElementById("url-input").value.trim());
-      }
       try {
         const res  = await fetch("/predict", { method: "POST", body: form });
@@ -754,36 +620,26 @@
       } catch(err) {
         showError(err.message);
       } finally {
-        btn.textContent = "RUN CLASSIFICATION →";
-        btn.classList.remove("loading");
-        btn.disabled = false;
       }
     }
-    /* ── Show result ── */
     function showResult(data) {
-      document.getElementById("result-waiting").style.display  = "none";
       document.getElementById("result-error").classList.remove("show");
       const pct = Math.round(data.confidence * 100);
       document.getElementById("rc-class").textContent =
-        (EMOJIS[data.class] || "") + " " + data.class.charAt(0).toUpperCase() + data.class.slice(1);
       document.getElementById("rc-conf").textContent = pct + "%";
       const content = document.getElementById("result-content");
-      content.classList.remove("show");
-      void content.offsetWidth; // force reflow for animation
-      content.classList.add("show");
-      setTimeout(() => {
-        document.getElementById("conf-fill").style.width = pct + "%";
-      }, 60);
-      // Probability bars
-      const list = document.getElementById("prob-list");
       list.innerHTML = "";
-      const sorted = [...CLASSES].sort((a,b) => data.probabilities[b] - data.probabilities[a]);
       sorted.forEach((cls, i) => {
         const p   = Math.round(data.probabilities[cls] * 100);
         const top = cls === data.class;
@@ -791,194 +647,86 @@
         row.className = "prob-row" + (top ? " top" : "");
         row.innerHTML = `
           <div class="prob-meta">
-            <span class="prob-name">${EMOJIS[cls] || ""} ${cls}</span>
             <span class="prob-pct" id="pct-${cls}">0%</span>
           </div>
-          <div class="prob-track">
-            <div class="prob-fill" id="bar-${cls}"></div>
-          </div>`;
         list.appendChild(row);
         setTimeout(() => {
-          document.getElementById("bar-" + cls).style.width = p + "%";
-          document.getElementById("pct-" + cls).textContent = p + "%";
-        }, 100 + i * 50);
       });
     }
     function showError(msg) {
-      document.getElementById("result-waiting").style.display  = "none";
       document.getElementById("result-content").classList.remove("show");
       const err = document.getElementById("result-error");
-      err.textContent = "ERROR > " + msg;
-      err.classList.add("show");
     }
     function resetResult() {
-      document.getElementById("result-waiting").style.display  = "flex";
       document.getElementById("result-content").classList.remove("show");
       document.getElementById("result-error").classList.remove("show");
       document.getElementById("conf-fill").style.width = "0%";
     }
-    // Init
     document.getElementById("tab-file").style.display = "block";
   </script>
-  <!-- ══ PLEXUS BACKGROUND ANIMATION ══ -->
   <script>
   (function(){
     const canvas = document.getElementById('plexus-bg');
     const ctx    = canvas.getContext('2d');
-    const NODE_COLOR = 'rgba(0,255,65,';
-    const LINE_COLOR = 'rgba(0,255,65,';
-    const MAX_DIST      = 160;
-    const MOUSE_DIST    = 220;
-    const ATTRACT_FORCE = 0.012;
-    const NODE_COUNT    = 110;
-    const SPEED         = 0.4;
-    let W, H, nodes = [];
-    let mouse = { x: -9999, y: -9999 };
-    window.addEventListener('mousemove', e => {
-      mouse.x = e.clientX;
-      mouse.y = e.clientY;
-    });
-    window.addEventListener('mouseleave', () => {
-      mouse.x = -9999;
-      mouse.y = -9999;
-    });
-    function resize() {
-      W = canvas.width  = window.innerWidth;
-      H = canvas.height = window.innerHeight;
-    }
-    function Node() {
-      this.x  = Math.random() * W;
-      this.y  = Math.random() * H;
-      this.vx = (Math.random() - 0.5) * SPEED;
-      this.vy = (Math.random() - 0.5) * SPEED;
-      this.r  = Math.random() * 2 + 1.5;
-    }
-    function init() {
-      nodes = [];
-      for (let i = 0; i < NODE_COUNT; i++) nodes.push(new Node());
-    }
-    function draw() {
-      ctx.clearRect(0, 0, W, H);
-      for (const n of nodes) {
-        const dxM = mouse.x - n.x;
-        const dyM = mouse.y - n.y;
-        const dM  = Math.sqrt(dxM * dxM + dyM * dyM);
-        if (dM < MOUSE_DIST && dM > 0) {
-          const force = (1 - dM / MOUSE_DIST) * ATTRACT_FORCE;
-          n.vx += dxM / dM * force;
-          n.vy += dyM / dM * force;
-        }
-        const spd = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
-        const maxSpd = SPEED * 3;
-        if (spd > maxSpd) {
-          n.vx = (n.vx / spd) * maxSpd;
-          n.vy = (n.vy / spd) * maxSpd;
-        }
-        if (dM >= MOUSE_DIST) {
-          n.vx *= 0.996;
-          n.vy *= 0.996;
-          const spdNow = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
-          if (spdNow < SPEED * 0.3) {
-            n.vx += (Math.random() - 0.5) * 0.06;
-            n.vy += (Math.random() - 0.5) * 0.06;
-          }
-        }
-        n.x += n.vx;
-        n.y += n.vy;
-        if (n.x < 0 || n.x > W) n.vx *= -1;
-        if (n.y < 0 || n.y > H) n.vy *= -1;
       }
-      // Edges between nodes
-      for (let i = 0; i < nodes.length; i++) {
-        for (let j = i + 1; j < nodes.length; j++) {
-          const a  = nodes[i], b = nodes[j];
-          const dx = a.x - b.x, dy = a.y - b.y;
-          const d  = Math.sqrt(dx * dx + dy * dy);
-          if (d < MAX_DIST) {
-            const alpha = (1 - d / MAX_DIST) * 0.28;
-            ctx.beginPath();
-            ctx.moveTo(a.x, a.y);
-            ctx.lineTo(b.x, b.y);
-            ctx.strokeStyle = LINE_COLOR + alpha + ')';
-            ctx.lineWidth   = 0.8;
-            ctx.stroke();
-          }
-        }
       }
-      // Lines from cursor to nearby nodes
-      for (const n of nodes) {
-        const dxM = mouse.x - n.x;
-        const dyM = mouse.y - n.y;
-        const dM  = Math.sqrt(dxM * dxM + dyM * dyM);
-        if (dM < MOUSE_DIST) {
-          const alpha = (1 - dM / MOUSE_DIST) * 0.35;
-          ctx.beginPath();
-          ctx.moveTo(mouse.x, mouse.y);
-          ctx.lineTo(n.x, n.y);
-          ctx.strokeStyle = LINE_COLOR + alpha + ')';
-          ctx.lineWidth   = 0.5;
-          ctx.stroke();
-        }
       }
-      // Cursor glow dot
-      if (mouse.x > 0) {
-        const grdC = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 20);
-        grdC.addColorStop(0, 'rgba(0,255,65,0.5)');
-        grdC.addColorStop(1, 'rgba(0,255,65,0)');
-        ctx.beginPath();
-        ctx.arc(mouse.x, mouse.y, 20, 0, Math.PI * 2);
-        ctx.fillStyle = grdC;
-        ctx.fill();
-        ctx.beginPath();
-        ctx.arc(mouse.x, mouse.y, 2, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(0,255,65,0.95)';
-        ctx.fill();
       }
-      // Nodes with glow
-      for (const n of nodes) {
-        const grd = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 5);
-        grd.addColorStop(0, NODE_COLOR + '0.3)');
-        grd.addColorStop(1, NODE_COLOR + '0)');
-        ctx.beginPath();
-        ctx.arc(n.x, n.y, n.r * 5, 0, Math.PI * 2);
-        ctx.fillStyle = grd;
-        ctx.fill();
-        ctx.beginPath();
-        ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
-        ctx.fillStyle = NODE_COLOR + '0.85)';
-        ctx.fill();
       }
       requestAnimationFrame(draw);
     }
-    resize();
-    init();
-    draw();
-    window.addEventListener('resize', () => { resize(); init(); });
   })();
   </script>
 </body>

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
   <style>
+    /* ══ TOKENS ══ */
     :root {
+      --g0:#000000; --g1:#050d05; --g2:#0a150a; --g3:#0f1f0f; --g4:#1a2e1a;
+      --green:#00ff41; --green2:#00cc33; --green3:#008f1f;
+      --green-dim:#004d11; --green-glow:rgba(0,255,65,0.15);
+      --border:rgba(0,255,65,0.18); --border2:rgba(0,255,65,0.35);
+      --muted:rgba(0,255,65,0.45);
+      --ff-mono:'Share Tech Mono',monospace;
+      --ff-head:'Rajdhani',sans-serif;
+      --ff-body:'Exo 2',sans-serif;
+      --r:4px;
+    }
+    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
+    /* ── FULL VIEWPORT — no scroll ── */
+    html, body {
+      height: 100vh;
+      overflow: hidden;
+    }
     body {
       background: var(--g0);
       color: var(--green);
       font-family: var(--ff-body);
+      display: flex;
+      flex-direction: column;
     }
+    /* ── Background layers ── */
     #plexus-bg {
+      position: fixed; inset: 0; z-index: 0; pointer-events: none;
     }
     body::before {
+      content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
       background-image:
         linear-gradient(rgba(0,255,65,0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0,255,65,0.03) 1px, transparent 1px);
       background-size: 40px 40px;
     }
     body::after {
+      content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
       background: repeating-linear-gradient(
+        0deg, transparent, transparent 2px,
+        rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
       );
     }
+    /* ══ WRAPPER — flex column, full height ══ */
     .wrapper {
       position: relative; z-index: 1;
+      width: 100%; max-width: 1200px;
       margin: 0 auto;
+      padding: 0 1.5rem;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
     }
+    /* ══ HEADER — compact, fixed height ══ */
     header {
+      flex-shrink: 0;
       border-bottom: 1px solid var(--border);
+      padding: .75rem 0;
+      display: flex; align-items: center; justify-content: space-between;
+      animation: fadeIn .5s ease both;
     }
+    .logo { display:flex; align-items:center; gap:.75rem; }
     .logo-icon {
+      width:32px; height:32px; border:1.5px solid var(--green);
+      display:grid; place-items:center; font-size:.95rem;
       box-shadow: 0 0 14px var(--green-glow), inset 0 0 8px var(--green-glow);
       animation: pulse-box 3s ease-in-out infinite;
     }
     @keyframes pulse-box {
+      0%,100%{box-shadow:0 0 10px var(--green-glow),inset 0 0 6px var(--green-glow);}
+      50%{box-shadow:0 0 22px rgba(0,255,65,.3),inset 0 0 14px rgba(0,255,65,.2);}
     }
     .logo-text {
+      font-family:var(--ff-head); font-size:1.5rem; font-weight:700;
+      letter-spacing:.15em; text-shadow:0 0 20px rgba(0,255,65,.6);
     }
+    .logo-text span { color:var(--green3); }
+    /* Hero tagline inline in header */
+    .hero-inline {
+      font-family:var(--ff-mono); font-size:0.5rem;
+      color:var(--muted); letter-spacing:.06em;
+      display:none;
     }
+    .header-right { display:flex; align-items:center; gap:1.2rem; }
     .status-dot {
+      display:flex; align-items:center; gap:.4rem;
+      font-family:var(--ff-mono); font-size:0.5rem; color:var(--muted);
     }
     .dot {
+      width:6px; height:6px; border-radius:50%;
+      background:var(--green); box-shadow:0 0 8px var(--green);
+      animation:blink 2s step-end infinite;
+    }
+    @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
+    .version { font-family:var(--ff-mono); font-size:.58rem; color:var(--green-dim); letter-spacing:.1em; }
+    /* ── Classes strip row — sits between header and grid ── */
+    .classes-bar {
+      flex-shrink: 0;
+      display: flex; align-items: center; gap: .8rem;
+      padding: .4rem 0;
+      border-bottom: 1px solid var(--border);
+      animation: fadeIn .6s ease .1s both;
     }
+    .cs-label { font-family:var(--ff-mono); font-size:.52rem; color:var(--green-dim); letter-spacing:.15em; white-space:nowrap; }
+    .cs-pills  { display:flex; gap:.35rem; flex-wrap:wrap; }
+    .cs-pill {
+      font-family:var(--ff-mono); font-size:.55rem;
+      padding:.15rem .5rem;
+      border:1px solid var(--border); border-radius:2px;
+      color:var(--green-dim); transition:all .2s; cursor:default;
     }
+    .cs-pill:hover { border-color:var(--green3); color:var(--green2); }
+    /* ══ MAIN GRID — takes all remaining space ══ */
     .main-grid {
+      flex: 1;
+      min-height: 0;               /* critical: allows flex child to shrink */
       display: grid;
       grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+      padding: .75rem 0;
+      animation: fadeIn .7s ease .15s both;
     }
+    /* ══ PANELS — fill their grid cell ══ */
     .panel {
       background: var(--g2);
       border: 1px solid var(--border);
       border-radius: var(--r);
+      padding: 1.1rem 1.25rem;
       position: relative;
+      overflow: hidden;           /* no overflow on panel itself */
+      display: flex;
+      flex-direction: column;
     }
     .panel::before {
+      content:''; position:absolute; top:0; left:0; right:0; height:2px;
+      background:linear-gradient(90deg,transparent,var(--green3),transparent);
     }
     .panel-title {
+      flex-shrink: 0;
+      font-family:var(--ff-mono); font-size:.58rem;
+      letter-spacing:.2em; color:var(--green3);
+      text-transform:uppercase; margin-bottom:.75rem;
+      display:flex; align-items:center; gap:.6rem;
+    }
+    .panel-title::after { content:''; flex:1; height:1px; background:var(--border); }
+    /* ── Left panel: scrollable interior ── */
+    .panel-scroll {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: none;       /* Firefox */
     }
+    .panel-scroll::-webkit-scrollbar { display:none; }
     /* ── MODEL SELECTOR ── */
     .model-grid {
+      display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
+      margin-bottom:.9rem;
     }
     .model-card {
+      border:1px solid var(--border); border-radius:var(--r);
+      padding:.6rem .7rem; cursor:pointer; transition:all .2s;
+      background:var(--g1);
+      display:flex; flex-direction:column; gap:.2rem;
     }
+    .model-card:hover { border-color:var(--green3); background:var(--g3); }
     .model-card.active {
+      border-color:var(--green); background:rgba(0,255,65,.06);
+      box-shadow:0 0 16px rgba(0,255,65,.12),inset 0 0 12px rgba(0,255,65,.04);
     }
+    .model-card.active .mc-name { color:var(--green); }
+    .mc-icon { font-size:1rem; }
+    .mc-name { font-family:var(--ff-head); font-weight:600; font-size:.9rem; color:var(--green2); transition:color .2s; }
+    .mc-sub  { font-family:var(--ff-mono); font-size:.54rem; color:var(--muted); }
     /* ── INPUT TABS ── */
     .input-tabs {
+      display:flex; margin-bottom:.6rem;
+      border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
     }
     .tab-btn {
+      flex:1; padding:.45rem; background:var(--g1);
+      border:none; color:var(--muted); font-family:var(--ff-mono);
+      font-size:0.5rem; letter-spacing:.1em; cursor:pointer;
+      transition:all .2s; text-transform:uppercase;
     }
+    .tab-btn:hover  { background:var(--g3); color:var(--green2); }
     .tab-btn.active {
+      background:rgba(0,255,65,.08); color:var(--green);
+      box-shadow:inset 0 -2px 0 var(--green);
     }
+    /* ── DROP ZONE — reduced height ── */
     .drop-zone {
+      border:1.5px dashed var(--border2); border-radius:var(--r);
+      height: 130px;               /* fixed, no min-height */
+      display:flex; flex-direction:column;
+      align-items:center; justify-content:center;
+      gap:.5rem; cursor:pointer;
+      transition:all .25s; background:var(--g1);
+      position:relative; overflow:hidden;
+    }
+    .drop-zone:hover,.drop-zone.drag {
+      border-color:var(--green); background:rgba(0,255,65,.04);
+      box-shadow:0 0 20px rgba(0,255,65,.08);
+    }
+    .drop-zone.has-img .dz-ph { display:none; }
     #preview-img {
+      position:absolute; inset:0; width:100%; height:100%;
+      object-fit:cover; display:none;
+      border-radius:calc(var(--r) - 1px); opacity:.85;
+    }
+    .drop-zone.has-img #preview-img { display:block; }
+    .dz-corner { position:absolute; width:12px; height:12px; border-color:var(--green3); border-style:solid; }
+    .dz-corner.tl{top:6px;left:6px;border-width:1.5px 0 0 1.5px;}
+    .dz-corner.tr{top:6px;right:6px;border-width:1.5px 1.5px 0 0;}
+    .dz-corner.bl{bottom:6px;left:6px;border-width:0 0 1.5px 1.5px;}
+    .dz-corner.br{bottom:6px;right:6px;border-width:0 1.5px 1.5px 0;}
+    .dz-ph { display:flex; flex-direction:column; align-items:center; gap:.4rem; pointer-events:none; }
     .dz-icon {
+      width:36px; height:36px; border:1px solid var(--border2);
+      border-radius:50%; display:grid; place-items:center;
+      font-size:1rem; color:var(--green3);
     }
+    .dz-ph p  { font-family:var(--ff-mono); font-size:.65rem; color:var(--muted); }
+    .dz-ph em { font-family:var(--ff-mono); font-size:.56rem; color:var(--green-dim); font-style:normal; }
+    #file-input { display:none; }
     /* ── URL INPUT ── */
+    .url-input-wrap { display:none; flex-direction:column; gap:.5rem; }
+    .url-input-wrap.show { display:flex; }
     .url-field {
+      display:flex; align-items:center;
+      border:1px solid var(--border2); border-radius:var(--r);
+      background:var(--g1); overflow:hidden;
     }
+    .url-prefix { font-family:var(--ff-mono); font-size:0.5rem; color:var(--green3); padding:0 .6rem; white-space:nowrap; border-right:1px solid var(--border); }
     .url-input {
+      flex:1; background:transparent; border:none; outline:none;
+      color:var(--green); font-family:var(--ff-mono); font-size:.72rem;
+      padding:.6rem .7rem; caret-color:var(--green);
     }
+    .url-input::placeholder { color:var(--green-dim); }
     .url-load-btn {
+      padding:.55rem .8rem; background:rgba(0,255,65,.1); border:none;
+      border-left:1px solid var(--border);
+      color:var(--green2); font-family:var(--ff-mono); font-size:0.5rem;
+      cursor:pointer; transition:background .2s; white-space:nowrap;
     }
+    .url-load-btn:hover { background:rgba(0,255,65,.2); }
     .url-preview {
+      width:100%; height:110px; object-fit:cover;
+      border-radius:var(--r); border:1px solid var(--border); display:none;
     }
+    .url-preview.show { display:block; }
     /* ── CLASSIFY BTN ── */
     .classify-btn {
+      flex-shrink: 0;
+      width:100%; margin-top:.7rem;
+      padding:.7rem;
+      background:linear-gradient(135deg,var(--green3),var(--green-dim));
+      border:1px solid var(--green3); border-radius:var(--r);
+      color:var(--green); font-family:var(--ff-head);
+      font-size:1rem; font-weight:700; letter-spacing:.1em;
+      cursor:pointer; position:relative; overflow:hidden;
+      transition:all .2s; text-transform:uppercase;
     }
     .classify-btn::before {
+      content:''; position:absolute; top:-2px; left:-100%;
+      width:60%; height:calc(100% + 4px);
+      background:linear-gradient(90deg,transparent,rgba(0,255,65,.18),transparent);
+      transform:skewX(-15deg);
     }
+    .classify-btn.loading::before { animation:sweep 1.2s linear infinite; }
+    @keyframes sweep { to { left:150%; } }
     .classify-btn:not(:disabled):hover {
+      background:linear-gradient(135deg,var(--green2),var(--green3));
+      box-shadow:0 0 24px rgba(0,255,65,.3); transform:translateY(-1px);
     }
+    .classify-btn:disabled { opacity:.35; cursor:default; }
+    /* ══ RIGHT PANEL — results ══ */
+    .result-panel-inner {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: none;
+      display: flex;
+      flex-direction: column;
+    }
+    .result-panel-inner::-webkit-scrollbar { display:none; }
     .result-waiting {
+      display:flex; flex-direction:column;
+      align-items:flex-start; justify-content:center;
+      flex:1; gap:.5rem; padding:.5rem 0;
     }
+    .result-waiting .rw-title { font-family:var(--ff-head); font-size:.95rem; font-weight:600; color:var(--green3); }
+    .result-waiting .rw-sub  { font-family:var(--ff-mono); font-size:.66rem; color:var(--green-dim); line-height:1.75; }
     .terminal-cursor {
+      display:inline-block; width:7px; height:13px;
+      background:var(--green); margin-left:2px;
+      animation:blink-c .8s step-end infinite; vertical-align:middle;
     }
+    @keyframes blink-c{0%,100%{opacity:1}50%{opacity:0}}
+    .result-content { display:none; flex-direction:column; gap:1rem; }
+    .result-content.show { display:flex; animation:scanIn .4s ease; }
     @keyframes scanIn {
+      from{opacity:0;clip-path:inset(0 0 100% 0)}
+      to{opacity:1;clip-path:inset(0 0 0% 0)}
     }
+    .rc-header  { display:flex; flex-direction:column; gap:.2rem; }
+    .rc-label   { font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.2em; color:var(--green3); }
+    .rc-class   {
+      font-family:var(--ff-head); font-size:2.6rem; font-weight:700;
+      letter-spacing:-.01em; line-height:1; color:var(--green);
+      text-shadow:0 0 30px rgba(0,255,65,.5);
     }
+    .rc-conf    { font-family:var(--ff-mono); font-size:.72rem; color:var(--muted); margin-top:.1rem; }
+    .rc-conf strong { color:var(--green2); font-size:.85rem; }
     .conf-track {
+      height:3px; background:var(--g4); border-radius:99px; overflow:hidden; margin-top:.4rem;
     }
     .conf-fill {
+      height:100%;
+      background:linear-gradient(90deg,var(--green3),var(--green));
+      border-radius:99px; width:0%;
+      transition:width 1s cubic-bezier(.4,0,.2,1);
+      box-shadow:0 0 8px var(--green);
     }
+    .rc-divider { height:1px; background:var(--border); flex-shrink:0; }
+    .prob-list { display:flex; flex-direction:column; gap:.65rem; }
+    .prob-row  { display:flex; flex-direction:column; gap:.18rem; }
+    .prob-meta { display:flex; justify-content:space-between; align-items:baseline; }
     .prob-name {
+      font-family:var(--ff-body); font-size:.76rem; font-weight:400;
+      color:var(--muted); display:flex; align-items:center; gap:.35rem; text-transform:capitalize;
+    }
+    .prob-row.top .prob-name { color:var(--green); font-weight:600; }
+    .prob-pct  { font-family:var(--ff-mono); font-size:.65rem; color:var(--green-dim); }
+    .prob-row.top .prob-pct { color:var(--green2); }
+    .prob-track { height:4px; background:var(--g4); border-radius:99px; overflow:hidden; }
+    .prob-fill  {
+      height:100%; background:var(--green-dim);
+      border-radius:99px; width:0%;
+      transition:width .8s cubic-bezier(.4,0,.2,1);
     }
     .prob-row.top .prob-fill {
+      background:linear-gradient(90deg,var(--green3),var(--green));
+      box-shadow:0 0 6px rgba(0,255,65,.4);
     }
     .result-error {
+      display:none; padding:.75rem;
+      border:1px solid rgba(255,50,50,.3); border-radius:var(--r);
+      background:rgba(255,0,0,.05);
+      font-family:var(--ff-mono); font-size:.7rem; color:#ff4444; line-height:1.6;
     }
+    .result-error.show { display:block; animation:fadeIn .3s ease; }
+    /* ══ FOOTER BAR — minimal, fixed ══ */
+    .footer-bar {
+      flex-shrink: 0;
       border-top: 1px solid var(--border);
+      padding: .35rem 0;
       display: flex; justify-content: space-between; align-items: center;
+      animation: fadeIn .8s ease .25s both;
     }
+    .footer-bar p { font-family:var(--ff-mono); font-size:.55rem; color:var(--green-dim); }
+    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
   </style>
 </head>
 <body>
   <canvas id="plexus-bg"></canvas>
+  <div class="wrapper">
     <!-- HEADER -->
     <header>
       <div class="logo">
       </div>
     </header>
+    <!-- CLASSES BAR (moved out of grid, compact strip) -->
+    <div class="classes-bar">
+      <span class="cs-label">CLASSES //</span>
+      <div class="cs-pills">
+        <span class="cs-pill">🏙 buildings</span>
+        <span class="cs-pill">🌲 forest</span>
+        <span class="cs-pill">🧊 glacier</span>
+        <span class="cs-pill">⛰ mountain</span>
+        <span class="cs-pill">🌊 sea</span>
+        <span class="cs-pill">🛣 street</span>
+      </div>
     </div>
     <!-- MAIN GRID -->
       <div class="panel">
         <div class="panel-title">01 // MODEL_SELECT</div>
+        <!-- scrollable zone so nothing overflows -->
+        <div class="panel-scroll">
+          <div class="model-grid">
+            <div class="model-card active" data-fw="pytorch" onclick="selectModel(this)">
+              <span class="mc-icon">⚡</span>
+              <span class="mc-name">PyTorch</span>
+              <span class="mc-sub">CNN_Torch · .pth</span>
+            </div>
+            <div class="model-card" data-fw="tensorflow" onclick="selectModel(this)">
+              <span class="mc-icon">🧠</span>
+              <span class="mc-name">TensorFlow</span>
+              <span class="mc-sub">CNN_TF · .keras</span>
+            </div>
           </div>
+          <div class="panel-title">02 // INPUT_IMAGE</div>
+          <div class="input-tabs">
+            <button class="tab-btn active" onclick="switchTab('file', this)">↑ FILE_UPLOAD</button>
+            <button class="tab-btn" onclick="switchTab('url', this)">⬡ IMAGE_URL</button>
           </div>
+          <!-- File drop zone -->
+          <div id="tab-file">
+            <div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()">
+              <div class="dz-corner tl"></div><div class="dz-corner tr"></div>
+              <div class="dz-corner bl"></div><div class="dz-corner br"></div>
+              <img id="preview-img" src="" alt="preview"/>
+              <div class="dz-ph">
+                <div class="dz-icon">↑</div>
+                <p>Drop image here or click</p>
+                <em>JPG · PNG · WEBP · GIF</em>
+              </div>
             </div>
+            <input type="file" id="file-input" accept="image/*"/>
           </div>
+          <!-- URL input -->
+          <div id="tab-url" class="url-input-wrap">
+            <div class="url-field">
+              <span class="url-prefix">URL://</span>
+              <input type="text" class="url-input" id="url-input"
+                placeholder="https://example.com/image.jpg"/>
+              <button class="url-load-btn" onclick="loadFromUrl()">LOAD</button>
+            </div>
+            <img id="url-preview" class="url-preview" src="" alt="URL preview"/>
           </div>
+          <div class="panel-title" style="margin-top:.9rem;">03 // ANALYZE</div>
+        </div><!-- /panel-scroll -->
+        <!-- Btn outside scroll so it stays at bottom -->
         <button class="classify-btn" id="classify-btn" disabled onclick="classify()">
           RUN CLASSIFICATION →
         </button>
       <div class="panel">
         <div class="panel-title">04 // SCAN_RESULTS</div>
+        <div class="result-panel-inner">
+          <div class="result-waiting" id="result-waiting">
+            <div class="rw-title">AWAITING INPUT</div>
+            <div class="rw-sub">
+              &gt; select_model()<br>
+              &gt; load_image() <span class="terminal-cursor"></span><br>
+              &gt; predict()
+            </div>
           </div>
+          <div class="result-content" id="result-content">
+            <div class="rc-header">
+              <div class="rc-label">// PREDICTED_CLASS</div>
+              <div class="rc-class" id="rc-class">—</div>
+              <div class="rc-conf">confidence : <strong id="rc-conf">—</strong></div>
+              <div class="conf-track"><div class="conf-fill" id="conf-fill"></div></div>
+            </div>
+            <div class="rc-divider"></div>
+            <div>
+              <div class="panel-title" style="margin-bottom:.6rem;">// CLASS_SCORES</div>
+              <div class="prob-list" id="prob-list"></div>
+            </div>
+          </div>
+          <div class="result-error" id="result-error"></div>
+        </div><!-- /result-panel-inner -->
       </div>
+    </div><!-- /main-grid -->
+    <!-- FOOTER BAR -->
+    <div class="footer-bar">
       <p>SCENEIQ · Intel Image Classification · CNN PyTorch &amp; TensorFlow</p>
       <p>by PARFAIT · seed=42 · reproducible</p>
+    </div>
   </div><!-- /wrapper -->
   <script>
+    const EMOJIS  = {buildings:"🏙",forest:"🌲",glacier:"🧊",mountain:"⛰",sea:"🌊",street:"🛣"};
     const CLASSES = ["buildings","forest","glacier","mountain","sea","street"];
+    let selectedFw    = "pytorch";
+    let selectedFile  = null;
     let urlImageReady = false;
+    let currentTab    = "file";
     function selectModel(card) {
       document.querySelectorAll(".model-card").forEach(c => c.classList.remove("active"));
       card.classList.add("active");
       selectedFw = card.dataset.fw;
     }
     function switchTab(tab, btn) {
       currentTab = tab;
       document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
       btn.classList.add("active");
       document.getElementById("tab-file").style.display = tab === "file" ? "block" : "none";
+      document.getElementById("tab-url").classList.toggle("show", tab === "url");
       updateBtn();
     }
+    const dropZone  = document.getElementById("drop-zone");
     const fileInput = document.getElementById("file-input");
+    fileInput.addEventListener("change", () => { if (fileInput.files[0]) loadFile(fileInput.files[0]); });
+    dropZone.addEventListener("dragover",  e => { e.preventDefault(); dropZone.classList.add("drag"); });
     dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag"));
     dropZone.addEventListener("drop", e => {
       e.preventDefault(); dropZone.classList.remove("drag");
       selectedFile = file;
       const reader = new FileReader();
       reader.onload = e => {
+        document.getElementById("preview-img").src = e.target.result;
         dropZone.classList.add("has-img");
       };
       reader.readAsDataURL(file);
+      resetResult(); updateBtn();
     }
     function loadFromUrl() {
+      const url     = document.getElementById("url-input").value.trim();
       if (!url) return;
       const preview = document.getElementById("url-preview");
+      preview.onload  = () => { preview.classList.add("show"); urlImageReady = true;  resetResult(); updateBtn(); };
+      preview.onerror = () => { preview.classList.remove("show"); urlImageReady = false; updateBtn(); };
       preview.src = url;
     }
+    document.getElementById("url-input").addEventListener("keydown", e => { if (e.key === "Enter") loadFromUrl(); });
     function updateBtn() {
+      const ready = (currentTab === "file" && selectedFile) || (currentTab === "url" && urlImageReady);
       document.getElementById("classify-btn").disabled = !ready;
     }
     async function classify() {
       const btn = document.getElementById("classify-btn");
+      btn.disabled = true; btn.textContent = "SCANNING…"; btn.classList.add("loading");
       const form = new FormData();
       form.append("model", selectedFw);
+      if (currentTab === "file" && selectedFile) form.append("image", selectedFile);
+      else form.append("image_url", document.getElementById("url-input").value.trim());
       try {
         const res  = await fetch("/predict", { method: "POST", body: form });
       } catch(err) {
         showError(err.message);
       } finally {
+        btn.textContent = "RUN CLASSIFICATION →"; btn.classList.remove("loading"); btn.disabled = false;
       }
     }
     function showResult(data) {
+      document.getElementById("result-waiting").style.display = "none";
       document.getElementById("result-error").classList.remove("show");
       const pct = Math.round(data.confidence * 100);
       document.getElementById("rc-class").textContent =
+        (EMOJIS[data.class]||"") + " " + data.class.charAt(0).toUpperCase() + data.class.slice(1);
       document.getElementById("rc-conf").textContent = pct + "%";
       const content = document.getElementById("result-content");
+      content.classList.remove("show"); void content.offsetWidth; content.classList.add("show");
+      setTimeout(() => { document.getElementById("conf-fill").style.width = pct + "%"; }, 60);
+      const list   = document.getElementById("prob-list");
       list.innerHTML = "";
+      const sorted = [...CLASSES].sort((a,b) => data.probabilities[b]-data.probabilities[a]);
       sorted.forEach((cls, i) => {
         const p   = Math.round(data.probabilities[cls] * 100);
         const top = cls === data.class;
         row.className = "prob-row" + (top ? " top" : "");
         row.innerHTML = `
           <div class="prob-meta">
+            <span class="prob-name">${EMOJIS[cls]||""} ${cls}</span>
             <span class="prob-pct" id="pct-${cls}">0%</span>
           </div>
+          <div class="prob-track"><div class="prob-fill" id="bar-${cls}"></div></div>`;
         list.appendChild(row);
         setTimeout(() => {
+          document.getElementById("bar-"+cls).style.width = p+"%";
+          document.getElementById("pct-"+cls).textContent = p+"%";
+        }, 100 + i*50);
       });
     }
     function showError(msg) {
+      document.getElementById("result-waiting").style.display = "none";
       document.getElementById("result-content").classList.remove("show");
       const err = document.getElementById("result-error");
+      err.textContent = "ERROR > " + msg; err.classList.add("show");
     }
     function resetResult() {
+      document.getElementById("result-waiting").style.display = "flex";
       document.getElementById("result-content").classList.remove("show");
       document.getElementById("result-error").classList.remove("show");
       document.getElementById("conf-fill").style.width = "0%";
     }
     document.getElementById("tab-file").style.display = "block";
   </script>
+  <!-- PLEXUS BACKGROUND -->
   <script>
   (function(){
     const canvas = document.getElementById('plexus-bg');
     const ctx    = canvas.getContext('2d');
+    const NODE_COLOR='rgba(0,255,65,', LINE_COLOR='rgba(0,255,65,';
+    const MAX_DIST=160, MOUSE_DIST=220, ATTRACT_FORCE=0.012, NODE_COUNT=110, SPEED=0.4;
+    let W, H, nodes=[], mouse={x:-9999,y:-9999};
+    window.addEventListener('mousemove', e=>{mouse.x=e.clientX;mouse.y=e.clientY;});
+    window.addEventListener('mouseleave',()=>{mouse.x=-9999;mouse.y=-9999;});
+    function resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;}
+    function Node(){this.x=Math.random()*W;this.y=Math.random()*H;this.vx=(Math.random()-.5)*SPEED;this.vy=(Math.random()-.5)*SPEED;this.r=Math.random()*2+1.5;}
+    function init(){nodes=[];for(let i=0;i<NODE_COUNT;i++)nodes.push(new Node());}
+    function draw(){
+      ctx.clearRect(0,0,W,H);
+      for(const n of nodes){
+        const dxM=mouse.x-n.x,dyM=mouse.y-n.y,dM=Math.sqrt(dxM*dxM+dyM*dyM);
+        if(dM<MOUSE_DIST&&dM>0){const f=(1-dM/MOUSE_DIST)*ATTRACT_FORCE;n.vx+=dxM/dM*f;n.vy+=dyM/dM*f;}
+        const spd=Math.sqrt(n.vx*n.vx+n.vy*n.vy),maxSpd=SPEED*3;
+        if(spd>maxSpd){n.vx=(n.vx/spd)*maxSpd;n.vy=(n.vy/spd)*maxSpd;}
+        if(dM>=MOUSE_DIST){n.vx*=.996;n.vy*=.996;const s=Math.sqrt(n.vx*n.vx+n.vy*n.vy);if(s<SPEED*.3){n.vx+=(Math.random()-.5)*.06;n.vy+=(Math.random()-.5)*.06;}}
+        n.x+=n.vx;n.y+=n.vy;
+        if(n.x<0||n.x>W)n.vx*=-1;if(n.y<0||n.y>H)n.vy*=-1;
       }
+      for(let i=0;i<nodes.length;i++)for(let j=i+1;j<nodes.length;j++){
+        const a=nodes[i],b=nodes[j],dx=a.x-b.x,dy=a.y-b.y,d=Math.sqrt(dx*dx+dy*dy);
+        if(d<MAX_DIST){const al=(1-d/MAX_DIST)*.28;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.strokeStyle=LINE_COLOR+al+')';ctx.lineWidth=.8;ctx.stroke();}
       }
+      for(const n of nodes){
+        const dxM=mouse.x-n.x,dyM=mouse.y-n.y,dM=Math.sqrt(dxM*dxM+dyM*dyM);
+        if(dM<MOUSE_DIST){const al=(1-dM/MOUSE_DIST)*.35;ctx.beginPath();ctx.moveTo(mouse.x,mouse.y);ctx.lineTo(n.x,n.y);ctx.strokeStyle=LINE_COLOR+al+')';ctx.lineWidth=.5;ctx.stroke();}
       }
+      if(mouse.x>0){
+        const g=ctx.createRadialGradient(mouse.x,mouse.y,0,mouse.x,mouse.y,20);
+        g.addColorStop(0,'rgba(0,255,65,0.5)');g.addColorStop(1,'rgba(0,255,65,0)');
+        ctx.beginPath();ctx.arc(mouse.x,mouse.y,20,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();
+        ctx.beginPath();ctx.arc(mouse.x,mouse.y,2,0,Math.PI*2);ctx.fillStyle='rgba(0,255,65,0.95)';ctx.fill();
       }
+      for(const n of nodes){
+        const g=ctx.createRadialGradient(n.x,n.y,0,n.x,n.y,n.r*5);
+        g.addColorStop(0,NODE_COLOR+'0.3)');g.addColorStop(1,NODE_COLOR+'0)');
+        ctx.beginPath();ctx.arc(n.x,n.y,n.r*5,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();
+        ctx.beginPath();ctx.arc(n.x,n.y,n.r,0,Math.PI*2);ctx.fillStyle=NODE_COLOR+'0.85)';ctx.fill();
       }
       requestAnimationFrame(draw);
     }
+    resize();init();draw();
+    window.addEventListener('resize',()=>{resize();init();});
   })();
   </script>
 </body>

templates/index_old.html CHANGED Viewed

@@ -7,922 +7,979 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
   <style>
-    /* ══════════════════════════════════════════════════════════════════
-       TOKENS
-    ══════════════════════════════════════════════════════════════════ */
     :root {
-      --g0:  #000000;
-      --g1:  #050d05;
-      --g2:  #0a150a;
-      --g3:  #0f1f0f;
-      --g4:  #1a2e1a;
-      --green:    #00ff41;
-      --green2:   #00cc33;
-      --green3:   #008f1f;
-      --green-dim:#004d11;
-      --green-glow: rgba(0,255,65,0.15);
-      --border:   rgba(0,255,65,0.18);
-      --border2:  rgba(0,255,65,0.35);
-      --muted:    rgba(0,255,65,0.45);
-      --ff-mono:  'Share Tech Mono', monospace;
-      --ff-head:  'Rajdhani', sans-serif;
-      --ff-body:  'Exo 2', sans-serif;
-      --r: 4px;
-      /*new add*/
-      --bg-main: #160a2f;
-      --bg-deep: #0e061f;
-      --pink: #ff4fa3;
-      --pink-soft: rgba(255, 79, 163, 0.18);
-      --pink-line: rgba(255, 79, 163, 0.28);
-      --white-soft: rgba(255,255,255,0.06);
-    }
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    html { font-size: 16px; scroll-behavior: smooth; }
     body {
-      background: var(--g0);
-      color: var(--green);
       font-family: var(--ff-body);
       min-height: 100vh;
-      overflow-x: hidden;
       cursor: default;
-      /*New add 2*/
-      #brain-bg {
-        position: fixed;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
-        pointer-events: none;
-        opacity: 0.42;
-      }
-      .bg-vignette {
-        position: fixed;
-        inset: 0;
-        z-index: 0;
-        pointer-events: none;
-        background:
-          radial-gradient(circle at 20% 20%, rgba(0,255,65,0.07), transparent 30%),
-          radial-gradient(circle at 80% 25%, rgba(0,255,65,0.05), transparent 28%),
-          radial-gradient(circle at 50% 80%, rgba(0,255,65,0.04), transparent 35%),
-          linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.35));
-      }
-      .bg-orb {
-        position: fixed;
-        border-radius: 50%;
-        filter: blur(70px);
-        pointer-events: none;
-        z-index: 0;
-        opacity: 0.12;
-        animation: floatOrb 16s ease-in-out infinite;
-      }
-      .orb-1 {
-        width: 260px;
-        height: 260px;
-        top: 8%;
-        left: 6%;
-        background: rgba(0,255,65,0.35);
-      }
-      .orb-2 {
-        width: 320px;
-        height: 320px;
-        top: 52%;
-        right: 8%;
-        background: rgba(0,204,51,0.20);
-        animation-delay: -5s;
-      }
-      .orb-3 {
-        width: 220px;
-        height: 220px;
-        bottom: 4%;
-        left: 34%;
-        background: rgba(0,143,31,0.24);
-        animation-delay: -10s;
-      }
-      @keyframes floatOrb {
-        0%, 100% {
-          transform: translate3d(0, 0, 0) scale(1);
-        }
-        25% {
-          transform: translate3d(18px, -24px, 0) scale(1.04);
-        }
-        50% {
-          transform: translate3d(-12px, 16px, 0) scale(0.96);
-        }
-        75% {
-          transform: translate3d(22px, 8px, 0) scale(1.03);
-        }
-      }
-      /* rendre le contenu plus premium */
-      .wrapper {
-        position: relative;
-        z-index: 2;
-      }
-      .panel {
-        background: linear-gradient(
-          180deg,
-          rgba(10,21,10,0.82),
-          rgba(5,13,5,0.86)
-        );
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
-        border: 1px solid rgba(0,255,65,0.14);
-        box-shadow:
-          0 10px 40px rgba(0,0,0,0.35),
-          inset 0 1px 0 rgba(0,255,65,0.04);
-      }
-      header {
-        backdrop-filter: blur(6px);
-        -webkit-backdrop-filter: blur(6px);
-      }
-      .hero-title {
-        max-width: 720px;
-      }
-      .hero-sub {
-        max-width: 760px;
-        line-height: 1.7;
-      }
-      /* petite amélioration sur les cartes */
-      .model-card,
-      .drop-zone,
-      .url-field,
-      .input-tabs,
-      .classes-strip,
-      footer {
-        backdrop-filter: blur(4px);
-        -webkit-backdrop-filter: blur(4px);
-      }
-      /* responsive */
-      @media (max-width: 740px) {
-        #brain-bg {
-          opacity: 0.28;
-        }
-        .bg-orb {
-          filter: blur(55px);
-        }
-      }
-          }
-    /* ── Grid overlay ── */
     body::before {
       content: '';
-      position: fixed; inset: 0; z-index: 0; pointer-events: none;
       background-image:
-        linear-gradient(rgba(0,255,65,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0,255,65,0.03) 1px, transparent 1px);
-      background-size: 40px 40px;
     }
-    /* Scanline overlay */
     body::after {
       content: '';
-      position: fixed; inset: 0; z-index: 0; pointer-events: none;
-      background: repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 2px,
-        rgba(0,0,0,0.07) 2px,
-        rgba(0,0,0,0.07) 4px
-      );
-    }
-    /* ══════════════════════════════════════════════════════════════════
-       LAYOUT
-    ══════════════════════════════════════════════════════════════════ */
     .wrapper {
-      position: relative; z-index: 1;
-      max-width: 1140px;
-      margin: 0 auto;
-      padding: 0 2rem;
     }
-    /* ── HEADER ── */
     header {
-      border-bottom: 1px solid var(--border);
-      padding: 1.4rem 0;
       display: flex;
       align-items: center;
       justify-content: space-between;
       animation: fadeIn .6s ease both;
     }
     .logo {
-      display: flex; align-items: center; gap: 1rem;
     }
     .logo-icon {
-      width: 38px; height: 38px;
       border: 1.5px solid var(--green);
-      display: grid; place-items: center;
       font-size: 1.1rem;
-      box-shadow: 0 0 14px var(--green-glow), inset 0 0 8px var(--green-glow);
       animation: pulse-box 3s ease-in-out infinite;
     }
     @keyframes pulse-box {
       0%,100% { box-shadow: 0 0 10px var(--green-glow), inset 0 0 6px var(--green-glow); }
-      50%      { box-shadow: 0 0 22px rgba(0,255,65,.3), inset 0 0 14px rgba(0,255,65,.2); }
     }
     .logo-text {
       font-family: var(--ff-head);
-      font-size: 1.8rem; font-weight: 700;
-      letter-spacing: .15em;
-      text-shadow: 0 0 20px rgba(0,255,65,.6);
     }
-    .logo-text span { color: var(--green3); }
     .header-right {
-      display: flex; align-items: center; gap: 1.5rem;
     }
     .status-dot {
-      display: flex; align-items: center; gap: .45rem;
-      font-family: var(--ff-mono); font-size: .65rem; color: var(--muted);
     }
     .dot {
-      width: 6px; height: 6px; border-radius: 50%;
       background: var(--green);
-      box-shadow: 0 0 8px var(--green);
       animation: blink 2s step-end infinite;
     }
-    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
-    .version {
-      font-family: var(--ff-mono); font-size: .6rem;
-      color: var(--green-dim); letter-spacing: .1em;
-    }
-    /* ── HERO ── */
     .hero {
-      padding: 3rem 0 2rem;
       animation: fadeIn .7s ease .1s both;
     }
     .hero-label {
-      font-family: var(--ff-mono); font-size: .62rem;
-      color: var(--green3); letter-spacing: .2em;
-      text-transform: uppercase; margin-bottom: .6rem;
     }
     .hero-title {
       font-family: var(--ff-head);
-      font-size: clamp(2.2rem, 5vw, 3.4rem);
-      font-weight: 700; letter-spacing: -.01em;
-      line-height: 1.05;
-      text-shadow: 0 0 40px rgba(0,255,65,.3);
     }
     .hero-title em {
-      font-style: normal; color: var(--green2);
-      text-shadow: 0 0 30px rgba(0,204,51,.6);
     }
     .hero-sub {
-      margin-top: .8rem;
-      font-size: .9rem; color: var(--muted);
-      font-family: var(--ff-mono); letter-spacing: .04em;
     }
-    /* ── MAIN GRID ── */
     .main-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 1.5rem;
-      padding-bottom: 4rem;
       animation: fadeIn .8s ease .2s both;
     }
-    /* ── PANEL BASE ── */
     .panel {
-      background: var(--g2);
       border: 1px solid var(--border);
-      border-radius: var(--r);
-      padding: 1.75rem;
       position: relative;
       overflow: hidden;
     }
     .panel::before {
       content: '';
-      position: absolute; top: 0; left: 0; right: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, var(--green3), transparent);
     }
     .panel-title {
-      font-family: var(--ff-mono); font-size: .6rem;
-      letter-spacing: .2em; color: var(--green3);
-      text-transform: uppercase; margin-bottom: 1.4rem;
-      display: flex; align-items: center; gap: .6rem;
     }
     .panel-title::after {
-      content: ''; flex: 1; height: 1px; background: var(--border);
     }
-    /* ── MODEL SELECTOR ── */
     .model-grid {
-      display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
-      margin-bottom: 1.5rem;
     }
     .model-card {
       border: 1px solid var(--border);
-      border-radius: var(--r);
       padding: 1rem .9rem;
       cursor: pointer;
-      transition: all .2s;
-      background: var(--g1);
-      display: flex; flex-direction: column; gap: .3rem;
     }
-    .model-card:hover { border-color: var(--green3); background: var(--g3); }
     .model-card.active {
       border-color: var(--green);
-      background: rgba(0,255,65,.06);
-      box-shadow: 0 0 16px rgba(0,255,65,.12), inset 0 0 12px rgba(0,255,65,.04);
     }
-    .model-card.active .mc-name { color: var(--green); }
     .mc-icon { font-size: 1.2rem; }
     .mc-name {
-      font-family: var(--ff-head); font-weight: 600; font-size: 1rem;
-      color: var(--green2); transition: color .2s;
     }
-    .mc-sub  { font-family: var(--ff-mono); font-size: .58rem; color: var(--muted); }
-    /* ── INPUT TABS ── */
     .input-tabs {
-      display: flex; gap: 0; margin-bottom: 1rem;
-      border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
     }
     .tab-btn {
-      flex: 1; padding: .55rem; background: var(--g1);
-      border: none; color: var(--muted); font-family: var(--ff-mono);
-      font-size: .65rem; letter-spacing: .1em; cursor: pointer;
-      transition: all .2s; text-transform: uppercase;
     }
-    .tab-btn:hover  { background: var(--g3); color: var(--green2); }
     .tab-btn.active {
-      background: rgba(0,255,65,.08); color: var(--green);
       box-shadow: inset 0 -2px 0 var(--green);
     }
-    /* ── DROP ZONE ── */
     .drop-zone {
       border: 1.5px dashed var(--border2);
-      border-radius: var(--r);
-      min-height: 190px;
-      display: flex; flex-direction: column;
-      align-items: center; justify-content: center;
-      gap: .75rem; cursor: pointer;
-      transition: all .25s; background: var(--g1);
-      position: relative; overflow: hidden;
     }
     .drop-zone:hover, .drop-zone.drag {
       border-color: var(--green);
       background: rgba(0,255,65,.04);
       box-shadow: 0 0 20px rgba(0,255,65,.08);
     }
     .drop-zone.has-img .dz-ph { display: none; }
     #preview-img {
-      position: absolute; inset: 0;
-      width: 100%; height: 100%; object-fit: cover;
-      display: none; border-radius: calc(var(--r) - 1px);
-      opacity: .85;
     }
     .drop-zone.has-img #preview-img { display: block; }
     .dz-corner {
-      position: absolute; width: 14px; height: 14px;
-      border-color: var(--green3); border-style: solid;
     }
     .dz-corner.tl { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
     .dz-corner.tr { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
     .dz-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1.5px 1.5px; }
     .dz-corner.br { bottom: 8px; right: 8px; border-width: 0 1.5px 1.5px 0; }
     .dz-ph {
-      display: flex; flex-direction: column; align-items: center; gap: .6rem;
       pointer-events: none;
     }
     .dz-icon {
-      width: 48px; height: 48px; border: 1px solid var(--border2);
-      border-radius: 50%; display: grid; place-items: center;
-      font-size: 1.3rem; color: var(--green3);
     }
-    .dz-ph p  { font-family: var(--ff-mono); font-size: .72rem; color: var(--muted); }
-    .dz-ph em { font-family: var(--ff-mono); font-size: .6rem; color: var(--green-dim); font-style: normal; }
     #file-input { display: none; }
-    /* ── URL INPUT ── */
-    .url-input-wrap { display: none; flex-direction: column; gap: .6rem; }
     .url-input-wrap.show { display: flex; }
     .url-field {
-      display: flex; align-items: center;
-      border: 1px solid var(--border2); border-radius: var(--r);
-      background: var(--g1); overflow: hidden;
     }
     .url-prefix {
-      font-family: var(--ff-mono); font-size: .65rem;
-      color: var(--green3); padding: 0 .7rem; white-space: nowrap;
       border-right: 1px solid var(--border);
     }
     .url-input {
-      flex: 1; background: transparent; border: none; outline: none;
-      color: var(--green); font-family: var(--ff-mono); font-size: .75rem;
-      padding: .75rem .8rem;
       caret-color: var(--green);
     }
-    .url-input::placeholder { color: var(--green-dim); }
     .url-load-btn {
-      padding: .65rem .9rem;
-      background: rgba(0,255,65,.1); border: none;
       border-left: 1px solid var(--border);
-      color: var(--green2); font-family: var(--ff-mono); font-size: .65rem;
-      cursor: pointer; transition: background .2s; white-space: nowrap;
     }
-    .url-load-btn:hover { background: rgba(0,255,65,.2); }
     .url-preview {
-      width: 100%; height: 140px; object-fit: cover;
-      border-radius: var(--r); border: 1px solid var(--border);
       display: none;
     }
     .url-preview.show { display: block; }
-    /* ── CLASSIFY BTN ── */
     .classify-btn {
-      width: 100%; margin-top: 1rem;
       padding: 1rem;
-      background: linear-gradient(135deg, var(--green3), var(--green-dim));
-      border: 1px solid var(--green3); border-radius: var(--r);
-      color: var(--green); font-family: var(--ff-head);
-      font-size: 1.1rem; font-weight: 700; letter-spacing: .1em;
-      cursor: pointer; position: relative; overflow: hidden;
-      transition: all .2s; text-transform: uppercase;
     }
     .classify-btn::before {
       content: '';
-      position: absolute; top: -2px; left: -100%; width: 60%; height: calc(100% + 4px);
-      background: linear-gradient(90deg, transparent, rgba(0,255,65,.18), transparent);
       transform: skewX(-15deg);
     }
-    .classify-btn.loading::before {
-      animation: sweep 1.2s linear infinite;
-    }
     @keyframes sweep { to { left: 150%; } }
     .classify-btn:not(:disabled):hover {
       background: linear-gradient(135deg, var(--green2), var(--green3));
-      box-shadow: 0 0 24px rgba(0,255,65,.3);
       transform: translateY(-1px);
     }
-    .classify-btn:disabled { opacity: .35; cursor: default; }
-    /* ══════════════════════════════════════════════════════════════════
-       RIGHT PANEL — RESULTS
-    ══════════════════════════════════════════════════════════════════ */
-    /* Waiting state */
     .result-waiting {
-      display: flex; flex-direction: column;
-      align-items: flex-start; justify-content: center;
-      min-height: 200px; gap: .6rem;
       padding: 1rem 0;
     }
     .result-waiting .rw-title {
-      font-family: var(--ff-head); font-size: 1rem; font-weight: 600;
-      color: var(--green3);
     }
     .result-waiting .rw-sub {
-      font-family: var(--ff-mono); font-size: .7rem;
-      color: var(--green-dim); line-height: 1.7;
     }
     .terminal-cursor {
-      display: inline-block; width: 8px; height: 14px;
-      background: var(--green); margin-left: 2px;
       animation: blink-c .8s step-end infinite;
       vertical-align: middle;
     }
     @keyframes blink-c { 0%,100%{opacity:1} 50%{opacity:0} }
-    /* Result */
     .result-content { display: none; flex-direction: column; gap: 1.4rem; }
     .result-content.show { display: flex; animation: scanIn .4s ease; }
     @keyframes scanIn {
       from { opacity: 0; clip-path: inset(0 0 100% 0); }
-      to   { opacity: 1; clip-path: inset(0 0 0% 0); }
     }
     .rc-header { display: flex; flex-direction: column; gap: .25rem; }
     .rc-label {
-      font-family: var(--ff-mono); font-size: .6rem;
-      letter-spacing: .2em; color: var(--green3);
     }
     .rc-class {
       font-family: var(--ff-head);
-      font-size: 3rem; font-weight: 700;
-      letter-spacing: -.01em; line-height: 1;
-      color: var(--green);
-      text-shadow: 0 0 30px rgba(0,255,65,.5);
     }
     .rc-conf {
-      font-family: var(--ff-mono); font-size: .78rem;
-      color: var(--muted); margin-top: .1rem;
     }
-    .rc-conf strong { color: var(--green2); font-size: .9rem; }
-    /* Main confidence bar */
     .conf-track {
-      height: 3px; background: var(--g4);
-      border-radius: 99px; overflow: hidden; margin-top: .5rem;
     }
     .conf-fill {
       height: 100%;
-      background: linear-gradient(90deg, var(--green3), var(--green));
-      border-radius: 99px; width: 0%;
       transition: width 1s cubic-bezier(.4,0,.2,1);
-      box-shadow: 0 0 8px var(--green);
     }
-    /* Divider */
     .rc-divider {
-      height: 1px; background: var(--border);
     }
-    /* Probability bars */
     .prob-list { display: flex; flex-direction: column; gap: .85rem; }
-    .prob-row  { display: flex; flex-direction: column; gap: .22rem; }
-    .prob-meta { display: flex; justify-content: space-between; align-items: baseline; }
     .prob-name {
-      font-family: var(--ff-body); font-size: .8rem;
-      font-weight: 400; color: var(--muted);
-      display: flex; align-items: center; gap: .4rem; text-transform: capitalize;
     }
-    .prob-row.top .prob-name { color: var(--green); font-weight: 600; }
-    .prob-pct  { font-family: var(--ff-mono); font-size: .68rem; color: var(--green-dim); }
     .prob-row.top .prob-pct { color: var(--green2); }
     .prob-track {
-      height: 4px; background: var(--g4);
-      border-radius: 99px; overflow: hidden;
     }
     .prob-fill {
-      height: 100%; background: var(--green-dim);
-      border-radius: 99px; width: 0%;
       transition: width .8s cubic-bezier(.4,0,.2,1);
     }
     .prob-row.top .prob-fill {
-      background: linear-gradient(90deg, var(--green3), var(--green));
-      box-shadow: 0 0 6px rgba(0,255,65,.4);
     }
-    /* Error */
     .result-error {
-      display: none; padding: 1rem;
-      border: 1px solid rgba(255,50,50,.3);
-      border-radius: var(--r); background: rgba(255,0,0,.05);
-      font-family: var(--ff-mono); font-size: .75rem; color: #ff4444;
       line-height: 1.6;
     }
     .result-error.show { display: block; animation: fadeIn .3s ease; }
-    /* ── CLASSES STRIP ── */
     .classes-strip {
-      border-top: 1px solid var(--border);
-      padding: 1rem 0;
-      display: flex; align-items: center; gap: 1.2rem;
       flex-wrap: wrap;
       animation: fadeIn .9s ease .3s both;
     }
-    .cs-label { font-family: var(--ff-mono); font-size: .55rem; color: var(--green-dim); letter-spacing: .15em; }
     .cs-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
     .cs-pill {
-      font-family: var(--ff-mono); font-size: .6rem;
-      padding: .25rem .65rem;
-      border: 1px solid var(--border); border-radius: 2px;
-      color: var(--green-dim);
-      transition: all .2s; cursor: default;
     }
-    .cs-pill:hover { border-color: var(--green3); color: var(--green2); }
-    /* ── FOOTER ── */
     footer {
-      border-top: 1px solid var(--border);
-      padding: 1rem 0;
-      display: flex; justify-content: space-between; align-items: center;
       animation: fadeIn 1s ease .4s both;
     }
-    footer p { font-family: var(--ff-mono); font-size: .6rem; color: var(--green-dim); }
-    /* ── ANIMATIONS ── */
-    @keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1;transform:none} }
-    /* ── RESPONSIVE ── */
-    @media (max-width: 740px) {
       .main-grid { grid-template-columns: 1fr; }
       .hero-title { font-size: 2rem; }
-      .model-grid { grid-template-columns: 1fr 1fr; }
     }
   </style>
 </head>
 <body>
-   <!-- New add end -->
-  <canvas id="brain-bg"></canvas>
-  <div class="bg-vignette"></div>
-  <div class="bg-orb orb-1"></div>
-  <div class="bg-orb orb-2"></div>
-  <div class="bg-orb orb-3"></div>
-  <canvas id="network-bg"></canvas>
-  <div class="bg-overlay"></div>
-  <!-- New add-->
-  <script>
-  const brainCanvas = document.getElementById("brain-bg");
-  const brainCtx = brainCanvas.getContext("2d");
-  let brainW = 0;
-  let brainH = 0;
-  let brainNodes = [];
-  let mouse = { x: null, y: null, radius: 120 };
-  function resizeBrainCanvas() {
-    brainW = brainCanvas.width = window.innerWidth;
-    brainH = brainCanvas.height = window.innerHeight;
-    createBrainNodes();
-  }
-  function createBrainNodes() {
-    const count = Math.max(36, Math.floor((brainW * brainH) / 38000));
-    brainNodes = [];
-    for (let i = 0; i < count; i++) {
-      brainNodes.push({
-        x: Math.random() * brainW,
-        y: Math.random() * brainH,
-        vx: (Math.random() - 0.5) * 0.45,
-        vy: (Math.random() - 0.5) * 0.45,
-        r: Math.random() * 2.2 + 1.2,
-        glow: Math.random() * 0.6 + 0.4
-      });
-    }
-  }
-  function drawBrainBackground() {
-    brainCtx.clearRect(0, 0, brainW, brainH);
-    for (let i = 0; i < brainNodes.length; i++) {
-      const a = brainNodes[i];
-      a.x += a.vx;
-      a.y += a.vy;
-      if (a.x < 0 || a.x > brainW) a.vx *= -1;
-      if (a.y < 0 || a.y > brainH) a.vy *= -1;
-      for (let j = i + 1; j < brainNodes.length; j++) {
-        const b = brainNodes[j];
-        const dx = a.x - b.x;
-        const dy = a.y - b.y;
-        const dist = Math.sqrt(dx * dx + dy * dy);
-        if (dist < 120) {
-          const alpha = (1 - dist / 120) * 0.18;
-          brainCtx.beginPath();
-          brainCtx.moveTo(a.x, a.y);
-          brainCtx.lineTo(b.x, b.y);
-          brainCtx.strokeStyle = `rgba(0,255,65,${alpha})`;
-          brainCtx.lineWidth = 1;
-          brainCtx.stroke();
-        }
-      }
-      if (mouse.x !== null && mouse.y !== null) {
-        const mdx = a.x - mouse.x;
-        const mdy = a.y - mouse.y;
-        const mdist = Math.sqrt(mdx * mdx + mdy * mdy);
-        if (mdist < mouse.radius) {
-          brainCtx.beginPath();
-          brainCtx.moveTo(a.x, a.y);
-          brainCtx.lineTo(mouse.x, mouse.y);
-          brainCtx.strokeStyle = `rgba(0,255,65,${(1 - mdist / mouse.radius) * 0.22})`;
-          brainCtx.lineWidth = 1;
-          brainCtx.stroke();
-        }
-      }
-      const gradient = brainCtx.createRadialGradient(a.x, a.y, 0, a.x, a.y, a.r * 8);
-      gradient.addColorStop(0, `rgba(0,255,65,${0.95 * a.glow})`);
-      gradient.addColorStop(0.35, `rgba(0,255,65,${0.22 * a.glow})`);
-      gradient.addColorStop(1, "rgba(0,255,65,0)");
-      brainCtx.beginPath();
-      brainCtx.fillStyle = gradient;
-      brainCtx.arc(a.x, a.y, a.r * 8, 0, Math.PI * 2);
-      brainCtx.fill();
-      brainCtx.beginPath();
-      brainCtx.fillStyle = "rgba(170,255,195,0.9)";
-      brainCtx.arc(a.x, a.y, a.r, 0, Math.PI * 2);
-      brainCtx.fill();
-    }
-    requestAnimationFrame(drawBrainBackground);
-  }
-  window.addEventListener("resize", resizeBrainCanvas);
-  window.addEventListener("mousemove", (e) => {
-    mouse.x = e.clientX;
-    mouse.y = e.clientY;
-  });
-  window.addEventListener("mouseleave", () => {
-    mouse.x = null;
-    mouse.y = null;
-  });
-  resizeBrainCanvas();
-  drawBrainBackground();
-</script>
-  <div class="wrapper">
-    <!-- HEADER -->
-    <header>
-      <div class="logo">
-        <div class="logo-icon">⬡</div>
-        <div class="logo-text">SCENE<span>IQ</span></div>
-      </div>
-      <div class="header-right">
-        <div class="status-dot"><div class="dot"></div> SYSTEM ONLINE</div>
-        <div class="version">v4.0 · PARFAIT</div>
       </div>
-    </header>
-    <!-- HERO -->
-    <div class="hero">
-      <div class="hero-label">// Intel Image Classification · CNN</div>
-      <h1 class="hero-title">Scene Recognition<br><em>Powered by Neural Networks</em></h1>
-      <p class="hero-sub">Upload an image or provide a URL — select your model — get instant predictions across 6 scene categories.</p>
-    </div>
-    <!-- MAIN GRID -->
-    <div class="main-grid">
-      <!-- LEFT : inputs -->
-      <div class="panel">
-        <div class="panel-title">01 // MODEL_SELECT</div>
-        <div class="model-grid">
-          <div class="model-card active" data-fw="pytorch" onclick="selectModel(this)">
-            <span class="mc-icon">⚡</span>
-            <span class="mc-name">PyTorch</span>
-            <span class="mc-sub">CNN_Torch · .pth</span>
-          </div>
-          <div class="model-card" data-fw="tensorflow" onclick="selectModel(this)">
-            <span class="mc-icon">🧠</span>
-            <span class="mc-name">TensorFlow</span>
-            <span class="mc-sub">CNN_TF · .keras</span>
           </div>
-        </div>
-        <div class="panel-title">02 // INPUT_IMAGE</div>
-        <!-- Tabs: File / URL -->
-        <div class="input-tabs">
-          <button class="tab-btn active" onclick="switchTab('file', this)">↑ FILE_UPLOAD</button>
-          <button class="tab-btn" onclick="switchTab('url', this)">⬡ IMAGE_URL</button>
-        </div>
-        <!-- File drop zone -->
-        <div id="tab-file">
-          <div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()">
-            <div class="dz-corner tl"></div>
-            <div class="dz-corner tr"></div>
-            <div class="dz-corner bl"></div>
-            <div class="dz-corner br"></div>
-            <img id="preview-img" src="" alt="preview"/>
-            <div class="dz-ph">
-              <div class="dz-icon">↑</div>
-              <p>Drop image here or click</p>
-              <em>JPG · PNG · WEBP · GIF</em>
             </div>
           </div>
-          <input type="file" id="file-input" accept="image/*"/>
-        </div>
-        <!-- URL input -->
-        <div id="tab-url" class="url-input-wrap">
-          <div class="url-field">
-            <span class="url-prefix">URL://</span>
-            <input type="text" class="url-input" id="url-input"
-              placeholder="https://example.com/image.jpg"/>
-            <button class="url-load-btn" onclick="loadFromUrl()">LOAD</button>
           </div>
-          <img id="url-preview" class="url-preview" src="" alt="URL preview"/>
         </div>
-        <div class="panel-title" style="margin-top:1.2rem;">03 // ANALYZE</div>
-        <button class="classify-btn" id="classify-btn" disabled onclick="classify()">
-          RUN CLASSIFICATION →
-        </button>
-      </div>
-      <!-- RIGHT : results -->
-      <div class="panel">
-        <div class="panel-title">04 // SCAN_RESULTS</div>
-        <!-- Waiting -->
-        <div class="result-waiting" id="result-waiting">
-          <div class="rw-title">AWAITING INPUT</div>
-          <div class="rw-sub">
-            &gt; select_model()<br>
-            &gt; load_image() <span class="terminal-cursor"></span><br>
-            &gt; predict()
           </div>
-        </div>
-        <!-- Results -->
-        <div class="result-content" id="result-content">
-          <div class="rc-header">
-            <div class="rc-label">// PREDICTED_CLASS</div>
-            <div class="rc-class" id="rc-class">—</div>
-            <div class="rc-conf">confidence : <strong id="rc-conf">—</strong></div>
-            <div class="conf-track"><div class="conf-fill" id="conf-fill"></div></div>
-          </div>
-          <div class="rc-divider"></div>
-          <div>
-            <div class="panel-title" style="margin-bottom:.9rem;">// CLASS_SCORES</div>
-            <div class="prob-list" id="prob-list"></div>
           </div>
-        </div>
-        <!-- Error -->
-        <div class="result-error" id="result-error"></div>
       </div>
-    </div>
-    <!-- CLASSES STRIP -->
-    <div class="classes-strip">
-      <span class="cs-label">CLASSES</span>
-      <div class="cs-pills">
-        <span class="cs-pill">🏙 buildings</span>
-        <span class="cs-pill">🌲 forest</span>
-        <span class="cs-pill">🧊 glacier</span>
-        <span class="cs-pill">⛰ mountain</span>
-        <span class="cs-pill">🌊 sea</span>
-        <span class="cs-pill">🛣 street</span>
       </div>
-    </div>
-    <footer>
-      <p>SCENEIQ · Intel Image Classification · CNN PyTorch &amp; TensorFlow</p>
-      <p>by PARFAIT · seed=42 · reproducible</p>
-    </footer>
-  </div><!-- /wrapper -->
   <script>
     const EMOJIS = {buildings:"🏙",forest:"🌲",glacier:"🧊",mountain:"⛰",sea:"🌊",street:"🛣"};
     const CLASSES = ["buildings","forest","glacier","mountain","sea","street"];
-    let selectedFw   = "pytorch";
     let selectedFile = null;
     let urlImageReady = false;
-    let currentTab   = "file";
-    /* ── Model selector ── */
     function selectModel(card) {
       document.querySelectorAll(".model-card").forEach(c => c.classList.remove("active"));
       card.classList.add("active");
       selectedFw = card.dataset.fw;
     }
-    /* ── Tab switcher ── */
     function switchTab(tab, btn) {
       currentTab = tab;
       document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
       btn.classList.add("active");
       document.getElementById("tab-file").style.display = tab === "file" ? "block" : "none";
-      const urlWrap = document.getElementById("tab-url");
-      urlWrap.classList.toggle("show", tab === "url");
       updateBtn();
     }
-    /* ── File drag & drop ── */
     const dropZone = document.getElementById("drop-zone");
     const fileInput = document.getElementById("file-input");
     fileInput.addEventListener("change", () => {
       if (fileInput.files[0]) loadFile(fileInput.files[0]);
     });
-    dropZone.addEventListener("dragover", e => { e.preventDefault(); dropZone.classList.add("drag"); });
     dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag"));
     dropZone.addEventListener("drop", e => {
-      e.preventDefault(); dropZone.classList.remove("drag");
       const f = e.dataTransfer.files[0];
       if (f && f.type.startsWith("image/")) loadFile(f);
     });
@@ -940,10 +997,10 @@
       updateBtn();
     }
-    /* ── URL load ── */
     function loadFromUrl() {
       const url = document.getElementById("url-input").value.trim();
       if (!url) return;
       const preview = document.getElementById("url-preview");
       preview.onload = () => {
         preview.classList.add("show");
@@ -951,27 +1008,26 @@
         resetResult();
         updateBtn();
       };
       preview.onerror = () => {
         preview.classList.remove("show");
         urlImageReady = false;
         updateBtn();
       };
       preview.src = url;
     }
-    // Allow Enter key on URL input
     document.getElementById("url-input").addEventListener("keydown", e => {
       if (e.key === "Enter") loadFromUrl();
     });
-    /* ── Update classify button ── */
     function updateBtn() {
       const ready = (currentTab === "file" && selectedFile) ||
-                    (currentTab === "url"  && urlImageReady);
       document.getElementById("classify-btn").disabled = !ready;
     }
-    /* ── Classify ── */
     async function classify() {
       const btn = document.getElementById("classify-btn");
       btn.disabled = true;
@@ -988,22 +1044,21 @@
       }
       try {
-        const res  = await fetch("/predict", { method: "POST", body: form });
         const data = await res.json();
         if (data.error) throw new Error(data.error);
         showResult(data);
-      } catch(err) {
         showError(err.message);
       } finally {
         btn.textContent = "RUN CLASSIFICATION →";
         btn.classList.remove("loading");
-        btn.disabled = false;
       }
     }
-    /* ── Show result ── */
     function showResult(data) {
-      document.getElementById("result-waiting").style.display  = "none";
       document.getElementById("result-error").classList.remove("show");
       const pct = Math.round(data.confidence * 100);
@@ -1013,20 +1068,20 @@
       const content = document.getElementById("result-content");
       content.classList.remove("show");
-      void content.offsetWidth; // force reflow for animation
       content.classList.add("show");
       setTimeout(() => {
         document.getElementById("conf-fill").style.width = pct + "%";
       }, 60);
-      // Probability bars
       const list = document.getElementById("prob-list");
       list.innerHTML = "";
-      const sorted = [...CLASSES].sort((a,b) => data.probabilities[b] - data.probabilities[a]);
       sorted.forEach((cls, i) => {
-        const p   = Math.round(data.probabilities[cls] * 100);
         const top = cls === data.class;
         const row = document.createElement("div");
         row.className = "prob-row" + (top ? " top" : "");
@@ -1047,7 +1102,7 @@
     }
     function showError(msg) {
-      document.getElementById("result-waiting").style.display  = "none";
       document.getElementById("result-content").classList.remove("show");
       const err = document.getElementById("result-error");
       err.textContent = "ERROR > " + msg;
@@ -1055,14 +1110,168 @@
     }
     function resetResult() {
-      document.getElementById("result-waiting").style.display  = "flex";
       document.getElementById("result-content").classList.remove("show");
       document.getElementById("result-error").classList.remove("show");
       document.getElementById("conf-fill").style.width = "0%";
     }
-    // Init
     document.getElementById("tab-file").style.display = "block";
   </script>
 </body>
-</html>

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
   <style>
     :root {
+      --g0: #000000;
+      --g1: #040904;
+      --g2: #081108;
+      --g3: #0d1b0d;
+      --g4: #122512;
+      --green: #00ff41;
+      --green2: #39ff72;
+      --green3: #00cc33;
+      --green4: #00a329;
+      --green-dim: #4cff88;
+      --green-glow: rgba(0, 255, 65, 0.18);
+      --text: #eafff0;
+      --muted: rgba(160, 255, 190, 0.72);
+      --muted-2: rgba(130, 220, 150, 0.48);
+      --border: rgba(0, 255, 65, 0.14);
+      --border2: rgba(0, 255, 65, 0.28);
+      --panel-bg: rgba(8, 17, 8, 0.72);
+      --panel-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+      --ff-mono: 'Share Tech Mono', monospace;
+      --ff-head: 'Rajdhani', sans-serif;
+      --ff-body: 'Exo 2', sans-serif;
+      --r: 18px;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      width: 100%;
+      min-height: 100%;
+      overflow-x: hidden;
+    }
     body {
+      background:
+        radial-gradient(circle at 15% 20%, rgba(0,255,65,0.07), transparent 28%),
+        radial-gradient(circle at 85% 15%, rgba(0,255,65,0.05), transparent 24%),
+        radial-gradient(circle at 50% 100%, rgba(0,255,65,0.04), transparent 35%),
+        linear-gradient(180deg, #030603 0%, #050b05 45%, #000000 100%);
+      color: var(--text);
       font-family: var(--ff-body);
       min-height: 100vh;
       cursor: default;
+    }
+    #plexus-bg {
+      position: fixed;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      pointer-events: none;
+    }
     body::before {
       content: '';
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
       background-image:
+        linear-gradient(rgba(0,255,65,0.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0,255,65,0.025) 1px, transparent 1px);
+      background-size: 42px 42px;
     }
     body::after {
       content: '';
+      position: fixed;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
+      background:
+        radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.12) 65%, rgba(0,0,0,0.3) 100%),
+        repeating-linear-gradient(
+          0deg,
+          transparent,
+          transparent 2px,
+          rgba(0, 0, 0, 0.05) 2px,
+          rgba(0, 0, 0, 0.05) 4px
+        );
+    }
+    .page {
+      position: relative;
+      z-index: 1;
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 24px;
+    }
     .wrapper {
+      width: min(1140px, 100%);
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+    }
+    header,
+    .hero,
+    .main-grid,
+    .classes-strip,
+    footer {
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
     }
     header {
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      padding: 1.2rem 1.4rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 1rem;
+      background: rgba(8, 17, 8, 0.62);
+      box-shadow: var(--panel-shadow);
       animation: fadeIn .6s ease both;
     }
     .logo {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
     }
     .logo-icon {
+      width: 42px;
+      height: 42px;
       border: 1.5px solid var(--green);
+      display: grid;
+      place-items: center;
+      border-radius: 12px;
       font-size: 1.1rem;
+      color: var(--green);
+      box-shadow: 0 0 16px var(--green-glow), inset 0 0 10px var(--green-glow);
       animation: pulse-box 3s ease-in-out infinite;
     }
     @keyframes pulse-box {
       0%,100% { box-shadow: 0 0 10px var(--green-glow), inset 0 0 6px var(--green-glow); }
+      50% { box-shadow: 0 0 22px rgba(0,255,65,.24), inset 0 0 12px rgba(0,255,65,.18); }
     }
     .logo-text {
       font-family: var(--ff-head);
+      font-size: 1.9rem;
+      font-weight: 700;
+      letter-spacing: .12em;
+      color: var(--text);
+      text-shadow: 0 0 20px rgba(0,255,65,.22);
     }
+    .logo-text span { color: var(--green2); }
     .header-right {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      flex-wrap: wrap;
     }
+    .status-dot, .version {
+      font-family: var(--ff-mono);
+      font-size: .68rem;
+      color: var(--muted);
+    }
     .status-dot {
+      display: flex;
+      align-items: center;
+      gap: .45rem;
     }
     .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
       background: var(--green);
+      box-shadow: 0 0 10px var(--green);
       animation: blink 2s step-end infinite;
     }
+    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
     .hero {
+      border: 1px solid var(--border);
+      border-radius: 24px;
+      padding: 2.4rem 2rem 2rem;
+      background: rgba(8, 17, 8, 0.56);
+      text-align: center;
+      box-shadow: var(--panel-shadow);
       animation: fadeIn .7s ease .1s both;
     }
     .hero-label {
+      font-family: var(--ff-mono);
+      font-size: .68rem;
+      color: var(--green2);
+      letter-spacing: .22em;
+      text-transform: uppercase;
+      margin-bottom: .8rem;
     }
     .hero-title {
       font-family: var(--ff-head);
+      font-size: clamp(2.2rem, 4vw, 3.6rem);
+      font-weight: 700;
+      letter-spacing: -.01em;
+      line-height: 1.02;
+      color: var(--text);
+      text-shadow: 0 0 36px rgba(0,255,65,.12);
     }
     .hero-title em {
+      font-style: normal;
+      color: var(--green2);
+      text-shadow: 0 0 26px rgba(0,255,65,.25);
     }
     .hero-sub {
+      margin: .9rem auto 0;
+      max-width: 760px;
+      font-size: .98rem;
+      color: var(--muted);
+      font-family: var(--ff-mono);
+      line-height: 1.7;
     }
     .main-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      gap: 1.2rem;
       animation: fadeIn .8s ease .2s both;
     }
     .panel {
+      background: var(--panel-bg);
       border: 1px solid var(--border);
+      border-radius: 24px;
+      padding: 1.4rem;
       position: relative;
       overflow: hidden;
+      box-shadow: var(--panel-shadow);
+      min-height: 540px;
+      display: flex;
+      flex-direction: column;
     }
     .panel::before {
       content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, var(--green3), transparent);
     }
     .panel-title {
+      font-family: var(--ff-mono);
+      font-size: .64rem;
+      letter-spacing: .2em;
+      color: var(--green2);
+      text-transform: uppercase;
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+      gap: .6rem;
     }
     .panel-title::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--border);
     }
     .model-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: .75rem;
+      margin-bottom: 1.2rem;
     }
     .model-card {
       border: 1px solid var(--border);
+      border-radius: 16px;
       padding: 1rem .9rem;
       cursor: pointer;
+      transition: all .22s;
+      background: rgba(255,255,255,0.02);
+      display: flex;
+      flex-direction: column;
+      gap: .3rem;
     }
+    .model-card:hover {
+      border-color: var(--green3);
+      background: rgba(0,255,65,0.04);
+      transform: translateY(-1px);
+    }
     .model-card.active {
       border-color: var(--green);
+      background: rgba(0,255,65,.08);
+      box-shadow: 0 0 16px rgba(0,255,65,.10), inset 0 0 12px rgba(0,255,65,.03);
     }
+    .model-card.active .mc-name { color: var(--green2); }
     .mc-icon { font-size: 1.2rem; }
     .mc-name {
+      font-family: var(--ff-head);
+      font-weight: 600;
+      font-size: 1rem;
+      color: var(--text);
+    }
+    .mc-sub {
+      font-family: var(--ff-mono);
+      font-size: .58rem;
+      color: var(--muted);
     }
     .input-tabs {
+      display: flex;
+      gap: .7rem;
+      margin-bottom: 1rem;
     }
     .tab-btn {
+      flex: 1;
+      padding: .75rem;
+      background: rgba(255,255,255,0.025);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      color: var(--muted);
+      font-family: var(--ff-mono);
+      font-size: .68rem;
+      letter-spacing: .08em;
+      cursor: pointer;
+      transition: all .2s;
+      text-transform: uppercase;
     }
+    .tab-btn:hover {
+      background: rgba(0,255,65,.04);
+      color: var(--green2);
+    }
     .tab-btn.active {
+      background: rgba(0,255,65,.08);
+      color: var(--green2);
+      border-color: var(--green3);
       box-shadow: inset 0 -2px 0 var(--green);
     }
     .drop-zone {
       border: 1.5px dashed var(--border2);
+      border-radius: 20px;
+      min-height: 220px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: .75rem;
+      cursor: pointer;
+      transition: all .25s;
+      background: rgba(255,255,255,0.02);
+      position: relative;
+      overflow: hidden;
     }
     .drop-zone:hover, .drop-zone.drag {
       border-color: var(--green);
       background: rgba(0,255,65,.04);
       box-shadow: 0 0 20px rgba(0,255,65,.08);
     }
     .drop-zone.has-img .dz-ph { display: none; }
     #preview-img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: none;
+      opacity: .9;
     }
     .drop-zone.has-img #preview-img { display: block; }
     .dz-corner {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      border-color: var(--green3);
+      border-style: solid;
     }
     .dz-corner.tl { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
     .dz-corner.tr { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
     .dz-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1.5px 1.5px; }
     .dz-corner.br { bottom: 8px; right: 8px; border-width: 0 1.5px 1.5px 0; }
     .dz-ph {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: .6rem;
       pointer-events: none;
+      text-align: center;
+      padding: 1rem;
     }
     .dz-icon {
+      width: 52px;
+      height: 52px;
+      border: 1px solid var(--border2);
+      border-radius: 50%;
+      display: grid;
+      place-items: center;
+      font-size: 1.3rem;
+      color: var(--green2);
+      box-shadow: inset 0 0 12px rgba(0,255,65,.05);
+    }
+    .dz-ph p {
+      font-family: var(--ff-mono);
+      font-size: .76rem;
+      color: var(--text);
+    }
+    .dz-ph em {
+      font-family: var(--ff-mono);
+      font-size: .62rem;
+      color: var(--muted-2);
+      font-style: normal;
     }
     #file-input { display: none; }
+    .url-input-wrap { display: none; flex-direction: column; gap: .8rem; }
     .url-input-wrap.show { display: flex; }
     .url-field {
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--border2);
+      border-radius: 16px;
+      background: rgba(255,255,255,0.02);
+      overflow: hidden;
     }
     .url-prefix {
+      font-family: var(--ff-mono);
+      font-size: .65rem;
+      color: var(--green2);
+      padding: 0 .8rem;
+      white-space: nowrap;
       border-right: 1px solid var(--border);
     }
     .url-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: var(--text);
+      font-family: var(--ff-mono);
+      font-size: .76rem;
+      padding: .85rem .9rem;
       caret-color: var(--green);
     }
+    .url-input::placeholder { color: var(--muted-2); }
     .url-load-btn {
+      padding: .8rem 1rem;
+      background: rgba(0,255,65,.08);
+      border: none;
       border-left: 1px solid var(--border);
+      color: var(--green2);
+      font-family: var(--ff-mono);
+      font-size: .68rem;
+      cursor: pointer;
+      transition: background .2s;
+      white-space: nowrap;
     }
+    .url-load-btn:hover { background: rgba(0,255,65,.16); }
     .url-preview {
+      width: 100%;
+      height: 170px;
+      object-fit: cover;
+      border-radius: 16px;
+      border: 1px solid var(--border);
       display: none;
     }
     .url-preview.show { display: block; }
     .classify-btn {
+      width: 100%;
+      margin-top: auto;
       padding: 1rem;
+      background: linear-gradient(135deg, var(--green3), #053b12);
+      border: 1px solid var(--green3);
+      border-radius: 16px;
+      color: var(--text);
+      font-family: var(--ff-head);
+      font-size: 1.05rem;
+      font-weight: 700;
+      letter-spacing: .08em;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transition: all .2s;
+      text-transform: uppercase;
+      box-shadow: 0 12px 24px rgba(0,255,65,.08);
     }
     .classify-btn::before {
       content: '';
+      position: absolute;
+      top: -2px;
+      left: -100%;
+      width: 60%;
+      height: calc(100% + 4px);
+      background: linear-gradient(90deg, transparent, rgba(0,255,65,.16), transparent);
       transform: skewX(-15deg);
     }
+    .classify-btn.loading::before { animation: sweep 1.2s linear infinite; }
     @keyframes sweep { to { left: 150%; } }
     .classify-btn:not(:disabled):hover {
       background: linear-gradient(135deg, var(--green2), var(--green3));
+      color: #031108;
+      box-shadow: 0 0 24px rgba(0,255,65,.22);
       transform: translateY(-1px);
     }
+    .classify-btn:disabled { opacity: .35; cursor: default; }
     .result-waiting {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      min-height: 220px;
+      gap: .6rem;
       padding: 1rem 0;
     }
     .result-waiting .rw-title {
+      font-family: var(--ff-head);
+      font-size: 1.15rem;
+      font-weight: 600;
+      color: var(--green2);
     }
     .result-waiting .rw-sub {
+      font-family: var(--ff-mono);
+      font-size: .76rem;
+      color: var(--muted);
+      line-height: 1.8;
     }
     .terminal-cursor {
+      display: inline-block;
+      width: 8px;
+      height: 14px;
+      background: var(--green);
+      margin-left: 2px;
       animation: blink-c .8s step-end infinite;
       vertical-align: middle;
     }
     @keyframes blink-c { 0%,100%{opacity:1} 50%{opacity:0} }
     .result-content { display: none; flex-direction: column; gap: 1.4rem; }
     .result-content.show { display: flex; animation: scanIn .4s ease; }
     @keyframes scanIn {
       from { opacity: 0; clip-path: inset(0 0 100% 0); }
+      to { opacity: 1; clip-path: inset(0 0 0% 0); }
     }
     .rc-header { display: flex; flex-direction: column; gap: .25rem; }
     .rc-label {
+      font-family: var(--ff-mono);
+      font-size: .62rem;
+      letter-spacing: .2em;
+      color: var(--green2);
     }
     .rc-class {
       font-family: var(--ff-head);
+      font-size: 3rem;
+      font-weight: 700;
+      letter-spacing: -.01em;
+      line-height: 1;
+      color: var(--green2);
+      text-shadow: 0 0 30px rgba(0,255,65,.28);
     }
     .rc-conf {
+      font-family: var(--ff-mono);
+      font-size: .82rem;
+      color: var(--muted);
+      margin-top: .1rem;
     }
+    .rc-conf strong { color: var(--text); font-size: .92rem; }
     .conf-track {
+      height: 6px;
+      background: var(--g4);
+      border-radius: 99px;
+      overflow: hidden;
+      margin-top: .6rem;
     }
     .conf-fill {
       height: 100%;
+      background: linear-gradient(90deg, var(--green3), var(--green2));
+      border-radius: 99px;
+      width: 0%;
       transition: width 1s cubic-bezier(.4,0,.2,1);
+      box-shadow: 0 0 8px rgba(0,255,65,.28);
     }
     .rc-divider {
+      height: 1px;
+      background: var(--border);
     }
     .prob-list { display: flex; flex-direction: column; gap: .85rem; }
+    .prob-row { display: flex; flex-direction: column; gap: .22rem; }
+    .prob-meta {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 1rem;
+    }
     .prob-name {
+      font-family: var(--ff-body);
+      font-size: .86rem;
+      font-weight: 400;
+      color: var(--muted);
+      display: flex;
+      align-items: center;
+      gap: .4rem;
+      text-transform: capitalize;
+    }
+    .prob-row.top .prob-name { color: var(--text); font-weight: 600; }
+    .prob-pct {
+      font-family: var(--ff-mono);
+      font-size: .7rem;
+      color: var(--muted-2);
     }
     .prob-row.top .prob-pct { color: var(--green2); }
     .prob-track {
+      height: 5px;
+      background: var(--g4);
+      border-radius: 99px;
+      overflow: hidden;
     }
     .prob-fill {
+      height: 100%;
+      background: #0f3018;
+      border-radius: 99px;
+      width: 0%;
       transition: width .8s cubic-bezier(.4,0,.2,1);
     }
     .prob-row.top .prob-fill {
+      background: linear-gradient(90deg, var(--green3), var(--green2));
+      box-shadow: 0 0 6px rgba(0,255,65,.25);
     }
     .result-error {
+      display: none;
+      padding: 1rem;
+      border: 1px solid rgba(255,80,80,.25);
+      border-radius: 16px;
+      background: rgba(255,0,0,.05);
+      font-family: var(--ff-mono);
+      font-size: .76rem;
+      color: #ff7c7c;
       line-height: 1.6;
     }
     .result-error.show { display: block; animation: fadeIn .3s ease; }
     .classes-strip {
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      padding: 1rem 1.2rem;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
       flex-wrap: wrap;
+      background: rgba(8, 17, 8, 0.5);
+      box-shadow: var(--panel-shadow);
       animation: fadeIn .9s ease .3s both;
     }
+    .cs-label {
+      font-family: var(--ff-mono);
+      font-size: .58rem;
+      color: var(--muted-2);
+      letter-spacing: .15em;
+    }
     .cs-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
     .cs-pill {
+      font-family: var(--ff-mono);
+      font-size: .62rem;
+      padding: .34rem .72rem;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      color: var(--muted);
+      transition: all .2s;
+      cursor: default;
+      background: rgba(255,255,255,0.02);
+    }
+    .cs-pill:hover {
+      border-color: var(--green3);
+      color: var(--text);
+      background: rgba(0,255,65,.05);
     }
     footer {
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      padding: 1rem 1.2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1rem;
+      flex-wrap: wrap;
+      background: rgba(8, 17, 8, 0.5);
+      box-shadow: var(--panel-shadow);
       animation: fadeIn 1s ease .4s both;
     }
+    footer p {
+      font-family: var(--ff-mono);
+      font-size: .64rem;
+      color: var(--muted-2);
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: none; }
+    }
+    @media (max-width: 900px) {
       .main-grid { grid-template-columns: 1fr; }
+      .panel { min-height: auto; }
+    }
+    @media (max-width: 640px) {
+      .page { padding: 14px; }
+      .wrapper { gap: 14px; }
+      header { padding: 1rem; }
+      .hero { padding: 1.6rem 1rem; }
+      .panel { padding: 1rem; }
+      .model-grid { grid-template-columns: 1fr; }
+      .input-tabs { flex-direction: column; }
+      .header-right { gap: .6rem; }
       .hero-title { font-size: 2rem; }
+      .rc-class { font-size: 2.1rem; }
+      .url-field { flex-direction: column; align-items: stretch; }
+      .url-prefix { border-right: none; border-bottom: 1px solid var(--border); padding: .8rem; }
+      .url-load-btn { border-left: none; border-top: 1px solid var(--border); }
     }
   </style>
 </head>
 <body>
+  <canvas id="plexus-bg"></canvas>
+  <div class="page">
+    <div class="wrapper">
+      <header>
+        <div class="logo">
+          <div class="logo-icon">⬡</div>
+          <div class="logo-text">SCENE<span>IQ</span></div>
+        </div>
+        <div class="header-right">
+          <div class="status-dot"><div class="dot"></div> SYSTEM ONLINE</div>
+          <div class="version">v4.0 · PARFAIT</div>
+        </div>
+      </header>
+      <div class="hero">
+        <div class="hero-label">// AI-Powered Visual Intelligence</div>
+        <h1 class="hero-title">Interactive Scene Recognition<br><em>Powered by Neural Networks</em></h1>
+        <p class="hero-sub">
+          Upload an image or provide a URL, choose your model, and get instant scene predictions
+          through a clean, modern, and professional AI interface.
+        </p>
       </div>
+      <div class="main-grid">
+        <div class="panel">
+          <div class="panel-title">01 // MODEL_SELECT</div>
+          <div class="model-grid">
+            <div class="model-card active" data-fw="pytorch" onclick="selectModel(this)">
+              <span class="mc-icon">⚡</span>
+              <span class="mc-name">PyTorch</span>
+              <span class="mc-sub">CNN_Torch · .pth</span>
+            </div>
+            <div class="model-card" data-fw="tensorflow" onclick="selectModel(this)">
+              <span class="mc-icon">🧠</span>
+              <span class="mc-name">TensorFlow</span>
+              <span class="mc-sub">CNN_TF · .keras</span>
+            </div>
           </div>
+          <div class="panel-title">02 // INPUT_IMAGE</div>
+          <div class="input-tabs">
+            <button class="tab-btn active" onclick="switchTab('file', this)">↑ FILE_UPLOAD</button>
+            <button class="tab-btn" onclick="switchTab('url', this)">⬡ IMAGE_URL</button>
+          </div>
+          <div id="tab-file">
+            <div class="drop-zone" id="drop-zone" onclick="document.getElementById('file-input').click()">
+              <div class="dz-corner tl"></div>
+              <div class="dz-corner tr"></div>
+              <div class="dz-corner bl"></div>
+              <div class="dz-corner br"></div>
+              <img id="preview-img" src="" alt="preview"/>
+              <div class="dz-ph">
+                <div class="dz-icon">↑</div>
+                <p>Drop image here or click</p>
+                <em>JPG · PNG · WEBP · GIF</em>
+              </div>
             </div>
+            <input type="file" id="file-input" accept="image/*"/>
           </div>
+          <div id="tab-url" class="url-input-wrap">
+            <div class="url-field">
+              <span class="url-prefix">URL://</span>
+              <input type="text" class="url-input" id="url-input" placeholder="https://example.com/image.jpg"/>
+              <button class="url-load-btn" onclick="loadFromUrl()">LOAD</button>
+            </div>
+            <img id="url-preview" class="url-preview" src="" alt="URL preview"/>
           </div>
+          <div class="panel-title" style="margin-top:1.2rem;">03 // ANALYZE</div>
+          <button class="classify-btn" id="classify-btn" disabled onclick="classify()">
+            RUN CLASSIFICATION →
+          </button>
         </div>
+        <div class="panel">
+          <div class="panel-title">04 // SCAN_RESULTS</div>
+          <div class="result-waiting" id="result-waiting">
+            <div class="rw-title">AWAITING INPUT</div>
+            <div class="rw-sub">
+              &gt; select_model()<br>
+              &gt; load_image() <span class="terminal-cursor"></span><br>
+              &gt; predict()
+            </div>
           </div>
+          <div class="result-content" id="result-content">
+            <div class="rc-header">
+              <div class="rc-label">// PREDICTED_CLASS</div>
+              <div class="rc-class" id="rc-class">—</div>
+              <div class="rc-conf">confidence : <strong id="rc-conf">—</strong></div>
+              <div class="conf-track"><div class="conf-fill" id="conf-fill"></div></div>
+            </div>
+            <div class="rc-divider"></div>
+            <div>
+              <div class="panel-title" style="margin-bottom:.9rem;">// CLASS_SCORES</div>
+              <div class="prob-list" id="prob-list"></div>
+            </div>
           </div>
+          <div class="result-error" id="result-error"></div>
+        </div>
       </div>
+      <div class="classes-strip">
+        <span class="cs-label">CLASSES</span>
+        <div class="cs-pills">
+          <span class="cs-pill">🏙 buildings</span>
+          <span class="cs-pill">🌲 forest</span>
+          <span class="cs-pill">🧊 glacier</span>
+          <span class="cs-pill">⛰ mountain</span>
+          <span class="cs-pill">🌊 sea</span>
+          <span class="cs-pill">🛣 street</span>
+        </div>
       </div>
+      <footer>
+        <p>SCENEIQ · Intel Image Classification · CNN PyTorch &amp; TensorFlow</p>
+        <p>by PARFAIT · seed=42 · reproducible</p>
+      </footer>
+    </div>
+  </div>
   <script>
     const EMOJIS = {buildings:"🏙",forest:"🌲",glacier:"🧊",mountain:"⛰",sea:"🌊",street:"🛣"};
     const CLASSES = ["buildings","forest","glacier","mountain","sea","street"];
+    let selectedFw = "pytorch";
     let selectedFile = null;
     let urlImageReady = false;
+    let currentTab = "file";
     function selectModel(card) {
       document.querySelectorAll(".model-card").forEach(c => c.classList.remove("active"));
       card.classList.add("active");
       selectedFw = card.dataset.fw;
     }
     function switchTab(tab, btn) {
       currentTab = tab;
       document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
       btn.classList.add("active");
       document.getElementById("tab-file").style.display = tab === "file" ? "block" : "none";
+      document.getElementById("tab-url").classList.toggle("show", tab === "url");
       updateBtn();
+      resetResult();
     }
     const dropZone = document.getElementById("drop-zone");
     const fileInput = document.getElementById("file-input");
     fileInput.addEventListener("change", () => {
       if (fileInput.files[0]) loadFile(fileInput.files[0]);
     });
+    dropZone.addEventListener("dragover", e => {
+      e.preventDefault();
+      dropZone.classList.add("drag");
+    });
     dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag"));
     dropZone.addEventListener("drop", e => {
+      e.preventDefault();
+      dropZone.classList.remove("drag");
       const f = e.dataTransfer.files[0];
       if (f && f.type.startsWith("image/")) loadFile(f);
     });
       updateBtn();
     }
     function loadFromUrl() {
       const url = document.getElementById("url-input").value.trim();
       if (!url) return;
       const preview = document.getElementById("url-preview");
       preview.onload = () => {
         preview.classList.add("show");
         resetResult();
         updateBtn();
       };
       preview.onerror = () => {
         preview.classList.remove("show");
         urlImageReady = false;
         updateBtn();
       };
       preview.src = url;
     }
     document.getElementById("url-input").addEventListener("keydown", e => {
       if (e.key === "Enter") loadFromUrl();
     });
     function updateBtn() {
       const ready = (currentTab === "file" && selectedFile) ||
+                    (currentTab === "url" && urlImageReady);
       document.getElementById("classify-btn").disabled = !ready;
     }
     async function classify() {
       const btn = document.getElementById("classify-btn");
       btn.disabled = true;
       }
       try {
+        const res = await fetch("/predict", { method: "POST", body: form });
         const data = await res.json();
         if (data.error) throw new Error(data.error);
         showResult(data);
+      } catch (err) {
         showError(err.message);
       } finally {
         btn.textContent = "RUN CLASSIFICATION →";
         btn.classList.remove("loading");
+        updateBtn();
       }
     }
     function showResult(data) {
+      document.getElementById("result-waiting").style.display = "none";
       document.getElementById("result-error").classList.remove("show");
       const pct = Math.round(data.confidence * 100);
       const content = document.getElementById("result-content");
       content.classList.remove("show");
+      void content.offsetWidth;
       content.classList.add("show");
       setTimeout(() => {
         document.getElementById("conf-fill").style.width = pct + "%";
       }, 60);
       const list = document.getElementById("prob-list");
       list.innerHTML = "";
+      const sorted = [...CLASSES].sort((a, b) => data.probabilities[b] - data.probabilities[a]);
       sorted.forEach((cls, i) => {
+        const p = Math.round(data.probabilities[cls] * 100);
         const top = cls === data.class;
         const row = document.createElement("div");
         row.className = "prob-row" + (top ? " top" : "");
     }
     function showError(msg) {
+      document.getElementById("result-waiting").style.display = "none";
       document.getElementById("result-content").classList.remove("show");
       const err = document.getElementById("result-error");
       err.textContent = "ERROR > " + msg;
     }
     function resetResult() {
+      document.getElementById("result-waiting").style.display = "flex";
       document.getElementById("result-content").classList.remove("show");
       document.getElementById("result-error").classList.remove("show");
       document.getElementById("conf-fill").style.width = "0%";
     }
     document.getElementById("tab-file").style.display = "block";
   </script>
+  <script>
+  (function() {
+    const canvas = document.getElementById('plexus-bg');
+    const ctx = canvas.getContext('2d');
+    const NODE_COLOR = 'rgba(0,255,65,';
+    const LINE_COLOR = 'rgba(0,255,65,';
+    const MAX_DIST = 150;
+    const MOUSE_DIST = 220;
+    const ATTRACT_FORCE = 0.012;
+    const SPEED = 0.4;
+    let W, H, nodes = [];
+    let mouse = { x: -9999, y: -9999 };
+    function resize() {
+      W = canvas.width = window.innerWidth;
+      H = canvas.height = window.innerHeight;
+      init();
+    }
+    function getNodeCount() {
+      return Math.max(70, Math.floor((W * H) / 18000));
+    }
+    function Node() {
+      this.x = Math.random() * W;
+      this.y = Math.random() * H;
+      this.vx = (Math.random() - 0.5) * SPEED;
+      this.vy = (Math.random() - 0.5) * SPEED;
+      this.r = Math.random() * 1.8 + 1.2;
+    }
+    function init() {
+      nodes = [];
+      for (let i = 0; i < getNodeCount(); i++) nodes.push(new Node());
+    }
+    window.addEventListener('mousemove', e => {
+      mouse.x = e.clientX;
+      mouse.y = e.clientY;
+    });
+    window.addEventListener('mouseleave', () => {
+      mouse.x = -9999;
+      mouse.y = -9999;
+    });
+    function draw() {
+      ctx.clearRect(0, 0, W, H);
+      for (const n of nodes) {
+        const dxM = mouse.x - n.x;
+        const dyM = mouse.y - n.y;
+        const dM = Math.sqrt(dxM * dxM + dyM * dyM);
+        if (dM < MOUSE_DIST && dM > 0) {
+          const force = (1 - dM / MOUSE_DIST) * ATTRACT_FORCE;
+          n.vx += dxM / dM * force;
+          n.vy += dyM / dM * force;
+        }
+        const spd = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+        const maxSpd = SPEED * 3;
+        if (spd > maxSpd) {
+          n.vx = (n.vx / spd) * maxSpd;
+          n.vy = (n.vy / spd) * maxSpd;
+        }
+        if (dM >= MOUSE_DIST) {
+          n.vx *= 0.996;
+          n.vy *= 0.996;
+          const spdNow = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+          if (spdNow < SPEED * 0.3) {
+            n.vx += (Math.random() - 0.5) * 0.05;
+            n.vy += (Math.random() - 0.5) * 0.05;
+          }
+        }
+        n.x += n.vx;
+        n.y += n.vy;
+        if (n.x < 0 || n.x > W) n.vx *= -1;
+        if (n.y < 0 || n.y > H) n.vy *= -1;
+      }
+      for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+          const a = nodes[i], b = nodes[j];
+          const dx = a.x - b.x, dy = a.y - b.y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d < MAX_DIST) {
+            const alpha = (1 - d / MAX_DIST) * 0.22;
+            ctx.beginPath();
+            ctx.moveTo(a.x, a.y);
+            ctx.lineTo(b.x, b.y);
+            ctx.strokeStyle = LINE_COLOR + alpha + ')';
+            ctx.lineWidth = 0.8;
+            ctx.stroke();
+          }
+        }
+      }
+      for (const n of nodes) {
+        const dxM = mouse.x - n.x;
+        const dyM = mouse.y - n.y;
+        const dM = Math.sqrt(dxM * dxM + dyM * dyM);
+        if (dM < MOUSE_DIST) {
+          const alpha = (1 - dM / MOUSE_DIST) * 0.28;
+          ctx.beginPath();
+          ctx.moveTo(mouse.x, mouse.y);
+          ctx.lineTo(n.x, n.y);
+          ctx.strokeStyle = LINE_COLOR + alpha + ')';
+          ctx.lineWidth = 0.5;
+          ctx.stroke();
+        }
+      }
+      if (mouse.x > 0) {
+        const grdC = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 20);
+        grdC.addColorStop(0, 'rgba(0,255,65,0.35)');
+        grdC.addColorStop(1, 'rgba(0,255,65,0)');
+        ctx.beginPath();
+        ctx.arc(mouse.x, mouse.y, 20, 0, Math.PI * 2);
+        ctx.fillStyle = grdC;
+        ctx.fill();
+      }
+      for (const n of nodes) {
+        const grd = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 5);
+        grd.addColorStop(0, NODE_COLOR + '0.22)');
+        grd.addColorStop(1, NODE_COLOR + '0)');
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, n.r * 5, 0, Math.PI * 2);
+        ctx.fillStyle = grd;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
+        ctx.fillStyle = NODE_COLOR + '0.75)';
+        ctx.fill();
+      }
+      requestAnimationFrame(draw);
+    }
+    resize();
+    draw();
+    window.addEventListener('resize', resize);
+  })();
+  </script>
 </body>
+</html>