Spaces:

CyberAl
/

Image_Classification_Parfait_TOLEFO

Sleeping

App Files Files Community

cyberai-1 commited on Apr 15

Commit

e48e5be

1 Parent(s): 98ecda7

Add

Browse files

Files changed (1) hide show

templates/index.html +212 -197

templates/index.html CHANGED Viewed

@@ -3,32 +3,31 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>SCENEIQ — Intel Scene Classifier</title>
   <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 {
@@ -37,371 +36,389 @@
       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 {
-  width: 100%;
-  max-width: 1320px;
-  margin: 0 auto;
-  padding: 0 1.2rem;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-    /* ══ HEADER — compact, fixed height ══ */
     header {
       flex-shrink: 0;
-      border-bottom: 10px solid var(--border);
-      padding: 1rem 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:42px; height:42px; 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:2rem; 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:.9rem;
-      font-family:var(--ff-mono); font-size:0.72rem; color:var(--muted);
     }
     .dot {
-      width:7px; height:7px; 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:.7rem; 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:.72rem; 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:.72rem;
-      padding:.22rem .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); }
-    /* ══ 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:.82rem;
-      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:1.2rem; }
-    .mc-name { font-family:var(--ff-head); font-weight:600; font-size:1.1rem; color:var(--green2); transition:color .2s; }
-    .mc-sub  { font-family:var(--ff-mono); font-size:.72rem; 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:.55rem; background:var(--g1);
       border:none; color:var(--muted); font-family:var(--ff-mono);
-      font-size:0.72rem; 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: 180px;               /* 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:.82rem; color:var(--muted); }
-    .dz-ph em { font-family:var(--ff-mono); font-size:.68rem; 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.72rem; 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.72rem;
       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:1.15rem; 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:1.15rem; font-weight:600; color:var(--green3); }
-    .result-waiting .rw-sub  { font-family:var(--ff-mono); font-size:.82rem; 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:3.4rem; 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:.9rem; color:var(--muted); margin-top:.1rem; }
-    .rc-conf strong { color:var(--green2); font-size:1rem; }
     .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:.9rem; 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:.78rem; 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: .25rem 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:.72rem; color:var(--green-dim); }
-    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
   </style>
 </head>
 <body>
@@ -422,7 +439,7 @@
       </div>
     </header>
-    <!-- CLASSES BAR (moved out of grid, compact strip) -->
     <div class="classes-bar">
       <span class="cs-label">CLASSES //</span>
       <div class="cs-pills">
@@ -441,8 +458,6 @@
       <!-- LEFT : inputs -->
       <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)">
@@ -490,10 +505,9 @@
             <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>
@@ -523,7 +537,7 @@
             </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>
@@ -679,7 +693,7 @@
     document.getElementById("tab-file").style.display = "block";
   </script>
-  <!-- PLEXUS BACKGROUND -->
   <script>
   (function(){
     const canvas = document.getElementById('plexus-bg');
@@ -708,23 +722,23 @@
       }
       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);
     }
@@ -734,3 +748,4 @@
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>SCENEIQ — Intel Scene Classifier | Enhanced Readability</title>
   <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 — SCALED FOR READABILITY ══ */
     :root {
+      --g0:#000000; --g1:#071007; --g2:#0f1a0f; --g3:#152215;
+      --g4:#1f331f;
+      --green:#00ff41; --green2:#00dd33; --green3:#00aa22;
+      --green-dim:#00661a; --green-glow:rgba(0,255,65,0.2);
+      --border:rgba(0,255,65,0.22); --border2:rgba(0,255,65,0.45);
+      --muted:rgba(0,255,65,0.55);
       --ff-mono:'Share Tech Mono',monospace;
       --ff-head:'Rajdhani',sans-serif;
       --ff-body:'Exo 2',sans-serif;
+      --r:8px;
     }
     *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
     html, body {
       height: 100vh;
       overflow: hidden;
+      font-size: 18px;      /* base boost for readability */
     }
     body {
       font-family: var(--ff-body);
       display: flex;
       flex-direction: column;
+      line-height: 1.45;
     }
+    /* ── Background layers (enhanced depth) ── */
     #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.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0,255,65,0.045) 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.1) 2px, rgba(0,0,0,0.1) 5px
       );
     }
+    /* ══ WRAPPER — full height, spacious inner layout ══ */
+    .wrapper {
+      width: 100%;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 0 1.5rem;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      position: relative;
+      z-index: 2;
+    }
+    /* ══ HEADER — bold, crisp ══ */
     header {
       flex-shrink: 0;
+      border-bottom: 2px solid var(--border);
+      padding: 1.2rem 0 0.8rem 0;
       display: flex; align-items: center; justify-content: space-between;
       animation: fadeIn .5s ease both;
     }
+    .logo { display:flex; align-items:center; gap:1rem; }
     .logo-icon {
+      width:50px; height:50px; border:1.8px solid var(--green);
+      display:grid; place-items:center; font-size:1.4rem;
+      box-shadow: 0 0 18px var(--green-glow), inset 0 0 12px var(--green-glow);
       animation: pulse-box 3s ease-in-out infinite;
+      background: rgba(0,255,65,0.02);
     }
     @keyframes pulse-box {
+      0%,100%{box-shadow:0 0 14px var(--green-glow),inset 0 0 8px var(--green-glow);}
+      50%{box-shadow:0 0 28px rgba(0,255,65,.4),inset 0 0 18px rgba(0,255,65,.2);}
     }
     .logo-text {
+      font-family:var(--ff-head); font-size:2.5rem; font-weight:700;
+      letter-spacing:.12em; text-shadow:0 0 22px rgba(0,255,65,.7);
     }
     .logo-text span { color:var(--green3); }
+    .header-right { display:flex; align-items:center; gap:1.6rem; }
     .status-dot {
       display:flex; align-items:center; gap:.9rem;
+      font-family:var(--ff-mono); font-size:0.85rem; color:var(--muted);
+      letter-spacing: 0.5px;
     }
     .dot {
+      width:9px; height:9px; border-radius:50%;
+      background:var(--green); box-shadow:0 0 12px 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:.85rem; color:var(--green-dim); letter-spacing:.12em; }
+    /* ── CLASSES BAR — bigger pills, readable ── */
     .classes-bar {
       flex-shrink: 0;
+      display: flex; align-items: center; gap: 1rem;
+      padding: 0.7rem 0;
       border-bottom: 1px solid var(--border);
       animation: fadeIn .6s ease .1s both;
     }
+    .cs-label {
+      font-family:var(--ff-mono); font-size:0.85rem;
+      color:var(--green-dim); letter-spacing:.2em;
+      white-space:nowrap; font-weight:500;
+    }
+    .cs-pills  { display:flex; gap:0.6rem; flex-wrap:wrap; }
     .cs-pill {
+      font-family:var(--ff-mono); font-size:0.85rem;
+      padding:0.3rem 0.9rem;
+      border:1px solid var(--border); border-radius:20px;
       color:var(--green-dim); transition:all .2s; cursor:default;
+      background: rgba(0,20,0,0.4);
+      backdrop-filter: blur(1px);
     }
+    .cs-pill:hover { border-color:var(--green2); color:var(--green); background:rgba(0,255,65,0.08); }
+    /* ══ MAIN GRID — generous spacing, bigger cards ══ */
     .main-grid {
       flex: 1;
+      min-height: 0;
       display: grid;
       grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+      padding: 1rem 0 0.75rem 0;
       animation: fadeIn .7s ease .15s both;
     }
+    /* ══ PANELS — elevated, more padding, readable containers ══ */
     .panel {
+      background: rgba(10, 21, 10, 0.92);
+      backdrop-filter: blur(2px);
       border: 1px solid var(--border);
       border-radius: var(--r);
+      padding: 1.5rem 1.6rem;
       position: relative;
+      overflow: hidden;
       display: flex;
       flex-direction: column;
+      box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,255,65,0.05) inset;
+      transition: box-shadow 0.2s;
+    }
+    .panel:hover {
+      box-shadow: 0 10px 28px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,255,65,0.15) inset;
     }
     .panel::before {
+      content:''; position:absolute; top:0; left:0; right:0; height:3px;
+      background:linear-gradient(90deg,transparent,var(--green2),transparent);
     }
     .panel-title {
       flex-shrink: 0;
+      font-family:var(--ff-mono); font-size:0.9rem;
+      letter-spacing:.25em; color:var(--green3);
+      text-transform:uppercase; margin-bottom:1rem;
+      display:flex; align-items:center; gap:.8rem;
+      font-weight: 500;
     }
+    .panel-title::after { content:''; flex:1; height:1.5px; background:var(--border); }
+    /* scrollable zones — smooth, no visible scrollbar */
     .panel-scroll {
       flex: 1;
       min-height: 0;
       overflow-y: auto;
       overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: var(--green3) var(--g2);
+      padding-right: 3px;
     }
+    .panel-scroll::-webkit-scrollbar { width: 5px; }
+    .panel-scroll::-webkit-scrollbar-track { background: var(--g2); border-radius: 4px; }
+    .panel-scroll::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 4px; }
+    /* ── MODEL SELECTOR (larger cards) ── */
     .model-grid {
+      display:grid; grid-template-columns:1fr 1fr; gap:1rem;
+      margin-bottom:1.4rem;
     }
     .model-card {
+      border:1.5px solid var(--border); border-radius:12px;
+      padding:0.9rem 0.8rem; cursor:pointer; transition:all .2s;
       background:var(--g1);
+      display:flex; flex-direction:column; gap:0.4rem;
     }
+    .model-card:hover { border-color:var(--green2); background:rgba(0,255,65,0.08); transform:translateY(-2px); }
     .model-card.active {
+      border-color:var(--green); background:rgba(0,255,65,.1);
+      box-shadow:0 0 20px rgba(0,255,65,.18),inset 0 0 12px rgba(0,255,65,.06);
     }
+    .model-card.active .mc-name { color:var(--green); text-shadow:0 0 5px var(--green-glow);}
+    .mc-icon { font-size:1.6rem; }
+    .mc-name { font-family:var(--ff-head); font-weight:700; font-size:1.3rem; color:var(--green2); transition:color .2s; }
+    .mc-sub  { font-family:var(--ff-mono); font-size:0.75rem; color:var(--muted); letter-spacing: -0.2px;}
+    /* ── INPUT TABS (bigger click area) ── */
     .input-tabs {
+      display:flex; margin-bottom:1rem;
+      border:1px solid var(--border); border-radius:12px; overflow:hidden;
     }
     .tab-btn {
+      flex:1; padding:0.7rem 0.5rem; background:var(--g1);
       border:none; color:var(--muted); font-family:var(--ff-mono);
+      font-size:0.85rem; letter-spacing:.1em; cursor:pointer;
+      transition:all .2s; text-transform:uppercase; font-weight:500;
     }
     .tab-btn:hover  { background:var(--g3); color:var(--green2); }
     .tab-btn.active {
+      background:rgba(0,255,65,.12); color:var(--green);
+      box-shadow:inset 0 -3px 0 var(--green);
     }
+    /* ── DROP ZONE — taller, clearer text ── */
     .drop-zone {
+      border:2px dashed var(--border2); border-radius:16px;
+      height: 210px;
       display:flex; flex-direction:column;
       align-items:center; justify-content:center;
+      gap:.7rem; 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,.08);
+      box-shadow:0 0 28px rgba(0,255,65,.12);
     }
     .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:14px; opacity:.9;
     }
     .drop-zone.has-img #preview-img { display:block; }
+    .dz-corner { position:absolute; width:14px; height:14px; border-color:var(--green2); border-style:solid; }
+    .dz-corner.tl{top:10px;left:10px;border-width:2px 0 0 2px;}
+    .dz-corner.tr{top:10px;right:10px;border-width:2px 2px 0 0;}
+    .dz-corner.bl{bottom:10px;left:10px;border-width:0 0 2px 2px;}
+    .dz-corner.br{bottom:10px;right:10px;border-width:0 2px 2px 0;}
+    .dz-ph { display:flex; flex-direction:column; align-items:center; gap:.5rem; pointer-events:none; }
     .dz-icon {
+      width:48px; height:48px; border:1.5px solid var(--border2);
       border-radius:50%; display:grid; place-items:center;
+      font-size:1.5rem; color:var(--green2);
     }
+    .dz-ph p  { font-family:var(--ff-mono); font-size:0.95rem; color:var(--muted); font-weight:500; }
+    .dz-ph em { font-family:var(--ff-mono); font-size:0.75rem; color:var(--green-dim); font-style:normal; }
     #file-input { display:none; }
+    /* ── URL INPUT — bigger controls ── */
+    .url-input-wrap { display:none; flex-direction:column; gap:.8rem; }
     .url-input-wrap.show { display:flex; }
     .url-field {
       display:flex; align-items:center;
+      border:1.5px solid var(--border2); border-radius:12px;
       background:var(--g1); overflow:hidden;
     }
+    .url-prefix { font-family:var(--ff-mono); font-size:0.85rem; color:var(--green2); padding:0 0.8rem; white-space:nowrap; border-right:1.5px solid var(--border); }
     .url-input {
       flex:1; background:transparent; border:none; outline:none;
+      color:var(--green); font-family:var(--ff-mono); font-size:0.9rem;
+      padding:0.8rem 1rem; caret-color:var(--green);
     }
+    .url-input::placeholder { color:var(--green-dim); font-size:0.8rem; }
     .url-load-btn {
+      padding:0.7rem 1rem; background:rgba(0,255,65,.12); border:none;
+      border-left:1.5px solid var(--border);
+      color:var(--green2); font-family:var(--ff-mono); font-size:0.85rem;
       cursor:pointer; transition:background .2s; white-space:nowrap;
+      font-weight:600;
     }
+    .url-load-btn:hover { background:rgba(0,255,65,.25); }
     .url-preview {
+      width:100%; height:130px; object-fit:cover;
+      border-radius:12px; border:1px solid var(--border); display:none;
     }
     .url-preview.show { display:block; }
+    /* ── CLASSIFY BTN — bold, interactive ── */
     .classify-btn {
       flex-shrink: 0;
+      width:100%; margin-top:1rem;
+      padding:0.9rem 0.5rem;
       background:linear-gradient(135deg,var(--green3),var(--green-dim));
+      border:1.5px solid var(--green3); border-radius:60px;
       color:var(--green); font-family:var(--ff-head);
+      font-size:1.3rem; font-weight:700; letter-spacing:.12em;
       cursor:pointer; position:relative; overflow:hidden;
+      transition:all .25s; text-transform:uppercase;
+      box-shadow:0 2px 8px rgba(0,0,0,0.3);
     }
     .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,.25),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 30px rgba(0,255,65,.45); transform:translateY(-2px);
+      border-color: var(--green);
     }
+    .classify-btn:disabled { opacity:.4; cursor:not-allowed; transform: none; }
+    /* ══ RIGHT PANEL — results, big class display, crisp probabilities ══ */
     .result-panel-inner {
       flex: 1;
       min-height: 0;
       overflow-y: auto;
       overflow-x: hidden;
+      scrollbar-width: thin;
+      padding-right: 4px;
     }
+    .result-panel-inner::-webkit-scrollbar { width: 5px; }
     .result-waiting {
       display:flex; flex-direction:column;
       align-items:flex-start; justify-content:center;
+      flex:1; gap:.8rem; padding:0.6rem 0;
     }
+    .result-waiting .rw-title { font-family:var(--ff-head); font-size:1.5rem; font-weight:600; color:var(--green2); letter-spacing:-0.2px; }
+    .result-waiting .rw-sub  { font-family:var(--ff-mono); font-size:1rem; color:var(--green-dim); line-height:1.9; }
     .terminal-cursor {
+      display:inline-block; width:9px; height:18px;
+      background:var(--green); margin-left:4px;
       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 .45s 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:.5rem; }
+    .rc-label   { font-family:var(--ff-mono); font-size:0.7rem; letter-spacing:.25em; color:var(--green3); font-weight:500; }
     .rc-class   {
+      font-family:var(--ff-head); font-size:4rem; font-weight:800;
+      letter-spacing:-0.02em; line-height:1.1; color:var(--green);
+      text-shadow:0 0 28px rgba(0,255,65,.7);
+      word-break: break-word;
     }
+    .rc-conf    { font-family:var(--ff-mono); font-size:1rem; color:var(--muted); margin-top:.2rem; }
+    .rc-conf strong { color:var(--green2); font-size:1.2rem; }
     .conf-track {
+      height:8px; background:var(--g4); border-radius:40px; overflow:hidden; margin-top:.6rem;
     }
     .conf-fill {
       height:100%;
       background:linear-gradient(90deg,var(--green3),var(--green));
+      border-radius:40px; width:0%;
+      transition:width 1s cubic-bezier(.2,.9,.3,1.1);
+      box-shadow:0 0 12px var(--green);
     }
+    .rc-divider { height:1.5px; background:var(--border); flex-shrink:0; margin:.2rem 0; }
+    .prob-list { display:flex; flex-direction:column; gap:1rem; margin-top:0.3rem; }
+    .prob-row  { display:flex; flex-direction:column; gap:.3rem; }
     .prob-meta { display:flex; justify-content:space-between; align-items:baseline; }
     .prob-name {
+      font-family:var(--ff-body); font-size:1rem; font-weight:500;
+      color:var(--muted); display:flex; align-items:center; gap:.5rem; text-transform:capitalize;
     }
+    .prob-row.top .prob-name { color:var(--green); font-weight:700; text-shadow:0 0 3px rgba(0,255,65,0.3);}
+    .prob-pct  { font-family:var(--ff-mono); font-size:0.85rem; color:var(--green-dim); font-weight:500; }
+    .prob-row.top .prob-pct { color:var(--green2); font-weight:600; }
+    .prob-track { height:7px; background:var(--g4); border-radius:40px; overflow:hidden; }
     .prob-fill  {
       height:100%; background:var(--green-dim);
+      border-radius:40px; width:0%;
+      transition:width .8s cubic-bezier(.3,.8,.4,1);
     }
     .prob-row.top .prob-fill {
       background:linear-gradient(90deg,var(--green3),var(--green));
+      box-shadow:0 0 10px rgba(0,255,65,.5);
     }
     .result-error {
+      display:none; padding:1rem;
+      border:1px solid rgba(255,70,70,.5); border-radius:12px;
+      background:rgba(255,30,30,.08);
+      font-family:var(--ff-mono); font-size:0.85rem; color:#ff7a7a; line-height:1.7;
     }
     .result-error.show { display:block; animation:fadeIn .3s ease; }
+    /* ══ FOOTER BAR — readable, relaxed ══ */
     .footer-bar {
       flex-shrink: 0;
+      border-top: 1.5px solid var(--border);
+      padding: 0.5rem 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:0.8rem; color:var(--green-dim); letter-spacing:0.3px; }
+    @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
   </style>
 </head>
 <body>
       </div>
     </header>
+    <!-- CLASSES BAR -->
     <div class="classes-bar">
       <span class="cs-label">CLASSES //</span>
       <div class="cs-pills">
       <!-- LEFT : inputs -->
       <div class="panel">
         <div class="panel-title">01 // MODEL_SELECT</div>
         <div class="panel-scroll">
           <div class="model-grid">
             <div class="model-card active" data-fw="pytorch" onclick="selectModel(this)">
             <img id="url-preview" class="url-preview" src="" alt="URL preview"/>
           </div>
+          <div class="panel-title" style="margin-top:1rem;">03 // ANALYZE</div>
         </div><!-- /panel-scroll -->
         <button class="classify-btn" id="classify-btn" disabled onclick="classify()">
           RUN CLASSIFICATION →
         </button>
             </div>
             <div class="rc-divider"></div>
             <div>
+              <div class="panel-title" style="margin-bottom:.8rem;">// CLASS_SCORES</div>
               <div class="prob-list" id="prob-list"></div>
             </div>
           </div>
     document.getElementById("tab-file").style.display = "block";
   </script>
+  <!-- PLEXUS BACKGROUND (enhanced) -->
   <script>
   (function(){
     const canvas = document.getElementById('plexus-bg');
       }
       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=.9;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=.7;ctx.stroke();}
       }
       if(mouse.x>0){
+        const g=ctx.createRadialGradient(mouse.x,mouse.y,0,mouse.x,mouse.y,22);
+        g.addColorStop(0,'rgba(0,255,65,0.45)');g.addColorStop(1,'rgba(0,255,65,0)');
+        ctx.beginPath();ctx.arc(mouse.x,mouse.y,22,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();
+        ctx.beginPath();ctx.arc(mouse.x,mouse.y,3,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*6);
+        g.addColorStop(0,NODE_COLOR+'0.35)');g.addColorStop(1,NODE_COLOR+'0)');
+        ctx.beginPath();ctx.arc(n.x,n.y,n.r*6,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.9)';ctx.fill();
       }
       requestAnimationFrame(draw);
     }
   </script>
 </body>
 </html>
+```