Hugging Face's logo

Spaces:
00Boobs00
/
civitai-explorer
Running

App Files Community
00Boobs00 commited on
Commit
5e71cb2
·
verified ·
1 Parent(s): 99eb86d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +894 -213
index.html CHANGED
@@ -3,252 +3,933 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Flux Fusion Studio</title>
7
- <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
- <link rel="stylesheet" href="style.css">
9
- <script src="https://cdn.tailwindcss.com"></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: '#10B981',
18
- secondary: '#F97316'
19
- }
20
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  }
22
  }
23
- </script>
24
  </head>
25
- <body class="bg-gray-900 text-white">
26
- <flux-header></flux-header>
27
-
28
- <main class="container mx-auto px-4 py-8">
29
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
30
- <!-- Left Panel - Controls -->
31
- <div class="lg:col-span-1 space-y-6">
32
- <!-- Prompt Input -->
33
- <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
34
- <h2 class="text-xl font-bold mb-4 flex items-center">
35
- <i data-feather="edit-3" class="mr-2 text-primary"></i>
36
- Prompt
37
- </h2>
38
- <textarea
39
- id="prompt-input"
40
- class="w-full bg-gray-700 border border-gray-600 rounded-lg p-4 text-white focus:outline-none focus:ring-2 focus:ring-primary resize-none"
41
- rows="4"
42
- placeholder="Describe your vision..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
 
 
44
 
45
- <!-- LORA Selection -->
46
- <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
47
- <h2 class="text-xl font-bold mb-4 flex items-center">
48
- <i data-feather="layers" class="mr-2 text-primary"></i>
49
- LORA Models
50
- </h2>
51
- <div class="space-y-4">
52
- <!-- LORA Slot 1 -->
53
- <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
54
- <div class="flex items-center">
55
- <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
56
- <span class="text-xs font-bold">1</span>
57
- </div>
58
- <div>
59
- <p class="font-medium">Select LORA</p>
60
- <p class="text-xs text-gray-400">None selected</p>
61
- </div>
62
  </div>
63
- <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
64
- <i data-feather="settings" class="w-4 h-4"></i>
65
- </button>
66
  </div>
67
-
68
- <!-- LORA Slot 2 -->
69
- <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
70
- <div class="flex items-center">
71
- <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
72
- <span class="text-xs font-bold">2</span>
73
- </div>
74
- <div>
75
- <p class="font-medium">Select LORA</p>
76
- <p class="text-xs text-gray-400">None selected</p>
77
- </div>
78
  </div>
79
- <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
80
- <i data-feather="settings" class="w-4 h-4"></i>
81
- </button>
82
  </div>
83
-
84
- <!-- LORA Slot 3 -->
85
- <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
86
- <div class="flex items-center">
87
- <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
88
- <span class="text-xs font-bold">3</span>
89
- </div>
90
- <div>
91
- <p class="font-medium">Select LORA</p>
92
- <p class="text-xs text-gray-400">None selected</p>
93
- </div>
94
  </div>
95
- <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
96
- <i data-feather="settings" class="w-4 h-4"></i>
97
- </button>
98
  </div>
99
-
100
- <!-- LORA Slot 4 -->
101
- <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
102
- <div class="flex items-center">
103
- <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-3">
104
- <span class="text-xs font-bold">4</span>
105
- </div>
106
- <div>
107
- <p class="font-medium">Select LORA</p>
108
- <p class="text-xs text-gray-400">None selected</p>
109
- </div>
110
  </div>
111
- <button class="bg-gray-600 hover:bg-gray-500 p-2 rounded-lg transition">
112
- <i data-feather="settings" class="w-4 h-4"></i>
113
- </button>
114
  </div>
115
  </div>
 
116
 
117
- <button class="mt-4 w-full py-3 bg-primary hover:bg-green-600 rounded-lg font-semibold flex items-center justify-center transition">
118
- <i data-feather="plus-circle" class="mr-2"></i>
119
- Add Custom LORA
120
- </button>
 
 
 
 
 
 
121
  </div>
 
122
 
123
- <!-- Generation Settings -->
124
- <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
125
- <h2 class="text-xl font-bold mb-4 flex items-center">
126
- <i data-feather="sliders" class="mr-2 text-primary"></i>
127
- Settings
128
- </h2>
129
- <div class="space-y-4">
130
  <div>
131
- <label class="block text-sm font-medium mb-2">CFG Scale</label>
132
- <input type="range" min="1" max="20" value="7" class="w-full accent-primary">
133
- <div class="flex justify-between text-xs text-gray-400 mt-1">
134
- <span>1</span>
135
- <span>20</span>
136
- </div>
137
  </div>
138
-
139
- <div>
140
- <label class="block text-sm font-medium mb-2">Steps</label>
141
- <input type="range" min="1" max="50" value="28" class="w-full accent-secondary">
142
- <div class="flex justify-between text-xs text-gray-400 mt-1">
143
- <span>1</span>
144
- <span>50</span>
 
 
145
  </div>
146
- </div>
147
-
148
- <div class="grid grid-cols-2 gap-4">
149
- <div>
150
- <label class="block text-sm font-medium mb-2">Width</label>
151
- <select class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2 text-white">
152
- <option>512</option>
153
- <option selected>768</option>
154
- <option>1024</option>
155
- </select>
156
  </div>
157
- <div>
158
- <label class="block text-sm font-medium mb-2">Height</label>
159
- <select class="w-full bg-gray-700 border border-gray-600 rounded-lg p-2 text-white">
160
- <option>512</option>
161
- <option>768</option>
162
- <option selected>1024</option>
163
- </select>
164
  </div>
165
- </div>
166
-
167
- <div class="flex items-center justify-between pt-2">
168
- <div class="flex items-center">
169
- <input type="checkbox" id="random-seed" class="accent-primary" checked>
170
- <label for="random-seed" class="ml-2 text-sm">Random Seed</label>
171
  </div>
172
- <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition">
173
- <i data-feather="refresh-cw" class="w-4 h-4 inline mr-1"></i>
174
- Randomize
175
- </button>
176
- </div>
177
- </div>
178
  </div>
179
- </div>
180
 
181
- <!-- Right Panel - Preview & Gallery -->
182
- <div class="lg:col-span-2">
183
- <!-- Preview Area -->
184
- <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
185
- <div class="flex justify-between items-center mb-4">
186
- <h2 class="text-xl font-bold flex items-center">
187
- <i data-feather="image" class="mr-2 text-primary"></i>
188
- Preview
189
- </h2>
190
- <div class="flex space-x-2">
191
- <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg transition">
192
- <i data-feather="download" class="w-4 h-4"></i>
193
- </button>
194
- <button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-lg transition">
195
- <i data-feather="share-2" class="w-4 h-4"></i>
196
- </button>
197
- </div>
198
- </div>
199
-
200
- <div class="aspect-video bg-gray-900 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-700">
201
- <div class="text-center">
202
- <i data-feather="camera" class="w-12 h-12 mx-auto text-gray-600 mb-2"></i>
203
- <p class="text-gray-500">Generated image will appear here</p>
204
  </div>
 
 
 
205
  </div>
206
-
207
- <div class="mt-6 flex space-x-4">
208
- <button class="flex-1 py-3 bg-primary hover:bg-green-600 rounded-lg font-semibold flex items-center justify-center transition">
209
- <i data-feather="play" class="mr-2"></i>
210
- Generate Image
211
- </button>
212
- <button class="flex-1 py-3 bg-secondary hover:bg-orange-600 rounded-lg font-semibold flex items-center justify-center transition">
213
- <i data-feather="film" class="mr-2"></i>
214
- Generate Video
215
- </button>
216
  </div>
217
  </div>
 
218
 
219
- <!-- Gallery -->
220
- <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
221
- <div class="flex justify-between items-center mb-4">
222
- <h2 class="text-xl font-bold flex items-center">
223
- <i data-feather="grid" class="mr-2 text-primary"></i>
224
- LORA Gallery
225
- </h2>
226
- <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition">
227
- View All
228
- </button>
229
- </div>
230
-
231
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
232
- <!-- Gallery Items -->
233
- <div class="aspect-square bg-gradient-to-br from-purple-900 to-blue-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
234
- <div class="aspect-square bg-gradient-to-br from-pink-900 to-red-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
235
- <div class="aspect-square bg-gradient-to-br from-yellow-900 to-orange-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
236
- <div class="aspect-square bg-gradient-to-br from-green-900 to-teal-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
237
- <div class="aspect-square bg-gradient-to-br from-indigo-900 to-purple-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
238
- <div class="aspect-square bg-gradient-to-br from-red-900 to-pink-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
239
- <div class="aspect-square bg-gradient-to-br from-blue-900 to-cyan-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
240
- <div class="aspect-square bg-gradient-to-br from-emerald-900 to-green-800 rounded-lg cursor-pointer hover:opacity-90 transition"></div>
241
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
  </div>
243
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
244
  </div>
245
  </main>
246
 
247
- <flux-footer></flux-footer>
248
-
249
- <script src="components/header.js"></script>
250
- <script src="components/footer.js"></script>
251
- <script src="script.js"></script>
252
- <script>feather.replace();</script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
253
  </body>
254
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gradio Space Operations Center</title>
7
+ <!-- Importing FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Importing Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ :root {
14
+ /* Color Palette - Trustworthy & Modern */
15
+ --primary: #2563eb;
16
+ --primary-dark: #1e40af;
17
+ --secondary: #64748b;
18
+ --background: #f8fafc;
19
+ --surface: #ffffff;
20
+ --text-main: #1e293b;
21
+ --text-muted: #64748b;
22
+ --border: #e2e8f0;
23
+ --success: #10b981;
24
+ --warning: #f59e0b;
25
+ --danger: #ef4444;
26
+ --radius: 12px;
27
+ --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
28
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
29
+ }
30
+
31
+ * {
32
+ box-sizing: border-box;
33
+ margin: 0;
34
+ padding: 0;
35
+ }
36
+
37
+ body {
38
+ font-family: 'Inter', sans-serif;
39
+ background-color: var(--background);
40
+ color: var(--text-main);
41
+ display: flex;
42
+ height: 100vh;
43
+ overflow: hidden;
44
+ line-height: 1.5;
45
+ }
46
+
47
+ /* --- Sidebar Navigation --- */
48
+ aside {
49
+ width: 260px;
50
+ background-color: var(--surface);
51
+ border-right: 1px solid var(--border);
52
+ display: flex;
53
+ flex-direction: column;
54
+ padding: 1.5rem;
55
+ transition: transform 0.3s ease;
56
+ z-index: 10;
57
+ }
58
+
59
+ .brand {
60
+ font-size: 1.25rem;
61
+ font-weight: 700;
62
+ color: var(--text-main);
63
+ margin-bottom: 2rem;
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 0.75rem;
67
+ }
68
+
69
+ .brand i {
70
+ color: var(--primary);
71
+ }
72
+
73
+ nav {
74
+ flex: 1;
75
+ display: flex;
76
+ flex-direction: column;
77
+ gap: 0.5rem;
78
+ }
79
+
80
+ .nav-item {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 0.75rem;
84
+ padding: 0.75rem 1rem;
85
+ border-radius: var(--radius);
86
+ color: var(--text-muted);
87
+ text-decoration: none;
88
+ font-weight: 500;
89
+ cursor: pointer;
90
+ transition: var(--transition);
91
+ }
92
+
93
+ .nav-item:hover {
94
+ background-color: #f1f5f9;
95
+ color: var(--primary);
96
+ }
97
+
98
+ .nav-item.active {
99
+ background-color: #eff6ff;
100
+ color: var(--primary);
101
+ }
102
+
103
+ .nav-item i {
104
+ width: 20px;
105
+ text-align: center;
106
+ }
107
+
108
+ /* --- Main Content Area --- */
109
+ main {
110
+ flex: 1;
111
+ display: flex;
112
+ flex-direction: column;
113
+ overflow: hidden;
114
+ position: relative;
115
+ }
116
+
117
+ /* --- Header --- */
118
+ header {
119
+ background-color: var(--surface);
120
+ border-bottom: 1px solid var(--border);
121
+ padding: 1rem 2rem;
122
+ display: flex;
123
+ justify-content: space-between;
124
+ align-items: center;
125
+ height: 70px;
126
+ }
127
+
128
+ .header-title h2 {
129
+ font-size: 1.1rem;
130
+ font-weight: 600;
131
+ }
132
+
133
+ .header-actions {
134
+ display: flex;
135
+ align-items: center;
136
+ gap: 1rem;
137
+ }
138
+
139
+ .anycoder-link {
140
+ font-size: 0.85rem;
141
+ color: var(--primary);
142
+ text-decoration: none;
143
+ font-weight: 500;
144
+ padding: 0.5rem 1rem;
145
+ background: #eff6ff;
146
+ border-radius: 20px;
147
+ transition: var(--transition);
148
+ }
149
+
150
+ .anycoder-link:hover {
151
+ background: #dbeafe;
152
+ }
153
+
154
+ .user-avatar {
155
+ width: 36px;
156
+ height: 36px;
157
+ border-radius: 50%;
158
+ background-color: #e2e8f0;
159
+ display: flex;
160
+ align-items: center;
161
+ justify-content: center;
162
+ color: var(--text-muted);
163
+ font-size: 0.9rem;
164
+ cursor: pointer;
165
+ }
166
+
167
+ /* --- Content Scroll Area --- */
168
+ .content-scroll {
169
+ flex: 1;
170
+ overflow-y: auto;
171
+ padding: 2rem;
172
+ }
173
+
174
+ /* --- Sections --- */
175
+ section {
176
+ display: none;
177
+ animation: fadeIn 0.4s ease-out;
178
+ }
179
+
180
+ section.active {
181
+ display: block;
182
+ }
183
+
184
+ @keyframes fadeIn {
185
+ from { opacity: 0; transform: translateY(10px); }
186
+ to { opacity: 1; transform: translateY(0); }
187
+ }
188
+
189
+ /* --- Dashboard Grid --- */
190
+ .dashboard-grid {
191
+ display: grid;
192
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
193
+ gap: 1.5rem;
194
+ margin-bottom: 2rem;
195
+ }
196
+
197
+ .stat-card {
198
+ background: var(--surface);
199
+ padding: 1.5rem;
200
+ border-radius: var(--radius);
201
+ box-shadow: var(--shadow);
202
+ border: 1px solid var(--border);
203
+ }
204
+
205
+ .stat-header {
206
+ display: flex;
207
+ justify-content: space-between;
208
+ align-items: flex-start;
209
+ margin-bottom: 1rem;
210
+ }
211
+
212
+ .stat-icon {
213
+ width: 40px;
214
+ height: 40px;
215
+ border-radius: 8px;
216
+ display: flex;
217
+ align-items: center;
218
+ justify-content: center;
219
+ font-size: 1.2rem;
220
+ }
221
+
222
+ .stat-value {
223
+ font-size: 1.8rem;
224
+ font-weight: 700;
225
+ color: var(--text-main);
226
+ }
227
+
228
+ .stat-label {
229
+ color: var(--text-muted);
230
+ font-size: 0.875rem;
231
+ }
232
+
233
+ /* --- Test Suite Styles --- */
234
+ .test-container {
235
+ background: var(--surface);
236
+ border-radius: var(--radius);
237
+ box-shadow: var(--shadow);
238
+ border: 1px solid var(--border);
239
+ overflow: hidden;
240
+ }
241
+
242
+ .test-header {
243
+ padding: 1.5rem;
244
+ border-bottom: 1px solid var(--border);
245
+ display: flex;
246
+ justify-content: space-between;
247
+ align-items: center;
248
+ }
249
+
250
+ .btn {
251
+ background-color: var(--primary);
252
+ color: white;
253
+ border: none;
254
+ padding: 0.6rem 1.2rem;
255
+ border-radius: 8px;
256
+ font-weight: 500;
257
+ cursor: pointer;
258
+ display: inline-flex;
259
+ align-items: center;
260
+ gap: 0.5rem;
261
+ transition: var(--transition);
262
+ }
263
+
264
+ .btn:hover {
265
+ background-color: var(--primary-dark);
266
+ transform: translateY(-1px);
267
+ }
268
+
269
+ .btn-outline {
270
+ background-color: transparent;
271
+ border: 1px solid var(--border);
272
+ color: var(--text-main);
273
+ }
274
+
275
+ .btn-outline:hover {
276
+ background-color: #f8fafc;
277
+ border-color: var(--text-muted);
278
+ }
279
+
280
+ .test-list {
281
+ list-style: none;
282
+ }
283
+
284
+ .test-item {
285
+ padding: 1rem 1.5rem;
286
+ border-bottom: 1px solid var(--border);
287
+ display: flex;
288
+ align-items: center;
289
+ justify-content: space-between;
290
+ }
291
+
292
+ .test-item:last-child {
293
+ border-bottom: none;
294
+ }
295
+
296
+ .test-info {
297
+ display: flex;
298
+ flex-direction: column;
299
+ }
300
+
301
+ .test-name {
302
+ font-weight: 500;
303
+ }
304
+
305
+ .test-desc {
306
+ font-size: 0.85rem;
307
+ color: var(--text-muted);
308
+ }
309
+
310
+ .status-badge {
311
+ padding: 0.25rem 0.75rem;
312
+ border-radius: 20px;
313
+ font-size: 0.75rem;
314
+ font-weight: 600;
315
+ text-transform: uppercase;
316
+ }
317
+
318
+ .status-pending { background: #f1f5f9; color: var(--text-muted); }
319
+ .status-running { background: #dbeafe; color: var(--primary); }
320
+ .status-passed { background: #d1fae5; color: var(--success); }
321
+ .status-failed { background: #fee2e2; color: var(--danger); }
322
+
323
+ /* --- Documentation Styles --- */
324
+ .docs-container {
325
+ max-width: 800px;
326
+ margin: 0 auto;
327
+ }
328
+
329
+ .doc-card {
330
+ background: var(--surface);
331
+ padding: 2rem;
332
+ border-radius: var(--radius);
333
+ box-shadow: var(--shadow);
334
+ border: 1px solid var(--border);
335
+ margin-bottom: 1.5rem;
336
+ }
337
+
338
+ .doc-card h3 {
339
+ margin-bottom: 1rem;
340
+ color: var(--text-main);
341
+ display: flex;
342
+ align-items: center;
343
+ gap: 0.5rem;
344
+ }
345
+
346
+ .doc-card p {
347
+ color: var(--text-muted);
348
+ margin-bottom: 1rem;
349
+ }
350
+
351
+ .code-block {
352
+ background: #1e293b;
353
+ color: #e2e8f0;
354
+ padding: 1rem;
355
+ border-radius: 8px;
356
+ font-family: 'Courier New', Courier, monospace;
357
+ font-size: 0.9rem;
358
+ overflow-x: auto;
359
+ margin-bottom: 1rem;
360
+ }
361
+
362
+ /* --- Error Logs Table --- */
363
+ .table-container {
364
+ background: var(--surface);
365
+ border-radius: var(--radius);
366
+ box-shadow: var(--shadow);
367
+ border: 1px solid var(--border);
368
+ overflow-x: auto;
369
+ }
370
+
371
+ table {
372
+ width: 100%;
373
+ border-collapse: collapse;
374
+ text-align: left;
375
+ }
376
+
377
+ th {
378
+ background: #f8fafc;
379
+ padding: 1rem 1.5rem;
380
+ font-weight: 600;
381
+ font-size: 0.85rem;
382
+ color: var(--text-muted);
383
+ text-transform: uppercase;
384
+ border-bottom: 1px solid var(--border);
385
+ }
386
+
387
+ td {
388
+ padding: 1rem 1.5rem;
389
+ border-bottom: 1px solid var(--border);
390
+ font-size: 0.9rem;
391
+ }
392
+
393
+ .error-msg {
394
+ color: var(--danger);
395
+ font-family: monospace;
396
+ }
397
+
398
+ /* --- Feedback Form --- */
399
+ .feedback-wrapper {
400
+ max-width: 600px;
401
+ margin: 0 auto;
402
+ background: var(--surface);
403
+ padding: 2rem;
404
+ border-radius: var(--radius);
405
+ box-shadow: var(--shadow);
406
+ border: 1px solid var(--border);
407
+ }
408
+
409
+ .form-group {
410
+ margin-bottom: 1.5rem;
411
+ }
412
+
413
+ .form-group label {
414
+ display: block;
415
+ margin-bottom: 0.5rem;
416
+ font-weight: 500;
417
+ font-size: 0.9rem;
418
+ }
419
+
420
+ .form-control {
421
+ width: 100%;
422
+ padding: 0.75rem;
423
+ border: 1px solid var(--border);
424
+ border-radius: 8px;
425
+ font-family: inherit;
426
+ font-size: 0.95rem;
427
+ transition: var(--transition);
428
+ }
429
+
430
+ .form-control:focus {
431
+ outline: none;
432
+ border-color: var(--primary);
433
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
434
+ }
435
+
436
+ /* --- Toast Notification --- */
437
+ .toast-container {
438
+ position: fixed;
439
+ bottom: 2rem;
440
+ right: 2rem;
441
+ display: flex;
442
+ flex-direction: column;
443
+ gap: 1rem;
444
+ z-index: 100;
445
+ }
446
+
447
+ .toast {
448
+ background: var(--surface);
449
+ padding: 1rem 1.5rem;
450
+ border-radius: 8px;
451
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
452
+ border-left: 4px solid var(--primary);
453
+ display: flex;
454
+ align-items: center;
455
+ gap: 1rem;
456
+ min-width: 300px;
457
+ transform: translateX(120%);
458
+ transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
459
+ }
460
+
461
+ .toast.show {
462
+ transform: translateX(0);
463
+ }
464
+
465
+ .toast.success { border-left-color: var(--success); }
466
+ .toast.error { border-left-color: var(--danger); }
467
+
468
+ /* --- Responsive Design --- */
469
+ .mobile-menu-btn {
470
+ display: none;
471
+ background: none;
472
+ border: none;
473
+ font-size: 1.5rem;
474
+ color: var(--text-main);
475
+ cursor: pointer;
476
+ }
477
+
478
+ @media (max-width: 768px) {
479
+ aside {
480
+ position: absolute;
481
+ height: 100%;
482
+ transform: translateX(-100%);
483
+ }
484
+
485
+ aside.open {
486
+ transform: translateX(0);
487
+ }
488
+
489
+ .mobile-menu-btn {
490
+ display: block;
491
+ }
492
+
493
+ .header-title h2 {
494
+ font-size: 1rem;
495
+ }
496
+
497
+ .anycoder-link span {
498
+ display: none;
499
+ }
500
+
501
+ .anycoder-link {
502
+ padding: 0.5rem;
503
  }
504
  }
505
+ </style>
506
  </head>
507
+ <body>
508
+
509
+ <!-- Sidebar -->
510
+ <aside id="sidebar">
511
+ <div class="brand">
512
+ <i class="fa-solid fa-layer-group"></i>
513
+ <span>GradioOps</span>
514
+ </div>
515
+ <nav>
516
+ <a href="#" class="nav-item active" data-target="dashboard">
517
+ <i class="fa-solid fa-chart-line"></i>
518
+ <span>Dashboard</span>
519
+ </a>
520
+ <a href="#" class="nav-item" data-target="testing">
521
+ <i class="fa-solid fa-flask"></i>
522
+ <span>Test Suite</span>
523
+ </a>
524
+ <a href="#" class="nav-item" data-target="docs">
525
+ <i class="fa-solid fa-book-open"></i>
526
+ <span>Documentation</span>
527
+ </a>
528
+ <a href="#" class="nav-item" data-target="logs">
529
+ <i class="fa-solid fa-bug"></i>
530
+ <span>Error Logs</span>
531
+ </a>
532
+ <a href="#" class="nav-item" data-target="feedback">
533
+ <i class="fa-solid fa-comments"></i>
534
+ <span>Feedback</span>
535
+ </a>
536
+ </nav>
537
+ </aside>
538
+
539
+ <!-- Main Content -->
540
+ <main>
541
+ <!-- Header -->
542
+ <header>
543
+ <div class="header-actions">
544
+ <button class="mobile-menu-btn" id="menuBtn">
545
+ <i class="fa-solid fa-bars"></i>
546
+ </button>
547
+ <div class="header-title">
548
+ <h2 id="pageTitle">System Overview</h2>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="header-actions">
553
+ <!-- CRITICAL LINK -->
554
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
555
+ <i class="fa-solid fa-code"></i>
556
+ <span>Built with anycoder</span>
557
+ </a>
558
+ <div class="user-avatar" title="User Profile">
559
+ <i class="fa-solid fa-user"></i>
560
  </div>
561
+ </div>
562
+ </header>
563
 
564
+ <!-- Content Scroll -->
565
+ <div class="content-scroll">
566
+
567
+ <!-- Dashboard Section -->
568
+ <section id="dashboard" class="active">
569
+ <div class="dashboard-grid">
570
+ <div class="stat-card">
571
+ <div class="stat-header">
572
+ <div>
573
+ <div class="stat-label">System Uptime</div>
574
+ <div class="stat-value">99.98%</div>
575
+ </div>
576
+ <div class="stat-icon" style="background: #d1fae5; color: var(--success);">
577
+ <i class="fa-solid fa-server"></i>
 
 
 
578
  </div>
 
 
 
579
  </div>
580
+ </div>
581
+ <div class="stat-card">
582
+ <div class="stat-header">
583
+ <div>
584
+ <div class="stat-label">Active Tests</div>
585
+ <div class="stat-value">42/42</div>
586
+ </div>
587
+ <div class="stat-icon" style="background: #eff6ff; color: var(--primary);">
588
+ <i class="fa-solid fa-vial"></i>
 
 
589
  </div>
 
 
 
590
  </div>
591
+ </div>
592
+ <div class="stat-card">
593
+ <div class="stat-header">
594
+ <div>
595
+ <div class="stat-label">Avg Response</div>
596
+ <div class="stat-value">120ms</div>
597
+ </div>
598
+ <div class="stat-icon" style="background: #fef3c7; color: var(--warning);">
599
+ <i class="fa-solid fa-bolt"></i>
 
 
600
  </div>
 
 
 
601
  </div>
602
+ </div>
603
+ <div class="stat-card">
604
+ <div class="stat-header">
605
+ <div>
606
+ <div class="stat-label">Pending Issues</div>
607
+ <div class="stat-value">3</div>
608
+ </div>
609
+ <div class="stat-icon" style="background: #fee2e2; color: var(--danger);">
610
+ <i class="fa-solid fa-triangle-exclamation"></i>
 
 
611
  </div>
 
 
 
612
  </div>
613
  </div>
614
+ </div>
615
 
616
+ <div class="doc-card">
617
+ <h3><i class="fa-solid fa-circle-info"></i> System Health Summary</h3>
618
+ <p>The Gradio Space is currently operating within normal parameters. All critical inference nodes are responsive. Recent deployment of v2.4.0 has stabilized memory usage.</p>
619
+ <div style="background: #f1f5f9; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 1rem;">
620
+ <div style="width: 85%; background: var(--success); height: 100%;"></div>
621
+ </div>
622
+ <div style="display: flex; justify-content: space-between; font-size: 0.8rem; margin-top: 0.5rem; color: var(--text-muted);">
623
+ <span>Load Average</span>
624
+ <span>85%</span>
625
+ </div>
626
  </div>
627
+ </section>
628
 
629
+ <!-- Testing Suite Section -->
630
+ <section id="testing">
631
+ <div class="test-container">
632
+ <div class="test-header">
 
 
 
633
  <div>
634
+ <h3>Rigorous Testing Protocols</h3>
635
+ <p style="color: var(--text-muted); font-size: 0.9rem;">Simulate real-world usage scenarios to validate performance.</p>
 
 
 
 
636
  </div>
637
+ <button class="btn" id="runTestsBtn">
638
+ <i class="fa-solid fa-play"></i> Run All Tests
639
+ </button>
640
+ </div>
641
+ <ul class="test-list" id="testList">
642
+ <li class="test-item">
643
+ <div class="test-info">
644
+ <span class="test-name">Inference Latency Check</span>
645
+ <span class="test-desc">Validates response time is < 200ms</span>
646
  </div>
647
+ <span class="status-badge status-pending" id="test-1">Pending</span>
648
+ </li>
649
+ <li class="test-item">
650
+ <div class="test-info">
651
+ <span class="test-name">Input Validation</span>
652
+ <span class="test-desc">Tests robustness against malformed inputs</span>
 
 
 
 
653
  </div>
654
+ <span class="status-badge status-pending" id="test-2">Pending</span>
655
+ </li>
656
+ <li class="test-item">
657
+ <div class="test-info">
658
+ <span class="test-name">GPU Memory Allocation</span>
659
+ <span class="test-desc">Ensures no memory leaks during batch processing</span>
 
660
  </div>
661
+ <span class="status-badge status-pending" id="test-3">Pending</span>
662
+ </li>
663
+ <li class="test-item">
664
+ <div class="test-info">
665
+ <span class="test-name">API Endpoint Security</span>
666
+ <span class="test-desc">Verifies authentication headers</span>
667
  </div>
668
+ <span class="status-badge status-pending" id="test-4">Pending</span>
669
+ </li>
670
+ </ul>
 
 
 
671
  </div>
672
+ </section>
673
 
674
+ <!-- Documentation Section -->
675
+ <section id="docs">
676
+ <div class="docs-container">
677
+ <div class="doc-card">
678
+ <h3><i class="fa-solid fa-book"></i> User Guidelines</h3>
679
+ <p>Comprehensive documentation ensures users can navigate the platform effectively. Below is the standard operating procedure for model deployment.</p>
680
+
681
+ <h4>1. Initialization</h4>
682
+ <div class="code-block">
683
+ import gradio as gr<br>
684
+ demo = gr.load("models/gpt2")<br>
685
+ demo.launch()
 
 
 
 
 
 
 
 
 
 
 
686
  </div>
687
+
688
+ <h4>2. Troubleshooting</h4>
689
+ <p>If the system returns a 503 error, check the GPU utilization metrics in the Dashboard tab. If utilization is > 95%, please scale the instance.</p>
690
  </div>
691
+
692
+ <div class="doc-card">
693
+ <h3><i class="fa-solid fa-shield-halved"></i> Trust & Safety</h3>
694
+ <p>This platform adheres to best practices in technical development. All data processed is ephemeral and not stored for training purposes unless explicitly authorized.</p>
 
 
 
 
 
 
695
  </div>
696
  </div>
697
+ </section>
698
 
699
+ <!-- Error Logs Section -->
700
+ <section id="logs">
701
+ <div class="table-container">
702
+ <div class="test-header">
703
+ <div>
704
+ <h3>System Logs</h3>
705
+ <p style="color: var(--text-muted); font-size: 0.9rem;">Identify and resolve potential vulnerabilities.</p>
706
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
707
  </div>
708
+ <table>
709
+ <thead>
710
+ <tr>
711
+ <th>Timestamp</th>
712
+ <th>Level</th>
713
+ <th>Message</th>
714
+ <th>Action</th>
715
+ </tr>
716
+ </thead>
717
+ <tbody id="logTableBody">
718
+ <tr>
719
+ <td>2023-10-27 10:45:00</td>
720
+ <td><span class="status-badge status-failed">Error</span></td>
721
+ <td class="error-msg">ConnectionTimeout: GPU Node 3 unresponsive</td>
722
+ <td><button class="btn btn-outline" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;" onclick="resolveLog(this)">Resolve</button></td>
723
+ </tr>
724
+ <tr>
725
+ <td>2023-10-27 10:42:15</td>
726
+ <td><span class="status-badge status-warning" style="background: #fef3c7; color: #d97706;">Warning</span></td>
727
+ <td>High latency detected on inference endpoint</td>
728
+ <td><button class="btn btn-outline" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;" onclick="resolveLog(this)">Resolve</button></td>
729
+ </tr>
730
+ <tr>
731
+ <td>2023-10-27 09:15:22</td>
732
+ <td><span class="status-badge status-failed">Error</span></td>
733
+ <td class="error-msg">ValueError: Input tensor shape mismatch</td>
734
+ <td><button class="btn btn-outline" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;" onclick="resolveLog(this)">Resolve</button></td>
735
+ </tr>
736
+ </tbody>
737
+ </table>
738
  </div>
739
+ </section>
740
+
741
+ <!-- Feedback Section -->
742
+ <section id="feedback">
743
+ <div class="feedback-wrapper">
744
+ <h3 style="margin-bottom: 1.5rem; text-align: center;">Community Feedback Loop</h3>
745
+ <p style="text-align: center; color: var(--text-muted); margin-bottom: 2rem;">
746
+ Help us improve the platform. Share your experience or report bugs.
747
+ </p>
748
+ <form id="feedbackForm">
749
+ <div class="form-group">
750
+ <label for="email">Email Address</label>
751
+ <input type="email" id="email" class="form-control" placeholder="you@example.com" required>
752
+ </div>
753
+ <div class="form-group">
754
+ <label for="category">Category</label>
755
+ <select id="category" class="form-control">
756
+ <option>General Feedback</option>
757
+ <option>Bug Report</option>
758
+ <option>Feature Request</option>
759
+ <option>Documentation Issue</option>
760
+ </select>
761
+ </div>
762
+ <div class="form-group">
763
+ <label for="message">Message</label>
764
+ <textarea id="message" rows="5" class="form-control" placeholder="Describe your experience or issue in detail..." required></textarea>
765
+ </div>
766
+ <button type="submit" class="btn" style="width: 100%;">Submit Feedback</button>
767
+ </form>
768
+ </div>
769
+ </section>
770
+
771
  </div>
772
  </main>
773
 
774
+ <!-- Toast Container -->
775
+ <div class="toast-container" id="toastContainer"></div>
776
+
777
+ <script>
778
+ // --- Navigation Logic ---
779
+ const navItems = document.querySelectorAll('.nav-item');
780
+ const sections = document.querySelectorAll('section');
781
+ const pageTitle = document.getElementById('pageTitle');
782
+ const sidebar = document.getElementById('sidebar');
783
+ const menuBtn = document.getElementById('menuBtn');
784
+
785
+ // Map section IDs to Titles
786
+ const titles = {
787
+ 'dashboard': 'System Overview',
788
+ 'testing': 'Testing Protocols',
789
+ 'docs': 'Documentation Center',
790
+ 'logs': 'Error Logs & Handling',
791
+ 'feedback': 'User Feedback Loop'
792
+ };
793
+
794
+ navItems.forEach(item => {
795
+ item.addEventListener('click', (e) => {
796
+ e.preventDefault();
797
+ const targetId = item.getAttribute('data-target');
798
+
799
+ // Update Active Nav
800
+ navItems.forEach(nav => nav.classList.remove('active'));
801
+ item.classList.add('active');
802
+
803
+ // Show Section
804
+ sections.forEach(sec => sec.classList.remove('active'));
805
+ document.getElementById(targetId).classList.add('active');
806
+
807
+ // Update Header Title
808
+ pageTitle.textContent = titles[targetId];
809
+
810
+ // Close sidebar on mobile after click
811
+ if(window.innerWidth <= 768) {
812
+ sidebar.classList.remove('open');
813
+ }
814
+ });
815
+ });
816
+
817
+ // Mobile Menu Toggle
818
+ menuBtn.addEventListener('click', () => {
819
+ sidebar.classList.toggle('open');
820
+ });
821
+
822
+ // --- Toast Notification System ---
823
+ function showToast(message, type = 'success') {
824
+ const container = document.getElementById('toastContainer');
825
+ const toast = document.createElement('div');
826
+
827
+ let icon = type === 'success' ? '<i class="fa-solid fa-check-circle" style="color: var(--success)"></i>' : '<i class="fa-solid fa-exclamation-circle" style="color: var(--danger)"></i>';
828
+
829
+ toast.className = `toast ${type}`;
830
+ toast.innerHTML = `
831
+ ${icon}
832
+ <span>${message}</span>
833
+ `;
834
+
835
+ container.appendChild(toast);
836
+
837
+ // Trigger animation
838
+ requestAnimationFrame(() => {
839
+ toast.classList.add('show');
840
+ });
841
+
842
+ // Remove after 3 seconds
843
+ setTimeout(() => {
844
+ toast.classList.remove('show');
845
+ setTimeout(() => {
846
+ toast.remove();
847
+ }, 300);
848
+ }, 3000);
849
+ }
850
+
851
+ // --- Test Suite Logic ---
852
+ const runTestsBtn = document.getElementById('runTestsBtn');
853
+ const testBadges = [
854
+ document.getElementById('test-1'),
855
+ document.getElementById('test-2'),
856
+ document.getElementById('test-3'),
857
+ document.getElementById('test-4')
858
+ ];
859
+
860
+ runTestsBtn.addEventListener('click', () => {
861
+ runTestsBtn.disabled = true;
862
+ runTestsBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Running...';
863
+
864
+ // Reset badges
865
+ testBadges.forEach(b => {
866
+ b.className = 'status-badge status-pending';
867
+ b.textContent = 'Pending';
868
+ });
869
+
870
+ let completed = 0;
871
+
872
+ testBadges.forEach((badge, index) => {
873
+ // Simulate network/processing delay
874
+ setTimeout(() => {
875
+ badge.className = 'status-badge status-running';
876
+ badge.textContent = 'Running...';
877
+
878
+ setTimeout(() => {
879
+ // Randomly pass or fail (mostly pass for demo)
880
+ const passed = Math.random() > 0.1;
881
+ badge.className = passed ? 'status-badge status-passed' : 'status-badge status-failed';
882
+ badge.textContent = passed ? 'Passed' : 'Failed';
883
+
884
+ completed++;
885
+ if(completed === testBadges.length) {
886
+ runTestsBtn.disabled = false;
887
+ runTestsBtn.innerHTML = '<i class="fa-solid fa-play"></i> Run All Tests';
888
+ showToast('Test suite execution completed.');
889
+ }
890
+ }, 1000 + Math.random() * 1000);
891
+ }, index * 500);
892
+ });
893
+ });
894
+
895
+ // --- Error Log Resolution Logic ---
896
+ window.resolveLog = function(btn) {
897
+ const row = btn.closest('tr');
898
+ row.style.opacity = '0.5';
899
+ btn.textContent = 'Resolved';
900
+ btn.disabled = true;
901
+ btn.style.background = '#d1fae5';
902
+ btn.style.color = '#065f46';
903
+ btn.style.borderColor = '#d1fae5';
904
+ showToast('Error marked as resolved.', 'success');
905
+ };
906
+
907
+ // --- Feedback Form Logic ---
908
+ const feedbackForm = document.getElementById('feedbackForm');
909
+ feedbackForm.addEventListener('submit', (e) => {
910
+ e.preventDefault();
911
+
912
+ // Simulate API call
913
+ const btn = feedbackForm.querySelector('button');
914
+ const originalText = btn.textContent;
915
+ btn.textContent = 'Sending...';
916
+ btn.disabled = true;
917
+
918
+ setTimeout(() => {
919
+ showToast('Feedback submitted successfully. Thank you!');
920
+ feedbackForm.reset();
921
+ btn.textContent = originalText;
922
+ btn.disabled = false;
923
+ }, 1500);
924
+ });
925
+
926
+ // Initialize with a welcome toast
927
+ window.addEventListener('load', () => {
928
+ setTimeout(() => {
929
+ showToast('System online. Gradio Space ready.');
930
+ }, 500);
931
+ });
932
+
933
+ </script>
934
  </body>
935
+ </html>