deepseek-site / index.html
MaxHeadspace's picture
undefined - Initial Deployment
4c9cd13 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek Agent Management System</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>
.virtual-btn {
background-color: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.virtual-btn:hover {
background-color: #e5e7eb;
border-color: #d1d5db;
}
.virtual-btn:active {
background-color: #d1d5db;
}
.directory-tree {
max-height: 70vh;
overflow-y: auto;
}
.agent-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<h1 class="text-3xl font-bold text-indigo-700">DeepSeek Agent Orchestrator</h1>
<p class="text-gray-600">Autonomous agents for directory monitoring and processing</p>
</div>
<div class="flex items-center gap-4">
<div class="relative">
<input type="text" placeholder="Search agents..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-plus"></i> New Agent
</button>
</div>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Panel - Directory Structure -->
<div class="lg:col-span-1 bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-indigo-50">
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2">
<i class="fas fa-folder-tree"></i> Directory Structure
</h2>
<div class="mt-2 flex items-center gap-2">
<span class="text-sm text-gray-500">Root: </span>
<span class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">x:\ROOT</span>
</div>
</div>
<div class="p-4 directory-tree">
<div class="space-y-1">
<div class="directory-item" data-path="x:\ROOT">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer">
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span>ROOT</span>
</div>
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">3 agents</span>
</div>
<div class="ml-4 pl-4 border-l border-gray-200 mt-1 space-y-1">
<!-- Subdirectories would be dynamically generated -->
<div class="directory-item" data-path="x:\ROOT\Data">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer">
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span>Data</span>
</div>
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">1 agent</span>
</div>
</div>
<div class="directory-item" data-path="x:\ROOT\Processing">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer">
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span>Processing</span>
</div>
</div>
</div>
<div class="directory-item" data-path="x:\ROOT\Archive">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer">
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span>Archive</span>
</div>
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">2 agents</span>
</div>
<div class="ml-4 pl-4 border-l border-gray-200 mt-1 space-y-1">
<div class="directory-item" data-path="x:\ROOT\Archive\2023">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer">
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span>2023</span>
</div>
</div>
</div>
<div class="directory-item" data-path="x:\ROOT\Archive\2024">
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer">
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span>2024</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 bg-gray-50">
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center gap-2">
<i class="fas fa-plus"></i> Add Directory
</button>
</div>
</div>
<!-- Middle Panel - Agent Management -->
<div class="lg:col-span-2 space-y-6">
<!-- Current Directory Info -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-indigo-50">
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2">
<i class="fas fa-map-marker-alt"></i> Selected Directory
</h2>
</div>
<div class="p-4">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<div class="flex items-center gap-2">
<i class="fas fa-folder text-yellow-500"></i>
<span class="font-mono text-lg">x:\ROOT\Archive</span>
</div>
<div class="mt-2 flex flex-wrap gap-2">
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-database text-indigo-500"></i> 45.7 GB
</span>
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-file text-indigo-500"></i> 1,245 files
</span>
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-folder text-indigo-500"></i> 32 subdirs
</span>
</div>
</div>
<div class="flex gap-2">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-robot"></i> Deploy Agent
</button>
<button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2">
<i class="fas fa-cog"></i> Configure
</button>
</div>
</div>
</div>
</div>
<!-- Active Agents -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-indigo-50">
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2">
<i class="fas fa-robot"></i> Active Agents (2)
</h2>
</div>
<div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Agent Card 1 -->
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-200">
<div class="flex justify-between items-start">
<div>
<h3 class="font-semibold text-lg">Archive Monitor</h3>
<p class="text-sm text-gray-500">Monitors archive directory for new files</p>
</div>
<div class="flex items-center gap-2">
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="relative w-10 h-10">
<svg class="w-full h-full" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
<circle cx="18" cy="18" r="16" fill="none" stroke="#4f46e5" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="25"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-indigo-700">75%</div>
</div>
<div>
<div class="text-sm font-medium">Processing</div>
<div class="text-xs text-gray-500">12 files in queue</div>
</div>
</div>
<div class="text-right">
<div class="text-xs text-gray-500">Last activity</div>
<div class="text-sm font-medium">2 min ago</div>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-between">
<button class="text-xs bg-red-50 text-red-600 hover:bg-red-100 px-3 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-stop"></i> Stop
</button>
<button class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-chart-line"></i> Stats
</button>
<button class="text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 px-3 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-cog"></i> Configure
</button>
</div>
</div>
<!-- Agent Card 2 -->
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-200">
<div class="flex justify-between items-start">
<div>
<h3 class="font-semibold text-lg">Cleanup Bot</h3>
<p class="text-sm text-gray-500">Removes old files based on rules</p>
</div>
<div class="flex items-center gap-2">
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Idle</span>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="relative w-10 h-10">
<svg class="w-full h-full" viewBox="0 0 36 36">
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle>
<circle cx="18" cy="18" r="16" fill="none" stroke="#4f46e5" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="100"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-indigo-700">0%</div>
</div>
<div>
<div class="text-sm font-medium">Waiting</div>
<div class="text-xs text-gray-500">Next run in 1h 23m</div>
</div>
</div>
<div class="text-right">
<div class="text-xs text-gray-500">Last activity</div>
<div class="text-sm font-medium">5h ago</div>
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-between">
<button class="text-xs bg-green-50 text-green-600 hover:bg-green-100 px-3 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-play"></i> Start
</button>
<button class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-chart-line"></i> Stats
</button>
<button class="text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 px-3 py-1 rounded-full flex items-center gap-1">
<i class="fas fa-cog"></i> Configure
</button>
</div>
</div>
</div>
</div>
<!-- Agent Templates -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-indigo-50">
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2">
<i class="fas fa-magic"></i> Agent Templates
</h2>
</div>
<div class="p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Template 1 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer">
<div class="flex items-start gap-3">
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
<i class="fas fa-eye"></i>
</div>
<div>
<h3 class="font-medium">File Monitor</h3>
<p class="text-sm text-gray-500 mt-1">Watches for new/changed files</p>
</div>
</div>
</div>
<!-- Template 2 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer">
<div class="flex items-start gap-3">
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
<i class="fas fa-archive"></i>
</div>
<div>
<h3 class="font-medium">Auto-Archiver</h3>
<p class="text-sm text-gray-500 mt-1">Moves files based on rules</p>
</div>
</div>
</div>
<!-- Template 3 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer">
<div class="flex items-start gap-3">
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
<i class="fas fa-broom"></i>
</div>
<div>
<h3 class="font-medium">Cleanup Bot</h3>
<p class="text-sm text-gray-500 mt-1">Deletes old/unneeded files</p>
</div>
</div>
</div>
<!-- Template 4 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer">
<div class="flex items-start gap-3">
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
<i class="fas fa-sync-alt"></i>
</div>
<div>
<h3 class="font-medium">Sync Agent</h3>
<p class="text-sm text-gray-500 mt-1">Syncs with other directories</p>
</div>
</div>
</div>
<!-- Template 5 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer">
<div class="flex items-start gap-3">
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
<i class="fas fa-search"></i>
</div>
<div>
<h3 class="font-medium">Content Scanner</h3>
<p class="text-sm text-gray-500 mt-1">Analyzes file contents</p>
</div>
</div>
</div>
<!-- Template 6 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer">
<div class="flex items-start gap-3">
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg">
<i class="fas fa-plus"></i>
</div>
<div>
<h3 class="font-medium">Custom Agent</h3>
<p class="text-sm text-gray-500 mt-1">Create your own agent</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Virtual Input Control Panel -->
<div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-indigo-50">
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2">
<i class="fas fa-keyboard"></i> Virtual Input Controls
</h2>
</div>
<div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<h3 class="font-medium mb-2">Mouse Controls</h3>
<div class="grid grid-cols-3 gap-2">
<button class="virtual-btn" data-action="mouse-move" data-args="0,-10">
<i class="fas fa-arrow-up"></i>
</button>
<button class="virtual-btn" data-action="mouse-move" data-args="-10,0">
<i class="fas fa-arrow-left"></i>
</button>
<button class="virtual-btn" data-action="mouse-click">
<i class="fas fa-mouse-pointer"></i>
</button>
<button class="virtual-btn" data-action="mouse-move" data-args="10,0">
<i class="fas fa-arrow-right"></i>
</button>
<button class="virtual-btn" data-action="mouse-move" data-args="0,10">
<i class="fas fa-arrow-down"></i>
</button>
<button class="virtual-btn" data-action="mouse-right-click">
<i class="fas fa-hand-pointer"></i>
</button>
</div>
</div>
<div>
<h3 class="font-medium mb-2">Keyboard Input</h3>
<div class="flex gap-2">
<input type="text" id="virtual-keyboard-input" class="flex-1 border rounded px-3 py-2" placeholder="Type text...">
<button class="virtual-btn" data-action="keyboard-type">
<i class="fas fa-paper-plane"></i> Send
</button>
</div>
</div>
<div>
<h3 class="font-medium mb-2">System Actions</h3>
<div class="flex flex-wrap gap-2">
<button class="virtual-btn" data-action="screenshot">
<i class="fas fa-camera"></i> Screenshot
</button>
<button class="virtual-btn" data-action="execute-python">
<i class="fab fa-python"></i> Run Python
</button>
<button class="virtual-btn" data-action="browse-files">
<i class="fas fa-folder-open"></i> Browse Files
</button>
</div>
</div>
</div>
</div>
<!-- Status Bar -->
<div class="mt-4 bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-3 bg-gray-800 text-white flex flex-wrap items-center justify-between gap-2">
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
<span class="text-sm">System: Operational</span>
</div>
<div class="hidden md:flex items-center gap-2">
<i class="fas fa-microchip text-blue-300"></i>
<span class="text-sm">CPU: 24%</span>
</div>
<div class="hidden md:flex items-center gap-2">
<i class="fas fa-memory text-purple-300"></i>
<span class="text-sm">RAM: 3.2/16 GB</span>
</div>
</div>
<div class="text-sm">
<span class="hidden sm:inline">Agents:</span>
<span class="text-green-400">12 active</span>,
<span class="text-yellow-400">3 idle</span>,
<span class="text-red-400">0 stopped</span>
</div>
</div>
</div>
</div>
<script>
// Virtual Input Controller
document.querySelectorAll('.virtual-btn').forEach(btn => {
btn.addEventListener('click', async function() {
const action = this.dataset.action;
const args = this.dataset.args ? JSON.parse(this.dataset.args) : null;
try {
let result;
switch(action) {
case 'mouse-move':
result = await virtualMouseMove(...args);
break;
case 'mouse-click':
result = await virtualMouseClick();
break;
case 'mouse-right-click':
result = await virtualMouseClick(true);
break;
case 'keyboard-type':
const text = document.getElementById('virtual-keyboard-input').value;
result = await virtualKeyboardType(text);
break;
case 'screenshot':
result = await takeScreenshot();
break;
case 'execute-python':
result = await executePython();
break;
case 'browse-files':
result = await browseFiles();
break;
}
console.log(`${action} result:`, result);
} catch (error) {
console.error('Virtual input error:', error);
}
});
});
// Virtual input functions
async function virtualMouseMove(x, y) {
// In a real implementation, this would use PyAutoGUI or similar
console.log(`Moving mouse by ${x},${y}`);
return {success: true, x, y};
}
async function virtualMouseClick(rightClick = false) {
console.log(`Performing ${rightClick ? 'right' : 'left'} click`);
return {success: true, clickType: rightClick ? 'right' : 'left'};
}
async function virtualKeyboardType(text) {
console.log(`Typing: ${text}`);
return {success: true, text};
}
async function takeScreenshot() {
// In Electron app this would use desktopCapturer
// In browser extension this would use chrome.tabs.captureVisibleTab
console.log('Taking screenshot');
return {success: true, image: 'screenshot-data'};
}
async function executePython() {
// Would connect to backend Python service
console.log('Executing Python script');
return {success: true, output: 'Python execution result'};
}
async function browseFiles() {
// Would use file input or Electron dialog
console.log('Opening file browser');
return {success: true, files: []};
}
// Simple directory tree interaction
document.querySelectorAll('.directory-item').forEach(item => {
item.addEventListener('click', function() {
// Remove active class from all items
document.querySelectorAll('.directory-item').forEach(i => {
i.querySelector('div').classList.remove('bg-indigo-100', 'text-indigo-800');
});
// Add active class to clicked item
this.querySelector('div').classList.add('bg-indigo-100', 'text-indigo-800');
// In a real app, you would load the directory content here
console.log('Selected directory:', this.dataset.path);
});
});
// Agent card hover effects
document.querySelectorAll('.agent-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.classList.add('shadow-lg');
});
card.addEventListener('mouseleave', function() {
this.classList.remove('shadow-lg');
});
});
// Template selection
document.querySelectorAll('[class*="border-gray-200"]').forEach(template => {
template.addEventListener('click', function() {
// In a real app, this would open a configuration modal
console.log('Selected template:', this.querySelector('h3').textContent);
});
});
</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=MaxHeadspace/deepseek-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>