Hugging Face's logo

Spaces:
adowu
/
awwagent
Running

App Files Community
awwagent / index.html
adowu's picture
adowu
Add 1 files
276704d verified
raw
history blame contribute delete
52.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AutomaForge - AI Agent Creation Platform</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>
 .sidebar {
 transition: all 0.3s ease;
 }
 .block-item {
 transition: all 0.2s ease;
 user-select: none;
 }
 .block-item:hover {
 transform: translateY(-2px);
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 .workspace {
 background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
 background-size: 20px 20px;
 position: relative;
 overflow: auto;
 }
 .connection-path {
 stroke: #6366f1;
 stroke-width: 3;
 fill: none;
 marker-end: url(#arrowhead);
 }
 .agent-block {
 transition: all 0.3s ease;
 position: absolute;
 user-select: none;
 }
 .agent-block:hover {
 transform: scale(1.02);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 .chat-message {
 max-width: 80%;
 }
 .typing-indicator::after {
 content: '...';
 animation: typing 1.5s infinite;
 display: inline-block;
 width: 0;
 }
 @keyframes typing {
 0% { content: '.'; }
 33% { content: '..'; }
 66% { content: '...'; }
 }
 .connection-dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 position: absolute;
 cursor: pointer;
 z-index: 20;
 }
 .connection-dot.input {
 top: -6px;
 left: 50%;
 transform: translateX(-50%);
 }
 .connection-dot.output {
 bottom: -6px;
 left: 50%;
 transform: translateX(-50%);
 }
 .dragging {
 opacity: 0.8;
 z-index: 100;
 }
 .connection-line {
 position: absolute;
 pointer-events: none;
 z-index: 5;
 }
 </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 flex flex-col">
 <div class="p-4 border-b border-indigo-800 flex items-center">
 <div class="bg-white rounded-lg p-2 mr-3">
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-indigo-600">
 <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" />
 </svg>
 </div>
 <h1 class="text-xl font-bold">AutomaForge</h1>
 </div>
<div class="p-4 border-b border-indigo-800">
 <button id="newAgentBtn" class="w-full bg-indigo-700 hover:bg-indigo-600 text-white py-2 px-4 rounded-lg flex items-center justify-center transition">
 <i class="fas fa-plus mr-2"></i> New Agent
 </button>
 </div>
<div class="flex-1 overflow-y-auto">
 <div class="p-4">
 <h3 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Recent Agents</h3>
 <ul>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div>
 <span>Customer Support Bot</span>
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <div class="w-3 h-3 rounded-full bg-yellow-400 mr-3"></div>
 <span>Data Analyzer</span>
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <div class="w-3 h-3 rounded-full bg-red-400 mr-3"></div>
 <span>Image Processor</span>
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <div class="w-3 h-3 rounded-full bg-green-400 mr-3"></div>
 <span>Document Summarizer</span>
 </a>
 </li>
 </ul>
 </div>
<div class="p-4 border-t border-indigo-800">
 <h3 class="text-sm uppercase font-semibold text-indigo-300 mb-2">Templates</h3>
 <ul>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <i class="fas fa-comments mr-3 text-indigo-300"></i>
 <span>Chatbot</span>
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <i class="fas fa-chart-line mr-3 text-indigo-300"></i>
 <span>Data Analysis</span>
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-800 transition">
 <i class="fas fa-image mr-3 text-indigo-300"></i>
 <span>Image Processing</span>
 </a>
 </li>
 </ul>
 </div>
 </div>
<div class="p-4 border-t border-indigo-800">
 <div class="flex items-center">
 <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
 <i class="fas fa-user text-sm"></i>
 </div>
 <div>
 <div class="font-medium">John Doe</div>
 <div class="text-xs text-indigo-300">Admin</div>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 flex flex-col overflow-hidden">
 <!-- Top Navigation -->
 <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
 <div class="flex items-center">
 <button id="toggleSidebar" class="mr-4 text-gray-500 hover:text-gray-700">
 <i class="fas fa-bars"></i>
 </button>
 <h2 class="text-lg font-semibold">Agent Architect</h2>
 </div>
<div class="flex items-center space-x-4">
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-question-circle"></i>
 </button>
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-bell"></i>
 </button>
 <button id="runAgentBtn" class="bg-indigo-600 text-white py-1 px-3 rounded-lg text-sm hover:bg-indigo-700 transition">
 <i class="fas fa-play mr-1"></i> Run Agent
 </button>
 </div>
 </div>
<!-- Main Workspace -->
 <div class="flex-1 flex overflow-hidden">
 <!-- Blocks Library -->
 <div class="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto">
 <div class="mb-6">
 <h3 class="font-medium text-gray-700 mb-3">Search Blocks</h3>
 <div class="relative">
 <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">
 <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 </div>
 </div>
<div class="mb-6">
 <h3 class="font-medium text-gray-700 mb-3">Categories</h3>
 <div class="space-y-2">
 <button class="w-full text-left px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 flex items-center justify-between">
 <span>All Blocks</span>
 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">42</span>
 </button>
 <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
 <span>NLP</span>
 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">12</span>
 </button>
 <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
 <span>Image Processing</span>
 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">8</span>
 </button>
 <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
 <span>API Integration</span>
 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">6</span>
 </button>
 <button class="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 flex items-center justify-between">
 <span>Data Processing</span>
 <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">10</span>
 </button>
 </div>
 </div>
<div>
 <h3 class="font-medium text-gray-700 mb-3">Available Blocks</h3>
 <div class="space-y-3">
 <div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="input" data-color="blue">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-comment text-blue-500"></i>
 </div>
 <div class="font-medium">Text Input</div>
 </div>
 <p class="text-xs text-gray-500">Accepts user text input for processing</p>
 </div>
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="llm" data-color="purple">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
 <i class="fas fa-brain text-purple-500"></i>
 </div>
 <div class="font-medium">LLM Processor</div>
 </div>
 <p class="text-xs text-gray-500">Processes text with a large language model</p>
 </div>
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="knowledge" data-color="green">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
 <i class="fas fa-database text-green-500"></i>
 </div>
 <div class="font-medium">Knowledge Base</div>
 </div>
 <p class="text-xs text-gray-500">Connects to your knowledge repository</p>
 </div>
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="api" data-color="yellow">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
 <i class="fas fa-code text-yellow-500"></i>
 </div>
 <div class="font-medium">API Connector</div>
 </div>
 <p class="text-xs text-gray-500">Connects to external APIs</p>
 </div>
<div class="block-item bg-white border border-gray-200 rounded-lg p-3 cursor-move hover:shadow-md draggable-block" draggable="true" data-type="image" data-color="red">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2">
 <i class="fas fa-image text-red-500"></i>
 </div>
 <div class="font-medium">Image Analyzer</div>
 </div>
 <p class="text-xs text-gray-500">Analyzes and processes images</p>
 </div>
 </div>
 </div>
 </div>
<!-- Agent Workspace -->
 <div id="workspace" class="flex-1 bg-gray-50 workspace overflow-auto relative">
 <svg id="connections-svg" class="absolute top-0 left-0 w-full h-full pointer-events-none" style="z-index: 0;">
 <defs>
 <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
 <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" />
 </marker>
 </defs>
 </svg>
<div class="p-6">
 <div class="max-w-4xl mx-auto">
 <div id="agent-description" class="bg-white rounded-xl shadow-sm p-6 mb-6">
 <h3 class="text-lg font-semibold mb-4">Agent Architect</h3>
 <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>
<div class="relative">
 <textarea id="agent-description-input" 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>
 <button id="generate-btn" class="absolute bottom-4 right-4 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition">
 <i class="fas fa-magic"></i> Generate
 </button>
 </div>
 </div>
<div class="flex justify-center mb-6">
 <div class="flex items-center space-x-4">
 <button id="add-layer-btn" class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
 <i class="fas fa-layer-group mr-2 text-indigo-500"></i>
 <span>Add Layer</span>
 </button>
 <button id="auto-connect-btn" class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
 <i class="fas fa-robot mr-2 text-indigo-500"></i>
 <span>Auto-Connect</span>
 </button>
 <button id="optimize-btn" class="bg-white border border-gray-300 rounded-lg px-4 py-2 flex items-center hover:bg-gray-50">
 <i class="fas fa-bolt mr-2 text-indigo-500"></i>
 <span>Optimize</span>
 </button>
 </div>
 </div>
<!-- Predefined blocks for demo -->
 <div id="blocks-container">
 <div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-blue-200" style="transform: translate(200px, 150px);" data-id="block-1" data-type="input">
 <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">
 <i class="fas fa-play"></i>
 </div>
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
 <i class="fas fa-comment text-blue-500"></i>
 </div>
 <div class="font-medium">User Input</div>
 </div>
 <p class="text-xs text-gray-500 mb-3">Accepts user questions</p>
 <div class="text-xs text-gray-400">Output: <span class="text-gray-600">User query text</span></div>
 <div class="connection-dot output bg-blue-500" data-type="output" data-block-id="block-1"></div>
 </div>
<div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-purple-200" style="transform: translate(500px, 250px);" data-id="block-2" data-type="llm">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
 <i class="fas fa-brain text-purple-500"></i>
 </div>
 <div class="font-medium">LLM Processor</div>
 </div>
 <p class="text-xs text-gray-500 mb-3">Processes user query with GPT-4</p>
 <div class="text-xs text-gray-400 mb-1">Input: <span class="text-gray-600">User query text</span></div>
 <div class="text-xs text-gray-400">Output: <span class="text-gray-600">Processed response</span></div>
 <div class="connection-dot input bg-purple-500" data-type="input" data-block-id="block-2"></div>
 <div class="connection-dot output bg-purple-500" data-type="output" data-block-id="block-2"></div>
 </div>
<div class="agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-green-200" style="transform: translate(800px, 350px);" data-id="block-3" data-type="output">
 <div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
 <i class="fas fa-comments text-green-500"></i>
 </div>
 <div class="font-medium">Response Output</div>
 </div>
 <p class="text-xs text-gray-500 mb-3">Returns response to user</p>
 <div class="text-xs text-gray-400">Input: <span class="text-gray-600">Processed response</span></div>
 <div class="connection-dot input bg-green-500" data-type="input" data-block-id="block-3"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Right Panel - Configuration and Testing -->
 <div class="w-80 bg-white border-l border-gray-200 flex flex-col">
 <div class="border-b border-gray-200 p-4">
 <div class="flex space-x-2">
 <button id="config-tab" class="flex-1 py-2 px-3 rounded-lg bg-indigo-600 text-white text-sm font-medium">
 Configuration
 </button>
 <button id="test-tab" class="flex-1 py-2 px-3 rounded-lg bg-white border border-gray-200 text-sm font-medium hover:bg-gray-50">
 Testing
 </button>
 </div>
 </div>
<div id="config-panel" class="flex-1 overflow-y-auto p-4">
 <div class="mb-6">
 <h3 class="font-medium text-gray-700 mb-3">Selected Block</h3>
 <div id="block-config" class="bg-gray-50 rounded-lg p-4 border border-gray-200">
 <div class="flex items-center mb-3">
 <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
 <i class="fas fa-brain text-purple-500"></i>
 </div>
 <div>
 <div class="font-medium">LLM Processor</div>
 <div class="text-xs text-gray-500">Processes text with a large language model</div>
 </div>
 </div>
<div class="space-y-4">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
 <select id="llm-model" 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">
 <option>GPT-4</option>
 <option>GPT-3.5</option>
 <option>Claude-2</option>
 <option>Llama 2</option>
 </select>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
 <input id="temperature" 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 mt-1">
 <span>Precise</span>
 <span>Creative</span>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
 <input id="max-tokens" 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">
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label>
 <textarea id="system-prompt" 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>
 </div>
 </div>
 </div>
 </div>
<div>
 <h3 class="font-medium text-gray-700 mb-3">Optimization Suggestions</h3>
 <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
 <div class="flex items-start mb-3">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-lightbulb text-yellow-500"></i>
 </div>
 <div class="ml-3">
 <h4 class="text-sm font-medium text-yellow-800">Add Knowledge Base</h4>
 <p class="text-xs text-yellow-700">Consider connecting a knowledge base to improve response accuracy.</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-lightbulb text-yellow-500"></i>
 </div>
 <div class="ml-3">
 <h4 class="text-sm font-medium text-yellow-800">Add Sentiment Analysis</h4>
 <p class="text-xs text-yellow-700">Adding sentiment analysis could help route frustrated customers to human support.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Testing Chat Panel -->
 <div id="test-panel" class="border-t border-gray-200 p-4 bg-gray-50 hidden">
 <h3 class="font-medium text-gray-700 mb-3">Test Agent</h3>
<div id="chat-container" class="bg-white rounded-lg border border-gray-200 mb-3" style="height: 200px; overflow-y: auto;">
 <div class="p-3 space-y-3">
 <div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto">
 <div class="text-xs text-gray-500 mb-1 text-right">You</div>
 <p class="text-sm">How can I track my order?</p>
 </div>
<div class="chat-message bg-gray-100 rounded-lg p-3">
 <div class="text-xs text-gray-500 mb-1">Agent</div>
 <p class="text-sm">You can track your order by visiting the order status page...</p>
 </div>
<div class="chat-message bg-blue-50 rounded-lg p-3 ml-auto">
 <div class="text-xs text-gray-500 mb-1 text-right">You</div>
 <p class="text-sm">What's your return policy?</p>
 </div>
<div id="typing-indicator" class="chat-message bg-gray-100 rounded-lg p-3">
 <div class="text-xs text-gray-500 mb-1">Agent</div>
 <p class="text-sm typing-indicator"></p>
 </div>
 </div>
 </div>
<div class="relative">
 <input id="chat-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">
 <button id="send-chat-btn" class="absolute right-2 top-2 text-indigo-600 hover:text-indigo-800">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 // DOM elements
 const workspace = document.getElementById('workspace');
 const blocksContainer = document.getElementById('blocks-container');
 const draggableBlocks = document.querySelectorAll('.draggable-block');
 const agentBlocks = document.querySelectorAll('.agent-block');
 const connectionDots = document.querySelectorAll('.connection-dot');
 const connectionsSvg = document.getElementById('connections-svg');
 const toggleSidebar = document.getElementById('toggleSidebar');
 const sidebar = document.querySelector('.sidebar');
 const configTab = document.getElementById('config-tab');
 const testTab = document.getElementById('test-tab');
 const configPanel = document.getElementById('config-panel');
 const testPanel = document.getElementById('test-panel');
 const generateBtn = document.getElementById('generate-btn');
 const agentDescriptionInput = document.getElementById('agent-description-input');
 const runAgentBtn = document.getElementById('runAgentBtn');
 const chatInput = document.getElementById('chat-input');
 const sendChatBtn = document.getElementById('send-chat-btn');
 const chatContainer = document.getElementById('chat-container');
 const typingIndicator = document.getElementById('typing-indicator');
// State variables
 let isDragging = false;
 let currentBlock = null;
 let startX, startY;
 let initialX, initialY;
 let connections = [];
 let isConnecting = false;
 let startDot = null;
// Initialize the app
 init();
function init() {
 setupEventListeners();
 drawConnections();
 simulateTyping();
 }
function setupEventListeners() {
 // Toggle sidebar
 toggleSidebar.addEventListener('click', () => {
 sidebar.classList.toggle('hidden');
 });
// Tab switching
 configTab.addEventListener('click', () => {
 configTab.classList.add('bg-indigo-600', 'text-white');
 configTab.classList.remove('bg-white', 'border', 'border-gray-200');
 testTab.classList.remove('bg-indigo-600', 'text-white');
 testTab.classList.add('bg-white', 'border', 'border-gray-200');
 configPanel.classList.remove('hidden');
 testPanel.classList.add('hidden');
 });
testTab.addEventListener('click', () => {
 testTab.classList.add('bg-indigo-600', 'text-white');
 testTab.classList.remove('bg-white', 'border', 'border-gray-200');
 configTab.classList.remove('bg-indigo-600', 'text-white');
 configTab.classList.add('bg-white', 'border', 'border-gray-200');
 testPanel.classList.remove('hidden');
 configPanel.classList.add('hidden');
 });
// Generate agent from description
 generateBtn.addEventListener('click', generateAgentFromDescription);
// Run agent
 runAgentBtn.addEventListener('click', runAgent);
// Send chat message
 sendChatBtn.addEventListener('click', sendChatMessage);
 chatInput.addEventListener('keypress', (e) => {
 if (e.key === 'Enter') {
 sendChatMessage();
 }
 });
// Make library blocks draggable
 draggableBlocks.forEach(block => {
 block.addEventListener('dragstart', handleDragStart);
 });
// Make workspace droppable
 workspace.addEventListener('dragover', handleDragOver);
 workspace.addEventListener('drop', handleDrop);
// Make agent blocks draggable
 agentBlocks.forEach(block => {
 block.addEventListener('mousedown', startDrag);
 });
// Make connection dots interactive
 connectionDots.forEach(dot => {
 dot.addEventListener('mousedown', startConnection);
 dot.addEventListener('mouseup', endConnection);
 });
// Handle window resize
 window.addEventListener('resize', drawConnections);
 }
function handleDragStart(e) {
 e.dataTransfer.setData('text/plain', e.target.outerHTML);
 e.dataTransfer.setData('block-type', e.target.dataset.type);
 e.dataTransfer.setData('block-color', e.target.dataset.color);
 e.dataTransfer.effectAllowed = 'copy';
 }
function handleDragOver(e) {
 e.preventDefault();
 e.dataTransfer.dropEffect = 'copy';
 }
function handleDrop(e) {
 e.preventDefault();
 const html = e.dataTransfer.getData('text/plain');
 const type = e.dataTransfer.getData('block-type');
 const color = e.dataTransfer.getData('block-color');
const rect = workspace.getBoundingClientRect();
 const x = e.clientX - rect.left - 100;
 const y = e.clientY - rect.top - 50;
const newBlock = createBlock(html, type, color, x, y);
 blocksContainer.appendChild(newBlock);
// Add event listeners to the new block
 newBlock.addEventListener('mousedown', startDrag);
// Add connection dots if needed
 addConnectionDots(newBlock);
 }
function createBlock(html, type, color, x, y) {
 const block = document.createElement('div');
 block.className = `agent-block bg-white rounded-xl shadow-sm p-4 border-2 border-${color}-200 absolute cursor-move`;
 block.style.left = `${x}px`;
 block.style.top = `${y}px`;
 block.dataset.type = type;
 block.dataset.id = `block-${Date.now()}`;
 block.innerHTML = html;
// Add connection dots based on block type
 if (type !== 'output') {
 const outputDot = document.createElement('div');
 outputDot.className = `connection-dot output bg-${color}-500`;
 outputDot.dataset.type = 'output';
 outputDot.dataset.blockId = block.dataset.id;
 block.appendChild(outputDot);
 }
if (type !== 'input') {
 const inputDot = document.createElement('div');
 inputDot.className = `connection-dot input bg-${color}-500`;
 inputDot.dataset.type = 'input';
 inputDot.dataset.blockId = block.dataset.id;
 block.appendChild(inputDot);
 }
return block;
 }
function startDrag(e) {
 if (e.target.classList.contains('connection-dot')) return;
isDragging = true;
 currentBlock = e.currentTarget;
 startX = e.clientX;
 startY = e.clientY;
 initialX = currentBlock.offsetLeft;
 initialY = currentBlock.offsetTop;
currentBlock.classList.add('dragging');
 document.addEventListener('mousemove', drag);
 document.addEventListener('mouseup', stopDrag);
 }
function drag(e) {
 if (!isDragging) return;
const dx = e.clientX - startX;
 const dy = e.clientY - startY;
currentBlock.style.left = `${initialX + dx}px`;
 currentBlock.style.top = `${initialY + dy}px`;
drawConnections();
 }
function stopDrag() {
 isDragging = false;
 if (currentBlock) {
 currentBlock.classList.remove('dragging');
 currentBlock = null;
 }
document.removeEventListener('mousemove', drag);
 document.removeEventListener('mouseup', stopDrag);
 }
function addConnectionDots(block) {
 const dots = block.querySelectorAll('.connection-dot');
 dots.forEach(dot => {
 dot.addEventListener('mousedown', startConnection);
 dot.addEventListener('mouseup', endConnection);
 });
 }
function startConnection(e) {
 e.stopPropagation();
 isConnecting = true;
 startDot = e.target;
// Create a temporary connection line
 const tempLine = document.createElement('div');
 tempLine.className = 'connection-line';
 tempLine.id = 'temp-connection';
 workspace.appendChild(tempLine);
document.addEventListener('mousemove', drawTempConnection);
 document.addEventListener('mouseup', stopConnection);
 }
function drawTempConnection(e) {
 if (!isConnecting) return;
const startRect = startDot.getBoundingClientRect();
 const workspaceRect = workspace.getBoundingClientRect();
const startX = startRect.left - workspaceRect.left + startRect.width / 2;
 const startY = startRect.top - workspaceRect.top + startRect.height / 2;
 const endX = e.clientX - workspaceRect.left;
 const endY = e.clientY - workspaceRect.top;
const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
 const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;
const tempLine = document.getElementById('temp-connection');
 tempLine.style.width = `${length}px`;
 tempLine.style.height = '2px';
 tempLine.style.backgroundColor = '#6366f1';
 tempLine.style.left = `${startX}px`;
 tempLine.style.top = `${startY}px`;
 tempLine.style.transform = `rotate(${angle}deg)`;
 tempLine.style.transformOrigin = '0 0';
 }
function endConnection(e) {
 if (!isConnecting) return;
const endDot = e.target;
// Check if we're connecting to a valid dot
 if (endDot.classList.contains('connection-dot') &&
endDot !== startDot &&
 ((startDot.dataset.type === 'output' && endDot.dataset.type === 'input') ||
(startDot.dataset.type === 'input' && endDot.dataset.type === 'output'))) {
// Create a new connection
 const connection = {
 from: startDot.dataset.blockId,
 fromType: startDot.dataset.type,
 to: endDot.dataset.blockId,
 toType: endDot.dataset.type
 };
connections.push(connection);
 drawConnections();
 }
// Clean up
 const tempLine = document.getElementById('temp-connection');
 if (tempLine) {
 tempLine.remove();
 }
isConnecting = false;
 startDot = null;
 document.removeEventListener('mousemove', drawTempConnection);
 document.removeEventListener('mouseup', stopConnection);
 }
function stopConnection() {
 isConnecting = false;
 const tempLine = document.getElementById('temp-connection');
 if (tempLine) {
 tempLine.remove();
 }
 document.removeEventListener('mousemove', drawTempConnection);
 document.removeEventListener('mouseup', stopConnection);
 }
function drawConnections() {
 // Clear existing connections
 while (connectionsSvg.firstChild) {
 connectionsSvg.removeChild(connectionsSvg.firstChild);
 }
// Redraw all connections
 connections.forEach(conn => {
 const fromBlock = document.querySelector(`[data-id="${conn.from}"]`);
 const toBlock = document.querySelector(`[data-id="${conn.to}"]`);
if (fromBlock && toBlock) {
 const fromRect = fromBlock.getBoundingClientRect();
 const toRect = toBlock.getBoundingClientRect();
 const workspaceRect = workspace.getBoundingClientRect();
const fromX = fromRect.left - workspaceRect.left + fromRect.width / 2;
 const fromY = fromRect.bottom - workspaceRect.top;
 const toX = toRect.left - workspaceRect.left + toRect.width / 2;
 const toY = toRect.top - workspaceRect.top;
// Create a curved path
 const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 path.setAttribute('class', 'connection-path');
 path.setAttribute('d', `M${fromX},${fromY} C${fromX},${fromY + 100} ${toX},${toY - 100} ${toX},${toY}`);
 connectionsSvg.appendChild(path);
 }
 });
 }
function generateAgentFromDescription() {
 const description = agentDescriptionInput.value.trim();
 if (!description) return;
// In a real app, this would call an API to generate the agent
 // For demo, we'll just show a success message
 alert('Agent workflow generated based on your description!');
// Simulate adding some blocks
 if (blocksContainer.children.length <= 3) {
 const newBlock = createBlock(
 `<div class="flex items-center mb-2">
 <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
 <i class="fas fa-code text-yellow-500"></i>
 </div>
 <div class="font-medium">API Connector</div>
 </div>
 <p class="text-xs text-gray-500 mb-3">Connects to external APIs</p>
 <div class="text-xs text-gray-400">Input: <span class="text-gray-600">User query</span></div>
 <div class="text-xs text-gray-400">Output: <span class="text-gray-600">API response</span></div>`,
 'api',
 'yellow',
 600,
 400
 );
blocksContainer.appendChild(newBlock);
 addConnectionDots(newBlock);
// Add a connection to the LLM block
 connections.push({
 from: 'block-2',
 fromType: 'output',
 to: newBlock.dataset.id,
 toType: 'input'
 });
drawConnections();
 }
 }
function runAgent() {
 alert('Agent is running! Check the testing panel to interact with it.');
 testTab.click();
 }
function sendChatMessage() {
 const message = chatInput.value.trim();
 if (!message) return;
// Add user message
 const userMessage = document.createElement('div');
 userMessage.className = 'chat-message bg-blue-50 rounded-lg p-3 ml-auto';
 userMessage.innerHTML = `
 <div class="text-xs text-gray-500 mb-1 text-right">You</div>
 <p class="text-sm">${message}</p>
 `;
 chatContainer.appendChild(userMessage);
// Clear input
 chatInput.value = '';
// Show typing indicator
 typingIndicator.style.display = 'block';
 typingIndicator.querySelector('p').className = 'text-sm typing-indicator';
// Simulate agent response after a delay
 setTimeout(() => {
 typingIndicator.style.display = 'none';
const responses = [
 "I can help with that. Our standard return policy allows returns within 30 days of purchase.",
 "For order tracking, please visit our order status page and enter your order number.",
 "Our customer support team is available 24/7 to assist you with any issues.",
 "You can find more information about our products in the documentation section."
 ];
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
const agentMessage = document.createElement('div');
 agentMessage.className = 'chat-message bg-gray-100 rounded-lg p-3';
 agentMessage.innerHTML = `
 <div class="text-xs text-gray-500 mb-1">Agent</div>
 <p class="text-sm">${randomResponse}</p>
 `;
 chatContainer.appendChild(agentMessage);
// Scroll to bottom
 chatContainer.scrollTop = chatContainer.scrollHeight;
 }, 1500);
 }
function simulateTyping() {
 setTimeout(() => {
 typingIndicator.style.display = 'none';
const agentMessage = document.createElement('div');
 agentMessage.className = 'chat-message bg-gray-100 rounded-lg p-3';
 agentMessage.innerHTML = `
 <div class="text-xs text-gray-500 mb-1">Agent</div>
 <p class="text-sm">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?</p>
 `;
 chatContainer.appendChild(agentMessage);
 }, 2000);
 }
 });
 </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=adowu/awwagent" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>