Hugging Face's logo

Spaces:
adowu
/
agentsaww
Running

App Files Community
adowu commited on
Commit
edffae9
·
verified ·
1 Parent(s): ac27481

dopracuj to bardziej szczegółowo. dodatkowo aplikacja powinna mieć wszystkie opisane funkcje i wyglądać bardziej nowocześnie. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +762 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Agentsaww
3
- emoji: 👀
4
- colorFrom: purple
5
- colorTo: gray
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: agentsaww
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,762 @@
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>AI Assistant Platform | Chatbots & Agents</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: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1E293B',
17
+ light: '#F8FAFC'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Inter', sans-serif;
28
+ background-color: #F1F5F9;
29
+ }
30
+
31
+ .sidebar {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .sidebar.collapsed {
36
+ width: 70px;
37
+ }
38
+
39
+ .sidebar.expanded {
40
+ width: 250px;
41
+ }
42
+
43
+ .sidebar-item:hover {
44
+ background-color: #E0E7FF;
45
+ }
46
+
47
+ .sidebar-item.active {
48
+ background-color: #4F46E5;
49
+ color: white;
50
+ }
51
+
52
+ .dashboard-card {
53
+ transition: all 0.2s ease;
54
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
55
+ }
56
+
57
+ .dashboard-card:hover {
58
+ transform: translateY(-3px);
59
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
60
+ }
61
+
62
+ .status-indicator {
63
+ display: inline-block;
64
+ width: 10px;
65
+ height: 10px;
66
+ border-radius: 50%;
67
+ margin-right: 8px;
68
+ }
69
+
70
+ .status-active {
71
+ background-color: #10B981;
72
+ }
73
+
74
+ .status-draft {
75
+ background-color: #F59E0B;
76
+ }
77
+
78
+ .status-inactive {
79
+ background-color: #EF4444;
80
+ }
81
+
82
+ .workflow-block {
83
+ min-height: 80px;
84
+ border-radius: 8px;
85
+ cursor: move;
86
+ transition: all 0.2s ease;
87
+ }
88
+
89
+ .workflow-block:hover {
90
+ transform: scale(1.02);
91
+ }
92
+
93
+ .workflow-canvas {
94
+ min-height: 500px;
95
+ background: linear-gradient(45deg, #f0f4f8, #e2e8f0);
96
+ border-radius: 12px;
97
+ position: relative;
98
+ overflow: hidden;
99
+ }
100
+
101
+ .workflow-canvas::before {
102
+ content: "";
103
+ position: absolute;
104
+ top: 0;
105
+ left: 0;
106
+ right: 0;
107
+ bottom: 0;
108
+ background-image:
109
+ linear-gradient(rgba(200, 200, 200, 0.1) 1px, transparent 1px),
110
+ linear-gradient(90deg, rgba(200, 200, 200, 0.1) 1px, transparent 1px);
111
+ background-size: 20px 20px;
112
+ z-index: 0;
113
+ }
114
+
115
+ .canvas-content {
116
+ position: relative;
117
+ z-index: 1;
118
+ }
119
+
120
+ .connection-line {
121
+ stroke: #94A3B8;
122
+ stroke-width: 2;
123
+ marker-end: url(#arrowhead);
124
+ }
125
+
126
+ .chat-message {
127
+ max-width: 80%;
128
+ border-radius: 18px;
129
+ padding: 12px 16px;
130
+ margin-bottom: 16px;
131
+ }
132
+
133
+ .user-message {
134
+ background-color: #4F46E5;
135
+ color: white;
136
+ margin-left: auto;
137
+ }
138
+
139
+ .bot-message {
140
+ background-color: #E2E8F0;
141
+ color: #1E293B;
142
+ }
143
+
144
+ .pulse {
145
+ animation: pulse 2s infinite;
146
+ }
147
+
148
+ @keyframes pulse {
149
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
150
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
151
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
152
+ }
153
+
154
+ .fade-in {
155
+ animation: fadeIn 0.3s ease-in;
156
+ }
157
+
158
+ @keyframes fadeIn {
159
+ from { opacity: 0; transform: translateY(10px); }
160
+ to { opacity: 1; transform: translateY(0); }
161
+ }
162
+ </style>
163
+ </head>
164
+ <body class="bg-gray-50">
165
+ <!-- Main Container -->
166
+ <div class="flex h-screen">
167
+ <!-- Sidebar -->
168
+ <div id="sidebar" class="sidebar expanded bg-white shadow-lg h-full flex flex-col">
169
+ <div class="p-5 flex items-center justify-between border-b">
170
+ <div class="flex items-center">
171
+ <div class="bg-indigo-600 w-10 h-10 rounded-lg flex items-center justify-center">
172
+ <i class="fas fa-robot text-white text-xl"></i>
173
+ </div>
174
+ <h1 class="text-xl font-bold ml-3 text-gray-800">AI Assistant</h1>
175
+ </div>
176
+ <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700">
177
+ <i class="fas fa-bars"></i>
178
+ </button>
179
+ </div>
180
+
181
+ <div class="flex-1 py-4">
182
+ <nav>
183
+ <a href="#" class="sidebar-item active flex items-center px-5 py-3 mb-1">
184
+ <i class="fas fa-home mr-3"></i>
185
+ <span>Dashboard</span>
186
+ </a>
187
+ <a href="#" class="sidebar-item flex items-center px-5 py-3 mb-1">
188
+ <i class="fas fa-comments mr-3"></i>
189
+ <span>Chatbots</span>
190
+ </a>
191
+ <a href="#" class="sidebar-item flex items-center px-5 py-3 mb-1">
192
+ <i class="fas fa-microchip mr-3"></i>
193
+ <span>AI Agents</span>
194
+ </a>
195
+ <a href="#" class="sidebar-item flex items-center px-5 py-3 mb-1">
196
+ <i class="fas fa-toolbox mr-3"></i>
197
+ <span>Tools</span>
198
+ </a>
199
+ <a href="#" class="sidebar-item flex items-center px-5 py-3 mb-1">
200
+ <i class="fas fa-database mr-3"></i>
201
+ <span>Knowledge Base</span>
202
+ </a>
203
+ <a href="#" class="sidebar-item flex items-center px-5 py-3 mb-1">
204
+ <i class="fas fa-cog mr-3"></i>
205
+ <span>Settings</span>
206
+ </a>
207
+ </nav>
208
+ </div>
209
+
210
+ <div class="p-4 border-t">
211
+ <div class="flex items-center">
212
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div>
213
+ <div class="ml-3">
214
+ <p class="font-medium text-gray-800">Alex Morgan</p>
215
+ <p class="text-sm text-gray-500">[email protected]</p>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Main Content -->
222
+ <div class="flex-1 flex flex-col overflow-hidden">
223
+ <!-- Top Bar -->
224
+ <header class="bg-white shadow-sm">
225
+ <div class="flex items-center justify-between p-4">
226
+ <div>
227
+ <h2 class="text-xl font-bold text-gray-800">Dashboard</h2>
228
+ <p class="text-gray-500 text-sm">Welcome back, Alex!</p>
229
+ </div>
230
+ <div class="flex items-center space-x-4">
231
+ <button class="relative p-2 text-gray-500 hover:text-gray-700">
232
+ <i class="fas fa-bell text-xl"></i>
233
+ <span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full"></span>
234
+ </button>
235
+ <div class="flex items-center">
236
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"></div>
237
+ <span class="ml-2 font-medium text-gray-700">Alex Morgan</span>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </header>
242
+
243
+ <!-- Dashboard Content -->
244
+ <main class="flex-1 overflow-y-auto p-6">
245
+ <!-- Stats Cards -->
246
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
247
+ <div class="dashboard-card bg-white rounded-xl p-6">
248
+ <div class="flex justify-between items-center">
249
+ <div>
250
+ <p class="text-gray-500 text-sm">Total Chatbots</p>
251
+ <h3 class="text-2xl font-bold mt-1">12</h3>
252
+ </div>
253
+ <div class="bg-indigo-100 p-3 rounded-lg">
254
+ <i class="fas fa-comments text-indigo-600 text-xl"></i>
255
+ </div>
256
+ </div>
257
+ <div class="mt-4">
258
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 12% from last month</span>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="dashboard-card bg-white rounded-xl p-6">
263
+ <div class="flex justify-between items-center">
264
+ <div>
265
+ <p class="text-gray-500 text-sm">Active Agents</p>
266
+ <h3 class="text-2xl font-bold mt-1">8</h3>
267
+ </div>
268
+ <div class="bg-green-100 p-3 rounded-lg">
269
+ <i class="fas fa-microchip text-green-600 text-xl"></i>
270
+ </div>
271
+ </div>
272
+ <div class="mt-4">
273
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 5% from last month</span>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="dashboard-card bg-white rounded-xl p-6">
278
+ <div class="flex justify-between items-center">
279
+ <div>
280
+ <p class="text-gray-500 text-sm">API Usage</p>
281
+ <h3 class="text-2xl font-bold mt-1">1.2M</h3>
282
+ </div>
283
+ <div class="bg-blue-100 p-3 rounded-lg">
284
+ <i class="fas fa-plug text-blue-600 text-xl"></i>
285
+ </div>
286
+ </div>
287
+ <div class="mt-4">
288
+ <span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-down"></i> 3% from last month</span>
289
+ </div>
290
+ </div>
291
+
292
+ <div class="dashboard-card bg-white rounded-xl p-6">
293
+ <div class="flex justify-between items-center">
294
+ <div>
295
+ <p class="text-gray-500 text-sm">Active Users</p>
296
+ <h3 class="text-2xl font-bold mt-1">1,248</h3>
297
+ </div>
298
+ <div class="bg-purple-100 p-3 rounded-lg">
299
+ <i class="fas fa-users text-purple-600 text-xl"></i>
300
+ </div>
301
+ </div>
302
+ <div class="mt-4">
303
+ <span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up"></i> 18% from last month</span>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Recent Activity -->
309
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
310
+ <div class="lg:col-span-2">
311
+ <div class="dashboard-card bg-white rounded-xl p-6">
312
+ <div class="flex justify-between items-center mb-6">
313
+ <h3 class="text-lg font-bold text-gray-800">Recent Chatbots</h3>
314
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">
315
+ <i class="fas fa-plus mr-1"></i> New Chatbot
316
+ </button>
317
+ </div>
318
+
319
+ <div class="overflow-x-auto">
320
+ <table class="min-w-full divide-y divide-gray-200">
321
+ <thead>
322
+ <tr>
323
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
324
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
325
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
326
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
327
+ </tr>
328
+ </thead>
329
+ <tbody class="divide-y divide-gray-200">
330
+ <tr>
331
+ <td class="px-4 py-4 whitespace-nowrap">
332
+ <div class="flex items-center">
333
+ <div class="bg-indigo-100 p-2 rounded-lg mr-3">
334
+ <i class="fas fa-comment text-indigo-600"></i>
335
+ </div>
336
+ <div>
337
+ <div class="text-sm font-medium text-gray-900">Customer Support Bot</div>
338
+ <div class="text-sm text-gray-500">ecommerce.com</div>
339
+ </div>
340
+ </div>
341
+ </td>
342
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">GPT-4 Turbo</td>
343
+ <td class="px-4 py-4 whitespace-nowrap">
344
+ <span class="status-indicator status-active"></span>
345
+ <span class="text-sm">Active</span>
346
+ </td>
347
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
348
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
349
+ <i class="fas fa-edit"></i>
350
+ </button>
351
+ <button class="text-green-600 hover:text-green-900 mr-3">
352
+ <i class="fas fa-play"></i>
353
+ </button>
354
+ <button class="text-gray-600 hover:text-gray-900">
355
+ <i class="fas fa-trash"></i>
356
+ </button>
357
+ </td>
358
+ </tr>
359
+ <tr>
360
+ <td class="px-4 py-4 whitespace-nowrap">
361
+ <div class="flex items-center">
362
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
363
+ <i class="fas fa-comment text-green-600"></i>
364
+ </div>
365
+ <div>
366
+ <div class="text-sm font-medium text-gray-900">Tech Support Assistant</div>
367
+ <div class="text-sm text-gray-500">techsupport.io</div>
368
+ </div>
369
+ </div>
370
+ </td>
371
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Claude 2</td>
372
+ <td class="px-4 py-4 whitespace-nowrap">
373
+ <span class="status-indicator status-draft"></span>
374
+ <span class="text-sm">Draft</span>
375
+ </td>
376
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
377
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
378
+ <i class="fas fa-edit"></i>
379
+ </button>
380
+ <button class="text-green-600 hover:text-green-900 mr-3">
381
+ <i class="fas fa-play"></i>
382
+ </button>
383
+ <button class="text-gray-600 hover:text-gray-900">
384
+ <i class="fas fa-trash"></i>
385
+ </button>
386
+ </td>
387
+ </tr>
388
+ <tr>
389
+ <td class="px-4 py-4 whitespace-nowrap">
390
+ <div class="flex items-center">
391
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
392
+ <i class="fas fa-comment text-blue-600"></i>
393
+ </div>
394
+ <div>
395
+ <div class="text-sm font-medium text-gray-900">Sales Inquiry Bot</div>
396
+ <div class="text-sm text-gray-500">sales.example.com</div>
397
+ </div>
398
+ </div>
399
+ </td>
400
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Llama 2</td>
401
+ <td class="px-4 py-4 whitespace-nowrap">
402
+ <span class="status-indicator status-active"></span>
403
+ <span class="text-sm">Active</span>
404
+ </td>
405
+ <td class="px-4 py-4 whitespace-nowrap text-sm">
406
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">
407
+ <i class="fas fa-edit"></i>
408
+ </button>
409
+ <button class="text-green-600 hover:text-green-900 mr-3">
410
+ <i class="fas fa-play"></i>
411
+ </button>
412
+ <button class="text-gray-600 hover:text-gray-900">
413
+ <i class="fas fa-trash"></i>
414
+ </button>
415
+ </td>
416
+ </tr>
417
+ </tbody>
418
+ </table>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div>
424
+ <div class="dashboard-card bg-white rounded-xl p-6 h-full">
425
+ <div class="flex justify-between items-center mb-6">
426
+ <h3 class="text-lg font-bold text-gray-800">AI Providers</h3>
427
+ <button class="text-indigo-600 hover:text-indigo-800 font-medium">
428
+ <i class="fas fa-plus mr-1"></i> Add Provider
429
+ </button>
430
+ </div>
431
+
432
+ <div class="space-y-4">
433
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
434
+ <div class="flex items-center">
435
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
436
+ <i class="fab fa-openai text-blue-600"></i>
437
+ </div>
438
+ <div>
439
+ <div class="font-medium text-gray-800">OpenAI</div>
440
+ <div class="text-sm text-gray-500">gpt-4-turbo</div>
441
+ </div>
442
+ </div>
443
+ <div class="flex space-x-2">
444
+ <button class="text-gray-500 hover:text-gray-700">
445
+ <i class="fas fa-edit"></i>
446
+ </button>
447
+ <button class="text-gray-500 hover:text-gray-700">
448
+ <i class="fas fa-trash"></i>
449
+ </button>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
454
+ <div class="flex items-center">
455
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
456
+ <i class="fas fa-robot text-purple-600"></i>
457
+ </div>
458
+ <div>
459
+ <div class="font-medium text-gray-800">Anthropic</div>
460
+ <div class="text-sm text-gray-500">claude-2</div>
461
+ </div>
462
+ </div>
463
+ <div class="flex space-x-2">
464
+ <button class="text-gray-500 hover:text-gray-700">
465
+ <i class="fas fa-edit"></i>
466
+ </button>
467
+ <button class="text-gray-500 hover:text-gray-700">
468
+ <i class="fas fa-trash"></i>
469
+ </button>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
474
+ <div class="flex items-center">
475
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
476
+ <i class="fas fa-microchip text-yellow-600"></i>
477
+ </div>
478
+ <div>
479
+ <div class="font-medium text-gray-800">Hugging Face</div>
480
+ <div class="text-sm text-gray-500">llama-2-7b</div>
481
+ </div>
482
+ </div>
483
+ <div class="flex space-x-2">
484
+ <button class="text-gray-500 hover:text-gray-700">
485
+ <i class="fas fa-edit"></i>
486
+ </button>
487
+ <button class="text-gray-500 hover:text-gray-700">
488
+ <i class="fas fa-trash"></i>
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <div class="mt-6">
495
+ <h4 class="font-medium text-gray-800 mb-3">Usage Stats</h4>
496
+ <div class="space-y-3">
497
+ <div>
498
+ <div class="flex justify-between text-sm mb-1">
499
+ <span>OpenAI</span>
500
+ <span>45%</span>
501
+ </div>
502
+ <div class="w-full bg-gray-200 rounded-full h-2">
503
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div>
504
+ </div>
505
+ </div>
506
+ <div>
507
+ <div class="flex justify-between text-sm mb-1">
508
+ <span>Anthropic</span>
509
+ <span>30%</span>
510
+ </div>
511
+ <div class="w-full bg-gray-200 rounded-full h-2">
512
+ <div class="bg-purple-600 h-2 rounded-full" style="width: 30%"></div>
513
+ </div>
514
+ </div>
515
+ <div>
516
+ <div class="flex justify-between text-sm mb-1">
517
+ <span>Hugging Face</span>
518
+ <span>25%</span>
519
+ </div>
520
+ <div class="w-full bg-gray-200 rounded-full h-2">
521
+ <div class="bg-yellow-600 h-2 rounded-full" style="width: 25%"></div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <!-- Visual Workflow Editor -->
531
+ <div class="dashboard-card bg-white rounded-xl p-6 mb-8">
532
+ <div class="flex justify-between items-center mb-6">
533
+ <h3 class="text-lg font-bold text-gray-800">Workflow Editor</h3>
534
+ <div class="flex space-x-3">
535
+ <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
536
+ <i class="fas fa-save mr-2"></i> Save Draft
537
+ </button>
538
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 pulse">
539
+ <i class="fas fa-play mr-2"></i> Test Workflow
540
+ </button>
541
+ <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
542
+ <i class="fas fa-rocket mr-2"></i> Deploy
543
+ </button>
544
+ </div>
545
+ </div>
546
+
547
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
548
+ <div class="lg:col-span-1">
549
+ <div class="bg-gray-50 rounded-lg p-4">
550
+ <h4 class="font-medium text-gray-800 mb-3">Toolbox</h4>
551
+ <div class="space-y-3">
552
+ <div class="workflow-block bg-white border border-gray-200 p-4 flex items-center">
553
+ <div class="bg-indigo-100 p-2 rounded-lg mr-3">
554
+ <i class="fas fa-comment text-indigo-600"></i>
555
+ </div>
556
+ <div>
557
+ <div class="font-medium text-gray-800">User Input</div>
558
+ <div class="text-sm text-gray-500">Get user message</div>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="workflow-block bg-white border border-gray-200 p-4 flex items-center">
563
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
564
+ <i class="fas fa-brain text-green-600"></i>
565
+ </div>
566
+ <div>
567
+ <div class="font-medium text-gray-800">AI Response</div>
568
+ <div class="text-sm text-gray-500">Generate AI output</div>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="workflow-block bg-white border border-gray-200 p-4 flex items-center">
573
+ <div class="bg-blue-100 p-2 rounded-lg mr-3">
574
+ <i class="fas fa-database text-blue-600"></i>
575
+ </div>
576
+ <div>
577
+ <div class="font-medium text-gray-800">Knowledge Base</div>
578
+ <div class="text-sm text-gray-500">Access stored data</div>
579
+ </div>
580
+ </div>
581
+
582
+ <div class="workflow-block bg-white border border-gray-200 p-4 flex items-center">
583
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
584
+ <i class="fas fa-code text-yellow-600"></i>
585
+ </div>
586
+ <div>
587
+ <div class="font-medium text-gray-800">Custom Tool</div>
588
+ <div class="text-sm text-gray-500">Execute custom function</div>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="workflow-block bg-white border border-gray-200 p-4 flex items-center">
593
+ <div class="bg-red-100 p-2 rounded-lg mr-3">
594
+ <i class="fas fa-external-link-alt text-red-600"></i>
595
+ </div>
596
+ <div>
597
+ <div class="font-medium text-gray-800">API Call</div>
598
+ <div class="text-sm text-gray-500">Make external request</div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="lg:col-span-3">
606
+ <div class="workflow-canvas p-4">
607
+ <div class="canvas-content">
608
+ <div class="flex flex-col items-center justify-center h-full text-gray-400">
609
+ <i class="fas fa-project-diagram text-4xl mb-4"></i>
610
+ <p class="text-lg">Drag and drop blocks to create your workflow</p>
611
+ <p class="mt-2">Connect blocks to define the logic flow</p>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- Chat Interface -->
620
+ <div class="dashboard-card bg-white rounded-xl p-6">
621
+ <div class="flex justify-between items-center mb-6">
622
+ <h3 class="text-lg font-bold text-gray-800">Chat Interface</h3>
623
+ <div class="flex space-x-2">
624
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200">
625
+ <i class="fas fa-sync mr-1"></i> Reset
626
+ </button>
627
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-sm hover:bg-indigo-200">
628
+ <i class="fas fa-copy mr-1"></i> Copy Code
629
+ </button>
630
+ </div>
631
+ </div>
632
+
633
+ <div class="flex flex-col md:flex-row gap-6">
634
+ <div class="md:w-1/2">
635
+ <div class="bg-gray-50 rounded-lg p-4 h-96 overflow-y-auto">
636
+ <div class="chat-message bot-message">
637
+ Hello! I'm your AI assistant. How can I help you today?
638
+ </div>
639
+ <div class="chat-message user-message">
640
+ Can you explain how to create a new chatbot?
641
+ </div>
642
+ <div class="chat-message bot-message">
643
+ Sure! To create a new chatbot, go to the Chatbots section, click "New Chatbot", and follow the wizard. You'll need to configure the name, model, system prompt, and optionally add knowledge sources.
644
+ </div>
645
+ <div class="chat-message user-message">
646
+ What models are supported?
647
+ </div>
648
+ <div class="chat-message bot-message">
649
+ We support OpenAI models (GPT-3.5, GPT-4), Anthropic models (Claude), and open-source models like Llama 2. You can also connect to custom endpoints.
650
+ </div>
651
+ </div>
652
+
653
+ <div class="mt-4 flex">
654
+ <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
655
+ <button class="bg-indigo-600 text-white px-6 rounded-r-lg hover:bg-indigo-700">
656
+ <i class="fas fa-paper-plane"></i>
657
+ </button>
658
+ </div>
659
+ </div>
660
+
661
+ <div class="md:w-1/2">
662
+ <div class="bg-gray-50 rounded-lg p-4">
663
+ <h4 class="font-medium text-gray-800 mb-3">Widget Customization</h4>
664
+
665
+ <div class="space-y-4">
666
+ <div>
667
+ <label class="block text-sm font-medium text-gray-700 mb-1">Chat Bubble Style</label>
668
+ <div class="flex space-x-3">
669
+ <div class="w-8 h-8 rounded-full bg-indigo-600 border-2 border-white shadow"></div>
670
+ <div class="w-8 h-8 rounded-lg bg-indigo-600 border-2 border-white shadow"></div>
671
+ <div class="w-8 h-8 rounded-full bg-green-600 border-2 border-white shadow"></div>
672
+ <div class="w-8 h-8 rounded-lg bg-green-600 border-2 border-white shadow"></div>
673
+ </div>
674
+ </div>
675
+
676
+ <div>
677
+ <label class="block text-sm font-medium text-gray-700 mb-1">Primary Color</label>
678
+ <div class="flex space-x-3">
679
+ <div class="w-8 h-8 rounded bg-indigo-600 cursor-pointer"></div>
680
+ <div class="w-8 h-8 rounded bg-blue-600 cursor-pointer"></div>
681
+ <div class="w-8 h-8 rounded bg-green-600 cursor-pointer"></div>
682
+ <div class="w-8 h-8 rounded bg-purple-600 cursor-pointer"></div>
683
+ </div>
684
+ </div>
685
+
686
+ <div>
687
+ <label class="block text-sm font-medium text-gray-700 mb-1">Position</label>
688
+ <div class="flex space-x-3">
689
+ <button class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-sm">Bottom Right</button>
690
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">Bottom Left</button>
691
+ </div>
692
+ </div>
693
+
694
+ <div>
695
+ <label class="block text-sm font-medium text-gray-700 mb-1">Embed Code</label>
696
+ <div class="bg-gray-800 text-gray-200 p-3 rounded-lg text-sm font-mono overflow-x-auto">
697
+ &lt;script src="https://aiplatform.com/widget.js"&gt;&lt;/script&gt;<br>
698
+ &lt;div id="ai-chat-widget"&gt;&lt;/div&gt;
699
+ </div>
700
+ </div>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ </div>
705
+ </div>
706
+ </main>
707
+ </div>
708
+ </div>
709
+
710
+ <script>
711
+ // Toggle sidebar
712
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
713
+ const sidebar = document.getElementById('sidebar');
714
+ sidebar.classList.toggle('collapsed');
715
+ sidebar.classList.toggle('expanded');
716
+ });
717
+
718
+ // Simulate chat message sending
719
+ document.addEventListener('DOMContentLoaded', function() {
720
+ const chatContainer = document.querySelector('.bg-gray-50.overflow-y-auto');
721
+ const inputField = document.querySelector('input[type="text"]');
722
+ const sendButton = document.querySelector('button.bg-indigo-600');
723
+
724
+ function sendMessage() {
725
+ const message = inputField.value.trim();
726
+ if (message) {
727
+ // Add user message
728
+ const userMessage = document.createElement('div');
729
+ userMessage.className = 'chat-message user-message';
730
+ userMessage.textContent = message;
731
+ chatContainer.appendChild(userMessage);
732
+
733
+ // Clear input
734
+ inputField.value = '';
735
+
736
+ // Scroll to bottom
737
+ chatContainer.scrollTop = chatContainer.scrollHeight;
738
+
739
+ // Simulate bot response after delay
740
+ setTimeout(() => {
741
+ const botMessage = document.createElement('div');
742
+ botMessage.className = 'chat-message bot-message';
743
+ botMessage.textContent = "Thanks for your message! This is a simulated response from the AI assistant.";
744
+ chatContainer.appendChild(botMessage);
745
+
746
+ // Scroll to bottom again
747
+ chatContainer.scrollTop = chatContainer.scrollHeight;
748
+ }, 1000);
749
+ }
750
+ }
751
+
752
+ sendButton.addEventListener('click', sendMessage);
753
+
754
+ inputField.addEventListener('keypress', function(e) {
755
+ if (e.key === 'Enter') {
756
+ sendMessage();
757
+ }
758
+ });
759
+ });
760
+ </script>
761
+ <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=adowu/agentsaww" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
762
+ </html>