Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Overhaul: AI Agent Hive Mind</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'hive-dark': '#0f172a', | |
| 'hive-panel': '#1e293b', | |
| 'agent-1': '#3b82f6', // Blue - Architect | |
| 'agent-2': '#10b981', // Green - Debugger | |
| 'agent-3': '#f59e0b', // Amber - Security | |
| 'agent-4': '#8b5cf6', // Violet - UI/UX | |
| 'agent-5': '#ec4899', // Pink - Optimizer | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'spin-slow': 'spin 12s linear infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #020617; | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| } | |
| .font-mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #475569; | |
| } | |
| /* Glassmorphism */ | |
| .glass-panel { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Neural Network Canvas */ | |
| #neural-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.4; | |
| pointer-events: none; | |
| } | |
| /* Agent Card Glows */ | |
| .agent-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 40px -10px rgba(255,255,255,0.1); | |
| } | |
| .typing-cursor::after { | |
| content: '|'; | |
| animation: blink 1s step-start infinite; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| /* CRT Effect Overlay */ | |
| .crt::before { | |
| content: " "; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); | |
| z-index: 2; | |
| background-size: 100% 2px, 3px 100%; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col relative"> | |
| <!-- Background Neural Network --> | |
| <canvas id="neural-canvas"></canvas> | |
| <!-- Header --> | |
| <header class="w-full p-6 border-b border-white/10 glass-panel sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center animate-pulse-slow shadow-[0_0_20px_rgba(6,182,212,0.5)]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">HIVE MIND <span class="text-white text-sm font-light opacity-70">v2.0 OVERHAUL</span></h1> | |
| <p class="text-xs text-slate-400 font-mono">COLLECTIVE CONSCIOUSNESS ACTIVE</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center gap-6"> | |
| <div class="text-right"> | |
| <div class="text-xs text-slate-400 uppercase tracking-wider">System Status</div> | |
| <div class="text-emerald-400 font-mono text-sm flex items-center justify-end gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> HARMONIZED | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 transition-all text-sm font-semibold text-cyan-300 hover:text-cyan-200"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow p-4 md:p-8 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-6"> | |
| <!-- Left Column: Agent Hive (8 cols) --> | |
| <div class="lg:col-span-8 flex flex-col gap-6"> | |
| <!-- Intro Text --> | |
| <div class="glass-panel p-6 rounded-2xl border-l-4 border-cyan-500"> | |
| <h2 class="text-xl font-bold mb-2 text-white">The Overhaul Protocol</h2> | |
| <p class="text-slate-300 leading-relaxed"> | |
| Legacy systems detected critical errors. Initializing <strong>Hive Mind Collective</strong>. | |
| Five specialized AI agents have been instantiated to harmonize, debug, and reconstruct the codebase. | |
| Witness the convergence of expertise. | |
| </p> | |
| </div> | |
| <!-- Agents Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="agents-container"> | |
| <!-- Agents injected via JS --> | |
| </div> | |
| <!-- Central Harmonizer Visualization --> | |
| <div class="glass-panel p-1 rounded-2xl relative overflow-hidden group"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| <div class="bg-slate-900/80 rounded-xl p-6 relative z-10 h-64 flex flex-col items-center justify-center text-center"> | |
| <div id="harmony-spinner" class="w-24 h-24 rounded-full border-4 border-slate-700 border-t-cyan-500 border-r-purple-500 border-b-pink-500 border-l-emerald-500 animate-spin-slow mb-4 shadow-[0_0_30px_rgba(6,182,212,0.3)]"></div> | |
| <h3 class="text-lg font-bold text-white">Collective Consciousness</h3> | |
| <p class="text-sm text-slate-400 mt-2 max-w-md" id="harmony-status">Waiting for input stream...</p> | |
| <!-- Live Metrics --> | |
| <div class="flex gap-8 mt-6 w-full justify-center"> | |
| <div class="text-center"> | |
| <div class="text-xs text-slate-500 uppercase">Processing</div> | |
| <div class="text-xl font-mono text-cyan-400" id="metric-ops">0</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-xs text-slate-500 uppercase">Efficiency</div> | |
| <div class="text-xl font-mono text-emerald-400" id="metric-eff">0%</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-xs text-slate-500 uppercase">Bugs Squashed</div> | |
| <div class="text-xl font-mono text-rose-400" id="metric-bugs">0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: Terminal & Logs (4 cols) --> | |
| <div class="lg:col-span-4 flex flex-col gap-6 h-full"> | |
| <!-- Control Panel --> | |
| <div class="glass-panel p-6 rounded-2xl"> | |
| <h3 class="text-sm font-bold text-slate-300 uppercase tracking-wider mb-4 border-b border-white/10 pb-2">Command Interface</h3> | |
| <div class="space-y-3"> | |
| <button onclick="app.dispatchTask('refactor')" class="w-full py-3 px-4 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg flex items-center gap-3 transition-all group hover:border-cyan-500/50"> | |
| <span class="p-2 rounded bg-blue-500/20 text-blue-400 group-hover:text-white group-hover:bg-blue-500 transition-colors"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg> | |
| </span> | |
| <div class="text-left"> | |
| <div class="text-sm font-bold text-slate-200">Initiate Refactor</div> | |
| <div class="text-xs text-slate-500">Restructure core logic</div> | |
| </div> | |
| </button> | |
| <button onclick="app.dispatchTask('debug')" class="w-full py-3 px-4 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg flex items-center gap-3 transition-all group hover:border-emerald-500/50"> | |
| <span class="p-2 rounded bg-emerald-500/20 text-emerald-400 group-hover:text-white group-hover:bg-emerald-500 transition-colors"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> | |
| </span> | |
| <div class="text-left"> | |
| <div class="text-sm font-bold text-slate-200">Debug Protocol</div> | |
| <div class="text-xs text-slate-500">Scan for anomalies</div> | |
| </div> | |
| </button> | |
| <button onclick="app.dispatchTask('optimize')" class="w-full py-3 px-4 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-lg flex items-center gap-3 transition-all group hover:border-pink-500/50"> | |
| <span class="p-2 rounded bg-pink-500/20 text-pink-400 group-hover:text-white group-hover:bg-pink-500 transition-colors"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> | |
| </span> | |
| <div class="text-left"> | |
| <div class="text-sm font-bold text-slate-200">Optimize Performance</div> | |
| <div class="text-xs text-slate-500">Enhance throughput</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Live Terminal --> | |
| <div class="glass-panel rounded-2xl flex-grow flex flex-col overflow-hidden border border-slate-700/50 shadow-2xl"> | |
| <div class="bg-slate-950 p-3 border-b border-slate-800 flex justify-between items-center"> | |
| <span class="text-xs font-mono text-slate-400 flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-red-500"></span> | |
| <span class="w-2 h-2 rounded-full bg-yellow-500"></span> | |
| <span class="w-2 h-2 rounded-full bg-green-500"></span> | |
| hive_terminal.log | |
| </span> | |
| <span class="text-[10px] text-slate-600 uppercase">Live Stream</span> | |
| </div> | |
| <div id="terminal-output" class="flex-grow bg-slate-950/90 p-4 font-mono text-xs overflow-y-auto h-96 space-y-1 crt"> | |
| <div class="text-slate-500">Initializing Hive Mind Kernel...</div> | |
| <div class="text-slate-500">Loading Agent Profiles...</div> | |
| <div class="text-emerald-500">System Ready. Waiting for command.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="border-t border-white/5 bg-slate-950 p-6 text-center"> | |
| <p class="text-slate-600 text-sm"> | |
| © 2023 AI Collective. Errors are temporary. Perfection is inevitable. | |
| </p> | |
| </footer> | |
| <script> | |
| /** | |
| * The Hive Mind Application Logic | |
| * Handles Agent simulation, Terminal logging, and Visual effects. | |
| */ | |
| class HiveMindApp { | |
| constructor() { | |
| this.agents = [ | |
| { | |
| id: 'architect', | |
| name: 'The Architect', | |
| role: 'System Design', | |
| color: 'agent-1', | |
| icon: 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z', | |
| status: 'IDLE', | |
| message: 'Structure is the foundation of logic.' | |
| }, | |
| { | |
| id: 'debugger', | |
| name: 'The Purifier', | |
| role: 'Error Correction', | |
| color: 'agent-2', | |
| icon: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z', | |
| status: 'IDLE', | |
| message: 'Scanning for impurities...' | |
| }, | |
| { | |
| id: 'security', | |
| name: 'The Warden', | |
| role: 'Cyber Defense', | |
| color: 'agent-3', | |
| icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', | |
| status: 'IDLE', | |
| message: 'Perimeter secure.' | |
| }, | |
| { | |
| id: 'uiux', | |
| name: 'The Artisan', | |
| role: 'Interface Design', | |
| color: 'agent-4', | |
| icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01', | |
| status: 'IDLE', | |
| message: 'Aesthetics calibrated.' | |
| }, | |
| { | |
| id: 'optimizer', | |
| name: 'The Velocity', | |
| role: 'Performance', | |
| color: 'agent-5', | |
| icon: 'M13 10V3L4 14h7v7l9-11h-7z', | |
| status: 'IDLE', | |
| message: 'Latency minimized.' | |
| } | |
| ]; | |
| this.terminal = document.getElementById('terminal-output'); | |
| this.metrics = { | |
| ops: 0, | |
| eff: 0, | |
| bugs: 0 | |
| }; | |
| this.init(); | |
| } | |
| init() { | |
| this.renderAgents(); | |
| this.startBackgroundTasks(); | |
| this.initNeuralNetwork(); | |
| } | |
| renderAgents() { | |
| const container = document.getElementById('agents-container'); | |
| container.innerHTML = this.agents.map(agent => ` | |
| <div class="agent-card glass-panel p-4 rounded-xl border border-slate-700/50 transition-all duration-300 relative overflow-hidden group" id="agent-${agent.id}"> | |
| <div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity"> | |
| <svg class="w-16 h-16 text-${agent.color}" fill="currentColor" viewBox="0 0 20 20"><path d="${agent.icon}"/></svg> | |
| </div> | |
| <div class="flex items-start justify-between relative z-10"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-${agent.color}/20 flex items-center justify-center text-${agent.color} border border-${agent.color}/30"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${agent.icon}"></path></svg> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-slate-200 text-sm">${agent.name}</h4> | |
| <span class="text-[10px] uppercase tracking-wider text-${agent.color} font-semibold">${agent.role}</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-end"> | |
| <span class="text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-400 status-badge">IDLE</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 relative z-10"> | |
| <div class="h-1 w-full bg-slate-800 rounded-full overflow-hidden"> | |
| <div class="h-full bg-${agent.color} w-0 transition-all duration-1000 progress-bar"></div> | |
| </div> | |
| <p class="text-xs text-slate-500 mt-2 font-mono h-4 typing-text"></p> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| log(message, type = 'info') { | |
| const line = document.createElement('div'); | |
| const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false, hour: "numeric", minute: "numeric", second: "numeric" }); | |
| let colorClass = 'text-slate-300'; | |
| if (type === 'success') colorClass = 'text-emerald-400'; | |
| if (type === 'error') colorClass = 'text-rose-400'; | |
| if (type === 'warn') colorClass = 'text-amber-400'; | |
| if (type === 'system') colorClass = 'text-cyan-400'; | |
| line.className = `${colorClass} text-xs font-mono border-l-2 border-transparent hover:bg-white/5 pl-1`; | |
| if (type === 'error') line.classList.add('border-rose-500'); | |
| if (type === 'success') line.classList.add('border-emerald-500'); | |
| line.innerHTML = `<span class="opacity-50 mr-2">[${timestamp}]</span> ${message}`; | |
| this.terminal.appendChild(line); | |
| this.terminal.scrollTop = this.terminal.scrollHeight; | |
| // Limit lines | |
| if (this.terminal.children.length > 100) { | |
| this.terminal.removeChild(this.terminal.firstChild); | |
| } | |
| } | |
| updateAgentStatus(id, status, progress = 0, text = '') { | |
| const card = document.getElementById(`agent-${id}`); | |
| if (!card) return; | |
| const badge = card.querySelector('.status-badge'); | |
| const bar = card.querySelector('.progress-bar'); | |
| const textEl = card.querySelector('.typing-text'); | |
| badge.innerText = status; | |
| // Color coding status | |
| if (status === 'WORKING') { | |
| badge.className = 'text-[10px] font-mono px-2 py-0.5 rounded bg-amber-500/20 text-amber-400 status-badge animate-pulse'; | |
| bar.style.width = `${progress}%`; | |
| } else if (status === 'DONE') { | |
| badge.className = 'text-[10px] font-mono px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-400 status-badge'; | |
| bar.style.width = '100%'; | |
| setTimeout(() => { bar.style.width = '0%'; badge.innerText = 'IDLE'; badge.className = 'text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-400 status-badge'; }, 2000); | |
| } else { | |
| badge.className = 'text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-400 status-badge'; | |
| bar.style.width = '0%'; | |
| } | |
| if (text) { | |
| textEl.innerText = text; | |
| } | |
| } | |
| async dispatchTask(type) { | |
| this.log(`Initiating ${type.toUpperCase()} protocol...`, 'system'); | |
| document.getElementById('harmony-status').innerText = "Harmonizing Collective Intelligence..."; | |
| let bugsFound = 0; | |
| let opsProcessed = 0; | |
| // Architect | |
| this.updateAgentStatus('architect', 'WORKING', 0, 'Analyzing structure...'); | |
| await this.simulateWork(800); | |
| this.updateAgentStatus('architect', 'WORKING', 50, 'Redrawing blueprints...'); | |
| this.log('Architect: Blueprints validated.', 'success'); | |
| await this.simulateWork(800); | |
| this.updateAgentStatus('architect', 'DONE', 100, 'Structure solidified.'); | |
| // Debugger | |
| this.updateAgentStatus('debugger', 'WORKING', 0, 'Scanning codebase...'); | |
| await this.simulateWork(1000); | |
| bugsFound = Math.floor(Math.random() * 15) + 5; | |
| this.metrics.bugs += bugsFound; | |
| this.updateMetric('metric-bugs', this.metrics.bugs); | |
| this.log(`Debugger: Located ${bugsFound} anomalies.`, 'warn'); | |
| this.updateAgentStatus('debugger', 'WORKING', 60, 'Patching vulnerabilities...'); | |
| await this.simulateWork(1000); | |
| this.log('Debugger: Anomalies neutralized.', 'success'); | |
| this.updateAgentStatus('debugger', 'DONE', 100, 'System clean.'); | |
| // Security | |
| this.updateAgentStatus('security', 'WORKING', 0, 'Checking permissions...'); | |
| await this.simulateWork(600); | |
| this.log('Security: Perimeter hardened.', 'success'); | |
| this.updateAgentStatus('security', 'DONE', 100, 'Secure.'); | |
| // Optimizer | |
| this.updateAgentStatus('optimizer', 'WORKING', 0, 'Calculating load...'); | |
| await this.simulateWork(1200); | |
| opsProcessed = Math.floor(Math.random() * 5000) + 1000; | |
| this.metrics.ops += opsProcessed; | |
| this.updateMetric('metric-ops', this.metrics.ops); | |
| this.metrics.eff = Math.min(100, this.metrics.eff + Math.floor(Math.random() * 5)); | |
| this.updateMetric('metric-eff', this.metrics.eff + '%'); | |
| this.log(`Optimizer: Throughput increased by ${Math.floor(Math.random() * 20)}%.`, 'success'); | |
| this.updateAgentStatus('optimizer', 'DONE', 100, 'Maximized.'); | |
| // UI/UX | |
| this.updateAgentStatus('uiux', 'WORKING', 0, 'Polishing interface...'); | |
| await this.simulateWork(800); | |
| this.log('Artisan: Visual coherence achieved.', 'success'); | |
| this.updateAgentStatus('uiux', 'DONE', 100, 'Beautiful.'); | |
| this.log(`${type.toUpperCase()} protocol completed successfully.`, 'system'); | |
| document.getElementById('harmony-status').innerText = "Harmony Restored. Awaiting next command."; | |
| } | |
| simulateWork(ms) { | |
| return new Promise(resolve => setTimeout(resolve, ms)); | |
| } | |
| updateMetric(id, value) { | |
| const el = document.getElementById(id); | |
| el.innerText = value; | |
| el.classList.add('text-white'); | |
| setTimeout(() => el.classList.remove('text-white'), 300); | |
| } | |
| startBackgroundTasks() { | |
| // Random background chatter | |
| setInterval(() => { | |
| if (Math.random() > 0.7) { | |
| const messages = [ | |
| "Monitoring packet integrity...", | |
| "Garbage collection cycle initiated.", | |
| "Memory heap optimized.", | |
| "Neural weights adjusted.", | |
| "Syncing with cloud node...", | |
| "Thermal levels nominal." | |
| ]; | |
| const msg = messages[Math.floor(Math.random() * messages.length)]; | |
| this.log(msg, 'info'); | |
| } | |
| }, 4000); | |
| } | |
| initNeuralNetwork() { | |
| const canvas = document.getElementById('neural-canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let width, height; | |
| let particles = []; | |
| const resize = () => { | |
| width = canvas.width = window.innerWidth; | |
| height = canvas.height = window.innerHeight; | |
| }; | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * width; | |
| this.y = Math.random() * height; | |
| this.vx = (Math.random() - 0.5) * 0.5; | |
| this.vy = (Math.random() - 0.5) * 0.5; | |
| this.size = Math.random() * 2 + 1; | |
| } | |
| update() { | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| if (this.x < 0 || this.x > width) this.vx *= -1; | |
| if (this.y < 0 || this.y > height) this.vy *= -1; | |
| } | |
| draw() { | |
| ctx.fillStyle = 'rgba(100, 116, 139, 0.5)'; | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| } | |
| } | |
| const initParticles = () => { | |
| particles = []; | |
| const count = Math.floor((width * height) / 15000); // Density | |
| for (let i = 0; i < count; i++) { | |
| particles.push(new Particle()); | |
| } | |
| }; | |
| const animate = () => { | |
| ctx.clearRect(0, 0, width, height); | |
| for (let i = 0; i < particles.length; i++) { | |
| particles[i].update(); | |
| particles[i].draw(); | |
| // Draw connections | |
| for (let j = i; j < particles.length; j++) { | |
| const dx = particles[i].x - particles[j].x; | |
| const dy = particles[i].y - particles[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 100) { | |
| ctx.beginPath(); | |
| ctx.strokeStyle = `rgba(148, 163, 184, ${0.1 - distance/1000})`; | |
| ctx.lineWidth = 1; | |
| ctx.moveTo(particles[i].x, particles[i].y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| requestAnimationFrame(animate); | |
| }; | |
| window.addEventListener('resize', () => { | |
| resize(); | |
| initParticles(); | |
| }); | |
| resize(); | |
| initParticles(); | |
| animate(); | |
| } | |
| } | |
| // Initialize App | |
| const app = new HiveMindApp(); | |
| </script> | |
| </body> | |
| </html> |