|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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() { |
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
let isDragging = false; |
|
|
let currentBlock = null; |
|
|
let startX, startY; |
|
|
let initialX, initialY; |
|
|
let connections = []; |
|
|
let isConnecting = false; |
|
|
let startDot = null; |
|
|
|
|
|
|
|
|
init(); |
|
|
|
|
|
function init() { |
|
|
setupEventListeners(); |
|
|
drawConnections(); |
|
|
simulateTyping(); |
|
|
} |
|
|
|
|
|
function setupEventListeners() { |
|
|
|
|
|
toggleSidebar.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', generateAgentFromDescription); |
|
|
|
|
|
|
|
|
runAgentBtn.addEventListener('click', runAgent); |
|
|
|
|
|
|
|
|
sendChatBtn.addEventListener('click', sendChatMessage); |
|
|
chatInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter') { |
|
|
sendChatMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
draggableBlocks.forEach(block => { |
|
|
block.addEventListener('dragstart', handleDragStart); |
|
|
}); |
|
|
|
|
|
|
|
|
workspace.addEventListener('dragover', handleDragOver); |
|
|
workspace.addEventListener('drop', handleDrop); |
|
|
|
|
|
|
|
|
agentBlocks.forEach(block => { |
|
|
block.addEventListener('mousedown', startDrag); |
|
|
}); |
|
|
|
|
|
|
|
|
connectionDots.forEach(dot => { |
|
|
dot.addEventListener('mousedown', startConnection); |
|
|
dot.addEventListener('mouseup', endConnection); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
newBlock.addEventListener('mousedown', startDrag); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
if (endDot.classList.contains('connection-dot') && |
|
|
endDot !== startDot && |
|
|
((startDot.dataset.type === 'output' && endDot.dataset.type === 'input') || |
|
|
(startDot.dataset.type === 'input' && endDot.dataset.type === 'output'))) { |
|
|
|
|
|
|
|
|
const connection = { |
|
|
from: startDot.dataset.blockId, |
|
|
fromType: startDot.dataset.type, |
|
|
to: endDot.dataset.blockId, |
|
|
toType: endDot.dataset.type |
|
|
}; |
|
|
|
|
|
connections.push(connection); |
|
|
drawConnections(); |
|
|
} |
|
|
|
|
|
|
|
|
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() { |
|
|
|
|
|
while (connectionsSvg.firstChild) { |
|
|
connectionsSvg.removeChild(connectionsSvg.firstChild); |
|
|
} |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
|
|
|
alert('Agent workflow generated based on your description!'); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
typingIndicator.style.display = 'block'; |
|
|
typingIndicator.querySelector('p').className = 'text-sm typing-indicator'; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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> |
