| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="theme-color" content="#0d7a62"> |
| <meta name="description" content="Static browser-side waste image classification with MS-SE-EfficientNet-B0 and ONNX Runtime Web."> |
| <title>MS-SE Waste Classifier</title> |
| <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
| <body> |
| <header class="site-header"> |
| <div class="brand"> |
| <div class="brand-mark" aria-hidden="true">♻</div> |
| <div> |
| <p class="eyebrow">Browser-side waste recognition</p> |
| <h1>MS-SE Waste Classifier</h1> |
| </div> |
| </div> |
| <div class="runtime-pill" id="runtimePill" aria-live="polite"> |
| <span class="status-dot" id="statusDot"></span> |
| <span id="runtimeText">Preparing runtime</span> |
| </div> |
| </header> |
|
|
| <main class="page-shell"> |
| <section class="hero-card"> |
| <div class="hero-copy"> |
| <p class="kicker">MS-SE-EfficientNet-B0</p> |
| <h2>Classify a waste image entirely in your browser.</h2> |
| <p> |
| Upload one image to obtain a ten-class probability distribution. The model uses |
| average, maximum, and standard-deviation channel descriptors with bounded residual attention. |
| </p> |
| <div class="privacy-note"> |
| <span aria-hidden="true">🔒</span> |
| <span>The selected image remains on this device during inference.</span> |
| </div> |
| </div> |
| <dl class="model-facts" id="modelFacts"> |
| <div><dt>Input</dt><dd>224 × 224 RGB</dd></div> |
| <div><dt>Classes</dt><dd>10</dd></div> |
| <div><dt>Parameters</dt><dd>4.234M</dd></div> |
| <div><dt>Runtime</dt><dd>WebAssembly</dd></div> |
| </dl> |
| </section> |
|
|
| <section class="workspace" aria-label="Image classification workspace"> |
| <article class="panel upload-panel"> |
| <div class="panel-heading"> |
| <div> |
| <p class="step-label">Step 1</p> |
| <h2>Select an image</h2> |
| </div> |
| <button class="text-button" id="clearButton" type="button" disabled>Clear</button> |
| </div> |
|
|
| <input id="fileInput" class="visually-hidden" type="file" accept="image/jpeg,image/png,image/webp,image/bmp"> |
| <label class="drop-zone" id="dropZone" for="fileInput" tabindex="0"> |
| <div class="upload-icon" aria-hidden="true"> |
| <svg viewBox="0 0 24 24" role="img"> |
| <path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M5 14.5v3A2.5 2.5 0 0 0 7.5 20h9a2.5 2.5 0 0 0 2.5-2.5v-3"/> |
| </svg> |
| </div> |
| <strong>Drop an image here</strong> |
| <span>or click to browse</span> |
| <small>JPEG, PNG, WebP, or BMP</small> |
| </label> |
|
|
| <div class="preview-wrap hidden" id="previewWrap"> |
| <img id="imagePreview" alt="Selected waste image preview"> |
| <div class="image-meta"> |
| <strong id="fileName"></strong> |
| <span id="fileDetails"></span> |
| </div> |
| </div> |
|
|
| <button class="primary-button" id="predictButton" type="button" disabled> |
| <span id="predictButtonText">Classify image</span> |
| <span class="button-spinner hidden" id="buttonSpinner" aria-hidden="true"></span> |
| </button> |
| <p class="inline-message" id="inputMessage" role="status"></p> |
| </article> |
|
|
| <article class="panel result-panel"> |
| <div class="panel-heading"> |
| <div> |
| <p class="step-label">Step 2</p> |
| <h2>Prediction</h2> |
| </div> |
| <span class="provider-badge" id="providerBadge">WASM</span> |
| </div> |
|
|
| <div class="empty-result" id="emptyResult"> |
| <div class="empty-result-icon" aria-hidden="true">◎</div> |
| <h3>Results will appear here</h3> |
| <p>Load the model, select an image, and press “Classify image.”</p> |
| </div> |
|
|
| <div class="results hidden" id="results"> |
| <div class="primary-result"> |
| <div> |
| <p class="result-label">Predicted class</p> |
| <h3 id="predictedClass">—</h3> |
| </div> |
| <div class="confidence-ring" id="confidenceRing" aria-label="Prediction confidence"> |
| <span id="confidenceValue">0%</span> |
| </div> |
| </div> |
|
|
| <div class="top-three-wrap"> |
| <h4>Top three</h4> |
| <ol class="top-three" id="topThree"></ol> |
| </div> |
|
|
| <details class="all-probabilities" open> |
| <summary>All class probabilities</summary> |
| <div class="probability-list" id="probabilityList"></div> |
| </details> |
|
|
| <div class="timing-grid"> |
| <div><span>Preprocess</span><strong id="preprocessTime">—</strong></div> |
| <div><span>Inference</span><strong id="inferenceTime">—</strong></div> |
| <div><span>Total</span><strong id="totalTime">—</strong></div> |
| </div> |
| </div> |
| </article> |
| </section> |
|
|
| <section class="status-card" aria-labelledby="modelStatusTitle"> |
| <div class="status-title-row"> |
| <div> |
| <p class="step-label">Model status</p> |
| <h2 id="modelStatusTitle">Runtime initialization</h2> |
| </div> |
| <strong id="loadPercent">0%</strong> |
| </div> |
| <div class="progress-track" aria-hidden="true"> |
| <div class="progress-bar" id="progressBar"></div> |
| </div> |
| <p id="statusDetail" aria-live="polite">Loading ONNX Runtime Web…</p> |
| </section> |
|
|
| <section class="information-grid"> |
| <article class="info-card"> |
| <h2>Supported classes</h2> |
| <div class="class-chips" id="classChips"></div> |
| </article> |
| <article class="info-card"> |
| <h2>Notebook-matched preprocessing</h2> |
| <p>Direct resize to 224 × 224, RGB conversion, scaling to [0,1], and ImageNet normalization.</p> |
| </article> |
| <article class="info-card caution-card"> |
| <h2>Research use</h2> |
| <p>Visual ambiguity remains possible, especially among related packaging materials and general trash.</p> |
| </article> |
| </section> |
| </main> |
|
|
| <footer> |
| <p>Static ONNX inference · MS-SE-EfficientNet-B0 · Ten waste classes</p> |
| </footer> |
|
|
| <canvas id="preprocessCanvas" width="224" height="224" class="visually-hidden" aria-hidden="true"></canvas> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.27.0/dist/ort.min.js" crossorigin="anonymous"></script> |
| <script src="app.js?v=20260802-2"></script> |
| </body> |
| </html> |
|
|
