|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Agent Builder - KODE 1</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://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-fit.js"></script> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/xterm.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
secondary: { |
|
|
50: '#f8fafc', |
|
|
100: '#f1f5f9', |
|
|
200: '#e2e8f0', |
|
|
300: '#cbd5e1', |
|
|
400: '#94a3b8', |
|
|
500: '#64748b', |
|
|
600: '#475569', |
|
|
700: '#334155', |
|
|
800: '#1e293b', |
|
|
900: '#0f172a', |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
'pulse-border': 'pulse-border 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
'pulse-border': { |
|
|
'0%, 100%': { borderColor: 'rgb(59, 130, 246)' }, |
|
|
'50%': { borderColor: 'rgb(147, 197, 253)' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.terminal-container { |
|
|
height: 300px; |
|
|
background: #1e1e1e; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.code-editor { |
|
|
height: 400px; |
|
|
font-size: 14px; |
|
|
} |
|
|
.gradient-border { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); |
|
|
padding: 2px; |
|
|
border-radius: 12px; |
|
|
} |
|
|
.typing-indicator::after { |
|
|
content: '|'; |
|
|
animation: blink 1s infinite; |
|
|
} |
|
|
@keyframes blink { |
|
|
0%, 50% { opacity: 1; } |
|
|
51%, 100% { opacity: 0; } |
|
|
} |
|
|
.agent-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.agent-card:hover { |
|
|
transform: translateY(-4px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-secondary-50 dark:bg-secondary-900 text-secondary-900 dark:text-secondary-100"> |
|
|
|
|
|
<nav class="bg-white dark:bg-secondary-800 border-b border-secondary-200 dark:border-secondary-700 fixed w-full top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="cpu" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<span class="ml-3 text-xl font-bold">KODE 1</span> |
|
|
</div> |
|
|
<div class="hidden md:ml-10 md:flex md:space-x-8"> |
|
|
<a href="index.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Dashboard</a> |
|
|
<a href="agents.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Agents</a> |
|
|
<a href="tasks.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Tasks</a> |
|
|
<a href="workflows.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Workflows</a> |
|
|
<a href="analytics.html" class="text-secondary-700 dark:text-secondary-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium">Analytics</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button onclick="toggleTheme()" class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700"> |
|
|
<i data-feather="moon" class="w-5 h-5 dark:hidden"></i> |
|
|
<i data-feather="sun" class="w-5 h-5 hidden dark:block"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700"> |
|
|
<i data-feather="bell" class="w-5 h-5"></i> |
|
|
<span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="http://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full"> |
|
|
<span class="text-sm font-medium">John Doe</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="pt-16"> |
|
|
|
|
|
<section class="bg-gradient-to-br from-primary-600 to-purple-700 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-4xl font-bold mb-2">Agent Builder Studio</h1> |
|
|
<p class="text-primary-100">Create intelligent AI agents with Qwen Code CLI & Browser Automation</p> |
|
|
</div> |
|
|
<button onclick="startNewAgent()" class="bg-white text-primary-600 px-6 py-3 rounded-lg font-semibold hover:bg-primary-50 transition-colors flex items-center space-x-2"> |
|
|
<i data-feather="zap" class="w-5 h-5"></i> |
|
|
<span>Create Agent</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-1 space-y-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="settings" class="w-5 h-5 mr-2"></i> |
|
|
Agent Configuration |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Agent Name</label> |
|
|
<input type="text" id="agentName" placeholder="My AI Agent" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Model</label> |
|
|
<select id="modelSelect" class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
<option value="qwen-coder">Qwen Code CLI</option> |
|
|
<option value="gpt-4">GPT-4</option> |
|
|
<option value="claude">Claude 3</option> |
|
|
<option value="deepseek">Deepseek Coder</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Temperature</label> |
|
|
<input type="range" id="temperature" min="0" max="1" step="0.1" value="0.3" class="w-full"> |
|
|
<div class="flex justify-between text-xs text-secondary-500"> |
|
|
<span>Precise</span> |
|
|
<span id="tempValue">0.3</span> |
|
|
<span>Creative</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Capabilities</label> |
|
|
<div class="space-y-2"> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="browserAutomation" checked class="rounded text-primary-600 focus:ring-primary-500"> |
|
|
<span class="text-sm">Browser Automation</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="codeExecution" checked class="rounded text-primary-600 focus:ring-primary-500"> |
|
|
<span class="text-sm">Code Execution</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="fileSystem" checked class="rounded text-primary-600 focus:ring-primary-500"> |
|
|
<span class="text-sm">File System Access</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="apiAccess" class="rounded text-primary-600 focus:ring-primary-500"> |
|
|
<span class="text-sm">API Integration</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="globe" class="w-5 h-5 mr-2"></i> |
|
|
Browser Session |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Browser Type</label> |
|
|
<select class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
<option>Chrome (Steel)</option> |
|
|
<option>Firefox</option> |
|
|
<option>Safari</option> |
|
|
<option>Edge</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Session ID</label> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="text" id="sessionId" placeholder="auto-generated" class="flex-1 px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
<button onclick="generateSessionId()" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"> |
|
|
<i data-feather="refresh-cw" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">CDP URL</label> |
|
|
<input type="text" id="cdpUrl" placeholder="wss://connect.steel.dev/..." class="w-full px-4 py-2 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-xl font-bold mb-4 flex items-center"> |
|
|
<i data-feather="target" class="w-5 h-5 mr-2"></i> |
|
|
Agent Task |
|
|
</h2> |
|
|
<textarea id="taskInput" rows="3" placeholder="Describe what your agent should do... Example: Go to docs.steel.dev, open the changelog, and tell me what's new." class="w-full px-4 py-3 border border-secondary-300 dark:border-secondary-600 rounded-lg bg-white dark:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="insertTemplate('web')" class="px-3 py-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm hover:bg-secondary-200 dark:hover:bg-secondary-600"> |
|
|
Web Task |
|
|
</button> |
|
|
<button onclick="insertTemplate('code')" class="px-3 py-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm hover:bg-secondary-200 dark:hover:bg-secondary-600"> |
|
|
Code Task |
|
|
</button> |
|
|
<button onclick="insertTemplate('data')" class="px-3 py-1 bg-secondary-100 dark:bg-secondary-700 text-secondary-700 dark:text-secondary-300 rounded-lg text-sm hover:bg-secondary-200 dark:hover:bg-secondary-600"> |
|
|
Data Task |
|
|
</button> |
|
|
</div> |
|
|
<button onclick="executeAgent()" class="px-6 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors flex items-center space-x-2"> |
|
|
<i data-feather="play" class="w-4 h-4"></i> |
|
|
<span>Execute Agent</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold flex items-center"> |
|
|
<i data-feather="code" class="w-5 h-5 mr-2"></i> |
|
|
Generated Code |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="formatCode()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg"> |
|
|
<i data-feather="align-left" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button onclick="copyCode()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg"> |
|
|
<i data-feather="copy" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button onclick="runCode()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg"> |
|
|
<i data-feather="play-circle" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="codeEditor" class="code-editor border border-secondary-300 dark:border-secondary-600 rounded-lg"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold flex items-center"> |
|
|
<i data-feather="terminal" class="w-5 h-5 mr-2"></i> |
|
|
Agent Output |
|
|
<span id="agentStatus" class="ml-2 px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full text-xs">Ready</span> |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button onclick="clearTerminal()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg"> |
|
|
<i data-feather="trash-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button onclick="downloadOutput()" class="p-2 hover:bg-secondary-100 dark:hover:bg-secondary-700 rounded-lg"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="terminal" class="terminal-container"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-secondary-800 rounded-xl shadow-lg p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-xl font-bold flex items-center"> |
|
|
<i data-feather="monitor" class="w-5 h-5 mr-2"></i> |
|
|
Browser Preview |
|
|
</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-sm text-secondary-500 dark:text-secondary-400">Status:</span> |
|
|
<span id="browserStatus" class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full text-xs">Connected</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-2 border-dashed border-secondary-300 dark:border-secondary-600 rounded-lg p-8 text-center"> |
|
|
<i data-feather="chrome" class="w-12 h-12 mx-auto text-secondary-400 mb-4"></i> |
|
|
<p class="text-secondary-500 dark:text-secondary-400">Browser preview will appear here when agent is running</p> |
|
|
<button onclick="openBrowser()" class="mt-4 px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"> |
|
|
Open Browser |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8"> |
|
|
<h2 class="text-2xl font-bold mb-6">Agent Templates</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="agent-card bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden cursor-pointer" onclick="loadTemplate('scraper')"> |
|
|
<div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2"></div> |
|
|
<div class="p-6"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="download" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Web Scraper</h3> |
|
|
<p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Extract data from any website with intelligent parsing</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs text-secondary-500 dark:text-secondary-400">Qwen + Browser</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-primary-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden cursor-pointer" onclick="loadTemplate('reviewer')"> |
|
|
<div class="bg-gradient-to-r from-green-500 to-teal-600 h-2"></div> |
|
|
<div class="p-6"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Code Reviewer</h3> |
|
|
<p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Automated code analysis and improvement suggestions</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs text-secondary-500 dark:text-secondary-400">Qwen Code</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-primary-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden cursor-pointer" onclick="loadTemplate('tester')"> |
|
|
<div class="bg-gradient-to-r from-orange-500 to-red-600 h-2"></div> |
|
|
<div class="p-6"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="bug" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Test Generator</h3> |
|
|
<p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Generate comprehensive unit and integration tests</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs text-secondary-500 dark:text-secondary-400">Qwen + Code</span> |
|
|
<i data-feather="arrow-right" class="w-4 text-primary-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card bg-white dark:bg-secondary-800 rounded-xl shadow-lg overflow-hidden cursor-pointer" onclick="loadTemplate('api')"> |
|
|
<div class="bg-gradient-to-r from-purple-500 to-pink-600 h-2"></div> |
|
|
<div class="p-6"> |
|
|
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<i data-feather="wifi" class="w-6 h-6 text-white"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">API Tester</h3> |
|
|
<p class="text-sm text-secondary-600 dark:text-secondary-400 mb-4">Automated API testing and validation</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-xs text-secondary-500 dark:text-secondary-400">Browser + API</span> |
|
|
<i data-feather="arrow-right" class="w-4 h-4 text-primary-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
let editor; |
|
|
let terminal; |
|
|
let fitAddon; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
editor = ace.edit("codeEditor"); |
|
|
editor.setTheme("ace/theme/monokai"); |
|
|
editor.session.setMode("ace/mode/python"); |
|
|
editor.setOptions({ |
|
|
fontSize: "14px", |
|
|
showPrintMargin: false, |
|
|
enableBasicAutocompletion: true, |
|
|
enableLiveAutocompletion: true |
|
|
}); |
|
|
|
|
|
|
|
|
terminal = new Terminal({ |
|
|
cursorBlink: true, |
|
|
theme: { |
|
|
background: '#1e1e1e', |
|
|
foreground: '#ffffff', |
|
|
cursor: '#ffffff' |
|
|
} |
|
|
}); |
|
|
fitAddon = new FitAddon.FitAddon(); |
|
|
terminal.loadAddon(fitAddon); |
|
|
terminal.open(document.getElementById('terminal')); |
|
|
fitAddon.fit(); |
|
|
|
|
|
|
|
|
editor.setValue(`# Agent Configuration |
|
|
from browser_use import Agent |
|
|
from langchain_openai import ChatOpenAI |
|
|
import os |
|
|
|
|
|
# Initialize the model |
|
|
model = ChatOpenAI( |
|
|
model="qwen-coder", |
|
|
temperature=0.3, |
|
|
api_key=os.getenv("QWEN_API_KEY"), |
|
|
) |
|
|
|
|
|
# Configure browser session |
|
|
cdp_url = "wss://connect.steel.dev?apiKey=YOUR_API_KEY" |
|
|
|
|
|
# Create agent with task |
|
|
agent = Agent( |
|
|
task="Your task here...", |
|
|
llm=model, |
|
|
browser_session=BrowserSession(cdp_url=cdp_url) |
|
|
) |
|
|
|
|
|
# Execute the agent |
|
|
result = await agent.run() |
|
|
print(result)`, -1); |
|
|
|
|
|
|
|
|
document.getElementById('temperature').addEventListener('input', function(e) { |
|
|
document.getElementById('tempValue').textContent = e.target.value; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
fitAddon.fit(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function toggleTheme() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
|
|
} |
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} |
|
|
|
|
|
function generateSessionId() { |
|
|
const sessionId = 'session_' + Math.random().toString(36).substr(2, 9); |
|
|
document.getElementById('sessionId').value = sessionId; |
|
|
|
|
|
|
|
|
const apiKey = 'ste-HjlJRHvzwqOj3dENKBQFyh4exU0icyNRRoeiTJF1rTX7UOyJDR5yVSK4ez4k8GmMU564TlaQU3Hg3csDW1c7oVfjISKu1CMt1I8'; |
|
|
const cdpUrl = `wss://connect.steel.dev?apiKey=${apiKey}&sessionId=${sessionId}`; |
|
|
document.getElementById('cdpUrl').value = cdpUrl; |
|
|
|
|
|
terminal.writeln('\x1b[32m✓ Session ID generated: ' + sessionId + '\x1b[0m'); |
|
|
} |
|
|
|
|
|
function executeAgent() { |
|
|
const task = document.getElementById('taskInput').value; |
|
|
const agentName = document.getElementById('agentName').value || 'AI Agent'; |
|
|
const model = document.getElementById('modelSelect').value; |
|
|
|
|
|
if (!task) { |
|
|
terminal.writeln('\x1b[31m✗ Please enter a task for the agent\x1b[0m'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('agentStatus').textContent = 'Running'; |
|
|
document.getElementById('agentStatus').className = 'ml-2 px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full text-xs animate-pulse'; |
|
|
|
|
|
terminal.writeln('\x1b[36m🚀 Starting agent execution...\x1b[0m'); |
|
|
terminal.writeln('\x1b[33m📋 Task: ' + task + '\x1b[0m'); |
|
|
terminal.writeln('\x1b[33m🤖 Model: ' + model + '\x1b[0m'); |
|
|
terminal.writeln('\x1b[33m👤 Agent: ' + agentName + '\x1b[0m'); |
|
|
terminal.writeln(''); |
|
|
|
|
|
|
|
|
simulateAgentExecution(task); |
|
|
} |
|
|
|
|
|
function simulateAgentExecution(task) { |
|
|
const steps = [ |
|
|
{ msg: '🔧 Initializing browser session...', delay: 1000 }, |
|
|
{ msg: '🔗 Connecting to Steel browser...', delay: 1500 }, |
|
|
{ msg: '🧠 Loading AI model...', delay: 1000 }, |
|
|
{ msg: '📝 Analyzing task requirements...', delay: 2000 }, |
|
|
{ msg: '🌐 Navigating to target...', delay: 1500 }, |
|
|
{ msg: '🔍 Extracting information...', delay: 3000 }, |
|
|
{ msg: '📊 Processing data...', delay: 2000 }, |
|
|
{ msg: '✅ Task completed successfully!', delay: 1500 } |
|
|
]; |
|
|
|
|
|
let currentStep = 0; |
|
|
|
|
|
function nextStep() { |
|
|
if (currentStep < steps.length) { |
|
|
const step = steps[currentStep]; |
|
|
terminal.writeln('\x1b[37m' + step.msg + '\x1b[0m'); |
|
|
currentStep++; |
|
|
|
|
|
if (currentStep === steps.length - 1) { |
|
|
|
|
|
document.getElementById('agentStatus').textContent = 'Completed'; |
|
|
document.getElementById('agentStatus').className = 'ml-2 px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full text-xs'; |
|
|
|
|
|
|
|
|
terminal.writeln(''); |
|
|
terminal.writeln('\x1b[32m📋 Results:\x1b[0m'); |
|
|
terminal.writeln('Based on the task "' + task + '", here are the findings:'); |
|
|
terminal.writeln('- Successfully navigated to the target website'); |
|
|
terminal.writeln('- Extracted relevant information'); |
|
|
terminal.writeln('- Processed and analyzed the data'); |
|
|
terminal.writeln('- Generated comprehensive report'); |
|
|
} |
|
|
|
|
|
setTimeout(nextStep, step.delay); |
|
|
} |
|
|
} |
|
|
|
|
|
nextStep(); |
|
|
} |
|
|
|
|
|
function insertTemplate(type) { |
|
|
const templates = { |
|
|
web: 'Go to docs.steel.dev, open the changelog, and tell me what\'s new.', |
|
|
code: 'Review the code in the current directory and suggest improvements.', |
|
|
data: 'Extract all product information from the e-commerce page and save to CSV.' |
|
|
}; |
|
|
|
|
|
document.getElementById('taskInput').value = templates[type]; |
|
|
} |
|
|
|
|
|
function loadTemplate(templateName) { |
|
|
const templates = { |
|
|
scraper: `# Web Scraper Agent |
|
|
from browser_use import Agent |
|
|
from langchain_openai import ChatOpenAI |
|
|
|
|
|
model = ChatOpenAI(model="qwen-coder", temperature=0.2) |
|
|
|
|
|
agent = Agent( |
|
|
task="Extract all product information from the e-commerce page including names, prices, and descriptions", |
|
|
llm=model, |
|
|
browser_session=BrowserSession(cdp_url=cdp_url) |
|
|
) |
|
|
|
|
|
result = await agent.run()`, |
|
|
reviewer: `# Code Reviewer Agent |
|
|
from browser_use import Agent |
|
|
from langchain_openai import ChatOpenAI |
|
|
|
|
|
model = ChatOpenAI(model="qwen-coder", temperature=0.1) |
|
|
|
|
|
agent = Agent( |
|
|
task="Review the Python code in the current directory, identify bugs, suggest improvements, and check for security vulnerabilities", |
|
|
llm=model |
|
|
) |
|
|
|
|
|
result = await agent.run()`, |
|
|
tester: `# Test Generator Agent |
|
|
from browser_use import Agent |
|
|
from langchain_openai import ChatOpenAI |
|
|
|
|
|
model = ChatOpenAI(model="qwen-coder", temperature=0.3) |
|
|
|
|
|
agent = Agent( |
|
|
task="Generate comprehensive unit tests for the provided codebase with edge cases and error handling", |
|
|
llm=model |
|
|
) |
|
|
|
|
|
result = await agent.run()`, |
|
|
api: `# API Tester Agent |
|
|
from browser_use import Agent |
|
|
from langchain_openai import ChatOpenAI |
|
|
|
|
|
model = ChatOpenAI(model="qwen-coder", temperature=0.1) |
|
|
|
|
|
agent = Agent( |
|
|
task="Test all API endpoints, validate responses, check for errors, and generate test report", |
|
|
llm=model, |
|
|
browser_session=BrowserSession(cdp_url=cdp_url) |
|
|
) |
|
|
|
|
|
result = await agent.run()` |
|
|
}; |
|
|
|
|
|
editor.setValue(templates[templateName], -1); |
|
|
terminal.writeln('\x1b[32m✓ Template loaded: ' + templateName + '\x1b[0m'); |
|
|
} |
|
|
|
|
|
function startNewAgent() { |
|
|
|
|
|
document.getElementById('agentName').value = ''; |
|
|
document.getElementById('taskInput').value = ''; |
|
|
document.getElementById('temperature').value = '0.3'; |
|
|
document.getElementById('tempValue').textContent = '0.3'; |
|
|
|
|
|
|
|
|
generateSessionId(); |
|
|
|
|
|
|
|
|
terminal.clear(); |
|
|
terminal.writeln('\x1b[36m🆕 New agent configuration started\x1b[0m'); |
|
|
} |
|
|
|
|
|
function formatCode() { |
|
|
editor beautify(); |
|
|
terminal.writeln('\x1b[32m✓ Code formatted\x1b[0m'); |
|
|
} |
|
|
|
|
|
function copyCode() { |
|
|
const code = editor.getValue(); |
|
|
navigator.clipboard.writeText(code); |
|
|
terminal.writeln('\x1b[32m✓ Code copied to clipboard\x1b[0m'); |
|
|
} |
|
|
|
|
|
function runCode() { |
|
|
terminal.writeln('\x1b[33m🔄 Executing code...\x1b[0m'); |
|
|
setTimeout(() => { |
|
|
terminal.writeln('\x1b[32m✓ Code executed successfully\x1b[0m'); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
function clearTerminal() { |
|
|
terminal.clear(); |
|
|
} |
|
|
|
|
|
function downloadOutput() { |
|
|
const output = terminal.getOutput(); |
|
|
const blob = new Blob([output], { type: 'text/plain' }); |
|
|
const url = window.URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'agent-output.txt'; |
|
|
a.click(); |
|
|
terminal.writeln('\x1b[32m✓ Output downloaded\x1b[0m'); |
|
|
} |
|
|
|
|
|
function openBrowser() { |
|
|
terminal.writeln('\x1b[33m🌐 Opening browser session...\x1b[0m'); |
|
|
document.getElementById('browserStatus').textContent = 'Active'; |
|
|
document.getElementById('browserStatus').className = 'px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded-full text-xs'; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
