Spaces:

Anoderb
/

sku-webcam-classifier

Running

App Files Files Community

Anoderb commited on Jul 15

Commit

2acf4dd

verified ·

1 Parent(s): 00257e2

Upload folder using huggingface_hub

Browse files

Files changed (4) hide show

README.md +25 -5
class_names.json +21 -0
index.html +331 -18
mobilenetv4_cbam_quantized.tflite +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,30 @@
 ---
-title: Sku Webcam Classifier
-emoji: 📉
-colorFrom: gray
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SKU Scanner
+emoji: 📷
+colorFrom: blue
+colorTo: green
 sdk: static
+app_file: index.html
 pinned: false
 ---
+# 📷 SKU Scanner - Webcam Classifier
+Klasifikasi 19 SKU produk UMKM via webcam HP.
+**Stack:** TensorFlow.js TFLite + WebAssembly — semua inferensi **client-side**. Gak ada data dikirim ke server. Gak perlu backend.
+## 🔗 Links
+- Model: https://huggingface.co/Anoderb/sku-mobilenetv4-cbam-classifier
+- Dataset: https://huggingface.co/datasets/anoderb/sku-product-image-classification
+## 📊 Metrics
+| Metric | Value |
+|--------|-------|
+| Accuracy | **98.8%** |
+| F1 Macro | 0.984 |
+| Model Size | 3.5 MB (TFLite Quantized) |
+| Inference | Client-side (WASM) |
+## 🏷️ 19 SKU
+frisian-flag-fullcrm-250ml, frisian-flag-strwbry-250ml, gaga-100-grg-jalapeto, gaga-100-kuah-jalapeto, indomie-grg-cb-ijo, indomie-grg-cb-ijo-jumbo, klik-crackers-keju, nabati-siip-keju, pepsodent-72g, sarimi-aym-bwng, sarimi-gls-baso-pds, sedaap-grng, sedaap-kuah-aym-bwg, sedaap-sg-laksa, siplah-mineral-220ml, soffell-bunga, soffell-jeruk, ultramlk-fullcrm-200ml, vica-600ml

class_names.json ADDED Viewed

	@@ -0,0 +1,21 @@

+[
+  "frisian-flag-fullcrm-250ml",
+  "frisian-flag-strwbry-250ml",
+  "gaga-100-grg-jalapeto",
+  "gaga-100-kuah-jalapeto",
+  "indomie-grg-cb-ijo",
+  "indomie-grg-cb-ijo-jumbo",
+  "klik-crackers-keju",
+  "nabati-siip-keju",
+  "pepsodent-72g",
+  "sarimi-aym-bwng",
+  "sarimi-gls-baso-pds",
+  "sedaap-grng",
+  "sedaap-kuah-aym-bwg",
+  "sedaap-sg-laksa",
+  "siplah-mineral-220ml",
+  "soffell-bunga",
+  "soffell-jeruk",
+  "ultramlk-fullcrm-200ml",
+  "vica-600ml"
+]

index.html CHANGED Viewed

@@ -1,19 +1,332 @@
-<!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>

+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>SKU Scanner</title>
+<!-- TensorFlow.js TFLite WASM backend -->
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@4.22.0/dist/tf-core.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm@4.22.0/dist/tf-backend-wasm.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1/dist/tf-tflite.min.js"></script>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
+         background: #0f172a; color: #e2e8f0; min-height: 100dvh; display: flex; justify-content: center; }
+  .container { max-width: 420px; width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+  /* Header */
+  h1 { font-size: 20px; text-align: center; color: #38bdf8; font-weight: 700; }
+  .subtitle { text-align: center; font-size: 13px; color: #94a3b8; margin-top: -8px; }
+  /* Status badge */
+  #status { text-align: center; font-size: 12px; padding: 4px 12px; border-radius: 20px;
+            background: #1e293b; color: #94a3b8; margin-bottom: 4px;
+            min-height: 22px; transition: all .3s; }
+  #status.loading { color: #fbbf24; }
+  #status.ready { color: #4ade80; background: #14532d; }
+  #status.error { color: #f87171; background: #451a1a; }
+  /* Camera */
+  .cam-wrap { position: relative; width: 100%; aspect-ratio: 1/1; background: #1e293b;
+              border-radius: 12px; overflow: hidden; }
+  .cam-wrap video, .cam-wrap canvas { position: absolute; top: 0; left: 0;
+                                      width: 100%; height: 100%; object-fit: cover; }
+  .cam-wrap canvas { display: none; }
+  .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+             border: 3px dashed #38bdf8; border-radius: 12px; pointer-events: none; opacity: 0.5; }
+  .placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+                 text-align: center; color: #64748b; pointer-events: none; }
+  /* Controls */
+  .controls { display: flex; gap: 8px; flex-wrap: wrap; }
+  .controls button, #file-label {
+    flex: 1; min-width: 90px; padding: 12px; border: none; border-radius: 8px;
+    font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; text-align: center;
+  }
+  #btn-cap { background: #2563eb; color: #fff; }
+  #btn-cap:disabled { background: #334155; color: #64748b; cursor: wait; }
+  #btn-cap:active { background: #1d4ed8; }
+  #btn-pred { background: #16a34a; color: #fff; display: none; }
+  #btn-pred:active { background: #15803d; }
+  #btn-retake { background: #475569; color: #fff; display: none; }
+  #file-label { background: #334155; color: #cbd5e1; display: inline-block; }
+  #file-input { display: none; }
+  /* Result */
+  #result { display: none; background: #1e293b; border-radius: 12px; padding: 16px; }
+  #result h3 { font-size: 14px; color: #94a3b8; margin-bottom: 8px; }
+  .pred-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+  .pred-row .label { flex: 1; font-size: 13px; font-weight: 500; }
+  .pred-row .bar-wrap { flex: 2; height: 20px; background: #334155; border-radius: 4px; overflow: hidden; }
+  .pred-row .bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
+  .pred-row .score { width: 42px; text-align: right; font-size: 12px; color: #94a3b8; }
+  .rank-1 .bar { background: #38bdf8; }
+  .rank-2 .bar { background: #60a5fa; }
+  .rank-3 .bar { background: #818cf8; }
+  .spinner { width: 20px; height: 20px; border: 2px solid #334155; border-top-color: #38bdf8;
+             border-radius: 50%; animation: spin .6s linear infinite; margin: 20px auto; }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
+           background: #ef4444; color: #fff; padding: 10px 20px; border-radius: 8px;
+           font-size: 13px; display: none; z-index: 100; white-space: nowrap; }
+  .time { text-align: center; font-size: 11px; color: #64748b; margin-top: -4px; }
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>📷 SKU Scanner</h1>
+  <p class="subtitle" id="sub">Scan produk UMKM — 19 kategori</p>
+  <div id="status">⏳ Loading model...</div>
+  <div class="cam-wrap" id="camWrap">
+    <video id="video" autoplay playsinline></video>
+    <canvas id="canvas"></canvas>
+    <div class="overlay"></div>
+    <div class="placeholder" id="placeholder">
+      <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.16a15.53 15.53 0 0 1-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"/></svg>
+      <div style="margin-top:8px">Aktifkan kamera</div>
+    </div>
+  </div>
+  <div class="controls">
+    <button id="btn-cap" disabled>📸 Ambil</button>
+    <button id="btn-pred" onclick="predict()">🔍 Prediksi</button>
+    <button id="btn-retake" onclick="retake()">🔄 Ulang</button>
+    <label id="file-label" for="file-input">📁 Upload</label>
+    <input type="file" id="file-input" accept="image/*" capture="environment">
+  </div>
+  <div id="result">
+    <h3>🔎 Hasil Prediksi</h3>
+    <div id="preds"></div>
+    <div class="time" id="infer-time"></div>
+  </div>
+  <div class="spinner" id="spinner" style="display:none"></div>
+</div>
+<div class="toast" id="toast"></div>
+<script>
+// ── GLOBALS ──
+let model = null;
+let stream = null;
+let captured = false;
+let classNames = [];
+const video = document.getElementById('video');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const statusEl = document.getElementById('status');
+const btnCap = document.getElementById('btn-cap');
+const btnPred = document.getElementById('btn-pred');
+const btnRetake = document.getElementById('btn-retake');
+const resultDiv = document.getElementById('result');
+const predsDiv = document.getElementById('preds');
+const spinner = document.getElementById('spinner');
+const timeEl = document.getElementById('infer-time');
+const fileInput = document.getElementById('file-input');
+const placeholder = document.getElementById('placeholder');
+// ── SET WASM PATH ──
+async function initTFJS() {
+  const wasmBase = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1/dist/tflite/';
+  await tflite.setWasmPath(wasmBase);
+  await tf.ready();
+}
+// ── LOAD MODEL ──
+async function loadModel() {
+  try {
+    model = await tflite.loadTFLiteModel('mobilenetv4_cbam_quantized.tflite');
+    console.log('Model loaded:', model);
+    statusEl.textContent = '✓ Model siap';
+    statusEl.className = 'ready';
+    btnCap.disabled = false;
+  } catch (e) {
+    statusEl.textContent = '✗ Gagal load model: ' + e.message;
+    statusEl.className = 'error';
+    showToast('Gagal load model: ' + e.message);
+    throw e;
+  }
+}
+// ── LOAD CLASS NAMES ──
+async function loadClassNames() {
+  const res = await fetch('class_names.json');
+  classNames = await res.json();
+}
+// ── START CAMERA ──
+async function startCam() {
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: 'environment', width: { ideal: 640 }, height: { ideal: 640 } },
+      audio: false,
+    });
+    video.srcObject = stream;
+    await video.play();
+    placeholder.style.display = 'none';
+  } catch (e) {
+    placeholder.innerHTML = '<div style="color:#ef4444">❌ Kamera gak bisa diakses<br><small style="font-size:12px">Gunakan Upload saja</small></div>';
+    btnCap.disabled = true;
+  }
+}
+// ── CAPTURE ──
+function capture() {
+  canvas.width = video.videoWidth || 480;
+  canvas.height = video.videoHeight || 480;
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+  canvas.style.display = 'block';
+  video.style.display = 'none';
+  captured = true;
+  btnCap.style.display = 'none';
+  btnPred.style.display = 'block';
+  btnRetake.style.display = 'block';
+}
+// ── RETAKE ──
+function retake() {
+  canvas.style.display = 'none';
+  video.style.display = 'block';
+  captured = false;
+  btnPred.style.display = 'none';
+  btnRetake.style.display = 'none';
+  btnCap.style.display = 'block';
+  resultDiv.style.display = 'none';
+}
+// ── PREDICT ──
+async function predict() {
+  let imageData;
+  if (captured) {
+    imageData = canvas;
+  } else if (fileInput.files.length > 0) {
+    const img = await loadImage(fileInput.files[0]);
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    ctx.drawImage(img, 0, 0);
+    imageData = canvas;
+  } else {
+    showToast('Ambil foto dulu!');
+    return;
+  }
+  if (!model) {
+    showToast('Model belum siap!');
+    return;
+  }
+  // Show loading
+  spinner.style.display = 'block';
+  predsDiv.innerHTML = '';
+  timeEl.textContent = '';
+  // Run inference asynchronously (yield to render)
+  await tf.nextFrame();
+  const t0 = performance.now();
+  try {
+    // Resize to 224x224
+    const input = tf.tidy(() => {
+      const img = tf.browser.fromPixels(imageData);
+      const resized = tf.image.resizeBilinear(img, [224, 224]);
+      return resized.expandDims(0).toFloat(); // raw [0,255]
+    });
+    const output = model.predict(input);
+    const scores = output.dataSync();
+    const time = (performance.now() - t0).toFixed(0);
+    // Cleanup tensors
+    input.dispose();
+    output.dispose();
+    spinner.style.display = 'none';
+    resultDiv.style.display = 'block';
+    // Top 3
+    const top3 = Array.from(scores)
+      .map((s, i) => ({ label: classNames[i] || 'class_' + i, score: s }))
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 3);
+    timeEl.textContent = `⏱ ${time}ms inferensi (client-side WASM)`;
+    const maxScore = top3[0].score;
+    predsDiv.innerHTML = top3.map((p, i) => {
+      const pct = Math.max((p.score / maxScore) * 100, 5);
+      return `<div class="pred-row rank-${i+1}">
+        <span class="label">${p.label.replace(/-/g, ' ')}</span>
+        <div class="bar-wrap"><div class="bar" style="width:${pct}%"></div></div>
+        <span class="score">${(p.score * 100).toFixed(1)}%</span>
+      </div>`;
+    }).join('');
+  } catch (e) {
+    spinner.style.display = 'none';
+    showToast('Prediksi gagal: ' + e.message);
+    console.error(e);
+  }
+}
+// ── HELPERS ──
+function loadImage(file) {
+  return new Promise((resolve, reject) => {
+    const r = new FileReader();
+    r.onload = () => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = r.result;
+    };
+    r.onerror = reject;
+    r.readAsDataURL(file);
+  });
+}
+function showToast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg;
+  t.style.display = 'block';
+  setTimeout(() => t.style.display = 'none', 3000);
+}
+// ── EVENT HANDLERS ──
+fileInput.addEventListener('change', async (e) => {
+  if (e.target.files.length === 0) return;
+  const img = await loadImage(e.target.files[0]);
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  ctx.drawImage(img, 0, 0);
+  canvas.style.display = 'block';
+  video.style.display = 'none';
+  placeholder.style.display = 'none';
+  captured = true;
+  btnCap.style.display = 'none';
+  btnPred.style.display = 'block';
+  btnRetake.style.display = 'block';
+  predict();
+});
+// Use capture function from button
+btnCap.addEventListener('click', capture);
+// ── INIT ──
+(async function init() {
+  statusEl.textContent = '⏳ Initializing TFJS...';
+  try {
+    await initTFJS();
+    statusEl.textContent = '⏳ Loading model (3.5 MB)...';
+    await Promise.all([loadModel(), loadClassNames(), startCam()]);
+  } catch (e) {
+    console.error('Init error:', e);
+  }
+})();
+</script>
+</body>
 </html>

mobilenetv4_cbam_quantized.tflite ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:606f8201a060070778d6b49463f0053a2896c35d2e41b8a880e39cd0cfc851e6
+size 3547384