Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agent Creator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .skill-pill:hover { | |
| transform: scale(1.05); | |
| } | |
| .avatar-selector { | |
| transition: all 0.3s ease; | |
| } | |
| .avatar-selector:hover { | |
| transform: scale(1.1); | |
| border-color: #6366f1 ; | |
| } | |
| .avatar-selector.selected { | |
| border-color: #6366f1 ; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div> | |
| <h1 class="text-4xl font-bold text-indigo-600">Agent<span class="text-gray-800">Creator</span></h1> | |
| <p class="text-gray-500">Build your custom digital agents</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <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"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Agent</span> | |
| </button> | |
| <div class="relative"> | |
| <button id="themeToggle" class="p-2 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Agent Creation Form (Hidden by default) --> | |
| <div id="agentFormContainer" class="lg:col-span-1 hidden"> | |
| <div class="bg-white rounded-xl shadow-md p-6 sticky top-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Create New Agent</h2> | |
| <button id="closeFormBtn" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="agentForm" class="space-y-6"> | |
| <!-- Agent Name --> | |
| <div> | |
| <label for="agentName" class="block text-sm font-medium text-gray-700 mb-1">Agent Name</label> | |
| <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> | |
| <p class="mt-1 text-xs text-red-500 hidden" id="nameError">Please enter a name (3-20 characters)</p> | |
| </div> | |
| <!-- Agent Role --> | |
| <div> | |
| <label for="agentRole" class="block text-sm font-medium text-gray-700 mb-1">Agent Role</label> | |
| <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> | |
| <option value="" disabled selected>Select a role</option> | |
| <option value="Analyst">Analyst</option> | |
| <option value="Assistant">Assistant</option> | |
| <option value="Automation">Automation</option> | |
| <option value="Security">Security</option> | |
| <option value="Customer Support">Customer Support</option> | |
| <option value="Research">Research</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| <!-- Agent Description --> | |
| <div> | |
| <label for="agentDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <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> | |
| </div> | |
| <!-- Agent Avatar --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-3">Choose Avatar</label> | |
| <div class="grid grid-cols-4 gap-3"> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="1"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent1" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="2"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent2" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="3"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent3" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="4"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent4" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="5"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent5" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="6"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent6" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="7"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent7" class="w-full rounded-full"> | |
| </div> | |
| <div class="avatar-selector rounded-full border-2 border-gray-200 p-1 cursor-pointer" data-avatar="8"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent8" class="w-full rounded-full"> | |
| </div> | |
| </div> | |
| <input type="hidden" id="agentAvatar" value="1" required> | |
| </div> | |
| <!-- Agent Skills --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Skills & Capabilities</label> | |
| <div class="flex flex-wrap gap-2 mb-2" id="selectedSkills"> | |
| <!-- Selected skills will appear here --> | |
| </div> | |
| <div class="relative"> | |
| <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..."> | |
| <div class="absolute right-2 top-2"> | |
| <button type="button" id="addSkillBtn" class="bg-indigo-600 text-white p-1 rounded-full hover:bg-indigo-700 transition-colors"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500">Press enter or click + to add a skill</div> | |
| </div> | |
| <!-- Agent Settings --> | |
| <div class="space-y-3"> | |
| <label class="block text-sm font-medium text-gray-700">Settings</label> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="agentActive" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="agentActive" class="ml-2 block text-sm text-gray-700">Active</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="agentNotifications" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked> | |
| <label for="agentNotifications" class="ml-2 block text-sm text-gray-700">Enable Notifications</label> | |
| </div> | |
| </div> | |
| <!-- Form Actions --> | |
| <div class="pt-4 flex space-x-3"> | |
| <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors"> | |
| Create Agent | |
| </button> | |
| <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"> | |
| Reset | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Agents List --> | |
| <div id="agentsList" class="lg:col-span-3 space-y-6"> | |
| <div class="text-center py-12"> | |
| <div class="floating inline-block mb-6"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Welcome" class="w-24 h-24"> | |
| </div> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Create Your First Agent</h2> | |
| <p class="text-gray-500 mb-6">Digital agents can automate tasks, analyze data, and assist with various operations.</p> | |
| <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"> | |
| <i class="fas fa-plus"></i> | |
| <span>Create New Agent</span> | |
| </button> | |
| </div> | |
| <!-- Agent cards will be dynamically inserted here --> | |
| <div id="agentsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Sample agent cards will be added by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const newAgentBtn = document.getElementById('newAgentBtn'); | |
| const welcomeCreateBtn = document.getElementById('welcomeCreateBtn'); | |
| const closeFormBtn = document.getElementById('closeFormBtn'); | |
| const agentFormContainer = document.getElementById('agentFormContainer'); | |
| const agentsList = document.getElementById('agentsList'); | |
| const agentForm = document.getElementById('agentForm'); | |
| const resetFormBtn = document.getElementById('resetFormBtn'); | |
| const skillInput = document.getElementById('skillInput'); | |
| const addSkillBtn = document.getElementById('addSkillBtn'); | |
| const selectedSkills = document.getElementById('selectedSkills'); | |
| const agentsContainer = document.getElementById('agentsContainer'); | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const avatarSelectors = document.querySelectorAll('.avatar-selector'); | |
| // State | |
| let agents = JSON.parse(localStorage.getItem('agents')) || []; | |
| let selectedAvatar = '1'; | |
| // Initialize | |
| renderAgents(); | |
| checkEmptyState(); | |
| // Event Listeners | |
| newAgentBtn.addEventListener('click', showAgentForm); | |
| welcomeCreateBtn.addEventListener('click', showAgentForm); | |
| closeFormBtn.addEventListener('click', hideAgentForm); | |
| resetFormBtn.addEventListener('click', resetForm); | |
| skillInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| addSkill(); | |
| } | |
| }); | |
| addSkillBtn.addEventListener('click', addSkill); | |
| agentForm.addEventListener('submit', handleFormSubmit); | |
| themeToggle.addEventListener('click', toggleTheme); | |
| // Avatar selection | |
| avatarSelectors.forEach(selector => { | |
| selector.addEventListener('click', function() { | |
| // Remove selected class from all avatars | |
| avatarSelectors.forEach(av => av.classList.remove('selected')); | |
| // Add selected class to clicked avatar | |
| this.classList.add('selected'); | |
| // Update selected avatar value | |
| selectedAvatar = this.getAttribute('data-avatar'); | |
| document.getElementById('agentAvatar').value = selectedAvatar; | |
| }); | |
| }); | |
| // Select first avatar by default | |
| if (avatarSelectors.length > 0) { | |
| avatarSelectors[0].classList.add('selected'); | |
| } | |
| // Functions | |
| function showAgentForm() { | |
| agentFormContainer.classList.remove('hidden'); | |
| agentsList.classList.remove('lg:col-span-3'); | |
| agentsList.classList.add('lg:col-span-2'); | |
| } | |
| function hideAgentForm() { | |
| agentFormContainer.classList.add('hidden'); | |
| agentsList.classList.remove('lg:col-span-2'); | |
| agentsList.classList.add('lg:col-span-3'); | |
| } | |
| function resetForm() { | |
| agentForm.reset(); | |
| selectedSkills.innerHTML = ''; | |
| document.getElementById('agentAvatar').value = '1'; | |
| // Reset avatar selection | |
| avatarSelectors.forEach(av => av.classList.remove('selected')); | |
| if (avatarSelectors.length > 0) { | |
| avatarSelectors[0].classList.add('selected'); | |
| } | |
| } | |
| function addSkill() { | |
| const skill = skillInput.value.trim(); | |
| if (skill) { | |
| // Create skill pill | |
| const skillPill = document.createElement('div'); | |
| 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'; | |
| skillPill.innerHTML = ` | |
| ${skill} | |
| <button type="button" class="ml-1 text-indigo-400 hover:text-indigo-600" onclick="this.parentElement.remove()"> | |
| <i class="fas fa-times text-xs"></i> | |
| </button> | |
| `; | |
| selectedSkills.appendChild(skillPill); | |
| skillInput.value = ''; | |
| } | |
| } | |
| function handleFormSubmit(e) { | |
| e.preventDefault(); | |
| // Validate form | |
| const name = document.getElementById('agentName').value.trim(); | |
| if (name.length < 3 || name.length > 20) { | |
| document.getElementById('nameError').classList.remove('hidden'); | |
| return; | |
| } else { | |
| document.getElementById('nameError').classList.add('hidden'); | |
| } | |
| // Get form values | |
| const role = document.getElementById('agentRole').value; | |
| const description = document.getElementById('agentDescription').value.trim(); | |
| const avatar = document.getElementById('agentAvatar').value; | |
| const isActive = document.getElementById('agentActive').checked; | |
| const notifications = document.getElementById('agentNotifications').checked; | |
| // Get skills | |
| const skills = []; | |
| selectedSkills.querySelectorAll('.skill-pill').forEach(pill => { | |
| skills.push(pill.textContent.trim()); | |
| }); | |
| // Create agent object | |
| const agent = { | |
| id: Date.now().toString(), | |
| name, | |
| role, | |
| description, | |
| avatar, | |
| skills, | |
| isActive, | |
| notifications, | |
| createdAt: new Date().toISOString() | |
| }; | |
| // Add to agents array | |
| agents.unshift(agent); | |
| // Save to localStorage | |
| localStorage.setItem('agents', JSON.stringify(agents)); | |
| // Update UI | |
| renderAgents(); | |
| resetForm(); | |
| hideAgentForm(); | |
| checkEmptyState(); | |
| } | |
| function renderAgents() { | |
| agentsContainer.innerHTML = ''; | |
| agents.forEach(agent => { | |
| const agentCard = document.createElement('div'); | |
| agentCard.className = 'agent-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg'; | |
| agentCard.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex items-start justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://api.dicebear.com/7.x/bottts-neutral/svg?seed=Agent${agent.avatar}" class="w-14 h-14 rounded-full"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">${agent.name}</h3> | |
| <span class="inline-block px-2 py-1 text-xs font-medium rounded-full ${getRoleColor(agent.role)}"> | |
| ${agent.role} | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-gray-500">${formatDate(agent.createdAt)}</span> | |
| <button class="text-gray-400 hover:text-red-500 delete-btn" data-id="${agent.id}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-gray-600 text-sm">${agent.description || 'No description provided.'}</p> | |
| <div class="mt-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Status:</span> | |
| <span class="text-sm ${agent.isActive ? 'text-green-600' : 'text-gray-500'}"> | |
| ${agent.isActive ? 'Active' : 'Inactive'} | |
| </span> | |
| <span class="text-gray-300 mx-1">•</span> | |
| <span class="text-sm font-medium text-gray-700">Notifications:</span> | |
| <span class="text-sm ${agent.notifications ? 'text-blue-600' : 'text-gray-500'}"> | |
| ${agent.notifications ? 'On' : 'Off'} | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100"> | |
| <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Skills</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| ${agent.skills.map(skill => ` | |
| <span class="bg-gray-100 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded-full"> | |
| ${skill} | |
| </span> | |
| `).join('')} | |
| ${agent.skills.length === 0 ? '<span class="text-gray-400 text-xs">No skills added</span>' : ''} | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| agentsContainer.appendChild(agentCard); | |
| }); | |
| // Add event listeners to delete buttons | |
| document.querySelectorAll('.delete-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const id = this.getAttribute('data-id'); | |
| deleteAgent(id); | |
| }); | |
| }); | |
| } | |
| function deleteAgent(id) { | |
| if (confirm('Are you sure you want to delete this agent?')) { | |
| agents = agents.filter(agent => agent.id !== id); | |
| localStorage.setItem('agents', JSON.stringify(agents)); | |
| renderAgents(); | |
| checkEmptyState(); | |
| } | |
| } | |
| function checkEmptyState() { | |
| if (agents.length === 0) { | |
| agentsContainer.innerHTML = ` | |
| <div class="col-span-full text-center py-12"> | |
| <div class="mx-auto w-24 h-24 text-gray-300 mb-4"> | |
| <i class="fas fa-robot text-6xl opacity-50"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">No Agents Created Yet</h3> | |
| <p class="text-gray-500 mb-4">Create your first agent to get started</p> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors" onclick="showAgentForm()"> | |
| Create Agent | |
| </button> | |
| </div> | |
| `; | |
| } | |
| } | |
| function getRoleColor(role) { | |
| const colors = { | |
| 'Analyst': 'bg-purple-100 text-purple-800', | |
| 'Assistant': 'bg-blue-100 text-blue-800', | |
| 'Automation': 'bg-green-100 text-green-800', | |
| 'Security': 'bg-red-100 text-red-800', | |
| 'Customer Support': 'bg-yellow-100 text-yellow-800', | |
| 'Research': 'bg-indigo-100 text-indigo-800', | |
| 'Other': 'bg-gray-100 text-gray-800' | |
| }; | |
| return colors[role] || colors['Other']; | |
| } | |
| function formatDate(dateString) { | |
| const options = { year: 'numeric', month: 'short', day: 'numeric' }; | |
| return new Date(dateString).toLocaleDateString(undefined, options); | |
| } | |
| function toggleTheme() { | |
| const icon = themeToggle.querySelector('i'); | |
| if (document.documentElement.classList.contains('dark')) { | |
| document.documentElement.classList.remove('dark'); | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-moon'); | |
| localStorage.setItem('theme', 'light'); | |
| } else { | |
| document.documentElement.classList.add('dark'); | |
| icon.classList.remove('fa-moon'); | |
| icon.classList.add('fa-sun'); | |
| localStorage.setItem('theme', 'dark'); | |
| } | |
| } | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || | |
| (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.classList.add('dark'); | |
| themeToggle.querySelector('i').classList.remove('fa-moon'); | |
| themeToggle.querySelector('i').classList.add('fa-sun'); | |
| } | |
| }); | |
| // Make showAgentForm available globally for the empty state button | |
| function showAgentForm() { | |
| document.getElementById('agentFormContainer').classList.remove('hidden'); | |
| document.getElementById('agentsList').classList.remove('lg:col-span-3'); | |
| document.getElementById('agentsList').classList.add('lg:col-span-2'); | |
| } | |
| </script> | |
| <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> | |
| </html> |