Hugging Face's logo

Spaces:
saik0s
/
synthstream-control-hub
Running

App Files Community
saik0s commited on
Commit
d4930c7
·
verified ·
1 Parent(s): 22345eb

improve this screen while keeping all the information and functionality:

Browse files

## Admin Dashboard Interface Description

### Header Section
At the very top of the interface is the main title "Admin Dashboard" with a settings icon to its left. Directly beneath is a descriptive subtitle that reads "Monitor stream, manage blocks, control AI DJ".

### Navigation Bar
Below the header is a horizontal navigation bar with five tabs:
1. **Overview** (currently active/selected)
2. **Music Blocks**
3. **Library**
4. **AI DJ**
5. **Event Log**

### Statistics Row
The main content area begins with a row of seven metric cards displaying real-time statistics:

1. **Submitted**: Shows "1" with "+0.0% from last 24h"
2. **TTS queued**: Shows "1" with "+8800.0% from last 24h"
3. **Ready**: Shows "1" with "+8800.0% from last 24h"
4. **Fallback**: Shows "1" with "+0.0% from last 24h"
5. **LS Queue**: Shows "0" with "+0.0% from last 24h"
6. **LS Remaining**: Shows "2:27" with "+0.0% from last 24h"
7. **Listeners**: Shows "0" with "+0.0% from last 24h"

### Main Content Area (Three Columns)

#### Left Column - Music Blocks
- Header: "Music Blocks" with a folder icon
- **Current Block** section: Displays "No block active right now."
- **Next Block** section: Displays "No upcoming block scheduled."

#### Center Column - Now Playing
- Contains album artwork (appears to be "BANG" text)
- Track information: "Now Playing: DJ Toilettiquette - Bensound - The Elevator Bossa Nova"
- Audio player controls with play/pause button, mute button, and progress slider
- Status indicator showing "Ready"
- Skip button at top right

#### Right Column - Submit a Track
- Header: "Submit a Track" with a broadcast icon
- Two-tab interface with "Submit Track" and "Ask DJ" tabs
- **Track URL** input field containing "https://youtube.com/watch?v=..."
- "Submit Track" button below the input field

### Bottom Section - Queue Management

#### Left Queue Panel - Queue · Waiting
- Header shows "Queue · Waiting"
- "Skip Next" and "Clear" buttons in top right
- Content area shows "No waiting items."

#### Right Queue Panel - Queue · Done / Error
- Header shows "Queue · Done / Error"
- "Clear Finished" button in top right
- Two queue items displayed:
1. **AI DJ TTS** by DJ_Standard
- Status indicators showing "Done", "TTS", "DEF", "Block 09fbfd"
- Timestamp: "Q:2cfda2 · Created 14sh ago · Pushed 144h ago · Attempts 1"
- "Remove" button on right

2. **Unknown Artist – playlist**
- Album: Unknown Album
- Genre: Unknown
- Status indicators showing "Done", "Track", "DEF", "Block 09fbfd"
- Timestamp: "Q:65568e · T:062cf6 · Added 170h ago · Created 145h ago · Pushed 144h ago · Attempts 1"
- "Remove" button on right

The interface appears to be a comprehensive dashboard for managing an AI-powered DJ system with capabilities for monitoring playback, managing music queues, submitting tracks, and viewing system statistics.

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +357 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Synthstream Control Hub
3
- emoji: 📈
4
- colorFrom: pink
5
  colorTo: blue
 
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: SynthStream Control Hub 🎛️
3
+ colorFrom: gray
 
4
  colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,357 @@
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>SynthStream Control Hub</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#6366f1',
18
+ secondary: '#10b981',
19
+ dark: {
20
+ 900: '#0f172a',
21
+ 800: '#1e293b',
22
+ 700: '#334155',
23
+ 600: '#475569',
24
+ 500: '#64748b'
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
33
+
34
+ body {
35
+ font-family: 'Inter', sans-serif;
36
+ }
37
+
38
+ .nav-tab {
39
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
40
+ }
41
+
42
+ .nav-tab:hover {
43
+ transform: translateY(-1px);
44
+ }
45
+
46
+ .metric-card {
47
+ transition: all 0.3s ease;
48
+ }
49
+
50
+ .metric-card:hover {
51
+ transform: translateY(-2px);
52
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
53
+ }
54
+
55
+ .progress-slider {
56
+ -webkit-appearance: none;
57
+ appearance: none;
58
+ height: 4px;
59
+ border-radius: 2px;
60
+ background: #334155;
61
+ outline: none;
62
+ }
63
+
64
+ .progress-slider::-webkit-slider-thumb {
65
+ -webkit-appearance: none;
66
+ appearance: none;
67
+ width: 16px;
68
+ height: 16px;
69
+ border-radius: 50%;
70
+ background: #10b981;
71
+ cursor: pointer;
72
+ transition: all 0.2s ease;
73
+ }
74
+
75
+ .progress-slider::-webkit-slider-thumb:hover {
76
+ transform: scale(1.2);
77
+ box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
78
+ }
79
+
80
+ .queue-item {
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .queue-item:hover {
85
+ background: #1e293b;
86
+ transform: translateX(2px);
87
+ }
88
+
89
+ .badge {
90
+ transition: all 0.2s ease;
91
+ }
92
+
93
+ .badge:hover {
94
+ transform: scale(1.05);
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="bg-dark-900 text-gray-200 min-h-screen">
99
+ <!-- Header Section -->
100
+ <header class="bg-dark-800 border-b border-dark-700 sticky top-0 z-50">
101
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
102
+ <div class="flex items-center justify-between h-16">
103
+ <div class="flex items-center space-x-3">
104
+ <div class="bg-primary/20 p-2 rounded-lg">
105
+ <i data-feather="settings" class="w-5 h-5 text-primary"></i>
106
+ </div>
107
+ <div>
108
+ <h1 class="text-xl font-bold text-white">Admin Dashboard</h1>
109
+ <p class="text-sm text-dark-500">Monitor stream, manage blocks, control AI DJ</p>
110
+ </div>
111
+ </div>
112
+ <div class="flex items-center space-x-4">
113
+ <div class="flex items-center space-x-2 bg-dark-700/50 rounded-full px-3 py-1">
114
+ <div class="w-2 h-2 bg-secondary rounded-full animate-pulse"></div>
115
+ <span class="text-sm">System Online</span>
116
+ </div>
117
+ <div class="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
118
+ <span class="text-white text-sm font-semibold">AD</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </header>
124
+
125
+ <!-- Navigation Bar -->
126
+ <nav class="bg-dark-800 border-b border-dark-700">
127
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
+ <div class="flex space-x-8">
129
+ <a href="#" class="nav-tab py-4 px-1 border-b-2 border-primary text-primary font-medium flex items-center space-x-2">
130
+ <i data-feather="activity" class="w-4 h-4"></i>
131
+ <span>Overview</span>
132
+ </a>
133
+ <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2">
134
+ <i data-feather="music" class="w-4 h-4"></i>
135
+ <span>Music Blocks</span>
136
+ </a>
137
+ <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2">
138
+ <i data-feather="folder" class="w-4 h-4"></i>
139
+ <span>Library</span>
140
+ </a>
141
+ <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2">
142
+ <i data-feather="cpu" class="w-4 h-4"></i>
143
+ <span>AI DJ</span>
144
+ </a>
145
+ <a href="#" class="nav-tab py-4 px-1 border-b-2 border-transparent text-dark-500 hover:text-gray-300 font-medium flex items-center space-x-2">
146
+ <i data-feather="list" class="w-4 h-4"></i>
147
+ <span>Event Log</span>
148
+ </a>
149
+ </div>
150
+ </div>
151
+ </nav>
152
+
153
+ <!-- Statistics Row -->
154
+ <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
155
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
156
+ <!-- Submitted Card -->
157
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
158
+ <div class="flex items-center justify-between">
159
+ <span class="text-2xl font-bold text-white">1</span>
160
+ <i data-feather="upload" class="w-5 h-5 text-primary"></i>
161
+ </div>
162
+ <p class="text-sm text-dark-500 mt-1">Submitted</p>
163
+ <div class="flex items-center space-x-1 mt-2">
164
+ <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i>
165
+ <span class="text-xs text-secondary">+0.0% from last 24h</span>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Approved Card -->
170
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
171
+ <div class="flex items-center justify-between">
172
+ <span class="text-2xl font-bold text-white">1</span>
173
+ <i data-feather="check-circle" class="w-5 h-5 text-secondary"></i>
174
+ </div>
175
+ <p class="text-sm text-dark-500 mt-1">Approved</p>
176
+ <div class="flex items-center space-x-1 mt-2">
177
+ <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i>
178
+ <span class="text-xs text-secondary">+0.0% from last 24h</span>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Rejected Card -->
183
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
184
+ <div class="flex items-center justify-between">
185
+ <span class="text-2xl font-bold text-white">0</span>
186
+ <i data-feather="x-circle" class="w-5 h-5 text-red-400"></i>
187
+ </div>
188
+ <p class="text-sm text-dark-500 mt-1">Rejected</p>
189
+ <div class="flex items-center space-x-1 mt-2">
190
+ <i data-feather="minus" class="w-4 h-4 text-dark-500"></i>
191
+ <span class="text-xs text-dark-500">No change</span>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Playing Card -->
196
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
197
+ <div class="flex items-center justify-between">
198
+ <span class="text-2xl font-bold text-white">1</span>
199
+ <i data-feather="play" class="w-5 h-5 text-primary"></i>
200
+ </div>
201
+ <p class="text-sm text-dark-500 mt-1">Playing</p>
202
+ <div class="flex items-center space-x-1 mt-2">
203
+ <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i>
204
+ <span class="text-xs text-secondary">+100% from last 24h</span>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Queue Card -->
209
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
210
+ <div class="flex items-center justify-between">
211
+ <span class="text-2xl font-bold text-white">0</span>
212
+ <i data-feather="list" class="w-5 h-5 text-primary"></i>
213
+ </div>
214
+ <p class="text-sm text-dark-500 mt-1">Queue</p>
215
+ <div class="flex items-center space-x-1 mt-2">
216
+ <i data-feather="trending-down" class="w-4 h-4 text-red-400"></i>
217
+ <span class="text-xs text-red-400">-100% from last 24h</span>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Listeners Card -->
222
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
223
+ <div class="flex items-center justify-between">
224
+ <span class="text-2xl font-bold text-white">42</span>
225
+ <i data-feather="users" class="w-5 h-5 text-secondary"></i>
226
+ </div>
227
+ <p class="text-sm text-dark-500 mt-1">Listeners</p>
228
+ <div class="flex items-center space-x-1 mt-2">
229
+ <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i>
230
+ <span class="text-xs text-secondary">+5.0% from last 24h</span>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Uptime Card -->
235
+ <div class="metric-card bg-dark-800 rounded-xl p-4 border border-dark-700">
236
+ <div class="flex items-center justify-between">
237
+ <span class="text-2xl font-bold text-white">99.9%</span>
238
+ <i data-feather="clock" class="w-5 h-5 text-primary"></i>
239
+ </div>
240
+ <p class="text-sm text-dark-500 mt-1">Uptime</p>
241
+ <div class="flex items-center space-x-1 mt-2">
242
+ <i data-feather="trending-up" class="w-4 h-4 text-secondary"></i>
243
+ <span class="text-xs text-secondary">+0.1% from last 24h</span>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Main Content Area -->
250
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
251
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
252
+ <!-- Left Column - Music Blocks -->
253
+ <div class="lg:col-span-1">
254
+ <div class="bg-dark-800 rounded-xl border border-dark-700 overflow-hidden">
255
+ <div class="bg-gradient-to-r from-dark-800 to-dark-700 px-6 py-4 border-b border-dark-600">
256
+ <div class="flex items-center space-x-3">
257
+ <div class="bg-primary/20 p-2 rounded-lg">
258
+ <i data-feather="folder" class="w-5 h-5 text-primary"></i>
259
+ </div>
260
+ <h2 class="text-lg font-semibold text-white">Music Blocks</h2>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="p-6 space-y-6">
265
+ <!-- Current Block -->
266
+ <div class="bg-dark-700/50 rounded-lg p-4 border border-dark-600">
267
+ <h3 class="text-sm font-medium text-dark-400 mb-2">Current Block</h3>
268
+ <p class="text-gray-300">No block active right now.</p>
269
+ </div>
270
+
271
+ <!-- Next Block -->
272
+ <div class="bg-dark-700/50 rounded-lg p-4 border border-dark-600">
273
+ <h3 class="text-sm font-medium text-dark-400 mb-2">Next Block</h3>
274
+ <p class="text-gray-300">No upcoming block scheduled.</p>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Center Column - Now Playing -->
281
+ <div class="lg:col-span-1">
282
+ <div class="bg-dark-800 rounded-xl border border-dark-700 overflow-hidden">
283
+ <div class="relative">
284
+ <div class="absolute top-4 right-4 z-10">
285
+ <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 transform hover:scale-105">
286
+ Skip
287
+ </button>
288
+ </div>
289
+
290
+ <div class="bg-gradient-to-br from-primary/20 to-secondary/20 p-8 text-center">
291
+ <div class="inline-block bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
292
+ <div class="w-32 h-32 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center mx-auto mb-4">
293
+ <span class="text-white text-2xl font-bold">BANG</span>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="p-6">
300
+ <div class="text-center mb-6">
301
+ <p class="text-sm text-dark-500 mb-1">Now Playing</p>
302
+ <h3 class="text-xl font-semibold text-white">DJ Toilettiquette - Bensound</h3>
303
+ <p class="text-dark-500">The Elevator Bossa Nova</p>
304
+ </div>
305
+
306
+ <!-- Progress Bar -->
307
+ <div class="mb-6">
308
+ <div class="flex justify-between text-sm text-dark-500 mb-2">
309
+ <span>1:24</span>
310
+ <span>3:45</span>
311
+ </div>
312
+ <input type="range" class="progress-slider w-full" value="38">
313
+ </div>
314
+
315
+ <!-- Controls -->
316
+ <div class="flex items-center justify-center space-x-8">
317
+ <button class="p-3 rounded-full bg-dark-700 hover:bg-dark-600 transition-all duration-200">
318
+ <i data-feather="skip-back" class="w-5 h-5 text-gray-400"></i>
319
+ </button>
320
+ <button class="p-4 rounded-full bg-primary hover:bg-primary/90 transition-all duration-200 transform hover:scale-105">
321
+ <i data-feather="play" class="w-6 h-6 text-white"></i>
322
+ </button>
323
+ <button class="p-3 rounded-full bg-dark-700 hover:bg-dark-600 transition-all duration-200">
324
+ <i data-feather="skip-forward" class="w-5 h-5 text-gray-400"></i>
325
+ </button>
326
+ <button class="p-3 rounded-full bg-dark-700 hover:bg-dark-600 transition-all duration-200">
327
+ <i data-feather="volume-2" class="w-5 h-5 text-gray-400"></i>
328
+ </button>
329
+ </div>
330
+
331
+ <div class="text-center mt-6">
332
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-secondary/20 text-secondary">
333
+ <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>
334
+ Ready
335
+ </span>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Right Column - Submit a Track -->
342
+ <div class="lg:col-span-1">
343
+ <div class="bg-dark-800 rounded-xl border border-dark-700 overflow-hidden">
344
+ <div class="bg-gradient-to-r from-dark-800 to-dark-700 px-6 py-4 border-b border-dark-600">
345
+ <div class="flex items-center space-x-3">
346
+ <div class="bg-primary/20 p-2 rounded-lg">
347
+ <i data-feather="radio" class="w-5 h-5 text-primary"></i>
348
+ </div>
349
+ <h2 class="text-lg font-semibold text-white">Submit a Track</h2>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="p-6">
354
+ <!-- Tabs -->
355
+ <div class="flex space-x-1 bg-dark-700 rounded-lg p-1 mb-6">
356
+ </body>
357
+ </html>