Spaces:
Running
Running
File size: 5,676 Bytes
f52dfb4 7e0de30 f52dfb4 7e0de30 553afd6 f52dfb4 cd8ef8b 68135e6 f52dfb4 68135e6 d80f8ab 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!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">
<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.8); color: white; 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>
```
### **Step 2: Add the Debugging Logic to `app.js`**
Next, we need to tell your JavaScript to send messages and errors to this new on-screen console.
1. Open your `scripts/app.js` file.
2. **At the very top of the file**, paste the following code. This function will be our new logger.
```javascript
// scripts/app.js
// --- On-Screen Debugger ---
function logToScreen(message) {
const logContainer = document.getElementById('debug-log');
if (logContainer) {
// Convert non-string messages to a readable string format
if (typeof message !== 'string') {
message = JSON.stringify(message, null, 2);
}
logContainer.innerHTML += `<div>> ${message}</div>`;
// Auto-scroll to the bottom
logContainer.parentElement.scrollTop = logContainer.parentElement.scrollHeight;
}
}
// Redirect all console errors to our on-screen logger
window.onerror = function(message, source, lineno, colno, error) {
logToScreen(`ERROR: ${message} at ${source.split('/').pop()}:${lineno}`);
return true; // Prevents the error from stopping script execution in some browsers
};
// --- End On-Screen Debugger ---
// --- Module Imports ---
import { initUI } from './ui.js';
import { initChat } from './chat.js';
import { initVideo } from './video.js';
// --- Main App Initialization ---
document.addEventListener('DOMContentLoaded', () => {
logToScreen("DOM fully loaded. Initializing modules...");
// Make the logger globally available so other modules can use it
window.logToScreen = logToScreen;
try {
initUI();
logToScreen("UI module initialized successfully.");
initChat();
logToscreen("Chat module initialized successfully.");
initVideo();
logToScreen("Video module initialized successfully.");
} catch(e) {
logToScreen(`A critical error occurred during initialization: ${e.message}`);
}
logToScreen("Application setup complete.");
});
<div id="notification" class="notification hidden">
</div>
<div class="production-button" id="production-button">
<i class="fas fa-video"></i>
<div class="recording-indicator hidden" id="recording-indicator"></div>
</div>
<div class="production-panel" id="production-panel">
</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>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-indigo-200 transition">Home</a>
<a href="#" class="hover:text-indigo-200 transition">Features</a>
<a href="#" class="hover:text-indigo-200 transition">About</a>
<a href="#" class="hover:text-indigo-200 transition">Contact</a>
</nav>
</div>
</div>
</header>
<section class="py-12 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Your Personal Streaming Assistant</h2>
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
<div class="bg-indigo-600 text-white p-4 flex items-center">
</div>
<div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages">
<div class="chat-bubble ai-bubble p-4 w-3/4">
<p>Hi there! 👋 I'm your StreamAI assistant. What are you in the mood for today?</p>
</div>
</div>
<div class="border-t border-gray-200 p-4 bg-white">
<div class="flex items-center">
<input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<button id="send-btn" class="ml-3 w-12 h-12 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 flex items-center justify-center transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 text-white py-12">
</footer>
<script src="scripts/app.js" type="module"></script>
</body>
</html> |