Hugging Face's logo

Spaces:
elgarrai
/
neuralfroge
Running

App Files Community
elgarrai commited on
Commit
d6b5c2f
·
verified ·
1 Parent(s): 7f2f971

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +441 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Neuralfroge
3
- emoji: ⚡
4
  colorFrom: blue
5
- colorTo: indigo
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: neuralfroge
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: green
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,441 @@
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>NeuralForge - CPU LLM Training</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
+ }
13
+ .progress-bar {
14
+ height: 8px;
15
+ transition: width 0.3s ease;
16
+ }
17
+ .model-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .terminal {
22
+ font-family: 'Courier New', monospace;
23
+ height: 300px;
24
+ overflow-y: auto;
25
+ }
26
+ @keyframes pulse {
27
+ 0%, 100% {
28
+ opacity: 1;
29
+ }
30
+ 50% {
31
+ opacity: 0.5;
32
+ }
33
+ }
34
+ .animate-pulse {
35
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-100 min-h-screen">
40
+ <div class="gradient-bg text-white">
41
+ <div class="container mx-auto px-4 py-6">
42
+ <header class="flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <i class="fas fa-brain text-3xl"></i>
45
+ <h1 class="text-2xl font-bold">NeuralForge</h1>
46
+ </div>
47
+ <nav class="hidden md:flex space-x-6">
48
+ <a href="#" class="hover:text-blue-200">Dashboard</a>
49
+ <a href="#" class="hover:text-blue-200">Models</a>
50
+ <a href="#" class="hover:text-blue-200">Datasets</a>
51
+ <a href="#" class="hover:text-blue-200">Training</a>
52
+ <a href="#" class="hover:text-blue-200">Settings</a>
53
+ </nav>
54
+ <button class="md:hidden text-2xl">
55
+ <i class="fas fa-bars"></i>
56
+ </button>
57
+ </header>
58
+
59
+ <div class="mt-12 mb-16 text-center">
60
+ <h2 class="text-4xl font-bold mb-4">CPU-Powered LLM Training</h2>
61
+ <p class="text-xl max-w-2xl mx-auto">Train language models efficiently using your CPU resources with our optimized training pipeline</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="container mx-auto px-4 py-8 -mt-10">
67
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
68
+ <div class="flex flex-col md:flex-row gap-6">
69
+ <div class="md:w-2/3">
70
+ <h3 class="text-xl font-semibold mb-4">Training Configuration</h3>
71
+
72
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
73
+ <div>
74
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model Architecture</label>
75
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
76
+ <option>GPT-2 Small</option>
77
+ <option>GPT-2 Medium</option>
78
+ <option>BERT Base</option>
79
+ <option>DistilBERT</option>
80
+ <option>Custom...</option>
81
+ </select>
82
+ </div>
83
+
84
+ <div>
85
+ <label class="block text-sm font-medium text-gray-700 mb-1">Training Dataset</label>
86
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
87
+ <option>Wikipedia (English)</option>
88
+ <option>BookCorpus</option>
89
+ <option>OpenWebText</option>
90
+ <option>Custom Dataset</option>
91
+ </select>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
96
+ <div>
97
+ <label class="block text-sm font-medium text-gray-700 mb-1">Batch Size</label>
98
+ <input type="number" value="8" min="1" max="32" class="w-full p-2 border border-gray-300 rounded-md">
99
+ </div>
100
+
101
+ <div>
102
+ <label class="block text-sm font-medium text-gray-700 mb-1">Learning Rate</label>
103
+ <input type="number" step="0.00001" value="0.0001" class="w-full p-2 border border-gray-300 rounded-md">
104
+ </div>
105
+
106
+ <div>
107
+ <label class="block text-sm font-medium text-gray-700 mb-1">Epochs</label>
108
+ <input type="number" value="3" min="1" max="100" class="w-full p-2 border border-gray-300 rounded-md">
109
+ </div>
110
+ </div>
111
+
112
+ <div class="mb-6">
113
+ <label class="block text-sm font-medium text-gray-700 mb-2">CPU Threads (Max: <span id="maxThreads">8</span>)</label>
114
+ <input type="range" min="1" max="8" value="4" class="w-full" id="threadSlider">
115
+ <div class="flex justify-between text-xs text-gray-500">
116
+ <span>1</span>
117
+ <span>2</span>
118
+ <span>3</span>
119
+ <span>4</span>
120
+ <span>5</span>
121
+ <span>6</span>
122
+ <span>7</span>
123
+ <span>8</span>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="flex space-x-4">
128
+ <button id="startTraining" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
129
+ <i class="fas fa-play mr-2"></i> Start Training
130
+ </button>
131
+ <button class="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition flex items-center">
132
+ <i class="fas fa-save mr-2"></i> Save Config
133
+ </button>
134
+ <button id="stopTraining" class="px-6 py-2 border border-red-300 text-red-600 rounded-md hover:bg-red-50 transition flex items-center hidden">
135
+ <i class="fas fa-stop mr-2"></i> Stop Training
136
+ </button>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="md:w-1/3 bg-gray-50 p-4 rounded-lg">
141
+ <h3 class="text-lg font-semibold mb-4">System Resources</h3>
142
+
143
+ <div class="mb-4">
144
+ <div class="flex justify-between mb-1">
145
+ <span class="text-sm font-medium">CPU Utilization</span>
146
+ <span id="cpuUsage" class="text-sm">0%</span>
147
+ </div>
148
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
149
+ <div id="cpuBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="mb-4">
154
+ <div class="flex justify-between mb-1">
155
+ <span class="text-sm font-medium">Memory Usage</span>
156
+ <span id="memUsage" class="text-sm">0 GB / 16 GB</span>
157
+ </div>
158
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
159
+ <div id="memBar" class="bg-green-600 h-2.5 rounded-full" style="width: 0%"></div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="mb-4">
164
+ <div class="flex justify-between mb-1">
165
+ <span class="text-sm font-medium">Disk Cache</span>
166
+ <span id="diskUsage" class="text-sm">0 GB / 50 GB</span>
167
+ </div>
168
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
169
+ <div id="diskBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="mt-6">
174
+ <h4 class="text-sm font-semibold mb-2">Estimated Training Time</h4>
175
+ <div class="bg-white p-3 rounded-md border border-gray-200">
176
+ <div class="flex items-center">
177
+ <i class="fas fa-clock text-blue-500 mr-2"></i>
178
+ <span id="estTime">Calculating...</span>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
187
+ <div class="bg-white rounded-xl shadow-lg p-6">
188
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
189
+ <i class="fas fa-terminal mr-2 text-blue-500"></i> Training Log
190
+ </h3>
191
+ <div id="terminal" class="terminal bg-black text-green-400 p-4 rounded-md font-mono text-sm overflow-y-auto">
192
+ <div>> Welcome to NeuralForge LLM Trainer</div>
193
+ <div>> System ready for training configuration</div>
194
+ <div>> CPU: 8 cores detected</div>
195
+ <div>> RAM: 16GB available</div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="bg-white rounded-xl shadow-lg p-6">
200
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
201
+ <i class="fas fa-chart-line mr-2 text-blue-500"></i> Training Metrics
202
+ </h3>
203
+ <div class="grid grid-cols-2 gap-4 mb-4">
204
+ <div class="bg-gray-50 p-3 rounded-md">
205
+ <div class="text-sm text-gray-500">Loss</div>
206
+ <div id="lossValue" class="text-2xl font-bold">--</div>
207
+ </div>
208
+ <div class="bg-gray-50 p-3 rounded-md">
209
+ <div class="text-sm text-gray-500">Perplexity</div>
210
+ <div id="perplexityValue" class="text-2xl font-bold">--</div>
211
+ </div>
212
+ </div>
213
+ <div class="h-48 bg-gray-50 rounded-md flex items-center justify-center">
214
+ <p class="text-gray-400">Training metrics will appear here</p>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
220
+ <h3 class="text-xl font-semibold mb-6">Available Model Architectures</h3>
221
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
222
+ <div class="model-card bg-gray-50 p-5 rounded-lg border border-gray-200 transition duration-300 cursor-pointer hover:border-blue-300">
223
+ <div class="flex justify-between items-start mb-3">
224
+ <h4 class="font-semibold">GPT-2 Small</h4>
225
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Recommended</span>
226
+ </div>
227
+ <p class="text-sm text-gray-600 mb-4">117M parameters, good for most tasks</p>
228
+ <div class="text-xs text-gray-500">
229
+ <div class="flex justify-between mb-1">
230
+ <span>CPU RAM Needed:</span>
231
+ <span>4GB</span>
232
+ </div>
233
+ <div class="flex justify-between">
234
+ <span>Training Time:</span>
235
+ <span>~12 hours</span>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="model-card bg-gray-50 p-5 rounded-lg border border-gray-200 transition duration-300 cursor-pointer hover:border-blue-300">
241
+ <div class="flex justify-between items-start mb-3">
242
+ <h4 class="font-semibold">DistilBERT</h4>
243
+ </div>
244
+ <p class="text-sm text-gray-600 mb-4">66M parameters, distilled BERT model</p>
245
+ <div class="text-xs text-gray-500">
246
+ <div class="flex justify-between mb-1">
247
+ <span>CPU RAM Needed:</span>
248
+ <span>3GB</span>
249
+ </div>
250
+ <div class="flex justify-between">
251
+ <span>Training Time:</span>
252
+ <span>~8 hours</span>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="model-card bg-gray-50 p-5 rounded-lg border border-gray-200 transition duration-300 cursor-pointer hover:border-blue-300">
258
+ <div class="flex justify-between items-start mb-3">
259
+ <h4 class="font-semibold">TinyLLAMA</h4>
260
+ </div>
261
+ <p class="text-sm text-gray-600 mb-4">28M parameters, lightweight option</p>
262
+ <div class="text-xs text-gray-500">
263
+ <div class="flex justify-between mb-1">
264
+ <span>CPU RAM Needed:</span>
265
+ <span>2GB</span>
266
+ </div>
267
+ <div class="flex justify-between">
268
+ <span>Training Time:</span>
269
+ <span>~5 hours</span>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <footer class="bg-gray-800 text-white py-8">
278
+ <div class="container mx-auto px-4">
279
+ <div class="flex flex-col md:flex-row justify-between">
280
+ <div class="mb-6 md:mb-0">
281
+ <h3 class="text-xl font-bold mb-4">NeuralForge</h3>
282
+ <p class="text-gray-400 max-w-md">Optimized CPU training for language models. No GPU required.</p>
283
+ </div>
284
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
285
+ <div>
286
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Product</h4>
287
+ <ul class="space-y-2">
288
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
289
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
290
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
291
+ </ul>
292
+ </div>
293
+ <div>
294
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Resources</h4>
295
+ <ul class="space-y-2">
296
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
297
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
298
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
299
+ </ul>
300
+ </div>
301
+ <div>
302
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Company</h4>
303
+ <ul class="space-y-2">
304
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
305
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
306
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
307
+ </ul>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ <div class="mt-8 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
312
+ <p class="text-gray-400 text-sm">© 2023 NeuralForge. All rights reserved.</p>
313
+ <div class="flex space-x-6 mt-4 md:mt-0">
314
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
315
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
316
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </footer>
321
+
322
+ <script>
323
+ // Simulate training process
324
+ let trainingInterval;
325
+ let isTraining = false;
326
+ let epoch = 0;
327
+ let totalEpochs = 3;
328
+ let loss = 0;
329
+ let perplexity = 0;
330
+
331
+ document.getElementById('startTraining').addEventListener('click', startTraining);
332
+ document.getElementById('stopTraining').addEventListener('click', stopTraining);
333
+ document.getElementById('threadSlider').addEventListener('input', updateThreads);
334
+
335
+ function updateThreads() {
336
+ const threads = document.getElementById('threadSlider').value;
337
+ document.getElementById('maxThreads').textContent = threads;
338
+ updateEstTime(threads);
339
+ }
340
+
341
+ function updateEstTime(threads) {
342
+ const baseTime = 12; // hours for GPT-2 Small with 4 threads
343
+ const estTime = (baseTime * 4 / threads).toFixed(1);
344
+ document.getElementById('estTime').textContent = `~${estTime} hours`;
345
+ }
346
+
347
+ function startTraining() {
348
+ if (isTraining) return;
349
+
350
+ isTraining = true;
351
+ document.getElementById('startTraining').classList.add('hidden');
352
+ document.getElementById('stopTraining').classList.remove('hidden');
353
+
354
+ const terminal = document.getElementById('terminal');
355
+ terminal.innerHTML += '<div>> Starting training process...</div>';
356
+ terminal.scrollTop = terminal.scrollHeight;
357
+
358
+ epoch = 0;
359
+ loss = 4.5;
360
+ perplexity = 120;
361
+
362
+ // Update metrics
363
+ document.getElementById('lossValue').textContent = loss.toFixed(4);
364
+ document.getElementById('perplexityValue').textContent = Math.round(perplexity);
365
+
366
+ // Simulate resource usage
367
+ let cpuUsage = 10;
368
+ let memUsage = 2;
369
+ let diskUsage = 5;
370
+
371
+ trainingInterval = setInterval(() => {
372
+ // Simulate CPU usage
373
+ cpuUsage = Math.min(100, cpuUsage + Math.random() * 10);
374
+ document.getElementById('cpuUsage').textContent = Math.round(cpuUsage) + '%';
375
+ document.getElementById('cpuBar').style.width = cpuUsage + '%';
376
+
377
+ // Simulate memory usage
378
+ memUsage = Math.min(16, memUsage + Math.random() * 0.5);
379
+ document.getElementById('memUsage').textContent = memUsage.toFixed(1) + ' GB / 16 GB';
380
+ document.getElementById('memBar').style.width = (memUsage / 16 * 100) + '%';
381
+
382
+ // Simulate disk usage
383
+ diskUsage = Math.min(50, diskUsage + Math.random() * 2);
384
+ document.getElementById('diskUsage').textContent = diskUsage.toFixed(1) + ' GB / 50 GB';
385
+ document.getElementById('diskBar').style.width = (diskUsage / 50 * 100) + '%';
386
+
387
+ // Update training metrics
388
+ if (Math.random() > 0.7) {
389
+ loss = Math.max(0.5, loss - Math.random() * 0.3);
390
+ perplexity = Math.max(10, perplexity - Math.random() * 5);
391
+
392
+ document.getElementById('lossValue').textContent = loss.toFixed(4);
393
+ document.getElementById('perplexityValue').textContent = Math.round(perplexity);
394
+
395
+ // Add to terminal log
396
+ if (Math.random() > 0.8) {
397
+ epoch++;
398
+ const progress = Math.min(100, Math.round((epoch / totalEpochs) * 100));
399
+ terminal.innerHTML += `<div>> Epoch ${epoch}/${totalEpochs} - Loss: ${loss.toFixed(4)} - Perplexity: ${Math.round(perplexity)}</div>`;
400
+ terminal.scrollTop = terminal.scrollHeight;
401
+
402
+ if (epoch >= totalEpochs) {
403
+ stopTraining();
404
+ terminal.innerHTML += '<div class="text-green-300">> Training completed successfully!</div>';
405
+ terminal.scrollTop = terminal.scrollHeight;
406
+ }
407
+ }
408
+ }
409
+ }, 1000);
410
+ }
411
+
412
+ function stopTraining() {
413
+ clearInterval(trainingInterval);
414
+ isTraining = false;
415
+ document.getElementById('startTraining').classList.remove('hidden');
416
+ document.getElementById('stopTraining').classList.add('hidden');
417
+
418
+ // Reset resource usage
419
+ document.getElementById('cpuUsage').textContent = '0%';
420
+ document.getElementById('cpuBar').style.width = '0%';
421
+ document.getElementById('memUsage').textContent = '0 GB / 16 GB';
422
+ document.getElementById('memBar').style.width = '0%';
423
+ document.getElementById('diskUsage').textContent = '0 GB / 50 GB';
424
+ document.getElementById('diskBar').style.width = '0%';
425
+ }
426
+
427
+ // Initialize
428
+ updateThreads();
429
+
430
+ // Model card selection
431
+ document.querySelectorAll('.model-card').forEach(card => {
432
+ card.addEventListener('click', function() {
433
+ document.querySelectorAll('.model-card').forEach(c => {
434
+ c.classList.remove('border-blue-500', 'bg-blue-50');
435
+ });
436
+ this.classList.add('border-blue-500', 'bg-blue-50');
437
+ });
438
+ });
439
+ </script>
440
+ <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=elgarrai/neuralfroge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
441
+ </html>