Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Training - OmniLoop AI</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> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| ai: { | |
| green: '#10b981', | |
| greenGlow: '#34d399', | |
| orange: '#f97316', | |
| orangeGlow: '#fb923c', | |
| dark: '#0f172a', | |
| darker: '#020617', | |
| surface: '#1e293b' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </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"> | |
| <nav-sidebar></nav-sidebar> | |
| <main class="flex-1 flex flex-col h-full relative overflow-hidden"> | |
| <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-purple-500 animate-pulse shadow-[0_0_10px_#a855f7]"></div> | |
| <h2 class="text-xl font-bold tracking-wider text-white">NEURAL <span class="text-purple-500">TRAINING</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> | |
| </div> | |
| </header> | |
| <div id="content-area" class="flex-1 overflow-y-auto p-6 scroll-smooth"> | |
| <section class="space-y-6"> | |
| <div class="flex justify-between items-end"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-white mb-1">Model Training Center</h1> | |
| <p class="text-slate-400">Manage training jobs, datasets, and model versions</p> | |
| </div> | |
| <button class="px-4 py-2 bg-purple-600 hover:bg-purple-500 text-white font-bold text-sm rounded transition-all flex items-center gap-2"> | |
| <i data-feather="plus" class="w-4 h-4"></i> New Training Job | |
| </button> | |
| </div> | |
| <!-- Active Training Job --> | |
| <div class="bg-ai-surface border border-purple-500/30 rounded-xl p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-3 h-3 bg-purple-500 rounded-full animate-pulse"></div> | |
| <h3 class="text-lg font-bold text-white">Active Training Job: OmniLoop-v4.2</h3> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="px-3 py-1 bg-yellow-600 hover:bg-yellow-500 text-white text-xs rounded">Pause</button> | |
| <button class="px-3 py-1 bg-red-600 hover:bg-red-500 text-white text-xs rounded">Stop</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div> | |
| <p class="text-slate-400 text-sm">Epoch</p> | |
| <p class="text-2xl font-bold text-white">847 / 1000</p> | |
| </div> | |
| <div> | |
| <p class="text-slate-400 text-sm">Loss</p> | |
| <p class="text-2xl font-bold text-ai-green">0.0234</p> | |
| </div> | |
| <div> | |
| <p class="text-slate-400 text-sm">Accuracy</p> | |
| <p class="text-2xl font-bold text-blue-400">98.7%</p> | |
| </div> | |
| <div> | |
| <p class="text-slate-400 text-sm">ETA</p> | |
| <p class="text-2xl font-bold text-white">4h 32m</p> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900 rounded-lg p-4 h-64"> | |
| <chart-viz type="training" id="training-chart"></chart-viz> | |
| </div> | |
| </div> | |
| <!-- Training Queue --> | |
| <div class="grid grid-cols-1 lg: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="list" class="w-5 h-5 text-slate-400"></i> Training Queue | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-slate-700/50 rounded border border-slate-600 flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium text-white">NLP-Finetune-v3</p> | |
| <p class="text-xs text-slate-400">Queued • Dataset: 50GB</p> | |
| </div> | |
| <span class="px-2 py-1 bg-slate-600 text-xs rounded">Waiting</span> | |
| </div> | |
| <div class="p-3 bg-slate-700/50 rounded border border-slate-600 flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium text-white">Vision-Encoder-Retrain</p> | |
| <p class="text-xs text-slate-400">Queued • Dataset: 200GB</p> | |
| </div> | |
| <span class="px-2 py-1 bg-slate-600 text-xs rounded">Waiting</span> | |
| </div> | |
| <div class="p-3 bg-slate-700/50 rounded border border-slate-600 flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium text-white">Multimodal-Fusion-Exp</p> | |
| <p class="text-xs text-slate-400">Scheduled • Tomorrow 02:00</p> | |
| </div> | |
| <span class="px-2 py-1 bg-blue-900/50 text-blue-400 text-xs rounded">Scheduled</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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="check-circle" class="w-5 h-5 text-ai-green"></i> Completed Jobs | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-slate-700/50 rounded border border-slate-600 flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium text-white">OmniLoop-v4.1</p> | |
| <p class="text-xs text-slate-400">Completed • Final Loss: 0.0189</p> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="text-xs text-ai-green hover:underline">Deploy</button> | |
| <button class="text-xs text-slate-400 hover:underline">Details</button> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-slate-700/50 rounded border border-slate-600 flex justify-between items-center"> | |
| <div> | |
| <p class="font-medium text-white">Embedding-Model-v2</p> | |
| <p class="text-xs text-slate-400">Completed • Final Loss: 0.0456</p> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button class="text-xs text-ai-green hover:underline">Deploy</button> | |
| <button class="text-xs text-slate-400 hover:underline">Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Terminal Output --> | |
| <div class="bg-ai-surface border border-slate-700 rounded-xl overflow-hidden"> | |
| <div class="flex items-center justify-between px-4 py-2 bg-slate-800 border-b border-slate-700"> | |
| <h3 class="text-sm font-bold text-white">Training Logs</h3> | |
| <div class="flex gap-2"> | |
| <button class="text-xs text-slate-400 hover:text-white">Clear</button> | |
| <button class="text-xs text-slate-400 hover:text-white">Download</button> | |
| </div> | |
| </div> | |
| <terminal-console id="training-terminal" height="300"></terminal-console> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/chart-viz.js"></script> | |
| <script src="components/terminal.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |