Spaces:
Running
Running
File size: 3,646 Bytes
f52dfb4 da6d4a3 7e0de30 da6d4a3 553afd6 da6d4a3 cd7b2c0 6a27c33 f52dfb4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html>
<html lang="en">
<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 = `> ${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> |