Spaces:
Runtime error
Runtime error
Download static/index.html from urmilasaini/EcoSort_AI: direct link, hf CLI and curl.
- Browser
- Download file 31.5 kB
-
https://huggingface.co/spaces/urmilasaini/EcoSort_AI/resolve/main/static/index.html
- Command line
-
hf download hf://spaces/urmilasaini/EcoSort_AI/static/index.html
-
curl -L -o index.html https://huggingface.co/spaces/urmilasaini/EcoSort_AI/resolve/main/static/index.html
31.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" /> | |
| <meta name="theme-color" content="#eaf6f0" /> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <title>EcoSort AI</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <div class="brand"> | |
| <span class="brand-logo icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/><line x1="12" y1="6" x2="12" y2="20"/></svg> | |
| </span> | |
| <span class="brand-name">EcoSort <span class="accent">AI</span></span> | |
| </div> | |
| <div class="nav-right"> | |
| <span class="badge-ai"> | |
| <span class="icon icon-sm" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2z"/><path d="M19 14l.7 2.3L22 17l-2.3.7L19 20l-.7-2.3L16 17l2.3-.7L19 14z"/></svg> | |
| </span> | |
| AI Powered | |
| </span> | |
| <button id="menuBtn" class="hamburger" aria-label="Open menu" aria-expanded="false"> | |
| <span></span><span></span><span></span> | |
| </button> | |
| </div> | |
| <div id="navMenu" class="nav-menu" hidden> | |
| <a href="#top">Home</a> | |
| <a href="#" id="menuScanLink">Scan Waste</a> | |
| <a href="#bins">Know Your Dustbins</a> | |
| </div> | |
| </nav> | |
| <header id="top" class="hero"> | |
| <div class="hero-copy"> | |
| <h1> | |
| Waste<br /> | |
| <span class="text-green">Segregation</span><br /> | |
| Made Simple | |
| </h1> | |
| <p class="hero-desc"> | |
| Use AI to instantly identify whether waste belongs in the | |
| <b class="text-green">Wet</b>, <b class="text-blue">Dry</b>, or | |
| <b class="text-red">Hazardous</b> bin. | |
| </p> | |
| </div> | |
| <div class="hero-visual"> | |
| <img src="images/hero-img.png" alt="Robot AI scanning a plastic bottle above wet, dry and hazardous waste bins" /> | |
| </div> | |
| <button id="openScannerBtn" class="cta-scan"> | |
| <span class="icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> | |
| </span> | |
| <span>Scan Waste</span> | |
| <span class="cta-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| </span> | |
| </button> | |
| <p class="no-signup"> | |
| <span class="icon icon-sm" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg> | |
| </span> | |
| No signup required | |
| </p> | |
| <div class="stats-row"> | |
| <div class="stat"> | |
| <div class="stat-icon stat-icon-green"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg> | |
| </div> | |
| <div class="stat-title">AI Powered</div> | |
| <div class="stat-sub">Smart Detection</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-icon stat-icon-blue"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> | |
| </div> | |
| <div class="stat-title">Instant</div> | |
| <div class="stat-sub">< 1 sec Prediction</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-icon stat-icon-green"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> | |
| </div> | |
| <div class="stat-title">12 Categories</div> | |
| <div class="stat-sub">Accurate Results</div> | |
| </div> | |
| </div> | |
| <a href="#bins" class="scroll-cue"> | |
| Know Your Dustbins | |
| <span class="icon chevron" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg> | |
| </span> | |
| </a> | |
| </header> | |
| <section id="scanner-showcase" class="showcase" data-scan-state="scanning"> | |
| <div class="showcase-blob showcase-blob-1" aria-hidden="true"></div> | |
| <div class="showcase-blob showcase-blob-2" aria-hidden="true"></div> | |
| <svg class="showcase-leaf showcase-leaf-1" aria-hidden="true" viewBox="0 0 24 24" fill="#16a34a"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17 1.05.3 1.71.3C15 20 20 17 20 4c-2.5 2.5-6.5 3-9 3.5C8.5 8 5 8 3 6c0 5.5 2.5 8 5 9"/></svg> | |
| <svg class="showcase-leaf showcase-leaf-2" aria-hidden="true" viewBox="0 0 24 24" fill="#16a34a"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17 1.05.3 1.71.3C15 20 20 17 20 4c-2.5 2.5-6.5 3-9 3.5C8.5 8 5 8 3 6c0 5.5 2.5 8 5 9"/></svg> | |
| <div class="showcase-head"> | |
| <svg class="showcase-star" aria-hidden="true" viewBox="0 0 24 24" fill="#16a34a"><path d="M12 2l1.6 5.4L19 9l-5.4 1.6L12 16l-1.6-5.4L5 9l5.4-1.6L12 2z"/></svg> | |
| <h2>AI Waste Scanner</h2> | |
| <p class="showcase-sub">Point your camera at any waste item and let our AI identify the correct waste category.</p> | |
| </div> | |
| <div class="showcase-demo"> | |
| <div class="demo-phone"> | |
| <span class="phone-btn phone-btn-power" aria-hidden="true"></span> | |
| <span class="phone-btn phone-btn-vol-up" aria-hidden="true"></span> | |
| <span class="phone-btn phone-btn-vol-down" aria-hidden="true"></span> | |
| <div class="phone-frame"> | |
| <span class="phone-camera-dot" aria-hidden="true"></span> | |
| <div class="phone-screen"> | |
| <div class="camera-preview"></div> | |
| <span class="screen-icon-btn screen-icon-close"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </span> | |
| <span class="screen-icon-btn screen-icon-flash"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg> | |
| </span> | |
| <span class="corner corner-tl"></span> | |
| <span class="corner corner-tr"></span> | |
| <span class="corner corner-bl"></span> | |
| <span class="corner corner-br"></span> | |
| <div class="scan-line" aria-hidden="true"></div> | |
| <div class="detect-badge" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> | |
| </div> | |
| <div class="scanning-pill" id="scanPill"><span class="pulse-dot"></span><span id="scanPillText">Scanning...</span></div> | |
| <div class="shutter-btn"><span class="shutter-inner"></span></div> | |
| <div class="screen-glare" aria-hidden="true"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="demo-panels"> | |
| <div class="panel-card prediction-card"> | |
| <div class="prediction-top"> | |
| <span class="check-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> | |
| </span> | |
| <div> | |
| <div class="panel-label">Prediction</div> | |
| <div class="prediction-value">Plastic Bottle</div> | |
| </div> | |
| </div> | |
| <div class="panel-divider"></div> | |
| <div class="confidence-block"> | |
| <div class="panel-label">Confidence</div> | |
| <div class="confidence-value">98.4%</div> | |
| <div class="confidence-bar"><div class="confidence-fill" data-target="98.4%"></div></div> | |
| </div> | |
| <div class="panel-divider"></div> | |
| <div class="belongs-block"> | |
| <div class="panel-label">Belongs in</div> | |
| <div class="belongs-badge"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5"/><path d="M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12"/><path d="m14 16-3 3 3 3"/><path d="M8.293 13.596 7.196 9.5 3.1 10.598"/><path d="m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 12 3a1.784 1.784 0 0 1 1.545.888l3.943 6.843"/><path d="m13.378 9.633 4.096 1.098 1.097-4.096"/></svg> | |
| DRY WASTE | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel-card top-predictions-card"> | |
| <h3>Top Predictions</h3> | |
| <ul class="prediction-list"> | |
| <li> | |
| <span class="pred-icon pred-icon-blue"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 2h6v3l2 3v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V8l2-3z"/></svg> | |
| </span> | |
| <span class="pred-name">Plastic</span> | |
| <span class="pred-bar-track"><span class="pred-bar-fill pred-bar-blue" data-target="98%"></span></span> | |
| <span class="pred-pct">98%</span> | |
| </li> | |
| <li> | |
| <span class="pred-icon pred-icon-green"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="7" width="12" height="14" rx="2"/><ellipse cx="12" cy="7" rx="6" ry="2"/></svg> | |
| </span> | |
| <span class="pred-name">Metal</span> | |
| <span class="pred-bar-track"><span class="pred-bar-fill pred-bar-green" data-target="1%"></span></span> | |
| <span class="pred-pct">1%</span> | |
| </li> | |
| <li> | |
| <span class="pred-icon pred-icon-brown"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 2h6v4l2 2v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V8l2-2z"/></svg> | |
| </span> | |
| <span class="pred-name">Glass</span> | |
| <span class="pred-bar-track"><span class="pred-bar-fill pred-bar-brown" data-target="1%"></span></span> | |
| <span class="pred-pct">1%</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="showcase-features"> | |
| <div class="showcase-feature"> | |
| <div class="showcase-feature-icon showcase-feature-icon-green"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2"/></svg> | |
| </div> | |
| <div class="showcase-feature-title">Accurate AI</div> | |
| <p class="showcase-feature-sub">Trained on 12 waste categories</p> | |
| </div> | |
| <div class="showcase-feature"> | |
| <div class="showcase-feature-icon showcase-feature-icon-blue"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg> | |
| </div> | |
| <div class="showcase-feature-title">Instant Results</div> | |
| <p class="showcase-feature-sub">Get result in less than 1 second</p> | |
| </div> | |
| <div class="showcase-feature"> | |
| <div class="showcase-feature-icon showcase-feature-icon-green"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/><line x1="12" y1="6" x2="12" y2="20"/></svg> | |
| </div> | |
| <div class="showcase-feature-title">Better Tomorrow</div> | |
| <p class="showcase-feature-sub">Small steps lead to a cleaner planet</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="bins" class="bins-section"> | |
| <ur-mila class="bins-head"> | |
| <ur-mila class="bins-badge-row" aria-hidden="true"> | |
| <span class="bins-dash"></span> | |
| <span class="bins-badge"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/></svg> | |
| </span> | |
| <span class="bins-dash"></span> | |
| </ur-mila> | |
| <h2>Know Your Dustbins</h2> | |
| <p class="bins-sub">Segregate waste the right way for a cleaner and greener tomorrow.</p> | |
| </ur-mila> | |
| <div class="bin-cards"> | |
| <article class="bin-card bin-card-green"> | |
| <div class="bin-badge"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z"/></svg> | |
| </div> | |
| <h3>Wet Waste</h3> | |
| <p class="bin-card-tag">Biodegradable waste from natural sources.</p> | |
| <ur-mila class="bin-art-wrap"> | |
| <svg class="bin-art" viewBox="0 0 140 150" aria-hidden="true"> | |
| <ellipse cx="70" cy="141" rx="44" ry="6" fill="#0f172a" opacity="0.1"/> | |
| <circle cx="40" cy="131" r="9" fill="#333b47"/> | |
| <circle cx="100" cy="131" r="9" fill="#333b47"/> | |
| <rect x="59" y="14" width="22" height="10" rx="5" fill="currentColor"/> | |
| <path d="M30 46h80l-6 78a9 9 0 0 1-9 8H45a9 9 0 0 1-9-8z" fill="currentColor"/> | |
| <path d="M38 46h12l-5 86h-7a9 9 0 0 1-9-8z" fill="#fff" opacity="0.14"/> | |
| <rect x="22" y="24" width="96" height="22" rx="9" fill="currentColor"/> | |
| <rect x="26" y="27" width="88" height="8" rx="4" fill="#fff" opacity="0.18"/> | |
| <path transform="translate(52,70) scale(1.5)" d="M12 2C7 2 3 6 3 11c0 5 4 9 8 11 4-2 8-6 8-11 0-5-4-9-8-9z" fill="#fff"/> | |
| </svg> | |
| </ur-mila> | |
| <span class="examples-pill">Examples</span> | |
| <ul class="example-list"> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12h18a9 9 0 0 1-18 0z"/><line x1="5" y1="8" x2="19" y2="8"/></svg></span>Food leftovers</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 8c-4 0-7 3-7 7s3 6 7 6 7-2 7-6-3-7-7-7z"/><path d="M12 8V4M12 4c2 0 3-1 4-2"/></svg></span>Fruit peels</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 20l9-11-4-4-9 11z"/><path d="M15 9l3-3M13 4l3 1 1 3"/></svg></span>Vegetable peels</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h13v7a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z"/><path d="M17 10h2a2 2 0 0 1 0 5h-2"/></svg></span>Tea leaves</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="10" r="3"/><path d="M12 7a3 3 0 0 0-3-3 3 3 0 0 0 3 3zM12 7a3 3 0 0 1 3-3 3 3 0 0 1-3 3zM9 10a3 3 0 0 0-3 3 3 3 0 0 0 3-3zM15 10a3 3 0 0 1 3 3 3 3 0 0 1-3-3zM12 13v8"/></svg></span>Flowers</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3C7 3 4 7 4 11c0 5 4 9 8 10 4-1 8-5 8-10 0-4-3-8-8-8z"/><line x1="12" y1="7" x2="12" y2="20"/></svg></span>Garden waste</li> | |
| </ul> | |
| </article> | |
| <article class="bin-card bin-card-blue"> | |
| <div class="bin-badge"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> | |
| </div> | |
| <h3>Dry Waste</h3> | |
| <p class="bin-card-tag">Recyclable waste that can be reused.</p> | |
| <ur-mila class="bin-art-wrap"> | |
| <svg class="bin-art" viewBox="0 0 140 150" aria-hidden="true"> | |
| <ellipse cx="70" cy="141" rx="44" ry="6" fill="#0f172a" opacity="0.1"/> | |
| <circle cx="40" cy="131" r="9" fill="#333b47"/> | |
| <circle cx="100" cy="131" r="9" fill="#333b47"/> | |
| <rect x="59" y="14" width="22" height="10" rx="5" fill="currentColor"/> | |
| <path d="M30 46h80l-6 78a9 9 0 0 1-9 8H45a9 9 0 0 1-9-8z" fill="currentColor"/> | |
| <path d="M38 46h12l-5 86h-7a9 9 0 0 1-9-8z" fill="#fff" opacity="0.14"/> | |
| <rect x="22" y="24" width="96" height="22" rx="9" fill="currentColor"/> | |
| <rect x="26" y="27" width="88" height="8" rx="4" fill="#fff" opacity="0.18"/> | |
| <g transform="translate(52,70) scale(1.5)" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/> | |
| </g> | |
| </svg> | |
| </ur-mila> | |
| <span class="examples-pill">Examples</span> | |
| <ul class="example-list"> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2h4v3l2 3v11a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V8l2-3z"/><line x1="8" y1="12" x2="16" y2="12"/></svg></span>Plastic bottles</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><polyline points="14 3 14 8 19 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg></span>Paper</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M3 8l3-4h12l3 4M12 8v12"/></svg></span>Cardboard</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2h4v4l2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10l2-4z"/></svg></span>Glass bottles</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="6" ry="2.5"/><path d="M6 6v12c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V6"/></svg></span>Metal cans</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h13v14a2 2 0 0 1-2 2H4z"/><path d="M17 9h3v10a2 2 0 0 1-3 1.7"/><line x1="7" y1="9" x2="14" y2="9"/><line x1="7" y1="13" x2="14" y2="13"/><line x1="7" y1="17" x2="11" y2="17"/></svg></span>Newspapers</li> | |
| </ul> | |
| </article> | |
| <article class="bin-card bin-card-red"> | |
| <div class="bin-badge"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="7.5" r="4"/><circle cx="7" cy="15.5" r="4"/><circle cx="17" cy="15.5" r="4"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/></svg> | |
| </div> | |
| <h3>Hazardous Waste</h3> | |
| <p class="bin-card-tag">Waste that requires special handling.</p> | |
| <ur-mila class="bin-art-wrap"> | |
| <svg class="bin-art" viewBox="0 0 140 150" aria-hidden="true"> | |
| <ellipse cx="70" cy="141" rx="44" ry="6" fill="#0f172a" opacity="0.1"/> | |
| <circle cx="40" cy="131" r="9" fill="#333b47"/> | |
| <circle cx="100" cy="131" r="9" fill="#333b47"/> | |
| <rect x="59" y="14" width="22" height="10" rx="5" fill="currentColor"/> | |
| <path d="M30 46h80l-6 78a9 9 0 0 1-9 8H45a9 9 0 0 1-9-8z" fill="currentColor"/> | |
| <path d="M38 46h12l-5 86h-7a9 9 0 0 1-9-8z" fill="#fff" opacity="0.14"/> | |
| <rect x="22" y="24" width="96" height="22" rx="9" fill="currentColor"/> | |
| <rect x="26" y="27" width="88" height="8" rx="4" fill="#fff" opacity="0.18"/> | |
| <g transform="translate(70,88)" fill="none" stroke="#fff" stroke-width="3"> | |
| <circle cx="0" cy="-11" r="8"/> | |
| <circle cx="-10" cy="6" r="8"/> | |
| <circle cx="10" cy="6" r="8"/> | |
| <circle cx="0" cy="0" r="3.5" fill="#fff" stroke="none"/> | |
| </g> | |
| </svg> | |
| </ur-mila> | |
| <span class="examples-pill">Examples</span> | |
| <ul class="example-list"> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="5" width="10" height="16" rx="2"/><path d="M10 3h4"/><path d="M12 9l-2 4h4l-2 4"/></svg></span>Batteries</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2" width="12" height="20" rx="2"/><line x1="10" y1="18" x2="14" y2="18"/></svg></span>E-waste</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="9" width="20" height="7" rx="3.5" transform="rotate(-40 12 12)"/><line x1="9" y1="8" x2="15" y2="14"/></svg></span>Medicines</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="7" width="14" height="14" rx="2"/><path d="M5 11h14M9 4h6v3H9z"/></svg></span>Paint containers</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2h4v6l5 10a2 2 0 0 1-2 3H7a2 2 0 0 1-2-3l5-10z"/><line x1="8" y1="15" x2="16" y2="15"/></svg></span>Chemicals</li> | |
| <li><span class="example-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3 11v4h6v-4a6 6 0 0 0-3-11z"/></svg></span>CFL bulbs</li> | |
| </ul> | |
| </article> | |
| </div> | |
| <div class="bins-cta"> | |
| <svg class="bins-cta-globe" viewBox="0 0 64 64" aria-hidden="true"> | |
| <circle cx="32" cy="32" r="28" fill="#bfe3f7"/> | |
| <path d="M12 22c6 3 10 1 14 4s2 7 6 8 8-2 10-6 6-4 8-2" fill="none" stroke="#5cb85c" stroke-width="5" stroke-linecap="round"/> | |
| <path d="M8 40c5-1 9 2 13 1s6-4 10-3 7 5 12 4" fill="none" stroke="#5cb85c" stroke-width="5" stroke-linecap="round"/> | |
| <circle cx="32" cy="32" r="28" fill="none" stroke="#8ecae6" stroke-width="2"/> | |
| </svg> | |
| <ur-mila class="bins-cta-copy"> | |
| <h3>Small steps today,<br /><span class="text-green">a cleaner</span> tomorrow.</h3> | |
| </ur-mila> | |
| <svg class="bins-cta-recycle" viewBox="0 0 24 24" fill="none" stroke="#22a851" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> | |
| <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/> | |
| </svg> | |
| <button id="scanAnotherBtn" class="cta-scan cta-scan-green"> | |
| <span class="icon" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> | |
| </span> | |
| <span>Scan Another Item</span> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Scanner modal --> | |
| <div id="scannerModal" class="scanner-modal" hidden> | |
| <div id="cameraWrap" class="camera-wrap"> | |
| <video id="video" autoplay playsinline muted></video> | |
| <canvas id="canvas" hidden></canvas> | |
| <img id="captured" alt="Captured waste" hidden /> | |
| <div id="cameraError" class="camera-error" hidden> | |
| <p>Camera unavailable. Tap the photo button below to pick an image instead.</p> | |
| </div> | |
| <button id="closeScannerBtn" class="cam-icon-btn cam-close" aria-label="Close scanner"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| <button id="flashBtn" class="cam-icon-btn cam-flash" aria-label="Toggle flash" hidden> | |
| <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg> | |
| </button> | |
| <span class="corner corner-tl"></span> | |
| <span class="corner corner-tr"></span> | |
| <span class="corner corner-bl"></span> | |
| <span class="corner corner-br"></span> | |
| <div class="live-scan-line" aria-hidden="true"></div> | |
| <div id="camDetectBadge" class="cam-detect-badge" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> | |
| </div> | |
| <div class="scanning-pill live-pill"> | |
| <span class="pulse-dot"></span><span id="scanStatusText">Point at a waste item</span> | |
| </div> | |
| <div class="cam-controls"> | |
| <button id="pickBtn" class="cam-side-btn" aria-label="Upload a photo instead"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10" r="1.5"/><path d="M21 15l-5-5-5 5-2-2-6 6"/></svg> | |
| </button> | |
| <button id="scanBtn" class="cam-shutter" aria-label="Capture and scan"> | |
| <span class="cam-shutter-inner"></span> | |
| </button> | |
| <button id="flipBtn" class="cam-side-btn" aria-label="Switch camera"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 1-9 9 9 9 0 0 1-7.5-4"/><path d="M3 12a9 9 0 0 1 9-9 9 9 0 0 1 7.5 4"/><polyline points="19.5 3 19.5 7 15.5 7"/><polyline points="4.5 21 4.5 17 8.5 17"/></svg> | |
| </button> | |
| </div> | |
| <input id="fileInput" type="file" accept="image/*" hidden /> | |
| </div> | |
| </div> | |
| <div id="resultOverlay" class="result-overlay" hidden> | |
| <div id="resultCard" class="result-card"> | |
| <div class="result-top"> | |
| <span id="resultIcon" class="result-icon"></span> | |
| <div> | |
| <div class="panel-label">Prediction</div> | |
| <div id="resultLabel" class="result-prediction"></div> | |
| </div> | |
| </div> | |
| <div class="result-divider"></div> | |
| <div class="panel-label">Confidence</div> | |
| <div id="resultConfidence" class="result-confidence-value"></div> | |
| <div class="result-bar"><div id="resultConfidenceFill" class="result-bar-fill"></div></div> | |
| <div class="result-divider"></div> | |
| <div class="panel-label">Belongs in</div> | |
| <div id="resultBinBadge" class="result-bin-badge"> | |
| <span id="resultBinIcon" class="result-bin-icon"></span> | |
| <span> | |
| <span id="resultBinName" class="result-bin-name"></span> | |
| <span id="resultBinDesc" class="result-bin-desc"></span> | |
| </span> | |
| </div> | |
| <div id="resultTopWrap" class="result-top-preds" hidden> | |
| <h3>Top Predictions</h3> | |
| <ul id="resultTopList" class="prediction-list"></ul> | |
| </div> | |
| <button id="analysisToggle" class="analysis-toggle" aria-expanded="false" aria-controls="analysisPanel"> | |
| <span class="analysis-toggle-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg> | |
| </span> | |
| <span>Detailed Analysis</span> | |
| <span class="analysis-chevron"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg> | |
| </span> | |
| </button> | |
| <div id="analysisPanel" class="analysis-panel" hidden> | |
| <div class="analysis-metrics"> | |
| <div class="metric"> | |
| <div class="metric-label">Entropy</div> | |
| <div id="mEntropy" class="metric-value"></div> | |
| <div id="mEntropyNote" class="metric-note"></div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-label">Top-1 − Top-2 margin</div> | |
| <div id="mMargin" class="metric-value"></div> | |
| <div class="metric-note">separation</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-label">Inference</div> | |
| <div id="mLatency" class="metric-value"></div> | |
| <div id="mDevice" class="metric-note"></div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-label">Top logit</div> | |
| <div id="mLogit" class="metric-value"></div> | |
| <div class="metric-note">pre-softmax</div> | |
| </div> | |
| </div> | |
| <h4 class="analysis-heading">Probability distribution — all 12 classes</h4> | |
| <ul id="analysisDist" class="dist-list"></ul> | |
| <h4 class="analysis-heading">Model card</h4> | |
| <dl id="analysisModel" class="model-card"></dl> | |
| <h4 class="analysis-heading">Attention rollout</h4> | |
| <p class="explain-hint">See which image patches the ViT actually looked at when it made this prediction.</p> | |
| <button id="explainBtn" class="explain-btn">Generate attention map</button> | |
| <div id="explainResult" class="explain-result" hidden> | |
| <img id="explainImg" alt="Attention rollout heatmap over the scanned image" /> | |
| <p id="explainMeta" class="explain-meta"></p> | |
| </div> | |
| </div> | |
| <button id="closeResultBtn" class="btn primary result-again">Scan Again</button> | |
| </div> | |
| </div> | |
| <div id="toast" class="toast" hidden></div> | |
| <script src="app.js"></script> | |
| <script src="showcase.js"></script> | |
| </body> | |
| </html> | |