Spaces:
Running
Running
| <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 (correct CDN paths) --> | |
| <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-cpu@4.22.0/dist/tf-backend-cpu.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1-alpha.10/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; } | |
| 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 { text-align: center; font-size: 12px; padding: 4px 12px; border-radius: 20px; | |
| background: #1e293b; color: #94a3b8; min-height: 22px; transition: all .3s; } | |
| #status.loading { color: #fbbf24; } | |
| #status.ready { color: #4ade80; background: #14532d; } | |
| #status.error { color: #f87171; background: #451a1a; } | |
| .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 { 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-pred { background: #16a34a; color: #fff; display: none; } | |
| #btn-retake { background: #475569; color: #fff; display: none; } | |
| #file-label { background: #334155; color: #cbd5e1; display: inline-block; } | |
| #file-input { display: none; } | |
| #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 onclick="capture()">📸 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 = []; | |
| let modelLoading = false; | |
| 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 ── | |
| function setWasmPath() { | |
| // The WASM files are in the same CDN directory as tf-tflite.min.js | |
| // jsDelivr resolves them automatically, but we set explicitly for safety | |
| const base = 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite@0.0.1-alpha.10/wasm/'; | |
| try { tflite.setWasmPath(base); } catch(e) {} | |
| } | |
| // ── LOAD MODEL ── | |
| async function loadModel() { | |
| modelLoading = true; | |
| statusEl.textContent = '⏳ Loading model (3.5 MB)...'; | |
| statusEl.className = 'loading'; | |
| try { | |
| model = await tflite.loadTFLiteModel('mobilenetv4_cbam_fp32.tflite'); | |
| statusEl.textContent = '✓ Model siap'; | |
| statusEl.className = 'ready'; | |
| btnCap.disabled = false; | |
| modelLoading = false; | |
| } catch (e) { | |
| statusEl.textContent = '✗ Gagal: ' + e.message; | |
| statusEl.className = 'error'; | |
| showToast('Model gagal dimuat: ' + e.message); | |
| modelLoading = false; | |
| 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">Upload gambar aja</small></div>'; | |
| } | |
| } | |
| // ── CAPTURE ── | |
| function capture() { | |
| canvas.width = video.videoWidth || video.width || 480; | |
| canvas.height = video.videoHeight || video.height || 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 loadImageFile(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; | |
| } | |
| spinner.style.display = 'block'; | |
| predsDiv.innerHTML = ''; | |
| timeEl.textContent = ''; | |
| resultDiv.style.display = 'none'; | |
| await tf.nextFrame(); | |
| const t0 = performance.now(); | |
| try { | |
| // Preprocess: resize to 224x224, keep [0,255] (model handles normalization) | |
| const input = tf.tidy(() => { | |
| const img = tf.browser.fromPixels(imageData); | |
| const resized = tf.image.resizeBilinear(img, [224, 224]); | |
| return resized.expandDims(0).toFloat(); | |
| }); | |
| const output = model.predict(input); | |
| const scores = output.dataSync(); | |
| const elapsed = (performance.now() - t0).toFixed(0); | |
| input.dispose(); | |
| output.dispose(); | |
| spinner.style.display = 'none'; | |
| resultDiv.style.display = 'block'; | |
| if (!classNames.length) { | |
| // Fallback: generate class names | |
| for (let i = 0; i < scores.length; i++) classNames.push('class_' + i); | |
| } | |
| // 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 = `⏱ ${elapsed}ms inferensi (browser)`; | |
| 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 loadImageFile(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); | |
| } | |
| // ── FILE UPLOAD ── | |
| fileInput.addEventListener('change', async (e) => { | |
| if (e.target.files.length === 0) return; | |
| const img = await loadImageFile(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(); | |
| }); | |
| // ── INIT ── | |
| (async function init() { | |
| try { | |
| setWasmPath(); | |
| await Promise.all([loadModel(), loadClassNames()]); | |
| startCam(); | |
| } catch (e) { | |
| console.error('Init error:', e); | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |