Use Google MediaPipe tasks-vision for TFLite compatibility in browser

index.html

@@ -10,10 +10,6 @@
   <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">
   
-  <!-- TensorFlow.js & TFLite Web -->
-  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite/dist/tf-tflite.min.js"></script>
-
   <style>
     body {
       font-family: 'Plus Jakarta Sans', sans-serif;
@@ -53,7 +49,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>
-          WASM Engine
+          MediaPipe WASM Engine
         </span>
       </div>
     </div>
@@ -195,7 +191,7 @@
 
           <!-- Predictions List -->
           <div class="flex flex-col gap-3">
-            <span class="text-xs font-semibold uppercase tracking-wider text-zinc-505">Alternatif Prediksi</span>
+            <span class="text-xs font-semibold uppercase tracking-wider text-zinc-500">Alternatif Prediksi</span>
             <div id="list-predictions" class="flex flex-col gap-2.5">
               <!-- Dynamically populated rows -->
             </div>
@@ -233,15 +229,17 @@
 
   <!-- 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 TensorFlow.js TFLite Web engine.</p>
+    <p>&copy; 2026 Tokiva Team. Dibuat menggunakan Google MediaPipe Tasks Vision engine.</p>
   </footer>
 
-  <script>
+  <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 INPUT_SIZE = [224, 224];
     
     // 19 Class Labels ordered alphabetically (matching indices from training)
     const CLASS_NAMES = [
@@ -291,7 +289,7 @@
     // ─────────────────────────────────────────────────────────
     // GLOBAL STATE
     // ─────────────────────────────────────────────────────────
-    let model = null;
+    let imageClassifier = null;
     let currentTab = 'webcam';
     let currentStream = null;
     let activeFacingMode = 'environment'; // environment / user
@@ -327,26 +325,39 @@
     // ─────────────────────────────────────────────────────────
     async function initModel() {
       try {
-        // Set WASM paths
-        tflite.setWasmPath('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite/dist/');
-        
         loaderBar.style.width = '30%';
         loaderPercentage.innerText = '30%';
-        loaderStatus.innerText = 'Menginisialisasi WASM engine...';
+        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)...';
 
         // Load the model
-        model = await tflite.loadTFLiteModel(MODEL_PATH);
+        imageClassifier = await ImageClassifier.createFromOptions(vision, {
+          baseOptions: {
+            modelAssetPath: MODEL_PATH,
+            delegate: "GPU" // Will fall back to CPU if WebGL not supported
+          },
+          runningMode: "IMAGE",
+          maxResults: 19
+        });
         
         loaderBar.style.width = '100%';
         loaderPercentage.innerText = '100%';
-        loaderStatus.innerText = 'Model sukses dimuat!';
+        loaderStatus.innerText = 'Sukses memuat model!';
         
         setTimeout(() => {
           loaderCard.classList.add('hidden');
           mainInterface.classList.remove('hidden');
           // Start webcam by default
           startWebcam();
-        }, 800);
+        }, 600);
       } catch (err) {
         console.error(err);
         loaderStatus.innerText = 'Gagal memuat model: ' + err.message;
@@ -357,6 +368,9 @@
     // Initialize model load
     initModel();
 
+    // Export tab switching to global scope for HTML onclick bindings
+    window.switchTab = switchTab;
+
     // ─────────────────────────────────────────────────────────
     // TAB MANAGEMENT
     // ─────────────────────────────────────────────────────────
@@ -481,39 +495,34 @@
     // CORE PREDICTION & INFERENCE
     // ─────────────────────────────────────────────────────────
     async function runPrediction(imageOrVideo) {
-      if (!model) return;
+      if (!imageClassifier) return;
       
       const startTime = performance.now();
       
-      // Perform client side inference
-      const predictions = tf.tidy(() => {
-        // Convert to tensor
-        let tensor = tf.browser.fromPixels(imageOrVideo);
-        // Resize to 224x224
-        tensor = tf.image.resizeBilinear(tensor, INPUT_SIZE);
-        // Normalize [0, 1]
-        tensor = tensor.toFloat().div(255.0);
-        // Expand dimensions to [1, 224, 224, 3]
-        tensor = tf.expandDims(tensor, 0);
-        
-        // Predict
-        const output = model.predict(tensor);
-        // Extract raw probabilities directly (no double softmax)
-        return output.dataSync();
-      });
-
+      // Perform inference using MediaPipe tasks-vision
+      const results = imageClassifier.classify(imageOrVideo);
+      
       const elapsed = (performance.now() - startTime).toFixed(1);
       inferenceTimeDisplay.innerText = `Inference: ${elapsed} ms`;
 
-      // Find top results
-      const results = Array.from(predictions).map((prob, idx) => ({
-        prob: prob,
-        class_name: CLASS_NAMES[idx],
-        display_name: DISPLAY_NAMES[class_name] || class_name,
-        index: idx
-      })).sort((a, b) => b.prob - a.prob);
-
-      renderResults(results);
+      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);
+      }
     }
 
     // Capture frame from live webcam
@@ -567,7 +576,8 @@
 
       // Alternative list
       listPredictions.innerHTML = '';
-      for (let i = 1; i < 5; i++) {
+      const limit = Math.min(5, results.length);
+      for (let i = 1; i < limit; i++) {
         const item = results[i];
         const itemPct = (item.prob * 100).toFixed(1);
         const row = document.createElement('div');
@@ -615,67 +625,68 @@
     }
 
     document.getElementById('btn-analyze').addEventListener('click', async () => {
-      if (!loadedImageElement || !model) return;
+      if (!loadedImageElement || !imageClassifier) return;
       
       const btn = document.getElementById('btn-analyze');
       btn.disabled = true;
       btn.innerText = "MENGHITUNG HEATMAP (1-2 Detik)...";
       
-      // Original prediction
-      const baseProbs = tf.tidy(() => {
-        let tensor = tf.browser.fromPixels(loadedImageElement).resizeBilinear(INPUT_SIZE).toFloat().div(255.0).expandDims(0);
-        return model.predict(tensor).dataSync();
-      });
-      
-      const topClass = Array.from(baseProbs).reduce((maxIdx, val, idx, arr) => val > arr[maxIdx] ? idx : maxIdx, 0);
-      const baseConf = baseProbs[topClass];
-      
+      // 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 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 gridSize = 8;
       const patchSize = 224 / gridSize;
       const sensitivityGrid = Array(gridSize).fill().map(() => Array(gridSize).fill(0));
       
-      // Convert image to a 224x224 Float32 Array
-      const originalTensor = tf.tidy(() => {
-        return tf.browser.fromPixels(loadedImageElement).resizeBilinear(INPUT_SIZE).toFloat().div(255.0);
-      });
-      const imgArray = await originalTensor.array();
-      originalTensor.dispose();
+      // We will perform grid occlusion directly on a helper canvas to get image fragments
+      const tempCanvas = document.createElement('canvas');
+      tempCanvas.width = 224;
+      tempCanvas.height = 224;
+      const tempCtx = tempCanvas.getContext('2d');
 
       let maxDrop = 0.0001;
 
       // Scan grid cells
       for (let i = 0; i < gridSize; i++) {
         for (let j = 0; j < gridSize; j++) {
-          // Create occluded image array
-          const occluded = JSON.parse(JSON.stringify(imgArray));
+          // Draw original image resized to 224x224
+          tempCtx.drawImage(loadedImageElement, 0, 0, 224, 224);
           
-          const yStart = Math.round(i * patchSize);
-          const yEnd = Math.round((i + 1) * patchSize);
-          const xStart = Math.round(j * patchSize);
-          const xEnd = Math.round((j + 1) * patchSize);
+          // Draw grey occlusion block
+          tempCtx.fillStyle = 'rgb(128, 128, 128)';
+          const yStart = i * patchSize;
+          const xStart = j * patchSize;
+          tempCtx.fillRect(xStart, yStart, patchSize, patchSize);
           
-          for (let y = yStart; y < yEnd; y++) {
-            for (let x = xStart; x < xEnd; x++) {
-              if (occluded[y] && occluded[y][x]) {
-                occluded[y][x] = [0.5, 0.5, 0.5]; // gray block
-              }
+          // 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;
             }
           }
 
-          // Evaluate occluded image
-          const occProbs = tf.tidy(() => {
-            const t = tf.tensor3d(occluded).expandDims(0);
-            return model.predict(t).dataSync();
-          });
-
           // Drop in target class confidence
-          const drop = Math.max(0, baseConf - occProbs[topClass]);
+          const drop = Math.max(0, baseConf - occConf);
           sensitivityGrid[i][j] = drop;
           if (drop > maxDrop) maxDrop = drop;
         }
       }
 
-      // Draw Heatmap (WASM Jet-colormap overlay)
+      // Draw Heatmap (Jet-colormap overlay)
       heatmapCanvas.width = 224;
       heatmapCanvas.height = 224;
       overlayCanvas.width = 224;
@@ -703,7 +714,7 @@
           ctxH.fillStyle = `rgb(${r}, ${g}, ${b})`;
           ctxH.fillRect(j * cellW, i * cellH, cellW, cellH);
 
-          // Overlay Canvas (Heatmap with 0.5 opacity overlayed)
+          // Overlay Canvas (Heatmap overlayed)
           ctxO.fillStyle = `rgba(${r}, ${g}, ${b}, 0.45)`;
           ctxO.fillRect(j * cellW, i * cellH, cellW, cellH);
         }