Spaces:
Running
Running
File size: 13,283 Bytes
1b21e08 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 | <!DOCTYPE html>
<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> |