139 lines
4.5 KiB
HTML
139 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>AItrackwalker 模型训练中心</title>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<p class="eyebrow">AItrackwalker · Local GPU Workbench</p>
|
|
<h1>模型训练中心</h1>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<span id="connectionStatus" class="connection-status">正在连接</span>
|
|
<button id="refreshButton" type="button">刷新数据</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<aside class="sidebar" aria-label="训练任务">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">Runs</p>
|
|
<h2>训练任务</h2>
|
|
</div>
|
|
<span id="runCount" class="count">0</span>
|
|
</div>
|
|
<div id="runList" class="run-list"></div>
|
|
<div id="emptyRuns" class="empty-state" hidden>
|
|
<p>还没有训练记录。</p>
|
|
<code>python -m railtrain demo</code>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="content" aria-live="polite">
|
|
<div id="emptySelection" class="welcome">
|
|
<p class="eyebrow">RTX 3090 Ready</p>
|
|
<h2>选择一条训练任务查看曲线</h2>
|
|
<p>看板会读取本地 JSONL 指标，不上传模型、日志或数据集。</p>
|
|
</div>
|
|
|
|
<div id="runDetail" hidden>
|
|
<div class="detail-header">
|
|
<div>
|
|
<div class="title-row">
|
|
<span id="runStatus" class="status-badge">未知</span>
|
|
<span id="runTask" class="task-label"></span>
|
|
</div>
|
|
<h2 id="runName">训练任务</h2>
|
|
<p id="runDescription" class="description"></p>
|
|
</div>
|
|
<div class="updated-at">
|
|
<span>最近刷新</span>
|
|
<strong id="updatedAt">—</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats" aria-label="训练摘要">
|
|
<article>
|
|
<span>当前 Epoch</span>
|
|
<strong id="epochValue">—</strong>
|
|
<small id="stepValue">尚无 step</small>
|
|
</article>
|
|
<article>
|
|
<span>最新 Loss</span>
|
|
<strong id="lossValue">—</strong>
|
|
<small id="lossTrend">等待指标</small>
|
|
</article>
|
|
<article>
|
|
<span id="qualityLabel">最佳指标</span>
|
|
<strong id="qualityValue">—</strong>
|
|
<small id="qualityContext">等待评估</small>
|
|
</article>
|
|
<article>
|
|
<span>GPU / 显存</span>
|
|
<strong id="gpuValue">—</strong>
|
|
<small id="gpuContext">等待采样</small>
|
|
</article>
|
|
</div>
|
|
|
|
<section class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Optimization</p>
|
|
<h3>训练曲线</h3>
|
|
</div>
|
|
<div class="legend" aria-label="训练曲线图例">
|
|
<span><i class="loss-dot"></i>Loss</span>
|
|
<span><i class="quality-dot"></i><b id="qualityLegend">mAP</b></span>
|
|
</div>
|
|
</div>
|
|
<div id="trainingChart" class="chart" role="img" aria-label="Loss 和质量指标训练曲线"></div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Hardware</p>
|
|
<h3>RTX 3090 负载</h3>
|
|
</div>
|
|
<div class="legend" aria-label="GPU 曲线图例">
|
|
<span><i class="gpu-dot"></i>利用率</span>
|
|
<span><i class="memory-dot"></i>显存</span>
|
|
</div>
|
|
</div>
|
|
<div id="gpuChart" class="chart compact" role="img" aria-label="GPU 利用率和显存占用曲线"></div>
|
|
</section>
|
|
|
|
<div class="lower-grid">
|
|
<section class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Run Metadata</p>
|
|
<h3>任务信息</h3>
|
|
</div>
|
|
</div>
|
|
<dl id="metadata" class="metadata"></dl>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-heading">
|
|
<div>
|
|
<p class="eyebrow">Latest Output</p>
|
|
<h3>最近日志</h3>
|
|
</div>
|
|
</div>
|
|
<pre id="logOutput">等待日志…</pre>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/app.js" defer></script>
|
|
</body>
|
|
</html>
|