| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| |
| |
| <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' https://*.hf.co https://*.huggingface.co; img-src 'self' data: https://*.hf.co https://*.huggingface.co; style-src 'self' 'unsafe-inline'; worker-src 'self' blob:; base-uri 'none'; form-action 'none'; object-src 'none'"> |
| <title>Waste Sorting Classifier</title> |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%E2%99%BB%EF%B8%8F%3C/text%3E%3C/svg%3E"> |
| <meta name="description" content="Classify a photo of waste into six recycling categories. The model runs in your browser: photos never leave your device."> |
| <style> |
| :root { |
| --bg: #f6f7f5; |
| --surface: #ffffff; |
| --text: #1d2420; |
| --muted: #5d6a63; |
| --border: #dfe4e0; |
| --accent: #2f7d5b; |
| --accent-soft: #e3f1ea; |
| --accent-strong: #236347; |
| --bar: #c9ddd2; |
| --warn-bg: #fff4dc; |
| --warn-text: #7a5410; |
| --error: #a33a2a; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --bg: #121614; |
| --surface: #1b211e; |
| --text: #e6ece8; |
| --muted: #9aa8a0; |
| --border: #2c3531; |
| --accent: #5cc093; |
| --accent-soft: #1f3329; |
| --accent-strong: #7fd3ab; |
| --bar: #2f4a3d; |
| --warn-bg: #3a2f14; |
| --warn-text: #f0cf88; |
| --error: #f08a78; |
| } |
| } |
| * { box-sizing: border-box; } |
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--text); |
| font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; |
| } |
| main { max-width: 860px; margin: 0 auto; padding: 32px 16px 48px; } |
| h1 { font-size: 1.75rem; margin: 0 0 4px; } |
| .lede { color: var(--muted); margin: 0 0 20px; } |
| .privacy { |
| display: inline-block; background: var(--accent-soft); color: var(--accent-strong); |
| border-radius: 999px; padding: 4px 12px; font-size: .875rem; font-weight: 600; |
| } |
| .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } |
| @media (max-width: 680px) { .grid { grid-template-columns: 1fr; } } |
| .card { |
| background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; |
| } |
| .drop { |
| display: flex; flex-direction: column; align-items: center; justify-content: center; |
| gap: 8px; min-height: 260px; border: 2px dashed var(--border); border-radius: 10px; |
| text-align: center; padding: 16px; cursor: pointer; color: var(--muted); |
| } |
| .drop.over { border-color: var(--accent); } |
| button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } |
| .drop canvas { max-width: 100%; max-height: 300px; border-radius: 8px; } |
| .drop strong { color: var(--text); } |
| button.pick { |
| font: inherit; font-weight: 600; background: var(--accent); color: #fff; border: 0; |
| border-radius: 8px; padding: 8px 16px; cursor: pointer; |
| } |
| @media (prefers-color-scheme: dark) { button.pick { color: #0e1a14; } } |
| .label { font-size: 1.5rem; font-weight: 700; margin: 0; text-transform: capitalize; } |
| .confidence { color: var(--muted); margin: 0 0 12px; } |
| .bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } |
| .bars li { display: grid; grid-template-columns: 88px 1fr 56px; align-items: center; gap: 8px; } |
| .bars .track { display: block; height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; } |
| .bars .fill { display: block; height: 100%; background: var(--bar); border-radius: 999px; } |
| .bars li.top .fill { background: var(--accent); } |
| .bars .name { text-transform: capitalize; } |
| .bars .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } |
| .note { |
| margin-top: 12px; padding: 8px 12px; border-radius: 8px; |
| background: var(--warn-bg); color: var(--warn-text); font-size: .9rem; |
| } |
| .label.unknown { text-transform: none; font-size: 1.25rem; } |
| .explain { margin: 4px 0 8px; } |
| .hint { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); font-size: .9rem; } |
| details summary { cursor: pointer; color: var(--accent); margin-bottom: 8px; } |
| details .confidence { margin: 0 0 8px; font-size: .9rem; } |
| .placeholder { color: var(--muted); } |
| .error { color: var(--error); } |
| .examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } |
| .examples-label { margin: 12px 0 0; font-size: .85rem; color: var(--muted); } |
| .examples button { |
| padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; |
| background: none; cursor: pointer; width: 92px; |
| } |
| .examples img { display: block; width: 92px; height: 69px; object-fit: cover; } |
| .examples span { display: block; font-size: .75rem; color: var(--muted); padding: 2px 0; text-transform: capitalize; } |
| h2 { font-size: 1rem; margin: 24px 0 4px; } |
| .status { font-size: .875rem; color: var(--muted); margin-top: 16px; word-break: break-word; } |
| footer { margin-top: 24px; font-size: .875rem; color: var(--muted); } |
| footer p { margin: 6px 0; } |
| a { color: var(--accent); } |
| </style> |
| </head> |
| <body> |
| <main> |
| <h1>Waste Sorting Classifier</h1> |
| <p class="lede">Photograph one waste item: the model sorts it into cardboard, glass, metal, paper, plastic or trash.</p> |
| <span class="privacy">Runs in your browser: photos never leave your device</span> |
|
|
| <div class="grid"> |
| <section class="card"> |
| <div class="drop" id="drop"> |
| <span id="drop-hint"><strong>Drop a photo here</strong><br>JPEG, PNG or WebP</span> |
| <canvas id="preview" role="img" aria-label="Your photo, as the model sees it" hidden></canvas> |
| <button class="pick" type="button" id="pick">Choose a photo</button> |
| <input id="file" type="file" accept="image/jpeg,image/png,image/webp" hidden> |
| </div> |
| </section> |
|
|
| <section class="card" aria-live="polite" id="result"> |
| <p class="placeholder" id="placeholder">The result appears here.</p> |
| </section> |
| </div> |
|
|
| <h2>Or try an example</h2> |
| <p class="examples-label">Studio photos (TrashNet)</p> |
| <div class="examples" id="examples"></div> |
| <p class="examples-label">Real waste on a floor (RealWaste)</p> |
| <div class="examples" id="examples-real"></div> |
|
|
| <p class="status" id="status" role="status" aria-live="polite">Loading the model (16 MB)…</p> |
|
|
| <footer> |
| <p>EfficientNet-B0 fine-tuned on studio photos (TrashNet) and real waste photographed at a landfill (RealWaste), exported to ONNX; it runs here with ONNX Runtime Web. On test photos with no near-duplicate in training: 88.7% accuracy on real waste and 94.8% on studio photos. The weakest classes are real-waste metal (crushed cans and foil) and studio trash.</p> |
| <p>It knows photos of one item, taken from above, on a plain background or an ordinary floor. Hands, bins full of things, people, landscapes and busy scenes are outside what it has learned: the page checks how familiar each photo looks to the model and says so when it is not a photo the model knows (it flagged 84% of everyday photos in testing). The examples are the first validation photo per class and source that the model gets right, so they show what it handles, not how often it fails.</p> |
| <p>Model trained on <a href="https://github.com/garythung/trashnet">TrashNet</a> (MIT) and <a href="https://archive.ics.uci.edu/dataset/908/realwaste">RealWaste</a> (CC BY-NC-SA 4.0); the model is CC BY-NC-SA 4.0. <a href="https://github.com/vladzpop11/waste-sorting-classifier">Code, data handling and evaluation on GitHub</a>.</p> |
| </footer> |
| </main> |
| <script src="vendor/libjpegturbowasm_decode.js"></script> |
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
