Upload index.html with huggingface_hub

index.html

@@ -4,41 +4,35 @@
 <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 -->
+<!-- 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-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>
+<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/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; }
+            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; }
 
-  /* 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;
@@ -46,14 +40,11 @@
   }
   #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; }
@@ -72,7 +63,6 @@
   .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>
@@ -93,7 +83,7 @@
   </div>
 
   <div class="controls">
-    <button id="btn-cap" disabled>📸 Ambil</button>
+    <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>
@@ -115,6 +105,7 @@ let model = null;
 let stream = null;
 let captured = false;
 let classNames = [];
+let modelLoading = false;
 
 const video = document.getElementById('video');
 const canvas = document.getElementById('canvas');
@@ -131,24 +122,29 @@ 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();
+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/dist/tflite/';
+  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_quantized.tflite');
-    console.log('Model loaded:', model);
     statusEl.textContent = '✓ Model siap';
     statusEl.className = 'ready';
     btnCap.disabled = false;
+    modelLoading = false;
   } catch (e) {
-    statusEl.textContent = '✗ Gagal load model: ' + e.message;
+    statusEl.textContent = '✗ Gagal: ' + e.message;
     statusEl.className = 'error';
-    showToast('Gagal load model: ' + e.message);
+    showToast('Model gagal dimuat: ' + e.message);
+    modelLoading = false;
     throw e;
   }
 }
@@ -170,15 +166,14 @@ async function startCam() {
     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;
+    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 || 480;
-  canvas.height = video.videoHeight || 480;
+  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';
@@ -206,7 +201,7 @@ async function predict() {
   if (captured) {
     imageData = canvas;
   } else if (fileInput.files.length > 0) {
-    const img = await loadImage(fileInput.files[0]);
+    const img = await loadImageFile(fileInput.files[0]);
     canvas.width = img.naturalWidth;
     canvas.height = img.naturalHeight;
     ctx.drawImage(img, 0, 0);
@@ -221,41 +216,44 @@ async function predict() {
     return;
   }
 
-  // Show loading
   spinner.style.display = 'block';
   predsDiv.innerHTML = '';
   timeEl.textContent = '';
+  resultDiv.style.display = 'none';
 
-  // Run inference asynchronously (yield to render)
   await tf.nextFrame();
-
   const t0 = performance.now();
+
   try {
-    // Resize to 224x224
+    // 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(); // raw [0,255]
+      return resized.expandDims(0).toFloat();
     });
 
     const output = model.predict(input);
     const scores = output.dataSync();
-    const time = (performance.now() - t0).toFixed(0);
+    const elapsed = (performance.now() - t0).toFixed(0);
 
-    // Cleanup tensors
     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 = `⏱ ${time}ms inferensi (client-side WASM)`;
+    timeEl.textContent = `⏱ ${elapsed}ms inferensi (browser)`;
 
     const maxScore = top3[0].score;
     predsDiv.innerHTML = top3.map((p, i) => {
@@ -275,7 +273,7 @@ async function predict() {
 }
 
 // ── HELPERS ──
-function loadImage(file) {
+function loadImageFile(file) {
   return new Promise((resolve, reject) => {
     const r = new FileReader();
     r.onload = () => {
@@ -296,10 +294,10 @@ function showToast(msg) {
   setTimeout(() => t.style.display = 'none', 3000);
 }
 
-// ── EVENT HANDLERS ──
+// ── FILE UPLOAD ──
 fileInput.addEventListener('change', async (e) => {
   if (e.target.files.length === 0) return;
-  const img = await loadImage(e.target.files[0]);
+  const img = await loadImageFile(e.target.files[0]);
   canvas.width = img.naturalWidth;
   canvas.height = img.naturalHeight;
   ctx.drawImage(img, 0, 0);
@@ -313,16 +311,12 @@ fileInput.addEventListener('change', async (e) => {
   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()]);
+    setWasmPath();
+    await Promise.all([loadModel(), loadClassNames()]);
+    startCam();
   } catch (e) {
     console.error('Init error:', e);
   }