Hugging Face's logo

Spaces:
adowu
/
awwagent
Running

App Files Community
adowu commited on
Commit
29c9563
·
verified ·
1 Parent(s): 0856e11

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +545 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Awwagent
3
- emoji: 🏆
4
- colorFrom: gray
5
- colorTo: red
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: awwagent
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,545 @@
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>AutomaForge - AI Agent Creation Platform</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
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .block-item {
14
+ transition: all 0.2s ease;
15
+ }
16
+ .block-item:hover {
17
+ transform: translateY(-2px);
18
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .workspace {
21
+ background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
22
+ background-size: 20px 20px;
23
+ }
24
+ .connection-path {
25
+ stroke: #6366f1;
26
+ stroke-width: 3;
27
+ fill: none;
28
+ marker-end: url(#arrowhead);
29
+ }
30
+ .agent-block {
31
+ transition: all 0.3s ease;
32
+ }
33
+ .agent-block:hover {
34
+ transform: scale(1.02);
35
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
36
+ }
37
+ .chat-message {
38
+ max-width: 80%;
39
+ }
40
+ .typing-indicator::after {
41
+ content: '...';
42
+ animation: typing 1.5s infinite;
43
+ display: inline-block;
44
+ width: 0;
45
+ }
46
+ @keyframes typing {
47
+ 0% { content: '.'; }
48
+ 33% { content: '..'; }
49
+ 66% { content: '...'; }
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans text-gray-800">
54
+ <div class="flex h-screen overflow-hidden">
55
+ <!-- Sidebar -->
56
+ <div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 flex flex-col">
57
+ <div class="p-4 border-b border-indigo-800 flex items-center">
58
+ <div class="bg-white rounded-lg p-2 mr-3">
59
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-indigo-600">
60
+ <path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.176 7.547 7.547 0 01-1.705-1.715.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.546 3.75 3.75 0 013.255 3.718z" clip-rule="evenodd" />
61
+ </svg>
62
+ </div>
63
+ <h1 class="text-xl font-bold">AutomaForge</h1>
64
+ </div>
65
+
66
+ <div class="p-4 border-b border-indigo-800">
67
+ <button class="w-full bg-indigo-700 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg flex items-center justify-center transition">
68
+ <i class="fas fa-plus mr-2"></i> New Agent
69
+ </button>
70
+ </div>
71
+
72
+ <div class="flex-1 overflow-y-auto">
73
+ <div class="p-4">
74
+ <h3 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Recent Agents</h3>
75
+ <ul>
76
+ <li class="mb-2">
77
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
78
+ <div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div>
79
+ <span>Customer Support Bot</span>
80
+ </a>
81
+ </li>
82
+ <li class="mb-2">
83
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
84
+ <div class="w-3 h-3 rounded-full bg-yellow-400 mr-3"></div>
85
+ <span>Data Analyzer</span>
86
+ </a>
87
+ </li>
88
+ <li class="mb-2">
89
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
90
+ <div class="w-3 h-3 rounded-full bg-red-400 mr-3"></div>
91
+ <span>Image Processor</span>
92
+ </a>
93
+ </li>
94
+ <li class="mb-2">
95
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
96
+ <div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div>
97
+ <span>Document Summarizer</span>
98
+ </a>
99
+ </li>
100
+ </ul>
101
+ </div>
102
+
103
+ <div class="p-4 border-t border-indigo-800">
104
+ <h3 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Templates</h3>
105
+ <ul>
106
+ <li class="mb-2">
107
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
108
+ <i class="fas fa-comments mr-3 text-indigo-300"></i>
109
+ <span>Chatbot</span>
110
+ </a>
111
+ </li>
112
+ <li class="mb-2">
113
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
114
+ <i class="fas fa-chart-line mr-3 text-indigo-300"></i>
115
+ <span>Data Analysis</span>
116
+ </a>
117
+ </li>
118
+ <li class="mb-2">
119
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
120
+ <i class="fas fa-image mr-3 text-indigo-300"></i>
121
+ <span>Image Processing</span>
122
+ </a>
123
+ </li>
124
+ </ul>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="p-4 border-t border-indigo-800">
129
+ <div class="flex items-center">
130
+ <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
131
+ <i class="fas fa-user text-sm"></i>
132
+ </div>
133
+ <div>
134
+ <div class="font-medium">John Doe</div>
135
+ <div class="text-xs text-indigo-300">Admin</div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Main Content -->
142
+ <div class="flex-1 flex flex-col overflow-hidden">
143
+ <!-- Top Navigation -->
144
+ <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
145
+ <div class="flex items-center">
146
+ <button class="mr-4 text-gray-500 hover:text-gray-700">
147
+ <i class="fas fa-bars"></i>
148
+ </button>
149
+ <h2 class="text-lg font-semibold">Agent Architect</h2>
150
+ </div>
151
+
152
+ <div class="flex items-center space-x-4">
153
+ <button class="text-gray-500 hover:text-gray-700">
154
+ <i class="fas fa-question-circle"></i>
155
+ </button>
156
+ <button class="text-gray-500 hover:text-gray-700">
157
+ <i class="fas fa-bell"></i>
158
+ </button>
159
+ <button class="bg-indigo-600 text-white py-1 px-3 rounded-lg text-sm hover:bg-indigo-700 transition">
160
+ <i class="fas fa-play mr-1"></i> Run Agent
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Main Workspace -->
166
+ <div class="flex-1 flex overflow-hidden">
167
+ <!-- Blocks Library -->
168
+ <div class="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto">
169
+ <div class="mb-6">
170
+ <h3 class="font-medium text-gray-700 mb-3">Search Blocks</h3>
171
+ <div class="relative">
172
+ <input type="text" placeholder="Search blocks..." class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
173
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="mb-6">
178
+ <h3 class="font-medium text-gray-700 mb-3">Categories</h3>
179
+ <div class="space-y-2">
180
+ <button class="w-full text-left px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 flex items-center justify-between">
181
+ <span>All Blocks</span>
182
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">42</span>
183
+ </button>
184
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
185
+ <span>NLP</span>
186
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">12</span>
187
+ </button>
188
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
189
+ <span>Image Processing</span>
190
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">8</span>
191
+ </button>
192
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
193
+ <span>API Integration</span>
194
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">6</span>
195
+ </button>
196
+ <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
197
+ <span>Data Processing</span>
198
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">10</span>
199
+ </button>
200
+ </div>
201
+ </div>
202
+
203
+ <div>
204
+ <h3 class="font-medium text-gray-700 mb-3">Available Blocks</h3>
205
+ <div class="space-y-3">
206
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
207
+ <div class="flex items-center mb-2">
208
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
209
+ <i class="fas fa-comment text-blue-500"></i>
210
+ </div>
211
+ <div class="font-medium">Text Input</div>
212
+ </div>
213
+ <p class="text-xs text-gray-500">Accepts user text input for processing</p>
214
+ </div>
215
+
216
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
217
+ <div class="flex items-center mb-2">
218
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
219
+ <i class="fas fa-brain text-purple-500"></i>
220
+ </div>
221
+ <div class="font-medium">LLM Processor</div>
222
+ </div>
223
+ <p class="text-xs text-gray-500">Processes text with a large language model</p>
224
+ </div>
225
+
226
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
227
+ <div class="flex items-center mb-2">
228
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
229
+ <i class="fas fa-database text-green-500"></i>
230
+ </div>
231
+ <div class="font-medium">Knowledge Base</div>
232
+ </div>
233
+ <p class="text-xs text-gray-500">Connects to your knowledge repository</p>
234
+ </div>
235
+
236
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
237
+ <div class="flex items-center mb-2">
238
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
239
+ <i class="fas fa-code text-yellow-500"></i>
240
+ </div>
241
+ <div class="font-medium">API Connector</div>
242
+ </div>
243
+ <p class="text-xs text-gray-500">Connects to external APIs</p>
244
+ </div>
245
+
246
+ <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md">
247
+ <div class="flex items-center mb-2">
248
+ <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
249
+ <i class="fas fa-image text-red-500"></i>
250
+ </div>
251
+ <div class="font-medium">Image Analyzer</div>
252
+ </div>
253
+ <p class="text-xs text-gray-500">Analyzes and processes images</p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Agent Workspace -->
260
+ <div class="flex-1 bg-gray-50 workspace overflow-auto relative">
261
+ <svg class="absolute top-0 left-0 w-full h-full pointer-events-none" style="z-index: 0;">
262
+ <defs>
263
+ <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
264
+ <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" />
265
+ </marker>
266
+ </defs>
267
+ <path class="connection-path" d="M200,150 C300,150 400,250 500,250" />
268
+ <path class="connection-path" d="M500,250 C600,250 700,350 800,350" />
269
+ </svg>
270
+
271
+ <div class="p-6">
272
+ <div class="max-w-4xl mx-auto">
273
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
274
+ <h3 class="text-lg font-semibold mb-4">Agent Architect</h3>
275
+ <p class="text-gray-600 mb-4">Describe what you want your AI agent to do in natural language, and Agent Architect will automatically generate the workflow.</p>
276
+
277
+ <div class="relative">
278
+ <textarea class="w-full border border-gray-300 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Example: Create a customer support chatbot that can answer questions about our products, check order status, and escalate to human support when needed..."></textarea>
279
+ <button class="absolute bottom-4 right-4 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition">
280
+ <i class="fas fa-magic"></i> Generate
281
+ </button>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="flex justify-center mb-6">
286
+ <div class="flex items-center space-x-4">
287
+ <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
288
+ <i class="fas fa-layer-group mr-2 text-indigo-500"></i>
289
+ <span>Add Layer</span>
290
+ </button>
291
+ <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
292
+ <i class="fas fa-robot mr-2 text-indigo-500"></i>
293
+ <span>Auto-Connect</span>
294
+ </button>
295
+ <button class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
296
+ <i class="fas fa-bolt mr-2 text-indigo-500"></i>
297
+ <span>Optimize</span>
298
+ </button>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="grid grid-cols-3 gap-6">
303
+ <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-blue-200 relative" style="transform: translate(200px, 150px); z-index: 10;">
304
+ <div class="absolute -top-2 -right-2 bg-blue-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">
305
+ <i class="fas fa-play"></i>
306
+ </div>
307
+ <div class="flex items-center mb-2">
308
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
309
+ <i class="fas fa-comment text-blue-500"></i>
310
+ </div>
311
+ <div class="font-medium">User Input</div>
312
+ </div>
313
+ <p class="text-xs text-gray-500 mb-3">Accepts user questions</p>
314
+ <div class="text-xs text-gray-400">Output: <span class="text-gray-600">User query text</span></div>
315
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full"></div>
316
+ </div>
317
+
318
+ <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-purple-200 relative" style="transform: translate(500px, 250px); z-index: 10;">
319
+ <div class="flex items-center mb-2">
320
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
321
+ <i class="fas fa-brain text-purple-500"></i>
322
+ </div>
323
+ <div class="font-medium">LLM Processor</div>
324
+ </div>
325
+ <p class="text-xs text-gray-500 mb-3">Processes user query with GPT-4</p>
326
+ <div class="text-xs text-gray-400 mb-1">Input: <span class="text-gray-600">User query text</span></div>
327
+ <div class="text-xs text-gray-400">Output: <span class="text-gray-600">Processed response</span></div>
328
+ <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
329
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-purple-500 rounded-full"></div>
330
+ </div>
331
+
332
+ <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-green-200 relative" style="transform: translate(800px, 350px); z-index: 10;">
333
+ <div class="flex items-center mb-2">
334
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
335
+ <i class="fas fa-comments text-green-500"></i>
336
+ </div>
337
+ <div class="font-medium">Response Output</div>
338
+ </div>
339
+ <p class="text-xs text-gray-500 mb-3">Returns response to user</p>
340
+ <div class="text-xs text-gray-400">Input: <span class="text-gray-600">Processed response</span></div>
341
+ <div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-4 bg-green-500 rounded-full"></div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Right Panel - Configuration and Testing -->
349
+ <div class="w-80 bg-white border-l border-gray-200 flex flex-col">
350
+ <div class="border-b border-gray-200 p-4">
351
+ <div class="flex space-x-2">
352
+ <button class="flex-1 py-2 px-3 rounded-lg bg-indigo-600 text-white text-sm font-medium">
353
+ Configuration
354
+ </button>
355
+ <button class="flex-1 py-2 px-3 rounded-lg bg-white border border-gray-200 text-sm font-medium hover:bg-gray-50">
356
+ Testing
357
+ </button>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="flex-1 overflow-y-auto p-4">
362
+ <div class="mb-6">
363
+ <h3 class="font-medium text-gray-700 mb-3">Selected Block</h3>
364
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
365
+ <div class="flex items-center mb-3">
366
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
367
+ <i class="fas fa-brain text-purple-500"></i>
368
+ </div>
369
+ <div>
370
+ <div class="font-medium">LLM Processor</div>
371
+ <div class="text-xs text-gray-500">Processes text with a large language model</div>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="space-y-4">
376
+ <div>
377
+ <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
378
+ <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
379
+ <option>GPT-4</option>
380
+ <option>GPT-3.5</option>
381
+ <option>Claude-2</option>
382
+ <option>Llama 2</option>
383
+ </select>
384
+ </div>
385
+
386
+ <div>
387
+ <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
388
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
389
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
390
+ <span>Precise</span>
391
+ <span>Creative</span>
392
+ </div>
393
+ </div>
394
+
395
+ <div>
396
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
397
+ <input type="number" value="1000" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
398
+ </div>
399
+
400
+ <div>
401
+ <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label>
402
+ <textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm" rows="3">You are a helpful customer support assistant...</textarea>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <div>
409
+ <h3 class="font-medium text-gray-700 mb-3">Optimization Suggestions</h3>
410
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
411
+ <div class="flex items-start mb-3">
412
+ <div class="flex-shrink-0 mt-1">
413
+ <i class="fas fa-lightbulb text-yellow-500"></i>
414
+ </div>
415
+ <div class="ml-3">
416
+ <h4 class="text-sm font-medium text-yellow-800">Add Knowledge Base</h4>
417
+ <p class="text-xs text-yellow-700">Consider connecting a knowledge base to improve response accuracy.</p>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="flex items-start">
422
+ <div class="flex-shrink-0 mt-1">
423
+ <i class="fas fa-lightbulb text-yellow-500"></i>
424
+ </div>
425
+ <div class="ml-3">
426
+ <h4 class="text-sm font-medium text-yellow-800">Add Sentiment Analysis</h4>
427
+ <p class="text-xs text-yellow-700">Adding sentiment analysis could help route frustrated customers to human support.</p>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+
434
+ <!-- Testing Chat Panel -->
435
+ <div class="border-t border-gray-200 p-4 bg-gray-50">
436
+ <h3 class="font-medium text-gray-700 mb-3">Test Agent</h3>
437
+
438
+ <div class="bg-white rounded-lg border border-gray-200 mb-3" style="height: 200px; overflow-y: auto;">
439
+ <div class="p-3 space-y-3">
440
+ <div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto">
441
+ <div class="text-xs text-gray-500 mb-1 text-right">You</div>
442
+ <p class="text-sm">How can I track my order?</p>
443
+ </div>
444
+
445
+ <div class="chat-message bg-gray-100 rounded-lg p-3">
446
+ <div class="text-xs text-gray-500 mb-1">Agent</div>
447
+ <p class="text-sm">You can track your order by visiting the order status page...</p>
448
+ </div>
449
+
450
+ <div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto">
451
+ <div class="text-xs text-gray-500 mb-1 text-right">You</div>
452
+ <p class="text-sm">What's your return policy?</p>
453
+ </div>
454
+
455
+ <div class="chat-message bg-gray-100 rounded-lg p-3">
456
+ <div class="text-xs text-gray-500 mb-1">Agent</div>
457
+ <p class="text-sm typing-indicator"></p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="relative">
463
+ <input type="text" placeholder="Type a message to test..." class="w-full border border-gray-300 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
464
+ <button class="absolute right-2 top-2 text-indigo-600 hover:text-indigo-800">
465
+ <i class="fas fa-paper-plane"></i>
466
+ </button>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <script>
475
+ // Simple drag and drop functionality for blocks
476
+ document.addEventListener('DOMContentLoaded', function() {
477
+ const blocks = document.querySelectorAll('.block-item');
478
+ const workspace = document.querySelector('.workspace');
479
+
480
+ blocks.forEach(block => {
481
+ block.addEventListener('dragstart', function(e) {
482
+ e.dataTransfer.setData('text/plain', block.innerHTML);
483
+ e.dataTransfer.effectAllowed = 'copy';
484
+ });
485
+ });
486
+
487
+ workspace.addEventListener('dragover', function(e) {
488
+ e.preventDefault();
489
+ e.dataTransfer.dropEffect = 'copy';
490
+ });
491
+
492
+ workspace.addEventListener('drop', function(e) {
493
+ e.preventDefault();
494
+ const data = e.dataTransfer.getData('text/plain');
495
+
496
+ const newBlock = document.createElement('div');
497
+ newBlock.className = 'agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-gray-200 absolute cursor-move';
498
+ newBlock.style.left = `${e.clientX - 100}px`;
499
+ newBlock.style.top = `${e.clientY - 50}px`;
500
+ newBlock.innerHTML = data;
501
+
502
+ workspace.appendChild(newBlock);
503
+
504
+ // Make new blocks draggable
505
+ newBlock.addEventListener('mousedown', function(e) {
506
+ if (e.target === newBlock || e.target.parentNode === newBlock) {
507
+ let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
508
+
509
+ e = e || window.event;
510
+ e.preventDefault();
511
+ pos3 = e.clientX;
512
+ pos4 = e.clientY;
513
+
514
+ document.onmouseup = closeDragElement;
515
+ document.onmousemove = elementDrag;
516
+
517
+ function elementDrag(e) {
518
+ e = e || window.event;
519
+ e.preventDefault();
520
+ pos1 = pos3 - e.clientX;
521
+ pos2 = pos4 - e.clientY;
522
+ pos3 = e.clientX;
523
+ pos4 = e.clientY;
524
+
525
+ newBlock.style.top = (newBlock.offsetTop - pos2) + "px";
526
+ newBlock.style.left = (newBlock.offsetLeft - pos1) + "px";
527
+ }
528
+
529
+ function closeDragElement() {
530
+ document.onmouseup = null;
531
+ document.onmousemove = null;
532
+ }
533
+ }
534
+ });
535
+ });
536
+
537
+ // Simulate typing indicator animation
538
+ setTimeout(() => {
539
+ const typingIndicator = document.querySelector('.typing-indicator');
540
+ typingIndicator.innerHTML = 'Our return policy allows returns within 30 days of purchase. Items must be in original condition with tags attached. Would you like me to provide more details?';
541
+ }, 2000);
542
+ });
543
+ </script>
544
+ <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/awwagent" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
545
+ </html>