Hugging Face's logo

Spaces:
FourLabs-UN2
/
agentflow-builder
Running

App Files Community
FourLabs-UN2 commited on
Commit
ff9cd52
·
verified ·
1 Parent(s): 87039c1

Monte com sidebar o projeto:

Browse files

Faça uma página com montagem de agentes usando o mouse, colocando ferramentas nos agentes LLM, escolhendo o modelo. Igual ao n8n. Faça de forma profissional.

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +426 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Agentflow Builder
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: purple
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: AgentFlow Builder 🤖
3
+ colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,427 @@
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>AgentFlow Builder - LLM Agent Assembly</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 50: '#eff6ff',
19
+ 500: '#3b82f6',
20
+ 600: '#2563eb',
21
+ 700: '#1d4ed8',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .sidebar {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .tool-item {
33
+ cursor: grab;
34
+ transition: all 0.2s ease;
35
+ }
36
+ .tool-item:hover {
37
+ transform: translateY(-2px);
38
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
39
+ }
40
+ .agent-node {
41
+ min-height: 120px;
42
+ border-radius: 12px;
43
+ position: relative;
44
+ transition: all 0.3s ease;
45
+ }
46
+ .agent-node:hover {
47
+ transform: scale(1.02);
48
+ }
49
+ .drop-zone {
50
+ min-height: 200px;
51
+ border: 2px dashed #d1d5db;
52
+ transition: all 0.3s ease;
53
+ }
54
+ .drop-zone.drag-over {
55
+ border-color: #3b82f6;
56
+ background-color: #eff6ff;
57
+ }
58
+ .connection-line {
59
+ position: absolute;
60
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
61
+ height: 3px;
62
+ transform-origin: left center;
63
+ z-index: 10;
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-50 h-screen flex overflow-hidden">
68
+ <!-- Sidebar -->
69
+ <div class="sidebar w-80 bg-white border-r border-gray-200 flex flex-col h-full">
70
+ <!-- Header -->
71
+ <div class="p-6 border-b border-gray-200">
72
+ <div class="flex items-center space-x-3">
73
+ <div class="w-10 h-10 bg-gradient-to-r from-primary-500 to-purple-600 rounded-lg flex items-center justify-center">
74
+ <i data-feather="cpu" class="text-white"></i>
75
+ </div>
76
+ <div>
77
+ <h1 class="text-xl font-bold text-gray-900">AgentFlow</h1>
78
+ <p class="text-sm text-gray-500">LLM Agent Builder</p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Tools Section -->
84
+ <div class="flex-1 overflow-y-auto">
85
+ <div class="p-6">
86
+ <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
87
+ <i data-feather="tool" class="w-5 h-5 mr-2 text-primary-500"></i>
88
+ Available Tools
89
+ </h2>
90
+
91
+ <div class="space-y-3" id="tools-list">
92
+ <!-- Web Search Tool -->
93
+ <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="web-search">
94
+ <div class="flex items-center space-x-3">
95
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
96
+ <i data-feather="search" class="w-4 h-4 text-blue-600"></i>
97
+ </div>
98
+ <div class="flex-1">
99
+ <h3 class="font-medium text-gray-900">Web Search</h3>
100
+ <p class="text-sm text-gray-500">Search the web for information</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- File Reader Tool -->
106
+ <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="file-reader">
107
+ <div class="flex items-center space-x-3">
108
+ <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
109
+ <i data-feather="file-text" class="w-4 h-4 text-green-600"></i>
110
+ </div>
111
+ <div class="flex-1">
112
+ <h3 class="font-medium text-gray-900">File Reader</h3>
113
+ <p class="text-sm text-gray-500">Read and process documents</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Calculator Tool -->
119
+ <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="calculator">
120
+ <div class="flex items-center space-x-3">
121
+ <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
122
+ <i data-feather="divide-circle" class="w-4 h-4 text-purple-600"></i>
123
+ </div>
124
+ <div class="flex-1">
125
+ <h3 class="font-medium text-gray-900">Calculator</h3>
126
+ <p class="text-sm text-gray-500">Perform mathematical operations</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Code Generator Tool -->
132
+ <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="code-generator">
133
+ <div class="flex items-center space-x-3">
134
+ <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
135
+ <i data-feather="code" class="w-4 h-4 text-orange-600"></i>
136
+ </div>
137
+ <div class="flex-1">
138
+ <h3 class="font-medium text-gray-900">Code Generator</h3>
139
+ <p class="text-sm text-gray-500">Generate and analyze code</p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Model Selection -->
148
+ <div class="p-6 border-t border-gray-200">
149
+ <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
150
+ <i data-feather="brain" class="w-5 h-5 mr-2 text-primary-500"></i>
151
+ LLM Models
152
+ </h2>
153
+
154
+ <div class="space-y-3">
155
+ <select id="model-select" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
156
+ <option value="gpt-4">GPT-4</option>
157
+ <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
158
+ <option value="claude-2">Claude 2</option>
159
+ <option value="llama-2">Llama 2</option>
160
+ <option value="palm-2">PaLM 2</option>
161
+ </select>
162
+
163
+ <button id="save-agent" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg font-medium transition-colors flex items-center justify-center">
164
+ <i data-feather="save" class="w-4 h-4 mr-2"></i>
165
+ Save Agent
166
+ </button>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Main Content -->
172
+ <div class="flex-1 flex flex-col h-full">
173
+ <!-- Top Bar -->
174
+ <div class="bg-white border-b border-gray-200 px-6 py-4">
175
+ <div class="flex items-center justify-between">
176
+ <div class="flex items-center space-x-4">
177
+ <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
178
+ <i data-feather="menu" class="w-5 h-5 text-gray-600"></i>
179
+ </button>
180
+ <h2 class="text-lg font-semibold text-gray-900">Agent Workspace</h2>
181
+ </div>
182
+
183
+ <div class="flex items-center space-x-3">
184
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center">
185
+ <i data-feather="play" class="w-4 h-4 mr-2"></i>
186
+ Test Agent
187
+ </button>
188
+ <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors flex items-center">
189
+ <i data-feather="share-2" class="w-4 h-4 mr-2"></i>
190
+ Deploy
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Workspace -->
197
+ <div class="flex-1 bg-gray-100 p-6 overflow-auto">
198
+ <div class="max-w-6xl mx-auto">
199
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
200
+ <!-- Agent Nodes -->
201
+ <div class="space-y-6">
202
+ <h3 class="text-lg font-semibold text-gray-900">Agent Nodes</h3>
203
+
204
+ <!-- Main Agent Node -->
205
+ <div class="agent-node bg-white border-2 border-primary-500 rounded-xl p-6 shadow-lg">
206
+ <div class="flex items-center justify-between mb-4">
207
+ <div class="flex items-center space-x-3">
208
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
209
+ <i data-feather="cpu" class="text-white"></i>
210
+ </div>
211
+ <div>
212
+ <h4 class="font-semibold text-gray-900">Main Agent</h4>
213
+ <p class="text-sm text-gray-500" id="selected-model">GPT-4</p>
214
+ </div>
215
+ </div>
216
+ <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
217
+ <i data-feather="settings" class="w-4 h-4 text-gray-600"></i>
218
+ </button>
219
+ </div>
220
+
221
+ <div class="drop-zone bg-gray-50 rounded-lg p-4" id="agent-tools">
222
+ <div class="text-center text-gray-500">
223
+ <i data-feather="plus" class="w-8 h-8 mx-auto mb-2"></i>
224
+ <p>Drag tools here to add functionality</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Additional Agent Nodes -->
230
+ <div class="agent-node bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
231
+ <div class="flex items-center justify-between mb-4">
232
+ <div class="flex items-center space-x-3">
233
+ <div class="w-10 h-10 bg-gray-400 rounded-lg flex items-center justify-center">
234
+ <i data-feather="user" class="text-white"></i>
235
+ </div>
236
+ <div>
237
+ <h4 class="font-semibold text-gray-900">Assistant Agent</h4>
238
+ </div>
239
+ </div>
240
+ <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
241
+ <i data-feather="plus" class="w-4 h-4 text-gray-600"></i>
242
+ </button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Agent Configuration -->
248
+ <div class="space-y-6">
249
+ <h3 class="text-lg font-semibold text-gray-900">Configuration</h3>
250
+
251
+ <div class="bg-white rounded-xl p-6 shadow-sm">
252
+ <div class="space-y-4">
253
+ <div>
254
+ <label class="block text-sm font-medium text-gray-700 mb-2">Agent Name</label>
255
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Enter agent name" value="Research Assistant">
256
+ </div>
257
+
258
+ <div>
259
+ <label class="block text-sm font-medium text-gray-700 mb-2">System Prompt</label>
260
+ <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500" rows="4" placeholder="Define the agent's behavior and capabilities">You are a research assistant that helps gather and analyze information from various sources. Use the available tools to search the web, read documents, and process data efficiently.</textarea>
261
+ </div>
262
+
263
+ <div>
264
+ <label class="block text-sm font-medium text-gray-700 mb-2">Temperature</label>
265
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
266
+ <div class="flex justify-between text-xs text-gray-500">
267
+ <span>More Focused</span>
268
+ <span>More Creative</span>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Agent Preview -->
275
+ <div class="bg-white rounded-xl p-6 shadow-sm">
276
+ <h4 class="font-semibold text-gray-900 mb-4">Agent Preview</h4>
277
+ <div class="bg-gray-50 rounded-lg p-4">
278
+ <div class="flex items-center space-x-3 mb-3">
279
+ <div class="w-8 h-8 bg-primary-500 rounded-lg flex items-center justify-center">
280
+ <i data-feather="eye" class="text-white w-4 h-4"></i>
281
+ </div>
282
+ <span class="text-sm font-medium text-gray-900">Active Tools:</span>
283
+ </div>
284
+ <div id="preview-tools" class="space-y-2">
285
+ <div class="text-sm text-gray-500 text-center">No tools added yet</div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <script>
296
+ document.addEventListener('DOMContentLoaded', function() {
297
+ feather.replace();
298
+
299
+ // Model selection
300
+ const modelSelect = document.getElementById('model-select');
301
+ const selectedModel = document.getElementById('selected-model');
302
+
303
+ modelSelect.addEventListener('change', function() {
304
+ selectedModel.textContent = this.options[this.selectedIndex].text;
305
+ });
306
+
307
+ // Drag and drop functionality
308
+ const toolItems = document.querySelectorAll('.tool-item');
309
+ const dropZone = document.getElementById('agent-tools');
310
+ const previewTools = document.getElementById('preview-tools');
311
+
312
+ toolItems.forEach(tool => {
313
+ tool.addEventListener('dragstart', function(e) {
314
+ e.dataTransfer.setData('text/plain', this.dataset.type);
315
+ this.classList.add('opacity-50');
316
+ });
317
+
318
+ tool.addEventListener('dragend', function() {
319
+ this.classList.remove('opacity-50');
320
+ });
321
+ });
322
+
323
+ dropZone.addEventListener('dragover', function(e) {
324
+ e.preventDefault();
325
+ this.classList.add('drag-over');
326
+ });
327
+
328
+ dropZone.addEventListener('dragleave', function() {
329
+ this.classList.remove('drag-over');
330
+ });
331
+
332
+ dropZone.addEventListener('drop', function(e) {
333
+ e.preventDefault();
334
+ this.classList.remove('drag-over');
335
+
336
+ const toolType = e.dataTransfer.getData('text/plain');
337
+ addToolToAgent(toolType);
338
+ });
339
+
340
+ function addToolToAgent(toolType) {
341
+ const toolMap = {
342
+ 'web-search': {
343
+ name: 'Web Search',
344
+ icon: 'search',
345
+ color: 'blue'
346
+ },
347
+ 'file-reader': {
348
+ name: 'File Reader',
349
+ icon: 'file-text',
350
+ color: 'green'
351
+ },
352
+ 'calculator': {
353
+ name: 'Calculator',
354
+ icon: 'divide-circle',
355
+ color: 'purple'
356
+ },
357
+ 'code-generator': {
358
+ name: 'Code Generator',
359
+ icon: 'code',
360
+ color: 'orange'
361
+ }
362
+ };
363
+
364
+ const tool = toolMap[toolType];
365
+ if (!tool) return;
366
+
367
+ // Remove placeholder if it exists
368
+ if (dropZone.querySelector('.text-center')) {
369
+ dropZone.innerHTML = '';
370
+ }
371
+
372
+ // Add tool to agent
373
+ const toolElement = document.createElement('div');
374
+ toolElement.className = `bg-${tool.color}-50 border border-${tool.color}-200 rounded-lg p-3 mb-2`;
375
+ toolElement.innerHTML = `
376
+ <div class="flex items-center space-x-2">
377
+ <div class="w-6 h-6 bg-${tool.color}-500 rounded flex items-center justify-center">
378
+ <i data-feather="${tool.icon}" class="text-white w-3 h-3"></i>
379
+ </div>
380
+ <span class="text-sm font-medium text-gray-900">${tool.name}</span>
381
+ <button class="ml-auto p-1 hover:bg-${tool.color}-100 rounded transition-colors">
382
+ <i data-feather="x" class="w-3 h-3 text-gray-500"></i>
383
+ </button>
384
+ `;
385
+ dropZone.appendChild(toolElement);
386
+
387
+ // Update preview
388
+ updatePreview(toolType, tool);
389
+
390
+ feather.replace();
391
+ }
392
+
393
+ function updatePreview(toolType, tool) {
394
+ if (previewTools.querySelector('.text-center')) {
395
+ previewTools.innerHTML = '';
396
+ }
397
+
398
+ const previewElement = document.createElement('div');
399
+ previewElement.className = 'flex items-center space-x-2';
400
+ previewElement.innerHTML = `
401
+ <div class="w-5 h-5 bg-${tool.color}-500 rounded flex items-center justify-center">
402
+ <i data-feather="${tool.icon}" class="text-white w-3 h-3"></i>
403
+ </div>
404
+ <span class="text-sm text-gray-700">${tool.name}</span>
405
+ `;
406
+ previewTools.appendChild(previewElement);
407
+ }
408
+
409
+ // Save agent functionality
410
+ document.getElementById('save-agent').addEventListener('click', function() {
411
+ const agentName = document.querySelector('input[type="text"]').value;
412
+ const selectedModel = modelSelect.options[modelSelect.selectedIndex].text;
413
+
414
+ // Show success message
415
+ const originalText = this.innerHTML;
416
+ this.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-2"></i>Saved!';
417
+ feather.replace();
418
+
419
+ setTimeout(() => {
420
+ this.innerHTML = originalText;
421
+ feather.replace();
422
+ }, 2000);
423
+ });
424
+ });
425
+ </script>
426
+ </body>
427
  </html>