Spaces:
Running
Running
| <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> |