Update 2026-03-25 16:05:19

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find /e/HuggingFace/AutoMLOps -not -path */__pycache__/* -not -path */.git/* -not -path */node_modules/*)"
+    ]
+  }
+}

app.py

@@ -444,7 +444,10 @@ def api_datasets():
 def api_stats():
     client = _mlflow_client()
     try:
-        runs = client.search_runs(experiment_ids=[], max_results=500)
+        runs = client.search_runs(
+            experiment_ids=[], max_results=500,
+            order_by=["start_time DESC"],
+        )
     except Exception:
         runs = []
     finished = [r for r in runs if r.info.status == "FINISHED"]
@@ -453,11 +456,38 @@ def api_stats():
         v = r.data.metrics.get("accuracy") or r.data.metrics.get("r2_score") or 0
         if v > best:
             best = v
+
+    recent = []
+    for r in runs[:8]:
+        m = r.data.metrics
+        primary = m.get("accuracy") or m.get("r2_score") or 0
+        recent.append({
+            "run_id":         r.info.run_id[:8],
+            "algorithm":      r.data.tags.get("algorithm", "—"),
+            "category":       r.data.tags.get("category",  "—"),
+            "dataset":        r.data.tags.get("dataset",   "—"),
+            "primary_metric": round(primary, 4),
+            "status":         r.info.status,
+            "duration":       round((r.info.end_time - r.info.start_time) / 1000, 1)
+                              if r.info.end_time else None,
+        })
+
+    algo_counts: dict = {}
+    ds_counts:   dict = {}
+    for r in finished:
+        cat = r.data.tags.get("category", "Other")
+        algo_counts[cat] = algo_counts.get(cat, 0) + 1
+        ds = r.data.tags.get("dataset", "Other")
+        ds_counts[ds] = ds_counts.get(ds, 0) + 1
+
     return jsonify({
         "total_runs":     len(runs),
         "completed_runs": len(finished),
         "best_metric":    round(best, 4),
         "n_experiments":  len(set(r.info.experiment_id for r in runs)),
+        "recent_runs":    recent,
+        "algo_counts":    algo_counts,
+        "ds_counts":      ds_counts,
     })
 
 

static/css/style.css

@@ -484,3 +484,33 @@ tr:hover td { background: var(--bg-hover); }
 }
 .empty-state-icon { font-size: 3rem; margin-bottom: 12px; }
 .empty-state-title { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
+
+/* ── Light theme ──────────────────────────────────────────────────────────── */
+[data-theme="light"] {
+  --bg-primary:    #f6f8fa;
+  --bg-secondary:  #ffffff;
+  --bg-tertiary:   #eaeef2;
+  --bg-hover:      #d0d7de30;
+  --border-color:  #d0d7de;
+  --text-primary:  #24292f;
+  --text-secondary:#57606a;
+  --text-muted:    #8c959f;
+  --shadow:        0 4px 24px rgba(0,0,0,.10);
+}
+[data-theme="light"] .form-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357606a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+}
+[data-theme="light"] .topnav-badge {
+  color: #fff;
+}
+[data-theme="light"] .pipeline-log {
+  color: var(--text-secondary);
+}
+
+/* ── Smooth theme transition ──────────────────────────────────────────────── */
+body.theme-transition,
+body.theme-transition *,
+body.theme-transition *::before,
+body.theme-transition *::after {
+  transition: background-color .22s ease, color .22s ease, border-color .22s ease !important;
+}

static/js/app.js

@@ -47,3 +47,22 @@ function activateTab(panelId, btn, groupClass) {
   document.getElementById(panelId)?.classList.add('active');
   if (btn) btn.classList.add('active');
 }
+
+// ── Light / dark theme ─────────────────────────────────────────────────────
+function toggleTheme() {
+  document.body.classList.add('theme-transition');
+  const current = document.documentElement.getAttribute('data-theme') || 'dark';
+  const next    = current === 'dark' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', next);
+  localStorage.setItem('theme', next);
+  const icon = document.getElementById('theme-icon');
+  if (icon) icon.className = next === 'dark' ? 'fa-solid fa-moon' : 'fa-solid fa-sun';
+  document.dispatchEvent(new CustomEvent('themechange', { detail: next }));
+  setTimeout(() => document.body.classList.remove('theme-transition'), 300);
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const current = document.documentElement.getAttribute('data-theme') || 'dark';
+  const icon = document.getElementById('theme-icon');
+  if (icon) icon.className = current === 'dark' ? 'fa-solid fa-moon' : 'fa-solid fa-sun';
+});

templates/base.html

@@ -18,6 +18,9 @@
 
   <link rel="stylesheet" href="/static/css/style.css">
 
+  <!-- Apply saved theme before render to prevent flash -->
+  <script>document.documentElement.setAttribute('data-theme',localStorage.getItem('theme')||'dark');</script>
+
   {% block head_extra %}{% endblock %}
 </head>
 <body>
@@ -73,6 +76,9 @@
   </button>
   <span class="topnav-title">{% block page_title %}AutoMLOps{% endblock %}</span>
   <span class="topnav-badge"><i class="fa-solid fa-circle" style="color:#22c55e;font-size:.55rem"></i> Live</span>
+  <button class="btn btn-ghost btn-sm" id="theme-toggle" onclick="toggleTheme()" title="Toggle light/dark theme" style="width:32px;padding:5px 0;justify-content:center">
+    <i class="fa-solid fa-moon" id="theme-icon"></i>
+  </button>
   {% block topnav_actions %}{% endblock %}
 </header>
 

templates/dashboard.html

@@ -164,52 +164,100 @@
 
 {% block scripts %}
 <script>
-const ALGO_DATA = {{ algorithms | tojson }};
-const ALGO_COUNTS = {{ algo_counts }};
-const DS_COUNTS   = {{ ds_counts }};
+const ALGO_DATA   = {{ algorithms | tojson }};
+let _algoCounts   = {{ algo_counts }};
+let _dsCounts     = {{ ds_counts }};
+
+const CHART_COLORS = ['#8b5cf6','#3b82f6','#22c55e','#f59e0b','#ef4444','#06b6d4','#ec4899','#a855f7'];
+
+// Returns Plotly-compatible colors matching the current theme
+function getChartTheme() {
+  const light = document.documentElement.getAttribute('data-theme') === 'light';
+  return {
+    bg:         light ? '#ffffff' : '#161b22',
+    border:     light ? '#d0d7de' : '#30363d',
+    txt:        light ? '#57606a' : '#8b949e',
+    annotation: light ? '#24292f' : '#e6edf3',
+  };
+}
 
-// ── Charts ────────────────────────────────────────────────────────────────
-document.addEventListener('DOMContentLoaded', () => {
-  const dark = '#0d1117', bg2 = '#161b22', border = '#30363d', txt = '#8b949e';
+// ── Chart rendering (called on load, after refresh, and on theme change) ──
+function renderCharts(algoCounts, dsCounts) {
+  const c    = getChartTheme();
+  const cats = Object.keys(algoCounts);
+  const vals = Object.values(algoCounts);
 
-  // Donut — algorithm categories
-  const cats  = Object.keys(ALGO_COUNTS);
-  const vals  = Object.values(ALGO_COUNTS);
-  const COLORS = ['#8b5cf6','#3b82f6','#22c55e','#f59e0b','#ef4444','#06b6d4','#ec4899','#a855f7'];
-  Plotly.newPlot('chart-algo', [{
+  Plotly.react('chart-algo', [{
     type: 'pie', hole: .55,
     labels: cats, values: vals,
-    marker: { colors: COLORS.slice(0, cats.length) },
+    marker: { colors: CHART_COLORS.slice(0, cats.length) },
     textinfo: 'none',
     hovertemplate: '<b>%{label}</b><br>%{value} runs<extra></extra>',
   }], {
-    paper_bgcolor: bg2, plot_bgcolor: bg2,
+    paper_bgcolor: c.bg, plot_bgcolor: c.bg,
     margin: { t:8, b:8, l:8, r:8 },
-    legend: { font: { color: txt, size: 11 }, bgcolor: 'transparent', x: 1.05 },
+    legend: { font: { color: c.txt, size: 11 }, bgcolor: 'transparent', x: 1.05 },
     showlegend: cats.length > 0,
     annotations: [{ text: `<b>${vals.reduce((a,b)=>a+b,0)}</b><br><span style="font-size:10px">runs</span>`,
-                    x:.5, y:.5, font:{size:14,color:'#e6edf3'}, showarrow:false }],
+                    x:.5, y:.5, font:{size:14, color:c.annotation}, showarrow:false }],
   }, { responsive: true, displayModeBar: false });
 
-  // Bar — datasets
-  const dsKeys = Object.keys(DS_COUNTS);
-  const dsVals = Object.values(DS_COUNTS);
-  Plotly.newPlot('chart-ds', [{
+  const dsKeys = Object.keys(dsCounts);
+  const dsVals = Object.values(dsCounts);
+  Plotly.react('chart-ds', [{
     type: 'bar', orientation: 'h',
     y: dsKeys, x: dsVals,
     marker: { color: '#3b82f6', opacity: .85 },
     hovertemplate: '<b>%{y}</b>: %{x} runs<extra></extra>',
   }], {
-    paper_bgcolor: bg2, plot_bgcolor: bg2,
+    paper_bgcolor: c.bg, plot_bgcolor: c.bg,
     margin: { t:8, b:24, l:8, r:16 },
-    xaxis: { gridcolor: border, color: txt, tickfont:{size:10} },
-    yaxis: { color: txt, tickfont:{size:10}, automargin:true },
+    xaxis: { gridcolor: c.border, color: c.txt, tickfont:{size:10} },
+    yaxis: { color: c.txt, tickfont:{size:10}, automargin:true },
     bargap: .35,
   }, { responsive: true, displayModeBar: false });
+}
+
+// ── Live-update the recent-runs table ──────────────────────────────────────
+function updateRecentTable(rows) {
+  const tbody = document.querySelector('#recent-table tbody');
+  if (!tbody) return;
+  if (!rows || rows.length === 0) {
+    tbody.innerHTML = `<tr><td colspan="7">
+      <div class="empty-state">
+        <div class="empty-state-icon">🔬</div>
+        <div class="empty-state-title">No runs yet</div>
+        <div>Click <strong>New Run</strong> to train your first model</div>
+      </div></td></tr>`;
+    return;
+  }
+  tbody.innerHTML = rows.map(r => {
+    const mc = r.primary_metric >= 0.9 ? 'metric-good' : r.primary_metric >= 0.7 ? 'metric-medium' : 'metric-bad';
+    const sb = r.status === 'FINISHED'
+      ? `<span class="badge badge-success"><i class="fa-solid fa-check"></i> Done</span>`
+      : r.status === 'RUNNING'
+      ? `<span class="badge badge-info"><span class="spinner" style="width:10px;height:10px;border-width:1.5px"></span> Running</span>`
+      : `<span class="badge badge-muted">${r.status}</span>`;
+    return `<tr>
+      <td><code style="font-size:.8rem;color:var(--accent-light)">${r.run_id}</code></td>
+      <td><strong>${r.algorithm}</strong></td>
+      <td><span class="badge badge-purple">${r.category}</span></td>
+      <td>${r.dataset}</td>
+      <td><span class="metric-val ${mc}">${r.primary_metric}</span></td>
+      <td>${r.duration != null ? r.duration + 's' : '—'}</td>
+      <td>${sb}</td>
+    </tr>`;
+  }).join('');
+}
 
+document.addEventListener('DOMContentLoaded', () => {
+  renderCharts(_algoCounts, _dsCounts);
   populateCategories();
 });
 
+// Re-render charts when theme changes so colors match
+document.addEventListener('themechange', () => renderCharts(_algoCounts, _dsCounts));
+
 // ── Train modal helpers ────────────────────────────────────────────────────
 function updateTaskType() {
   const ds = document.getElementById('sel-dataset');
@@ -275,8 +323,8 @@ function pollTraining(jobId) {
   const resultD = document.getElementById('train-result');
 
   const iv = setInterval(async () => {
-    const res  = await fetch(`/api/run/${jobId}/status`);
-    const job  = await res.json();
+    const res = await fetch(`/api/run/${jobId}/status`);
+    const job = await res.json();
 
     bar.style.width = job.progress + '%';
     pct.textContent = job.progress + '%';
@@ -285,7 +333,7 @@ function pollTraining(jobId) {
     if (job.status === 'completed') {
       clearInterval(iv);
       statusT.textContent = 'Completed';
-      const m = job.metrics || {};
+      const m    = job.metrics || {};
       const keys = Object.keys(m);
       const primary = keys[0];
       resultD.style.display = 'block';
@@ -313,6 +361,7 @@ function pollTraining(jobId) {
   }, 1000);
 }
 
+// ── Full dashboard refresh (stats + table + charts) ────────────────────────
 async function refreshStats() {
   try {
     const r = await fetch('/api/stats');
@@ -321,6 +370,12 @@ async function refreshStats() {
     document.getElementById('stat-completed').textContent = s.completed_runs;
     document.getElementById('stat-best').textContent      = s.best_metric;
     document.getElementById('stat-exps').textContent      = s.n_experiments;
+    if (s.recent_runs) updateRecentTable(s.recent_runs);
+    if (s.algo_counts && s.ds_counts) {
+      _algoCounts = s.algo_counts;
+      _dsCounts   = s.ds_counts;
+      renderCharts(_algoCounts, _dsCounts);
+    }
   } catch(_) {}
 }
 </script>