Spaces:
Running
Running
File size: 10,512 Bytes
3bcb678 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html>
<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> |