cli/pkg/lab/handler/templates/runs.html

114 lines
3.6 KiB
HTML
Raw Normal View History

{{template "head" "Runs"}}
{{template "nav" "runs"}}
<style>
.run-section{margin-bottom:2.5rem}
.run-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.run-header h2{font-size:1.125rem;font-weight:700;color:var(--text);margin:0}
.run-header .model-badge{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-radius:4px;background:rgba(124,111,240,.15);color:var(--accent)}
.run-header .run-id{font-size:.75rem;color:var(--muted);font-family:"SF Mono",Consolas,monospace}
.chart-container{margin-bottom:1.25rem}
.chart-container h3{font-size:.8125rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.625rem}
.chart-card{border:1px solid var(--border);border-radius:8px;padding:1rem;background:var(--surface);overflow-x:auto}
.run-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-bottom:1.25rem}
.run-stat{padding:.75rem 1rem;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.run-stat .label{font-size:.6875rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.run-stat .value{font-size:1.5rem;font-weight:700;line-height:1.2}
.run-stat .sub{font-size:.75rem;color:var(--muted);margin-top:.125rem}
</style>
<h2 class="section-title">Training Runs</h2>
{{$b := .Benchmarks}}
{{if not $b.Runs}}
<div class="card empty">
<p>No benchmark data available. InfluxDB data refreshes every 60 seconds.</p>
</div>
{{else}}
{{range $b.Runs}}
{{$rid := .RunID}}
{{$mdl := .Model}}
<div class="run-section" id="{{$rid}}">
<div class="run-header">
<h2>{{$mdl}}</h2>
<span class="model-badge">{{.Type}}</span>
<span class="run-id">{{$rid}}</span>
</div>
{{/* Summary stats */}}
<div class="run-summary">
{{if hasKey $b.Loss $rid}}
{{$loss := getLoss $b.Loss $rid}}
<div class="run-stat">
<div class="label">Loss Points</div>
<div class="value">{{len $loss}}</div>
<div class="sub">val + train</div>
</div>
{{end}}
{{if hasContentKey $b.Content $rid}}
{{$content := getContent $b.Content $rid}}
<div class="run-stat">
<div class="label">Content Scores</div>
<div class="value">{{len $content}}</div>
<div class="sub">dimension scores</div>
</div>
{{end}}
{{if hasCapKey $b.Capability $rid}}
{{$cap := getCap $b.Capability $rid}}
<div class="run-stat">
<div class="label">Capability Tests</div>
<div class="value">{{len $cap}}</div>
<div class="sub">benchmark points</div>
</div>
{{end}}
</div>
{{/* Training Loss Chart */}}
{{if hasKey $b.Loss $rid}}
<div class="chart-container">
<h3>Training Loss Curve</h3>
<div class="chart-card">
{{lossChart (getLoss $b.Loss $rid)}}
</div>
</div>
{{end}}
{{/* Content Score Chart */}}
{{if hasContentKey $b.Content $rid}}
<div class="chart-container">
<h3>Content Scores by Dimension</h3>
<div class="chart-card">
{{contentChart (getContent $b.Content $rid)}}
</div>
</div>
{{end}}
{{/* Capability Chart */}}
{{if hasCapKey $b.Capability $rid}}
<div class="chart-container">
<h3>Capability Benchmark</h3>
<div class="chart-card">
{{capabilityChart (getCap $b.Capability $rid)}}
</div>
</div>
<div class="chart-container">
<h3>Category Breakdown</h3>
<div class="chart-card">
{{categoryBreakdown (getCap $b.Capability $rid) (getCapJudge $b.CapabilityJudge $rid)}}
</div>
</div>
{{end}}
</div>
{{end}}
{{end}}
{{template "footer"}}