Upload 5 files

README.md

@@ -1,10 +1,52 @@
 ---
-title: Garbage Classification
-emoji: 🐠
-colorFrom: blue
-colorTo: gray
+title: MS-SE Waste Classifier
+emoji: ♻️
+colorFrom: green
+colorTo: blue
 sdk: static
-pinned: false
+app_file: index.html
+fullWidth: true
+header: mini
+short_description: Browser waste classification with MS-SE-EfficientNet-B0
+tags:
+  - computer-vision
+  - image-classification
+  - waste-classification
+  - efficientnet
+  - onnx
+  - browser-inference
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MS-SE Waste Classifier
+
+A fully static Hugging Face Space for ten-class waste image classification. Inference runs locally in the visitor's browser through ONNX Runtime Web.
+
+## Upload these files to the Space root
+
+```text
+README.md
+index.html
+styles.css
+app.js
+ms_se_efficientnet_b0.onnx
+```
+
+Do not place any file inside a subfolder.
+
+## Model configuration
+
+- Architecture: MS-SE-EfficientNet-B0
+- Input: RGB image resized to 224 × 224
+- Normalization: ImageNet mean `[0.485, 0.456, 0.406]` and standard deviation `[0.229, 0.224, 0.225]`
+- Classes: battery, biological, cardboard, clothes, glass, metal, paper, plastic, shoes, trash
+- Runtime: ONNX Runtime Web with WebAssembly
+
+## Local test
+
+Run a local web server from this folder:
+
+```bash
+python -m http.server 8000
+```
+
+Then open `http://localhost:8000`.

app.js

@@ -0,0 +1,466 @@
+'use strict';
+
+const APP = Object.freeze({
+  modelUrl: './ms_se_efficientnet_b0.onnx?v=ac619ed4',
+  ortVersion: '1.27.0',
+  imageSize: 224,
+  mean: [0.485, 0.456, 0.406],
+  std: [0.229, 0.224, 0.225],
+  labels: [
+    'battery', 'biological', 'cardboard', 'clothes', 'glass',
+    'metal', 'paper', 'plastic', 'shoes', 'trash',
+  ],
+  metadata: {
+    input: { width: 224, height: 224, channels: 3 },
+    complexity: { parameters: 4234159 },
+  },
+});
+
+const state = {
+  session: null,
+  labels: APP.labels,
+  metadata: APP.metadata,
+  bitmap: null,
+  objectUrl: null,
+  file: null,
+  modelReady: false,
+  predicting: false,
+};
+
+const els = {
+  runtimePill: document.querySelector('#runtimePill'),
+  runtimeText: document.querySelector('#runtimeText'),
+  statusDot: document.querySelector('#statusDot'),
+  statusCard: document.querySelector('.status-card'),
+  progressBar: document.querySelector('#progressBar'),
+  loadPercent: document.querySelector('#loadPercent'),
+  statusDetail: document.querySelector('#statusDetail'),
+  fileInput: document.querySelector('#fileInput'),
+  dropZone: document.querySelector('#dropZone'),
+  clearButton: document.querySelector('#clearButton'),
+  previewWrap: document.querySelector('#previewWrap'),
+  imagePreview: document.querySelector('#imagePreview'),
+  fileName: document.querySelector('#fileName'),
+  fileDetails: document.querySelector('#fileDetails'),
+  predictButton: document.querySelector('#predictButton'),
+  predictButtonText: document.querySelector('#predictButtonText'),
+  buttonSpinner: document.querySelector('#buttonSpinner'),
+  inputMessage: document.querySelector('#inputMessage'),
+  emptyResult: document.querySelector('#emptyResult'),
+  results: document.querySelector('#results'),
+  predictedClass: document.querySelector('#predictedClass'),
+  confidenceRing: document.querySelector('#confidenceRing'),
+  confidenceValue: document.querySelector('#confidenceValue'),
+  topThree: document.querySelector('#topThree'),
+  probabilityList: document.querySelector('#probabilityList'),
+  preprocessTime: document.querySelector('#preprocessTime'),
+  inferenceTime: document.querySelector('#inferenceTime'),
+  totalTime: document.querySelector('#totalTime'),
+  providerBadge: document.querySelector('#providerBadge'),
+  classChips: document.querySelector('#classChips'),
+  modelFacts: document.querySelector('#modelFacts'),
+  canvas: document.querySelector('#preprocessCanvas'),
+};
+
+function setProgress(percent, detail) {
+  const safePercent = Math.max(0, Math.min(100, Math.round(percent)));
+  els.progressBar.style.width = `${safePercent}%`;
+  els.loadPercent.textContent = `${safePercent}%`;
+  if (detail) els.statusDetail.textContent = detail;
+}
+
+function setRuntimeState(kind, text) {
+  els.runtimePill.classList.remove('ready', 'error');
+  if (kind) els.runtimePill.classList.add(kind);
+  els.runtimeText.textContent = text;
+}
+
+function setError(message, error) {
+  console.error(message, error || '');
+  state.modelReady = false;
+  els.statusCard.classList.add('error');
+  setRuntimeState('error', 'Runtime unavailable');
+  setProgress(100, message);
+  els.inputMessage.textContent = 'The model could not be initialized. Refresh the page or try another modern browser.';
+  els.inputMessage.classList.add('error');
+  updatePredictButton();
+}
+
+function titleCase(value) {
+  return String(value)
+    .replace(/[_-]+/g, ' ')
+    .replace(/\b\w/g, character => character.toUpperCase());
+}
+
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '';
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  return `${(bytes / (1024 ** index)).toFixed(index >= 2 ? 1 : 0)} ${units[index]}`;
+}
+
+function formatMilliseconds(value) {
+  if (!Number.isFinite(value)) return '—';
+  if (value < 10) return `${value.toFixed(2)} ms`;
+  if (value < 100) return `${value.toFixed(1)} ms`;
+  return `${Math.round(value)} ms`;
+}
+
+function updatePredictButton() {
+  const enabled = state.modelReady && Boolean(state.bitmap) && !state.predicting;
+  els.predictButton.disabled = !enabled;
+  els.clearButton.disabled = !state.bitmap && !state.file;
+}
+
+async function fetchBinaryWithProgress(url, onProgress) {
+  const response = await fetch(url, { cache: 'force-cache' });
+  if (!response.ok) throw new Error(`Model download failed: HTTP ${response.status}`);
+
+  const total = Number(response.headers.get('content-length')) || 0;
+  if (!response.body || !total) {
+    const buffer = await response.arrayBuffer();
+    onProgress(1, buffer.byteLength);
+    return new Uint8Array(buffer);
+  }
+
+  const reader = response.body.getReader();
+  const chunks = [];
+  let received = 0;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    received += value.length;
+    onProgress(received / total, total);
+  }
+
+  const bytes = new Uint8Array(received);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return bytes;
+}
+
+function renderClassChips() {
+  els.classChips.replaceChildren();
+  for (const label of state.labels) {
+    const chip = document.createElement('span');
+    chip.className = 'class-chip';
+    chip.textContent = label;
+    els.classChips.appendChild(chip);
+  }
+}
+
+function renderModelFacts() {
+  if (!state.metadata) return;
+  const facts = [
+    ['Input', `${state.metadata.input.width} × ${state.metadata.input.height} RGB`],
+    ['Classes', String(state.metadata.classes.length)],
+    ['Parameters', `${(state.metadata.complexity.parameters / 1e6).toFixed(3)}M`],
+    ['Runtime', 'WebAssembly'],
+  ];
+  els.modelFacts.replaceChildren();
+  for (const [term, value] of facts) {
+    const wrapper = document.createElement('div');
+    const dt = document.createElement('dt');
+    const dd = document.createElement('dd');
+    dt.textContent = term;
+    dd.textContent = value;
+    wrapper.append(dt, dd);
+    els.modelFacts.appendChild(wrapper);
+  }
+}
+
+async function initializeModel() {
+  try {
+    if (!window.ort) throw new Error('ONNX Runtime Web did not load from the pinned CDN.');
+
+    setRuntimeState('', 'Preparing model');
+    setProgress(3, 'Preparing class labels and model information…');
+    renderClassChips();
+    renderModelFacts();
+
+    ort.env.logLevel = 'error';
+    ort.env.wasm.numThreads = 1;
+    ort.env.wasm.proxy = false;
+    ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${APP.ortVersion}/dist/`;
+
+    setRuntimeState('', 'Downloading model');
+    const modelBytes = await fetchBinaryWithProgress(APP.modelUrl, (fraction, totalBytes) => {
+      const percent = 5 + (fraction * 66);
+      setProgress(percent, `Downloading ${formatBytes(totalBytes) || 'ONNX model'}…`);
+    });
+
+    setProgress(75, 'Creating optimized WebAssembly inference session…');
+    setRuntimeState('', 'Creating session');
+    state.session = await ort.InferenceSession.create(modelBytes, {
+      executionProviders: ['wasm'],
+      graphOptimizationLevel: 'all',
+      freeDimensionOverrides: { batch: 1 },
+    });
+
+    if (!state.session.inputNames.includes('input') || !state.session.outputNames.includes('logits')) {
+      throw new Error(`Unexpected ONNX interface: inputs ${state.session.inputNames.join(', ')}, outputs ${state.session.outputNames.join(', ')}`);
+    }
+
+    state.modelReady = true;
+    els.statusCard.classList.remove('error');
+    setProgress(100, 'Ready. The ONNX model has loaded successfully.');
+    setRuntimeState('ready', 'Model ready');
+    els.providerBadge.textContent = 'WASM';
+    updatePredictButton();
+  } catch (error) {
+    setError(error.message || 'Model initialization failed.', error);
+  }
+}
+
+async function decodeImage(file) {
+  if ('createImageBitmap' in window) {
+    try {
+      return await createImageBitmap(file, { imageOrientation: 'from-image' });
+    } catch (_) {
+      return createImageBitmap(file);
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const image = new Image();
+    image.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(image);
+    };
+    image.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('The selected file could not be decoded as an image.'));
+    };
+    image.src = url;
+  });
+}
+
+function resetResults() {
+  els.results.classList.add('hidden');
+  els.emptyResult.classList.remove('hidden');
+  els.topThree.replaceChildren();
+  els.probabilityList.replaceChildren();
+}
+
+function clearImage() {
+  if (state.bitmap && typeof state.bitmap.close === 'function') state.bitmap.close();
+  if (state.objectUrl) URL.revokeObjectURL(state.objectUrl);
+  state.bitmap = null;
+  state.objectUrl = null;
+  state.file = null;
+  els.fileInput.value = '';
+  els.imagePreview.removeAttribute('src');
+  els.previewWrap.classList.add('hidden');
+  els.dropZone.classList.remove('hidden');
+  els.fileName.textContent = '';
+  els.fileDetails.textContent = '';
+  els.inputMessage.textContent = '';
+  els.inputMessage.classList.remove('error');
+  resetResults();
+  updatePredictButton();
+}
+
+async function handleFile(file) {
+  if (!file) return;
+  if (!file.type.startsWith('image/')) {
+    els.inputMessage.textContent = 'Select a valid image file.';
+    els.inputMessage.classList.add('error');
+    return;
+  }
+
+  try {
+    els.inputMessage.textContent = 'Decoding image…';
+    els.inputMessage.classList.remove('error');
+
+    if (state.bitmap && typeof state.bitmap.close === 'function') state.bitmap.close();
+    if (state.objectUrl) URL.revokeObjectURL(state.objectUrl);
+
+    state.bitmap = await decodeImage(file);
+    state.file = file;
+    state.objectUrl = URL.createObjectURL(file);
+
+    els.imagePreview.src = state.objectUrl;
+    els.fileName.textContent = file.name;
+    els.fileDetails.textContent = `${state.bitmap.width} × ${state.bitmap.height} · ${formatBytes(file.size)}`;
+    els.dropZone.classList.add('hidden');
+    els.previewWrap.classList.remove('hidden');
+    els.inputMessage.textContent = state.modelReady ? 'Image ready for classification.' : 'Image ready. Waiting for the model to finish loading.';
+    resetResults();
+    updatePredictButton();
+  } catch (error) {
+    els.inputMessage.textContent = error.message || 'Could not read this image.';
+    els.inputMessage.classList.add('error');
+    clearImage();
+  }
+}
+
+function preprocessImage(bitmap) {
+  const canvas = els.canvas;
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  canvas.width = APP.imageSize;
+  canvas.height = APP.imageSize;
+  context.clearRect(0, 0, APP.imageSize, APP.imageSize);
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = 'high';
+  context.drawImage(bitmap, 0, 0, APP.imageSize, APP.imageSize);
+
+  const rgba = context.getImageData(0, 0, APP.imageSize, APP.imageSize).data;
+  const planeSize = APP.imageSize * APP.imageSize;
+  const nchw = new Float32Array(3 * planeSize);
+
+  for (let pixel = 0; pixel < planeSize; pixel += 1) {
+    const source = pixel * 4;
+    nchw[pixel] = ((rgba[source] / 255) - APP.mean[0]) / APP.std[0];
+    nchw[planeSize + pixel] = ((rgba[source + 1] / 255) - APP.mean[1]) / APP.std[1];
+    nchw[(2 * planeSize) + pixel] = ((rgba[source + 2] / 255) - APP.mean[2]) / APP.std[2];
+  }
+
+  return new ort.Tensor('float32', nchw, [1, 3, APP.imageSize, APP.imageSize]);
+}
+
+function softmax(logits) {
+  const maximum = Math.max(...logits);
+  const exponentials = logits.map(value => Math.exp(value - maximum));
+  const denominator = exponentials.reduce((sum, value) => sum + value, 0);
+  return exponentials.map(value => value / denominator);
+}
+
+function renderResults(probabilities, timings) {
+  const ranked = probabilities
+    .map((probability, index) => ({ label: state.labels[index], probability }))
+    .sort((a, b) => b.probability - a.probability);
+
+  const winner = ranked[0];
+  const confidencePercent = winner.probability * 100;
+
+  els.predictedClass.textContent = titleCase(winner.label);
+  els.confidenceValue.textContent = `${confidencePercent.toFixed(1)}%`;
+  els.confidenceRing.style.setProperty('--confidence', `${winner.probability * 360}deg`);
+  els.confidenceRing.setAttribute('aria-label', `${confidencePercent.toFixed(1)} percent confidence`);
+
+  els.topThree.replaceChildren();
+  for (const item of ranked.slice(0, 3)) {
+    const row = document.createElement('li');
+    const name = document.createElement('span');
+    const value = document.createElement('span');
+    name.className = 'class-name';
+    value.className = 'class-prob';
+    name.textContent = item.label;
+    value.textContent = `${(item.probability * 100).toFixed(2)}%`;
+    row.append(name, value);
+    els.topThree.appendChild(row);
+  }
+
+  els.probabilityList.replaceChildren();
+  for (const item of ranked) {
+    const row = document.createElement('div');
+    row.className = 'probability-row';
+    const name = document.createElement('span');
+    name.className = 'name';
+    name.textContent = item.label;
+    const track = document.createElement('div');
+    track.className = 'bar-track';
+    const fill = document.createElement('div');
+    fill.className = 'bar-fill';
+    fill.style.width = `${Math.max(item.probability * 100, 0.3)}%`;
+    track.appendChild(fill);
+    const value = document.createElement('span');
+    value.className = 'value';
+    value.textContent = `${(item.probability * 100).toFixed(2)}%`;
+    row.append(name, track, value);
+    els.probabilityList.appendChild(row);
+  }
+
+  els.preprocessTime.textContent = formatMilliseconds(timings.preprocess);
+  els.inferenceTime.textContent = formatMilliseconds(timings.inference);
+  els.totalTime.textContent = formatMilliseconds(timings.total);
+  els.emptyResult.classList.add('hidden');
+  els.results.classList.remove('hidden');
+}
+
+async function predict() {
+  if (!state.modelReady || !state.bitmap || state.predicting) return;
+
+  state.predicting = true;
+  updatePredictButton();
+  els.predictButtonText.textContent = 'Classifying…';
+  els.buttonSpinner.classList.remove('hidden');
+  els.inputMessage.textContent = 'Running browser-side inference…';
+  els.inputMessage.classList.remove('error');
+
+  try {
+    const totalStart = performance.now();
+    const preprocessStart = performance.now();
+    const inputTensor = preprocessImage(state.bitmap);
+    const preprocessEnd = performance.now();
+
+    const inferenceStart = performance.now();
+    const outputs = await state.session.run({ input: inputTensor });
+    const inferenceEnd = performance.now();
+
+    const logits = Array.from(outputs.logits.data);
+    if (logits.length !== state.labels.length) {
+      throw new Error(`Expected ${state.labels.length} logits but received ${logits.length}.`);
+    }
+
+    const probabilities = softmax(logits);
+    const totalEnd = performance.now();
+    renderResults(probabilities, {
+      preprocess: preprocessEnd - preprocessStart,
+      inference: inferenceEnd - inferenceStart,
+      total: totalEnd - totalStart,
+    });
+    els.inputMessage.textContent = 'Prediction completed locally in this browser.';
+  } catch (error) {
+    console.error(error);
+    els.inputMessage.textContent = error.message || 'Inference failed.';
+    els.inputMessage.classList.add('error');
+  } finally {
+    state.predicting = false;
+    els.predictButtonText.textContent = 'Classify image';
+    els.buttonSpinner.classList.add('hidden');
+    updatePredictButton();
+  }
+}
+
+function preventDefaults(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+['dragenter', 'dragover'].forEach(eventName => {
+  els.dropZone.addEventListener(eventName, event => {
+    preventDefaults(event);
+    els.dropZone.classList.add('dragging');
+  });
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+  els.dropZone.addEventListener(eventName, event => {
+    preventDefaults(event);
+    els.dropZone.classList.remove('dragging');
+  });
+});
+
+els.dropZone.addEventListener('drop', event => handleFile(event.dataTransfer.files[0]));
+els.dropZone.addEventListener('keydown', event => {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    els.fileInput.click();
+  }
+});
+els.fileInput.addEventListener('change', event => handleFile(event.target.files[0]));
+els.clearButton.addEventListener('click', clearImage);
+els.predictButton.addEventListener('click', predict);
+window.addEventListener('beforeunload', () => {
+  if (state.bitmap && typeof state.bitmap.close === 'function') state.bitmap.close();
+  if (state.objectUrl) URL.revokeObjectURL(state.objectUrl);
+});
+
+initializeModel();

index.html

@@ -1,19 +1,170 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<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"></script>
+</body>
 </html>

ms_se_efficientnet_b0.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ac619ed4b912b3aa5c2bba39555a95441d532b16dc2e21dd5166c1acf703ba85
+size 16924707

styles.css

@@ -0,0 +1,348 @@
+:root {
+  --bg: #f2f6f4;
+  --surface: #ffffff;
+  --surface-soft: #f7faf8;
+  --ink: #14231e;
+  --muted: #65736d;
+  --border: #d7e1dc;
+  --accent: #0d7a62;
+  --accent-dark: #075c49;
+  --accent-soft: #e3f3ed;
+  --blue: #2874b8;
+  --warning: #8b5a00;
+  --danger: #a33131;
+  --shadow: 0 18px 50px rgba(24, 56, 44, 0.09);
+  --radius-xl: 24px;
+  --radius-lg: 18px;
+  --radius-md: 13px;
+}
+
+* { box-sizing: border-box; }
+
+html { color-scheme: light; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 4% 2%, rgba(13, 122, 98, 0.09), transparent 28rem),
+    radial-gradient(circle at 95% 5%, rgba(40, 116, 184, 0.08), transparent 24rem),
+    var(--bg);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  line-height: 1.5;
+}
+
+button, input { font: inherit; }
+button { cursor: pointer; }
+
+.site-header {
+  width: min(1240px, calc(100% - 32px));
+  margin: 20px auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.brand { display: flex; align-items: center; gap: 13px; }
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 15px;
+  color: #fff;
+  background: linear-gradient(145deg, var(--accent), #15a379);
+  font-size: 26px;
+  box-shadow: 0 10px 25px rgba(13, 122, 98, 0.22);
+}
+.eyebrow, .kicker, .step-label {
+  margin: 0;
+  color: var(--accent);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.brand h1 { margin: 1px 0 0; font-size: 1.18rem; letter-spacing: -0.02em; }
+
+.runtime-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  padding: 9px 13px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(255,255,255,0.8);
+  color: var(--muted);
+  font-size: 0.84rem;
+  font-weight: 700;
+  backdrop-filter: blur(8px);
+}
+.status-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #d19719;
+  box-shadow: 0 0 0 4px rgba(209, 151, 25, 0.13);
+}
+.runtime-pill.ready .status-dot { background: #15936f; box-shadow: 0 0 0 4px rgba(21,147,111,.13); }
+.runtime-pill.error .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(163,49,49,.13); }
+
+.page-shell { width: min(1240px, calc(100% - 32px)); margin: 24px auto 46px; }
+
+.hero-card {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr);
+  gap: 38px;
+  padding: 38px;
+  border: 1px solid rgba(13, 122, 98, 0.12);
+  border-radius: var(--radius-xl);
+  background: linear-gradient(135deg, #ffffff 0%, #f3fbf7 55%, #edf6fb 100%);
+  box-shadow: var(--shadow);
+}
+.hero-card::after {
+  content: "";
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  right: -140px;
+  top: -170px;
+  border: 48px solid rgba(13, 122, 98, 0.055);
+  border-radius: 50%;
+}
+.hero-copy { position: relative; z-index: 1; }
+.hero-copy h2 {
+  max-width: 760px;
+  margin: 8px 0 12px;
+  font-size: clamp(2rem, 4.1vw, 3.35rem);
+  line-height: 1.04;
+  letter-spacing: -0.045em;
+}
+.hero-copy > p:not(.kicker) { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.04rem; }
+.privacy-note {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  margin-top: 20px;
+  padding: 10px 13px;
+  border-radius: 12px;
+  color: var(--accent-dark);
+  background: var(--accent-soft);
+  font-size: .88rem;
+  font-weight: 700;
+}
+.model-facts {
+  position: relative;
+  z-index: 1;
+  align-self: center;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin: 0;
+}
+.model-facts div {
+  padding: 18px;
+  border: 1px solid rgba(13,122,98,.13);
+  border-radius: 15px;
+  background: rgba(255,255,255,.82);
+}
+.model-facts dt { color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
+.model-facts dd { margin: 5px 0 0; font-size: 1.08rem; font-weight: 800; }
+
+.workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
+.panel, .status-card, .info-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 12px 32px rgba(28, 55, 45, .055);
+}
+.panel { min-height: 590px; padding: 24px; }
+.panel-heading, .status-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
+.panel-heading h2, .status-title-row h2, .info-card h2 { margin: 3px 0 0; font-size: 1.15rem; letter-spacing: -.02em; }
+.text-button {
+  border: 0;
+  padding: 7px 9px;
+  border-radius: 9px;
+  color: var(--accent);
+  background: transparent;
+  font-weight: 750;
+}
+.text-button:hover:not(:disabled) { background: var(--accent-soft); }
+button:disabled { cursor: not-allowed; opacity: .52; }
+
+.drop-zone {
+  min-height: 300px;
+  margin-top: 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  border: 1.5px dashed #a9bdb4;
+  border-radius: 17px;
+  background: var(--surface-soft);
+  text-align: center;
+  transition: border-color .2s, background .2s, transform .2s;
+}
+.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.dragging {
+  border-color: var(--accent);
+  background: #eef8f3;
+  transform: translateY(-1px);
+  outline: none;
+}
+.drop-zone strong { font-size: 1.08rem; }
+.drop-zone span { color: var(--muted); }
+.drop-zone small { margin-top: 8px; color: #87958f; }
+.upload-icon {
+  display: grid;
+  place-items: center;
+  width: 62px;
+  height: 62px;
+  margin-bottom: 8px;
+  border-radius: 19px;
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+.upload-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
+.preview-wrap {
+  margin-top: 22px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 17px;
+  background: #eef2f0;
+}
+.preview-wrap img { display: block; width: 100%; height: 330px; object-fit: contain; background: #eef2f0; }
+.image-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #fff; }
+.image-meta strong { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.image-meta span { color: var(--muted); font-size: .82rem; }
+
+.primary-button {
+  width: 100%;
+  min-height: 49px;
+  margin-top: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border: 0;
+  border-radius: 13px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--accent), #0d906f);
+  font-weight: 800;
+  box-shadow: 0 10px 22px rgba(13,122,98,.18);
+  transition: transform .16s, box-shadow .16s;
+}
+.primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 27px rgba(13,122,98,.23); }
+.button-spinner { width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.inline-message { min-height: 21px; margin: 9px 2px 0; color: var(--muted); font-size: .84rem; }
+.inline-message.error { color: var(--danger); }
+
+.provider-badge {
+  padding: 6px 9px;
+  border-radius: 999px;
+  color: var(--blue);
+  background: #e7f1fb;
+  font-size: .72rem;
+  font-weight: 850;
+  letter-spacing: .06em;
+}
+.empty-result { min-height: 470px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }
+.empty-result-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; color: var(--accent); background: var(--accent-soft); font-size: 2rem; }
+.empty-result h3 { margin: 17px 0 5px; color: var(--ink); }
+.empty-result p { max-width: 330px; margin: 0; }
+
+.results { margin-top: 20px; }
+.primary-result {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  padding: 20px;
+  border-radius: 17px;
+  background: linear-gradient(135deg, #effaf5, #eef6fc);
+}
+.result-label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
+.primary-result h3 { margin: 5px 0 0; font-size: clamp(1.55rem, 4vw, 2.2rem); text-transform: capitalize; letter-spacing: -.035em; }
+.confidence-ring {
+  --confidence: 0deg;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 86px;
+  height: 86px;
+  border-radius: 50%;
+  background: conic-gradient(var(--accent) var(--confidence), #dbe8e2 0);
+  position: relative;
+}
+.confidence-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
+.confidence-ring span { position: relative; z-index: 1; font-size: 1.03rem; font-weight: 850; }
+.top-three-wrap { margin-top: 20px; }
+.top-three-wrap h4, .all-probabilities summary { margin: 0 0 10px; font-size: .9rem; }
+.top-three { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: rank; }
+.top-three li { counter-increment: rank; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; }
+.top-three li::before { content: counter(rank); display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--accent-dark); background: var(--accent-soft); font-weight: 850; font-size: .78rem; }
+.top-three .class-name { font-weight: 750; text-transform: capitalize; }
+.top-three .class-prob { color: var(--muted); font-variant-numeric: tabular-nums; }
+.all-probabilities { margin-top: 18px; }
+.all-probabilities summary { cursor: pointer; font-weight: 800; }
+.probability-list { display: grid; gap: 8px; margin-top: 11px; }
+.probability-row { display: grid; grid-template-columns: 82px 1fr 54px; align-items: center; gap: 9px; font-size: .78rem; }
+.probability-row .name { text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; }
+.bar-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e4ece8; }
+.bar-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #34a8a0); transition: width .45s ease; }
+.probability-row .value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
+.timing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 19px; }
+.timing-grid div { padding: 11px; border-radius: 11px; background: var(--surface-soft); }
+.timing-grid span { display: block; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
+.timing-grid strong { display: block; margin-top: 3px; font-size: .9rem; font-variant-numeric: tabular-nums; }
+
+.status-card { margin-top: 22px; padding: 20px 23px; }
+.status-title-row strong { color: var(--accent); font-variant-numeric: tabular-nums; }
+.progress-track { height: 9px; margin-top: 15px; overflow: hidden; border-radius: 999px; background: #e2eae6; }
+.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #31a691); transition: width .25s ease; }
+.status-card > p { margin: 10px 0 0; color: var(--muted); font-size: .87rem; }
+.status-card.error { border-color: rgba(163,49,49,.3); }
+.status-card.error .progress-bar { background: var(--danger); }
+
+.information-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-top: 22px; }
+.info-card { padding: 21px; }
+.info-card p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
+.class-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
+.class-chip { padding: 6px 9px; border: 1px solid #cfe0d8; border-radius: 999px; color: var(--accent-dark); background: #f0f8f4; font-size: .76rem; font-weight: 750; text-transform: capitalize; }
+.caution-card { background: #fffdf7; border-color: #eadfbd; }
+.caution-card h2 { color: var(--warning); }
+
+footer { padding: 22px 16px 34px; text-align: center; color: var(--muted); font-size: .82rem; }
+.hidden { display: none !important; }
+.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
+
+@media (max-width: 900px) {
+  .hero-card { grid-template-columns: 1fr; padding: 28px; }
+  .model-facts { grid-template-columns: repeat(4, 1fr); }
+  .workspace { grid-template-columns: 1fr; }
+  .panel { min-height: unset; }
+  .information-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 650px) {
+  .site-header { align-items: flex-start; }
+  .runtime-pill { max-width: 150px; }
+  .runtime-pill span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .page-shell, .site-header { width: min(100% - 20px, 1240px); }
+  .hero-card { padding: 23px 20px; }
+  .hero-copy h2 { font-size: 2.05rem; }
+  .model-facts { grid-template-columns: 1fr 1fr; }
+  .panel { padding: 19px; }
+  .drop-zone { min-height: 245px; }
+  .preview-wrap img { height: 270px; }
+  .primary-result { align-items: flex-start; }
+  .confidence-ring { width: 75px; height: 75px; }
+  .probability-row { grid-template-columns: 70px 1fr 48px; }
+  .timing-grid { grid-template-columns: 1fr; }
+}