Spaces:

CyberAl
/

Image_Classification_Parfait_TOLEFO

Sleeping

App Files Files Community

cyberai-1 commited on Apr 14

Commit

2390a6e

1 Parent(s): 66d25ea

Update

Browse files

Files changed (2) hide show

templates/index.html +179 -1
templates/index_old.html +1068 -0

templates/index.html CHANGED Viewed

@@ -28,6 +28,14 @@
       --ff-head:  'Rajdhani', sans-serif;
       --ff-body:  'Exo 2', sans-serif;
       --r: 4px;
     }
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -42,6 +50,16 @@
       cursor: default;
     }
     /* ── Grid overlay ── */
     body::before {
       content: '';
@@ -486,7 +504,9 @@
 </head>
 <body>
-  <div class="wrapper">
     <!-- HEADER -->
     <header>
@@ -803,5 +823,163 @@
     // Init
     document.getElementById("tab-file").style.display = "block";
   </script>
 </body>
 </html>

       --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; }
       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: '';
 </head>
 <body>
+  <!-- Animated plexus background -->
+  <canvas id="plexus-bg"></canvas>
     <!-- HEADER -->
     <header>
     // 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>
 </html>

templates/index_old.html ADDED Viewed

	@@ -0,0 +1,1068 @@

+<!DOCTYPE html>
+<html lang="en">
+<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;
+      /*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);
+    });
+    function loadFile(file) {
+      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 });
+        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);
+      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;
+        const row = document.createElement("div");
+        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>
+</body>
+</html>