Add browser-based MobileNetV4 image demo

README.md

@@ -1,10 +1,24 @@
 ---
 title: Lens Image Classifier
-emoji: 👀
-colorFrom: purple
-colorTo: purple
+emoji: 🔎
+colorFrom: red
+colorTo: yellow
 sdk: static
-pinned: false
+app_file: index.html
+short_description: Recognize everyday objects privately in your browser
+models:
+  - onnx-community/mobilenetv4_conv_small.e2400_r224_in1k
+license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Lens
+
+A small image classification demo using [MobileNetV4](https://huggingface.co/onnx-community/mobilenetv4_conv_small.e2400_r224_in1k) and [Transformers.js](https://huggingface.co/docs/transformers.js).
+
+Choose a PNG, JPEG, or WebP image (up to 15 MB), or try the sample tiger. The model returns its top five ImageNet labels and scores. These are model scores, not guarantees; the model only recognizes its 1,000 training categories.
+
+Inference runs in a browser worker with WebAssembly. Your selected image stays on your device. The browser downloads and caches the model on first use; internet access is needed for the library, model, and sample image. No API key or server GPU is required.
+
+The sample comes from the [Transformers.js documentation dataset](https://huggingface.co/datasets/Xenova/transformers.js-docs).
+
+Input validation checks: `node --test tests/input.test.mjs`.

app.mjs

@@ -0,0 +1,99 @@
+import { validateImage } from './input.mjs';
+
+const fileInput = document.querySelector('#file');
+const sample = document.querySelector('#sample');
+const preview = document.querySelector('#preview');
+const status = document.querySelector('#status');
+const results = document.querySelector('#results');
+let worker;
+let imageURL;
+
+function setBusy(busy) {
+  fileInput.disabled = busy;
+  sample.disabled = busy;
+  results.setAttribute('aria-busy', String(busy));
+}
+
+function showError(message) {
+  status.textContent = message;
+  status.className = 'error';
+  setBusy(false);
+}
+
+function getWorker() {
+  if (worker) return worker;
+  worker = new Worker(new URL('./worker.mjs', import.meta.url), { type: 'module' });
+  worker.onmessage = ({ data }) => {
+    if (data.type === 'status') status.textContent = data.message;
+    if (data.type === 'error') showError(data.message);
+    if (data.type !== 'result') return;
+    results.replaceChildren();
+    for (const { label, score } of data.predictions) {
+      const item = document.createElement('li');
+      const row = document.createElement('div');
+      row.className = 'prediction';
+      const name = document.createElement('strong');
+      name.textContent = label;
+      const percent = document.createElement('span');
+      percent.textContent = `${(score * 100).toFixed(1)}%`;
+      const bar = document.createElement('meter');
+      bar.min = 0;
+      bar.max = 1;
+      bar.value = score;
+      bar.setAttribute('aria-label', `${label} model score`);
+      row.append(name, percent);
+      item.append(row, bar);
+      results.append(item);
+    }
+    document.querySelector('#empty-results').hidden = true;
+    results.hidden = false;
+    status.textContent = 'Done. Choose another image to explore.';
+    setBusy(false);
+  };
+  worker.onerror = () => {
+    worker.terminate();
+    worker = undefined;
+    showError('The model could not start. Check your connection and try again in a current browser.');
+  };
+  return worker;
+}
+
+async function classify(src, alt) {
+  setBusy(true);
+  status.className = '';
+  status.textContent = 'Opening image…';
+  results.hidden = true;
+  document.querySelector('#empty-results').hidden = false;
+  try {
+    preview.src = src;
+    preview.alt = alt;
+    await preview.decode();
+    preview.hidden = false;
+    document.querySelector('#placeholder').hidden = true;
+    status.textContent = 'Loading model on first use. This may take a moment…';
+    getWorker().postMessage(src);
+  } catch {
+    preview.hidden = true;
+    document.querySelector('#placeholder').hidden = false;
+    showError('Could not open this image. Choose a valid PNG, JPEG, or WebP and try again.');
+  }
+}
+
+fileInput.addEventListener('change', () => {
+  const file = fileInput.files[0];
+  fileInput.value = '';
+  if (!file) return;
+  try {
+    validateImage(file);
+    if (imageURL) URL.revokeObjectURL(imageURL);
+    imageURL = URL.createObjectURL(file);
+    classify(imageURL, file.name);
+  } catch (error) {
+    showError(error.message);
+  }
+});
+
+sample.addEventListener('click', () => classify(
+  'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/tiger.jpg',
+  'Sample photograph of a tiger',
+));

index.html

@@ -1,19 +1,41 @@
 <!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="description" content="Explore image recognition with MobileNetV4. Photos are classified locally in your browser.">
+  <title>Lens — Image classifier</title>
+  <link rel="stylesheet" href="style.css">
+  <script type="module" src="app.mjs"></script>
+</head>
+<body>
+  <main>
+    <header><a class="brand" href="./" aria-label="Lens home"><span class="mark" aria-hidden="true">◉</span> lens<span class="brand-note">/ vision playground</span></a><span class="badge">Runs on your device</span></header>
+    <section class="intro">
+      <p class="eyebrow">A LITTLE EXPERIMENT IN COMPUTER VISION</p>
+      <h1>What does AI <em>see?</em></h1>
+      <p class="lede">Give it a photo. Explore what an image model recognizes,<br class="desktop"> one prediction at a time.</p>
+    </section>
+    <div class="workspace">
+      <section class="panel input-panel" aria-labelledby="input-title">
+        <div class="panel-heading"><h2 id="input-title"><span>01</span> Your image</h2><span class="small">PNG · JPEG · WebP</span></div>
+        <div class="preview-area">
+          <div id="placeholder"><svg width="52" height="52" viewBox="0 0 48 48" fill="none" aria-hidden="true"><rect x="7" y="7" width="34" height="34" rx="7" stroke="currentColor" stroke-width="1.5"/><circle cx="17" cy="17" r="3" stroke="currentColor" stroke-width="1.5"/><path d="m8 34 10-10 7 7 6-6 10 10" stroke="currentColor" stroke-width="1.5"/></svg><h3>A fresh perspective starts here.</h3><p>Choose a photo of an animal or everyday object.</p></div>
+          <img id="preview" alt="Selected image to classify" hidden>
+        </div>
+        <label class="upload" for="file">Choose an image <span aria-hidden="true">↗</span><input id="file" type="file" accept="image/png,image/jpeg,image/webp" aria-describedby="file-help"></label>
+        <div class="input-bottom"><span id="file-help" class="small">Up to 15 MB · stays on your device</span><button id="sample" type="button">Try a tiger →</button></div>
+      </section>
+      <section class="panel results-panel" aria-labelledby="results-title">
+        <div class="panel-heading"><h2 id="results-title"><span>02</span> Model predictions</h2><span class="small">TOP 5</span></div>
+        <div id="empty-results"><span class="orbit" aria-hidden="true">✳</span><h3>Meet your model’s point of view.</h3><p>Choose an image to reveal its top five guesses and their scores.</p></div>
+        <ol id="results" aria-label="Top image predictions" hidden></ol>
+        <p id="status" role="status" aria-live="polite">Ready when you are.</p>
+        <p class="results-note">Trained on 1,000 ImageNet categories. Predictions can be wrong, especially for images outside those categories.</p>
+      </section>
+    </div>
+    <footer><p><span class="dot" aria-hidden="true"></span> Powered by <a href="https://huggingface.co/onnx-community/mobilenetv4_conv_small.e2400_r224_in1k" target="_blank" rel="noreferrer">MobileNetV4</a> + <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noreferrer">Transformers.js</a></p><span>Small model. A new way to look.</span></footer>
+    <noscript>Enable JavaScript to run this image model in your browser.</noscript>
+  </main>
+</body>
 </html>

input.mjs

@@ -0,0 +1,7 @@
+export function validateImage(file) {
+  if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) {
+    throw new Error('Choose a PNG, JPEG, or WebP image.');
+  }
+  if (!file.size) throw new Error('This image is empty. Choose another file.');
+  if (file.size > 15 * 1024 * 1024) throw new Error('Choose an image smaller than 15 MB.');
+}

style.css

@@ -1,28 +1,59 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
+:root { color-scheme: light; --bg:#f8f7f3; --ink:#252b25; --muted:#686c63; --line:#dedfd6; --accent:#a63e22; --soft:#f0efe8; }
+* { box-sizing:border-box; }
+body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 'DM Sans',sans-serif; }
+main { max-width:1180px; margin:auto; padding:34px 40px; }
+header,.brand,.panel-heading,.input-bottom,footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }
+header { padding-bottom:26px; border-bottom:1px solid var(--line); }
+a { color:inherit; text-underline-offset:4px; }
+.brand { justify-content:flex-start; text-decoration:none; font-size:27px; font-weight:700; letter-spacing:-1px; }
+.mark { color:var(--accent); font-size:36px; line-height:1; }
+.brand-note { margin-left:8px; color:var(--muted); font-size:13px; font-weight:400; letter-spacing:0; }
+.badge { border:1px solid var(--line); border-radius:30px; padding:7px 14px; font-size:12px; }
+.intro { margin:58px 0 38px; }
+.eyebrow { color:var(--accent); font-size:11px; letter-spacing:2px; font-weight:700; }
+h1 { font:600 clamp(40px,6vw,64px)/1.15 'Manrope',sans-serif; letter-spacing:-3px; margin:15px 0 18px; }
+h1 em { font-family:Georgia,serif; color:var(--accent); font-weight:400; }
+.lede { color:var(--muted); font-size:17px; margin:0; }
+.workspace { display:grid; grid-template-columns:1.08fr 1fr; gap:24px; }
+.panel { border:1px solid var(--line); border-radius:18px; background:#fff; padding:25px; }
+.panel-heading { margin-bottom:22px; }
+h2 { font-size:14px; font-weight:600; margin:0; }
+h2 span { color:var(--muted); margin-right:11px; font-size:11px; }
+.small { color:var(--muted); font-size:11px; }
+.preview-area { height:288px; background:var(--soft); border:1px dashed #cdcec4; border-radius:10px; display:grid; place-items:center; overflow:hidden; text-align:center; }
+#placeholder { padding:20px; color:var(--muted); }
+#placeholder svg { color:var(--accent); margin-bottom:10px; }
+h3 { color:var(--ink); font-size:16px; font-weight:500; margin:8px 0; }
+#placeholder p,#empty-results p { font-size:13px; max-width:290px; margin:0 auto; color:var(--muted); }
+#preview { width:100%; height:100%; object-fit:contain; }
+[hidden] { display:none !important; }
+.upload { margin-top:18px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:20px; color:#fff; background:var(--ink); border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; position:relative; }
+.upload:hover { background:#414b40; }
+.upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
+.upload:focus-within { outline:3px solid var(--accent); outline-offset:3px; }
+.upload:has(input:disabled) { opacity:.5; cursor:wait; }
+.input-bottom { margin-top:8px; }
+button { background:none; border:0; color:var(--accent); min-height:44px; padding:6px 0 6px 12px; font:500 12px 'DM Sans',sans-serif; cursor:pointer; }
+button:hover { text-decoration:underline; text-underline-offset:4px; }
+button:disabled { opacity:.5; cursor:wait; }
+:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
+.results-panel { display:flex; flex-direction:column; }
+#empty-results { flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 0; }
+.orbit { color:#aaa99c; font:68px/1 Georgia,serif; margin-bottom:15px; }
+#results { flex:1; list-style:none; margin:0; padding:0; }
+#results li { padding:10px 0; }
+.prediction { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; }
+.prediction strong { font-weight:500; }
+.prediction span { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px; }
+meter { width:100%; height:8px; display:block; margin-top:9px; border:0; border-radius:4px; background:var(--soft); }
+meter::-webkit-meter-bar { background:var(--soft); border:0; height:6px; }
+meter::-webkit-meter-optimum-value { background:var(--accent); border-radius:4px; }
+meter::-moz-meter-bar { background:var(--accent); }
+#status { color:var(--muted); border-top:1px solid var(--line); padding-top:16px; margin:16px 0 0; font-size:12px; min-height:38px; }
+#status.error { color:#a52920; }
+.results-note { color:var(--muted); font-size:11px; line-height:1.6; margin:8px 0 0; }
+footer { margin-top:28px; color:var(--muted); font-size:11px; }
+footer p { margin:0; }
+.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#53704c; margin-right:7px; }
+@media(max-width:700px) { main { padding:22px 20px; } .brand-note,.badge { display:none; } .intro { margin:36px 0 28px; } h1 { letter-spacing:-2px; } .workspace { grid-template-columns:1fr; gap:16px; } .panel { padding:20px; } .preview-area { height:250px; } #empty-results { min-height:250px; } footer { align-items:flex-start; flex-direction:column; gap:8px; } .desktop { display:none; } }

tests/input.test.mjs

@@ -0,0 +1,9 @@
+import assert from 'node:assert/strict';
+import { validateImage } from '../input.mjs';
+
+assert.doesNotThrow(() => validateImage({ type: 'image/png', size: 1024 }));
+assert.doesNotThrow(() => validateImage({ type: 'image/jpeg', size: 15 * 1024 * 1024 }));
+assert.throws(() => validateImage({ type: 'text/html', size: 100 }), /PNG, JPEG, or WebP/);
+assert.throws(() => validateImage({ type: 'image/png', size: 0 }), /empty/);
+assert.throws(() => validateImage({ type: 'image/webp', size: 16 * 1024 * 1024 }), /15 MB/);
+console.log('Image input checks passed.');

worker.mjs

@@ -0,0 +1,22 @@
+let classifier;
+
+self.onmessage = async ({ data: image }) => {
+  try {
+    if (!classifier) {
+      self.postMessage({ type: 'status', message: 'Downloading the image model… First use takes a moment.' });
+      const { pipeline, env } = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1');
+      env.allowLocalModels = false;
+      // A single WASM thread also works inside the Space iframe without cross-origin isolation.
+      env.backends.onnx.wasm.numThreads = 1;
+      classifier = await pipeline('image-classification', 'onnx-community/mobilenetv4_conv_small.e2400_r224_in1k', {
+        device: 'wasm', dtype: 'q8', revision: '3ba07f12712fa58fd6b3d661f9909c9e332c5005',
+      });
+    }
+    self.postMessage({ type: 'status', message: 'Looking at your image…' });
+    const predictions = await classifier(image, { top_k: 5 });
+    self.postMessage({ type: 'result', predictions });
+  } catch (error) {
+    console.error(error);
+    self.postMessage({ type: 'error', message: 'The model could not process this image. Check your connection or try another photo.' });
+  }
+};