File size: 6,354 Bytes
47b04e4 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LM Studios - AI Agent Builder</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.builder-container {
height: calc(100vh - 180px);
}
.drag-area {
min-height: 200px;
border: 2px dashed #4b5563;
}
.node {
border-left: 3px solid #10b981;
background-color: #1e293b;
}
.code-block {
font-family: 'Courier New', monospace;
background-color: #1e293b;
border-left: 3px solid #10b981;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-6">
<!-- Header -->
<header class="flex justify-between items-center mb-6 border-b border-teal-500 pb-4">
<div class="flex items-center space-x-3">
<i data-feather="code" class="w-8 h-8 text-teal-400"></i>
<h1 class="text-2xl font-bold text-teal-400">AI Agent Builder</h1>
</div>
<div class="flex space-x-4">
<button class="text-teal-300 hover:text-white flex items-center">
<i data-feather="save" class="mr-2"></i> Save
</button>
<button class="text-teal-300 hover:text-white flex items-center">
<i data-feather="share-2" class="mr-2"></i> Export
</button>
</div>
</header>
<!-- Main Builder Area -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Components Panel -->
<div class="bg-gray-800/70 rounded-lg p-4">
<h2 class="text-lg font-bold mb-4 text-teal-300">Components</h2>
<div class="space-y-3">
<div class="node p-3 rounded cursor-move hover:bg-gray-700">
<div class="flex items-center">
<i data-feather="message-square" class="mr-2 text-teal-400"></i>
<span>Chat Interface</span>
</div>
</div>
<div class="node p-3 rounded cursor-move hover:bg-gray-700">
<div class="flex items-center">
<i data-feather="database" class="mr-2 text-teal-400"></i>
<span>Knowledge Base</span>
</div>
</div>
<div class="node p-3 rounded cursor-move hover:bg-gray-700">
<div class="flex items-center">
<i data-feather="cpu" class="mr-2 text-teal-400"></i>
<span>LLM Processor</span>
</div>
</div>
<div class="node p-3 rounded cursor-move hover:bg-gray-700">
<div class="flex items-center">
<i data-feather="code" class="mr-2 text-teal-400"></i>
<span>Code Executor</span>
</div>
</div>
</div>
</div>
<!-- Canvas Area -->
<div class="lg:col-span-2 bg-gray-800/70 rounded-lg p-4">
<h2 class="text-lg font-bold mb-4 text-teal-300">Agent Workflow</h2>
<div class="drag-area rounded-lg p-4">
<div class="flex justify-center items-center h-full text-gray-500">
<p>Drag components here to build your AI agent</p>
</div>
</div>
</div>
<!-- Properties Panel -->
<div class="bg-gray-800/70 rounded-lg p-4">
<h2 class="text-lg font-bold mb-4 text-teal-300">Properties</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Agent Name</label>
<input type="text" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2">
</div>
<div>
<label class="block text-sm font-medium mb-1">Base Model</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2">
<option>Llama 3</option>
<option>GPT-4</option>
<option>Claude 2</option>
<option>Mistral</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Temperature</label>
<input type="range" min="0" max="1" step="0.1" class="w-full">
</div>
<button class="w-full bg-teal-600 hover:bg-teal-500 py-2 rounded-lg font-medium">
<i data-feather="play" class="w-4 h-4 mr-2 inline"></i> Test Agent
</button>
</div>
</div>
</div>
<!-- Test Console -->
<div class="bg-gray-800/70 rounded-lg p-4 mt-6">
<h2 class="text-lg font-bold mb-4 text-teal-300">Test Console</h2>
<div class="flex">
<input type="text" placeholder="Test your agent..."
class="flex-grow bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-500">
<button class="bg-teal-600 hover:bg-teal-500 px-6 py-3 rounded-r-lg font-medium">
<i data-feather="send" class="w-5 h-5"></i>
</button>
</div>
<div class="code-block p-4 rounded-lg mt-4 text-sm">
<pre class="text-green-400">
# Agent response will appear here
</pre>
</div>
</div>
</div>
<script>
// Initialize feather icons
feather.replace();
</script>
</body>
</html> |