Hugging Face's logo

Spaces:
shengxio
/
agentcreator-sample
Running

App Files Community
shengxio commited on
Commit
4a7833c
·
verified ·
1 Parent(s): 7070839

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +495 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Agentcreator Sample
3
- emoji: 🌖
4
- colorFrom: gray
5
- colorTo: pink
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: agentcreator-sample
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,495 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agent Creator</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
+ @keyframes float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+ .floating {
16
+ animation: float 3s ease-in-out infinite;
17
+ }
18
+ .agent-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .skill-pill:hover {
23
+ transform: scale(1.05);
24
+ }
25
+ .avatar-selector {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .avatar-selector:hover {
29
+ transform: scale(1.1);
30
+ border-color: #6366f1 !important;
31
+ }
32
+ .avatar-selector.selected {
33
+ border-color: #6366f1 !important;
34
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 min-h-screen">
39
+ <div class="container mx-auto px-4 py-8">
40
+ <!-- Header -->
41
+ <header class="flex justify-between items-center mb-12">
42
+ <div>
43
+ <h1 class="text-4xl font-bold text-indigo-600">Agent<span class="text-gray-800">Creator</span></h1>
44
+ <p class="text-gray-500">Build your custom digital agents</p>
45
+ </div>
46
+ <div class="flex items-center space-x-4">
47
+ <button id="newAgentBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full flex items-center space-x-2 transition-colors">
48
+ <i class="fas fa-plus"></i>
49
+ <span>New Agent</span>
50
+ </button>
51
+ <div class="relative">
52
+ <button id="themeToggle" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700">
53
+ <i class="fas fa-moon"></i>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </header>
58
+
59
+ <!-- Main Content -->
60
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
61
+ <!-- Agent Creation Form (Hidden by default) -->
62
+ <div id="agentFormContainer" class="lg:col-span-1 hidden">
63
+ <div class="bg-white rounded-xl shadow-md p-6 sticky top-6">
64
+ <div class="flex justify-between items-center mb-6">
65
+ <h2 class="text-2xl font-semibold text-gray-800">Create New Agent</h2>
66
+ <button id="closeFormBtn" class="text-gray-400 hover:text-gray-600">
67
+ <i class="fas fa-times"></i>
68
+ </button>
69
+ </div>
70
+
71
+ <form id="agentForm" class="space-y-6">
72
+ <!-- Agent Name -->
73
+ <div>
74
+ <label for="agentName" class="block text-sm font-medium text-gray-700 mb-1">Agent Name</label>
75
+ <input type="text" id="agentName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. Data Analyzer" required>
76
+ <p class="mt-1 text-xs text-red-500 hidden" id="nameError">Please enter a name (3-20 characters)</p>
77
+ </div>
78
+
79
+ <!-- Agent Role -->
80
+ <div>
81
+ <label for="agentRole" class="block text-sm font-medium text-gray-700 mb-1">Agent Role</label>
82
+ <select id="agentRole" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
83
+ <option value="" disabled selected>Select a role</option>
84
+ <option value="Analyst">Analyst</option>
85
+ <option value="Assistant">Assistant</option>
86
+ <option value="Automation">Automation</option>
87
+ <option value="Security">Security</option>
88
+ <option value="Customer Support">Customer Support</option>
89
+ <option value="Research">Research</option>
90
+ <option value="Other">Other</option>
91
+ </select>
92
+ </div>
93
+
94
+ <!-- Agent Description -->
95
+ <div>
96
+ <label for="agentDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
97
+ <textarea id="agentDescription" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="What does your agent do?"></textarea>
98
+ </div>
99
+
100
+ <!-- Agent Avatar -->
101
+ <div>
102
+ <label class="block text-sm font-medium text-gray-700 mb-3">Choose Avatar</label>
103
+ <div class="grid grid-cols-4 gap-3">
104
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="1">
105
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent1" class="w-full rounded-full">
106
+ </div>
107
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="2">
108
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent2" class="w-full rounded-full">
109
+ </div>
110
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="3">
111
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent3" class="w-full rounded-full">
112
+ </div>
113
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="4">
114
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent4" class="w-full rounded-full">
115
+ </div>
116
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="5">
117
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent5" class="w-full rounded-full">
118
+ </div>
119
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="6">
120
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent6" class="w-full rounded-full">
121
+ </div>
122
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="7">
123
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent7" class="w-full rounded-full">
124
+ </div>
125
+ <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="8">
126
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent8" class="w-full rounded-full">
127
+ </div>
128
+ </div>
129
+ <input type="hidden" id="agentAvatar" value="1" required>
130
+ </div>
131
+
132
+ <!-- Agent Skills -->
133
+ <div>
134
+ <label class="block text-sm font-medium text-gray-700 mb-1">Skills & Capabilities</label>
135
+ <div class="flex flex-wrap gap-2 mb-2" id="selectedSkills">
136
+ <!-- Selected skills will appear here -->
137
+ </div>
138
+ <div class="relative">
139
+ <input type="text" id="skillInput" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Add a skill...">
140
+ <div class="absolute right-2 top-2">
141
+ <button type="button" id="addSkillBtn" class="bg-indigo-600 text-white p-1 rounded-full hover:bg-indigo-700 transition-colors">
142
+ <i class="fas fa-plus text-xs"></i>
143
+ </button>
144
+ </div>
145
+ </div>
146
+ <div class="mt-2 text-xs text-gray-500">Press enter or click + to add a skill</div>
147
+ </div>
148
+
149
+ <!-- Agent Settings -->
150
+ <div class="space-y-3">
151
+ <label class="block text-sm font-medium text-gray-700">Settings</label>
152
+ <div class="flex items-center">
153
+ <input type="checkbox" id="agentActive" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
154
+ <label for="agentActive" class="ml-2 block text-sm text-gray-700">Active</label>
155
+ </div>
156
+ <div class="flex items-center">
157
+ <input type="checkbox" id="agentNotifications" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
158
+ <label for="agentNotifications" class="ml-2 block text-sm text-gray-700">Enable Notifications</label>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Form Actions -->
163
+ <div class="pt-4 flex space-x-3">
164
+ <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors">
165
+ Create Agent
166
+ </button>
167
+ <button type="button" id="resetFormBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
168
+ Reset
169
+ </button>
170
+ </div>
171
+ </form>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Agents List -->
176
+ <div id="agentsList" class="lg:col-span-3 space-y-6">
177
+ <div class="text-center py-12">
178
+ <div class="floating inline-block mb-6">
179
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Welcome" class="w-24 h-24">
180
+ </div>
181
+ <h2 class="text-2xl font-semibold text-gray-800 mb-2">Create Your First Agent</h2>
182
+ <p class="text-gray-500 mb-6">Digital agents can automate tasks, analyze data, and assist with various operations.</p>
183
+ <button id="welcomeCreateBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full flex items-center space-x-2 transition-colors mx-auto">
184
+ <i class="fas fa-plus"></i>
185
+ <span>Create New Agent</span>
186
+ </button>
187
+ </div>
188
+
189
+ <!-- Agent cards will be dynamically inserted here -->
190
+ <div id="agentsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
191
+ <!-- Sample agent cards will be added by JavaScript -->
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <script>
198
+ document.addEventListener('DOMContentLoaded', function() {
199
+ // DOM Elements
200
+ const newAgentBtn = document.getElementById('newAgentBtn');
201
+ const welcomeCreateBtn = document.getElementById('welcomeCreateBtn');
202
+ const closeFormBtn = document.getElementById('closeFormBtn');
203
+ const agentFormContainer = document.getElementById('agentFormContainer');
204
+ const agentsList = document.getElementById('agentsList');
205
+ const agentForm = document.getElementById('agentForm');
206
+ const resetFormBtn = document.getElementById('resetFormBtn');
207
+ const skillInput = document.getElementById('skillInput');
208
+ const addSkillBtn = document.getElementById('addSkillBtn');
209
+ const selectedSkills = document.getElementById('selectedSkills');
210
+ const agentsContainer = document.getElementById('agentsContainer');
211
+ const themeToggle = document.getElementById('themeToggle');
212
+ const avatarSelectors = document.querySelectorAll('.avatar-selector');
213
+
214
+ // State
215
+ let agents = JSON.parse(localStorage.getItem('agents')) || [];
216
+ let selectedAvatar = '1';
217
+
218
+ // Initialize
219
+ renderAgents();
220
+ checkEmptyState();
221
+
222
+ // Event Listeners
223
+ newAgentBtn.addEventListener('click', showAgentForm);
224
+ welcomeCreateBtn.addEventListener('click', showAgentForm);
225
+ closeFormBtn.addEventListener('click', hideAgentForm);
226
+ resetFormBtn.addEventListener('click', resetForm);
227
+ skillInput.addEventListener('keypress', function(e) {
228
+ if (e.key === 'Enter') {
229
+ e.preventDefault();
230
+ addSkill();
231
+ }
232
+ });
233
+ addSkillBtn.addEventListener('click', addSkill);
234
+ agentForm.addEventListener('submit', handleFormSubmit);
235
+ themeToggle.addEventListener('click', toggleTheme);
236
+
237
+ // Avatar selection
238
+ avatarSelectors.forEach(selector => {
239
+ selector.addEventListener('click', function() {
240
+ // Remove selected class from all avatars
241
+ avatarSelectors.forEach(av => av.classList.remove('selected'));
242
+
243
+ // Add selected class to clicked avatar
244
+ this.classList.add('selected');
245
+
246
+ // Update selected avatar value
247
+ selectedAvatar = this.getAttribute('data-avatar');
248
+ document.getElementById('agentAvatar').value = selectedAvatar;
249
+ });
250
+ });
251
+
252
+ // Select first avatar by default
253
+ if (avatarSelectors.length > 0) {
254
+ avatarSelectors[0].classList.add('selected');
255
+ }
256
+
257
+ // Functions
258
+ function showAgentForm() {
259
+ agentFormContainer.classList.remove('hidden');
260
+ agentsList.classList.remove('lg:col-span-3');
261
+ agentsList.classList.add('lg:col-span-2');
262
+ }
263
+
264
+ function hideAgentForm() {
265
+ agentFormContainer.classList.add('hidden');
266
+ agentsList.classList.remove('lg:col-span-2');
267
+ agentsList.classList.add('lg:col-span-3');
268
+ }
269
+
270
+ function resetForm() {
271
+ agentForm.reset();
272
+ selectedSkills.innerHTML = '';
273
+ document.getElementById('agentAvatar').value = '1';
274
+
275
+ // Reset avatar selection
276
+ avatarSelectors.forEach(av => av.classList.remove('selected'));
277
+ if (avatarSelectors.length > 0) {
278
+ avatarSelectors[0].classList.add('selected');
279
+ }
280
+ }
281
+
282
+ function addSkill() {
283
+ const skill = skillInput.value.trim();
284
+ if (skill) {
285
+ // Create skill pill
286
+ const skillPill = document.createElement('div');
287
+ skillPill.className = 'skill-pill bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full flex items-center transition-transform';
288
+ skillPill.innerHTML = `
289
+ ${skill}
290
+ <button type="button" class="ml-1 text-indigo-400 hover:text-indigo-600" onclick="this.parentElement.remove()">
291
+ <i class="fas fa-times text-xs"></i>
292
+ </button>
293
+ `;
294
+
295
+ selectedSkills.appendChild(skillPill);
296
+ skillInput.value = '';
297
+ }
298
+ }
299
+
300
+ function handleFormSubmit(e) {
301
+ e.preventDefault();
302
+
303
+ // Validate form
304
+ const name = document.getElementById('agentName').value.trim();
305
+ if (name.length < 3 || name.length > 20) {
306
+ document.getElementById('nameError').classList.remove('hidden');
307
+ return;
308
+ } else {
309
+ document.getElementById('nameError').classList.add('hidden');
310
+ }
311
+
312
+ // Get form values
313
+ const role = document.getElementById('agentRole').value;
314
+ const description = document.getElementById('agentDescription').value.trim();
315
+ const avatar = document.getElementById('agentAvatar').value;
316
+ const isActive = document.getElementById('agentActive').checked;
317
+ const notifications = document.getElementById('agentNotifications').checked;
318
+
319
+ // Get skills
320
+ const skills = [];
321
+ selectedSkills.querySelectorAll('.skill-pill').forEach(pill => {
322
+ skills.push(pill.textContent.trim());
323
+ });
324
+
325
+ // Create agent object
326
+ const agent = {
327
+ id: Date.now().toString(),
328
+ name,
329
+ role,
330
+ description,
331
+ avatar,
332
+ skills,
333
+ isActive,
334
+ notifications,
335
+ createdAt: new Date().toISOString()
336
+ };
337
+
338
+ // Add to agents array
339
+ agents.unshift(agent);
340
+
341
+ // Save to localStorage
342
+ localStorage.setItem('agents', JSON.stringify(agents));
343
+
344
+ // Update UI
345
+ renderAgents();
346
+ resetForm();
347
+ hideAgentForm();
348
+ checkEmptyState();
349
+ }
350
+
351
+ function renderAgents() {
352
+ agentsContainer.innerHTML = '';
353
+
354
+ agents.forEach(agent => {
355
+ const agentCard = document.createElement('div');
356
+ agentCard.className = 'agent-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg';
357
+ agentCard.innerHTML = `
358
+ <div class="p-6">
359
+ <div class="flex items-start justify-between">
360
+ <div class="flex items-center space-x-4">
361
+ <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent${agent.avatar}" class="w-14 h-14 rounded-full">
362
+ <div>
363
+ <h3 class="text-lg font-semibold text-gray-800">${agent.name}</h3>
364
+ <span class="inline-block px-2 py-1 text-xs font-medium rounded-full ${getRoleColor(agent.role)}">
365
+ ${agent.role}
366
+ </span>
367
+ </div>
368
+ </div>
369
+ <div class="flex items-center space-x-2">
370
+ <span class="text-xs text-gray-500">${formatDate(agent.createdAt)}</span>
371
+ <button class="text-gray-400 hover:text-red-500 delete-btn" data-id="${agent.id}">
372
+ <i class="fas fa-trash"></i>
373
+ </button>
374
+ </div>
375
+ </div>
376
+
377
+ <p class="mt-3 text-gray-600 text-sm">${agent.description || 'No description provided.'}</p>
378
+
379
+ <div class="mt-4">
380
+ <div class="flex items-center space-x-2 mb-2">
381
+ <span class="text-sm font-medium text-gray-700">Status:</span>
382
+ <span class="text-sm ${agent.isActive ? 'text-green-600' : 'text-gray-500'}">
383
+ ${agent.isActive ? 'Active' : 'Inactive'}
384
+ </span>
385
+ <span class="text-gray-300 mx-1">•</span>
386
+ <span class="text-sm font-medium text-gray-700">Notifications:</span>
387
+ <span class="text-sm ${agent.notifications ? 'text-blue-600' : 'text-gray-500'}">
388
+ ${agent.notifications ? 'On' : 'Off'}
389
+ </span>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="mt-4 pt-4 border-t border-gray-100">
394
+ <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Skills</h4>
395
+ <div class="flex flex-wrap gap-2">
396
+ ${agent.skills.map(skill => `
397
+ <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
398
+ ${skill}
399
+ </span>
400
+ `).join('')}
401
+ ${agent.skills.length === 0 ? '<span class="text-gray-400 text-xs">No skills added</span>' : ''}
402
+ </div>
403
+ </div>
404
+ </div>
405
+ `;
406
+
407
+ agentsContainer.appendChild(agentCard);
408
+ });
409
+
410
+ // Add event listeners to delete buttons
411
+ document.querySelectorAll('.delete-btn').forEach(btn => {
412
+ btn.addEventListener('click', function() {
413
+ const id = this.getAttribute('data-id');
414
+ deleteAgent(id);
415
+ });
416
+ });
417
+ }
418
+
419
+ function deleteAgent(id) {
420
+ if (confirm('Are you sure you want to delete this agent?')) {
421
+ agents = agents.filter(agent => agent.id !== id);
422
+ localStorage.setItem('agents', JSON.stringify(agents));
423
+ renderAgents();
424
+ checkEmptyState();
425
+ }
426
+ }
427
+
428
+ function checkEmptyState() {
429
+ if (agents.length === 0) {
430
+ agentsContainer.innerHTML = `
431
+ <div class="col-span-full text-center py-12">
432
+ <div class="mx-auto w-24 h-24 text-gray-300 mb-4">
433
+ <i class="fas fa-robot text-6xl opacity-50"></i>
434
+ </div>
435
+ <h3 class="text-lg font-medium text-gray-700 mb-2">No Agents Created Yet</h3>
436
+ <p class="text-gray-500 mb-4">Create your first agent to get started</p>
437
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors" onclick="showAgentForm()">
438
+ Create Agent
439
+ </button>
440
+ </div>
441
+ `;
442
+ }
443
+ }
444
+
445
+ function getRoleColor(role) {
446
+ const colors = {
447
+ 'Analyst': 'bg-purple-100 text-purple-800',
448
+ 'Assistant': 'bg-blue-100 text-blue-800',
449
+ 'Automation': 'bg-green-100 text-green-800',
450
+ 'Security': 'bg-red-100 text-red-800',
451
+ 'Customer Support': 'bg-yellow-100 text-yellow-800',
452
+ 'Research': 'bg-indigo-100 text-indigo-800',
453
+ 'Other': 'bg-gray-100 text-gray-800'
454
+ };
455
+ return colors[role] || colors['Other'];
456
+ }
457
+
458
+ function formatDate(dateString) {
459
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
460
+ return new Date(dateString).toLocaleDateString(undefined, options);
461
+ }
462
+
463
+ function toggleTheme() {
464
+ const icon = themeToggle.querySelector('i');
465
+ if (document.documentElement.classList.contains('dark')) {
466
+ document.documentElement.classList.remove('dark');
467
+ icon.classList.remove('fa-sun');
468
+ icon.classList.add('fa-moon');
469
+ localStorage.setItem('theme', 'light');
470
+ } else {
471
+ document.documentElement.classList.add('dark');
472
+ icon.classList.remove('fa-moon');
473
+ icon.classList.add('fa-sun');
474
+ localStorage.setItem('theme', 'dark');
475
+ }
476
+ }
477
+
478
+ // Check for saved theme preference
479
+ if (localStorage.getItem('theme') === 'dark' ||
480
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
481
+ document.documentElement.classList.add('dark');
482
+ themeToggle.querySelector('i').classList.remove('fa-moon');
483
+ themeToggle.querySelector('i').classList.add('fa-sun');
484
+ }
485
+ });
486
+
487
+ // Make showAgentForm available globally for the empty state button
488
+ function showAgentForm() {
489
+ document.getElementById('agentFormContainer').classList.remove('hidden');
490
+ document.getElementById('agentsList').classList.remove('lg:col-span-3');
491
+ document.getElementById('agentsList').classList.add('lg:col-span-2');
492
+ }
493
+ </script>
494
+ <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=shengxio/agentcreator-sample" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
495
+ </html>
prompts.txt ADDED
File without changes