Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neural Nexus - Real-Time Conversational AI</title> | |
| <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8b5cf6', | |
| secondary: '#06b6d4', | |
| accent: '#10b981', | |
| danger: '#ef4444', | |
| warning: '#f59e0b', | |
| info: '#3b82f6' | |
| }, | |
| animation: { | |
| 'pulse-ring': 'pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 3s ease-in-out infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'slide-up': 'slide-up 0.3s ease-out', | |
| 'slide-down': 'slide-down 0.3s ease-out' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-slate-950 text-slate-100 overflow-hidden"> | |
| <!-- Main Application Container --> | |
| <div class="flex flex-col h-screen relative"> | |
| <!-- Header Status Bar --> | |
| <header class="glass-panel border-b border-slate-700/50 px-6 py-3 flex items-center justify-between z-10"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-3 h-3 rounded-full bg-accent animate-pulse-ring"></div> | |
| <h1 class="text-lg font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> | |
| Neural Nexus | |
| </h1> | |
| <span class="text-xs text-slate-400">v2.5.1</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="clock" class="w-4 h-4 text-slate-400"></i> | |
| <span class="text-xs text-slate-300" id="session-timer">00:00:00</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="activity" class="w-4 h-4 text-success"></i> | |
| <span class="text-xs text-slate-300">Latency: <span id="latency-display">45ms</span></span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dual-Pane Layout --> | |
| <main class="flex-1 flex flex-col lg:flex-row relative"> | |
| <!-- Avatar Viewport (Top on mobile, Left on desktop) --> | |
| <section class="relative flex-1 flex items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden"> | |
| <!-- Animated Background --> | |
| <div class="absolute inset-0 opacity-30"> | |
| <canvas id="neural-network-canvas" class="w-full h-full"></canvas> | |
| </div> | |
| <!-- Avatar Container --> | |
| <div class="relative z-10 w-full max-w-2xl mx-auto p-4"> | |
| <!-- Status Indicator --> | |
| <div class="absolute top-4 left-4 z-20"> | |
| <status-indicator id="main-status"></status-indicator> | |
| </div> | |
| <!-- Avatar Renderer --> | |
| <avatar-renderer id="ai-avatar" class="block w-full h-full"></avatar-renderer> | |
| <!-- Audio Waveform Overlay --> | |
| <div class="absolute bottom-0 left-0 right-0 h-24"> | |
| <wave-visualizer id="agent-visualizer" color="#10b981"></wave-visualizer> | |
| </div> | |
| </div> | |
| <!-- Control Buttons --> | |
| <div class="absolute top-4 right-4 flex flex-col space-y-2"> | |
| <button class="glass-button w-10 h-10 rounded-lg flex items-center justify-center hover:scale-110 transition-transform" id="fullscreen-btn"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| <button class="glass-button w-10 h-10 rounded-lg flex items-center justify-center hover:scale-110 transition-transform" id="settings-btn"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Chat Transcript Panel (Bottom on mobile, Right on desktop) --> | |
| <section class="flex flex-col glass-panel border-t lg:border-t-0 lg:border-l border-slate-700/50 h-96 lg:h-auto lg:w-96"> | |
| <!-- Chat Header --> | |
| <div class="px-4 py-3 border-b border-slate-700/50 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="message-square" class="w-5 h-5 text-slate-400"></i> | |
| <h2 class="font-medium text-slate-200">Conversation</h2> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-slate-400 hover:text-slate-200 transition-colors" id="clear-chat"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-slate-400 hover:text-slate-200 transition-colors" id="export-chat"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Transcript Area --> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-4 transcript-scroll" id="transcript-container"> | |
| <!-- Welcome Message --> | |
| <div class="flex items-start space-x-3 animate-slide-up"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0"> | |
| <i data-feather="cpu" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="glass-message max-w-xs"> | |
| <p class="text-sm text-slate-300">Hello! I'm Neural Nexus, ready for real-time conversation. My voice latency is under 50ms. Try speaking or type a message below.</p> | |
| <span class="text-xs text-slate-400 block mt-2">12:34:56</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tool Status Bar --> | |
| <div class="px-4 py-2 border-t border-slate-700/50 flex items-center space-x-2" id="tool-status" style="display: none;"> | |
| <div class="w-2 h-2 rounded-full bg-warning animate-pulse"></div> | |
| <span class="text-xs text-slate-400" id="tool-status-text">Processing PDF document...</span> | |
| <div class="w-4 h-4 border-2 border-slate-600 border-t-warning rounded-full animate-spin ml-auto"></div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="p-4 border-t border-slate-700/50"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex-1 relative"> | |
| <input | |
| type="text" | |
| id="message-input" | |
| placeholder="Type message or use voice..." | |
| class="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-sm text-slate-200 placeholder-slate-400 focus:outline-none focus:border-primary transition-colors" | |
| /> | |
| <!-- User Waveform --> | |
| <wave-visualizer | |
| id="user-visualizer" | |
| color="#3b82f6" | |
| class="absolute -top-8 left-0 right-0 h-6 opacity-0 transition-opacity duration-300" | |
| ></wave-visualizer> | |
| </div> | |
| <button | |
| id="send-btn" | |
| class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed" | |
| disabled | |
| > | |
| <i data-feather="send" class="w-5 h-5 text-white"></i> | |
| </button> | |
| <button | |
| id="voice-btn" | |
| class="w-12 h-12 bg-slate-800 border border-slate-600 rounded-lg flex items-center justify-center hover:bg-slate-700 transition-colors" | |
| > | |
| <i data-feather="mic" class="w-5 h-5 text-slate-400"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Floating Action Buttons --> | |
| <div class="fixed bottom-6 right-6 flex flex-col space-y-3 z-50"> | |
| <button class="fab-btn bg-info" id="pdf-upload-btn" title="Upload PDF"> | |
| <i data-feather="file-text" class="w-5 h-5"></i> | |
| </button> | |
| <button class="fab-btn bg-warning" id="web-search-btn" title="Enable Web Search"> | |
| <i data-feather="search" class="w-5 h-5"></i> | |
| </button> | |
| <button class="fab-btn bg-accent" id="connect-twitter-btn" title="Connect to Twitter Spaces"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Hidden File Input --> | |
| <input type="file" id="pdf-file-input" accept=".pdf" class="hidden" /> | |
| <!-- Settings Modal --> | |
| <div id="settings-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden items-center justify-center z-50"> | |
| <div class="glass-panel rounded-2xl p-6 w-full max-w-md mx-4"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-xl font-semibold">Settings</h3> | |
| <button id="close-settings" class="text-slate-400 hover:text-slate-200"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2">Voice Provider</label> | |
| <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm"> | |
| <option>ElevenLabs Turbo v2.5</option> | |
| <option>Cartesia Sonic</option> | |
| <option>PlayHT 3.0-mini</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-slate-300 mb-2">Response Latency Target</label> | |
| <input type="range" min="50" max="200" value="50" class="w-full"> | |
| <div class="flex justify-between text-xs text-slate-400 mt-1"> | |
| <span>50ms</span> | |
| <span>200ms</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm text-slate-300">Enable Avatar Lip-Sync</span> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Component Scripts --> | |
| <script src="components/status-indicator.js"></script> | |
| <script src="components/wave-visualizer.js"></script> | |
| <script src="components/avatar-renderer.js"></script> | |
| <!-- Main Scripts --> | |
| <script src="script.js"></script> | |
| <!-- Initialize Feather Icons --> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |