Skip to content

Commit 3900d04

Browse files
raselmandolraselmandol
committed
minor changes (styles, responsiveness)
1 parent 086efea commit 3900d04

1 file changed

Lines changed: 95 additions & 65 deletions

File tree

‎docs/index.html‎

Lines changed: 95 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -9,104 +9,134 @@
99
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>ML</text></svg>">
1010
</head>
1111
<body>
12-
<div class="container">
13-
<!-- Header -->
14-
<header class="header">
15-
<div class="header-content">
12+
<div class="app-shell">
13+
<header class="hero">
14+
<div class="hero-intro">
15+
<p class="eyebrow">MNIST Automation · PyTorch + GitHub Actions</p>
1616
<h1>MNIST Training Dashboard</h1>
17-
<p>Live metrics and results from the latest automated training run.</p>
18-
<div class="badges">
19-
<span class="badge status" id="trainingStatus">Loading...</span>
20-
<span class="badge model">PyTorch + ONNX</span>
17+
<p class="hero-copy">Up-to-the-minute metrics, predictions, and visual evidence from the scheduled training pipeline.</p>
18+
<div class="hero-badges">
2119
<span class="badge automation">GitHub Actions</span>
20+
<span class="badge model">PyTorch · ONNX</span>
21+
<span class="badge dataset">MNIST</span>
22+
</div>
23+
</div>
24+
<div class="hero-meta">
25+
<div class="meta-card">
26+
<span class="meta-label">Last Updated</span>
27+
<span class="meta-value" id="lastUpdate">Loading...</span>
28+
</div>
29+
<div class="meta-card status-card">
30+
<span class="meta-label">Pipeline Status</span>
31+
<span class="meta-value" id="trainingStatus">Loading...</span>
2232
</div>
2333
</div>
2434
</header>
2535

26-
<!-- Main Content -->
27-
<main class="main">
28-
<!-- Performance Overview -->
29-
<section class="performance-overview">
30-
<h2>Model Performance</h2>
36+
<main class="content">
37+
<section class="section-card metrics-section">
38+
<div class="section-header">
39+
<div>
40+
<h2>Model Snapshot</h2>
41+
<p>Key metrics captured at the end of the latest automated run.</p>
42+
</div>
43+
</div>
3144
<div class="metrics-grid">
3245
<div class="metric-card">
33-
<div class="metric-content">
34-
<h3>Test Accuracy</h3>
35-
<div class="metric-value" id="testAccuracy">Loading...</div>
36-
</div>
46+
<div class="metric-label">Test Accuracy</div>
47+
<div class="metric-value" id="testAccuracy">Loading...</div>
3748
</div>
3849
<div class="metric-card">
39-
<div class="metric-content">
40-
<h3>Test Loss</h3>
41-
<div class="metric-value" id="testLoss">Loading...</div>
42-
</div>
50+
<div class="metric-label">Test Loss</div>
51+
<div class="metric-value" id="testLoss">Loading...</div>
4352
</div>
4453
<div class="metric-card">
45-
<div class="metric-content">
46-
<h3>Training Epochs</h3>
47-
<div class="metric-value" id="totalEpochs">Loading...</div>
48-
</div>
54+
<div class="metric-label">Training Epochs</div>
55+
<div class="metric-value" id="totalEpochs">Loading...</div>
4956
</div>
5057
<div class="metric-card">
51-
<div class="metric-content">
52-
<h3>Final Training Accuracy</h3>
53-
<div class="metric-value" id="finalTrainAccuracy">Loading...</div>
54-
</div>
58+
<div class="metric-label">Final Train Accuracy</div>
59+
<div class="metric-value" id="finalTrainAccuracy">Loading...</div>
5560
</div>
5661
</div>
5762
</section>
5863

59-
<!-- Training Progress -->
60-
<section class="training-progress">
61-
<h2>Training Progress</h2>
62-
<div class="progress-container">
63-
<div class="chart-wrapper">
64-
<h3>Training Loss</h3>
65-
<div class="chart-container" id="lossChart">
66-
<img src="images/train_loss.png" alt="Training Loss" class="chart-image" onerror="this.parentElement.innerHTML='<div class=chart-error>Chart not available</div>'">
67-
</div>
64+
<section class="section-card charts-section">
65+
<div class="section-header">
66+
<div>
67+
<h2>Training Progress</h2>
68+
<p>Visual summary of optimization dynamics for the current checkpoint.</p>
69+
</div>
70+
</div>
71+
<div class="chart-grid">
72+
<div class="chart-card">
73+
<div class="chart-title">Training Loss</div>
74+
<div class="chart-container" id="lossChart"></div>
75+
</div>
76+
<div class="chart-card">
77+
<div class="chart-title">Training Accuracy</div>
78+
<div class="chart-container" id="accuracyChart"></div>
6879
</div>
69-
<div class="chart-wrapper">
70-
<h3>Training Accuracy</h3>
71-
<div class="chart-container" id="accuracyChart">
72-
<img src="images/train_accuracy.png" alt="Training Accuracy" class="chart-image" onerror="this.parentElement.innerHTML='<div class=chart-error>Chart not available</div>'">
73-
</div>
80+
<div class="chart-card">
81+
<div class="chart-title">Test Accuracy</div>
82+
<div class="chart-container" id="testAccuracyChart"></div>
7483
</div>
7584
</div>
7685
</section>
7786

78-
<!-- Test Results -->
79-
<section class="test-results">
80-
<h2>Sample Predictions</h2>
81-
<div class="sample-predictions">
82-
<div class="predictions-grid" id="predictionsGrid">
83-
<!-- Populated dynamically from test_output.md -->
87+
<section class="section-card predictions-section">
88+
<div class="section-header">
89+
<div>
90+
<h2>Sample Predictions</h2>
91+
<p>Random test-set picks comparing ground truth and model decisions.</p>
8492
</div>
8593
</div>
94+
<div class="predictions-grid" id="predictionsGrid">
95+
<!-- Populated dynamically -->
96+
</div>
8697
</section>
8798

88-
<!-- Sample Images -->
89-
<section class="sample-images">
90-
<h2>Training Accuracy and Test Images</h2>
99+
<section class="section-card images-section">
100+
<div class="section-header">
101+
<div>
102+
<h2>Test Images</h2>
103+
<p>Latest five samples exported with overlays for quick visual validation.</p>
104+
</div>
105+
</div>
91106
<div class="images-grid" id="imagesGrid">
92-
<!-- Populated dynamically from test_output.md -->
107+
<!-- Populated dynamically -->
93108
</div>
94109
</section>
95110

96-
<!-- Footer -->
97-
<footer class="footer">
98-
<div class="footer-content">
99-
<div class="footer-links">
100-
<a href="https://github.com/raselmandol/git-ml" target="_blank" class="footer-link">Source Code</a>
101-
<a href="https://github.com/raselmandol/git-ml/blob/main/train_output.md" target="_blank" class="footer-link">Training Logs</a>
102-
<a href="https://github.com/raselmandol/git-ml/blob/main/test_output.md" target="_blank" class="footer-link">Test Results</a>
103-
<a href="https://github.com/raselmandol/git-ml/actions" target="_blank" class="footer-link">Actions</a>
111+
<section class="section-card resources-section">
112+
<div class="section-header">
113+
<div>
114+
<h2>Pipeline Resources</h2>
115+
<p>Explore logs, artifacts, and workflow definitions powering this dashboard.</p>
104116
</div>
105-
<p class="footer-text">
106-
Built with PyTorch &mdash; Automated with GitHub Actions<br>
107-
<span class="last-update">Last updated: <span id="lastUpdate">Loading...</span></span>
108-
</p>
109117
</div>
118+
<div class="resource-links">
119+
<a class="resource-card" href="https://github.com/raselmandol/git-ml" target="_blank" rel="noopener">
120+
<span class="resource-title">Source Code</span>
121+
<span class="resource-meta">github.com/raselmandol/git-ml</span>
122+
</a>
123+
<a class="resource-card" href="https://github.com/raselmandol/git-ml/blob/main/train_output.md" target="_blank" rel="noopener">
124+
<span class="resource-title">Training Log</span>
125+
<span class="resource-meta">train_output.md</span>
126+
</a>
127+
<a class="resource-card" href="https://github.com/raselmandol/git-ml/blob/main/test_output.md" target="_blank" rel="noopener">
128+
<span class="resource-title">Test Report</span>
129+
<span class="resource-meta">test_output.md</span>
130+
</a>
131+
<a class="resource-card" href="https://github.com/raselmandol/git-ml/actions" target="_blank" rel="noopener">
132+
<span class="resource-title">GitHub Actions</span>
133+
<span class="resource-meta">Workflow history</span>
134+
</a>
135+
</div>
136+
</section>
137+
138+
<footer class="footer">
139+
<p>Built with ❤️ using PyTorch · Automated via GitHub Actions · Deployed on GitHub Pages</p>
110140
</footer>
111141
</main>
112142
</div>

0 commit comments

Comments
 (0)