Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AgentFlow Builder - LLM Agent Assembly</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .tool-item { | |
| cursor: grab; | |
| transition: all 0.2s ease; | |
| } | |
| .tool-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .agent-node { | |
| min-height: 120px; | |
| border-radius: 12px; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .agent-node:hover { | |
| transform: scale(1.02); | |
| } | |
| .drop-zone { | |
| min-height: 200px; | |
| border: 2px dashed #d1d5db; | |
| transition: all 0.3s ease; | |
| } | |
| .drop-zone.drag-over { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| .connection-line { | |
| position: absolute; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| height: 3px; | |
| transform-origin: left center; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 h-screen flex overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-80 bg-white border-r border-gray-200 flex flex-col h-full"> | |
| <!-- Header --> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gradient-to-r from-primary-500 to-purple-600 rounded-lg flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold text-gray-900">AgentFlow</h1> | |
| <p class="text-sm text-gray-500">LLM Agent Builder</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tools Section --> | |
| <div class="flex-1 overflow-y-auto"> | |
| <div class="p-6"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="tool" class="w-5 h-5 mr-2 text-primary-500"></i> | |
| Available Tools | |
| </h2> | |
| <div class="space-y-3" id="tools-list"> | |
| <!-- Web Search Tool --> | |
| <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="web-search"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="search" class="w-4 h-4 text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-900">Web Search</h3> | |
| <p class="text-sm text-gray-500">Search the web for information</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Reader Tool --> | |
| <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="file-reader"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="file-text" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-900">File Reader</h3> | |
| <p class="text-sm text-gray-500">Read and process documents</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calculator Tool --> | |
| <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="calculator"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="divide-circle" class="w-4 h-4 text-purple-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-900">Calculator</h3> | |
| <p class="text-sm text-gray-500">Perform mathematical operations</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Code Generator Tool --> | |
| <div class="tool-item bg-white border border-gray-200 rounded-lg p-4 shadow-sm" draggable="true" data-type="code-generator"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="code" class="w-4 h-4 text-orange-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-900">Code Generator</h3> | |
| <p class="text-sm text-gray-500">Generate and analyze code</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model Selection --> | |
| <div class="p-6 border-t border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center"> | |
| <i data-feather="brain" class="w-5 h-5 mr-2 text-primary-500"></i> | |
| LLM Models | |
| </h2> | |
| <div class="space-y-3"> | |
| <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"> | |
| <option value="gpt-4">GPT-4</option> | |
| <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option> | |
| <option value="claude-2">Claude 2</option> | |
| <option value="llama-2">Llama 2</option> | |
| <option value="palm-2">PaLM 2</option> | |
| </select> | |
| <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"> | |
| <i data-feather="save" class="w-4 h-4 mr-2"></i> | |
| Save Agent | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col h-full"> | |
| <!-- Top Bar --> | |
| <div class="bg-white border-b border-gray-200 px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-feather="menu" class="w-5 h-5 text-gray-600"></i> | |
| </button> | |
| <h2 class="text-lg font-semibold text-gray-900">Agent Workspace</h2> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors flex items-center"> | |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> | |
| Test Agent | |
| </button> | |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors flex items-center"> | |
| <i data-feather="share-2" class="w-4 h-4 mr-2"></i> | |
| Deploy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workspace --> | |
| <div class="flex-1 bg-gray-100 p-6 overflow-auto"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Agent Nodes --> | |
| <div class="space-y-6"> | |
| <h3 class="text-lg font-semibold text-gray-900">Agent Nodes</h3> | |
| <!-- Main Agent Node --> | |
| <div class="agent-node bg-white border-2 border-primary-500 rounded-xl p-6 shadow-lg"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="cpu" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Main Agent</h4> | |
| <p class="text-sm text-gray-500" id="selected-model">GPT-4</p> | |
| </div> | |
| </div> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-feather="settings" class="w-4 h-4 text-gray-600"></i> | |
| </button> | |
| </div> | |
| <div class="drop-zone bg-gray-50 rounded-lg p-4" id="agent-tools"> | |
| <div class="text-center text-gray-500"> | |
| <i data-feather="plus" class="w-8 h-8 mx-auto mb-2"></i> | |
| <p>Drag tools here to add functionality</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Agent Nodes --> | |
| <div class="agent-node bg-white border border-gray-200 rounded-xl p-6 shadow-sm"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-gray-400 rounded-lg flex items-center justify-center"> | |
| <i data-feather="user" class="text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Assistant Agent</h4> | |
| </div> | |
| </div> | |
| <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> | |
| <i data-feather="plus" class="w-4 h-4 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent Configuration --> | |
| <div class="space-y-6"> | |
| <h3 class="text-lg font-semibold text-gray-900">Configuration</h3> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Agent Name</label> | |
| <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"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">System Prompt</label> | |
| <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> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Temperature</label> | |
| <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>More Focused</span> | |
| <span>More Creative</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Agent Preview --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm"> | |
| <h4 class="font-semibold text-gray-900 mb-4">Agent Preview</h4> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="w-8 h-8 bg-primary-500 rounded-lg flex items-center justify-center"> | |
| <i data-feather="eye" class="text-white w-4 h-4"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-900">Active Tools:</span> | |
| </div> | |
| <div id="preview-tools" class="space-y-2"> | |
| <div class="text-sm text-gray-500 text-center">No tools added yet</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Model selection | |
| const modelSelect = document.getElementById('model-select'); | |
| const selectedModel = document.getElementById('selected-model'); | |
| modelSelect.addEventListener('change', function() { | |
| selectedModel.textContent = this.options[this.selectedIndex].text; | |
| }); | |
| // Drag and drop functionality | |
| const toolItems = document.querySelectorAll('.tool-item'); | |
| const dropZone = document.getElementById('agent-tools'); | |
| const previewTools = document.getElementById('preview-tools'); | |
| toolItems.forEach(tool => { | |
| tool.addEventListener('dragstart', function(e) { | |
| e.dataTransfer.setData('text/plain', this.dataset.type); | |
| this.classList.add('opacity-50'); | |
| }); | |
| tool.addEventListener('dragend', function() { | |
| this.classList.remove('opacity-50'); | |
| }); | |
| }); | |
| dropZone.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| this.classList.add('drag-over'); | |
| }); | |
| dropZone.addEventListener('dragleave', function() { | |
| this.classList.remove('drag-over'); | |
| }); | |
| dropZone.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| this.classList.remove('drag-over'); | |
| const toolType = e.dataTransfer.getData('text/plain'); | |
| addToolToAgent(toolType); | |
| }); | |
| function addToolToAgent(toolType) { | |
| const toolMap = { | |
| 'web-search': { | |
| name: 'Web Search', | |
| icon: 'search', | |
| color: 'blue' | |
| }, | |
| 'file-reader': { | |
| name: 'File Reader', | |
| icon: 'file-text', | |
| color: 'green' | |
| }, | |
| 'calculator': { | |
| name: 'Calculator', | |
| icon: 'divide-circle', | |
| color: 'purple' | |
| }, | |
| 'code-generator': { | |
| name: 'Code Generator', | |
| icon: 'code', | |
| color: 'orange' | |
| } | |
| }; | |
| const tool = toolMap[toolType]; | |
| if (!tool) return; | |
| // Remove placeholder if it exists | |
| if (dropZone.querySelector('.text-center')) { | |
| dropZone.innerHTML = ''; | |
| } | |
| // Add tool to agent | |
| const toolElement = document.createElement('div'); | |
| toolElement.className = `bg-${tool.color}-50 border border-${tool.color}-200 rounded-lg p-3 mb-2`; | |
| toolElement.innerHTML = ` | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-6 h-6 bg-${tool.color}-500 rounded flex items-center justify-center"> | |
| <i data-feather="${tool.icon}" class="text-white w-3 h-3"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-900">${tool.name}</span> | |
| <button class="ml-auto p-1 hover:bg-${tool.color}-100 rounded transition-colors"> | |
| <i data-feather="x" class="w-3 h-3 text-gray-500"></i> | |
| </button> | |
| `; | |
| dropZone.appendChild(toolElement); | |
| // Update preview | |
| updatePreview(toolType, tool); | |
| feather.replace(); | |
| } | |
| function updatePreview(toolType, tool) { | |
| if (previewTools.querySelector('.text-center')) { | |
| previewTools.innerHTML = ''; | |
| } | |
| const previewElement = document.createElement('div'); | |
| previewElement.className = 'flex items-center space-x-2'; | |
| previewElement.innerHTML = ` | |
| <div class="w-5 h-5 bg-${tool.color}-500 rounded flex items-center justify-center"> | |
| <i data-feather="${tool.icon}" class="text-white w-3 h-3"></i> | |
| </div> | |
| <span class="text-sm text-gray-700">${tool.name}</span> | |
| `; | |
| previewTools.appendChild(previewElement); | |
| } | |
| // Save agent functionality | |
| document.getElementById('save-agent').addEventListener('click', function() { | |
| const agentName = document.querySelector('input[type="text"]').value; | |
| const selectedModel = modelSelect.options[modelSelect.selectedIndex].text; | |
| // Show success message | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-2"></i>Saved!'; | |
| feather.replace(); | |
| setTimeout(() => { | |
| this.innerHTML = originalText; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |