Update index.html

index.html

@@ -84,24 +84,42 @@
     </div>
 
     <script>
-        // Auto-calculate the iframe URL based on current location
-        const currentUrl = window.location.href;
-        const baseUrl = currentUrl.split('/').slice(0, -1).join('/');
-        const iframe = document.querySelector('iframe');
-        
-        // Set iframe source to the Gradio app
-        // In Spaces, the Gradio app would be available at the same domain
-        iframe.src = window.location.href.replace('https://1hit.no/audio/suno/';
-        
-        // Or if the Gradio app is running on a different port (for local testing):
-        // iframe.src = 'http://localhost:7860';
-        
-        // Handle iframe loading messages
-        window.addEventListener('message', function(event) {
-            if (event.data && event.data.type === 'gradio_height') {
-                iframe.style.height = event.data.height + 'px';
-            }
-        });
-    </script>
+    // Get the current URL
+    const currentUrl = window.location.href;
+    const iframe = document.querySelector('iframe');
+    
+    // Option 1: If you want to load an external URL (your https://1hit.no/audio/suno/)
+    iframe.src = 'https://1hit.no/audio/suno/';
+    
+    // Option 2: If you want to load your Gradio app (running in the same Space)
+    // iframe.src = currentUrl; // This would load the current page in the iframe (might create a loop)
+    // iframe.src = currentUrl + 'app'; // Try this if Gradio is at /app endpoint
+    
+    // Option 3: If your Gradio app runs on a specific port within the Space
+    // iframe.src = 'https://huggingface.co/spaces/MySafeCode/RepurposedSunoCoverPlayer/app';
+    
+    // Handle iframe loading messages for dynamic height
+    window.addEventListener('message', function(event) {
+        if (event.data && event.data.type === 'gradio_height') {
+            iframe.style.height = event.data.height + 'px';
+        }
+    });
+    
+    // Add error handling
+    iframe.onload = function() {
+        console.log('Iframe loaded successfully');
+    };
+    
+    iframe.onerror = function() {
+        console.error('Failed to load iframe content');
+        // Show a fallback message
+        document.querySelector('.app-frame').innerHTML = 
+            '<div style="padding: 40px; text-align: center; color: #666;">' +
+            '<h3>⚠️ Content Failed to Load</h3>' +
+            '<p>The embedded application could not be loaded.</p>' +
+            '<p><a href="https://1hit.no/audio/suno/" target="_blank">Click here to open in a new tab</a></p>' +
+            '</div>';
+    };
+</script>
 </body>
 </html>