Initial commit: AI-Trainer Unsloth MoE & GRPO Control Center with Web Dashboard and Pipeline Scripts
This commit is contained in:
drjones
306
public/index.html
Normal file
306
public/index.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI-Trainer | Unsloth MoE & GRPO Control Center</title>
|
||||
|
||||
<!-- Google Fonts & FontAwesome / Lucide -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
|
||||
<!-- Chart.js CDN -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body class="bg-dark text-light antialiased overflow-x-hidden">
|
||||
|
||||
<!-- Loading Screen Overlay -->
|
||||
<div id="loadingOverlay" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center transition-opacity duration-500 opacity-0 pointer-events-none">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="w-24 h-24 border-4 border-cyan-500/20 border-t-cyan-400 rounded-full animate-spin"></div>
|
||||
<div class="absolute w-16 h-16 border-4 border-violet-500/20 border-b-violet-400 rounded-full animate-spin-reverse"></div>
|
||||
<i class="fa-solid fa-brain text-2xl text-cyan-400 animate-pulse"></i>
|
||||
</div>
|
||||
<h3 class="mt-6 text-xl font-bold tracking-wider text-cyan-400 uppercase font-outfit" id="loadingTitle">Initializing Neural Environment...</h3>
|
||||
<p class="text-sm text-slate-400 mt-2 font-mono" id="loadingSubtext">Loading Unsloth Triton Kernels & MoE Router Maps</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Container Layout -->
|
||||
<div class="min-h-screen flex flex-col">
|
||||
|
||||
<!-- Top Navigation & Status Bar -->
|
||||
<header class="border-b border-slate-800 bg-slate-950/80 backdrop-blur-xl sticky top-0 z-40 px-6 py-3 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 via-violet-600 to-fuchsia-600 p-[1px] shadow-lg shadow-cyan-500/20">
|
||||
<div class="w-full h-full bg-slate-950 rounded-[11px] flex items-center justify-center">
|
||||
<i class="fa-solid fa-microchip text-cyan-400 text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-lg font-black tracking-tight font-outfit text-white">AI-TRAINER</h1>
|
||||
<span class="px-2 py-0.5 text-[10px] font-extrabold tracking-wider bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 rounded-full uppercase">UNSLOTH GRPO MOE</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-400 font-mono">Proxify-ADB Fleet Orchestrator & MoE Pruner</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Telemetry Quick Gauges -->
|
||||
<div class="flex items-center gap-6 bg-slate-900/60 border border-slate-800 px-4 py-1.5 rounded-xl text-xs font-mono">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-memory text-cyan-400"></i>
|
||||
<span class="text-slate-400">VRAM:</span>
|
||||
<span class="font-bold text-cyan-300" id="gaugeVram">6.2 / 16.0 GB</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-800"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-server text-violet-400"></i>
|
||||
<span class="text-slate-400">RAM:</span>
|
||||
<span class="font-bold text-violet-300" id="gaugeRam">34.5 / 64.0 GB</span>
|
||||
</div>
|
||||
<div class="w-px h-4 bg-slate-800"></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="fa-solid fa-[#00FF9D] fa-mobile-screen-button text-emerald-400"></i>
|
||||
<span class="text-slate-400">ADB Fleet:</span>
|
||||
<span class="font-bold text-emerald-400" id="gaugeAdb">14 / 14 Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button Group -->
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="btnStartPipeline" class="btn btn-emerald">
|
||||
<i class="fa-solid fa-play"></i> Run Pipeline
|
||||
</button>
|
||||
<button id="btnStopPipeline" class="btn btn-rose" disabled>
|
||||
<i class="fa-solid fa-square"></i> Stop
|
||||
</button>
|
||||
<button id="btnOpenKnobs" class="btn btn-ghost">
|
||||
<i class="fa-solid fa-sliders"></i> Tuning Knobs
|
||||
</button>
|
||||
<button id="btnSyncGitea" class="btn btn-purple">
|
||||
<i class="fa-solid fa-code-branch"></i> Push to Gitea
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Workspace Grid -->
|
||||
<main class="flex-1 p-6 space-y-6 max-w-[1920px] mx-auto w-full pb-72">
|
||||
|
||||
<!-- Visual Pipeline Flow Canvas Container -->
|
||||
<section class="glass-panel p-6 rounded-2xl relative overflow-hidden">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-base font-bold font-outfit text-white flex items-center gap-2">
|
||||
<i class="fa-solid fa-diagram-project text-cyan-400"></i>
|
||||
AUTONOMOUS FINE-TUNING PIPELINE VISUALIZER
|
||||
</h2>
|
||||
<p class="text-xs text-slate-400">Interactive execution path with dynamic layer pruning & execution rewards</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-xs font-mono">
|
||||
<span class="status-badge status-idle" id="pipelineStatusBadge">STATUS: IDLE</span>
|
||||
<span class="text-slate-400">Progress: <strong class="text-white" id="overallProgressText">0%</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Canvas Pipeline Graph -->
|
||||
<div class="relative w-full h-[220px] bg-slate-950/60 rounded-xl border border-slate-800/80 overflow-hidden">
|
||||
<canvas id="pipelineCanvas" class="w-full h-full block"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dashboard Telemetry Grid (2 Columns) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
|
||||
<!-- Column 1: GRPO Reward Convergence Chart & MoE Distribution (7 cols) -->
|
||||
<div class="lg:col-span-7 space-y-6">
|
||||
|
||||
<!-- GRPO Reward Convergence Card -->
|
||||
<div class="glass-panel p-5 rounded-2xl">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-bold font-outfit text-white flex items-center gap-2">
|
||||
<i class="fa-solid fa-chart-line text-emerald-400"></i>
|
||||
UNSLOTH GRPO HARD EXECUTION REWARD CONVERGENCE
|
||||
</h3>
|
||||
<span class="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
|
||||
Step <span id="grpoStepVal">0</span> / 300
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-[220px] w-full">
|
||||
<canvas id="grpoChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MoE Expert Pruning Distribution Card -->
|
||||
<div class="glass-panel p-5 rounded-2xl">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-bold font-outfit text-white flex items-center gap-2">
|
||||
<i class="fa-solid fa-scissors text-amber-400"></i>
|
||||
DOMAIN MoE EXPERT RETENTION VS PRUNED TRIVIA EXPERTS
|
||||
</h3>
|
||||
<span class="text-xs font-mono text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
|
||||
Retained: <strong id="retainedExpertsVal">64</strong> / 256
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-[180px] w-full">
|
||||
<canvas id="moeChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Fleet Topology & Script Code Inspector (5 cols) -->
|
||||
<div class="lg:col-span-5 space-y-6">
|
||||
|
||||
<!-- Fleet & Proxmox Bridge Network Status Card -->
|
||||
<div class="glass-panel p-5 rounded-2xl">
|
||||
<h3 class="text-sm font-bold font-outfit text-white flex items-center gap-2 mb-3">
|
||||
<i class="fa-solid fa-network-wired text-cyan-400"></i>
|
||||
10.30.20.0/24 PROXMOX FLEET TOPOLOGY
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 text-xs font-mono mb-4">
|
||||
<div class="bg-slate-900/80 border border-slate-800 p-3 rounded-xl">
|
||||
<span class="text-slate-400 block text-[11px]">Control Gateway</span>
|
||||
<strong class="text-cyan-300 text-sm">10.30.20.1</strong>
|
||||
<div class="mt-1 text-[10px] text-slate-500">vmbr1 (Isolated Bridge)</div>
|
||||
</div>
|
||||
<div class="bg-slate-900/80 border border-slate-800 p-3 rounded-xl">
|
||||
<span class="text-slate-400 block text-[11px]">DHCP Pool</span>
|
||||
<strong class="text-violet-300 text-sm">.100 - .254</strong>
|
||||
<div class="mt-1 text-[10px] text-slate-500">dnsmasq 12h Leases</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active VM Fleet Node Grid -->
|
||||
<div class="space-y-2 max-h-[180px] overflow-y-auto custom-scrollbar pr-1" id="fleetNodeList">
|
||||
<!-- Dynamically Populated Fleet Cards -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Python Script Viewer & Sandbox Card -->
|
||||
<div class="glass-panel p-5 rounded-2xl flex flex-col h-[280px]">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h3 class="text-sm font-bold font-outfit text-white flex items-center gap-2">
|
||||
<i class="fa-brands fa-python text-yellow-400"></i>
|
||||
PIPELINE SCRIPT INSPECTOR
|
||||
</h3>
|
||||
<select id="scriptSelector" class="bg-slate-900 border border-slate-800 text-xs font-mono text-cyan-400 px-2 py-1 rounded">
|
||||
<option value="harvester.py">harvester.py</option>
|
||||
<option value="prune_moe.py">prune_moe.py</option>
|
||||
<option value="harness_env.py">harness_env.py</option>
|
||||
<option value="train_grpo.py">train_grpo.py</option>
|
||||
<option value="deploy.py">deploy.py</option>
|
||||
<option value="state_eye.py">state_eye.py</option>
|
||||
</select>
|
||||
</div>
|
||||
<pre class="flex-1 bg-slate-950 p-3 rounded-xl border border-slate-900 text-xs font-mono text-slate-300 overflow-auto custom-scrollbar leading-relaxed" id="scriptCodeView"># Loading script content...</pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Bottom Collapsible Rolling Cyber Terminal -->
|
||||
<div id="terminalContainer" class="fixed bottom-0 left-0 right-0 z-30 bg-slate-950/95 border-t border-slate-800/90 shadow-2xl backdrop-blur-2xl transition-all duration-300">
|
||||
|
||||
<!-- Terminal Controls & Header Bar -->
|
||||
<div class="px-6 py-2.5 bg-slate-900/90 border-b border-slate-800 flex items-center justify-between gap-4 text-xs font-mono">
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="btnToggleTerminal" class="text-slate-400 hover:text-white transition">
|
||||
<i class="fa-solid fa-chevron-down" id="terminalChevron"></i>
|
||||
</button>
|
||||
<span class="font-bold text-cyan-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-terminal"></i> LIVE LOG STREAM
|
||||
</span>
|
||||
<span class="bg-slate-800 px-2 py-0.5 rounded text-[10px] text-slate-400" id="logCountBadge">0 Logs</span>
|
||||
</div>
|
||||
|
||||
<!-- Filter & Search Controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1 bg-slate-950 px-2 py-1 rounded border border-slate-800">
|
||||
<span class="text-slate-500 text-[10px]">Filter:</span>
|
||||
<button class="log-filter-btn active" data-filter="ALL">ALL</button>
|
||||
<button class="log-filter-btn" data-filter="INFO">INFO</button>
|
||||
<button class="log-filter-btn" data-filter="HARNESS">HARNESS</button>
|
||||
<button class="log-filter-btn" data-filter="REWARD">REWARD</button>
|
||||
<button class="log-filter-btn" data-filter="WARN">WARN</button>
|
||||
</div>
|
||||
|
||||
<button id="btnAutoScroll" class="px-2 py-1 rounded bg-cyan-500/10 text-cyan-400 border border-cyan-500/30 text-[11px] font-bold">
|
||||
<i class="fa-solid fa-angles-down"></i> Auto-Scroll
|
||||
</button>
|
||||
<button id="btnClearLogs" class="px-2 py-1 rounded bg-slate-800 text-slate-400 hover:text-white text-[11px]">
|
||||
<i class="fa-solid fa-trash-can"></i> Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log Output Scroll Container -->
|
||||
<div id="terminalBody" class="h-56 p-4 font-mono text-xs overflow-y-auto space-y-1 custom-scrollbar bg-slate-950/90 select-text">
|
||||
<!-- Log Lines Streamed Here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuning Knobs Modal -->
|
||||
<div id="knobsModal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300">
|
||||
<div class="glass-panel max-w-lg w-full p-6 rounded-2xl border border-slate-800 space-y-6">
|
||||
<div class="flex items-center justify-between border-b border-slate-800 pb-3">
|
||||
<h3 class="text-lg font-bold font-outfit text-white flex items-center gap-2">
|
||||
<i class="fa-solid fa-sliders text-cyan-400"></i> TUNING KNOBS & REWARD WEIGHTS
|
||||
</h3>
|
||||
<button id="btnCloseKnobs" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-lg"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-xs font-mono">
|
||||
<div>
|
||||
<label class="flex justify-between text-slate-300 mb-1">
|
||||
<span>Retained MoE Experts per Layer:</span>
|
||||
<strong class="text-cyan-400" id="knobExpertsVal">64 / 256</strong>
|
||||
</label>
|
||||
<input type="range" id="knobExperts" min="16" max="128" step="16" value="64" class="w-full accent-cyan-400">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex justify-between text-slate-300 mb-1">
|
||||
<span>Hard Execution Reward Weight ($w_1$):</span>
|
||||
<strong class="text-emerald-400" id="knobExecVal">3.0</strong>
|
||||
</label>
|
||||
<input type="range" id="knobExec" min="1.0" max="5.0" step="0.5" value="3.0" class="w-full accent-emerald-400">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex justify-between text-slate-300 mb-1">
|
||||
<span>Anti-Hesitation Penalty Weight ($w_2$):</span>
|
||||
<strong class="text-amber-400" id="knobHesitVal">2.0</strong>
|
||||
</label>
|
||||
<input type="range" id="knobHesit" min="0.5" max="4.0" step="0.5" value="2.0" class="w-full accent-amber-400">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex justify-between text-slate-300 mb-1">
|
||||
<span>Target VRAM Footprint:</span>
|
||||
<strong class="text-violet-400">16.0 GB (NVIDIA CUDA)</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 pt-3 border-t border-slate-800">
|
||||
<button id="btnSaveKnobs" class="btn btn-emerald w-full">Save & Apply Parameters</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/pipeline.js"></script>
|
||||
<script src="js/charts.js"></script>
|
||||
<script src="js/terminal.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user