Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Analytics - 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' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </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-ai-orange animate-pulse shadow-[0_0_10px_#f97316]"></div> | |
| <h2 class="text-xl font-bold tracking-wider text-white">ANALYTICS <span class="text-ai-orange">MODULE</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 class="p-2 hover:bg-slate-700 rounded transition-colors" onclick="document.dispatchEvent(new CustomEvent('toggle-command-palette'))"> | |
| <span class="text-xs text-slate-500 font-mono">Ctrl+K</span> | |
| </button> | |
| </div> | |
| </header> | |
| <div id="content-area" class="flex-1 overflow-y-auto p-6 scroll-smooth"> | |
| <section class="space-y-6"> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white mb-1">Performance Analytics</h1> | |
| <p class="text-slate-400">Real-time neural network metrics and system performance</p> | |
| </div> | |
| <div class="flex gap-2"> | |
| <select id="time-range" class="bg-slate-700 border border-slate-600 rounded px-3 py-2 text-sm"> | |
| <option value="1h">Last Hour</option> | |
| <option value="24h">Last 24 Hours</option> | |
| <option value="7d">Last 7 Days</option> | |
| <option value="30d">Last 30 Days</option> | |
| </select> | |
| <button class="px-4 py-2 bg-ai-green hover:bg-ai-greenGlow text-black font-bold text-sm rounded transition-all"> | |
| <i data-feather="download" class="w-4 h-4 inline"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Key Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <metric-card title="Total Requests" value="2.4M" icon="activity" color="text-ai-green" trend="+12.5%" desc="Today"></metric-card> | |
| <metric-card title="Avg Response" value="42ms" icon="clock" color="text-blue-400" trend="-5ms" desc="Latency"></metric-card> | |
| <metric-card title="Error Rate" value="0.02%" icon="alert-triangle" color="text-ai-orange" trend="-0.01%" desc="Errors"></metric-card> | |
| <metric-card title="Uptime" value="99.99%" icon="check-circle" color="text-purple-400" trend="+0.01%" desc="30 days"></metric-card> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <h3 class="text-lg font-bold text-white mb-4">Request Volume</h3> | |
| <chart-viz type="line" id="request-chart"></chart-viz> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <h3 class="text-lg font-bold text-white mb-4">Response Time Distribution</h3> | |
| <chart-viz type="bar" id="response-chart"></chart-viz> | |
| </div> | |
| </div> | |
| <!-- Data Table --> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold text-white">Recent Operations</h3> | |
| <input type="text" placeholder="Search operations..." class="bg-slate-700 border border-slate-600 rounded px-3 py-2 text-sm w-64"> | |
| </div> | |
| <data-table id="operations-table"></data-table> | |
| </div> | |
| <!-- Performance Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6 text-center"> | |
| <progress-ring value="85" color="#10b981"></progress-ring> | |
| <h4 class="text-white font-bold mt-4">CPU Usage</h4> | |
| <p class="text-slate-400 text-sm">8 cores active</p> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6 text-center"> | |
| <progress-ring value="62" color="#3b82f6"></progress-ring> | |
| <h4 class="text-white font-bold mt-4">Memory</h4> | |
| <p class="text-slate-400 text-sm">62.4 GB / 128 GB</p> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6 text-center"> | |
| <progress-ring value="45" color="#f97316"></progress-ring> | |
| <h4 class="text-white font-bold mt-4">GPU Utilization</h4> | |
| <p class="text-slate-400 text-sm">2x A100 detected</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/metric-card.js"></script> | |
| <script src="components/chart-viz.js"></script> | |
| <script src="components/data-table.js"></script> | |
| <script src="components/progress-ring.js"></script> | |
| <script src="components/command-palette.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |