Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DevOps RL Agent — AI Dashboard</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Sidebar Navigation --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-brand"> | |
| <div class="brand-logo"> | |
| <span class="logo-icon">⚡</span> | |
| </div> | |
| <div class="brand-text"> | |
| <h1>RL Agent</h1> | |
| <p>DevOps Troubleshooting</p> | |
| </div> | |
| </div> | |
| <nav class="sidebar-nav"> | |
| <button class="nav-btn active" data-tab="dashboard"> | |
| <span class="icon">📊</span> | |
| <span class="label">Dashboard</span> | |
| </button> | |
| <button class="nav-btn" data-tab="runner"> | |
| <span class="icon">▶️</span> | |
| <span class="label">Episode Runner</span> | |
| </button> | |
| <button class="nav-btn" data-tab="replay"> | |
| <span class="icon">🔄</span> | |
| <span class="label">Replay Viewer</span> | |
| </button> | |
| <button class="nav-btn" data-tab="scenarios"> | |
| <span class="icon">📋</span> | |
| <span class="label">Scenarios</span> | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div class="api-status-box"> | |
| <div class="status-indicator" id="api-status"></div> | |
| <span id="api-status-text">Connecting to API...</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content Area --> | |
| <main class="main-content"> | |
| <!-- Topbar --> | |
| <header class="topbar"> | |
| <h2 id="page-title">Training Dashboard</h2> | |
| <div class="topbar-actions"> | |
| <div class="stat-badge"> | |
| <span class="badge-dot pulse"></span> | |
| Model: unsloth/llama-3.2-3b | |
| </div> | |
| </div> | |
| </header> | |
| <div class="content-scroll"> | |
| <!-- Dashboard Tab --> | |
| <section class="tab-pane active" id="tab-dashboard"> | |
| <div class="kpi-grid"> | |
| <div class="kpi-card glass-panel"> | |
| <div class="kpi-header">Total Episodes</div> | |
| <div class="kpi-value highlight-cyan" id="stat-total-episodes">0</div> | |
| <div class="kpi-chart-mini"><canvas id="sparkline1"></canvas></div> | |
| </div> | |
| <div class="kpi-card glass-panel"> | |
| <div class="kpi-header">Overall Solve Rate</div> | |
| <div class="kpi-value highlight-green" id="stat-overall-solve-rate">0%</div> | |
| <div class="kpi-chart-mini"><canvas id="sparkline2"></canvas></div> | |
| </div> | |
| <div class="kpi-card glass-panel"> | |
| <div class="kpi-header">Mean Reward</div> | |
| <div class="kpi-value highlight-purple" id="stat-mean-reward">0.0</div> | |
| <div class="kpi-chart-mini"><canvas id="sparkline3"></canvas></div> | |
| </div> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <div class="panel glass-panel chart-panel"> | |
| <div class="panel-header"> | |
| <h3>Training Progression (Reward)</h3> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="rewardChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="panel glass-panel levels-panel"> | |
| <div class="panel-header"> | |
| <h3>Curriculum Levels</h3> | |
| </div> | |
| <div id="level-cards-container" class="level-cards-wrapper"> | |
| <!-- JS Injected --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Runner Tab --> | |
| <section class="tab-pane" id="tab-runner"> | |
| <div class="runner-layout"> | |
| <div class="panel glass-panel controls-panel"> | |
| <div class="panel-header"><h3>Launch Parameters</h3></div> | |
| <div class="control-group"> | |
| <label>Target Scenario</label> | |
| <select id="scenario-select" class="neon-select"> | |
| <option value="">(Random Scenario)</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label>Curriculum Level</label> | |
| <select id="level-select" class="neon-select"> | |
| <option value="">(Auto-Curriculum)</option> | |
| <option value="1">Level 1 - Single Step</option> | |
| <option value="2">Level 2 - Multi Step</option> | |
| <option value="3">Level 3 - Complex</option> | |
| </select> | |
| </div> | |
| <button class="neon-btn primary-glow" id="run-episode-btn"> | |
| <span class="btn-text">INITIALIZE RUN</span> | |
| <span class="btn-icon">⚡</span> | |
| </button> | |
| </div> | |
| <div class="panel terminal-panel"> | |
| <div class="terminal-header"> | |
| <div class="term-dots"><span></span><span></span><span></span></div> | |
| <div class="term-title">executor@devops-sandbox:~</div> | |
| </div> | |
| <div class="terminal-body" id="runner-output"> | |
| <div class="term-empty-state"> | |
| <span class="blink">_</span> Awaiting execution command... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Replay Tab --> | |
| <section class="tab-pane" id="tab-replay"> | |
| <div class="replay-layout"> | |
| <div class="panel glass-panel recent-panel"> | |
| <div class="panel-header"><h3>Recent History</h3></div> | |
| <div class="recent-list" id="replay-recent-list"> | |
| <!-- JS Injected --> | |
| </div> | |
| </div> | |
| <div class="panel terminal-panel replay-terminal"> | |
| <div class="terminal-header"> | |
| <div class="term-dots"><span></span><span></span><span></span></div> | |
| <div class="term-title" id="replay-title">replay_viewer.sh</div> | |
| </div> | |
| <div class="terminal-body" id="replay-viewer"> | |
| <div class="term-empty-state"> | |
| Select an episode from the history to replay its execution trace. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Scenarios Tab --> | |
| <section class="tab-pane" id="tab-scenarios"> | |
| <div class="scenarios-grid" id="scenarios-list"> | |
| <!-- JS Injected --> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |