| <!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: #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; } |
| 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; |
| } |
| |
| |
| 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 { |
| position: relative; z-index: 1; |
| max-width: 1140px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| } |
| |
| |
| 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 { |
| 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 { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1.5rem; |
| padding-bottom: 4rem; |
| animation: fadeIn .8s ease .2s both; |
| } |
| |
| |
| .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-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 { |
| 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 { |
| 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-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 { |
| 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; } |
| |
| |
| |
| |
| |
| |
| .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-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; } |
| |
| |
| .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); |
| } |
| |
| |
| .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; } |
| .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); |
| } |
| |
| |
| .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 { |
| 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 { |
| 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); } |
| |
| |
| @keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1;transform:none} } |
| |
| |
| @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> |
|
|
| <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">// 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> |
|
|
| |
| <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> |
|
|
| <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"; |
| const urlWrap = document.getElementById("tab-url"); |
| urlWrap.classList.toggle("show", tab === "url"); |
| updateBtn(); |
| } |
| |
| |
| const dropZone = document.getElementById("drop-zone"); |
| const fileInput = document.getElementById("file-input"); |
| |
| fileInput.addEventListener("change", () => { |
| if (fileInput.files[0]) loadFile(fileInput.files[0]); |
| }); |
| dropZone.addEventListener("dragover", e => { e.preventDefault(); dropZone.classList.add("drag"); }); |
| dropZone.addEventListener("dragleave", () => dropZone.classList.remove("drag")); |
| dropZone.addEventListener("drop", e => { |
| e.preventDefault(); dropZone.classList.remove("drag"); |
| 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"); |
| btn.disabled = false; |
| } |
| } |
| |
| |
| function showResult(data) { |
| document.getElementById("result-waiting").style.display = "none"; |
| document.getElementById("result-error").classList.remove("show"); |
| |
| const pct = Math.round(data.confidence * 100); |
| document.getElementById("rc-class").textContent = |
| (EMOJIS[data.class] || "") + " " + data.class.charAt(0).toUpperCase() + data.class.slice(1); |
| document.getElementById("rc-conf").textContent = pct + "%"; |
| |
| const content = document.getElementById("result-content"); |
| content.classList.remove("show"); |
| void content.offsetWidth; |
| content.classList.add("show"); |
| |
| setTimeout(() => { |
| document.getElementById("conf-fill").style.width = pct + "%"; |
| }, 60); |
| |
| |
| const list = document.getElementById("prob-list"); |
| list.innerHTML = ""; |
| const sorted = [...CLASSES].sort((a,b) => data.probabilities[b] - data.probabilities[a]); |
| |
| sorted.forEach((cls, i) => { |
| const p = Math.round(data.probabilities[cls] * 100); |
| const top = cls === data.class; |
| 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> |
| </body> |
| </html> |
|
|
