Hugging Face's logo

Spaces:
privateuserh
/
StreamAI
Running

App Files Community
1
privateuserh commited on
Commit
aa4345c
·
verified ·
1 Parent(s): 9de6051

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +32 -33
index.html CHANGED
@@ -4,53 +4,52 @@
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
  <link rel="stylesheet" href="styles/main.css">
11
  </head>
12
  <body class="bg-gray-100 font-sans">
13
 
14
- <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;">
15
- <h3 style="margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid #444;">Debug Console</h3>
16
- <div id="debug-log"></div>
17
- </div>
18
-
19
  <header class="gradient-bg text-white shadow-lg">
20
- <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>
21
- </header>
 
 
 
22
  <section class="py-12 bg-white">
23
  <div class="container mx-auto px-4">
24
- <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
25
- <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages"></div>
 
 
 
26
  <div class="border-t border-gray-200 p-4 bg-white">
27
- <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full py-3 px-4">
28
- <button id="send-btn" class="ml-3 w-12 h-12 rounded-full bg-indigo-600 text-white">Send</button>
 
 
29
  </div>
30
  </div>
31
  </div>
32
  </section>
33
- <div class="production-button" id="production-button">
34
- <i class="fas fa-video"></i>
35
- </div>
36
- <script type="module">
37
- const logContainer = document.getElementById('debug-log');
38
- function logToScreen(message) {
39
- if (logContainer) {
40
- const div = document.createElement('div');
41
- div.textContent = `> ${message}`;
42
- logContainer.appendChild(div);
43
- }
44
- }
45
 
46
- try {
47
- // Import the app.js module and get its exports
48
- const app = await import('./scripts/app.js');
49
- // Now, call the exported function to run the application
50
- app.initializeApp();
51
- } catch (error) {
52
- logToScreen(`CRITICAL ERROR: Could not execute app.js. Error: ${error.stack}`);
53
- }
54
- </script>
 
 
 
 
 
 
 
 
 
55
  </body>
56
  </html>
 
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
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <link rel="stylesheet" href="styles/main.css">
10
  </head>
11
  <body class="bg-gray-100 font-sans">
12
 
 
 
 
 
 
13
  <header class="gradient-bg text-white shadow-lg">
14
+ </header>
15
+
16
+ <section class="gradient-bg text-white py-16">
17
+ </section>
18
+
19
  <section class="py-12 bg-white">
20
  <div class="container mx-auto px-4">
21
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Your Personal Streaming Assistant</h2>
22
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
23
+ <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages">
24
+ <div class="chat-bubble ai-bubble p-4 w-3/4"><p>Hi there! What are you in the mood for?</p></div>
25
+ </div>
26
  <div class="border-t border-gray-200 p-4 bg-white">
27
+ <div class="flex items-center">
28
+ <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border-gray-300 rounded-full py-3 px-4">
29
+ <button id="send-btn" class="ml-3 w-12 h-12 rounded-full bg-indigo-600 text-white">Send</button>
30
+ </div>
31
  </div>
32
  </div>
33
  </div>
34
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
35
 
36
+ <section class="py-12 bg-gray-50">
37
+ <div class="container mx-auto px-4">
38
+ <h2 class="text-3xl font-bold text-center mb-6 text-gray-800">Recommended For You</h2>
39
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container">
40
+ </div>
41
+ </div>
42
+ </section>
43
+
44
+ <div class="production-button" id="production-button"><i class="fas fa-video"></i></div>
45
+ <div class="production-panel" id="production-panel">
46
+ <h3 class="font-bold text-lg mb-4">Create Video Clips</h3>
47
+ <button id="start-recording" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm">Start Recording</button>
48
+ </div>
49
+
50
+ <footer class="bg-gray-800 text-white py-12">
51
+ </footer>
52
+
53
+ <script src="scripts/app.js" type="module"></script>
54
  </body>
55
  </html>