Hugging Face's logo

Spaces:
knicole
/
shooook
Running

App Files Community
knicole commited on
Commit
f43eef3
·
verified ·
1 Parent(s): a39ed18

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +275 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Shooook
3
- emoji: 🐠
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: shooook
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,275 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NexusAI - DevOps & System Administration Hub</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .terminal {
11
+ background-color: #1e293b;
12
+ font-family: 'Fira Code', monospace;
13
+ color: #e2e8f0;
14
+ }
15
+ .terminal-output::before {
16
+ content: "> ";
17
+ color: #38bdf8;
18
+ }
19
+ .status-indicator {
20
+ width: 10px;
21
+ height: 10px;
22
+ border-radius: 50%;
23
+ display: inline-block;
24
+ margin-right: 8px;
25
+ }
26
+ .ssh-active {
27
+ animation: pulse 2s infinite;
28
+ }
29
+ @keyframes pulse {
30
+ 0% { opacity: 1; }
31
+ 50% { opacity: 0.5; }
32
+ 100% { opacity: 1; }
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-slate-900 text-slate-100 min-h-screen">
37
+ <div class="flex flex-col min-h-screen">
38
+ <!-- Header -->
39
+ <header class="bg-slate-800 shadow-lg">
40
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
41
+ <div class="flex items-center space-x-3">
42
+ <div class="bg-cyan-500 p-2 rounded-lg">
43
+ <i class="fas fa-robot text-white text-xl"></i>
44
+ </div>
45
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">NexusAI</h1>
46
+ </div>
47
+ <div class="flex items-center space-x-4">
48
+ <div class="hidden md:flex items-center space-x-2">
49
+ <span class="status-indicator bg-green-500"></span>
50
+ <span>Backend Connected</span>
51
+ </div>
52
+ <button class="bg-slate-700 hover:bg-slate-600 px-4 py-2 rounded-lg transition">
53
+ <i class="fas fa-cog"></i>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </header>
58
+
59
+ <!-- Main Content -->
60
+ <main class="flex-1 container mx-auto px-4 py-8">
61
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
62
+ <!-- Sidebar -->
63
+ <aside class="lg:col-span-3 space-y-6">
64
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
65
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
66
+ <i class="fas fa-server mr-2 text-cyan-400"></i> Managed Systems
67
+ </h2>
68
+ <div class="space-y-3">
69
+ <div class="bg-slate-700 p-3 rounded-lg flex items-center cursor-pointer hover:bg-slate-600 transition group">
70
+ <span class="status-indicator bg-green-500 ssh-active"></span>
71
+ <div>
72
+ <h3 class="font-medium">Ubuntu Server</h3>
73
+ <p class="text-xs text-slate-400 group-hover:text-slate-300">192.168.1.100</p>
74
+ </div>
75
+ </div>
76
+ <div class="bg-slate-700 p-3 rounded-lg flex items-center cursor-pointer hover:bg-slate-600 transition group">
77
+ <span class="status-indicator bg-green-500"></span>
78
+ <div>
79
+ <h3 class="font-medium">Termux (Android)</h3>
80
+ <p class="text-xs text-slate-400 group-hover:text-slate-300">192.168.1.150</p>
81
+ </div>
82
+ </div>
83
+ <div class="bg-slate-700 p-3 rounded-lg flex items-center cursor-pointer hover:bg-slate-600 transition group">
84
+ <span class="status-indicator bg-yellow-500"></span>
85
+ <div>
86
+ <h3 class="font-medium">Docker Container</h3>
87
+ <p class="text-xs text-slate-400 group-hover:text-slate-300">172.17.0.2</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ <button class="mt-4 w-full bg-cyan-600 hover:bg-cyan-500 text-white py-2 rounded-lg flex items-center justify-center transition">
92
+ <i class="fas fa-plus mr-2"></i> Add System
93
+ </button>
94
+ </div>
95
+
96
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
97
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
98
+ <i class="fas fa-bolt mr-2 text-yellow-400"></i> Quick Actions
99
+ </h2>
100
+ <div class="grid grid-cols-2 gap-3">
101
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
102
+ <i class="fas fa-terminal text-cyan-400 mb-1"></i>
103
+ <span class="text-sm">Terminal</span>
104
+ </button>
105
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
106
+ <i class="fas fa-chart-line text-green-400 mb-1"></i>
107
+ <span class="text-sm">Metrics</span>
108
+ </button>
109
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
110
+ <i class="fas fa-shield-alt text-purple-400 mb-1"></i>
111
+ <span class="text-sm">Security</span>
112
+ </button>
113
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
114
+ <i class="fas fa-cogs text-yellow-400 mb-1"></i>
115
+ <span class="text-sm">Settings</span>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </aside>
120
+
121
+ <!-- Main Dashboard -->
122
+ <section class="lg:col-span-9 space-y-6">
123
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
124
+ <div class="flex justify-between items-center mb-6">
125
+ <h2 class="text-xl font-semibold flex items-center">
126
+ <i class="fas fa-terminal mr-2 text-cyan-400"></i> Command Execution
127
+ </h2>
128
+ <div class="flex space-x-2">
129
+ <div class="relative">
130
+ <select class="bg-slate-700 text-sm rounded-lg pl-3 pr-8 py-2 appearance-none focus:outline-none">
131
+ <option>Ubuntu Server</option>
132
+ <option>Termux (Android)</option>
133
+ <option>Docker Container</option>
134
+ </select>
135
+ <i class="fas fa-chevron-down absolute right-3 top-2.5 text-xs"></i>
136
+ </div>
137
+ <button class="bg-cyan-600 hover:bg-cyan-500 px-4 py-2 rounded-lg transition">
138
+ Connect
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="mb-4">
144
+ <label class="block text-sm font-medium mb-2">Execute Command</label>
145
+ <div class="flex">
146
+ <input type="text" id="command" placeholder="Enter command (e.g. uptime)"
147
+ class="flex-1 bg-slate-700 border border-slate-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500">
148
+ <button onclick="executeCommand()" class="bg-cyan-600 hover:bg-cyan-500 px-4 py-2 rounded-r-lg transition flex items-center">
149
+ <i class="fas fa-play mr-2"></i> Run
150
+ </button>
151
+ </div>
152
+ </div>
153
+
154
+ <div id="loading" class="hidden text-center py-8">
155
+ <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-cyan-500 mb-2"></div>
156
+ <p>Executing command and analyzing results...</p>
157
+ </div>
158
+
159
+ <div class="terminal rounded-lg p-4 h-64 overflow-y-auto mb-4">
160
+ <div id="terminal-output" class="terminal-output">
161
+ Ready to execute commands. Select a system and enter a command above.
162
+ </div>
163
+ </div>
164
+
165
+ <div class="bg-slate-700 rounded-lg p-4">
166
+ <div class="flex items-center mb-2">
167
+ <i class="fas fa-lightbulb text-yellow-400 mr-2"></i>
168
+ <h3 class="font-medium">AI Insights</h3>
169
+ </div>
170
+ <div id="ai-output" class="text-sm text-slate-300">
171
+ NexusAI will provide explanations and recommendations here based on the command output.
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
177
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
178
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
179
+ <i class="fas fa-chart-pie mr-2 text-green-400"></i> System Metrics
180
+ </h2>
181
+ <div class="h-64 flex items-center justify-center">
182
+ <div class="text-center">
183
+ <div class="radial-progress text-green-500" style="--value:75;">75%</div>
184
+ <p class="mt-2">CPU Usage</p>
185
+ </div>
186
+ <div class="text-center ml-8">
187
+ <div class="radial-progress text-blue-500" style="--value:45;">45%</div>
188
+ <p class="mt-2">Memory Usage</p>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
194
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
195
+ <i class="fas fa-history mr-2 text-purple-400"></i> Recent Activity
196
+ </h2>
197
+ <div class="space-y-3">
198
+ <div class="flex justify-between items-center p-3 bg-slate-700 rounded-lg">
199
+ <div>
200
+ <p class="font-medium">Updated package list</p>
201
+ <p class="text-xs text-slate-400">5 minutes ago</p>
202
+ </div>
203
+ <span class="bg-green-500 text-xs px-2 py-1 rounded">Success</span>
204
+ </div>
205
+ <div class="flex justify-between items-center p-3 bg-slate-700 rounded-lg">
206
+ <div>
207
+ <p class="font-medium">Restarted Nginx</p>
208
+ <p class="text-xs text-slate-400">22 minutes ago</p>
209
+ </div>
210
+ <span class="bg-green-500 text-xs px-2 py-1 rounded">Success</span>
211
+ </div>
212
+ <div class="flex justify-between items-center p-3 bg-slate-700 rounded-lg">
213
+ <div>
214
+ <p class="font-medium">Security audit</p>
215
+ <p class="text-xs text-slate-400">1 hour ago</p>
216
+ </div>
217
+ <span class="bg-yellow-500 text-xs px-2 py-1 rounded">Warning</span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+ </div>
224
+ </main>
225
+
226
+ <!-- Footer -->
227
+ <footer class="bg-slate-800 py-4 border-t border-slate-700">
228
+ <div class="container mx-auto px-4 text-center text-sm text-slate-400">
229
+ <p>NexusAI v1.0.0 - AI-Powered DevOps & System Administration Hub</p>
230
+ </div>
231
+ </footer>
232
+ </div>
233
+
234
+ <script>
235
+ function executeCommand() {
236
+ const commandInput = document.getElementById('command');
237
+ const terminalOutput = document.getElementById('terminal-output');
238
+ const aiOutput = document.getElementById('ai-output');
239
+ const loading = document.getElementById('loading');
240
+
241
+ if (!commandInput.value.trim()) {
242
+ terminalOutput.innerHTML = "Please enter a command to execute.";
243
+ return;
244
+ }
245
+
246
+ // Show loading state
247
+ loading.classList.remove('hidden');
248
+ terminalOutput.innerHTML = "";
249
+ aiOutput.innerHTML = "";
250
+
251
+ // Simulate API call with timeout
252
+ setTimeout(() => {
253
+ loading.classList.add('hidden');
254
+
255
+ // Sample command responses
256
+ if (commandInput.value.toLowerCase().includes('uptime')) {
257
+ terminalOutput.innerHTML = "&gt; uptime<br>17:32:42 up 12 days, 3:45, 1 user, load average: 0.52, 0.58, 0.62";
258
+ aiOutput.innerHTML = "This system has been running for 12 days with moderate load averages. The system is stable with average CPU utilization around 50-60%. Consider scheduling a reboot for kernel updates if this is a production server.";
259
+ }
260
+ else if (commandInput.value.toLowerCase().includes('free')) {
261
+ terminalOutput.innerHTML = "&gt; free -h<br> total used free shared buff/cache available<br>Mem: 7.7Gi 2.1Gi 3.2Gi 210Mi 2.4Gi 5.1Gi<br>Swap: 2.0Gi 0B 2.0Gi";
262
+ aiOutput.innerHTML = "Memory usage is healthy with 2.1GB used out of 7.7GB total. No swap is being used. The system has adequate memory resources available (5.1GB).";
263
+ }
264
+ else {
265
+ terminalOutput.innerHTML = `&gt; ${commandInput.value}<br>Command executed successfully. Sample output for demonstration.`;
266
+ aiOutput.innerHTML = "NexusAI is analyzing the command output. In a production environment, this would provide detailed insights and recommendations based on the actual system response.";
267
+ }
268
+
269
+ // Scroll to bottom of terminal
270
+ terminalOutput.scrollTop = terminalOutput.scrollHeight;
271
+ }, 2000);
272
+ }
273
+ </script>
274
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=knicole/shooook" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
275
+ </html>