| <!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> |
| :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"> |
| > select_model()<br> |
| > load_image() <span class="terminal-cursor"></span><br> |
| > 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 & 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); |
| }); |
| |
| 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(); |
| } |
| |
| 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 }); |
| 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); |
| 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; |
| 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%"; |
| } |
| |
| 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> |
