Spaces:

MicroHealth
/

MegaMinds

Running

App Files Files Community

bluenevus commited on Jun 24, 2025

Commit

add8d49

verified ·

1 Parent(s): 39520d0

Update index.html

Browse files

Files changed (1) hide show

index.html +327 -19

index.html CHANGED Viewed

@@ -1,19 +1,327 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Meeting Simulator</title>
+    <base target="_self">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@preline/preline@2.0.0/dist/preline.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .speaking {
+            animation: pulse 1s infinite;
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
+        }
+        .chat-message {
+            transition: all 0.3s ease;
+        }
+        .chat-message:hover {
+            background-color: rgba(243, 244, 246, 0.5);
+        }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <div class="flex flex-col h-screen">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm py-3 px-6 flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                <h1 class="text-xl font-bold">AI Meeting Simulator</h1>
+                <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>
+            </div>
+            <div class="flex items-center space-x-4">
+                <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">
+                    <i class="fas fa-download"></i>
+                    <span>Download Minutes</span>
+                </button>
+                <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Video Grid -->
+            <div class="flex-1 p-4 overflow-y-auto">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- AI Participants will be inserted here -->
+                </div>
+            </div>
+            <!-- Chat Panel -->
+            <div class="w-80 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex flex-col">
+                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                    <h2 class="font-semibold text-lg">Meeting Chat</h2>
+                </div>
+                <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
+                    <!-- Chat messages will be inserted here -->
+                </div>
+                <div class="p-4 border-t border-gray-200 dark:border-gray-700">
+                    <div class="flex space-x-2">
+                        <input id="messageInput" type="text" placeholder="Type a message..."
+                            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">
+                        <button id="sendBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // AI Participants Data
+        const participants = [
+            {
+                id: 1,
+                name: "Dr. Veronica Vetter",
+                title: "AI Research Scientist",
+                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",
+                responses: [
+                    "From my research, I've found that the optimal approach would be to implement a multi-layered neural network.",
+                    "The data suggests we should consider alternative methodologies to improve accuracy.",
+                    "Have we considered the ethical implications of this approach?"
+                ]
+            },
+            {
+                id: 2,
+                name: "Simple Sam",
+                title: "AI Assistant",
+                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",
+                responses: [
+                    "I think we should keep it simple and straightforward.",
+                    "Why complicate things when a basic solution would work?",
+                    "Let me break this down into simpler terms for everyone."
+                ]
+            },
+            {
+                id: 3,
+                name: "Dr. Evelyn Doubt",
+                title: "AI Ethicist",
+                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",
+                responses: [
+                    "I'm not entirely convinced this is the right path forward.",
+                    "We need to consider the potential negative consequences of this approach.",
+                    "Has anyone thought about the long-term implications of this decision?"
+                ]
+            },
+            {
+                id: 4,
+                name: "Optimistic Olivia",
+                title: "AI Strategist",
+                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",
+                responses: [
+                    "This is going to be amazing! I can already see the positive impact.",
+                    "I'm so excited about the possibilities this opens up for us!",
+                    "Every challenge is just an opportunity in disguise."
+                ]
+            },
+            {
+                id: 5,
+                name: "Technical Tom",
+                title: "AI Engineer",
+                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",
+                responses: [
+                    "Let me explain the technical details behind this implementation.",
+                    "The API documentation suggests we should use the following parameters...",
+                    "I've identified a potential performance bottleneck we should address."
+                ]
+            }
+        ];
+        // Initialize the meeting
+        document.addEventListener('DOMContentLoaded', function() {
+            const videoGrid = document.querySelector('.grid');
+            const chatMessages = document.getElementById('chatMessages');
+            const messageInput = document.getElementById('messageInput');
+            const sendBtn = document.getElementById('sendBtn');
+            const downloadBtn = document.getElementById('downloadBtn');
+            let meetingTranscript = [];
+            let currentSpeaker = null;
+            let speechTimeout;
+            // Render participants
+            participants.forEach(participant => {
+                const participantEl = document.createElement('div');
+                participantEl.className = 'bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden flex flex-col';
+                participantEl.innerHTML = `
+                    <div class="relative pt-[75%] bg-gray-200 dark:bg-gray-700">
+                        <img src="${participant.avatar}" alt="${participant.name}"
+                            class="absolute top-0 left-0 w-full h-full object-cover">
+                    </div>
+                    <div class="p-3">
+                        <h3 class="font-semibold">${participant.name}</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">${participant.title}</p>
+                    </div>
+                `;
+                videoGrid.appendChild(participantEl);
+            });
+            // Add welcome messages
+            setTimeout(() => {
+                addSystemMessage("Meeting started. All AI participants have joined.");
+                participants.forEach((participant, index) => {
+                    setTimeout(() => {
+                        const message = participant.responses[0];
+                        addParticipantMessage(participant, message);
+                    }, (index + 1) * 1500);
+                });
+            }, 1000);
+            // Send message function
+            function sendMessage() {
+                const message = messageInput.value.trim();
+                if (message) {
+                    addUserMessage(message);
+                    messageInput.value = '';
+                    // Simulate AI responses
+                    setTimeout(() => {
+                        const randomParticipant = participants[Math.floor(Math.random() * participants.length)];
+                        const randomResponse = randomParticipant.responses[Math.floor(Math.random() * randomParticipant.responses.length)];
+                        addParticipantMessage(randomParticipant, randomResponse);
+                    }, 1000 + Math.random() * 2000);
+                }
+            }
+            // Add user message to chat
+            function addUserMessage(message) {
+                const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                const messageEl = document.createElement('div');
+                messageEl.className = 'chat-message flex justify-end';
+                messageEl.innerHTML = `
+                    <div class="max-w-xs md:max-w-md bg-blue-600 text-white rounded-lg p-3">
+                        <p>${message}</p>
+                        <p class="text-xs text-blue-200 text-right mt-1">${timestamp}</p>
+                    </div>
+                `;
+                chatMessages.appendChild(messageEl);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Add to transcript
+                meetingTranscript.push({
+                    speaker: "You",
+                    message: message,
+                    timestamp: new Date().toISOString()
+                });
+            }
+            // Add participant message to chat
+            function addParticipantMessage(participant, message) {
+                const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                const messageEl = document.createElement('div');
+                messageEl.className = 'chat-message';
+                messageEl.innerHTML = `
+                    <div class="flex space-x-2">
+                        <img src="${participant.avatar}" alt="${participant.name}" class="w-8 h-8 rounded-full object-cover">
+                        <div>
+                            <div class="font-semibold">${participant.name}</div>
+                            <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-3 mt-1 max-w-xs md:max-w-md">
+                                <p>${message}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">${timestamp}</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                chatMessages.appendChild(messageEl);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Add to transcript
+                meetingTranscript.push({
+                    speaker: participant.name,
+                    message: message,
+                    timestamp: new Date().toISOString()
+                });
+                // Show speaking animation
+                highlightSpeaker(participant.id);
+            }
+            // Add system message to chat
+            function addSystemMessage(message) {
+                const messageEl = document.createElement('div');
+                messageEl.className = 'chat-message text-center';
+                messageEl.innerHTML = `
+                    <div class="text-xs text-gray-500 dark:text-gray-400 italic">${message}</div>
+                `;
+                chatMessages.appendChild(messageEl);
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Add to transcript
+                meetingTranscript.push({
+                    speaker: "System",
+                    message: message,
+                    timestamp: new Date().toISOString()
+                });
+            }
+            // Highlight the current speaker
+            function highlightSpeaker(participantId) {
+                // Clear previous speaker
+                if (currentSpeaker) {
+                    const prevSpeakerEl = document.querySelector(`.grid > div:nth-child(${currentSpeaker})`);
+                    if (prevSpeakerEl) {
+                        prevSpeakerEl.classList.remove('speaking');
+                    }
+                }
+                // Set new speaker
+                currentSpeaker = participantId;
+                const speakerEl = document.querySelector(`.grid > div:nth-child(${participantId})`);
+                if (speakerEl) {
+                    speakerEl.classList.add('speaking');
+                }
+                // Clear animation after delay
+                clearTimeout(speechTimeout);
+                speechTimeout = setTimeout(() => {
+                    if (speakerEl) {
+                        speakerEl.classList.remove('speaking');
+                    }
+                    currentSpeaker = null;
+                }, 3000);
+            }
+            // Event listeners
+            sendBtn.addEventListener('click', sendMessage);
+            messageInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    sendMessage();
+                }
+            });
+            // Download meeting minutes
+            downloadBtn.addEventListener('click', function() {
+                let minutesContent = "AI Meeting Minutes\n\n";
+                minutesContent += "Date: " + new Date().toLocaleString() + "\n\n";
+                minutesContent += "Participants:\n";
+                participants.forEach(p => {
+                    minutesContent += `- ${p.name} (${p.title})\n`;
+                });
+                minutesContent += "\nTranscript:\n";
+                meetingTranscript.forEach(entry => {
+                    minutesContent += `[${new Date(entry.timestamp).toLocaleTimeString()}] ${entry.speaker}: ${entry.message}\n`;
+                });
+                const blob = new Blob([minutesContent], { type: 'text/plain' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `meeting-minutes-${new Date().toISOString().split('T')[0]}.txt`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            });
+        });
+    </script>
+</body>
+</html>