Hugging Face's logo

Spaces:
itsmeagain4
/
agentorchestration-deepsite
Running

App Files Community
itsmeagain4 commited on
Commit
05c7e89
·
verified ·
1 Parent(s): c3524f7

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +659 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Agentorchestration Deepsite
3
- emoji: 🏃
4
- colorFrom: pink
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: agentorchestration-deepsite
3
+ emoji: 🐳
4
+ colorFrom: green
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,659 @@
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 Agent Orchestration System</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
+ .agent-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
13
+ }
14
+ .workflow-connection {
15
+ position: relative;
16
+ }
17
+ .workflow-connection::after {
18
+ content: "";
19
+ position: absolute;
20
+ top: 50%;
21
+ right: -20px;
22
+ width: 20px;
23
+ height: 2px;
24
+ background-color: #6366f1;
25
+ }
26
+ .workflow-connection:last-child::after {
27
+ display: none;
28
+ }
29
+ .status-indicator {
30
+ width: 10px;
31
+ height: 10px;
32
+ border-radius: 50%;
33
+ display: inline-block;
34
+ }
35
+ .status-active {
36
+ background-color: #10b981;
37
+ }
38
+ .status-inactive {
39
+ background-color: #ef4444;
40
+ }
41
+ .status-pending {
42
+ background-color: #f59e0b;
43
+ }
44
+ .sidebar {
45
+ transition: all 0.3s ease;
46
+ }
47
+ .sidebar.collapsed {
48
+ width: 70px;
49
+ }
50
+ .sidebar.collapsed .sidebar-text {
51
+ display: none;
52
+ }
53
+ .main-content {
54
+ transition: all 0.3s ease;
55
+ }
56
+ .main-content.expanded {
57
+ margin-left: 70px;
58
+ }
59
+ .agent-drag-handle {
60
+ cursor: move;
61
+ }
62
+ #workflowCanvas {
63
+ min-height: 500px;
64
+ background-color: #f8fafc;
65
+ border-radius: 0.5rem;
66
+ }
67
+ </style>
68
+ </head>
69
+ <body class="bg-gray-50 font-sans">
70
+ <div class="flex h-screen overflow-hidden">
71
+ <!-- Sidebar -->
72
+ <div class="sidebar bg-indigo-700 text-white w-64 flex flex-col">
73
+ <div class="p-4 flex items-center justify-between border-b border-indigo-600">
74
+ <div class="flex items-center">
75
+ <i class="fas fa-robot text-2xl mr-3"></i>
76
+ <span class="sidebar-text text-xl font-bold">AgentOS</span>
77
+ </div>
78
+ <button id="toggleSidebar" class="text-white hover:text-indigo-200">
79
+ <i class="fas fa-bars"></i>
80
+ </button>
81
+ </div>
82
+ <nav class="flex-1 overflow-y-auto p-4">
83
+ <div class="mb-6">
84
+ <h3 class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-3">Dashboard</h3>
85
+ <ul>
86
+ <li class="mb-2">
87
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
88
+ <i class="fas fa-home mr-3"></i>
89
+ <span class="sidebar-text">Overview</span>
90
+ </a>
91
+ </li>
92
+ <li class="mb-2">
93
+ <a href="#" class="flex items-center p-2 rounded bg-indigo-800">
94
+ <i class="fas fa-project-diagram mr-3"></i>
95
+ <span class="sidebar-text">Orchestration</span>
96
+ </a>
97
+ </li>
98
+ <li class="mb-2">
99
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
100
+ <i class="fas fa-chart-line mr-3"></i>
101
+ <span class="sidebar-text">Analytics</span>
102
+ </a>
103
+ </li>
104
+ </ul>
105
+ </div>
106
+ <div class="mb-6">
107
+ <h3 class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-3">Management</h3>
108
+ <ul>
109
+ <li class="mb-2">
110
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
111
+ <i class="fas fa-cogs mr-3"></i>
112
+ <span class="sidebar-text">Agents</span>
113
+ </a>
114
+ </li>
115
+ <li class="mb-2">
116
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
117
+ <i class="fas fa-network-wired mr-3"></i>
118
+ <span class="sidebar-text">Workflows</span>
119
+ </a>
120
+ </li>
121
+ <li class="mb-2">
122
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
123
+ <i class="fas fa-database mr-3"></i>
124
+ <span class="sidebar-text">Knowledge</span>
125
+ </a>
126
+ </li>
127
+ </ul>
128
+ </div>
129
+ <div>
130
+ <h3 class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-3">Settings</h3>
131
+ <ul>
132
+ <li class="mb-2">
133
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
134
+ <i class="fas fa-user-cog mr-3"></i>
135
+ <span class="sidebar-text">Profile</span>
136
+ </a>
137
+ </li>
138
+ <li class="mb-2">
139
+ <a href="#" class="flex items-center p-2 rounded hover:bg-indigo-600">
140
+ <i class="fas fa-cog mr-3"></i>
141
+ <span class="sidebar-text">System</span>
142
+ </a>
143
+ </li>
144
+ </ul>
145
+ </div>
146
+ </nav>
147
+ <div class="p-4 border-t border-indigo-600">
148
+ <div class="flex items-center">
149
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full mr-3">
150
+ <div class="sidebar-text">
151
+ <div class="font-medium">Jane Smith</div>
152
+ <div class="text-xs text-indigo-300">Admin</div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- Main Content -->
159
+ <div class="main-content flex-1 flex flex-col overflow-hidden">
160
+ <!-- Top Navigation -->
161
+ <header class="bg-white shadow-sm z-10">
162
+ <div class="px-6 py-4 flex items-center justify-between">
163
+ <h1 class="text-2xl font-bold text-gray-800">Agent Orchestration</h1>
164
+ <div class="flex items-center space-x-4">
165
+ <div class="relative">
166
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
167
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
168
+ </div>
169
+ <button class="text-gray-500 hover:text-gray-700">
170
+ <i class="fas fa-bell"></i>
171
+ </button>
172
+ <button class="text-gray-500 hover:text-gray-700">
173
+ <i class="fas fa-question-circle"></i>
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </header>
178
+
179
+ <!-- Main Content Area -->
180
+ <div class="flex-1 overflow-auto p-6">
181
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
182
+ <!-- Agent Library -->
183
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-sm p-6">
184
+ <div class="flex justify-between items-center mb-6">
185
+ <h2 class="text-lg font-semibold">Agent Library</h2>
186
+ <button id="addAgentBtn" class="bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700">
187
+ <i class="fas fa-plus"></i>
188
+ </button>
189
+ </div>
190
+
191
+ <div class="mb-4">
192
+ <div class="flex items-center justify-between mb-2">
193
+ <span class="text-sm font-medium text-gray-500">Available Agents (12)</span>
194
+ <div class="relative">
195
+ <select class="appearance-none bg-gray-100 border-0 rounded px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500">
196
+ <option>All Types</option>
197
+ <option>NLP</option>
198
+ <option>Vision</option>
199
+ <option>Data</option>
200
+ <option>Decision</option>
201
+ </select>
202
+ <i class="fas fa-chevron-down absolute right-2 top-2 text-xs text-gray-500"></i>
203
+ </div>
204
+ </div>
205
+ <input type="text" placeholder="Filter agents..." class="w-full px-4 py-2 border rounded-lg mb-4 focus:outline-none focus:ring-1 focus:ring-indigo-500">
206
+ </div>
207
+
208
+ <div class="space-y-3 overflow-y-auto max-h-96">
209
+ <!-- Agent Cards -->
210
+ <div class="agent-card bg-white border rounded-lg p-4 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" draggable="true">
211
+ <div class="flex justify-between items-start">
212
+ <div>
213
+ <div class="flex items-center mb-2">
214
+ <div class="status-indicator status-active mr-2"></div>
215
+ <h3 class="font-medium">NLP Processor</h3>
216
+ </div>
217
+ <p class="text-sm text-gray-500 mb-3">Processes natural language inputs and generates responses</p>
218
+ </div>
219
+ <i class="fas fa-grip-vertical text-gray-300 agent-drag-handle"></i>
220
+ </div>
221
+ <div class="flex flex-wrap gap-2">
222
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">NLP</span>
223
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="agent-card bg-white border rounded-lg p-4 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" draggable="true">
228
+ <div class="flex justify-between items-start">
229
+ <div>
230
+ <div class="flex items-center mb-2">
231
+ <div class="status-indicator status-active mr-2"></div>
232
+ <h3 class="font-medium">Data Analyzer</h3>
233
+ </div>
234
+ <p class="text-sm text-gray-500 mb-3">Analyzes structured data and generates insights</p>
235
+ </div>
236
+ <i class="fas fa-grip-vertical text-gray-300 agent-drag-handle"></i>
237
+ </div>
238
+ <div class="flex flex-wrap gap-2">
239
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Data</span>
240
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="agent-card bg-white border rounded-lg p-4 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" draggable="true">
245
+ <div class="flex justify-between items-start">
246
+ <div>
247
+ <div class="flex items-center mb-2">
248
+ <div class="status-indicator status-pending mr-2"></div>
249
+ <h3 class="font-medium">Image Recognizer</h3>
250
+ </div>
251
+ <p class="text-sm text-gray-500 mb-3">Identifies objects and patterns in images</p>
252
+ </div>
253
+ <i class="fas fa-grip-vertical text-gray-300 agent-drag-handle"></i>
254
+ </div>
255
+ <div class="flex flex-wrap gap-2">
256
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Vision</span>
257
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Pending</span>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="agent-card bg-white border rounded-lg p-4 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" draggable="true">
262
+ <div class="flex justify-between items-start">
263
+ <div>
264
+ <div class="flex items-center mb-2">
265
+ <div class="status-indicator status-inactive mr-2"></div>
266
+ <h3 class="font-medium">Decision Engine</h3>
267
+ </div>
268
+ <p class="text-sm text-gray-500 mb-3">Makes decisions based on multiple inputs</p>
269
+ </div>
270
+ <i class="fas fa-grip-vertical text-gray-300 agent-drag-handle"></i>
271
+ </div>
272
+ <div class="flex flex-wrap gap-2">
273
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Decision</span>
274
+ <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">Inactive</span>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="agent-card bg-white border rounded-lg p-4 cursor-pointer transition-all duration-200 shadow-sm hover:shadow-md" draggable="true">
279
+ <div class="flex justify-between items-start">
280
+ <div>
281
+ <div class="flex items-center mb-2">
282
+ <div class="status-indicator status-active mr-2"></div>
283
+ <h3 class="font-medium">Sentiment Analyzer</h3>
284
+ </div>
285
+ <p class="text-sm text-gray-500 mb-3">Detects sentiment in text inputs</p>
286
+ </div>
287
+ <i class="fas fa-grip-vertical text-gray-300 agent-drag-handle"></i>
288
+ </div>
289
+ <div class="flex flex-wrap gap-2">
290
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">NLP</span>
291
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Workflow Canvas -->
298
+ <div class="lg:col-span-3">
299
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
300
+ <div class="flex justify-between items-center mb-6">
301
+ <h2 class="text-lg font-semibold">Workflow Canvas</h2>
302
+ <div class="flex space-x-2">
303
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center">
304
+ <i class="fas fa-save mr-2"></i> Save
305
+ </button>
306
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
307
+ <i class="fas fa-play mr-2"></i> Execute
308
+ </button>
309
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
310
+ <i class="fas fa-ellipsis-v"></i>
311
+ </button>
312
+ </div>
313
+ </div>
314
+
315
+ <div id="workflowCanvas" class="border-2 border-dashed border-gray-200 relative">
316
+ <!-- This is where agents will be placed and connected -->
317
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-gray-400">
318
+ <i class="fas fa-project-diagram text-4xl mb-2"></i>
319
+ <p>Drag agents from the library and drop them here</p>
320
+ <p class="text-sm">Connect them to create workflows</p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Workflow Details -->
326
+ <div class="bg-white rounded-xl shadow-sm p-6">
327
+ <h2 class="text-lg font-semibold mb-4">Workflow Details</h2>
328
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
329
+ <div>
330
+ <label class="block text-sm font-medium text-gray-700 mb-1">Workflow Name</label>
331
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="My AI Workflow">
332
+ </div>
333
+ <div>
334
+ <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Type</label>
335
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500">
336
+ <option>API Call</option>
337
+ <option>Scheduled</option>
338
+ <option>Event-based</option>
339
+ <option>Manual</option>
340
+ </select>
341
+ </div>
342
+ <div>
343
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
344
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500">
345
+ <option>Draft</option>
346
+ <option>Active</option>
347
+ <option>Paused</option>
348
+ <option>Archived</option>
349
+ </select>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="mt-6">
354
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
355
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" rows="3" placeholder="Describe what this workflow does..."></textarea>
356
+ </div>
357
+
358
+ <div class="mt-6">
359
+ <label class="block text-sm font-medium text-gray-700 mb-3">Execution History</label>
360
+ <div class="border rounded-lg overflow-hidden">
361
+ <table class="min-w-full divide-y divide-gray-200">
362
+ <thead class="bg-gray-50">
363
+ <tr>
364
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Run ID</th>
365
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
366
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Started</th>
367
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
368
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
369
+ </tr>
370
+ </thead>
371
+ <tbody class="bg-white divide-y divide-gray-200">
372
+ <tr>
373
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#WF-00123</td>
374
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">
375
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100">Completed</span>
376
+ </td>
377
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td>
378
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45s</td>
379
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
380
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
381
+ <button class="text-indigo-600 hover:text-indigo-900">Rerun</button>
382
+ </td>
383
+ </tr>
384
+ <tr>
385
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#WF-00122</td>
386
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">
387
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100">Pending</span>
388
+ </td>
389
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 hours ago</td>
390
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
391
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
392
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
393
+ <button class="text-indigo-600 hover:text-indigo-900">Cancel</button>
394
+ </td>
395
+ </tr>
396
+ <tr>
397
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#WF-00121</td>
398
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">
399
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100">Failed</span>
400
+ </td>
401
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 day ago</td>
402
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12s</td>
403
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
404
+ <button class="text-indigo-600 hover:text-indigo-900 mr-3">View</button>
405
+ <button class="text-indigo-600 hover:text-indigo-900">Retry</button>
406
+ </td>
407
+ </tr>
408
+ </tbody>
409
+ </table>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Add Agent Modal -->
420
+ <div id="addAgentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
421
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl">
422
+ <div class="p-6 border-b border-gray-200">
423
+ <div class="flex justify-between items-center">
424
+ <h3 class="text-lg font-semibold">Create New Agent</h3>
425
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
426
+ <i class="fas fa-times"></i>
427
+ </button>
428
+ </div>
429
+ </div>
430
+ <div class="p-6">
431
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
432
+ <div>
433
+ <label class="block text-sm font-medium text-gray-700 mb-1">Agent Name</label>
434
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="My AI Agent">
435
+ </div>
436
+ <div>
437
+ <label class="block text-sm font-medium text-gray-700 mb-1">Agent Type</label>
438
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500">
439
+ <option>Select type</option>
440
+ <option>NLP</option>
441
+ <option>Vision</option>
442
+ <option>Data</option>
443
+ <option>Decision</option>
444
+ <option>Custom</option>
445
+ </select>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="mb-6">
450
+ <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
451
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" rows="3" placeholder="Describe what this agent does..."></textarea>
452
+ </div>
453
+
454
+ <div class="mb-6">
455
+ <label class="block text-sm font-medium text-gray-700 mb-3">Configuration</label>
456
+ <div class="space-y-4">
457
+ <div>
458
+ <label class="inline-flex items-center">
459
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600">
460
+ <span class="ml-2 text-sm text-gray-700">Enable learning mode</span>
461
+ </label>
462
+ </div>
463
+ <div>
464
+ <label class="inline-flex items-center">
465
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600">
466
+ <span class="ml-2 text-sm text-gray-700">Allow parallel processing</span>
467
+ </label>
468
+ </div>
469
+ <div>
470
+ <label class="inline-flex items-center">
471
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-indigo-600" checked>
472
+ <span class="ml-2 text-sm text-gray-700">Auto-update knowledge base</span>
473
+ </label>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <div class="mb-6">
479
+ <label class="block text-sm font-medium text-gray-700 mb-1">Initial Prompt</label>
480
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500" rows="4" placeholder="Enter the initial prompt or instructions for this agent..."></textarea>
481
+ </div>
482
+ </div>
483
+ <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
484
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
485
+ Cancel
486
+ </button>
487
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
488
+ Create Agent
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </div>
493
+
494
+ <script>
495
+ // Toggle sidebar
496
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
497
+ document.querySelector('.sidebar').classList.toggle('collapsed');
498
+ document.querySelector('.main-content').classList.toggle('expanded');
499
+ });
500
+
501
+ // Add agent modal
502
+ document.getElementById('addAgentBtn').addEventListener('click', function() {
503
+ document.getElementById('addAgentModal').classList.remove('hidden');
504
+ });
505
+
506
+ document.getElementById('closeModalBtn').addEventListener('click', function() {
507
+ document.getElementById('addAgentModal').classList.add('hidden');
508
+ });
509
+
510
+ // Drag and drop functionality for agents
511
+ const agentCards = document.querySelectorAll('.agent-card');
512
+ const workflowCanvas = document.getElementById('workflowCanvas');
513
+
514
+ agentCards.forEach(card => {
515
+ card.addEventListener('dragstart', function(e) {
516
+ e.dataTransfer.setData('text/plain', card.innerHTML);
517
+ e.dataTransfer.effectAllowed = 'copy';
518
+ setTimeout(() => {
519
+ card.classList.add('opacity-0');
520
+ }, 0);
521
+ });
522
+
523
+ card.addEventListener('dragend', function() {
524
+ card.classList.remove('opacity-0');
525
+ });
526
+ });
527
+
528
+ workflowCanvas.addEventListener('dragover', function(e) {
529
+ e.preventDefault();
530
+ e.dataTransfer.dropEffect = 'copy';
531
+ this.classList.add('border-indigo-500');
532
+ this.classList.remove('border-gray-200');
533
+ });
534
+
535
+ workflowCanvas.addEventListener('dragleave', function() {
536
+ this.classList.remove('border-indigo-500');
537
+ this.classList.add('border-gray-200');
538
+ });
539
+
540
+ workflowCanvas.addEventListener('drop', function(e) {
541
+ e.preventDefault();
542
+ this.classList.remove('border-indigo-500');
543
+ this.classList.add('border-gray-200');
544
+
545
+ // Remove the default placeholder if it exists
546
+ const placeholder = this.querySelector('div.absolute');
547
+ if (placeholder) {
548
+ this.removeChild(placeholder);
549
+ }
550
+
551
+ // Create a new agent node in the canvas
552
+ const agentContent = e.dataTransfer.getData('text/plain');
553
+ const agentNode = document.createElement('div');
554
+ agentNode.className = 'agent-node bg-white border rounded-lg p-4 shadow-md absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64';
555
+ agentNode.innerHTML = agentContent;
556
+
557
+ // Add connection points
558
+ const connectionPoints = document.createElement('div');
559
+ connectionPoints.className = 'flex justify-between mt-3';
560
+ connectionPoints.innerHTML = `
561
+ <div class="connection-point-in w-3 h-3 rounded-full bg-gray-300 border border-gray-400 cursor-pointer"></div>
562
+ <div class="connection-point-out w-3 h-3 rounded-full bg-gray-300 border border-gray-400 cursor-pointer"></div>
563
+ `;
564
+ agentNode.appendChild(connectionPoints);
565
+
566
+ // Make the node draggable within the canvas
567
+ agentNode.draggable = true;
568
+ agentNode.addEventListener('dragstart', function(e) {
569
+ e.dataTransfer.setData('text/plain', '');
570
+ this.classList.add('opacity-50');
571
+ });
572
+
573
+ agentNode.addEventListener('dragend', function() {
574
+ this.classList.remove('opacity-50');
575
+ });
576
+
577
+ // Position the node where it was dropped
578
+ const rect = workflowCanvas.getBoundingClientRect();
579
+ const x = e.clientX - rect.left;
580
+ const y = e.clientY - rect.top;
581
+ agentNode.style.left = x + 'px';
582
+ agentNode.style.top = y + 'px';
583
+ agentNode.style.transform = 'none';
584
+
585
+ workflowCanvas.appendChild(agentNode);
586
+
587
+ // Make the node draggable within the canvas
588
+ let isDragging = false;
589
+ let offsetX, offsetY;
590
+
591
+ agentNode.addEventListener('mousedown', function(e) {
592
+ if (e.target.classList.contains('connection-point-in') ||
593
+ e.target.classList.contains('connection-point-out') ||
594
+ e.target.classList.contains('agent-drag-handle')) {
595
+ return;
596
+ }
597
+
598
+ isDragging = true;
599
+ const rect = agentNode.getBoundingClientRect();
600
+ offsetX = e.clientX - rect.left;
601
+ offsetY = e.clientY - rect.top;
602
+ agentNode.style.cursor = 'grabbing';
603
+ e.preventDefault();
604
+ });
605
+
606
+ document.addEventListener('mousemove', function(e) {
607
+ if (!isDragging) return;
608
+
609
+ const rect = workflowCanvas.getBoundingClientRect();
610
+ let x = e.clientX - rect.left - offsetX;
611
+ let y = e.clientY - rect.top - offsetY;
612
+
613
+ // Constrain to canvas boundaries
614
+ x = Math.max(0, Math.min(x, rect.width - agentNode.offsetWidth));
615
+ y = Math.max(0, Math.min(y, rect.height - agentNode.offsetHeight));
616
+
617
+ agentNode.style.left = x + 'px';
618
+ agentNode.style.top = y + 'px';
619
+ });
620
+
621
+ document.addEventListener('mouseup', function() {
622
+ isDragging = false;
623
+ if (agentNode) agentNode.style.cursor = 'grab';
624
+ });
625
+ });
626
+
627
+ // Simple connection logic (visual only)
628
+ let connectionStart = null;
629
+
630
+ document.addEventListener('mousedown', function(e) {
631
+ if (e.target.classList.contains('connection-point-in') ||
632
+ e.target.classList.contains('connection-point-out')) {
633
+ connectionStart = e.target;
634
+ connectionStart.classList.add('bg-indigo-500');
635
+ }
636
+ });
637
+
638
+ document.addEventListener('mouseup', function(e) {
639
+ if (connectionStart &&
640
+ (e.target.classList.contains('connection-point-in') ||
641
+ e.target.classList.contains('connection-point-out')) &&
642
+ e.target !== connectionStart) {
643
+ // Create a connection line (visual only in this simple implementation)
644
+ connectionStart.classList.remove('bg-indigo-500');
645
+ e.target.classList.remove('bg-indigo-500');
646
+
647
+ // In a real implementation, you would store the connection data
648
+ // and draw proper SVG lines between nodes
649
+ alert(`Connected ${connectionStart.parentNode.parentNode.querySelector('h3').textContent} to ${e.target.parentNode.parentNode.querySelector('h3').textContent}`);
650
+ }
651
+
652
+ if (connectionStart) {
653
+ connectionStart.classList.remove('bg-indigo-500');
654
+ connectionStart = null;
655
+ }
656
+ });
657
+ </script>
658
+ <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=itsmeagain4/agentorchestration-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
659
+ </html>