Update public/index.html

public/index.html

@@ -37,8 +37,71 @@
     </footer>
   </div>
 
-  <!-- MediaPipe Tasks Vision – using correct CDN -->
-  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm/vision_bundle.js" crossorigin="anonymous">
+  <!-- MediaPipe Tasks Vision – using multiple CDN sources -->
+  <script>
+    // This script tries multiple CDN sources until one works
+    (function loadMediaPipe() {
+      const cdnUrls = [
+        'https://cdnjs.cloudflare.com/ajax/libs/mediapipe/0.10.8/vision_bundle.js',
+        'https://unpkg.com/@mediapipe/tasks-vision@0.10.8/wasm/vision_bundle.js',
+        'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.8/wasm/vision_bundle.js'
+      ];
+      
+      let index = 0;
+      
+      function tryLoad() {
+        if (index >= cdnUrls.length) {
+          // All CDNs failed – show error and try loading from local
+          console.error('All MediaPipe CDNs failed');
+          document.getElementById('status').textContent = '⚠️ CDN failed. Trying local...';
+          // Try loading from the Space itself (if you host the file)
+          const localScript = document.createElement('script');
+          localScript.src = '/vision_bundle.js';
+          localScript.onerror = () => {
+            document.getElementById('status').textContent = '❌ CDN load failed. Please refresh.';
+          };
+          localScript.onload = () => {
+            document.getElementById('status').textContent = '✅ Local MediaPipe loaded';
+          };
+          document.head.appendChild(localScript);
+          return;
+        }
+        
+        const url = cdnUrls[index];
+        console.log(`Loading MediaPipe from: ${url}`);
+        
+        const script = document.createElement('script');
+        script.src = url;
+        script.crossOrigin = 'anonymous';
+        script.onload = () => {
+          // Check if FilesetResolver is defined after a short delay
+          setTimeout(() => {
+            if (typeof FilesetResolver !== 'undefined') {
+              console.log('✅ MediaPipe loaded successfully from:', url);
+              document.getElementById('status').textContent = '✅ MediaPipe ready';
+            } else {
+              console.warn('Script loaded but FilesetResolver not defined, trying next...');
+              index++;
+              tryLoad();
+            }
+          }, 1000);
+        };
+        script.onerror = () => {
+          console.warn('Failed to load from:', url);
+          index++;
+          tryLoad();
+        };
+        document.head.appendChild(script);
+      }
+      
+      // Check if already loaded
+      if (typeof FilesetResolver !== 'undefined') {
+        console.log('✅ MediaPipe already loaded');
+        return;
+      }
+      
+      tryLoad();
+    })();
   </script>
   
   <!-- Our application script -->