Migrate to ONNX Runtime Web client for fully offline browser-side inference

index.html

@@ -10,6 +10,9 @@
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   
+  <!-- ONNX Runtime Web -->
+  <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
+
   <style>
     body {
       font-family: 'Plus Jakarta Sans', sans-serif;
@@ -49,7 +52,7 @@
       <div class="flex items-center gap-2">
         <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
           <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
-          MediaPipe WASM Engine
+          ONNX Runtime Web
         </span>
       </div>
     </div>
@@ -70,7 +73,7 @@
         <div class="w-full bg-white/5 h-2 rounded-full overflow-hidden">
           <div id="loader-bar" class="bg-gradient-to-r from-purple-500 to-indigo-500 h-full w-0 progress-bar-fill"></div>
         </div>
-        <p id="loader-status" class="text-xs text-zinc-400 italic">Mendownload model (3.5 MB)...</p>
+        <p id="loader-status" class="text-xs text-zinc-400 italic">Mendownload model ONNX (13 MB)...</p>
       </div>
 
       <!-- Main Tabs (Hidden during loading) -->
@@ -214,12 +217,12 @@
             <span class="font-semibold text-emerald-400">98.77%</span>
           </div>
           <div class="p-3 bg-white/[0.02] rounded-xl border border-white/5">
-            <span class="text-zinc-500 block mb-0.5">F1-Score</span>
-            <span class="font-semibold text-zinc-200">0.9897</span>
+            <span class="text-zinc-500 block mb-0.5">Format</span>
+            <span class="font-semibold text-zinc-200">ONNX Graph Model</span>
           </div>
           <div class="p-3 bg-white/[0.02] rounded-xl border border-white/5">
             <span class="text-zinc-500 block mb-0.5">Size</span>
-            <span class="font-semibold text-zinc-200">3.5 MB (Quantized)</span>
+            <span class="font-semibold text-zinc-200">12.4 MB</span>
           </div>
         </div>
       </div>
@@ -229,17 +232,14 @@
 
   <!-- Footer -->
   <footer class="mt-auto py-6 border-t border-white/5 px-6 text-center text-xs text-zinc-500">
-    <p>&copy; 2026 Tokiva Team. Dibuat menggunakan Google MediaPipe Tasks Vision engine.</p>
+    <p>&copy; 2026 Tokiva Team. Dibuat menggunakan ONNX Runtime Web engine.</p>
   </footer>
 
   <script type="module">
-    // Import MediaPipe Image Classifier from jsDelivr ES Module URL
-    import { ImageClassifier, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/vision_bundle.mjs";
-
     // ─────────────────────────────────────────────────────────
     // MODEL CONFIG & MAPS
     // ─────────────────────────────────────────────────────────
-    const MODEL_PATH = 'models/mobilenetv4_cbam_quantized.tflite';
+    const MODEL_PATH = 'models/mobilenetv4_cbam.onnx';
     
     // 19 Class Labels ordered alphabetically (matching indices from training)
     const CLASS_NAMES = [
@@ -289,7 +289,7 @@
     // ─────────────────────────────────────────────────────────
     // GLOBAL STATE
     // ─────────────────────────────────────────────────────────
-    let imageClassifier = null;
+    let session = null;
     let currentTab = 'webcam';
     let currentStream = null;
     let activeFacingMode = 'environment'; // environment / user
@@ -325,32 +325,25 @@
     // ─────────────────────────────────────────────────────────
     async function initModel() {
       try {
-        loaderBar.style.width = '30%';
-        loaderPercentage.innerText = '30%';
-        loaderStatus.innerText = 'Mencari dependensi WebAssembly...';
-
-        // Load Fileset Resolver
-        const vision = await FilesetResolver.forVisionTasks(
-          "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm"
-        );
-        
-        loaderBar.style.width = '60%';
-        loaderPercentage.innerText = '60%';
-        loaderStatus.innerText = 'Memuat model TFLite (3.5 MB)...';
+        loaderBar.style.width = '20%';
+        loaderPercentage.innerText = '20%';
+        loaderStatus.innerText = 'Menginisialisasi ONNX Runtime...';
+
+        // Warm up / Configure session options
+        const sessionOptions = {
+          executionProviders: ['wasm']
+        };
+
+        loaderBar.style.width = '50%';
+        loaderPercentage.innerText = '50%';
+        loaderStatus.innerText = 'Mendownload model ONNX (13 MB)...';
 
         // Load the model
-        imageClassifier = await ImageClassifier.createFromOptions(vision, {
-          baseOptions: {
-            modelAssetPath: MODEL_PATH,
-            delegate: "GPU" // Will fall back to CPU if WebGL not supported
-          },
-          runningMode: "IMAGE",
-          maxResults: 19
-        });
+        session = await ort.InferenceSession.create(MODEL_PATH, sessionOptions);
         
         loaderBar.style.width = '100%';
         loaderPercentage.innerText = '100%';
-        loaderStatus.innerText = 'Sukses memuat model!';
+        loaderStatus.innerText = 'Model sukses dimuat!';
         
         setTimeout(() => {
           loaderCard.classList.add('hidden');
@@ -359,7 +352,7 @@
           startWebcam();
         }, 600);
       } catch (err) {
-        console.error(err);
+        console.error("Gagal load model:", err);
         loaderStatus.innerText = 'Gagal memuat model: ' + err.message;
         loaderBar.classList.add('bg-red-500');
       }
@@ -491,38 +484,65 @@
       reader.readAsDataURL(file);
     }
 
+    // ─────────────────────────────────────────────────────────
+    // PREPROCESSING HELPER
+    // ─────────────────────────────────────────────────────────
+    function preprocessImage(imageOrVideo) {
+      // 1. Draw onto 224x224 canvas to resize
+      const canvas = document.createElement('canvas');
+      canvas.width = 224;
+      canvas.height = 224;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(imageOrVideo, 0, 0, 224, 224);
+      
+      // 2. Extract pixel data
+      const imgData = ctx.getImageData(0, 0, 224, 224);
+      const data = imgData.data;
+      
+      // 3. Normalize pixels from [0, 255] to [0, 1] as Float32
+      const floatData = new Float32Array(224 * 224 * 3);
+      let floatIdx = 0;
+      for (let i = 0; i < data.length; i += 4) {
+        floatData[floatIdx++] = data[i] / 255.0;     // R
+        floatData[floatIdx++] = data[i + 1] / 255.0; // G
+        floatData[floatIdx++] = data[i + 2] / 255.0; // B
+      }
+      return floatData;
+    }
+
     // ─────────────────────────────────────────────────────────
     // CORE PREDICTION & INFERENCE
     // ─────────────────────────────────────────────────────────
     async function runPrediction(imageOrVideo) {
-      if (!imageClassifier) return;
+      if (!session) return;
       
       const startTime = performance.now();
       
-      // Perform inference using MediaPipe tasks-vision
-      const results = imageClassifier.classify(imageOrVideo);
+      // Perform client side inference using ONNX Runtime
+      const floatData = preprocessImage(imageOrVideo);
+      const inputTensor = new ort.Tensor('float32', floatData, [1, 224, 224, 3]);
+
+      // Bind input names from model signature
+      const feeds = {};
+      feeds[session.inputNames[0]] = inputTensor;
       
+      // Run session
+      const outputMap = await session.run(feeds);
+      const outputTensor = outputMap[session.outputNames[0]];
+      const predictions = outputTensor.data; // Float32Array size 19
+
       const elapsed = (performance.now() - startTime).toFixed(1);
       inferenceTimeDisplay.innerText = `Inference: ${elapsed} ms`;
 
-      if (results && results.classifications && results.classifications.length > 0) {
-        const categories = results.classifications[0].categories;
-        
-        // Map MediaPipe category output (by index/label name)
-        const sortedResults = categories.map(cat => {
-          // If the model does not have labels embedded, cat.index is the integer index
-          const idx = parseInt(cat.index);
-          const class_name = CLASS_NAMES[idx] || cat.categoryName || `Unknown Class #${idx}`;
-          return {
-            prob: cat.score,
-            class_name: class_name,
-            display_name: DISPLAY_NAMES[class_name] || class_name,
-            index: idx
-          };
-        }).sort((a, b) => b.prob - a.prob);
-
-        renderResults(sortedResults);
-      }
+      // Find top results
+      const results = Array.from(predictions).map((prob, idx) => ({
+        prob: prob,
+        class_name: CLASS_NAMES[idx],
+        display_name: DISPLAY_NAMES[CLASS_NAMES[idx]] || CLASS_NAMES[idx],
+        index: idx
+      })).sort((a, b) => b.prob - a.prob);
+
+      renderResults(results);
     }
 
     // Capture frame from live webcam
@@ -625,24 +645,23 @@
     }
 
     document.getElementById('btn-analyze').addEventListener('click', async () => {
-      if (!loadedImageElement || !imageClassifier) return;
+      if (!loadedImageElement || !session) return;
       
       const btn = document.getElementById('btn-analyze');
       btn.disabled = true;
       btn.innerText = "MENGHITUNG HEATMAP (1-2 Detik)...";
       
       // Get base prediction
-      const baseResult = imageClassifier.classify(loadedImageElement);
-      if (!baseResult || !baseResult.classifications || baseResult.classifications.length === 0) {
-        btn.disabled = false;
-        btn.innerText = "HITUNG HEATMAP OKLUSI";
-        return;
-      }
+      const floatData = preprocessImage(loadedImageElement);
+      const inputTensor = new ort.Tensor('float32', floatData, [1, 224, 224, 3]);
+      const feeds = {};
+      feeds[session.inputNames[0]] = inputTensor;
+      
+      const baseResults = await session.run(feeds);
+      const baseProbs = baseResults[session.outputNames[0]].data;
 
-      const categories = baseResult.classifications[0].categories;
-      const topCat = categories.reduce((max, val) => val.score > max.score ? val : max, categories[0]);
-      const topClassIndex = parseInt(topCat.index);
-      const baseConf = topCat.score;
+      const topClassIndex = Array.from(baseProbs).reduce((maxIdx, val, idx, arr) => val > arr[maxIdx] ? idx : maxIdx, 0);
+      const baseConf = baseProbs[topClassIndex];
 
       const gridSize = 8;
       const patchSize = 224 / gridSize;
@@ -669,15 +688,14 @@
           tempCtx.fillRect(xStart, yStart, patchSize, patchSize);
           
           // Classify the occluded image
-          const occResult = imageClassifier.classify(tempCanvas);
-          let occConf = 0;
-          if (occResult && occResult.classifications && occResult.classifications.length > 0) {
-            const occCats = occResult.classifications[0].categories;
-            const matchCat = occCats.find(c => parseInt(c.index) === topClassIndex);
-            if (matchCat) {
-              occConf = matchCat.score;
-            }
-          }
+          const occFloatData = preprocessImage(tempCanvas);
+          const occTensor = new ort.Tensor('float32', occFloatData, [1, 224, 224, 3]);
+          const occFeeds = {};
+          occFeeds[session.inputNames[0]] = occTensor;
+          const occResults = await session.run(occFeeds);
+          const occProbs = occResults[session.outputNames[0]].data;
+          
+          const occConf = occProbs[topClassIndex];
 
           // Drop in target class confidence
           const drop = Math.max(0, baseConf - occConf);

models/{mobilenetv4_cbam_quantized.tflite → mobilenetv4_cbam.onnx}

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4d8309863138a8843087c7e41b22bd0e7eebf1172aa2d84a020f72266fa6d920
-size 3546976
+oid sha256:22da85536dde28b02e793ca0bad907f13ddfb3e50da2a33f85ff67a1168608af
+size 13051952