Adds interactive dashboard and GitHub Pages deployment

OptimumAF · OptimumAF · commit 42a4aa54ff83 · 2026-02-27T16:25:56.000-08:00
Enables hosting of benchmark dashboard via GitHub Pages, integrating interactive Plotly charts for accuracy, training speed, and inference latency.
Improves documentation and workflow for sharing results and visualizations.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -0,0 +1,40 @@
+name: Deploy Docs Dashboard
+
+on:
+  push:
+    branches: ["master"]
+    paths:
+      - "docs/**"
+      - ".github/workflows/pages.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload docs artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,11 @@ for versioning even while in research-stage development.
   - `scripts/generate_readme_figures.py`
   - generated PNG benchmark charts under `docs/figures/`
   - illustrative circadian adaptation GIF (`docs/figures/circadian_sleep_dynamics.gif`)
+  - interactive Plotly HTML chart outputs under `docs/figures/`
+- Docs dashboard and hosting:
+  - `docs/index.html` interactive chart dashboard
+  - `.github/workflows/pages.yml` for GitHub Pages deployment
+  - `docs/.nojekyll` for static pages compatibility
 - Ownership and governance metadata:
   - `.github/CODEOWNERS`
   - `docs/model-card.md`
@@ -41,6 +46,7 @@ for versioning even while in research-stage development.
   - circadian-first project framing
   - reproducible benchmark commands
   - badges, mermaid circadian loop diagram, benchmark visuals, and results snapshot tables
+  - dashboard and interactive chart links
   - governance and citation references
 - Updated `ARCHITECTURE.md` with clearer module boundaries and circadian-centric design intent.
 - Updated `CONTRIBUTING.md` with concrete contribution workflow and quality gates.
diff --git a/README.md b/README.md
@@ -59,6 +59,20 @@ This lets model capacity adapt over time instead of staying fixed.
 ![Training Speed Chart](docs/figures/benchmark_train_speed.png)
 ![Inference Latency Chart](docs/figures/benchmark_inference_latency_p95.png)
 
+Interactive dashboard:
+
+- [Benchmark Dashboard (GitHub Pages)](https://optimumaf.github.io/Circadian-Predictive-Coding/)
+- [Dashboard Source](docs/index.html)
+
+Interactive Plotly chart files:
+
+- [Accuracy (interactive)](https://optimumaf.github.io/Circadian-Predictive-Coding/figures/interactive_benchmark_accuracy.html)
+- [Training speed (interactive)](https://optimumaf.github.io/Circadian-Predictive-Coding/figures/interactive_benchmark_train_speed.html)
+- [Inference latency P95 (interactive)](https://optimumaf.github.io/Circadian-Predictive-Coding/figures/interactive_benchmark_inference_latency_p95.html)
+- [Interactive chart source files](docs/figures/)
+
+Note: GitHub README pages do not execute custom JavaScript, so Plotly interactivity will not run inline inside README itself.
+
 ### Circadian Dynamics (Illustrative)
 
 ![Circadian Sleep Dynamics](docs/figures/circadian_sleep_dynamics.gif)
@@ -145,6 +159,11 @@ Regenerate README charts:
 python scripts/generate_readme_figures.py --summary-csv benchmark_multiseed_cifar100_summary.csv --output-dir docs/figures
 ```
 
+Deploy dashboard via GitHub Pages:
+
+- Workflow: `.github/workflows/pages.yml`
+- Hosted entrypoint: `docs/index.html`
+
 ## Quality Commands
 
 ```powershell
diff --git a/docs/.nojekyll b/docs/.nojekyll
@@ -0,0 +1 @@
+
diff --git a/docs/figures/README.md b/docs/figures/README.md
@@ -8,6 +8,9 @@ This folder stores visual assets used by `README.md`.
 - `benchmark_train_speed.png`
 - `benchmark_inference_latency_p95.png`
 - `circadian_sleep_dynamics.gif`
+- `interactive_benchmark_accuracy.html`
+- `interactive_benchmark_train_speed.html`
+- `interactive_benchmark_inference_latency_p95.html`
 
 ## Regeneration
 
@@ -18,3 +21,9 @@ python scripts/generate_readme_figures.py --summary-csv benchmark_multiseed_cifa
 ```
 
 The GIF is illustrative and intended for communication in the README.
+Plotly HTML charts are interactive when opened in a normal browser context
+(local file, static host, or GitHub Pages).
+
+The combined dashboard page is at `docs/index.html`.
+When Pages is enabled, the live dashboard URL is:
+`https://optimumaf.github.io/Circadian-Predictive-Coding/`.
diff --git a/docs/figures/benchmark_accuracy.png b/docs/figures/benchmark_accuracy.png
diff --git a/docs/figures/benchmark_inference_latency_p95.png b/docs/figures/benchmark_inference_latency_p95.png
diff --git a/docs/figures/benchmark_train_speed.png b/docs/figures/benchmark_train_speed.png
diff --git a/docs/figures/interactive_benchmark_accuracy.html b/docs/figures/interactive_benchmark_accuracy.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Accuracy Comparison</title>
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+</head>
+<body style="font-family: Arial, sans-serif; margin: 0; background: #f8fafc;">
+  <div id="chart" style="width: 100%; max-width: 1080px; height: 640px; margin: 24px auto;"></div>
+  <script>
+    const payload = {"labels": ["Backprop", "Predictive", "Circadian"], "values": [0.6900666666666666, 0.681, 0.6714666666666668], "colors": ["#2e61ad", "#3d9d56", "#bd6624"], "title": "Accuracy Comparison", "y_label": "Mean test accuracy", "objective_note": "Higher is better", "range": [0.0, 1.0]};
+    const trace = {
+      x: payload.labels,
+      y: payload.values,
+      type: "bar",
+      marker: { color: payload.colors },
+      text: payload.values.map(v => String(v)),
+      textposition: "outside",
+      cliponaxis: false
+    };
+    const layout = {
+      title: { text: payload.title + "<br><sup>" + payload.objective_note + "</sup>" },
+      yaxis: { title: payload.y_label, range: payload.range },
+      xaxis: { title: "Model" },
+      margin: { l: 80, r: 40, t: 100, b: 80 },
+      paper_bgcolor: "#f8fafc",
+      plot_bgcolor: "#ffffff"
+    };
+    Plotly.newPlot("chart", [trace], layout, {responsive: true});
+  </script>
+</body>
+</html>
diff --git a/docs/figures/interactive_benchmark_inference_latency_p95.html b/docs/figures/interactive_benchmark_inference_latency_p95.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Inference Latency P95</title>
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+</head>
+<body style="font-family: Arial, sans-serif; margin: 0; background: #f8fafc;">
+  <div id="chart" style="width: 100%; max-width: 1080px; height: 640px; margin: 24px auto;"></div>
+  <script>
+    const payload = {"labels": ["Backprop", "Predictive", "Circadian"], "values": [17.338261666694166, 17.741378333375717, 18.710663333350414], "colors": ["#2e61ad", "#3d9d56", "#bd6624"], "title": "Inference Latency P95", "y_label": "Mean p95 inference latency (ms)", "objective_note": "Lower is better", "range": [17.173573466695416, 18.875351533349164]};
+    const trace = {
+      x: payload.labels,
+      y: payload.values,
+      type: "bar",
+      marker: { color: payload.colors },
+      text: payload.values.map(v => String(v)),
+      textposition: "outside",
+      cliponaxis: false
+    };
+    const layout = {
+      title: { text: payload.title + "<br><sup>" + payload.objective_note + "</sup>" },
+      yaxis: { title: payload.y_label, range: payload.range },
+      xaxis: { title: "Model" },
+      margin: { l: 80, r: 40, t: 100, b: 80 },
+      paper_bgcolor: "#f8fafc",
+      plot_bgcolor: "#ffffff"
+    };
+    Plotly.newPlot("chart", [trace], layout, {responsive: true});
+  </script>
+</body>
+</html>
diff --git a/docs/figures/interactive_benchmark_train_speed.html b/docs/figures/interactive_benchmark_train_speed.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Training Throughput</title>
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+</head>
+<body style="font-family: Arial, sans-serif; margin: 0; background: #f8fafc;">
+  <div id="chart" style="width: 100%; max-width: 1080px; height: 640px; margin: 24px auto;"></div>
+  <script>
+    const payload = {"labels": ["Backprop", "Predictive", "Circadian"], "values": [1775.275277733633, 1732.0788999689255, 1643.5856944964762], "colors": ["#2e61ad", "#3d9d56", "#bd6624"], "title": "Training Throughput", "y_label": "Mean training samples per second", "objective_note": "Higher is better", "range": [1630.4167361727605, 1788.4442360573487]};
+    const trace = {
+      x: payload.labels,
+      y: payload.values,
+      type: "bar",
+      marker: { color: payload.colors },
+      text: payload.values.map(v => String(v)),
+      textposition: "outside",
+      cliponaxis: false
+    };
+    const layout = {
+      title: { text: payload.title + "<br><sup>" + payload.objective_note + "</sup>" },
+      yaxis: { title: payload.y_label, range: payload.range },
+      xaxis: { title: "Model" },
+      margin: { l: 80, r: 40, t: 100, b: 80 },
+      paper_bgcolor: "#f8fafc",
+      plot_bgcolor: "#ffffff"
+    };
+    Plotly.newPlot("chart", [trace], layout, {responsive: true});
+  </script>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Circadian Predictive Coding Dashboard</title>
+  <style>
+    :root {
+      --bg: #f4f7fb;
+      --card: #ffffff;
+      --text: #1e2430;
+      --muted: #5c6475;
+      --accent: #bc6624;
+      --border: #d8deea;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: "Segoe UI", Tahoma, sans-serif;
+      background: radial-gradient(circle at 20% 10%, #eaf0fb 0%, var(--bg) 45%, #f8fafc 100%);
+      color: var(--text);
+    }
+
+    .wrap {
+      max-width: 1180px;
+      margin: 0 auto;
+      padding: 24px 20px 40px;
+    }
+
+    .hero {
+      background: linear-gradient(135deg, #ffffff 0%, #f3f6fc 58%, #ecf2fb 100%);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 20px;
+      box-shadow: 0 5px 20px rgba(30, 36, 48, 0.06);
+      margin-bottom: 16px;
+    }
+
+    h1 {
+      margin: 0 0 8px;
+      font-size: 1.65rem;
+      line-height: 1.2;
+    }
+
+    p {
+      margin: 0;
+      color: var(--muted);
+    }
+
+    .note {
+      margin-top: 10px;
+      font-size: 0.9rem;
+      color: #4d5565;
+    }
+
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 14px;
+      margin-bottom: 16px;
+    }
+
+    .card {
+      border: 1px solid var(--border);
+      background: var(--card);
+      border-radius: 12px;
+      padding: 14px;
+      box-shadow: 0 4px 14px rgba(30, 36, 48, 0.05);
+    }
+
+    .label {
+      margin: 0 0 4px;
+      font-size: 0.84rem;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .value {
+      margin: 0;
+      font-size: 1.15rem;
+      font-weight: 700;
+    }
+
+    .section {
+      border: 1px solid var(--border);
+      background: var(--card);
+      border-radius: 12px;
+      padding: 10px;
+      margin-bottom: 14px;
+      box-shadow: 0 4px 14px rgba(30, 36, 48, 0.05);
+    }
+
+    .section h2 {
+      margin: 8px 8px 6px;
+      font-size: 1rem;
+      color: var(--text);
+    }
+
+    iframe {
+      width: 100%;
+      height: 660px;
+      border: none;
+      border-radius: 10px;
+      background: #fff;
+    }
+
+    .footer {
+      margin-top: 18px;
+      color: var(--muted);
+      font-size: 0.9rem;
+      text-align: center;
+    }
+
+    .accent {
+      color: var(--accent);
+      font-weight: 700;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <section class="hero">
+      <h1>Circadian Predictive Coding Benchmark Dashboard</h1>
+      <p>Interactive benchmark views for accuracy, training throughput, and inference latency across backprop, predictive coding, and circadian predictive coding.</p>
+      <p class="note">
+        Source artifacts are generated by
+        <span class="accent">scripts/generate_readme_figures.py</span>
+        from benchmark summary CSV files.
+      </p>
+    </section>
+
+    <section class="cards">
+      <article class="card">
+        <p class="label">Focus</p>
+        <p class="value">Circadian Predictive Coding</p>
+      </article>
+      <article class="card">
+        <p class="label">Reference Baselines</p>
+        <p class="value">Backprop + Predictive Coding</p>
+      </article>
+      <article class="card">
+        <p class="label">Current Dataset Profile</p>
+        <p class="value">CIFAR-100 Multi-seed Summary</p>
+      </article>
+    </section>
+
+    <section class="section">
+      <h2>Accuracy (Interactive)</h2>
+      <iframe src="figures/interactive_benchmark_accuracy.html" title="Interactive accuracy chart"></iframe>
+    </section>
+
+    <section class="section">
+      <h2>Training Throughput (Interactive)</h2>
+      <iframe src="figures/interactive_benchmark_train_speed.html" title="Interactive training throughput chart"></iframe>
+    </section>
+
+    <section class="section">
+      <h2>Inference Latency P95 (Interactive)</h2>
+      <iframe src="figures/interactive_benchmark_inference_latency_p95.html" title="Interactive inference latency chart"></iframe>
+    </section>
+
+    <p class="footer">
+      Circadian Predictive Coding Dashboard. For repository details, open
+      <a href="https://github.com/OptimumAF/Circadian-Predictive-Coding">README.md on GitHub</a>.
+    </p>
+  </div>
+</body>
+</html>
diff --git a/scripts/generate_readme_figures.py b/scripts/generate_readme_figures.py
