Hugging Face's logo

Spaces:
privateuserh
/
StreamAI
Running

App Files Community
1
privateuserh commited on
Commit
cd7b2c0
·
verified ·
1 Parent(s): c564bcb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +15 -129
index.html CHANGED
@@ -3,138 +3,24 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>StreamAI - Personalized Streaming Recommendations</title>
7
 
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
10
 
11
- <link rel="stylesheet" href="styles/main.css">
12
-
13
  </head>
14
- <body class="bg-gray-100 font-sans">
15
- <body class="bg-gray-100 font-sans">
16
-
17
- <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;">
18
- <h3 style="margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid #444;">Debug Console</h3>
19
- <div id="debug-log"></div>
20
- </div>
21
- ```
22
-
23
- ### **Step 2: Add the Debugging Logic to `app.js`**
24
-
25
- Next, we need to tell your JavaScript to send messages and errors to this new on-screen console.
26
-
27
- 1. Open your `scripts/app.js` file.
28
- 2. **At the very top of the file**, paste the following code. This function will be our new logger.
29
-
30
- ```javascript
31
- // scripts/app.js
32
-
33
- // --- On-Screen Debugger ---
34
- function logToScreen(message) {
35
- const logContainer = document.getElementById('debug-log');
36
- if (logContainer) {
37
- // Convert non-string messages to a readable string format
38
- if (typeof message !== 'string') {
39
- message = JSON.stringify(message, null, 2);
40
- }
41
- logContainer.innerHTML += `<div>&gt; ${message}</div>`;
42
- // Auto-scroll to the bottom
43
- logContainer.parentElement.scrollTop = logContainer.parentElement.scrollHeight;
44
- }
45
- }
46
-
47
- // Redirect all console errors to our on-screen logger
48
- window.onerror = function(message, source, lineno, colno, error) {
49
- logToScreen(`ERROR: ${message} at ${source.split('/').pop()}:${lineno}`);
50
- return true; // Prevents the error from stopping script execution in some browsers
51
- };
52
- // --- End On-Screen Debugger ---
53
-
54
-
55
- // --- Module Imports ---
56
- import { initUI } from './ui.js';
57
- import { initChat } from './chat.js';
58
- import { initVideo } from './video.js';
59
-
60
- // --- Main App Initialization ---
61
- document.addEventListener('DOMContentLoaded', () => {
62
- logToScreen("DOM fully loaded. Initializing modules...");
63
 
64
- // Make the logger globally available so other modules can use it
65
- window.logToScreen = logToScreen;
66
-
67
- try {
68
- initUI();
69
- logToScreen("UI module initialized successfully.");
70
-
71
- initChat();
72
- logToscreen("Chat module initialized successfully.");
73
-
74
- initVideo();
75
- logToScreen("Video module initialized successfully.");
76
-
77
- } catch(e) {
78
- logToScreen(`A critical error occurred during initialization: ${e.message}`);
79
- }
80
-
81
- logToScreen("Application setup complete.");
82
- });
83
-
84
- <div id="notification" class="notification hidden">
85
- </div>
86
-
87
- <div class="production-button" id="production-button">
88
- <i class="fas fa-video"></i>
89
- <div class="recording-indicator hidden" id="recording-indicator"></div>
90
- </div>
91
-
92
- <div class="production-panel" id="production-panel">
93
- </div>
94
-
95
- <header class="gradient-bg text-white shadow-lg">
96
- <div class="container mx-auto px-4 py-6">
97
- <div class="flex justify-between items-center">
98
- <div class="flex items-center space-x-3">
99
- <i class="fas fa-stream text-3xl"></i>
100
- <h1 class="text-2xl font-bold">StreamAI</h1>
101
- </div>
102
- <nav class="hidden md:flex space-x-6">
103
- <a href="#" class="hover:text-indigo-200 transition">Home</a>
104
- <a href="#" class="hover:text-indigo-200 transition">Features</a>
105
- <a href="#" class="hover:text-indigo-200 transition">About</a>
106
- <a href="#" class="hover:text-indigo-200 transition">Contact</a>
107
- </nav>
108
- </div>
109
- </div>
110
- </header>
111
-
112
- <section class="py-12 bg-white">
113
- <div class="container mx-auto px-4">
114
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Your Personal Streaming Assistant</h2>
115
- <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
116
- <div class="bg-indigo-600 text-white p-4 flex items-center">
117
- </div>
118
- <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages">
119
- <div class="chat-bubble ai-bubble p-4 w-3/4">
120
- <p>Hi there! 👋 I'm your StreamAI assistant. What are you in the mood for today?</p>
121
- </div>
122
- </div>
123
- <div class="border-t border-gray-200 p-4 bg-white">
124
- <div class="flex items-center">
125
- <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">
126
- <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">
127
- <i class="fas fa-paper-plane"></i>
128
- </button>
129
- </div>
130
- </div>
131
- </div>
132
- </div>
133
- </section>
134
-
135
- <footer class="bg-gray-800 text-white py-12">
136
- </footer>
137
-
138
- <script src="scripts/app.js" type="module"></script>
139
  </body>
140
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>StreamAI - DEBUGGING</title>
7
 
8
+ <script>
9
+ alert("Step 1: The index.html file is loading!");
10
+ </script>
11
 
12
+ <link rel="stylesheet" href="styles/main.css" onerror="alert('ERROR: Could not find main.css! Check path.');">
 
13
  </head>
14
+
15
+ <body>
16
+ <h1>StreamAI Debugging Page</h1>
17
+ <p>This is a test to see if files are loading correctly.</p>
18
+ <p>Please report which alerts you see.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
 
20
+ <script
21
+ src="scripts/app.js"
22
+ type="module"
23
+ onerror="alert('Step 2 ERROR: Could not load app.js! Check the file path in the Hugging Face repo.');">
24
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  </body>
26
  </html>