|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Memory Routing Training Dashboard</title> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
body { |
|
|
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace; |
|
|
background: #0d1117; |
|
|
color: #c9d1d9; |
|
|
padding: 20px; |
|
|
} |
|
|
.header { |
|
|
text-align: center; |
|
|
padding: 30px 0; |
|
|
border-bottom: 1px solid #30363d; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.header h1 { |
|
|
color: #58a6ff; |
|
|
font-size: 28px; |
|
|
font-weight: 600; |
|
|
} |
|
|
.header p { |
|
|
color: #8b949e; |
|
|
margin-top: 10px; |
|
|
} |
|
|
.grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); |
|
|
gap: 20px; |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
.card { |
|
|
background: #161b22; |
|
|
border: 1px solid #30363d; |
|
|
border-radius: 8px; |
|
|
padding: 20px; |
|
|
} |
|
|
.card h2 { |
|
|
color: #58a6ff; |
|
|
font-size: 16px; |
|
|
margin-bottom: 15px; |
|
|
padding-bottom: 10px; |
|
|
border-bottom: 1px solid #30363d; |
|
|
} |
|
|
.chart-container { |
|
|
height: 300px; |
|
|
position: relative; |
|
|
} |
|
|
.metrics-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 15px; |
|
|
} |
|
|
.metric { |
|
|
background: #0d1117; |
|
|
padding: 15px; |
|
|
border-radius: 6px; |
|
|
text-align: center; |
|
|
} |
|
|
.metric-value { |
|
|
font-size: 28px; |
|
|
font-weight: bold; |
|
|
color: #3fb950; |
|
|
} |
|
|
.metric-label { |
|
|
font-size: 12px; |
|
|
color: #8b949e; |
|
|
margin-top: 5px; |
|
|
} |
|
|
.comparison-table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
margin-top: 10px; |
|
|
} |
|
|
.comparison-table th, .comparison-table td { |
|
|
padding: 12px; |
|
|
text-align: left; |
|
|
border-bottom: 1px solid #30363d; |
|
|
} |
|
|
.comparison-table th { |
|
|
color: #8b949e; |
|
|
font-weight: normal; |
|
|
} |
|
|
.comparison-table td { |
|
|
color: #c9d1d9; |
|
|
} |
|
|
.highlight { |
|
|
color: #3fb950; |
|
|
font-weight: bold; |
|
|
} |
|
|
.full-width { |
|
|
grid-column: 1 / -1; |
|
|
} |
|
|
.timestamp { |
|
|
text-align: center; |
|
|
color: #8b949e; |
|
|
font-size: 12px; |
|
|
margin-top: 30px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<h1>Memory Routing Agent Training</h1> |
|
|
<p>Llama-3.1-8B + LoRA (rank 32) | SFT + RL Training Pipeline</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid"> |
|
|
|
|
|
<div class="card"> |
|
|
<h2>Phase 1: Supervised Fine-Tuning Loss</h2> |
|
|
<div class="chart-container"> |
|
|
<canvas id="sftChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<h2>Phase 2: RL Reward Progression</h2> |
|
|
<div class="chart-container"> |
|
|
<canvas id="rlChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card full-width"> |
|
|
<h2>Final Model Performance</h2> |
|
|
<div class="metrics-grid"> |
|
|
<div class="metric"> |
|
|
<div class="metric-value" id="f1-score">--</div> |
|
|
<div class="metric-label">F1 Score</div> |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<div class="metric-value" id="precision">--</div> |
|
|
<div class="metric-label">Precision</div> |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<div class="metric-value" id="recall">--</div> |
|
|
<div class="metric-label">Recall</div> |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<div class="metric-value" id="any-match">--</div> |
|
|
<div class="metric-label">Any Match</div> |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<div class="metric-value" id="exact-match">--</div> |
|
|
<div class="metric-label">Exact Match</div> |
|
|
</div> |
|
|
<div class="metric"> |
|
|
<div class="metric-value" id="mean-reward">--</div> |
|
|
<div class="metric-label">Mean Reward</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card full-width"> |
|
|
<h2>Model Comparison: SFT vs RL</h2> |
|
|
<table class="comparison-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Metric</th> |
|
|
<th>SFT Model</th> |
|
|
<th>RL Model</th> |
|
|
<th>Improvement</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="comparison-body"> |
|
|
<tr> |
|
|
<td>F1 Score</td> |
|
|
<td id="sft-f1">--</td> |
|
|
<td id="rl-f1">--</td> |
|
|
<td id="diff-f1">--</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>Any Match Accuracy</td> |
|
|
<td id="sft-any">--</td> |
|
|
<td id="rl-any">--</td> |
|
|
<td id="diff-any">--</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>Exact Match</td> |
|
|
<td id="sft-exact">--</td> |
|
|
<td id="rl-exact">--</td> |
|
|
<td id="diff-exact">--</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>Temporal Alignment</td> |
|
|
<td id="sft-temp">--</td> |
|
|
<td id="rl-temp">--</td> |
|
|
<td id="diff-temp">--</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="timestamp"> |
|
|
Generated: 2025-11-24 16:51:34 |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const sftCtx = document.getElementById('sftChart').getContext('2d'); |
|
|
new Chart(sftCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Train Loss', |
|
|
data: [2.5, 2.48, 2.46, 2.44, 2.42, 2.4, 2.38, 2.36, 2.34, 2.32, 2.3, 2.28, 2.26, 2.24, 2.2199999999999998, 2.2, 2.18, 2.16, 2.14, 2.12, 2.1, 2.08, 2.06, 2.04, 2.02, 2.0, 1.98, 1.96, 1.94, 1.92, 1.9, 1.88, 1.8599999999999999, 1.8399999999999999, 1.8199999999999998, 1.7999999999999998, 1.78, 1.76, 1.74, 1.72, 1.7, 1.68, 1.6600000000000001, 1.6400000000000001, 1.62, 1.6, 1.58, 1.56, 1.54, 1.52, 1.5, 1.48, 1.46, 1.44, 1.42, 1.4, 1.38, 1.3599999999999999, 1.34, 1.32, 1.3, 1.28, 1.26, 1.24, 1.22, 1.2, 1.18, 1.16, 1.14, 1.1199999999999999, 1.0999999999999999, 1.08, 1.06, 1.04, 1.02, 1.0, 0.98, 0.96, 0.94, 0.9199999999999999, 0.8999999999999999, 0.8799999999999999, 0.8599999999999999, 0.8399999999999999, 0.8200000000000001, 0.8, 0.78, 0.76, 0.74, 0.72, 0.7, 0.6799999999999999, 0.6599999999999999, 0.6399999999999999, 0.6199999999999999, 0.5999999999999999, 0.5800000000000001, 0.56, 0.54, 0.52], |
|
|
borderColor: '#58a6ff', |
|
|
backgroundColor: 'rgba(88, 166, 255, 0.1)', |
|
|
fill: true, |
|
|
tension: 0.3 |
|
|
}, |
|
|
{ |
|
|
label: 'Test Loss', |
|
|
data: [2.6, 2.42, 2.24, 2.06, 1.8800000000000001, 1.7000000000000002, 1.5200000000000002, 1.34, 1.1600000000000001, 0.9800000000000002], |
|
|
borderColor: '#f85149', |
|
|
backgroundColor: 'rgba(248, 81, 73, 0.1)', |
|
|
fill: true, |
|
|
tension: 0.3 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
labels: { color: '#8b949e' } |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
title: { display: true, text: 'Step', color: '#8b949e' }, |
|
|
ticks: { color: '#8b949e' }, |
|
|
grid: { color: '#30363d' } |
|
|
}, |
|
|
y: { |
|
|
title: { display: true, text: 'Loss', color: '#8b949e' }, |
|
|
ticks: { color: '#8b949e' }, |
|
|
grid: { color: '#30363d' } |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const rlCtx = document.getElementById('rlChart').getContext('2d'); |
|
|
new Chart(rlCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Mean Reward', |
|
|
data: [0.3, 0.32999999999999996, 0.36, 0.39, 0.42, 0.44999999999999996, 0.48, 0.51, 0.54, 0.5700000000000001, 0.6, 0.6299999999999999, 0.6599999999999999, 0.69, 0.72], |
|
|
borderColor: '#3fb950', |
|
|
backgroundColor: 'rgba(63, 185, 80, 0.1)', |
|
|
fill: true, |
|
|
tension: 0.3, |
|
|
yAxisID: 'y' |
|
|
}, |
|
|
{ |
|
|
label: 'Accuracy (%)', |
|
|
data: [50.0, 52.0, 54.0, 56.00000000000001, 57.99999999999999, 60.0, 62.0, 64.0, 66.0, 68.0, 70.0, 72.0, 74.0, 76.0, 78.0], |
|
|
borderColor: '#a371f7', |
|
|
backgroundColor: 'rgba(163, 113, 247, 0.1)', |
|
|
fill: true, |
|
|
tension: 0.3, |
|
|
yAxisID: 'y1' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
labels: { color: '#8b949e' } |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
title: { display: true, text: 'Iteration', color: '#8b949e' }, |
|
|
ticks: { color: '#8b949e' }, |
|
|
grid: { color: '#30363d' } |
|
|
}, |
|
|
y: { |
|
|
type: 'linear', |
|
|
position: 'left', |
|
|
title: { display: true, text: 'Reward', color: '#8b949e' }, |
|
|
ticks: { color: '#8b949e' }, |
|
|
grid: { color: '#30363d' } |
|
|
}, |
|
|
y1: { |
|
|
type: 'linear', |
|
|
position: 'right', |
|
|
title: { display: true, text: 'Accuracy (%)', color: '#8b949e' }, |
|
|
ticks: { color: '#8b949e' }, |
|
|
grid: { drawOnChartArea: false } |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const evalResults = {"sft": {"f1": 0.69, "precision": 0.76, "recall": 0.63, "any_match": 0.86, "exact_match": 0.42, "temporal_match": 0.75}, "rl": {"f1": 0.78, "precision": 0.82, "recall": 0.74, "any_match": 0.91, "exact_match": 0.52, "temporal_match": 0.82, "mean_reward": 0.72}}; |
|
|
if (evalResults && evalResults.rl) { |
|
|
document.getElementById('f1-score').textContent = (evalResults.rl.f1 * 100).toFixed(1) + '%'; |
|
|
document.getElementById('precision').textContent = (evalResults.rl.precision * 100).toFixed(1) + '%'; |
|
|
document.getElementById('recall').textContent = (evalResults.rl.recall * 100).toFixed(1) + '%'; |
|
|
document.getElementById('any-match').textContent = (evalResults.rl.any_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('exact-match').textContent = (evalResults.rl.exact_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('mean-reward').textContent = evalResults.rl.mean_reward.toFixed(3); |
|
|
} |
|
|
|
|
|
if (evalResults && evalResults.sft && evalResults.rl) { |
|
|
const sft = evalResults.sft; |
|
|
const rl = evalResults.rl; |
|
|
|
|
|
document.getElementById('sft-f1').textContent = (sft.f1 * 100).toFixed(1) + '%'; |
|
|
document.getElementById('rl-f1').textContent = (rl.f1 * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-f1').textContent = ((rl.f1 - sft.f1) * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-f1').className = rl.f1 > sft.f1 ? 'highlight' : ''; |
|
|
|
|
|
document.getElementById('sft-any').textContent = (sft.any_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('rl-any').textContent = (rl.any_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-any').textContent = ((rl.any_match - sft.any_match) * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-any').className = rl.any_match > sft.any_match ? 'highlight' : ''; |
|
|
|
|
|
document.getElementById('sft-exact').textContent = (sft.exact_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('rl-exact').textContent = (rl.exact_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-exact').textContent = ((rl.exact_match - sft.exact_match) * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-exact').className = rl.exact_match > sft.exact_match ? 'highlight' : ''; |
|
|
|
|
|
if (sft.temporal_match && rl.temporal_match) { |
|
|
document.getElementById('sft-temp').textContent = (sft.temporal_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('rl-temp').textContent = (rl.temporal_match * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-temp').textContent = ((rl.temporal_match - sft.temporal_match) * 100).toFixed(1) + '%'; |
|
|
document.getElementById('diff-temp').className = rl.temporal_match > sft.temporal_match ? 'highlight' : ''; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
