Hugging Face's logo

Spaces:
Uberpu
/
uberpu-agent-sync
Running

App Files Community
Uberpu commited on
Commit
40206cc
·
verified ·
1 Parent(s): 0bf2175

create an html UI for a saas dashboard that manages multiples agents across the org, and displays stats about tasks completed, time, success rate etc , it must be modern and responsive, and code must be maintainable - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +475 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Uberpu Agent Sync
3
- emoji: 👀
4
- colorFrom: blue
5
- colorTo: green
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: uberpu-agent-sync
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,475 @@
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>Agent Management Dashboard</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#1e293b',
17
+ light: '#f8fafc'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ .chart-container {
25
+ position: relative;
26
+ height: 100%;
27
+ width: 100%;
28
+ }
29
+
30
+ .progress-ring__circle {
31
+ transition: stroke-dashoffset 0.35s;
32
+ transform: rotate(-90deg);
33
+ transform-origin: 50% 50%;
34
+ }
35
+
36
+ .sidebar {
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ @media (max-width: 768px) {
41
+ .sidebar {
42
+ transform: translateX(-100%);
43
+ position: absolute;
44
+ z-index: 50;
45
+ height: 100vh;
46
+ }
47
+ .sidebar-open {
48
+ transform: translateX(0);
49
+ }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans">
54
+ <div class="flex h-screen overflow-hidden">
55
+ <!-- Sidebar -->
56
+ <div id="sidebar" class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
57
+ <div class="p-4 border-b border-gray-200">
58
+ <h1 class="text-xl font-bold text-primary flex items-center">
59
+ <i class="fas fa-robot mr-2"></i>
60
+ AgentSync
61
+ </h1>
62
+ </div>
63
+ <nav class="flex-1 overflow-y-auto p-4">
64
+ <div class="space-y-1">
65
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white">
66
+ <i class="fas fa-chart-pie mr-3"></i>
67
+ Dashboard
68
+ </a>
69
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
70
+ <i class="fas fa-users mr-3"></i>
71
+ Agents
72
+ </a>
73
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
74
+ <i class="fas fa-tasks mr-3"></i>
75
+ Tasks
76
+ </a>
77
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
78
+ <i class="fas fa-chart-line mr-3"></i>
79
+ Analytics
80
+ </a>
81
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
82
+ <i class="fas fa-cog mr-3"></i>
83
+ Settings
84
+ </a>
85
+ </div>
86
+
87
+ <div class="mt-8">
88
+ <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Teams</h3>
89
+ <div class="mt-2 space-y-1">
90
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
91
+ <span class="w-2 h-2 mr-3 rounded-full bg-green-500"></span>
92
+ Support Team
93
+ </a>
94
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
95
+ <span class="w-2 h-2 mr-3 rounded-full bg-blue-500"></span>
96
+ Sales Team
97
+ </a>
98
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100">
99
+ <span class="w-2 h-2 mr-3 rounded-full bg-purple-500"></span>
100
+ Marketing Team
101
+ </a>
102
+ </div>
103
+ </div>
104
+ </nav>
105
+ <div class="p-4 border-t border-gray-200">
106
+ <div class="flex items-center">
107
+ <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
108
+ <div class="ml-3">
109
+ <p class="text-sm font-medium text-gray-700">Sarah Johnson</p>
110
+ <p class="text-xs text-gray-500">Admin</p>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Main content -->
117
+ <div class="flex-1 flex flex-col overflow-hidden">
118
+ <!-- Top navigation -->
119
+ <header class="bg-white border-b border-gray-200">
120
+ <div class="flex items-center justify-between px-6 py-4">
121
+ <div class="flex items-center">
122
+ <button id="sidebar-toggle" class="md:hidden text-gray-500 focus:outline-none">
123
+ <i class="fas fa-bars text-xl"></i>
124
+ </button>
125
+ <h2 class="text-lg font-semibold text-gray-800 ml-4">Dashboard Overview</h2>
126
+ </div>
127
+ <div class="flex items-center space-x-4">
128
+ <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
129
+ <i class="fas fa-bell"></i>
130
+ </button>
131
+ <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100 focus:outline-none">
132
+ <i class="fas fa-search"></i>
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </header>
137
+
138
+ <!-- Main content area -->
139
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
140
+ <!-- Stats cards -->
141
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
142
+ <div class="bg-white rounded-xl shadow-sm p-6">
143
+ <div class="flex items-center justify-between">
144
+ <div>
145
+ <p class="text-sm font-medium text-gray-500">Total Agents</p>
146
+ <p class="text-2xl font-bold text-gray-800 mt-1">42</p>
147
+ <p class="text-xs text-green-500 mt-1">
148
+ <i class="fas fa-arrow-up mr-1"></i> 12% from last month
149
+ </p>
150
+ </div>
151
+ <div class="p-3 rounded-lg bg-indigo-50 text-primary">
152
+ <i class="fas fa-users text-xl"></i>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="bg-white rounded-xl shadow-sm p-6">
158
+ <div class="flex items-center justify-between">
159
+ <div>
160
+ <p class="text-sm font-medium text-gray-500">Tasks Completed</p>
161
+ <p class="text-2xl font-bold text-gray-800 mt-1">1,248</p>
162
+ <p class="text-xs text-green-500 mt-1">
163
+ <i class="fas fa-arrow-up mr-1"></i> 8% from last week
164
+ </p>
165
+ </div>
166
+ <div class="p-3 rounded-lg bg-green-50 text-green-500">
167
+ <i class="fas fa-check-circle text-xl"></i>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="bg-white rounded-xl shadow-sm p-6">
173
+ <div class="flex items-center justify-between">
174
+ <div>
175
+ <p class="text-sm font-medium text-gray-500">Success Rate</p>
176
+ <p class="text-2xl font-bold text-gray-800 mt-1">92%</p>
177
+ <p class="text-xs text-red-500 mt-1">
178
+ <i class="fas fa-arrow-down mr-1"></i> 2% from last week
179
+ </p>
180
+ </div>
181
+ <div class="p-3 rounded-lg bg-purple-50 text-purple-500">
182
+ <i class="fas fa-chart-line text-xl"></i>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="bg-white rounded-xl shadow-sm p-6">
188
+ <div class="flex items-center justify-between">
189
+ <div>
190
+ <p class="text-sm font-medium text-gray-500">Avg. Time/Task</p>
191
+ <p class="text-2xl font-bold text-gray-800 mt-1">24m</p>
192
+ <p class="text-xs text-green-500 mt-1">
193
+ <i class="fas fa-arrow-down mr-1"></i> 15% from last week
194
+ </p>
195
+ </div>
196
+ <div class="p-3 rounded-lg bg-blue-50 text-blue-500">
197
+ <i class="fas fa-clock text-xl"></i>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Charts and main content -->
204
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
205
+ <!-- Performance chart -->
206
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
207
+ <div class="flex items-center justify-between mb-6">
208
+ <h3 class="text-lg font-semibold text-gray-800">Agent Performance</h3>
209
+ <div class="flex space-x-2">
210
+ <button class="px-3 py-1 text-xs bg-primary text-white rounded-lg">Week</button>
211
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg">Month</button>
212
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg">Year</button>
213
+ </div>
214
+ </div>
215
+ <div class="chart-container">
216
+ <canvas id="performanceChart" height="300"></canvas>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Top performers -->
221
+ <div class="bg-white rounded-xl shadow-sm p-6">
222
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">Top Performers</h3>
223
+ <div class="space-y-4">
224
+ <div class="flex items-center">
225
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-primary">
226
+ <i class="fas fa-crown"></i>
227
+ </div>
228
+ <div class="ml-3">
229
+ <p class="text-sm font-medium text-gray-800">Alex Johnson</p>
230
+ <p class="text-xs text-gray-500">98% success rate</p>
231
+ </div>
232
+ <div class="ml-auto text-sm font-medium text-primary">1,248 pts</div>
233
+ </div>
234
+
235
+ <div class="flex items-center">
236
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500">
237
+ <i class="fas fa-medal"></i>
238
+ </div>
239
+ <div class="ml-3">
240
+ <p class="text-sm font-medium text-gray-800">Maria Garcia</p>
241
+ <p class="text-xs text-gray-500">96% success rate</p>
242
+ </div>
243
+ <div class="ml-auto text-sm font-medium text-purple-500">1,156 pts</div>
244
+ </div>
245
+
246
+ <div class="flex items-center">
247
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
248
+ <i class="fas fa-medal"></i>
249
+ </div>
250
+ <div class="ml-3">
251
+ <p class="text-sm font-medium text-gray-800">Sam Wilson</p>
252
+ <p class="text-xs text-gray-500">95% success rate</p>
253
+ </div>
254
+ <div class="ml-auto text-sm font-medium text-blue-500">1,102 pts</div>
255
+ </div>
256
+
257
+ <div class="flex items-center">
258
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500">
259
+ <i class="fas fa-award"></i>
260
+ </div>
261
+ <div class="ml-3">
262
+ <p class="text-sm font-medium text-gray-800">Lisa Chen</p>
263
+ <p class="text-xs text-gray-500">94% success rate</p>
264
+ </div>
265
+ <div class="ml-auto text-sm font-medium text-green-500">1,045 pts</div>
266
+ </div>
267
+
268
+ <div class="flex items-center">
269
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-500">
270
+ <i class="fas fa-award"></i>
271
+ </div>
272
+ <div class="ml-3">
273
+ <p class="text-sm font-medium text-gray-800">David Kim</p>
274
+ <p class="text-xs text-gray-500">93% success rate</p>
275
+ </div>
276
+ <div class="ml-auto text-sm font-medium text-yellow-500">998 pts</div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Recent activity and task distribution -->
283
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
284
+ <!-- Recent activity -->
285
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
286
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">Recent Activity</h3>
287
+ <div class="space-y-4">
288
+ <div class="flex items-start">
289
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-primary mt-1">
290
+ <i class="fas fa-check"></i>
291
+ </div>
292
+ <div class="ml-3">
293
+ <p class="text-sm font-medium text-gray-800">Alex Johnson completed task #T-1248</p>
294
+ <p class="text-xs text-gray-500">Customer onboarding - 24m 12s</p>
295
+ <p class="text-xs text-gray-400 mt-1">10 minutes ago</p>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="flex items-start">
300
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mt-1">
301
+ <i class="fas fa-plus"></i>
302
+ </div>
303
+ <div class="ml-3">
304
+ <p class="text-sm font-medium text-gray-800">New agent added - Sarah Miller</p>
305
+ <p class="text-xs text-gray-500">Assigned to Support Team</p>
306
+ <p class="text-xs text-gray-400 mt-1">45 minutes ago</p>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="flex items-start">
311
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 mt-1">
312
+ <i class="fas fa-tasks"></i>
313
+ </div>
314
+ <div class="ml-3">
315
+ <p class="text-sm font-medium text-gray-800">Batch of 24 tasks assigned</p>
316
+ <p class="text-xs text-gray-500">Distributed across Sales Team</p>
317
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="flex items-start">
322
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-500 mt-1">
323
+ <i class="fas fa-chart-line"></i>
324
+ </div>
325
+ <div class="ml-3">
326
+ <p class="text-sm font-medium text-gray-800">Weekly report generated</p>
327
+ <p class="text-xs text-gray-500">Overall success rate: 92% (+2%)</p>
328
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Task distribution -->
335
+ <div class="bg-white rounded-xl shadow-sm p-6">
336
+ <h3 class="text-lg font-semibold text-gray-800 mb-6">Task Distribution</h3>
337
+ <div class="chart-container">
338
+ <canvas id="taskDistributionChart" height="250"></canvas>
339
+ </div>
340
+ <div class="mt-4 grid grid-cols-2 gap-4">
341
+ <div class="flex items-center">
342
+ <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>
343
+ <span class="text-sm text-gray-600">Completed</span>
344
+ </div>
345
+ <div class="flex items-center">
346
+ <span class="w-3 h-3 rounded-full bg-yellow-400 mr-2"></span>
347
+ <span class="text-sm text-gray-600">In Progress</span>
348
+ </div>
349
+ <div class="flex items-center">
350
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span>
351
+ <span class="text-sm text-gray-600">Pending</span>
352
+ </div>
353
+ <div class="flex items-center">
354
+ <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
355
+ <span class="text-sm text-gray-600">Failed</span>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </main>
361
+ </div>
362
+ </div>
363
+
364
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
365
+ <script>
366
+ // Sidebar toggle for mobile
367
+ const sidebarToggle = document.getElementById('sidebar-toggle');
368
+ const sidebar = document.getElementById('sidebar');
369
+
370
+ sidebarToggle.addEventListener('click', () => {
371
+ sidebar.classList.toggle('sidebar-open');
372
+ });
373
+
374
+ // Performance chart
375
+ const performanceCtx = document.getElementById('performanceChart').getContext('2d');
376
+ const performanceChart = new Chart(performanceCtx, {
377
+ type: 'line',
378
+ data: {
379
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
380
+ datasets: [
381
+ {
382
+ label: 'Tasks Completed',
383
+ data: [320, 450, 510, 600, 720, 800, 950],
384
+ borderColor: '#6366f1',
385
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
386
+ tension: 0.3,
387
+ fill: true
388
+ },
389
+ {
390
+ label: 'Success Rate',
391
+ data: [85, 87, 89, 90, 91, 92, 92],
392
+ borderColor: '#10b981',
393
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
394
+ tension: 0.3,
395
+ fill: true
396
+ }
397
+ ]
398
+ },
399
+ options: {
400
+ responsive: true,
401
+ plugins: {
402
+ legend: {
403
+ position: 'top',
404
+ },
405
+ },
406
+ scales: {
407
+ y: {
408
+ beginAtZero: false,
409
+ ticks: {
410
+ callback: function(value) {
411
+ if (this.datasetIndex === 1) {
412
+ return value + '%';
413
+ }
414
+ return value;
415
+ }
416
+ }
417
+ }
418
+ }
419
+ }
420
+ });
421
+
422
+ // Task distribution chart
423
+ const taskDistributionCtx = document.getElementById('taskDistributionChart').getContext('2d');
424
+ const taskDistributionChart = new Chart(taskDistributionCtx, {
425
+ type: 'doughnut',
426
+ data: {
427
+ labels: ['Completed', 'In Progress', 'Pending', 'Failed'],
428
+ datasets: [{
429
+ data: [65, 15, 15, 5],
430
+ backgroundColor: [
431
+ '#6366f1',
432
+ '#f59e0b',
433
+ '#10b981',
434
+ '#ef4444'
435
+ ],
436
+ borderWidth: 0
437
+ }]
438
+ },
439
+ options: {
440
+ responsive: true,
441
+ cutout: '70%',
442
+ plugins: {
443
+ legend: {
444
+ display: false
445
+ }
446
+ }
447
+ }
448
+ });
449
+
450
+ // Simulate data updates
451
+ setInterval(() => {
452
+ // Update performance chart
453
+ const performanceData = performanceChart.data.datasets[0].data;
454
+ const newValue = performanceData[performanceData.length - 1] + Math.floor(Math.random() * 50) - 20;
455
+ performanceData.shift();
456
+ performanceData.push(newValue > 0 ? newValue : 50);
457
+
458
+ const successData = performanceChart.data.datasets[1].data;
459
+ const newSuccess = successData[successData.length - 1] + Math.floor(Math.random() * 4) - 1;
460
+ successData.shift();
461
+ successData.push(newSuccess > 80 && newSuccess < 100 ? newSuccess : 92);
462
+
463
+ performanceChart.update();
464
+
465
+ // Update task distribution
466
+ const taskData = taskDistributionChart.data.datasets[0].data;
467
+ taskData[0] = 60 + Math.floor(Math.random() * 15);
468
+ taskData[1] = 10 + Math.floor(Math.random() * 10);
469
+ taskData[2] = 15 + Math.floor(Math.random() * 10);
470
+ taskData[3] = 100 - taskData[0] - taskData[1] - taskData[2];
471
+ taskDistributionChart.update();
472
+ }, 5000);
473
+ </script>
474
+ <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=Uberpu/uberpu-agent-sync" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
475
+ </html>