Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Voice Lab - OmniLoop AI</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌀</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| ai: { | |
| green: '#10b981', | |
| greenGlow: '#34d399', | |
| orange: '#f97316', | |
| orangeGlow: '#fb923c', | |
| dark: '#0f172a', | |
| darker: '#020617', | |
| surface: '#1e293b' | |
| } | |
| }, | |
| animation: { | |
| 'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { boxShadow: '0 0 20px rgba(16, 185, 129, 0.3)' }, | |
| '100%': { boxShadow: '0 0 40px rgba(16, 185, 129, 0.6)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-ai-darker text-slate-200 font-sans antialiased overflow-hidden selection:bg-ai-green selection:text-black"> | |
| <div class="flex h-screen w-full"> | |
| <nav-sidebar></nav-sidebar> | |
| <main class="flex-1 flex flex-col h-full relative overflow-hidden"> | |
| <header class="h-16 border-b border-slate-800 flex items-center justify-between px-6 bg-ai-dark/80 backdrop-blur-md z-10"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-2 h-2 rounded-full bg-cyan-400 animate-pulse shadow-[0_0_10px_#22d3ee]"></div> | |
| <h2 class="text-xl font-bold tracking-wider text-white">VOICE <span class="text-cyan-400">INTERFACE</span></h2> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div id="system-clock" class="font-mono text-sm text-slate-400">00:00:00</div> | |
| <button id="clear-chat" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-sm rounded transition-colors"> | |
| Clear Chat | |
| </button> | |
| </div> | |
| </header> | |
| <div id="content-area" class="flex-1 overflow-y-auto p-6 scroll-smooth"> | |
| <section class="h-full flex flex-col space-y-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white mb-1">Neural Voice Interface</h1> | |
| <p class="text-slate-400">Speak with OmniLoop AI using natural language. Click the orb to begin.</p> | |
| </div> | |
| <div class="flex items-center gap-2 text-sm"> | |
| <span class="text-slate-400">Voice Model:</span> | |
| <span class="text-cyan-400 font-mono">Synapse-v4</span> | |
| </div> | |
| </div> | |
| <!-- Voice Orb & Visualizer --> | |
| <div class="flex-1 flex items-center justify-center relative"> | |
| <!-- Background Ring --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-96 h-96 rounded-full border border-slate-800 animate-[spin_30s_linear_infinite]"></div> | |
| <div class="absolute w-80 h-80 rounded-full border border-slate-800/50 animate-[spin_20s_linear_infinite_reverse]"></div> | |
| <div class="absolute w-64 h-64 rounded-full border border-slate-800/30 animate-[spin_15s_linear_infinite]"></div> | |
| </div> | |
| <!-- Voice Orb Button --> | |
| <button id="voice-orb" class="relative w-48 h-48 rounded-full bg-gradient-to-br from-ai-green/20 to-cyan-500/20 border-2 border-ai-green/50 hover:border-ai-green transition-all duration-300 flex items-center justify-center group focus:outline-none"> | |
| <div id="orb-inner" class="w-36 h-36 rounded-full bg-gradient-to-br from-ai-green/40 to-cyan-500/40 transition-all duration-300 flex items-center justify-center"> | |
| <div id="orb-core" class="w-24 h-24 rounded-full bg-gradient-to-br from-ai-green to-cyan-500 shadow-lg shadow-ai-green/50 transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="mic" class="w-10 h-10 text-white"></i> | |
| </div> | |
| </div> | |
| <div id="ripple-container" class="absolute inset-0 rounded-full overflow-hidden pointer-events-none"></div> | |
| </button> | |
| </div> | |
| <!-- Status Indicator --> | |
| <div class="text-center"> | |
| <p id="voice-status" class="text-xl font-medium text-slate-400">Click orb to start conversation</p> | |
| <p id="listening-indicator" class="text-sm text-ai-orange mt-2 hidden"> | |
| <i data-feather="activity" class="w-4 h-4 inline animate-pulse"></i> | |
| Listening... | |
| </p> | |
| <p id="speaking-indicator" class="text-sm text-cyan-400 mt-2 hidden"> | |
| <i data-feather="volume-2" class="w-4 h-4 inline animate-pulse"></i> | |
| OmniLoop is speaking... | |
| </p> | |
| </div> | |
| <!-- Transcript Display --> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6 max-w-3xl mx-auto w-full"> | |
| <h3 class="text-sm font-bold text-slate-400 mb-3 flex items-center gap-2"> | |
| <i data-feather="message-square" class="w-4 h-4"></i> Conversation Log | |
| </h3> | |
| <div id="conversation-container" class="space-y-4 max-h-64 overflow-y-auto pr-2"> | |
| <div class="text-center text-slate-500 text-sm py-8"> | |
| Your conversation with OmniLoop will appear here... | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Text Input Fallback --> | |
| <div class="max-w-3xl mx-auto w-full"> | |
| <div class="flex gap-3"> | |
| <input type="text" id="text-input" placeholder="Or type your message here..." class="flex-1 bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-400 focus:outline-none focus:border-ai-green transition-colors"> | |
| <button id="send-button" class="px-6 py-3 bg-ai-green hover:bg-ai-greenGlow text-black font-bold rounded-lg transition-all flex items-center gap-2"> | |
| <i data-feather="send" class="w-4 h-4"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/voice-assistant.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |