Hugging Face's logo

Spaces:
MicroHealth
/
MegaMinds
Running

App Files Community
bluenevus commited on
Commit
add8d49
·
verified ·
1 Parent(s): 39520d0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +327 -19
index.html CHANGED
@@ -1,19 +1,327 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Meeting Simulator</title>
7
+ <base target="_self">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/@preline/[email protected]/dist/preline.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ @keyframes pulse {
13
+ 0%, 100% { opacity: 1; }
14
+ 50% { opacity: 0.5; }
15
+ }
16
+ .speaking {
17
+ animation: pulse 1s infinite;
18
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
19
+ }
20
+ .chat-message {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .chat-message:hover {
24
+ background-color: rgba(243, 244, 246, 0.5);
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
29
+ <div class="flex flex-col h-screen">
30
+ <!-- Header -->
31
+ <header class="bg-white dark:bg-gray-800 shadow-sm py-3 px-6 flex justify-between items-center">
32
+ <div class="flex items-center space-x-4">
33
+ <h1 class="text-xl font-bold">AI Meeting Simulator</h1>
34
+ <span class="text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded-full">Meeting in progress</span>
35
+ </div>
36
+ <div class="flex items-center space-x-4">
37
+ <button id="downloadBtn" class="flex items-center space-x-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
38
+ <i class="fas fa-download"></i>
39
+ <span>Download Minutes</span>
40
+ </button>
41
+ <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
42
+ <i class="fas fa-cog"></i>
43
+ </button>
44
+ </div>
45
+ </header>
46
+
47
+ <!-- Main Content -->
48
+ <div class="flex flex-1 overflow-hidden">
49
+ <!-- Video Grid -->
50
+ <div class="flex-1 p-4 overflow-y-auto">
51
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
52
+ <!-- AI Participants will be inserted here -->
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Chat Panel -->
57
+ <div class="w-80 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex flex-col">
58
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
59
+ <h2 class="font-semibold text-lg">Meeting Chat</h2>
60
+ </div>
61
+ <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
62
+ <!-- Chat messages will be inserted here -->
63
+ </div>
64
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700">
65
+ <div class="flex space-x-2">
66
+ <input id="messageInput" type="text" placeholder="Type a message..."
67
+ class="flex-1 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
68
+ <button id="sendBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
69
+ <i class="fas fa-paper-plane"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <script>
78
+ // AI Participants Data
79
+ const participants = [
80
+ {
81
+ id: 1,
82
+ name: "Dr. Veronica Vetter",
83
+ title: "AI Research Scientist",
84
+ avatar: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80",
85
+ responses: [
86
+ "From my research, I've found that the optimal approach would be to implement a multi-layered neural network.",
87
+ "The data suggests we should consider alternative methodologies to improve accuracy.",
88
+ "Have we considered the ethical implications of this approach?"
89
+ ]
90
+ },
91
+ {
92
+ id: 2,
93
+ name: "Simple Sam",
94
+ title: "AI Assistant",
95
+ avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80",
96
+ responses: [
97
+ "I think we should keep it simple and straightforward.",
98
+ "Why complicate things when a basic solution would work?",
99
+ "Let me break this down into simpler terms for everyone."
100
+ ]
101
+ },
102
+ {
103
+ id: 3,
104
+ name: "Dr. Evelyn Doubt",
105
+ title: "AI Ethicist",
106
+ avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80",
107
+ responses: [
108
+ "I'm not entirely convinced this is the right path forward.",
109
+ "We need to consider the potential negative consequences of this approach.",
110
+ "Has anyone thought about the long-term implications of this decision?"
111
+ ]
112
+ },
113
+ {
114
+ id: 4,
115
+ name: "Optimistic Olivia",
116
+ title: "AI Strategist",
117
+ avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80",
118
+ responses: [
119
+ "This is going to be amazing! I can already see the positive impact.",
120
+ "I'm so excited about the possibilities this opens up for us!",
121
+ "Every challenge is just an opportunity in disguise."
122
+ ]
123
+ },
124
+ {
125
+ id: 5,
126
+ name: "Technical Tom",
127
+ title: "AI Engineer",
128
+ avatar: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80",
129
+ responses: [
130
+ "Let me explain the technical details behind this implementation.",
131
+ "The API documentation suggests we should use the following parameters...",
132
+ "I've identified a potential performance bottleneck we should address."
133
+ ]
134
+ }
135
+ ];
136
+
137
+ // Initialize the meeting
138
+ document.addEventListener('DOMContentLoaded', function() {
139
+ const videoGrid = document.querySelector('.grid');
140
+ const chatMessages = document.getElementById('chatMessages');
141
+ const messageInput = document.getElementById('messageInput');
142
+ const sendBtn = document.getElementById('sendBtn');
143
+ const downloadBtn = document.getElementById('downloadBtn');
144
+
145
+ let meetingTranscript = [];
146
+ let currentSpeaker = null;
147
+ let speechTimeout;
148
+
149
+ // Render participants
150
+ participants.forEach(participant => {
151
+ const participantEl = document.createElement('div');
152
+ participantEl.className = 'bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden flex flex-col';
153
+ participantEl.innerHTML = `
154
+ <div class="relative pt-[75%] bg-gray-200 dark:bg-gray-700">
155
+ <img src="${participant.avatar}" alt="${participant.name}"
156
+ class="absolute top-0 left-0 w-full h-full object-cover">
157
+ </div>
158
+ <div class="p-3">
159
+ <h3 class="font-semibold">${participant.name}</h3>
160
+ <p class="text-sm text-gray-500 dark:text-gray-400">${participant.title}</p>
161
+ </div>
162
+ `;
163
+ videoGrid.appendChild(participantEl);
164
+ });
165
+
166
+ // Add welcome messages
167
+ setTimeout(() => {
168
+ addSystemMessage("Meeting started. All AI participants have joined.");
169
+
170
+ participants.forEach((participant, index) => {
171
+ setTimeout(() => {
172
+ const message = participant.responses[0];
173
+ addParticipantMessage(participant, message);
174
+ }, (index + 1) * 1500);
175
+ });
176
+ }, 1000);
177
+
178
+ // Send message function
179
+ function sendMessage() {
180
+ const message = messageInput.value.trim();
181
+ if (message) {
182
+ addUserMessage(message);
183
+ messageInput.value = '';
184
+
185
+ // Simulate AI responses
186
+ setTimeout(() => {
187
+ const randomParticipant = participants[Math.floor(Math.random() * participants.length)];
188
+ const randomResponse = randomParticipant.responses[Math.floor(Math.random() * randomParticipant.responses.length)];
189
+ addParticipantMessage(randomParticipant, randomResponse);
190
+ }, 1000 + Math.random() * 2000);
191
+ }
192
+ }
193
+
194
+ // Add user message to chat
195
+ function addUserMessage(message) {
196
+ const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
197
+ const messageEl = document.createElement('div');
198
+ messageEl.className = 'chat-message flex justify-end';
199
+ messageEl.innerHTML = `
200
+ <div class="max-w-xs md:max-w-md bg-blue-600 text-white rounded-lg p-3">
201
+ <p>${message}</p>
202
+ <p class="text-xs text-blue-200 text-right mt-1">${timestamp}</p>
203
+ </div>
204
+ `;
205
+ chatMessages.appendChild(messageEl);
206
+ chatMessages.scrollTop = chatMessages.scrollHeight;
207
+
208
+ // Add to transcript
209
+ meetingTranscript.push({
210
+ speaker: "You",
211
+ message: message,
212
+ timestamp: new Date().toISOString()
213
+ });
214
+ }
215
+
216
+ // Add participant message to chat
217
+ function addParticipantMessage(participant, message) {
218
+ const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
219
+ const messageEl = document.createElement('div');
220
+ messageEl.className = 'chat-message';
221
+ messageEl.innerHTML = `
222
+ <div class="flex space-x-2">
223
+ <img src="${participant.avatar}" alt="${participant.name}" class="w-8 h-8 rounded-full object-cover">
224
+ <div>
225
+ <div class="font-semibold">${participant.name}</div>
226
+ <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-3 mt-1 max-w-xs md:max-w-md">
227
+ <p>${message}</p>
228
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">${timestamp}</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ `;
233
+ chatMessages.appendChild(messageEl);
234
+ chatMessages.scrollTop = chatMessages.scrollHeight;
235
+
236
+ // Add to transcript
237
+ meetingTranscript.push({
238
+ speaker: participant.name,
239
+ message: message,
240
+ timestamp: new Date().toISOString()
241
+ });
242
+
243
+ // Show speaking animation
244
+ highlightSpeaker(participant.id);
245
+ }
246
+
247
+ // Add system message to chat
248
+ function addSystemMessage(message) {
249
+ const messageEl = document.createElement('div');
250
+ messageEl.className = 'chat-message text-center';
251
+ messageEl.innerHTML = `
252
+ <div class="text-xs text-gray-500 dark:text-gray-400 italic">${message}</div>
253
+ `;
254
+ chatMessages.appendChild(messageEl);
255
+ chatMessages.scrollTop = chatMessages.scrollHeight;
256
+
257
+ // Add to transcript
258
+ meetingTranscript.push({
259
+ speaker: "System",
260
+ message: message,
261
+ timestamp: new Date().toISOString()
262
+ });
263
+ }
264
+
265
+ // Highlight the current speaker
266
+ function highlightSpeaker(participantId) {
267
+ // Clear previous speaker
268
+ if (currentSpeaker) {
269
+ const prevSpeakerEl = document.querySelector(`.grid > div:nth-child(${currentSpeaker})`);
270
+ if (prevSpeakerEl) {
271
+ prevSpeakerEl.classList.remove('speaking');
272
+ }
273
+ }
274
+
275
+ // Set new speaker
276
+ currentSpeaker = participantId;
277
+ const speakerEl = document.querySelector(`.grid > div:nth-child(${participantId})`);
278
+ if (speakerEl) {
279
+ speakerEl.classList.add('speaking');
280
+ }
281
+
282
+ // Clear animation after delay
283
+ clearTimeout(speechTimeout);
284
+ speechTimeout = setTimeout(() => {
285
+ if (speakerEl) {
286
+ speakerEl.classList.remove('speaking');
287
+ }
288
+ currentSpeaker = null;
289
+ }, 3000);
290
+ }
291
+
292
+ // Event listeners
293
+ sendBtn.addEventListener('click', sendMessage);
294
+ messageInput.addEventListener('keypress', function(e) {
295
+ if (e.key === 'Enter') {
296
+ sendMessage();
297
+ }
298
+ });
299
+
300
+ // Download meeting minutes
301
+ downloadBtn.addEventListener('click', function() {
302
+ let minutesContent = "AI Meeting Minutes\n\n";
303
+ minutesContent += "Date: " + new Date().toLocaleString() + "\n\n";
304
+ minutesContent += "Participants:\n";
305
+ participants.forEach(p => {
306
+ minutesContent += `- ${p.name} (${p.title})\n`;
307
+ });
308
+
309
+ minutesContent += "\nTranscript:\n";
310
+ meetingTranscript.forEach(entry => {
311
+ minutesContent += `[${new Date(entry.timestamp).toLocaleTimeString()}] ${entry.speaker}: ${entry.message}\n`;
312
+ });
313
+
314
+ const blob = new Blob([minutesContent], { type: 'text/plain' });
315
+ const url = URL.createObjectURL(blob);
316
+ const a = document.createElement('a');
317
+ a.href = url;
318
+ a.download = `meeting-minutes-${new Date().toISOString().split('T')[0]}.txt`;
319
+ document.body.appendChild(a);
320
+ a.click();
321
+ document.body.removeChild(a);
322
+ URL.revokeObjectURL(url);
323
+ });
324
+ });
325
+ </script>
326
+ </body>
327
+ </html>