Download templates/index_old.html from CyberAl/Image_Classification_Parfait_TOLEFO: direct link, hf CLI and curl.
- Browser
- Download file 35.2 kB
-
https://huggingface.co/spaces/CyberAl/Image_Classification_Parfait_TOLEFO/resolve/main/templates/index_old.html
- Command line
-
hf download hf://spaces/CyberAl/Image_Classification_Parfait_TOLEFO/templates/index_old.html
-
curl -L -o index_old.html https://huggingface.co/spaces/CyberAl/Image_Classification_Parfait_TOLEFO/resolve/main/templates/index_old.html
35.2 kB
| <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> |