Spaces:

privateuserh
/

StreamAI

Running

App Files Files Community

privateuserh commited on Jun 13

Commit

da6d4a3

verified ·

1 Parent(s): cd7b2c0

Update index.html

Browse files

Files changed (1) hide show

index.html +66 -16

index.html CHANGED Viewed

@@ -3,24 +3,74 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>StreamAI - DEBUGGING</title>
-    <script>
-        alert("Step 1: The index.html file is loading!");
-    </script>
-    <link rel="stylesheet" href="styles/main.css" onerror="alert('ERROR: Could not find main.css! Check path.');">
 </head>
-<body>
-    <h1>StreamAI Debugging Page</h1>
-    <p>This is a test to see if files are loading correctly.</p>
-    <p>Please report which alerts you see.</p>
-    <script
-        src="scripts/app.js"
-        type="module"
-        onerror="alert('Step 2 ERROR: Could not load app.js! Check the file path in the Hugging Face repo.');">
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>StreamAI - Personalized Streaming Recommendations</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="styles/main.css">
 </head>
+<body class="bg-gray-100 font-sans">
+    <div id="debug-console" style="position: fixed; bottom: 0; left: 0; right: 0; height: 25%; background: rgba(0, 0, 0, 0.85); color: #fff; font-family: monospace; font-size: 14px; overflow-y: scroll; padding: 10px; z-index: 9999; border-top: 2px solid #ff5e62;">
+        <h3 style="margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid #444;">Debug Console</h3>
+        <div id="debug-log"></div>
+    </div>
+    <div id="notification" class="notification hidden">
+        </div>
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-stream text-3xl"></i>
+                    <h1 class="text-2xl font-bold">StreamAI</h1>
+                </div>
+            </div>
+        </div>
+    </header>
+    <section class="py-12 bg-white">
+        <div class="container mx-auto px-4">
+             <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
+                <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages"></div>
+                <div class="border-t border-gray-200 p-4 bg-white">
+                    <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full py-3 px-4">
+                    <button id="send-btn" class="ml-3 w-12 h-12 rounded-full bg-indigo-600 text-white">Send</button>
+                </div>
+            </div>
+        </div>
+    </section>
+     <div class="production-button" id="production-button">
+        <i class="fas fa-video"></i>
+    </div>
+    <script type="module">
+        // This code runs immediately. It defines our logger and then tries to load the main app.
+        const logContainer = document.getElementById('debug-log');
+        function logToScreen(message) {
+            if (logContainer) {
+                const div = document.createElement('div');
+                div.innerHTML = `&gt; ${message}`;
+                logContainer.appendChild(div);
+            }
+        }
+        logToScreen("HTML loaded. Attempting to import app.js...");
+        try {
+            // We dynamically import the module. This allows us to catch any errors during the import process.
+            const app = await import('./scripts/app.js');
+            logToScreen("SUCCESS: app.js and all its dependencies were imported successfully.");
+            logToScreen("If buttons still don't work, the error is inside the init() functions.");
+        } catch (error) {
+            // If there's any error loading app.js OR any file it imports (chat.js, video.js, etc.)
+            // it will be caught here.
+            logToScreen("-----------------------------------------");
+            logToScreen("CRITICAL ERROR FAILED TO LOAD JAVASCRIPT:");
+            logToScreen(error.toString());
+            logToScreen("-----------------------------------------");
+            logToScreen("This error means a file is missing, misspelled in an 'import' statement, or has a syntax error.");
+        }
     </script>
 </body>
 </html>