Сделай гуи для .exe файла для # 🌟 Environment-Augmented Generation (EAG) - Полный обзор системы* Создать первую в мире среду, где ИИ может проводить эксперименты и учиться на реальных последствиях своих действий. Современные ИИ похожи на узников в платоновской пещере. Они видят только текст — тени, отбрасываемые реальным кодом. Они не знают, что происходит, когда этот код исполняется. Они не чувствуют задержку в сети, не видят ошибку сегментации, не понимают, почему один алгоритм 'элегантнее' другого на уровне процессора." - Initial Deployment
8c621bb verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EAG System Control Panel</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> | |
| .console-output { | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| height: 300px; | |
| overflow-y: auto; | |
| background-color: #1e1e1e; | |
| color: #d4d4d4; | |
| padding: 10px; | |
| border-radius: 4px; | |
| } | |
| .console-input { | |
| font-family: 'Courier New', monospace; | |
| background-color: #252526; | |
| color: #d4d4d4; | |
| border: 1px solid #3c3c3c; | |
| } | |
| .experiment-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); | |
| } | |
| .cpu-gauge, .memory-gauge { | |
| height: 6px; | |
| border-radius: 3px; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(5, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { visibility: hidden; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-900 text-white flex flex-col"> | |
| <div class="p-4 border-b border-gray-700 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-brain text-white"></i> | |
| </div> | |
| <div> | |
| <h1 class="font-bold">EAG System</h1> | |
| <p class="text-xs text-gray-400">v1.0.3</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h2 class="text-xs uppercase tracking-wider text-gray-500 mb-2">Main</h2> | |
| <ul> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 rounded bg-blue-800 text-white"> | |
| <i class="fas fa-flask mr-3"></i> Experiments | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-800"> | |
| <i class="fas fa-chart-line mr-3"></i> Analytics | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-800"> | |
| <i class="fas fa-terminal mr-3"></i> Console | |
| </a> | |
| </li> | |
| <li class="mb-1"> | |
| <a href="#" class="flex items-center px-3 py-2 rounded hover:bg-gray-800"> | |
| <i class="fas fa-cog mr-3"></i> Settings | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h2 class="text-xs uppercase tracking-wider text-gray-500 mb-2">System</h2> | |
| <div class="bg-gray-800 rounded p-3 mb-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>CPU Usage</span> | |
| <span>42%</span> | |
| </div> | |
| <div class="cpu-gauge bg-gray-700 w-full"> | |
| <div class="cpu-gauge bg-blue-500" style="width: 42%;"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded p-3 mb-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Memory</span> | |
| <span>3.2/8 GB</span> | |
| </div> | |
| <div class="memory-gauge bg-gray-700 w-full"> | |
| <div class="memory-gauge bg-green-500" style="width: 40%;"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded p-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>AI Learning</span> | |
| <span>Active <span class="inline-block w-2 h-2 rounded-full bg-green-500 ml-1"></span></span> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span>Experiments</span> | |
| <span>17</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-auto p-4 border-t border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user text-gray-400"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Admin User</p> | |
| <p class="text-xs text-gray-400">Supervisor</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <div class="bg-white shadow"> | |
| <div class="px-6 py-4 flex justify-between items-center"> | |
| <h2 class="text-xl font-semibold">Environment-Augmented Generation Control Panel</h2> | |
| <div class="flex items-center"> | |
| <div class="mr-4 flex items-center"> | |
| <span class="inline-block w-3 h-3 rounded-full bg-green-500 mr-2"></span> | |
| <span class="text-sm">System Active</span> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Start Experiment | |
| </button> | |
| </div> | |
| </div> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <a href="#" class="tab-link border-b-2 border-blue-500 text-blue-600 px-4 py-3 text-sm font-medium">Dashboard</a> | |
| <a href="#" class="tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">Experiments</a> | |
| <a href="#" class="tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">Environment</a> | |
| <a href="#" class="tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">Knowledge Base</a> | |
| <a href="#" class="tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">API</a> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Dashboard Tab --> | |
| <div id="dashboard-tab" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-flask text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Active Experiments</p> | |
| <p class="text-2xl font-bold">8</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Successful</p> | |
| <p class="text-2xl font-bold">24</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4"> | |
| <i class="fas fa-times-circle text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Failed</p> | |
| <p class="text-2xl font-bold">9</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-bolt text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Learning Rate</p> | |
| <p class="text-2xl font-bold">0.87</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-5 lg:col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-medium">Experiment Performance</h3> | |
| <div class="flex"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded mr-2">Last 24h</button> | |
| <button class="text-xs bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded">Last 7d</button> | |
| </div> | |
| </div> | |
| <div class="h-64"> | |
| <img src="https://via.placeholder.com/600x250?text=Performance+Chart" alt="Performance Chart" class="w-full h-full object-cover rounded"> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-5"> | |
| <h3 class="font-medium mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Experiment #42 completed</p> | |
| <p class="text-xs text-gray-500">2 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-plus text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">New experiment started</p> | |
| <p class="text-xs text-gray-500">15 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center"> | |
| <i class="fas fa-exclamation text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Warning: High CPU usage</p> | |
| <p class="text-xs text-gray-500">32 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center"> | |
| <i class="fas fa-times text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Experiment #41 failed</p> | |
| <p class="text-xs text-gray-500">1 hour ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-5 py-4 border-b border-gray-200"> | |
| <h3 class="font-medium">Running Experiments</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="grid grid-cols-12 items-center px-5 py-3 hover:bg-gray-50"> | |
| <div class="col-span-4 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-blue-500 mr-3"></span> | |
| <span class="font-medium">Memory Optimization #7</span> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Learning</div> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <span class="text-xs">45%</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm">12m 34s</div> | |
| <div class="col-span-2 text-right"> | |
| <button class="text-red-500 hover:text-red-700 text-sm font-medium">Stop</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 items-center px-5 py-3 hover:bg-gray-50"> | |
| <div class="col-span-4 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-3"></span> | |
| <span class="font-medium">Algorithm Comparison</span> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Testing</div> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| <span class="text-xs">78%</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm">6m 12s</div> | |
| <div class="col-span-2 text-right"> | |
| <button class="text-red-500 hover:text-red-700 text-sm font-medium">Stop</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-12 items-center px-5 py-3 hover:bg-gray-50"> | |
| <div class="col-span-4 flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-purple-500 mr-3"></span> | |
| <span class="font-medium">Network Latency</span> | |
| </div> | |
| <div class="col-span-2 text-sm text-gray-500">Analyzing</div> | |
| <div class="col-span-2"> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 32%"></div> | |
| </div> | |
| <span class="text-xs">32%</span> | |
| </div> | |
| </div> | |
| <div class="col-span-2 text-sm">23m 45s</div> | |
| <div class="col-span-2 text-right"> | |
| <button class="text-red-500 hover:text-red-700 text-sm font-medium">Stop</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Experiments Tab --> | |
| <div id="experiments-tab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-medium">Experiment Management</h3> | |
| <div class="flex"> | |
| <div class="relative mr-3"> | |
| <input type="text" placeholder="Search experiments..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> New Experiment | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="experiment-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200 ease-in-out"> | |
| <div class="bg-blue-600 p-3 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Memory Optimization</h4> | |
| <span class="text-xs bg-blue-700 px-2 py-1 rounded">Running</span> | |
| </div> | |
| <p class="text-xs opacity-80 mt-1">Investigating memory allocation patterns</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-3"> | |
| <span>Started: 12:34 PM</span> | |
| <span>Duration: 42m</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Progress</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-pause mr-1"></i> Pause | |
| </button> | |
| <button class="text-xs bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-stop mr-1"></i> Stop | |
| </button> | |
| <button class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-chart-bar mr-1"></i> Stats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="experiment-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200 ease-in-out"> | |
| <div class="bg-green-600 p-3 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Algorithm Comparison</h4> | |
| <span class="text-xs bg-green-700 px-2 py-1 rounded">Completed</span> | |
| </div> | |
| <p class="text-xs opacity-80 mt-1">Comparing sorting algorithms</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-3"> | |
| <span>Completed: 10:21 AM</span> | |
| <span>Duration: 1h 23m</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Success Rate</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-redo mr-1"></i> Repeat | |
| </button> | |
| <button class="text-xs bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-file-export mr-1"></i> Export | |
| </button> | |
| <button class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-chart-bar mr-1"></i> Stats | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="experiment-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200 ease-in-out"> | |
| <div class="bg-purple-600 p-3 text-white"> | |
| <div class="flex justify-between items-center"> | |
| <h4 class="font-medium">Network Analysis</h4> | |
| <span class="text-xs bg-purple-700 px-2 py-1 rounded">Queued</span> | |
| </div> | |
| <p class="text-xs opacity-80 mt-1">Testing network latency patterns</p> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-3"> | |
| <span>Queued: 9:15 AM</span> | |
| <span>Est. duration: 45m</span> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>Priority</span> | |
| <span>High</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-play mr-1"></i> Start | |
| </button> | |
| <button class="text-xs bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-trash mr-1"></i> Delete | |
| </button> | |
| <button class="text-xs bg-blue-100 hover:bg-blue-200 text-blue-700 px-3 py-1 rounded flex items-center"> | |
| <i class="fas fa-cog mr-1"></i> Configure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Console Tab --> | |
| <div id="console-tab" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-4 py-3 bg-gray-800 text-white flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-terminal mr-2"></i> | |
| <span>EAG System Console</span> | |
| </div> | |
| <div class="flex"> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded mr-2"> | |
| <i class="fas fa-trash mr-1"></i> Clear | |
| </button> | |
| <button class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded"> | |
| <i class="fas fa-cog mr-1"></i> Settings | |
| </button> | |
| </div> | |
| </div> | |
| <div class="console-output p-3" id="console-output"> | |
| <div class="text-green-400">> System initialized at 2023-07-15 14:32:18</div> | |
| <div class="text-green-400">> Environment check completed - all systems nominal</div> | |
| <div class="text-blue-400">> Starting experiment #42: Memory optimization patterns</div> | |
| <div class="text-gray-400">[14:32:45] Allocating 512MB test block...</div> | |
| <div class="text-gray-400">[14:33:02] Running garbage collection analysis...</div> | |
| <div class="text-yellow-400">[14:33:18] Warning: High memory fragmentation detected</div> | |
| <div class="text-gray-400">[14:33:45] Testing alternative allocation strategy...</div> | |
| <div class="text-green-400">[14:34:12] Success: 18% improvement in allocation speed</div> | |
| <div class="text-blue-400">> Starting experiment #43: Network latency simulation</div> | |
| <div class="text-gray-400">[14:34:30] Configuring network emulator...</div> | |
| <div class="text-gray-400">[14:34:45] Running 1000 request benchmark...</div> | |
| <div class="text-yellow-400">[14:35:02] Warning: Packet loss detected (2.4%)</div> | |
| <div class="text-gray-400">[14:35:45] Analyzing TCP window size impact...</div> | |
| <div class="text-green-400">> Ready for new commands</div> | |
| <div class="text-green-400 blink">_</div> | |
| </div> | |
| <div class="p-3 border-t border-gray-200 bg-gray-50"> | |
| <div class="flex"> | |
| <input type="text" class="console-input flex-1 px-3 py-2 rounded-l focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Enter command..."> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div id="settings-tab" class="tab-content"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <a href="#" class="settings-tab-link border-b-2 border-blue-500 text-blue-600 px-4 py-3 text-sm font-medium">General</a> | |
| <a href="#" class="settings-tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">Environment</a> | |
| <a href="#" class="settings-tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">Security</a> | |
| <a href="#" class="settings-tab-link border-b-2 border-transparent hover:text-gray-700 hover:border-gray-300 px-4 py-3 text-sm font-medium">API</a> | |
| </nav> | |
| </div> | |
| <div class="p-6"> | |
| <div id="general-settings" class="settings-tab-content active"> | |
| <h3 class="text-lg font-medium mb-6">General Settings</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">System Name</label> | |
| <input type="text" value="EAG Main System" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Learning Mode</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Aggressive</option> | |
| <option selected>Balanced</option> | |
| <option>Conservative</option> | |
| <option>Custom</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Maximum Concurrent Experiments</label> | |
| <input type="range" min="1" max="10" value="4" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>1</span> | |
| <span>2</span> | |
| <span>3</span> | |
| <span class="font-medium text-blue-600">4</span> | |
| <span>5</span> | |
| <span>6</span> | |
| <span>7</span> | |
| <span>8</span> | |
| <span>9</span> | |
| <span>10</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="auto-update" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="auto-update" class="ml-2 block text-sm text-gray-700">Automatically apply learning updates</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="error-reporting" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="error-reporting" class="ml-2 block text-sm text-gray-700">Send anonymous error reports</label> | |
| </div> | |
| <div class="pt-4 border-t border-gray-200"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm"> | |
| Save Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| document.querySelectorAll('.tab-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Update active tab | |
| document.querySelectorAll('.tab-link').forEach(t => { | |
| t.classList.remove('border-blue-500', 'text-blue-600'); | |
| t.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| this.classList.add('border-blue-500', 'text-blue-600'); | |
| this.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| // Show corresponding content | |
| const tabId = this.textContent.trim().toLowerCase() + '-tab'; | |
| document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active')); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Settings tab switching | |
| document.querySelectorAll('.settings-tab-link').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Update active tab | |
| document.querySelectorAll('.settings-tab-link').forEach(t => { | |
| t.classList.remove('border-blue-500', 'text-blue-600'); | |
| t.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| this.classList.add('border-blue-500', 'text-blue-600'); | |
| this.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| }); | |
| }); | |
| // Simulate console output | |
| const consoleOutput = document.getElementById('console-output'); | |
| const consoleInput = document.querySelector('.console-input'); | |
| const consoleButton = document.querySelector('.console-input + button'); | |
| function addConsoleMessage(message, colorClass = 'text-gray-400') { | |
| const blinkElement = consoleOutput.querySelector('.blink'); | |
| if (blinkElement) blinkElement.remove(); | |
| const messageElement = document.createElement('div'); | |
| messageElement.className = colorClass; | |
| messageElement.textContent = `> ${message}`; | |
| consoleOutput.appendChild(messageElement); | |
| const newBlink = document.createElement('div'); | |
| newBlink.className = 'text-green-400 blink'; | |
| newBlink.textContent = '_'; | |
| consoleOutput.appendChild(newBlink); | |
| consoleOutput.scrollTop = consoleOutput.scrollHeight; | |
| } | |
| consoleButton.addEventListener('click', function() { | |
| if (consoleInput.value.trim()) { | |
| addConsoleMessage(consoleInput.value, 'text-purple-400'); | |
| // Simulate response | |
| setTimeout(() => { | |
| const responses = [ | |
| "Command executed successfully", | |
| "Error: Invalid syntax", | |
| "Processing...", | |
| "Experiment queued", | |
| "System busy, try again later" | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| const responseColor = randomResponse.includes("Error") ? 'text-red-400' : 'text-green-400'; | |
| addConsoleMessage(randomResponse, responseColor); | |
| }, 500); | |
| consoleInput.value = ''; | |
| } | |
| }); | |
| consoleInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| consoleButton.click(); | |
| } | |
| }); | |
| // Simulate system status updates | |
| setInterval(() => { | |
| const cpuElement = document.querySelector('.cpu-gauge > div'); | |
| const memoryElement = document.querySelector('.memory-gauge > div'); | |
| const currentCpu = parseInt(cpuElement.style.width); | |
| const currentMemory = parseInt(memoryElement.style.width); | |
| const newCpu = Math.max(10, Math.min(90, currentCpu + (Math.random() * 10 - 5))); | |
| const newMemory = Math.max(15, Math.min(85, currentMemory + (Math.random() * 8 - 4))); | |
| cpuElement.style.width = `${newCpu}%`; | |
| memoryElement.style.width = `${newMemory}%`; | |
| document.querySelector('.cpu-gauge + div span:last-child').textContent = `${Math.round(newCpu)}%`; | |
| document.querySelector('.memory-gauge + div span:last-child').textContent = `${(8 * newMemory / 100).toFixed(1)}/8 GB`; | |
| }, 3000); | |
| </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=DanilKZ/goated" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |