vastai-utils/reports/report.html

140 lines
7.7 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Training Run Report</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0f172a; color: #e2e8f0;
font-family: 'SF Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
padding: 32px; max-width: 960px; margin: 0 auto;
}
h1 { font-size: 20px; margin-bottom: 24px; }
.stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px; margin-bottom: 32px;
}
.stat {
background: #1e293b; border-radius: 8px; padding: 16px;
border: 1px solid #334155;
}
.stat-value { font-size: 22px; font-weight: bold; }
.stat-label { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.legend {
display: flex; gap: 20px; margin: 16px 0; flex-wrap: wrap;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.timeline { margin-top: 8px; }
.timeline svg { width: 100%; height: auto; }
.event-log {
margin-top: 32px; background: #1e293b; border-radius: 8px;
padding: 16px; border: 1px solid #334155;
max-height: 400px; overflow-y: auto;
}
.event-log pre {
font-size: 11px; line-height: 1.6; color: #94a3b8;
white-space: pre-wrap;
}
.event-log .err { color: #ef4444; }
</style>
</head>
<body>
<h1>Training Run Report</h1>
<div class="stats">
<div class="stat">
<div class="stat-value">1</div>
<div class="stat-label">Rounds</div>
</div>
<div class="stat">
<div class="stat-value">2</div>
<div class="stat-label">Workers</div>
</div>
<div class="stat">
<div class="stat-value">9.9s</div>
<div class="stat-label">Total Time</div>
</div>
<div class="stat">
<div class="stat-value">1.6MB</div>
<div class="stat-label">Data Transferred</div>
</div>
<div class="stat">
<div class="stat-value">799.4KB</div>
<div class="stat-label">Params Pushed</div>
</div>
<div class="stat">
<div class="stat-value">799.4KB</div>
<div class="stat-label">Weights Pulled</div>
</div>
<div class="stat">
<div class="stat-value">8.7</div>
<div class="stat-label">Final |W|</div>
</div>
</div>
<div class="legend">
<div class="legend-item"><div class="legend-dot" style="background:#3b82f6"></div>Push params</div>
<div class="legend-item"><div class="legend-dot" style="background:#22c55e"></div>Train</div>
<div class="legend-item"><div class="legend-dot" style="background:#f97316"></div>Pull weights</div>
<div class="legend-item"><div class="legend-dot" style="background:#8b5cf6"></div>Aggregate</div>
<div class="legend-item"><div class="legend-dot" style="background:#ef4444"></div>Dead / Error</div>
</div>
<div class="timeline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 182" width="820" height="182">
<rect width="820" height="182" fill="#1e293b" rx="8"/>
<text x="12" y="26" font-size="13" font-family="monospace" fill="#e2e8f0" font-weight="bold">round 0 [2/2] 9.91s</text>
<line x1="100.0" y1="34" x2="100.0" y2="130" stroke="#334155" stroke-width="0.5" stroke-dasharray="4 4"/>
<text x="100.0" y="142" font-size="10" font-family="monospace" fill="#94a3b8" text-anchor="middle">0.0s</text>
<line x1="240.0" y1="34" x2="240.0" y2="130" stroke="#334155" stroke-width="0.5" stroke-dasharray="4 4"/>
<text x="240.0" y="142" font-size="10" font-family="monospace" fill="#94a3b8" text-anchor="middle">2.0s</text>
<line x1="380.0" y1="34" x2="380.0" y2="130" stroke="#334155" stroke-width="0.5" stroke-dasharray="4 4"/>
<text x="380.0" y="142" font-size="10" font-family="monospace" fill="#94a3b8" text-anchor="middle">4.0s</text>
<line x1="520.0" y1="34" x2="520.0" y2="130" stroke="#334155" stroke-width="0.5" stroke-dasharray="4 4"/>
<text x="520.0" y="142" font-size="10" font-family="monospace" fill="#94a3b8" text-anchor="middle">5.9s</text>
<line x1="660.0" y1="34" x2="660.0" y2="130" stroke="#334155" stroke-width="0.5" stroke-dasharray="4 4"/>
<text x="660.0" y="142" font-size="10" font-family="monospace" fill="#94a3b8" text-anchor="middle">7.9s</text>
<line x1="800.0" y1="34" x2="800.0" y2="130" stroke="#334155" stroke-width="0.5" stroke-dasharray="4 4"/>
<text x="800.0" y="142" font-size="10" font-family="monospace" fill="#94a3b8" text-anchor="middle">9.9s</text>
<text x="12" y="52" font-size="11" font-family="monospace" fill="#94a3b8">scheduler</text>
<rect x="100" y="38" width="700" height="20" fill="#0f172a" rx="3"/>
<rect x="100.00695051486753" y="40" width="10.269547854213515" height="16" fill="#3b82f6" rx="2" opacity="0.9"><title>push 399.7KB → node 0 (0.145s)</title></rect>
<rect x="100.03894679062752" y="40" width="10.298896778860655" height="16" fill="#3b82f6" rx="2" opacity="0.9"><title>push 399.7KB → node 1 (0.146s)</title></rect>
<rect x="775.4392780576894" y="40" width="12.318390925589076" height="16" fill="#f97316" rx="2" opacity="0.9"><title>pull 399.7KB ← node 0 (0.174s)</title></rect>
<rect x="787.9259294950273" y="40" width="11.67198867050213" height="16" fill="#f97316" rx="2" opacity="0.9"><title>pull 399.7KB ← node 1 (0.165s)</title></rect>
<rect x="799.7428815775497" y="40" width="3" height="16" fill="#8b5cf6" rx="2" opacity="0.9"><title>aggregate: 2 workers, |W|=8.72, Δ=0.3177</title></rect>
<text x="12" y="84" font-size="11" font-family="monospace" fill="#94a3b8">worker 0</text>
<rect x="100" y="70" width="700" height="20" fill="#0f172a" rx="3"/>
<rect x="100.00695051486753" y="72" width="10.269547854213515" height="16" fill="#3b82f6" rx="2" opacity="0.9"><title>push 399.7KB → node 0 (0.145s)</title></rect>
<rect x="110.35350371003277" y="72" width="665.0670345270505" height="16" fill="#22c55e" rx="2" opacity="0.9"><title>train node 0: 9.42s exit=0
cpu = _conversion_method_template(device=torch.device(&quot;cpu&quot;))</title></rect>
<rect x="775.4392780576894" y="72" width="12.318390925589076" height="16" fill="#f97316" rx="2" opacity="0.9"><title>pull 399.7KB ← node 0 (0.174s)</title></rect>
<text x="12" y="116" font-size="11" font-family="monospace" fill="#94a3b8">worker 1</text>
<rect x="100" y="102" width="700" height="20" fill="#0f172a" rx="3"/>
<rect x="100.03894679062752" y="104" width="10.298896778860655" height="16" fill="#3b82f6" rx="2" opacity="0.9"><title>push 399.7KB → node 1 (0.146s)</title></rect>
<rect x="110.39965258944382" y="104" width="664.8660109438434" height="16" fill="#22c55e" rx="2" opacity="0.9"><title>train node 1: 9.42s exit=0
cpu = _conversion_method_template(device=torch.device(&quot;cpu&quot;))</title></rect>
<rect x="787.9259294950273" y="104" width="11.67198867050213" height="16" fill="#f97316" rx="2" opacity="0.9"><title>pull 399.7KB ← node 1 (0.165s)</title></rect>
</svg>
</div>
<div class="event-log">
<pre>[ 0.15s] exec node=1 exit=0 0.142s | Warning: Permanently added &#x27;worker-1&#x27; (ED25519) to the list of known hosts.
[ 0.15s] exec node=0 exit=0 0.144s | Warning: Permanently added &#x27;worker-0&#x27; (ED25519) to the list of known hosts.
[ 0.30s] push node=1 job_module.py 1.4KB 0.146s
[ 0.30s] push node=0 job_module.py 1.4KB 0.146s
[ 0.30s] ──── round 0 start (2 workers) ────────────────
[ 0.45s] push node=0 params.pt 399.7KB 0.145s
[ 0.45s] push node=1 params.pt 399.7KB 0.146s
[ 9.86s] exec node=1 exit=0 9.416s | cpu = _conversion_method_template(device=torch.device(&quot;cpu&quot;))
[ 9.87s] exec node=0 exit=0 9.419s | cpu = _conversion_method_template(device=torch.device(&quot;cpu&quot;))
[ 10.04s] pull node=0 weights.pt 399.7KB 0.174s
[ 10.21s] pull node=1 weights.pt 399.7KB 0.165s
[ 10.21s] agg 2 workers |W|=8.72 Δ=0.3177 0.002s
[ 10.21s] ──── round 0 end (2/2 survived, 9.91s) ────────</pre>
</div>
</body>
</html>