File size: 7,619 Bytes
72e5643 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgentFlow Studio - Visual Langchain Builder</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<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/vanta@latest/dist/vanta.net.min.js"></script>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="text-center mb-12">
<h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
AgentFlow Studio
</h1>
<p class="text-xl text-gray-300 mb-8">Build Langchain Agents Visually - No Code Required</p>
<div class="flex gap-4 justify-center">
<button onclick="startNewProject()" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold transition-colors">
<i data-feather="plus" class="inline mr-2"></i>New Project
</button>
<button onclick="loadSample()" class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg font-semibold transition-colors">
<i data-feather="play" class="inline mr-2"></i>Load Sample
</button>
</div>
</section>
<!-- Canvas Area -->
<section class="bg-gray-800 rounded-xl p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-semibold">Agent Builder Canvas</h2>
<div class="flex gap-2">
<button onclick="exportAgent()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg flex items-center">
<i data-feather="download" class="mr-2"></i>Export Python
</button>
<button onclick="clearCanvas()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center">
<i data-feather="trash-2" class="mr-2"></i>Clear
</button>
</div>
</div>
<div id="canvas" class="min-h-96 border-2 border-dashed border-gray-600 rounded-lg p-4 relative">
<div class="absolute inset-0 flex items-center justify-center">
<p class="text-gray-500 text-lg">Drag components from the toolbox to start building</p>
</div>
</div>
</section>
<!-- Toolbox -->
<section class="bg-gray-800 rounded-xl p-6">
<h2 class="text-2xl font-semibold mb-6">Component Toolbox</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Agent Components -->
<div class="toolbox-item" data-type="react-agent" draggable="true">
<div class="bg-blue-600 p-4 rounded-lg cursor-move">
<i data-feather="cpu" class="w-8 h-8 mb-2"></i>
<h3 class="font-semibold">React Agent</h3>
<p class="text-sm text-blue-200">Core reasoning agent</p>
</div>
</div>
<div class="toolbox-item" data-type="tool" draggable="true">
<div class="bg-purple-600 p-4 rounded-lg cursor-move">
<i data-feather="tool" class="w-8 h-8 mb-2"></i>
<h3 class="font-semibold">Tool</h3>
<p class="text-sm text-purple-200">Custom function tool</p>
</div>
</div>
<div class="toolbox-item" data-type="prompt" draggable="true">
<div class="bg-green-600 p-4 rounded-lg cursor-move">
<i data-feather="message-square" class="w-8 h-8 mb-2"></i>
<h3 class="font-semibold">Prompt Template</h3>
<p class="text-sm text-green-200">Chat prompt setup</p>
</div>
</div>
<div class="toolbox-item" data-type="memory" draggable="true">
<div class="bg-yellow-600 p-4 rounded-lg cursor-move">
<i data-feather="database" class="w-8 h-8 mb-2"></i>
<h3 class="font-semibold">Memory</h3>
<p class="text-sm text-yellow-200">State management</p>
</div>
</div>
</div>
</section>
<!-- Quick Examples Section -->
<section class="bg-gray-800 rounded-xl p-6 mt-8">
<h2 class="text-2xl font-semibold mb-6">Quick Examples</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<button onclick="loadExample('research')" class="bg-gradient-to-r from-blue-600 to-purple-600 p-4 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all">
<i data-feather="search" class="w-6 h-6 mb-2"></i>
<h3 class="font-semibold">Research Assistant</h3>
<p class="text-sm opacity-80 mt-1">Web search & summarization</p>
</button>
<button onclick="loadExample('ecommerce')" class="bg-gradient-to-r from-green-600 to-blue-600 p-4 rounded-lg hover:from-green-700 hover:to-blue-700 transition-all">
<i data-feather="shopping-cart" class="w-6 h-6 mb-2"></i>
<h3 class="font-semibold">E-commerce Assistant</h3>
<p class="text-sm opacity-80 mt-1">Product search & price comparison</p>
</button>
<button onclick="loadExample('code')" class="bg-gradient-to-r from-purple-600 to-pink-600 p-4 rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all">
<i data-feather="code" class="w-6 h-6 mb-2"></i>
<h3 class="font-semibold">Code Assistant</h3>
<p class="text-sm opacity-80 mt-1">Code generation & debugging</p>
</button>
</div>
</section>
<!-- Properties Panel -->
<section id="properties-panel" class="bg-gray-800 rounded-xl p-6 mt-8 hidden">
<h2 class="text-2xl font-semibold mb-6">Component Properties</h2>
<div id="properties-content">
<!-- Dynamic content will be loaded here -->
</div>
</section>
</main>
<custom-footer></custom-footer>
<!-- Scripts -->
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "body",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827
});
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |