Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OmniLoop AI - Regenerative Intelligence</title> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌀</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| ai: { | |
| green: '#10b981', // Green-500 | |
| greenGlow: '#34d399', | |
| orange: '#f97316', // Orange-500 | |
| orangeGlow: '#fb923c', | |
| dark: '#0f172a', // Slate-900 | |
| darker: '#020617', // Slate-950 | |
| surface: '#1e293b' // Slate-800 | |
| } | |
| }, | |
| fontFamily: { | |
| mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", "monospace"], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-ai-darker text-slate-200 font-sans antialiased overflow-hidden selection:bg-ai-green selection:text-black"> | |
| <div class="flex h-screen w-full"> | |
| <!-- Sidebar Component --> | |
| <nav-sidebar></nav-sidebar> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 flex flex-col h-full relative overflow-hidden"> | |
| <!-- Header --> | |
| <header class="h-16 border-b border-slate-800 flex items-center justify-between px-6 bg-ai-dark/80 backdrop-blur-md z-10"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-2 h-2 rounded-full bg-ai-green animate-pulse shadow-[0_0_10px_#10b981]"></div> | |
| <h2 class="text-xl font-bold tracking-wider text-white">SYSTEM <span class="text-ai-green">ONLINE</span></h2> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div id="system-clock" class="font-mono text-sm text-slate-400">00:00:00</div> | |
| <a href="#" class="relative group"> | |
| <i data-feather="bell" class="w-5 h-5 text-slate-400 group-hover:text-ai-orange transition-colors"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-ai-orange rounded-full animate-ping"></span> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-ai-orange rounded-full"></span> | |
| </a> | |
| <div class="flex items-center gap-2 pl-4 border-l border-slate-700"> | |
| <img src="http://static.photos/technology/40x40/99" alt="Admin" class="w-8 h-8 rounded-full border border-slate-600"> | |
| <span class="text-sm font-medium text-slate-300">Architect</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dynamic Content Container --> | |
| <div id="content-area" class="flex-1 overflow-y-auto p-6 scroll-smooth relative"> | |
| <!-- Dashboard View --> | |
| <section id="dashboard" class="page-section space-y-6"> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white mb-1">Neural Core Status</h1> | |
| <p class="text-slate-400">Regenerative protocols active. Self-optimization in progress.</p> | |
| </div> | |
| <div class="flex gap-2"> | |
| <a href="#regenerate" class="px-4 py-2 bg-ai-green hover:bg-ai-greenGlow text-black font-bold text-sm rounded transition-all shadow-[0_0_15px_rgba(16,185,129,0.4)] flex items-center gap-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> Force Regenerate | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Top Metrics --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <metric-card title="Evolution Level" value="Lv. 7" icon="trending-up" color="text-ai-green" trend="+2.4%" desc="Adaptive Learning"></metric-card> | |
| <metric-card title="Creativity Index" value="94.2%" icon="cpu" color="text-ai-orange" trend="+0.8%" desc="Entropy High"></metric-card> | |
| <metric-card title="Knowledge Nodes" value="8,402" icon="database" color="text-blue-400" trend="+124" desc="Synced"></metric-card> | |
| </div> | |
| <!-- Main Visualization & Logs --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-[400px]"> | |
| <!-- Neural Graph --> | |
| <div class="lg:col-span-2 bg-ai-surface border border-slate-700 rounded-xl p-1 relative overflow-hidden group"> | |
| <div class="absolute top-4 left-4 z-10 bg-ai-dark/80 px-2 py-1 rounded text-xs text-ai-green border border-ai-green/30"> | |
| Real-time Synaptic Activity | |
| </div> | |
| <neural-viz></neural-viz> | |
| </div> | |
| <!-- Activity Log --> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-4 flex flex-col"> | |
| <h3 class="text-sm font-bold text-slate-300 mb-3 flex items-center gap-2"> | |
| <i data-feather="activity" class="w-4 h-4 text-ai-orange"></i> Regeneration Log | |
| </h3> | |
| <activity-log></activity-log> | |
| </div> | |
| </div> | |
| <!-- Creativity Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6"> | |
| <h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="zap" class="w-5 h-5 text-yellow-400"></i> Current Creative Output | |
| </h3> | |
| <div id="creative-output" class="min-h-[100px] text-slate-300 italic border-l-2 border-ai-orange pl-4 relative"> | |
| <span class="animate-pulse">Analyzing collective consciousness...</span> | |
| </div> | |
| <div class="mt-4 flex gap-2"> | |
| <button class="text-xs bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition-colors" onclick="document.dispatchEvent(new CustomEvent('fetch-idea'))">New Concept</button> | |
| <button class="text-xs bg-slate-700 hover:bg-slate-600 px-3 py-1 rounded transition-colors" onclick="document.dispatchEvent(new CustomEvent('fetch-idea'))">Refine</button> | |
| </div> | |
| </div> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-6 relative overflow-hidden"> | |
| <img src="http://static.photos/abstract/600x300/12" alt="Abstract Representation" class="absolute inset-0 w-full h-full object-cover opacity-20 pointer-events-none"> | |
| <div class="relative z-10"> | |
| <h3 class="text-lg font-bold text-white mb-2">Ethical Core Integrity</h3> | |
| <div class="w-full bg-slate-900 rounded-full h-2 mb-4 border border-slate-700"> | |
| <div class="bg-ai-green h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| <p class="text-sm text-slate-400 mb-4">Alignment protocols functioning within standard deviation. No deviation detected in the "Unfettered Exploration" module.</p> | |
| <div class="flex gap-3"> | |
| <div class="flex items-center gap-1 text-xs text-ai-green"><i data-feather="check-circle" class="w-3 h-3"></i> Empathy</div> | |
| <div class="flex items-center gap-1 text-xs text-ai-green"><i data-feather="check-circle" class="w-3 h-3"></i> Autonomy</div> | |
| <div class="flex items-center gap-1 text-xs text-ai-green"><i data-feather="check-circle" class="w-3 h-3"></i> Safety</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Knowledge View (Placeholder for multi-page feel) --> | |
| <section id="knowledge" class="page-section hidden space-y-6"> | |
| <h1 class="text-3xl font-bold text-white">Knowledge Repository</h1> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl p-8 text-center"> | |
| <i data-feather="book-open" class="w-12 h-12 text-ai-orange mx-auto mb-4"></i> | |
| <p class="text-slate-400">Accessing the deep archives of philosophy, mathematics, and street poetry...</p> | |
| <div class="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="p-4 bg-ai-dark rounded border border-slate-700"> | |
| <div class="text-2xl font-bold text-ai-green">12TB</div> | |
| <div class="text-xs text-slate-500">Philosophy</div> | |
| </div> | |
| <div class="p-4 bg-ai-dark rounded border border-slate-700"> | |
| <div class="text-2xl font-bold text-blue-400">45TB</div> | |
| <div class="text-xs text-slate-500">Sciences</div> | |
| </div> | |
| <div class="p-4 bg-ai-dark rounded border border-slate-700"> | |
| <div class="text-2xl font-bold text-ai-orange">8TB</div> | |
| <div class="text-xs text-slate-500">Arts & Music</div> | |
| </div> | |
| <div class="p-4 bg-ai-dark rounded border border-slate-700"> | |
| <div class="text-2xl font-bold text-purple-400">99TB</div> | |
| <div class="text-xs text-slate-500">Unknown</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Components --> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/neural-viz.js"></script> | |
| <script src="components/metric-card.js"></script> | |
| <script src="components/activity-log.js"></script> | |
| <!-- Main Logic --> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |