Hugging Face's logo

Spaces:
00Boobs00
/
omniloop-ai
Running

App Files Community
omniloop-ai
File size: 7,599 Bytes 
3bcb678
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<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>