Update QML Classifier Explorer

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/preview_boundaries.png filter=lfs diff=lfs merge=lfs -text
+assets/preview_ui_sketch.png filter=lfs diff=lfs merge=lfs -text

ANALYSIS.md

@@ -0,0 +1,204 @@
+# Problem 2 分析
+
+## 題目背景
+
+這題要比較三種主流的量子機器學習（QML）分類方法，在兩個二元分類資料集上的表現。題目的核心問題是：**量子電路要怎麼「看」輸入資料？** 三種方法對這個問題的回答完全不同。
+
+- **Explicit**：一開始 encode 一次，之後全靠 variational block 去學
+- **Kernel**：完全不訓練，用量子電路定義一個 inner product，然後丟給 classical SVM
+- **Reuploading**：每一層都重新把資料 encode 進去，讓量子態隨資料一起演化
+
+這三種方法的比較是現在 QML 領域真正在研究的核心問題之一，不是 toy demo。
+
+---
+
+## 資料集
+
+兩個資料集都是 2D 二元分類，200 個點，70/30 train/test split，所有特徵都經過 `StandardScaler` 正規化。
+
+### Circle
+
+```
+Label = 1  if  ‖x‖ < r,  where r = √(2/π) ≈ 0.798
+```
+
+在 `[−1, 1]²` 上均勻取樣。這個半徑不是隨便選的：圓的面積 = πr² = 2，正方形面積 = 4，所以剛好一半點在圓內，一半在外，**類別完全平衡**。
+
+邊界是一條完美的圓弧，是光滑的非線性邊界，但在概念上非常乾淨。對量子模型來說，這是個幾何測試：你的表示空間能不能把「遠離原點」跟「靠近原點」分開？
+
+### Moons
+
+sklearn 的 `make_moons(noise=0.1)`。兩個半月形互相交叉，邊界是非凸的，沒有辦法直接用一條曲線分開，需要兩個獨立的局部決策。這對所有方法都是更硬的挑戰。
+
+---
+
+## 三個方法
+
+### 方法一：Explicit Quantum Model
+
+**架構概念**：先把資料 encode 進量子態，再用一組 variational block 去轉動，最後量測。
+
+**電路（L 層）**：
+
+```
+q0: ─[RX(x₀)]──[RY(θ)]─[RZ(θ)]─●──[RY(θ)]─[RZ(θ)]─●── ··· ─⟨Z₀⟩
+                                  │                   │
+q1: ─[RX(x₁)]──[RY(θ)]─[RZ(θ)]─X──[RY(θ)]─[RZ(θ)]─X── ···
+     ↑ encode  └──────── layer 1 ─────────┘└──── layer 2 ────┘
+      once
+```
+
+- **Encoding**：固定在第 0 層之前，`RX(x₀)` 和 `RX(x₁)` 各做一次
+- **每層**：每個 qubit 做 `RY(θ)` + `RZ(θ)`，然後一個 `CNOT(0→1)` 負責 qubit 間糾纏
+- **輸出**：量測 `⟨Z₀⟩`，映射為 class-1 的機率：`p = (⟨Z₀⟩ + 1) / 2`
+- **Optimizer**：Adam，BCE loss
+- **可訓練參數**：`4L`（L 層 × 2 qubits × 2 角度）
+
+**關鍵限制**：資料只在最前面進入量子電路一次，之後 variational block 完全不再「看到」原始資料。這代表整個電路的表達能力受到初始 encoding 的 Hilbert space 嚴格限制。電路能學的邊界形狀，完全取決於 `RX(x₀), RX(x₁)` 初始化後的量子態空間。
+
+---
+
+### 方法二：Implicit Quantum Kernel (IQK)
+
+**架構概念**：不訓練量子電路，而是用電路定義一個 **kernel function**，讓兩點 xᵢ, xⱼ 的「量子相似度」決定分類邊界。Classical SVM 負責找最優超平面。
+
+**Feature map S(x)**：
+
+```
+q0: ─[H]─[RZ(x₀)]──────────────
+                   ↘
+q1: ─[H]─[RZ(x₁)]─[CNOT]─[RZ(x₀·x₁)]─
+```
+
+`H ⊗ H` 先把兩個 qubit 放進均勻疊加態，`RZ` 旋轉對應到資料的每個維度，`CNOT + RZ(x₀·x₁)` 加入交叉項，讓 kernel 能捕捉 x₀ 和 x₁ 的乘積關係。
+
+**Kernel 定義**：
+
+```
+k(xᵢ, xⱼ) = |⟨0 | S†(xᵢ) S(xⱼ) | 0⟩|²
+           = Pr( measure |00⟩ after S†(xᵢ)·S(xⱼ) )
+```
+
+把 S(xⱼ) 先做完，再做 S(xᵢ) 的反轉，量測回到 `|00⟩` 的機率。兩點「越相似」，機率越高，kernel 值越大。
+
+**訓練流程**：
+1. 算出訓練集完整的 `n×n` kernel matrix（需要 n² 次電路評估）
+2. 把這個 matrix 丟給 `SVC(kernel="precomputed")` 做訓練
+3. Inference 時只對測試點跟 **support vectors** 計算 kernel（不是全部訓練點）
+
+**可訓練參數**：**0 個量子參數**。整個 feature map 是固定的，不做任何梯度更新。模型容量來自 SVM 的 dual coefficients，其數量等於 support vector 的數量。
+
+**複雜度指標**：`count_model_complexity()` 回傳 kernel evaluations 的次數（訓練時 n²，推論時 n × n_sv）。
+
+---
+
+### 方法三：Data Reuploading Classifier
+
+**架構概念**：每一層都重新把資料 encode 進去，讓資料和量子態深度交織。每次 encode 的 scale 和 bias 都是可學的，讓模型能自動決定「這個 encoding 的重要性」。
+
+**電路（L 層）**：
+
+```
+q0: ─[RX(x₀·s₀⁽¹⁾+b₀⁽¹⁾)]─[RY(θ)]─[RZ(θ)]─●─[RX(x₀·s₀⁽²⁾+b₀⁽²⁾)]─ ··· ─⟨Z₀⟩
+                                               │
+q1: ─[RX(x₁·s₁⁽¹⁾+b₁⁽¹⁾)]─[RY(θ)]─[RZ(θ)]─X─[RX(x₁·s₁⁽²⁾+b₁⁽²⁾)]─ ···
+     └────────────��─── layer 1 ────────────────┘└──── layer 2 ────────
+```
+
+- **每層 encode**：`RX(xᵢ · scale[l,i] + bias[l,i])`，scale 和 bias 都是可訓練的
+- **每層旋轉**：同 explicit，`RY(θ)` + `RZ(θ)` per qubit
+- **每層糾纏**：`CNOT(0→1)`
+- **輸出**：`⟨Z₀⟩` → 機率（同 explicit）
+- **Optimizer**：Adam，BCE loss
+- **可訓練參數**：`8L`（L 層 × 2 qubits × (1 scale + 1 bias + 2 rotations)）
+
+**為什麼 reuploading 更強？**
+
+在 Explicit 模型裡，資料只出現一次，相當於電路只能使用固定頻率成分。Reuploading 每層都重新 inject，理論上等價於一個 truncated Fourier series：**層數越多，可以近似的頻率越高，決策邊界可以越複雜**。
+
+Pérez-Salinas et al. (2020) 證明了單一 qubit 的 data reuploading 是 universal approximator，前提是層數夠多。
+
+---
+
+## 三種方法的本質差異
+
+|  | Explicit | Kernel | Reuploading |
+|---|---|---|---|
+| **資料進入電路** | 一次（固定 encoding） | 隱式（定義相似度） | 每層一次 |
+| **訓練方式** | 梯度下降 (Adam) | 無量子訓練（SVM） | 梯度下降 (Adam) |
+| **可訓練量子參數** | 4L | 0 | 8L |
+| **表達能力隨 L** | 有限增長 | 固定（取決於 feature map） | Fourier 頻率隨 L 線性增加 |
+| **訓練複雜度** | O(n·L) per epoch | O(n²) 一次性 | O(n·L) per epoch |
+| **推論複雜度** | O(L) per point | O(n_sv) per point | O(L) per point |
+
+---
+
+## 看 viewer 時的注意點
+
+**Slider**：拖動 slider 可以看訓練過程中決策邊界是怎麼形成的。Explicit 和 Reuploading 會隨 epoch 演化，Kernel 的邊界是固定的（只在 epoch 0 計算一次，之後複用）。
+
+**6 個 panel 的對比邏輯**：
+- 同一 row（同個 dataset）：三種方法在相同資料上的表現差異
+- 同一 column（同個方法）：同一方法面對不同幾何結構的適應能力
+
+**Circle vs Moons 的預期差異**：Circle 的邊界光滑，相對容易；Moons 非凸，需要更高的表達能力。特別值得觀察 Kernel 在 Moons 上的邊界能不能捕捉非凸結構，以及 Explicit 在層數不夠時是否會失敗。
+
+**Reuploading 的早期行為**：scale 初始化為 1、bias 初始化為 0，早期 epoch 的邊界可能很不穩定，後期才收斂成有意義的形狀。這個過程和 Explicit 的演化方式會明顯不同。
+
+---
+
+## 結果討論
+
+### 數字總覽
+
+| Run | LE | LR | Explicit Circle | Explicit Moons | Kernel Circle | Kernel Moons | Reup Circle | Reup Moons |
+|---|---|---|---|---|---|---|---|---|
+| q2-le2-lr2 | 2 | 2 | 70.0% | 83.3% | 96.7% | 85.0% | 78.3% | 93.3% |
+| q2-le4-lr4 | 4 | 4 | 75.0% | 83.3% | 96.7% | 85.0% | 91.7% | 98.3% |
+| q2-le4-lr8 | 4 | 8 | 75.0% | 83.3% | 96.7% | 85.0% | 96.7% | **100%** |
+| q2-le6-lr6 | 6 | 6 | 73.3% | 85.0% | 96.7% | 85.0% | 96.7% | 98.3% |
+
+---
+
+### Explicit：一次 encoding 的代價
+
+Explicit 在所有 run 裡表現最差，且**幾乎不隨層數增加而改善**——Circle 從 L=2 的 70% 到 L=4 的 75%，之後就停在那裡；Moons 更是從頭到尾卡在 83–85%。
+
+這直接反映它的架構限制：資料在最前面用 `RX(x₀), RX(x₁)` encode 一次後，後面的 variational block 完全看不到原始資料，只能在初始量子態的 Hilbert space 裡轉來轉去。問題在於 `RX` 是獨立旋轉兩個 qubit，**沒有直接 encode `‖x‖² = x₀² + x₁²`**，而 Circle 的邊界正好是一個等半徑圓。這個資訊被 encoding 本身丟掉了，後面再多層都補不回來。
+
+Moons 上 Explicit 能到 83–85%，比 Circle 好，是因為 `CNOT` 糾纏讓兩個 qubit 之間有互動，對局部結構稍微好一點。但非凸邊界對它來說仍然太難。
+
+---
+
+### Kernel：不訓練的底氣
+
+Kernel 的數字在所有 run 都一樣（Circle 96.7%、Moons 85.0%），因為它的量子電路是固定的，feature map 和 kernel matrix 不隨 LE/LR 改變。
+
+Circle 上 96.7% 很亮眼。ZZFeatureMap 用了 `H + RZ(xᵢ) + CNOT + RZ(x₀·x₁)` 的結構，cross term `x₀·x₁` 等價於引入 `cos(θ)sin(θ)` 型的非線性，再經過 kernel 的 inner product，能夠隱式地「感覺到」資料點離原點的距離，讓 SVM 在這個空間找到一個很好的超平面。
+
+Moons 上卡在 85%。非凸邊界需要兩個獨立的局部決策，但固定的 kernel 只有一個 feature space，SVM 能用的支持向量有限，沒辦法做出兩個分離的決策區域。這是 **kernel expressibility 的天花板**，不是訓練問題。
+
+**有趣的 reversal**：在 Circle 上，Kernel（96.7%）大勝小層數的 Reuploading（L=2 只有 78.3%）。這說明針對特定幾何結構設計的固定 feature map，可以比沒有學夠的 variational 模型更有效率。
+
+---
+
+### Reuploading：層數的力量
+
+Reuploading 是三個方法裡唯一**隨層數有系統性提升**的：
+
+- **Circle**：L=2 → 78.3%，L=4 → 91.7%，L=6/8 → 96.7%
+- **Moons**：L=2 → 93.3%，L=4 → 98.3%，L=8 → **100%**
+
+這和理論預測完全一致。每多一層 reuploading，Fourier 近似可以用的最高頻率就增加一次，決策邊界可以描述的形狀就更複雜。Moons 在 L=8 達到 100%，代表 8 個 Fourier 頻率已經足夠描述這個非凸邊界。
+
+值得注意的是 LR=8 比 LR=6 在 Moons 上多了 1.7%（100% vs 98.3%），而在 Circle 上兩者持平（96.7%）。這說明 Circle 在 L=6 時已經學夠了，Moons 需要多一點頻率才能消除剩下的錯誤。
+
+---
+
+### 整體結論
+
+這三種方法的結果清楚地反映了各自的設計哲學：
+
+- **Explicit 的天花板來自 encoding**，不是 variational 層數。在資訊進入電路的那一刻就決定了模型能學什麼。
+- **Kernel 的強項是針對特定幾何結構的隱式表達**，但 feature map 的選擇決定上限，沒有辦法靠訓練突破。
+- **Reuploading 是最靈活的**，代價是需要更多層（更多電路深度）來達到同樣的效果。在 NISQ 裝置上電路深度越深，noise 越嚴重，這個 trade-off 在真實硬體上會更明顯。

ANSWERS.md

@@ -0,0 +1,20 @@
+# Problem 2 解題作答
+
+_作答將在實驗完成後填入。_
+
+## (a) Fig. 6 重現（circle dataset）
+
+## (b) Decision boundaries（3×2 grid）
+
+## (c) 比較表
+
+| Method | Dataset | Test Acc | Params / Kernel evals | Training time |
+|--------|---------|----------|-----------------------|---------------|
+| Explicit | Circle | — | — | — |
+| Explicit | Moons | — | — | — |
+| Implicit Kernel | Circle | — | — | — |
+| Implicit Kernel | Moons | — | — | — |
+| Data Reuploading | Circle | — | — | — |
+| Data Reuploading | Moons | — | — | — |
+
+## (d) 討論

README.md

@@ -1,10 +1,46 @@
 ---
 title: QML Classifier Explorer
-emoji: 🌍
-colorFrom: pink
-colorTo: pink
+emoji: 🔬
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# QML Classifier Explorer
+
+Static Hugging Face viewer for **HW1 Problem 2** — comparing three quantum
+machine learning classification methods on two datasets.
+
+## What this experiment is about
+
+Three QML approaches are evaluated on binary classification:
+
+| Method | Description |
+|--------|-------------|
+| **Explicit Quantum Model** | Encoding circuit S(x) + trainable W(θ) + measurement |
+| **Implicit Quantum Kernel** | Fixed encoding kernel k(xi, xj) passed to SVM |
+| **Data Reuploading** | Interleaved encoding and trainable layers (Ref. [4]) |
+
+Two datasets:
+- **Circle** — concentric ring structure (as used in Ref. [4])
+- **Moons** — `sklearn.datasets.make_moons(noise=0.1, n_samples=200)`
+
+## Viewer contents
+
+1. **Decision boundary grid** — 3 methods × 2 datasets (6 plots)
+2. **Training curve** — accuracy and loss vs epoch, with step slider
+3. **Comparison table** — test accuracy, trainable parameters, training time
+
+## Generating runtime data
+
+Run on `gx10`:
+
+```bash
+# training + export
+ssh gx10 "cd ~/quantum_computing && GX10_DOCKER_NETWORK=gx10-mlflow ./scripts/gx10_run_py.sh HW1/problem2/train.py --run-name q2-l4-e50 --tracking-uri http://gx10-mlflow-server:5001"
+```
+
+The export populates `runtime/viewer_data.json` which the viewer picks up
+automatically. Without a runtime export the viewer shows the template
+placeholder.

css/base.css

@@ -0,0 +1,146 @@
+:root {
+    --bg: #f4efe5;
+    --bg-accent: #e5f0e8;
+    --panel: rgba(255, 252, 245, 0.92);
+    --panel-strong: rgba(255, 248, 234, 0.98);
+    --text: #17211d;
+    --muted: #51615b;
+    --line: rgba(23, 33, 29, 0.12);
+    --brand: #0d8f71;
+    --brand-soft: rgba(13, 143, 113, 0.14);
+    --accent: #ef8354;
+    --shadow: 0 18px 60px rgba(20, 30, 28, 0.08);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
+    font-family: "IBM Plex Sans", sans-serif;
+    color: var(--text);
+    background:
+        radial-gradient(circle at top left, rgba(239, 131, 84, 0.2), transparent 28%),
+        radial-gradient(circle at top right, rgba(13, 143, 113, 0.18), transparent 24%),
+        linear-gradient(135deg, var(--bg) 0%, var(--bg-accent) 100%);
+}
+
+.page-shell {
+    display: grid;
+    grid-template-columns: minmax(300px, 360px) 1fr;
+    gap: 20px;
+    padding: 24px;
+    height: 100vh;
+    min-height: 0;
+}
+
+.control-rail,
+.content-pane {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    min-height: 0;
+}
+
+.control-rail {
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+}
+
+.content-pane {
+    overflow: hidden;
+}
+
+.hero-card,
+.panel-card,
+.canvas-card {
+    border: 1px solid var(--line);
+    background: var(--panel);
+    backdrop-filter: blur(14px);
+    border-radius: 24px;
+    box-shadow: var(--shadow);
+}
+
+.hero-card {
+    padding: 14px 18px;
+    background: linear-gradient(160deg, rgba(255, 252, 245, 0.98), rgba(245, 255, 250, 0.94));
+}
+
+.panel-card {
+    padding: 20px;
+}
+
+.canvas-card {
+    padding: 22px;
+    min-height: 0;
+}
+
+.eyebrow {
+    margin: 0 0 4px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--brand);
+}
+
+h1,
+h2 {
+    margin: 0;
+    font-family: "Space Grotesk", sans-serif;
+}
+
+h1 {
+    font-size: clamp(1.35rem, 2vw, 1.8rem);
+    line-height: 1.05;
+}
+
+h2 {
+    font-size: 1.3rem;
+}
+
+.muted {
+    color: var(--muted);
+}
+
+.hero-card .muted {
+    margin: 4px 0 0;
+    font-size: 0.88rem;
+    line-height: 1.25;
+}
+
+/* ── Mobile layout ────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+    body {
+        height: auto;
+        min-height: 100vh;
+        overflow: auto;
+    }
+
+    .page-shell {
+        grid-template-columns: 1fr;
+        height: auto;
+        min-height: 0;
+        padding: 12px;
+        gap: 12px;
+        overflow: visible;
+    }
+
+    .control-rail,
+    .content-pane {
+        overflow: visible;
+        gap: 12px;
+    }
+
+    .canvas-card {
+        padding: 14px;
+    }
+
+    .panel-card {
+        padding: 14px;
+    }
+}

css/charts.css

@@ -0,0 +1,238 @@
+/* ── canvas-card flex column (lets children fill height) ────────────────── */
+
+.content-pane > .canvas-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.content-pane > .canvas-card:first-child {
+    flex: 2 1 0;
+    min-height: 0;
+}
+
+.content-pane > .canvas-card:last-child {
+    flex: 1 1 0;
+    min-height: 0;
+}
+
+/* ── decision-boundary grid ─────────────────────────────────────────────── */
+
+.boundary-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    margin-top: 10px;
+}
+
+.boundary-card {
+    position: relative;
+    border: 1px solid var(--line);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.55);
+    overflow: hidden;
+    min-height: 0;
+}
+
+.boundary-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    padding: 3px 8px;
+    font-size: 0.76rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    gap: 6px;
+    background: rgba(255, 255, 255, 0.72);
+    backdrop-filter: blur(4px);
+    border-radius: 13px 13px 0 0;
+    pointer-events: none;
+}
+
+.boundary-method-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 7px;
+    border-radius: 999px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: var(--brand-soft);
+    color: var(--brand);
+}
+
+.boundary-method-tag.tag-kernel {
+    background: rgba(239, 131, 84, 0.12);
+    color: #8a4b10;
+}
+
+.boundary-method-tag.tag-explicit {
+    background: rgba(91, 80, 200, 0.12);
+    color: #3a2f8a;
+}
+
+.boundary-plot {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* ── accuracy pill ──────────────────────────────────────────────────────── */
+
+.acc-pill {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 7px;
+    border-radius: 999px;
+    font-size: 0.76rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    background: rgba(23, 33, 29, 0.07);
+    color: var(--text);
+    margin-left: auto;
+}
+
+/* ── loss / accuracy chart ──────────────────────────────────────────────── */
+
+.chart-wrap {
+    flex: 1 1 auto;
+    min-height: 0;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding-top: 4px;
+}
+
+#loss-chart {
+    flex: 1 1 auto;
+    min-height: 0;
+    width: 100%;
+    border-radius: 18px;
+    border: 1px solid rgba(23, 33, 29, 0.08);
+    background:
+        linear-gradient(180deg, rgba(13, 143, 113, 0.05), rgba(13, 143, 113, 0)),
+        white;
+}
+
+.plot-surface {
+    width: 100%;
+    height: 100%;
+}
+
+.plot-surface-wide {
+    min-height: 160px;
+    flex: 1 1 auto;
+}
+
+.chart-empty {
+    position: absolute;
+    inset: 4px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    font-size: 0.9rem;
+    color: var(--muted);
+    text-align: center;
+    border: 1px dashed rgba(23, 33, 29, 0.18);
+    border-radius: 18px;
+    background: rgba(255, 252, 245, 0.85);
+}
+
+.chart-empty[hidden] {
+    display: none !important;
+}
+
+/* ── boundary home buttons ──────────────────────────────────────────────── */
+
+.boundary-home-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    margin-left: auto;
+}
+
+.home-btn {
+    padding: 3px 11px;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: white;
+    color: var(--muted);
+    font: inherit;
+    font-size: 0.76rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 120ms ease, color 120ms ease;
+}
+
+.home-btn:hover {
+    background: var(--brand-soft);
+    color: var(--brand);
+}
+
+/* ── dataset toggle ─────────────────────────────────────────────────────── */
+
+.dataset-toggle {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: 999px;
+    background: rgba(23, 33, 29, 0.07);
+    flex: 0 0 auto;
+}
+
+.dataset-toggle-btn {
+    padding: 4px 14px;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--muted);
+    font: inherit;
+    font-size: 0.82rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 160ms ease, color 160ms ease;
+}
+
+.dataset-toggle-btn.is-active {
+    background: white;
+    color: var(--brand);
+    box-shadow: 0 2px 8px rgba(20, 30, 28, 0.1);
+}
+
+/* ── responsive ─────────────────────────────────────────────────────────── */
+
+@media (max-width: 1100px) {
+    body {
+        height: auto;
+        overflow: auto;
+    }
+
+    .page-shell {
+        grid-template-columns: 1fr;
+        height: auto;
+    }
+
+    .content-pane > .canvas-card:first-child,
+    .content-pane > .canvas-card:last-child {
+        flex: none;
+        min-height: 480px;
+    }
+
+    .boundary-grid {
+        grid-template-rows: repeat(3, 240px);
+    }
+}

css/components.css

@@ -0,0 +1,490 @@
+.hero-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.hero-info-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+}
+
+.hero-info-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid rgba(23, 33, 29, 0.12);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.72);
+    color: var(--brand);
+    font-family: "Space Grotesk", sans-serif;
+    font-size: 0.95rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+    flex: 0 0 auto;
+    animation: infoPulse 2.4s ease-in-out infinite;
+}
+
+.hero-info-button:hover {
+    background: rgba(13, 143, 113, 0.12);
+    transform: translateY(-1px);
+    box-shadow: 0 10px 22px rgba(20, 30, 28, 0.1);
+}
+
+.hero-info-button:focus-visible {
+    outline: 2px solid rgba(13, 143, 113, 0.35);
+    outline-offset: 2px;
+}
+
+.hero-info-button-secondary {
+    color: #8a4b0f;
+    border-color: rgba(138, 75, 15, 0.16);
+    background: rgba(255, 246, 230, 0.88);
+    animation: none;
+}
+
+.hero-info-button-secondary:hover {
+    background: rgba(232, 158, 33, 0.16);
+}
+
+.hero-info-button-secondary:focus-visible {
+    outline-color: rgba(232, 158, 33, 0.35);
+}
+
+.analysis-hint {
+    position: absolute;
+    top: calc(100% + 10px);
+    right: -6px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px 8px 12px;
+    border-radius: 14px;
+    border: 1px solid rgba(23, 33, 29, 0.1);
+    background: rgba(255, 252, 245, 0.98);
+    color: var(--text);
+    box-shadow: 0 18px 36px rgba(20, 30, 28, 0.12);
+    white-space: nowrap;
+    z-index: 4;
+    animation: hintFloat 2.8s ease-in-out infinite;
+}
+
+.analysis-hint::before {
+    content: "";
+    position: absolute;
+    top: -6px;
+    right: 14px;
+    width: 12px;
+    height: 12px;
+    background: rgba(255, 252, 245, 0.98);
+    border-top: 1px solid rgba(23, 33, 29, 0.1);
+    border-left: 1px solid rgba(23, 33, 29, 0.1);
+    transform: rotate(45deg);
+}
+
+.analysis-hint-text {
+    position: relative;
+    z-index: 1;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--muted);
+}
+
+.analysis-hint-close {
+    position: relative;
+    z-index: 1;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(23, 33, 29, 0.08);
+    color: var(--text);
+    font-size: 0.95rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+@keyframes infoPulse {
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(13, 143, 113, 0.0);
+        transform: translateY(0);
+    }
+
+    45% {
+        box-shadow: 0 0 0 8px rgba(13, 143, 113, 0.0), 0 0 0 0 rgba(13, 143, 113, 0.16);
+        transform: translateY(-1px);
+    }
+
+    60% {
+        box-shadow: 0 0 0 10px rgba(13, 143, 113, 0.0), 0 0 0 0 rgba(13, 143, 113, 0.0);
+    }
+}
+
+@keyframes hintFloat {
+
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-2px);
+    }
+}
+
+.panel-header,
+.section-heading {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.status-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 32px;
+    padding: 0 12px;
+    border-radius: 999px;
+    background: var(--brand-soft);
+    color: var(--brand);
+    font-size: 0.84rem;
+    font-weight: 700;
+}
+
+.loading-panel {
+    display: grid;
+    gap: 8px;
+    margin: 12px 0 16px;
+}
+
+.loading-panel[hidden] {
+    display: none !important;
+}
+
+.loading-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 0.92rem;
+}
+
+.loading-meta strong {
+    font-size: 0.94rem;
+}
+
+.loading-track {
+    overflow: hidden;
+    width: 100%;
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(23, 33, 29, 0.08);
+}
+
+.loading-bar {
+    width: 0%;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
+    transition: width 180ms ease;
+}
+
+.slider-label,
+.meta-label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+input[type="range"] {
+    width: 100%;
+    margin: 8px 0 12px;
+    accent-color: var(--brand);
+}
+
+.run-select {
+    width: 100%;
+    margin: 8px 0 12px;
+    padding: 12px 14px;
+    border: 1px solid rgba(23, 33, 29, 0.12);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--text);
+    font: inherit;
+}
+
+.hidden-control {
+    display: none !important;
+}
+
+[hidden] {
+    display: none !important;
+}
+
+.results-table-wrap {
+    overflow-x: auto;
+    overflow-y: auto;
+    margin: 8px 0 12px;
+    border: 1px solid rgba(23, 33, 29, 0.08);
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.7);
+    max-height: 26vh;
+}
+
+.results-table {
+    width: 100%;
+    min-width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+}
+
+.results-table th,
+.results-table td {
+    padding: 10px 10px;
+    text-align: left;
+    border-bottom: 1px solid rgba(23, 33, 29, 0.08);
+    white-space: nowrap;
+}
+
+.results-table th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: rgba(255, 248, 234, 0.98);
+    font-size: 0.74rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted);
+}
+
+.results-table tbody tr {
+    cursor: pointer;
+    transition: background 160ms ease, color 160ms ease;
+}
+
+.results-table tbody tr:hover {
+    background: rgba(13, 143, 113, 0.08);
+}
+
+.results-table tbody tr.is-selected {
+    background: rgba(13, 143, 113, 0.14);
+}
+
+.results-table td.metric-cell {
+    font-variant-numeric: tabular-nums;
+}
+
+.results-table td.metric-cell-strong {
+    font-weight: 700;
+    color: var(--brand);
+}
+
+.results-table td.run-cell {
+    max-width: 88px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.step-meta {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.step-meta strong {
+    font-size: 1rem;
+}
+
+.timeline-controls {
+    display: grid;
+    gap: 4px;
+    margin-top: 2px;
+    flex: 0 0 auto;
+}
+
+.timeline-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.timeline-meta-item {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 7px 9px;
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(23, 33, 29, 0.08);
+}
+
+.timeline-meta-item strong {
+    font-size: 0.95rem;
+}
+
+.timeline-title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: nowrap;
+    min-width: 0;
+}
+
+.timeline-slider-inline {
+    display: flex;
+    align-items: center;
+    flex: 0 0 200px;
+    min-width: 160px;
+    max-width: 200px;
+}
+
+.timeline-slider-inline input[type="range"] {
+    width: 100%;
+    margin: 0;
+}
+
+.timeline-title-pill {
+    display: inline-flex;
+    align-items: center;
+    min-height: 28px;
+    padding: 0 10px;
+    border-radius: 999px;
+    background: rgba(13, 143, 113, 0.1);
+    color: var(--brand);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+.timeline-title-metrics {
+    font-size: 0.88rem;
+    line-height: 1.25;
+    color: var(--muted);
+}
+
+.timeline-metrics-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 1 auto;
+    min-width: 0;
+    flex-wrap: nowrap;
+}
+
+.timeline-title-metrics-status {
+    flex: 0 1 auto;
+    white-space: nowrap;
+}
+
+.timeline-metric-pill {
+    background: rgba(23, 33, 29, 0.06);
+    color: var(--text);
+    font-weight: 600;
+    white-space: nowrap;
+}
+
+.timeline-metric-pill-test {
+    background: rgba(239, 131, 84, 0.12);
+    color: #9a4d28;
+}
+
+.section-heading-compact {
+    margin-top: 2px;
+}
+
+.meta-list {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 10px;
+    margin: 0;
+}
+
+.experiment-card {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.experiment-reference-stack {
+    margin-bottom: 0;
+}
+
+.experiment-scroll {
+    display: grid;
+    gap: 16px;
+    overflow: auto;
+    flex: 1 1 auto;
+    min-height: 0;
+    padding-right: 4px;
+}
+
+.meta-list div {
+    display: grid;
+    gap: 4px;
+    padding: 12px 14px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.55);
+    border: 1px solid rgba(23, 33, 29, 0.08);
+}
+
+.meta-list dt {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.meta-list dd {
+    margin: 0;
+    font-size: 0.98rem;
+    line-height: 1.4;
+}
+
+.reference-stack {
+    display: grid;
+    gap: 14px;
+}
+
+.reference-figure {
+    margin: 0;
+    display: grid;
+    gap: 8px;
+}
+
+.reference-figure img {
+    width: 100%;
+    display: block;
+    border-radius: 18px;
+    border: 1px solid rgba(23, 33, 29, 0.08);
+    background: white;
+    cursor: zoom-in;
+    transition: transform 160ms ease, box-shadow 160ms ease;
+}
+
+.reference-figure img:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 28px rgba(20, 30, 28, 0.14);
+}
+
+.reference-figure figcaption {
+    font-size: 0.9rem;
+    color: var(--muted);
+}

css/overlays.css

@@ -0,0 +1,194 @@
+.image-lightbox {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    z-index: 10010;
+}
+
+.image-lightbox[hidden] {
+    display: none !important;
+}
+
+.image-lightbox-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(23, 33, 29, 0.56);
+    backdrop-filter: blur(4px);
+}
+
+.image-lightbox-dialog {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: 10px;
+    width: min(92vw, 1120px);
+    max-height: calc(100vh - 48px);
+    padding: 18px 18px 14px;
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 252, 245, 0.98);
+    box-shadow: 0 32px 80px rgba(20, 30, 28, 0.35);
+}
+
+.image-lightbox-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(23, 33, 29, 0.08);
+    color: var(--text);
+    font-size: 1.5rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.image-lightbox-image {
+    width: 100%;
+    height: auto;
+    max-height: calc(100vh - 132px);
+    object-fit: contain;
+    border-radius: 18px;
+    background: white;
+}
+
+.image-lightbox-caption {
+    margin: 0;
+    text-align: center;
+    color: var(--muted);
+    font-size: 0.92rem;
+}
+
+.analysis-modal {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    z-index: 10000;
+}
+
+.analysis-modal[hidden] {
+    display: none !important;
+}
+
+.analysis-modal-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(23, 33, 29, 0.56);
+    backdrop-filter: blur(6px);
+}
+
+.analysis-modal-dialog {
+    position: relative;
+    z-index: 1;
+    width: min(900px, calc(100vw - 48px));
+    max-height: calc(100vh - 48px);
+    border-radius: 28px;
+    border: 1px solid rgba(255, 255, 255, 0.24);
+    background: rgba(255, 252, 245, 0.98);
+    box-shadow: 0 32px 84px rgba(20, 30, 28, 0.34);
+    overflow: hidden;
+}
+
+.analysis-modal-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 38px;
+    height: 38px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(23, 33, 29, 0.08);
+    color: var(--text);
+    font-size: 1.55rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.analysis-modal-content {
+    overflow: auto;
+    max-height: calc(100vh - 48px);
+    padding: 28px 30px 28px;
+}
+
+.analysis-modal-label {
+    margin: 0 0 14px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+}
+
+.analysis-markdown {
+    color: var(--text);
+    line-height: 1.75;
+}
+
+.analysis-markdown h1,
+.analysis-markdown h2,
+.analysis-markdown h3 {
+    font-family: "Space Grotesk", sans-serif;
+    line-height: 1.15;
+}
+
+.analysis-markdown h1 {
+    margin: 0 0 12px;
+    font-size: 1.62rem;
+}
+
+.analysis-markdown h2 {
+    margin: 28px 0 10px;
+    font-size: 1.1rem;
+    padding-top: 18px;
+    border-top: 1px solid rgba(23, 33, 29, 0.08);
+}
+
+.analysis-markdown h2:first-child,
+.analysis-markdown h1+h2 {
+    border-top: 0;
+    padding-top: 0;
+}
+
+.analysis-markdown p {
+    margin: 0 0 14px;
+}
+
+.analysis-markdown img {
+    display: block;
+    width: min(100%, 760px);
+    margin: 18px auto 14px;
+    border-radius: 18px;
+    border: 1px solid rgba(23, 33, 29, 0.1);
+    box-shadow: 0 12px 30px rgba(23, 33, 29, 0.08);
+    cursor: zoom-in;
+    transition: transform 160ms ease, box-shadow 160ms ease;
+}
+
+.analysis-markdown img:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 16px 34px rgba(20, 30, 28, 0.14);
+}
+
+.analysis-markdown ul,
+.analysis-markdown ol {
+    margin: 0 0 14px 1.2rem;
+    padding: 0;
+}
+
+.analysis-markdown li+li {
+    margin-top: 6px;
+}
+
+.analysis-markdown code {
+    padding: 0.12rem 0.36rem;
+    border-radius: 8px;
+    background: rgba(23, 33, 29, 0.06);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.92em;
+}

data/runtime_source.template.json

@@ -0,0 +1,8 @@
+{
+  "mode": "local",
+  "runtime_root_url": "./",
+  "manifest_path": "./runtime/viewer_manifest.json",
+  "fallback_manifest_urls": [
+    "./data/viewer_manifest.template.json"
+  ]
+}

data/viewer_data.template.json

@@ -0,0 +1,29 @@
+{
+  "title": "QML Classifier Explorer",
+  "subtitle": "QCAA HW1 Problem 2 classification results",
+  "status": "template export",
+  "description": "The viewer first looks for a gx10-generated runtime export. If no runtime data exists, it falls back to this lightweight template.",
+  "experiment": {
+    "model": "PennyLane QML classifiers",
+    "task": "Binary classification (circle and moons datasets)",
+    "methods": [
+      "explicit",
+      "kernel",
+      "reuploading"
+    ],
+    "datasets": [
+      "circle",
+      "moons"
+    ],
+    "device": "configurable: default.qubit or lightning.qubit",
+    "note": "Run training on gx10 to populate hf_space_hw1_problem2/runtime/viewer_data.json."
+  },
+  "assets": {
+    "datasets_overview": "assets/preview_datasets.png",
+    "boundaries_grid": "assets/preview_boundaries.png"
+  },
+  "grid": {
+    "resolution": 50
+  },
+  "timeline_steps": []
+}

data/viewer_manifest.template.json

@@ -0,0 +1,29 @@
+{
+  "title": "QML Classifier Runs",
+  "default_run": "template",
+  "runs": [
+    {
+      "id": "template",
+      "label": "Template / No runtime export yet",
+      "path": "./data/viewer_data.template.json",
+      "steps": 0,
+      "method": "explicit + kernel + reuploading",
+      "dataset": "circle + moons",
+      "methods": [
+        "explicit",
+        "kernel",
+        "reuploading"
+      ],
+      "datasets": [
+        "circle",
+        "moons"
+      ],
+      "num_qubits": 2,
+      "num_layers": 4,
+      "num_layers_explicit": 4,
+      "num_layers_reuploading": 4,
+      "num_params": null,
+      "best_test_acc": null
+    }
+  ]
+}

index.html

@@ -1,19 +1,260 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>QML Classifier Explorer</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
+    rel="stylesheet" />
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <link rel="stylesheet" href="css/base.css" />
+  <link rel="stylesheet" href="css/components.css" />
+  <link rel="stylesheet" href="css/overlays.css" />
+  <link rel="stylesheet" href="css/charts.css" />
+</head>
+
+<body>
+  <div class="page-shell">
+
+    <!-- ── left rail ──────────────────────────────────────────────────── -->
+    <aside class="control-rail">
+
+      <div class="hero-card">
+        <p class="eyebrow">D11224001 Huang, Chun-Ming</p>
+        <div class="hero-title-row">
+          <h1 id="page-title">QML Classifier Explorer</h1>
+          <div class="hero-info-wrap">
+            <button id="analysis-open" class="hero-info-button" type="button"
+              aria-label="Open analysis notes" title="Open analysis notes">i</button>
+            <button id="answers-open" class="hero-info-button hero-info-button-secondary"
+              type="button" aria-label="Open assignment answers" title="Open assignment answers">?</button>
+            <div id="analysis-hint" class="analysis-hint" hidden>
+              <span class="analysis-hint-text">Tap here for notes</span>
+              <button id="analysis-hint-close" class="analysis-hint-close" type="button"
+                aria-label="Dismiss analysis hint">×</button>
+            </div>
+          </div>
+        </div>
+        <p id="page-subtitle" class="muted">HW1 Problem 2 results are loading…</p>
+      </div>
+
+      <!-- results / comparison table -->
+      <div class="panel-card">
+        <div class="panel-header">
+          <h2>Results</h2>
+          <span id="export-status" class="status-pill">loading</span>
+        </div>
+        <div id="loading-panel" class="loading-panel" hidden>
+          <div class="loading-meta">
+            <strong id="loading-label">Preparing viewer…</strong>
+            <span id="loading-percent">0%</span>
+          </div>
+          <div class="loading-track" aria-hidden="true">
+            <div id="loading-bar" class="loading-bar"></div>
+          </div>
+        </div>
+        <label class="slider-label hidden-control" for="run-select">Run</label>
+        <select id="run-select" class="run-select hidden-control"></select>
+        <div class="results-table-wrap">
+          <table class="results-table">
+            <thead>
+              <tr>
+                <th title="Best test accuracy">Acc</th>
+                <th title="Number of qubits">Q</th>
+                <th title="Explicit encoding layers">LE</th>
+                <th title="Re-uploading layers">LR</th>
+                <th title="Training methods">Method</th>
+                <th title="Datasets used">Dataset</th>
+                <th title="Run name">Run</th>
+              </tr>
+            </thead>
+            <tbody id="results-table-body"></tbody>
+          </table>
+        </div>
+        <p id="run-note" class="muted">
+          Choose a runtime export to compare different configurations.
+        </p>
+      </div>
+
+      <!-- experiment meta + dataset overview image -->
+      <div class="panel-card experiment-card">
+        <div class="panel-header">
+          <h2>Experiment</h2>
+        </div>
+        <div class="experiment-scroll">
+          <div class="reference-stack experiment-reference-stack">
+            <figure class="reference-figure">
+              <img id="datasets-image" class="previewable-image" alt="Dataset overview"
+                data-preview-caption="Circle and moons datasets" />
+              <figcaption>Dataset overview</figcaption>
+            </figure>
+          </div>
+          <dl id="experiment-meta" class="meta-list"></dl>
+        </div>
+      </div>
+
+    </aside>
+
+    <!-- ── main pane ───────────────────────────────���──────────────────── -->
+    <main class="content-pane">
+
+      <!-- decision boundary grid -->
+      <section class="canvas-card">
+        <div class="section-heading">
+          <div>
+            <h2>Decision Boundaries</h2>
+          </div>
+          <div class="boundary-home-row">
+            <button id="home-btn-circle" class="home-btn" type="button" title="Circle: isometric view">⌂ Circle</button>
+            <button id="top-btn-circle"  class="home-btn" type="button" title="Circle: top-down view">⊤ Circle</button>
+            <button id="home-btn-moons"  class="home-btn" type="button" title="Moons: isometric view">⌂ Moons</button>
+            <button id="top-btn-moons"   class="home-btn" type="button" title="Moons: top-down view">⊤ Moons</button>
+          </div>
+        </div>
+
+        <!--
+          3 rows (methods) × 2 columns (datasets)
+          Row labels are rendered as boundary-header method tags.
+        -->
+        <div class="boundary-grid">
+
+          <!-- Row 1: Circle dataset ─────────────────────────── -->
+
+          <!-- Explicit — Circle -->
+          <article class="boundary-card">
+            <div class="boundary-header">
+              <span class="boundary-method-tag tag-explicit">Explicit</span>
+              Circle
+              <span id="acc-explicit-circle" class="acc-pill">—</span>
+            </div>
+            <div id="bp-explicit-circle" class="boundary-plot"></div>
+          </article>
+
+          <!-- Kernel — Circle -->
+          <article class="boundary-card">
+            <div class="boundary-header">
+              <span class="boundary-method-tag tag-kernel">Kernel</span>
+              Circle
+              <span id="acc-kernel-circle" class="acc-pill">—</span>
+            </div>
+            <div id="bp-kernel-circle" class="boundary-plot"></div>
+          </article>
+
+          <!-- Reuploading — Circle -->
+          <article class="boundary-card">
+            <div class="boundary-header">
+              <span class="boundary-method-tag">Reuploading</span>
+              Circle
+              <span id="acc-reupload-circle" class="acc-pill">—</span>
+            </div>
+            <div id="bp-reupload-circle" class="boundary-plot"></div>
+          </article>
+
+          <!-- Row 2: Moons dataset ──────────────────────────── -->
+
+          <!-- Explicit — Moons -->
+          <article class="boundary-card">
+            <div class="boundary-header">
+              <span class="boundary-method-tag tag-explicit">Explicit</span>
+              Moons
+              <span id="acc-explicit-moons" class="acc-pill">—</span>
+            </div>
+            <div id="bp-explicit-moons" class="boundary-plot"></div>
+          </article>
+
+          <!-- Kernel — Moons -->
+          <article class="boundary-card">
+            <div class="boundary-header">
+              <span class="boundary-method-tag tag-kernel">Kernel</span>
+              Moons
+              <span id="acc-kernel-moons" class="acc-pill">—</span>
+            </div>
+            <div id="bp-kernel-moons" class="boundary-plot"></div>
+          </article>
+
+          <!-- Reuploading — Moons -->
+          <article class="boundary-card">
+            <div class="boundary-header">
+              <span class="boundary-method-tag">Reuploading</span>
+              Moons
+              <span id="acc-reupload-moons" class="acc-pill">—</span>
+            </div>
+            <div id="bp-reupload-moons" class="boundary-plot"></div>
+          </article>
+
+        </div>
+      </section>
+
+      <!-- accuracy / loss chart -->
+      <section class="canvas-card">
+        <div class="section-heading">
+          <div>
+            <div class="timeline-title-row">
+              <h2>Accuracy &amp; Loss</h2>
+              <span id="current-step-label" class="timeline-title-pill">Final snapshot</span>
+              <div class="timeline-slider-inline">
+                <input id="step-slider" type="range" min="0" max="0" value="0" disabled />
+              </div>
+              <div id="timeline-metrics" class="timeline-metrics-row">
+                <span id="timeline-caption" class="timeline-title-metrics timeline-title-metrics-status">
+                  Waiting for per-step trajectory export.
+                </span>
+                <span id="train-acc-pill" class="timeline-title-pill timeline-metric-pill" hidden>
+                  Train acc —
+                </span>
+                <span id="test-acc-pill"
+                  class="timeline-title-pill timeline-metric-pill timeline-metric-pill-test" hidden>
+                  Test acc —
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="chart-wrap">
+          <div id="loss-chart" class="plot-surface plot-surface-wide"></div>
+          <div id="chart-empty" class="chart-empty">
+            No step timeline exported yet. The viewer is ready to replay training
+            snapshots once <code>timeline_steps</code> are populated.
+          </div>
+        </div>
+      </section>
+
+    </main>
+  </div>
+
+  <!-- image lightbox -->
+  <div id="image-lightbox" class="image-lightbox" hidden aria-hidden="true">
+    <div class="image-lightbox-backdrop" data-lightbox-close="true"></div>
+    <div class="image-lightbox-dialog" role="dialog" aria-modal="true" aria-label="Image preview">
+      <button id="image-lightbox-close" class="image-lightbox-close" type="button"
+        aria-label="Close image preview">×</button>
+      <img id="image-lightbox-image" class="image-lightbox-image" alt="Preview" />
+      <p id="image-lightbox-caption" class="image-lightbox-caption"></p>
+    </div>
+  </div>
+
+  <!-- analysis modal -->
+  <div id="analysis-modal" class="analysis-modal" hidden aria-hidden="true">
+    <div class="analysis-modal-backdrop" data-analysis-close="true"></div>
+    <div class="analysis-modal-dialog" role="dialog" aria-modal="true"
+      aria-label="Problem 2 analysis">
+      <button id="analysis-close" class="analysis-modal-close" type="button"
+        aria-label="Close analysis">×</button>
+      <div class="analysis-modal-content">
+        <div id="analysis-modal-label" class="analysis-modal-label">Analysis notes</div>
+        <div id="analysis-markdown" class="analysis-markdown">
+          Loading analysis notes…
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/app.js" type="module"></script>
+</body>
+
 </html>

js/app.js

@@ -0,0 +1,423 @@
+import {
+    pageTitle, pageSubtitle, exportStatus,
+    runSelect, runNote, resultsTableBody,
+    stepSlider, currentStepLabel,
+    timelineCaption, trainAccPill, testAccPill, chartEmpty,
+    experimentMeta, datasetsImage,
+    boundaryPlots, accPills,
+    lossChart,
+    homeButtons,
+    topButtons,
+    state,
+} from "./dom.js";
+import { bindImageLightbox, bindAnalysisModal, maybeShowAnalysisHint } from "./overlays.js";
+import { renderBoundarySurface, renderAccuracyChart, renderEmptyState, DEFAULT_CAMERA, MOONS_DEFAULT_CAMERA, TOP_CAMERA, MOONS_TOP_CAMERA } from "./charts.js";
+import {
+    formatMetric, formatInteger, appendMetaRow, withCacheBust,
+    setLoadingState, loadManifest, loadRunData, loadRunChunk, loadRuntimeSource,
+} from "./data.js";
+
+const METHODS = ["explicit", "kernel", "reuploading"];
+const DATASETS = ["circle", "moons"];
+
+// ── helpers ───────────────────────────────────────────────────────────────────
+
+function formatAcc(v) {
+    if (v === null || v === undefined) return "—";
+    return (v * 100).toFixed(1) + "%";
+}
+
+// ── chunk helpers ─────────────────────────────────────────────────────────────
+
+function getChunkPaths(data) {
+    return (data.timeline_chunks || []).map((c) => c.path).filter(Boolean);
+}
+
+function updatePrefetchProgress(completed, total) {
+    if (!total) return;
+    const percent = 82 + (completed / total) * 18;
+    setLoadingState({
+        visible: completed < total,
+        label: `Streaming epoch chunks ${completed}/${total}`,
+        percent,
+        status: completed < total ? "streaming" : "ready",
+    });
+}
+
+async function fetchChunkIntoCache(chunkPath, loadToken, { announce = false } = {}) {
+    if (state.currentRunChunkCache[chunkPath]) {
+        return state.currentRunChunkCache[chunkPath];
+    }
+    if (state.currentRunChunkInflight[chunkPath]) {
+        return state.currentRunChunkInflight[chunkPath];
+    }
+
+    if (announce) {
+        const epochMatch = chunkPath.match(/_epoch_(\d+)\.json$/);
+        const epochLabel = epochMatch ? String(Number(epochMatch[1])) : "?";
+        setLoadingState({
+            visible: true,
+            label: `Loading epoch ${epochLabel} boundaries`,
+            percent: 92,
+            status: "rendering",
+        });
+    }
+
+    const promise = loadRunChunk(chunkPath, loadToken)
+        .then((chunk) => {
+            state.currentRunChunkCache[chunkPath] = chunk;
+            delete state.currentRunChunkInflight[chunkPath];
+            return chunk;
+        })
+        .catch((error) => {
+            delete state.currentRunChunkInflight[chunkPath];
+            throw error;
+        });
+
+    state.currentRunChunkInflight[chunkPath] = promise;
+    return promise;
+}
+
+function prefetchChunkStream(data, loadToken, prefetchToken) {
+    const chunkPaths = getChunkPaths(data);
+    if (!chunkPaths.length) return;
+
+    const pump = async () => {
+        updatePrefetchProgress(Object.keys(state.currentRunChunkCache).length, chunkPaths.length);
+        for (const chunkPath of chunkPaths) {
+            if (prefetchToken !== state.activePrefetchToken || loadToken !== state.activeLoadToken) return;
+            await fetchChunkIntoCache(chunkPath, loadToken);
+            updatePrefetchProgress(Object.keys(state.currentRunChunkCache).length, chunkPaths.length);
+            if (prefetchToken !== state.activePrefetchToken || loadToken !== state.activeLoadToken) return;
+            await new Promise((resolve) => window.setTimeout(resolve, 0));
+        }
+        updatePrefetchProgress(chunkPaths.length, chunkPaths.length);
+    };
+
+    pump().catch((error) => console.warn("Chunk prefetch stopped:", error));
+}
+
+/**
+ * Resolve the full step payload for a given index.
+ * - Inline mode:  step already has `boundaries` → return as-is.
+ * - Chunked mode: step has `chunk_path`          → load chunk, find step by epoch.
+ */
+async function resolveStepPayload(data, index, loadToken) {
+    const steps = data.timeline_steps || [];
+    const summaryStep = steps[index];
+    if (!summaryStep) return null;
+
+    // Inline: boundaries already present
+    if (summaryStep.boundaries) return summaryStep;
+
+    // Chunked: fetch from chunk file
+    if (!summaryStep.chunk_path) return summaryStep;
+
+    const chunkPath = summaryStep.chunk_path;
+    const chunk = await fetchChunkIntoCache(chunkPath, loadToken, { announce: true });
+    const chunkSteps = chunk.timeline_steps || [];
+    const targetEpoch = Number(summaryStep.epoch ?? summaryStep.global_step ?? index);
+    const fullStep = chunkSteps.find(
+        (s) => Number(s.epoch ?? s.global_step) === targetEpoch
+    );
+    if (!fullStep) {
+        throw new Error(`Epoch ${targetEpoch} missing from chunk ${chunkPath}`);
+    }
+    return { ...fullStep, chunk_path: chunkPath };
+}
+
+function renderResultsTable(runs, selectedRunId) {
+    if (!resultsTableBody) return;
+    resultsTableBody.innerHTML = "";
+    runs.forEach((run) => {
+        const row = document.createElement("tr");
+        row.dataset.runId = run.id;
+        if (run.id === selectedRunId) row.classList.add("is-selected");
+
+        const values = [
+            { text: formatAcc(run.best_test_acc ?? run.final_test_acc), className: "metric-cell metric-cell-strong" },
+            { text: formatInteger(run.num_qubits) },
+            { text: formatInteger(run.num_layers_explicit ?? run.num_layers) },
+            { text: formatInteger(run.num_layers_reuploading ?? run.num_layers) },
+            { text: (run.methods ?? [run.method]).filter(Boolean).join(", ") || "—" },
+            { text: (run.datasets ?? [run.dataset]).filter(Boolean).join(" + ") || "—" },
+            { text: run.label || run.id, className: "run-cell" },
+        ];
+
+        values.forEach(({ text, className }) => {
+            const cell = document.createElement("td");
+            cell.textContent = text;
+            if (className) cell.className = className;
+            row.appendChild(cell);
+        });
+
+        row.addEventListener("click", async () => {
+            runSelect.value = run.id;
+            await applyRun(run.id);
+        });
+
+        resultsTableBody.appendChild(row);
+    });
+}
+
+function updateAccPills(step) {
+    METHODS.forEach((method, mi) => {
+        DATASETS.forEach((dataset, di) => {
+            const pill = accPills[mi]?.[di];
+            if (!pill) return;
+            const acc = step?.accuracies?.[method]?.[dataset] ?? null;
+            pill.textContent = formatAcc(acc);
+        });
+    });
+}
+
+// ── step rendering ─────────────────────────────────────────────────────────────
+
+async function refreshStepState(data, index, stepToken) {
+    const steps = data.timeline_steps || [];
+    if (!steps.length) {
+        renderEmptyState();
+        return;
+    }
+
+    // Render summary metrics immediately (no chunk needed)
+    const summaryStep = steps[index];
+    if (currentStepLabel) currentStepLabel.textContent = summaryStep.label || `Epoch ${summaryStep.epoch ?? index}`;
+    if (timelineCaption) timelineCaption.hidden = true;
+
+    if (trainAccPill) {
+        trainAccPill.textContent = `Train ${formatAcc(summaryStep.train_acc)}`;
+        trainAccPill.hidden = false;
+    }
+    if (testAccPill) {
+        testAccPill.textContent = `Test ${formatAcc(summaryStep.test_acc)}`;
+        testAccPill.hidden = false;
+    }
+
+    renderAccuracyChart(steps, index);
+    updateAccPills(summaryStep);
+
+    // Resolve full step payload (may require a chunk fetch)
+    const step = await resolveStepPayload(data, index, state.activeLoadToken);
+    if (stepToken !== state.activeStepToken) return;
+
+    if (!step?.boundaries) {
+        // Chunked data not yet available — leave boundary panels as-is
+        return;
+    }
+
+    // Scatter lives at top level (fixed) or falls back to per-step copy
+    const scatterSource = data.scatter ?? {};
+
+    // Decision boundaries (3D surface)
+    METHODS.forEach((method, mi) => {
+        DATASETS.forEach((dataset, di) => {
+            const container = boundaryPlots[mi]?.[di];
+            if (!container) return;
+            const heatmap = step.boundaries?.[method]?.[dataset] ?? null;
+            const points = scatterSource[dataset] ?? step.scatter?.[dataset] ?? null;
+            renderBoundarySurface(container, heatmap, points, method, state.cameraState[di]);
+        });
+    });
+
+    // Attach camera-sync listeners once per panel (idempotent)
+    DATASETS.forEach((_, di) => bindCameraSync(di));
+
+    if (chartEmpty) chartEmpty.hidden = true;
+    if (lossChart) lossChart.style.display = "";
+    setLoadingState({ visible: false });
+}
+
+// ── run loading ────────────────────────────────────────────────────────────────
+
+function populateExperimentMeta(data, run) {
+    if (!experimentMeta) return;
+    experimentMeta.innerHTML = "";
+    appendMetaRow("Model", data.experiment?.model);
+    appendMetaRow("Task", data.experiment?.task);
+    appendMetaRow("Methods", (data.experiment?.methods ?? []).join(", "));
+    appendMetaRow("Datasets", (data.experiment?.datasets ?? []).join(", "));
+    appendMetaRow("Device", data.experiment?.device);
+    if (run?.num_qubits !== undefined) appendMetaRow("Qubits", run.num_qubits);
+    if (run?.num_layers_explicit !== undefined || run?.num_layers_reuploading !== undefined) {
+        appendMetaRow(
+            "Layers (explicit / reupload)",
+            `${formatInteger(run?.num_layers_explicit)} / ${formatInteger(run?.num_layers_reuploading)}`,
+        );
+    } else if (run?.num_layers !== undefined) {
+        appendMetaRow("Layers", run.num_layers);
+    }
+    if (run?.num_params !== undefined) appendMetaRow("Params", formatInteger(run.num_params));
+    if (run?.train_time !== undefined) appendMetaRow("Train time", run.train_time);
+    appendMetaRow("Note", data.experiment?.note);
+}
+
+async function applyRun(runId) {
+    state.currentRunId = runId;
+    state.currentRunChunkCache = {};
+    state.currentRunChunkInflight = {};
+    const loadToken = ++state.activeLoadToken;
+
+    const selectedRun =
+        state.currentManifest.runs.find((r) => r.id === runId) ||
+        state.currentManifest.runs[0];
+
+    setLoadingState({
+        visible: true,
+        label: `Preparing ${selectedRun.label}`,
+        percent: 20,
+        status: "loading",
+    });
+
+    state.currentData = await loadRunData(selectedRun.path, loadToken);
+    if (loadToken !== state.activeLoadToken) return;
+
+    setLoadingState({ visible: true, label: `Rendering ${selectedRun.label}`, percent: 82, status: "rendering" });
+
+    pageTitle.textContent = state.currentData.title;
+    pageSubtitle.textContent = state.currentData.subtitle;
+    exportStatus.textContent = state.currentData.status;
+    runNote.textContent = `Loaded ${selectedRun.label} with ${selectedRun.steps} exported steps.`;
+
+    renderResultsTable(state.currentManifest.runs, selectedRun.id);
+
+    if (datasetsImage) {
+        const src = state.currentData.assets?.datasets_overview;
+        if (src) {
+            datasetsImage.src = withCacheBust(src);
+        } else {
+            datasetsImage.removeAttribute("src");
+        }
+    }
+
+    populateExperimentMeta(state.currentData, selectedRun);
+
+    const steps = state.currentData.timeline_steps || [];
+    if (steps.length > 1) {
+        stepSlider.disabled = false;
+        stepSlider.min = "0";
+        stepSlider.max = String(steps.length - 1);
+        stepSlider.value = "0";
+    } else {
+        stepSlider.disabled = true;
+        stepSlider.min = stepSlider.max = stepSlider.value = "0";
+    }
+
+    await refreshStepState(state.currentData, 0, ++state.activeStepToken);
+    prefetchChunkStream(state.currentData, loadToken, ++state.activePrefetchToken);
+    if (!getChunkPaths(state.currentData).length) {
+        setLoadingState({ visible: false, label: "Viewer ready", percent: 100, status: "ready" });
+    }
+}
+
+// ── camera sync ───────────────────────────────────────────────────────────────
+
+/**
+ * Bind plotly_relayout camera-sync for one dataset row.
+ * Safe to call multiple times — skips panels already bound.
+ * @param {number} di  Dataset index (0=circle, 1=moons)
+ */
+function bindCameraSync(di) {
+    const syncTimers = {};
+    METHODS.forEach((_, mi) => {
+        const container = boundaryPlots[mi]?.[di];
+        if (!container || container._cameraBound) return;
+        container._cameraBound = true;
+        container.on("plotly_relayout", (eventData) => {
+            if (container._receivingSync) return;
+            const cam = eventData["scene.camera"];
+            if (!cam) return;
+            state.cameraState[di] = cam;
+            clearTimeout(syncTimers[mi]);
+            syncTimers[mi] = setTimeout(() => {
+                METHODS.forEach((_, otherMi) => {
+                    if (otherMi === mi) return;
+                    const other = boundaryPlots[otherMi]?.[di];
+                    if (!other?._hasPlot) return;
+                    other._receivingSync = true;
+                    Plotly.relayout(other, { "scene.camera": cam });
+                    setTimeout(() => { other._receivingSync = false; }, 300);
+                });
+            }, 150);
+        });
+    });
+}
+
+// ── main ───────────────────────────────────────────────────────────────────────
+
+async function main() {
+    bindImageLightbox();
+    bindAnalysisModal();
+    maybeShowAnalysisHint();
+
+    // Seed per-dataset home cameras before first render
+    state.cameraState[1] = MOONS_DEFAULT_CAMERA;
+
+    setLoadingState({ visible: true, label: "Booting viewer", percent: 2, status: "loading" });
+    await loadRuntimeSource();
+    state.currentManifest = await loadManifest();
+
+    const runs = state.currentManifest.runs || [];
+    runSelect.innerHTML = "";
+    runs.forEach((run) => {
+        const opt = document.createElement("option");
+        opt.value = run.id;
+        opt.textContent = run.label;
+        runSelect.appendChild(opt);
+    });
+
+    if (!runs.length) throw new Error("Viewer manifest contains no runs.");
+
+    const defaultRunId = state.currentManifest.default_run || runs[0].id;
+    runSelect.value = defaultRunId;
+    renderResultsTable(runs, defaultRunId);
+    await applyRun(defaultRunId);
+
+    runSelect.addEventListener("change", async (e) => applyRun(e.target.value));
+
+    // Camera preset buttons
+    const applyPresetCamera = (di, camera) => {
+        state.cameraState[di] = camera;
+        METHODS.forEach((_, mi) => {
+            const container = boundaryPlots[mi]?.[di];
+            if (!container?._hasPlot) return;
+            container._receivingSync = true;
+            Plotly.relayout(container, { "scene.camera": camera, "scene.dragmode": "turntable" });
+            setTimeout(() => { container._receivingSync = false; }, 300);
+        });
+    };
+
+    const homecameras = [DEFAULT_CAMERA, MOONS_DEFAULT_CAMERA];
+    homeButtons.forEach((btn, di) => {
+        if (!btn) return;
+        btn.addEventListener("click", () => applyPresetCamera(di, homecameras[di]));
+    });
+
+    const topcameras = [TOP_CAMERA, MOONS_TOP_CAMERA];
+    topButtons.forEach((btn, di) => {
+        if (!btn) return;
+        btn.addEventListener("click", () => applyPresetCamera(di, topcameras[di]));
+    });
+
+    stepSlider.addEventListener("input", async (e) => {
+        if (state.currentData) {
+            await refreshStepState(
+                state.currentData,
+                Number(e.target.value),
+                ++state.activeStepToken,
+            );
+        }
+    });
+}
+
+main().catch((error) => {
+    console.error(error);
+    pageSubtitle.textContent = "Failed to load static export.";
+    runNote.textContent = "Unable to load a viewer manifest.";
+    if (chartEmpty) {
+        chartEmpty.textContent = "The static viewer failed to load its export data.";
+        chartEmpty.hidden = false;
+        chartEmpty.style.display = "flex";
+    }
+    setLoadingState({ visible: true, label: "Load failed", percent: 100, status: "error" });
+});

js/charts.js

@@ -0,0 +1,201 @@
+const METHOD_COLORS = {
+    explicit:    { pos: "#4a90d9", neg: "#e8c06a" },
+    kernel:      { pos: "#e87c4a", neg: "#6ac4e8" },
+    reuploading: { pos: "#5ab45a", neg: "#d46ab4" },
+};
+
+const PLOTLY_BASE = {
+    responsive: true,
+    displayModeBar: false,
+};
+
+// Slightly-tilted isometric view, zoomed in
+export const DEFAULT_CAMERA = {
+    eye:    { x: 0.8, y: -0.8, z: 0.65 },
+    up:     { x: 0,   y: 0,    z: 1    },
+    center: { x: 0,   y: 0,    z: 0    },
+};
+
+// Moons home — same tilt but rotated 90° clockwise in XY
+export const MOONS_DEFAULT_CAMERA = {
+    eye:    { x: -0.8, y: -0.8, z: 0.65 },
+    up:     { x: 0,    y: 0,    z: 1    },
+    center: { x: 0,    y: 0,    z: 0    },
+};
+
+// Top-down view for Circle — up matches Circle home direction (0.8, -0.8) → up = (-√2/2, √2/2)
+export const TOP_CAMERA = {
+    eye:    { x: 0,      y: 0,     z: 1.4 },
+    up:     { x: -0.707, y: 0.707, z: 0   },
+    center: { x: 0,      y: 0,     z: 0   },
+};
+
+// Top-down view for Moons — up rotated 45° CW to match Moons home direction
+export const MOONS_TOP_CAMERA = {
+    eye:    { x: 0,     y: 0,     z: 1.4 },
+    up:     { x: 0.707, y: 0.707, z: 0   },
+    center: { x: 0,     y: 0,     z: 0   },
+};
+
+/**
+ * Render a decision-boundary panel as an interactive 3D surface.
+ *
+ * @param {HTMLElement} container
+ * @param {object|null} heatmap  { x, y, z } — z is P(class 1) in [0, 1]
+ * @param {object[]|null} points [{ x, y, label }] scatter points
+ * @param {string} method        "explicit" | "kernel" | "reuploading"
+ * @param {object|null} camera   Plotly scene.camera object; null → DEFAULT_CAMERA
+ */
+export function renderBoundarySurface(container, heatmap, points, method, camera) {
+    if (!container) return;
+
+    const colors = METHOD_COLORS[method] ?? METHOD_COLORS.reuploading;
+    const appliedCamera = camera ?? DEFAULT_CAMERA;
+    const traces = [];
+
+    if (heatmap?.z?.length) {
+        traces.push({
+            type: "surface",
+            x: heatmap.x,
+            y: heatmap.y,
+            z: heatmap.z,
+            colorscale: [
+                [0,    colors.neg],
+                [0.45, "#f8f4ee"],
+                [0.55, "#f8f4ee"],
+                [1,    colors.pos],
+            ],
+            cmin: 0, cmax: 1,
+            showscale: false,
+            opacity: 0.72,
+            contours: {
+                z: {
+                    show: true,
+                    start: 0.5, end: 0.5, size: 0.1,
+                    color: "rgba(20,20,20,0.85)",
+                    width: 3,
+                    usecolormap: false,
+                },
+            },
+            hovertemplate: "x: %{x:.2f}<br>y: %{y:.2f}<br>P(1): %{z:.2f}<extra></extra>",
+        });
+    } else {
+        traces.push({
+            type: "scatter3d", mode: "text",
+            x: [0], y: [0], z: [0.5],
+            text: ["No data"],
+            textfont: { color: "#aaa", size: 11 },
+            showlegend: false,
+        });
+    }
+
+    // Scatter points floating just above the surface
+    if (points?.length) {
+        const cls0x = [], cls0y = [], cls1x = [], cls1y = [];
+        for (const p of points) {
+            if (p.label === 0) { cls0x.push(p.x); cls0y.push(p.y); }
+            else               { cls1x.push(p.x); cls1y.push(p.y); }
+        }
+        const Z = 0.5;
+        if (cls0x.length) traces.push({
+            type: "scatter3d", mode: "markers",
+            x: cls0x, y: cls0y, z: cls0x.map(() => Z),
+            marker: { color: "#1565c0", size: 2.5 },
+            showlegend: false, hoverinfo: "skip",
+        });
+        if (cls1x.length) traces.push({
+            type: "scatter3d", mode: "markers",
+            x: cls1x, y: cls1y, z: cls1x.map(() => Z),
+            marker: { color: "#c62828", size: 2.5, symbol: "square" },
+            showlegend: false, hoverinfo: "skip",
+        });
+    }
+
+    const layout = {
+        margin: { t: 0, b: 0, l: 0, r: 0 },
+        scene: {
+            xaxis: { visible: false, showgrid: false },
+            yaxis: { visible: false, showgrid: false },
+            zaxis: {
+                title: "", range: [0, 1.1],
+                tickvals: [0, 0.5, 1], ticktext: ["0", "·5", "1"],
+                tickfont: { size: 8 },
+                gridcolor: "rgba(23,33,29,0.08)",
+            },
+            camera: appliedCamera,
+            dragmode: "turntable",
+            aspectmode: "manual",
+            aspectratio: { x: 1, y: 1, z: 0.55 },
+            bgcolor: "rgba(0,0,0,0)",
+        },
+        paper_bgcolor: "rgba(0,0,0,0)",
+        plot_bgcolor:  "rgba(0,0,0,0)",
+    };
+
+    if (container._hasPlot) {
+        Plotly.react(container, traces, layout, PLOTLY_BASE);
+    } else {
+        Plotly.newPlot(container, traces, layout, PLOTLY_BASE);
+        container._hasPlot = true;
+    }
+}
+
+/**
+ * Render the accuracy / loss curves.
+ *
+ * @param {object[]} steps   Array of step objects from timeline_steps
+ * @param {number}   current Index of current step (highlighted)
+ */
+export function renderAccuracyChart(steps, current) {
+    const lossChart = document.getElementById("loss-chart");
+    if (!lossChart || !steps?.length) return;
+
+    const epochs      = steps.map((s) => s.global_step ?? s.epoch ?? 0);
+    const trainAcc    = steps.map((s) => s.train_acc  ?? null);
+    const testAcc     = steps.map((s) => s.test_acc   ?? null);
+    const trainLoss   = steps.map((s) => s.train_loss ?? null);
+    const testLoss    = steps.map((s) => s.test_loss  ?? null);
+
+    const curEpoch = steps[current]?.global_step ?? steps[current]?.epoch ?? null;
+
+    const shapes = curEpoch !== null ? [{
+        type: "line", xref: "x", yref: "paper",
+        x0: curEpoch, x1: curEpoch, y0: 0, y1: 1,
+        line: { color: "rgba(13,143,113,0.5)", width: 1.5, dash: "dot" },
+    }] : [];
+
+    const traces = [
+        { x: epochs, y: trainAcc,  name: "Train acc",  mode: "lines", line: { color: "#0d8f71", width: 2 } },
+        { x: epochs, y: testAcc,   name: "Test acc",   mode: "lines", line: { color: "#ef8354", width: 2 } },
+        { x: epochs, y: trainLoss, name: "Train loss", mode: "lines", line: { color: "#0d8f71", width: 1.5, dash: "dot" } },
+        { x: epochs, y: testLoss,  name: "Test loss",  mode: "lines", line: { color: "#ef8354", width: 1.5, dash: "dot" } },
+    ].filter((t) => t.y.some((v) => v !== null));
+
+    const layout = {
+        margin: { t: 8, b: 36, l: 42, r: 16 },
+        paper_bgcolor: "rgba(0,0,0,0)",
+        plot_bgcolor:  "rgba(0,0,0,0)",
+        xaxis: { title: "Step", gridcolor: "rgba(23,33,29,0.08)", zeroline: false },
+        yaxis: { gridcolor: "rgba(23,33,29,0.08)", zeroline: false },
+        legend: { orientation: "h", y: -0.22, font: { size: 11 } },
+        shapes,
+        font: { family: "IBM Plex Sans, sans-serif", size: 11 },
+    };
+
+    if (lossChart._hasPlot) {
+        Plotly.react(lossChart, traces, layout, PLOTLY_BASE);
+    } else {
+        Plotly.newPlot(lossChart, traces, layout, PLOTLY_BASE);
+        lossChart._hasPlot = true;
+    }
+}
+
+export function renderEmptyState() {
+    const chartEmpty = document.getElementById("chart-empty");
+    if (chartEmpty) {
+        chartEmpty.hidden = false;
+        chartEmpty.style.display = "flex";
+    }
+    const lossChart = document.getElementById("loss-chart");
+    if (lossChart) lossChart.style.display = "none";
+}

js/data.js

@@ -0,0 +1,297 @@
+import {
+    experimentMeta, loadingPanel, loadingLabel, loadingPercent, loadingBar,
+    exportStatus, runtimeSourceUrls, state,
+} from "./dom.js";
+
+function ensureTrailingSlash(value) {
+    if (!value) {
+        return "./";
+    }
+    return value.endsWith("/") ? value : `${value}/`;
+}
+
+function buildDatasetRuntimeRoot(repoId, revision = "main", pathPrefix = "") {
+    const safePrefix = pathPrefix.trim().replace(/^\/+|\/+$/g, "");
+    const suffix = safePrefix ? `${safePrefix}/` : "";
+    return `https://huggingface.co/datasets/${repoId}/resolve/${revision}/${suffix}`;
+}
+
+function isAbsoluteUrl(path) {
+    return /^(?:[a-z]+:)?\/\//i.test(path);
+}
+
+function resolveAgainstBase(path, baseUrl) {
+    if (!path) {
+        return path;
+    }
+    if (isAbsoluteUrl(path)) {
+        return path;
+    }
+    const normalizedBase = isAbsoluteUrl(baseUrl)
+        ? baseUrl
+        : new URL(baseUrl, window.location.href).toString();
+    return new URL(path, normalizedBase).toString();
+}
+
+function shouldResolveFromRuntimeRoot(path) {
+    if (!path || isAbsoluteUrl(path)) {
+        return false;
+    }
+    return path.startsWith("runtime/") || path.startsWith("./runtime/");
+}
+
+function buildRuntimeRoot(runtimeSource) {
+    if (runtimeSource?.runtime_root_url) {
+        return ensureTrailingSlash(runtimeSource.runtime_root_url);
+    }
+    if (runtimeSource?.hf_dataset_repo) {
+        return buildDatasetRuntimeRoot(
+            runtimeSource.hf_dataset_repo,
+            runtimeSource.hf_dataset_revision || "main",
+            runtimeSource.hf_dataset_path_prefix || ""
+        );
+    }
+    return ensureTrailingSlash("./");
+}
+
+function normalizeRuntimeSource(runtimeSource) {
+    const normalized = {
+        manifest_path: "./runtime/viewer_manifest.json",
+        fallback_manifest_urls: ["./data/viewer_manifest.template.json"],
+        ...runtimeSource,
+    };
+    normalized.runtime_root_url = buildRuntimeRoot(normalized);
+    return normalized;
+}
+
+function buildManifestUrls(runtimeSource) {
+    const urls = [];
+    if (runtimeSource?.manifest_path) {
+        urls.push(resolveAgainstBase(runtimeSource.manifest_path, runtimeSource.runtime_root_url));
+    }
+    for (const fallback of runtimeSource?.fallback_manifest_urls || []) {
+        urls.push(resolveAgainstBase(fallback, "./"));
+    }
+    return urls;
+}
+
+function resolveRuntimePath(path) {
+    if (!path) {
+        return path;
+    }
+    if (shouldResolveFromRuntimeRoot(path)) {
+        return resolveAgainstBase(path, state.runtimeSource?.runtime_root_url || "./");
+    }
+    return resolveAgainstBase(path, "./");
+}
+
+function normalizeManifest(manifest) {
+    return {
+        ...manifest,
+        runs: (manifest.runs || []).map((run) => ({
+            ...run,
+            path: resolveRuntimePath(run.path),
+        })),
+    };
+}
+
+function normalizeRunPayload(payload) {
+    const normalized = { ...payload };
+    if (normalized.assets) {
+        normalized.assets = {
+            ...normalized.assets,
+            circuit: resolveRuntimePath(normalized.assets.circuit),
+            data_overview: resolveRuntimePath(normalized.assets.data_overview),
+        };
+    }
+    if (normalized.run?.path) {
+        normalized.run = {
+            ...normalized.run,
+            path: resolveRuntimePath(normalized.run.path),
+        };
+    }
+    if (normalized.timeline_chunks) {
+        normalized.timeline_chunks = normalized.timeline_chunks.map((chunk) => ({
+            ...chunk,
+            path: resolveRuntimePath(chunk.path),
+        }));
+    }
+    if (normalized.timeline_steps) {
+        normalized.timeline_steps = normalized.timeline_steps.map((step) => {
+            if (!step.chunk_path) {
+                return step;
+            }
+            return {
+                ...step,
+                chunk_path: resolveRuntimePath(step.chunk_path),
+            };
+        });
+    }
+    return normalized;
+}
+
+function describePath(path) {
+    if (!path) {
+        return "runtime data";
+    }
+    try {
+        const url = new URL(path, window.location.href);
+        const parts = url.pathname.split("/").filter(Boolean);
+        return parts.slice(-2).join("/");
+    } catch {
+        return path.replace("./", "");
+    }
+}
+
+export function withCacheBust(path) {
+    const separator = path.includes("?") ? "&" : "?";
+    return `${path}${separator}t=${Date.now()}`;
+}
+
+export function formatMetric(value) {
+    if (value === undefined || value === null || Number.isNaN(Number(value))) {
+        return "—";
+    }
+    const numeric = Number(value);
+    const absValue = Math.abs(numeric);
+    if (absValue > 0 && absValue < 1e-3) {
+        return numeric.toExponential(2);
+    }
+    return numeric.toFixed(4);
+}
+
+export function formatInteger(value) {
+    if (value === undefined || value === null || Number.isNaN(Number(value))) {
+        return "—";
+    }
+    return String(Math.round(Number(value)));
+}
+
+export function appendMetaRow(label, value) {
+    const wrapper = document.createElement("div");
+    const dt = document.createElement("dt");
+    const dd = document.createElement("dd");
+    dt.textContent = label;
+    dd.textContent = value;
+    wrapper.append(dt, dd);
+    experimentMeta.appendChild(wrapper);
+}
+
+export function setLoadingState({ visible, label, percent, status }) {
+    if (loadingPanel) {
+        loadingPanel.hidden = !visible;
+    }
+    if (loadingLabel && label) {
+        loadingLabel.textContent = label;
+    }
+    if (typeof percent === "number") {
+        const clamped = Math.max(0, Math.min(100, Math.round(percent)));
+        if (loadingPercent) {
+            loadingPercent.textContent = `${clamped}%`;
+        }
+        if (loadingBar) {
+            loadingBar.style.width = `${clamped}%`;
+        }
+    }
+    if (status) {
+        exportStatus.textContent = status;
+    }
+}
+
+export async function loadRuntimeSource() {
+    for (const url of runtimeSourceUrls) {
+        const response = await fetch(withCacheBust(url), { cache: "no-store" });
+        if (response.ok) {
+            const runtimeSource = normalizeRuntimeSource(await response.json());
+            state.runtimeSource = runtimeSource;
+            return runtimeSource;
+        }
+    }
+    const fallback = normalizeRuntimeSource({});
+    state.runtimeSource = fallback;
+    return fallback;
+}
+
+export async function loadManifest() {
+    const runtimeSource = state.runtimeSource || (await loadRuntimeSource());
+    for (const url of buildManifestUrls(runtimeSource)) {
+        setLoadingState({
+            visible: true,
+            label: `Loading manifest from ${describePath(url)}`,
+            percent: 8,
+            status: "loading",
+        });
+        const response = await fetch(withCacheBust(url), { cache: "no-store" });
+        if (response.ok) {
+            const data = normalizeManifest(await response.json());
+            setLoadingState({
+                visible: true,
+                label: "Manifest ready",
+                percent: 18,
+                status: "loading",
+            });
+            return data;
+        }
+    }
+    throw new Error("No viewer manifest available.");
+}
+
+export function resolveRuntimeAssetPath(path) {
+    return resolveRuntimePath(path);
+}
+
+export async function loadRunData(path, loadToken) {
+    const response = await fetch(withCacheBust(path), { cache: "no-store" });
+    if (!response.ok) {
+        throw new Error(`Failed to load run data: ${path}`);
+    }
+    const contentLength = Number(response.headers.get("content-length") || 0);
+
+    if (!response.body || !contentLength) {
+        setLoadingState({
+            visible: true,
+            label: `Loading ${describePath(path)}`,
+            percent: 45,
+            status: "loading",
+        });
+        return normalizeRunPayload(await response.json());
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let received = 0;
+    let text = "";
+
+    while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+            break;
+        }
+        if (loadToken !== state.activeLoadToken) {
+            throw new Error("Stale run load aborted.");
+        }
+        received += value.byteLength;
+        text += decoder.decode(value, { stream: true });
+        const progress = 20 + (received / contentLength) * 55;
+        setLoadingState({
+            visible: true,
+            label: `Downloading ${describePath(path)}`,
+            percent: progress,
+            status: "loading",
+        });
+    }
+
+    text += decoder.decode();
+    return normalizeRunPayload(JSON.parse(text));
+}
+
+export async function loadRunChunk(path, loadToken) {
+    const response = await fetch(withCacheBust(path), { cache: "no-store" });
+    if (!response.ok) {
+        throw new Error(`Failed to load run chunk: ${path}`);
+    }
+    if (loadToken !== state.activeLoadToken) {
+        throw new Error("Stale chunk load aborted.");
+    }
+    return normalizeRunPayload(await response.json());
+}

js/dom.js

@@ -0,0 +1,88 @@
+export const runtimeSourceUrls = [
+    "./data/runtime_source.json",
+    "./data/runtime_source.template.json",
+];
+
+export const loadingPanel   = document.getElementById("loading-panel");
+export const loadingLabel   = document.getElementById("loading-label");
+export const loadingPercent = document.getElementById("loading-percent");
+export const loadingBar     = document.getElementById("loading-bar");
+
+export const pageTitle        = document.getElementById("page-title");
+export const pageSubtitle     = document.getElementById("page-subtitle");
+export const exportStatus     = document.getElementById("export-status");
+
+export const runSelect        = document.getElementById("run-select");
+export const runNote          = document.getElementById("run-note");
+export const resultsTableBody = document.getElementById("results-table-body");
+
+export const stepSlider         = document.getElementById("step-slider");
+export const currentStepLabel   = document.getElementById("current-step-label");
+export const timelineCaption    = document.getElementById("timeline-caption");
+export const trainAccPill       = document.getElementById("train-acc-pill");
+export const testAccPill        = document.getElementById("test-acc-pill");
+export const chartEmpty         = document.getElementById("chart-empty");
+
+export const experimentMeta   = document.getElementById("experiment-meta");
+export const datasetsImage    = document.getElementById("datasets-image");
+
+// Decision-boundary plot containers: [method][dataset]
+// method: 0=explicit, 1=kernel, 2=reuploading
+// dataset: 0=circle, 1=moons
+export const boundaryPlots = [
+    [document.getElementById("bp-explicit-circle"),  document.getElementById("bp-explicit-moons")],
+    [document.getElementById("bp-kernel-circle"),    document.getElementById("bp-kernel-moons")],
+    [document.getElementById("bp-reupload-circle"),  document.getElementById("bp-reupload-moons")],
+];
+
+export const accPills = [
+    [document.getElementById("acc-explicit-circle"),  document.getElementById("acc-explicit-moons")],
+    [document.getElementById("acc-kernel-circle"),    document.getElementById("acc-kernel-moons")],
+    [document.getElementById("acc-reupload-circle"),  document.getElementById("acc-reupload-moons")],
+];
+
+export const lossChart = document.getElementById("loss-chart");
+
+// Home-camera buttons: index matches DATASETS order (0=circle, 1=moons)
+export const homeButtons = [
+    document.getElementById("home-btn-circle"),
+    document.getElementById("home-btn-moons"),
+];
+
+// Top-down camera buttons
+export const topButtons = [
+    document.getElementById("top-btn-circle"),
+    document.getElementById("top-btn-moons"),
+];
+
+// Image lightbox
+export const imageLightbox        = document.getElementById("image-lightbox");
+export const imageLightboxImage   = document.getElementById("image-lightbox-image");
+export const imageLightboxCaption = document.getElementById("image-lightbox-caption");
+export const imageLightboxClose   = document.getElementById("image-lightbox-close");
+
+// Analysis / answers modal
+export const analysisOpenButton = document.getElementById("analysis-open");
+export const answersOpenButton  = document.getElementById("answers-open");
+export const analysisModal      = document.getElementById("analysis-modal");
+export const analysisCloseButton = document.getElementById("analysis-close");
+export const analysisHint       = document.getElementById("analysis-hint");
+export const analysisHintClose  = document.getElementById("analysis-hint-close");
+export const analysisModalLabel = document.getElementById("analysis-modal-label");
+export const analysisMarkdown   = document.getElementById("analysis-markdown");
+export const previewableImages  = Array.from(document.querySelectorAll(".previewable-image"));
+
+export const state = {
+    currentRunId: null,
+    currentManifest: null,
+    currentData: null,
+    activeLoadToken: 0,
+    activeStepToken: 0,
+    activePrefetchToken: 0,
+    currentRunChunkCache: {},
+    currentRunChunkInflight: {},
+    activeDataset: "circle",   // "circle" | "moons"
+    markdownCache: {},
+    // Camera state per dataset row (index 0=circle, 1=moons); null = use DEFAULT_CAMERA
+    cameraState: [null, null],
+};

js/overlays.js

@@ -0,0 +1,164 @@
+import {
+    imageLightbox, imageLightboxImage, imageLightboxCaption, imageLightboxClose,
+    analysisOpenButton, answersOpenButton, analysisModal, analysisCloseButton,
+    analysisHint, analysisHintClose, analysisModalLabel, analysisMarkdown,
+    previewableImages, state,
+} from "./dom.js";
+
+function openImageLightbox(sourceImage) {
+    if (!imageLightbox || !imageLightboxImage || !sourceImage?.src) {
+        return;
+    }
+
+    imageLightboxImage.src = sourceImage.src;
+    imageLightboxImage.alt = sourceImage.alt || "Preview";
+    if (imageLightboxCaption) {
+        imageLightboxCaption.textContent =
+            sourceImage.dataset.previewCaption || sourceImage.alt || "";
+    }
+    imageLightbox.hidden = false;
+    imageLightbox.setAttribute("aria-hidden", "false");
+}
+
+function closeImageLightbox() {
+    if (!imageLightbox || !imageLightboxImage) {
+        return;
+    }
+
+    imageLightbox.hidden = true;
+    imageLightbox.setAttribute("aria-hidden", "true");
+    imageLightboxImage.removeAttribute("src");
+}
+
+export function bindPreviewableImages(images) {
+    images.forEach((image) => {
+        image.addEventListener("click", () => openImageLightbox(image));
+    });
+}
+
+export function bindImageLightbox() {
+    bindPreviewableImages(previewableImages);
+
+    imageLightbox?.addEventListener("click", (event) => {
+        const closeRequested =
+            event.target === imageLightbox || event.target?.dataset?.lightboxClose === "true";
+        if (closeRequested) {
+            closeImageLightbox();
+        }
+    });
+
+    imageLightboxClose?.addEventListener("click", closeImageLightbox);
+
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && imageLightbox && !imageLightbox.hidden) {
+            closeImageLightbox();
+        }
+    });
+}
+
+function dismissAnalysisHint() {
+    if (analysisHint) {
+        analysisHint.hidden = true;
+    }
+}
+
+export function maybeShowAnalysisHint() {
+    if (!analysisHint) {
+        return;
+    }
+    analysisHint.hidden = false;
+}
+
+function escapeHtml(markup) {
+    return markup.replace(/[&<>]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[char]));
+}
+
+function renderMarkdown(markdown) {
+    return globalThis.marked?.parse?.(markdown) ?? `<pre>${escapeHtml(markdown)}</pre>`;
+}
+
+function enhanceMarkdownImages() {
+    const analysisImages = Array.from(analysisMarkdown?.querySelectorAll("img") || []);
+    analysisImages.forEach((image) => {
+        image.classList.add("previewable-image");
+        if (!image.dataset.previewCaption && image.alt) {
+            image.dataset.previewCaption = image.alt;
+        }
+    });
+    bindPreviewableImages(analysisImages);
+}
+
+async function ensureMarkdownDocument(sourcePath) {
+    if (!analysisMarkdown) {
+        return;
+    }
+    if (state.markdownCache[sourcePath]) {
+        analysisMarkdown.innerHTML = state.markdownCache[sourcePath];
+        enhanceMarkdownImages();
+        return;
+    }
+
+    try {
+        const response = await fetch(sourcePath, { cache: "no-store" });
+        if (!response.ok) {
+            throw new Error(`Failed to load markdown document: ${sourcePath}`);
+        }
+        const markdown = await response.text();
+        const rendered = renderMarkdown(markdown);
+        analysisMarkdown.innerHTML = rendered;
+        enhanceMarkdownImages();
+        state.markdownCache[sourcePath] = rendered;
+    } catch (error) {
+        console.error(error);
+        analysisMarkdown.textContent = "Failed to load notes.";
+    }
+}
+
+function openAnalysisModal({ sourcePath, label }) {
+    if (!analysisModal) {
+        return;
+    }
+    dismissAnalysisHint();
+    analysisModal.hidden = false;
+    analysisModal.setAttribute("aria-hidden", "false");
+    if (analysisModalLabel) {
+        analysisModalLabel.textContent = label;
+    }
+    analysisMarkdown.textContent = "Loading notes...";
+    void ensureMarkdownDocument(sourcePath);
+}
+
+function closeAnalysisModal() {
+    if (!analysisModal) {
+        return;
+    }
+    analysisModal.hidden = true;
+    analysisModal.setAttribute("aria-hidden", "true");
+}
+
+export function bindAnalysisModal() {
+    analysisOpenButton?.addEventListener("click", () => openAnalysisModal({
+        sourcePath: "./ANALYSIS.md",
+        label: "Analysis notes",
+    }));
+    answersOpenButton?.addEventListener("click", () => openAnalysisModal({
+        sourcePath: "./ANSWERS.md",
+        label: "Problem 2 answers",
+    }));
+    analysisCloseButton?.addEventListener("click", closeAnalysisModal);
+    analysisHintClose?.addEventListener("click", dismissAnalysisHint);
+
+    analysisModal?.addEventListener("click", (event) => {
+        const closeRequested =
+            event.target === analysisModal || event.target?.dataset?.analysisClose === "true";
+        if (closeRequested) {
+            closeAnalysisModal();
+        }
+    });
+
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && analysisModal && !analysisModal.hidden) {
+            closeAnalysisModal();
+        }
+    });
+}