Spaces:

mnoorchenar
/

AutoMLOps

Sleeping

App Files Files Community

mnoorchenar commited on Mar 25

Commit

6973475

1 Parent(s): 9c191b0

Update 2026-03-25 13:52:27

Browse files

Files changed (23) hide show

.claude/worktrees/jolly-pasteur +1 -0
.gitignore +9 -1
Dockerfile +19 -4
app.py +465 -11
docs-template.html +963 -0
mlops/__init__.py +1 -0
mlops/algorithms.py +392 -0
mlops/datasets.py +96 -0
mlops/trainer.py +290 -0
pipelines/__init__.py +1 -0
pipelines/dag_engine.py +170 -0
pipelines/pipeline_defs.py +195 -0
readme-template.md +264 -0
requirements.txt +10 -1
static/css/style.css +486 -0
static/js/app.js +49 -0
templates/automl.html +284 -0
templates/base.html +93 -0
templates/dashboard.html +327 -0
templates/experiments.html +47 -0
templates/models.html +155 -0
templates/pipeline.html +295 -0
templates/runs.html +179 -0

.claude/worktrees/jolly-pasteur ADDED Viewed

	@@ -0,0 +1 @@


1	+ Subproject commit 06e9048746065dfb5fb39450debc6a45ea37c2e6

.gitignore CHANGED Viewed

@@ -1,7 +1,15 @@
-__pycache__/
 *.pyc
 .env
 .DS_Store
 *.log
 .vscode/
 *.tmp

+__pycache__/
 *.pyc
+*.pyo
 .env
 .DS_Store
 *.log
 .vscode/
 *.tmp
+mlruns/
+mlflow.db
+logs/
+*.egg-info/
+dist/
+build/
+.pytest_cache/

Dockerfile CHANGED Viewed

@@ -1,7 +1,22 @@
-FROM python:3.11-slim
 WORKDIR /app
-COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
-COPY . .
 EXPOSE 7860
-CMD ["python", "app.py"]

+FROM python:3.11-slim
+# HuggingFace Spaces requires non-root user with UID 1000
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
 WORKDIR /app
+COPY --chown=user:user requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
+COPY --chown=user:user . .
+RUN mkdir -p mlruns logs
 EXPOSE 7860
+ENV PYTHONUNBUFFERED=1
+ENV FLASK_ENV=production
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "4", "--timeout", "300", "--log-level", "info", "app:app"]

app.py CHANGED Viewed

@@ -1,12 +1,466 @@
-from flask import Flask, render_template_string
 app = Flask(__name__)
-HTML = """<!DOCTYPE html>
-<html><head><title>AutoMLOps</title></head>
-<body style="font-family:Arial;max-width:800px;margin:50px auto;padding:20px">
-  <h1>AutoMLOps</h1>
-  <p>Running on port 7860.</p>
-  <span style="background:#28a745;color:#fff;padding:5px 15px;border-radius:15px">Running</span>
-</body></html>"""
-@app.route('/')
-def home(): return render_template_string(HTML)
-if __name__ == '__main__': app.run(host='0.0.0.0', port=7860)

+"""AutoMLOps — ML Experiment Tracking & Pipeline Orchestration Platform."""
+import os
+import json
+import threading
+from datetime import datetime
+import mlflow
+import mlflow.sklearn
+from flask import Flask, render_template, request, jsonify
+from mlops.datasets import DATASETS, load_dataset
+from mlops.algorithms import ALGORITHMS, list_algorithms, all_algorithm_names
+from mlops.trainer import (
+    training_jobs, automl_jobs,
+    start_training, start_automl,
+)
+from pipelines.dag_engine import pipeline_executions, execute_dag
+from pipelines.pipeline_defs import get_pipeline, PIPELINE_BUILDERS
 app = Flask(__name__)
+# ── MLflow setup ───────────────────────────────────────────────────────────────
+TRACKING_URI = "sqlite:///mlflow.db"
+mlflow.set_tracking_uri(TRACKING_URI)
+def _mlflow_client():
+    return mlflow.tracking.MlflowClient(tracking_uri=TRACKING_URI)
+# ── Seed demo data on first launch ────────────────────────────────────────────
+def _seed_demo():
+    """Pre-populate a few MLflow runs so the dashboard looks great immediately."""
+    client = _mlflow_client()
+    try:
+        existing = client.search_runs(experiment_ids=[], max_results=1)
+        if existing:
+            return  # already seeded
+    except Exception:
+        pass
+    demo_runs = [
+        ("Iris Flowers",     "Ensemble / Boosting", "Random Forest",       "classification",
+         {"accuracy": 0.9667, "f1_score": 0.9664, "precision": 0.9672, "recall": 0.9667}),
+        ("Iris Flowers",     "Ensemble / Boosting", "XGBoost",             "classification",
+         {"accuracy": 0.9600, "f1_score": 0.9598, "precision": 0.9601, "recall": 0.9600}),
+        ("Iris Flowers",     "Linear Models",       "Logistic Regression", "classification",
+         {"accuracy": 0.9467, "f1_score": 0.9463, "precision": 0.9472, "recall": 0.9467}),
+        ("Wine Quality",     "Ensemble / Boosting", "LightGBM",            "classification",
+         {"accuracy": 0.9722, "f1_score": 0.9720, "precision": 0.9725, "recall": 0.9722}),
+        ("Wine Quality",     "Neural Networks",     "MLP (Medium)",        "classification",
+         {"accuracy": 0.9444, "f1_score": 0.9441, "precision": 0.9449, "recall": 0.9444}),
+        ("Breast Cancer",    "Support Vector Machines", "SVC (RBF Kernel)","classification",
+         {"accuracy": 0.9737, "f1_score": 0.9736, "precision": 0.9741, "recall": 0.9737}),
+        ("Breast Cancer",    "Ensemble / Boosting", "Gradient Boosting",   "classification",
+         {"accuracy": 0.9561, "f1_score": 0.9558, "precision": 0.9565, "recall": 0.9561}),
+        ("Diabetes Progression", "Ensemble / Boosting", "XGBoost Regressor","regression",
+         {"r2_score": 0.4823, "mae": 44.12, "mse": 3124.5, "rmse": 55.90}),
+        ("Diabetes Progression", "Linear Models",   "Ridge Regression",    "regression",
+         {"r2_score": 0.4612, "mae": 45.87, "mse": 3258.3, "rmse": 57.08}),
+        ("California Housing","Ensemble / Boosting","LightGBM Regressor",  "regression",
+         {"r2_score": 0.8341, "mae": 0.3124, "mse": 0.2871, "rmse": 0.5358}),
+    ]
+    for ds, cat, alg, task, metrics in demo_runs:
+        try:
+            exp = client.get_experiment_by_name(ds)
+            exp_id = exp.experiment_id if exp else mlflow.create_experiment(ds)
+            with mlflow.start_run(experiment_id=exp_id,
+                                  run_name=f"{alg} — {ds}") as run:
+                mlflow.set_tags({"algorithm": alg, "category": cat,
+                                 "dataset": ds, "task_type": task, "demo": "true"})
+                mlflow.log_params({"algorithm": alg, "category": cat, "dataset": ds})
+                mlflow.log_metrics(metrics)
+        except Exception:
+            pass
+# Seed in background so startup isn't delayed
+threading.Thread(target=_seed_demo, daemon=True).start()
+# ══════════════════════════════════════════════════════════════════════════════
+#  PAGE ROUTES
+# ══════════════════════════════════════════════════════════════════════════════
+@app.route("/")
+def dashboard():
+    client = _mlflow_client()
+    try:
+        runs = client.search_runs(
+            experiment_ids=[],
+            max_results=200,
+            order_by=["start_time DESC"],
+        )
+    except Exception:
+        runs = []
+    # Stats
+    total_runs   = len(runs)
+    completed    = [r for r in runs if r.info.status == "FINISHED"]
+    best_acc     = 0.0
+    for r in completed:
+        acc = r.data.metrics.get("accuracy") or r.data.metrics.get("r2_score") or 0
+        if acc > best_acc:
+            best_acc = acc
+    # Recent runs (last 8)
+    recent = []
+    for r in runs[:8]:
+        metrics = r.data.metrics
+        primary = (metrics.get("accuracy") or metrics.get("r2_score") or 0)
+        recent.append({
+            "run_id":    r.info.run_id[:8],
+            "algorithm": r.data.tags.get("algorithm", "—"),
+            "dataset":   r.data.tags.get("dataset",   "—"),
+            "category":  r.data.tags.get("category",  "—"),
+            "task_type": r.data.tags.get("task_type", "classification"),
+            "primary_metric": round(primary, 4),
+            "status":    r.info.status,
+            "duration":  round((r.info.end_time - r.info.start_time) / 1000, 1)
+                         if r.info.end_time else "—",
+        })
+    # Algorithm distribution
+    algo_counts: dict = {}
+    for r in completed:
+        cat = r.data.tags.get("category", "Other")
+        algo_counts[cat] = algo_counts.get(cat, 0) + 1
+    # Dataset distribution
+    ds_counts: dict = {}
+    for r in completed:
+        ds = r.data.tags.get("dataset", "Other")
+        ds_counts[ds] = ds_counts.get(ds, 0) + 1
+    return render_template("dashboard.html",
+                           total_runs=total_runs,
+                           completed_runs=len(completed),
+                           best_metric=round(best_acc, 4),
+                           n_experiments=len(set(r.info.experiment_id for r in runs)),
+                           recent_runs=recent,
+                           algo_counts=json.dumps(algo_counts),
+                           ds_counts=json.dumps(ds_counts),
+                           datasets=DATASETS,
+                           algorithms=ALGORITHMS)
+@app.route("/experiments")
+def experiments():
+    client = _mlflow_client()
+    try:
+        exps = client.search_experiments()
+    except Exception:
+        exps = []
+    exp_list = []
+    for e in exps:
+        runs = client.search_runs([e.experiment_id], max_results=100,
+                                  order_by=["start_time DESC"])
+        finished = [r for r in runs if r.info.status == "FINISHED"]
+        best = 0.0
+        for r in finished:
+            v = r.data.metrics.get("accuracy") or r.data.metrics.get("r2_score") or 0
+            if v > best:
+                best = v
+        exp_list.append({
+            "experiment_id": e.experiment_id,
+            "name":          e.name,
+            "run_count":     len(runs),
+            "best_metric":   round(best, 4),
+            "created_at":    datetime.fromtimestamp(e.creation_time / 1000).strftime("%Y-%m-%d %H:%M")
+                             if e.creation_time else "—",
+        })
+    return render_template("experiments.html", experiments=exp_list)
+@app.route("/experiments/<experiment_id>")
+def experiment_runs(experiment_id):
+    client = _mlflow_client()
+    exp    = client.get_experiment(experiment_id)
+    runs   = client.search_runs([experiment_id], max_results=200,
+                                order_by=["start_time DESC"])
+    run_list = []
+    for r in runs:
+        m = r.data.metrics
+        run_list.append({
+            "run_id":    r.info.run_id,
+            "run_id_short": r.info.run_id[:8],
+            "algorithm": r.data.tags.get("algorithm", "—"),
+            "category":  r.data.tags.get("category",  "—"),
+            "dataset":   r.data.tags.get("dataset",   "—"),
+            "task_type": r.data.tags.get("task_type", "classification"),
+            "metrics":   {k: round(v, 4) for k, v in m.items()},
+            "params":    r.data.params,
+            "status":    r.info.status,
+            "duration":  round((r.info.end_time - r.info.start_time) / 1000, 1)
+                         if r.info.end_time else None,
+            "start_time": datetime.fromtimestamp(r.info.start_time / 1000)
+                          .strftime("%Y-%m-%d %H:%M:%S")
+                          if r.info.start_time else "—",
+        })
+    return render_template("runs.html",
+                           experiment={"name": exp.name, "id": experiment_id},
+                           runs=run_list)
+@app.route("/pipeline")
+def pipeline():
+    dags = {}
+    for pid, builder in PIPELINE_BUILDERS.items():
+        dags[pid] = builder().to_dict()
+    return render_template("pipeline.html", dags=json.dumps(dags),
+                           datasets=DATASETS)
+@app.route("/models")
+def models():
+    client = _mlflow_client()
+    try:
+        registered = client.search_registered_models()
+    except Exception:
+        registered = []
+    model_list = []
+    for m in registered:
+        versions = client.get_latest_versions(m.name)
+        ver_list = []
+        for v in versions:
+            run = None
+            metrics = {}
+            try:
+                run  = client.get_run(v.run_id)
+                metrics = {k: round(val, 4) for k, val in run.data.metrics.items()}
+            except Exception:
+                pass
+            ver_list.append({
+                "version":    v.version,
+                "stage":      v.current_stage,
+                "run_id":     v.run_id[:8] if v.run_id else "—",
+                "metrics":    metrics,
+                "created_at": datetime.fromtimestamp(v.creation_timestamp / 1000)
+                              .strftime("%Y-%m-%d %H:%M")
+                              if v.creation_timestamp else "—",
+            })
+        model_list.append({
+            "name":        m.name,
+            "description": m.description or "—",
+            "versions":    ver_list,
+            "latest_stage": ver_list[0]["stage"] if ver_list else "None",
+        })
+    return render_template("models.html", models=model_list)
+@app.route("/automl")
+def automl():
+    return render_template("automl.html",
+                           datasets=DATASETS,
+                           algorithms=ALGORITHMS)
+# ══════════════════════════════════════════════════════════════════════════════
+#  API — TRAINING
+# ══════════════════════════════════════════════════════════════════════════════
+@app.route("/api/train", methods=["POST"])
+def api_train():
+    data = request.get_json(force=True)
+    required = ["dataset", "algorithm", "category", "task_type"]
+    if not all(k in data for k in required):
+        return jsonify({"error": f"Missing fields: {required}"}), 400
+    job_id = start_training(
+        dataset_name=data["dataset"],
+        algorithm_name=data["algorithm"],
+        algorithm_category=data["category"],
+        task_type=data["task_type"],
+        custom_params=data.get("params"),
+    )
+    return jsonify({"job_id": job_id, "status": "queued"})
+@app.route("/api/run/<job_id>/status")
+def api_run_status(job_id):
+    job = training_jobs.get(job_id)
+    if not job:
+        return jsonify({"error": "Job not found"}), 404
+    return jsonify(job)
+@app.route("/api/runs")
+def api_runs():
+    client = _mlflow_client()
+    exp_filter = request.args.get("experiment")
+    task_filter = request.args.get("task")
+    try:
+        exp_ids = []
+        if exp_filter:
+            exp = client.get_experiment_by_name(exp_filter)
+            if exp:
+                exp_ids = [exp.experiment_id]
+        runs = client.search_runs(
+            experiment_ids=exp_ids or [],
+            max_results=200,
+            order_by=["start_time DESC"],
+        )
+    except Exception:
+        runs = []
+    result = []
+    for r in runs:
+        if task_filter and r.data.tags.get("task_type") != task_filter:
+            continue
+        m = r.data.metrics
+        result.append({
+            "run_id":    r.info.run_id,
+            "algorithm": r.data.tags.get("algorithm", "—"),
+            "category":  r.data.tags.get("category",  "—"),
+            "dataset":   r.data.tags.get("dataset",   "—"),
+            "task_type": r.data.tags.get("task_type", "classification"),
+            "metrics":   {k: round(v, 4) for k, v in m.items()},
+            "status":    r.info.status,
+            "start_time": r.info.start_time,
+        })
+    return jsonify(result)
+# ══════════════════════════════════════════════════════════════════════════════
+#  API — PIPELINE
+# ══════════════════════════════════════════════════════════════════════════════
+@app.route("/api/pipeline/<pipeline_id>/execute", methods=["POST"])
+def api_pipeline_execute(pipeline_id):
+    try:
+        dag = get_pipeline(pipeline_id)
+    except ValueError as e:
+        return jsonify({"error": str(e)}), 400
+    ctx = request.get_json(force=True) or {}
+    exec_id = execute_dag(dag, ctx)
+    return jsonify({"exec_id": exec_id, "status": "queued"})
+@app.route("/api/pipeline/status/<exec_id>")
+def api_pipeline_status(exec_id):
+    state = pipeline_executions.get(exec_id)
+    if not state:
+        return jsonify({"error": "Execution not found"}), 404
+    return jsonify(state)
+@app.route("/api/pipeline/<pipeline_id>/dag")
+def api_pipeline_dag(pipeline_id):
+    try:
+        dag = get_pipeline(pipeline_id)
+    except ValueError as e:
+        return jsonify({"error": str(e)}), 400
+    return jsonify(dag.to_dict())
+# ══════════════════════════════════════════════════════════════════════════════
+#  API — MODEL REGISTRY
+# ══════════════════════════════════════════════════════════════════════════════
+@app.route("/api/models/register", methods=["POST"])
+def api_models_register():
+    data   = request.get_json(force=True)
+    run_id = data.get("run_id")
+    name   = data.get("name")
+    if not run_id or not name:
+        return jsonify({"error": "run_id and name required"}), 400
+    try:
+        client = _mlflow_client()
+        run    = client.get_run(run_id)
+        model_uri = f"runs:/{run_id}/model"
+        result = mlflow.register_model(model_uri, name)
+        return jsonify({"name": result.name, "version": result.version,
+                        "status": "registered"})
+    except Exception as exc:
+        return jsonify({"error": str(exc)}), 500
+@app.route("/api/models/<name>/<version>/stage", methods=["POST"])
+def api_model_stage(name, version):
+    data  = request.get_json(force=True)
+    stage = data.get("stage", "Staging")
+    valid = {"Staging", "Production", "Archived", "None"}
+    if stage not in valid:
+        return jsonify({"error": f"stage must be one of {valid}"}), 400
+    try:
+        client = _mlflow_client()
+        client.transition_model_version_stage(name=name, version=version,
+                                              stage=stage, archive_existing_versions=False)
+        return jsonify({"name": name, "version": version, "stage": stage})
+    except Exception as exc:
+        return jsonify({"error": str(exc)}), 500
+# ══════════════════════════════════════════════════════════════════════════════
+#  API — AUTO-ML
+# ══════════════════════════════════════════════════════════════════════════════
+@app.route("/api/automl", methods=["POST"])
+def api_automl():
+    data = request.get_json(force=True)
+    if "dataset" not in data or "task_type" not in data:
+        return jsonify({"error": "dataset and task_type required"}), 400
+    job_id = start_automl(
+        dataset_name=data["dataset"],
+        task_type=data["task_type"],
+        optimize_metric=data.get("metric", "accuracy"),
+        max_runs=int(data.get("max_runs", 20)),
+    )
+    return jsonify({"job_id": job_id, "status": "queued"})
+@app.route("/api/automl/status/<job_id>")
+def api_automl_status(job_id):
+    job = automl_jobs.get(job_id)
+    if not job:
+        return jsonify({"error": "Job not found"}), 404
+    return jsonify(job)
+# ══════════════════════════════════════════════════════════════════════════════
+#  API — META
+# ══════════════════════════════════════════════════════════════════════════════
+@app.route("/api/algorithms")
+def api_algorithms():
+    task = request.args.get("task", "classification")
+    try:
+        return jsonify(list_algorithms(task))
+    except ValueError as e:
+        return jsonify({"error": str(e)}), 400
+@app.route("/api/datasets")
+def api_datasets():
+    result = {
+        name: {k: v for k, v in cfg.items() if k != "loader"}
+        for name, cfg in DATASETS.items()
+    }
+    return jsonify(result)
+@app.route("/api/stats")
+def api_stats():
+    client = _mlflow_client()
+    try:
+        runs = client.search_runs(experiment_ids=[], max_results=500)
+    except Exception:
+        runs = []
+    finished = [r for r in runs if r.info.status == "FINISHED"]
+    best = 0.0
+    for r in finished:
+        v = r.data.metrics.get("accuracy") or r.data.metrics.get("r2_score") or 0
+        if v > best:
+            best = v
+    return jsonify({
+        "total_runs":     len(runs),
+        "completed_runs": len(finished),
+        "best_metric":    round(best, 4),
+        "n_experiments":  len(set(r.info.experiment_id for r in runs)),
+    })
+# ── Entry point ─────────────────────────────���──────────────────────────────────
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, debug=False)

docs-template.html ADDED Viewed

	@@ -0,0 +1,963 @@

+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>[PROJECT TITLE] · [YOUR NAME]</title>
+<!-- ▶ THEME FLICKER FIX -->
+<script>document.documentElement.setAttribute('data-theme', localStorage.getItem('mn-theme') || 'dark')</script>
+<!-- ▶ FAVICON: Replace initials "MN" and colors as needed -->
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234f8ef7'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='%23070d1f'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' font-family='Segoe UI,system-ui,sans-serif' font-weight='900' font-size='26' fill='url(%23g)'%3E[INITIALS]%3C/text%3E%3C/svg%3E">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
+<!-- ▶ Point these to your shared stylesheet and script if you have them -->
+<!-- <link rel="stylesheet" href="/projects/shared.css"> -->
+<!-- <script src="/projects/shared.js" defer></script> -->
+<style>
+/* ═══════════════════════════════════════════════════
+   CSS VARIABLES — Light/Dark theme
+   Accent: blue (#4f8ef7) + gold (#f59e0b)
+   Change --accent and --gold to match your project.
+════════════════════════════════════════════════════ */
+:root {
+  --accent: #4f8ef7;
+  --gold:   #f59e0b;
+  --teal:   #06b6d4;
+  --green:  #22c55e;
+  --radius: 14px;
+  /* Dark theme defaults */
+  --body-bg:          #070d1f;
+  --text:             #e2e8f0;
+  --muted:            #8892a4;
+  --glass:            rgba(255,255,255,.04);
+  --glass-border:     rgba(255,255,255,.08);
+  --card-hover-bg:    rgba(255,255,255,.07);
+  --card-hover-border:rgba(79,142,247,.3);
+  --section-alt:      #0b1120;
+}
+[data-theme="light"] {
+  --body-bg:          #f8fafc;
+  --text:             #0f172a;
+  --muted:            #4b5675;
+  --glass:            rgba(0,0,0,.03);
+  --glass-border:     rgba(0,0,0,.08);
+  --card-hover-bg:    rgba(0,0,0,.05);
+  --card-hover-border:rgba(37,99,235,.25);
+  --section-alt:      #f1f5f9;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--body-bg); color: var(--text); transition: background .35s, color .35s; }
+a { text-decoration: none; }
+code { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: .88em; background: rgba(79,142,247,.1); padding: 1px 5px; border-radius: 4px; }
+/* ── SECTION TAG ── */
+.s-tag { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; border-radius: 6px; margin-bottom: 10px; }
+.s-tag-blue { background: rgba(79,142,247,.12); color: var(--accent); border: 1px solid rgba(79,142,247,.2); }
+.s-tag-gold { background: rgba(245,158,11,.12); color: var(--gold);   border: 1px solid rgba(245,158,11,.2); }
+.s-tag-teal { background: rgba(6,182,212,.12);  color: var(--teal);   border: 1px solid rgba(6,182,212,.2); }
+/* ── GRADIENT TEXT ── */
+.grad-text { background: linear-gradient(135deg, var(--accent), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+/* ── HERO ── */
+.hero {
+  padding: 80px 24px 56px;
+  background: var(--body-bg);
+  position: relative; overflow: hidden; transition: background .35s;
+}
+.hero::before {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(79,142,247,.15) 0%, transparent 65%);
+}
+[data-theme="light"] .hero::before {
+  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(37,99,235,.09) 0%, transparent 65%);
+}
+.hero::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none;
+  background-image: linear-gradient(rgba(79,142,247,.035) 1px, transparent 1px),
+                    linear-gradient(90deg, rgba(79,142,247,.035) 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+.hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
+/* ── BREADCRUMB ── */
+.breadcrumb { font-size: .78rem; color: var(--muted); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.breadcrumb a { color: var(--muted); transition: .2s; }
+.breadcrumb a:hover { color: var(--accent); }
+.breadcrumb span { opacity: .4; }
+/* ── PILLS ── */
+.tag-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
+.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
+.pill-blue { background: rgba(79,142,247,.12); border: 1px solid rgba(79,142,247,.25); color: var(--accent); }
+.pill-gold { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); color: var(--gold); }
+.pill-teal { background: rgba(6,182,212,.12);  border: 1px solid rgba(6,182,212,.25);  color: var(--teal); }
+[data-theme="light"] .pill-blue { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.25); }
+[data-theme="light"] .pill-gold { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.25); color: #92400e; }
+[data-theme="light"] .pill-teal { background: rgba(8,145,178,.1); border-color: rgba(8,145,178,.25); color: #0e7490; }
+h1 { font-size: clamp(1.7rem,3.5vw,2.7rem); font-weight: 900; line-height: 1.2; margin-bottom: 20px; max-width: 820px; color: var(--text); }
+.hero-sub { font-size: 1rem; color: var(--muted); max-width: 680px; margin-bottom: 28px; line-height: 1.65; }
+.hero-sub strong { color: var(--text); }
+.hero-meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; font-size: .83rem; color: var(--muted); }
+.hero-meta span { display: flex; align-items: center; gap: 6px; }
+.hero-meta i { color: var(--accent); }
+.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
+/* ── BUTTONS ── */
+.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all .2s; font-family: inherit; text-decoration: none; }
+.btn-blue { background: rgba(79,142,247,.18); color: var(--accent); border-color: rgba(79,142,247,.35); }
+.btn-blue:hover { background: rgba(79,142,247,.3); transform: translateY(-2px); }
+.btn-gold { background: rgba(245,158,11,.15); color: var(--gold); border-color: rgba(245,158,11,.35); }
+.btn-gold:hover { background: rgba(245,158,11,.28); transform: translateY(-2px); }
+.btn-gray { background: var(--glass); color: var(--text); border-color: var(--glass-border); }
+.btn-gray:hover { background: var(--card-hover-bg); transform: translateY(-2px); }
+.btn-back { background: var(--glass); color: var(--muted); border-color: var(--glass-border); }
+.btn-back:hover { color: var(--accent); border-color: var(--card-hover-border); transform: translateY(-2px); }
+/* ── STATS BAR ── */
+.stats-bar { background: var(--section-alt); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); transition: background .35s; }
+.stats-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--glass-border); }
+.stat-item { background: var(--section-alt); padding: 22px 16px; text-align: center; transition: background .35s; }
+.stat-val { font-size: 1.8rem; font-weight: 900; background: linear-gradient(135deg,var(--accent),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 4px; }
+.stat-label { font-size: .75rem; color: var(--muted); line-height: 1.4; }
+/* ── MAIN LAYOUT ── */
+.main-layout { max-width: 1100px; margin: 0 auto; padding: 48px 24px; display: grid; grid-template-columns: 1fr 310px; gap: 32px; align-items: start; }
+.content-col { display: flex; flex-direction: column; gap: 28px; }
+.sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 20px; }
+/* ── CARDS ── */
+.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 28px; transition: all .25s; }
+.card:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-3px); }
+.card-title { font-size: 1rem; font-weight: 800; margin-bottom: 18px; color: var(--text); display: flex; align-items: center; gap: 10px; }
+.card-title i { color: var(--accent); font-size: .9rem; }
+.narrative { font-size: .92rem; color: var(--muted); margin-bottom: 10px; line-height: 1.7; }
+.narrative strong { color: var(--text); }
+/* ── PIPELINE ── */
+.pipeline { display: flex; align-items: stretch; gap: 0; margin: 20px 0; overflow-x: auto; padding-bottom: 4px; }
+.pipe-step { flex: 1; min-width: 120px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 16px 10px; text-align: center; transition: .25s; }
+.pipe-step:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); transform: translateY(-3px); }
+.pipe-arrow { display: flex; align-items: center; justify-content: center; width: 28px; flex-shrink: 0; color: var(--muted); font-size: .8rem; padding-top: 10px; }
+.pipe-icon  { font-size: 1.8rem; margin-bottom: 8px; line-height: 1; }
+.pipe-label { font-size: .75rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
+.pipe-sub   { font-size: .7rem; color: var(--muted); line-height: 1.4; }
+/* ── MODULE GRID ── */
+.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
+.mod-card { border-radius: 12px; padding: 20px; border: 1px solid; transition: .25s; }
+.mod-card:hover { transform: translateY(-3px); }
+/* ▶ Add your own color classes here like .mod-1 { background: rgba(79,142,247,.05); border-color: rgba(79,142,247,.2); } */
+.mod-1 { background: rgba(79,142,247,.05);  border-color: rgba(79,142,247,.2); }
+.mod-2 { background: rgba(239,68,68,.05);   border-color: rgba(239,68,68,.18); }
+.mod-3 { background: rgba(245,158,11,.05);  border-color: rgba(245,158,11,.18); }
+.mod-4 { background: rgba(6,182,212,.05);   border-color: rgba(6,182,212,.18); }
+.mod-5 { background: rgba(167,139,250,.05); border-color: rgba(167,139,250,.2); }
+.mod-6 { background: rgba(34,197,94,.05);   border-color: rgba(34,197,94,.18); }
+.mod-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 8px; margin-bottom: 8px; }
+.mod-name  { font-size: .93rem; font-weight: 800; margin-bottom: 5px; color: var(--text); }
+.mod-desc  { font-size: .77rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
+.mod-detail { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--glass-border); font-size: .77rem; }
+.mod-detail:last-child { border-bottom: none; }
+.mod-detail-key { color: var(--muted); }
+/* ── INSIGHT BANNER ── */
+.insight-banner { background: linear-gradient(135deg,rgba(79,142,247,.07),rgba(245,158,11,.07)); border: 1px solid rgba(79,142,247,.22); border-radius: var(--radius); padding: 22px; margin-top: 8px; display: flex; gap: 16px; align-items: flex-start; }
+.insight-icon { font-size: 2rem; flex-shrink: 0; }
+.insight-body h4 { font-size: .95rem; font-weight: 800; color: var(--text); margin-bottom: 5px; }
+.insight-body p  { font-size: .85rem; color: var(--muted); line-height: 1.6; }
+.insight-body strong { color: var(--accent); }
+/* ── ITEM STACK (reusable list of rows) ── */
+.item-stack { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
+.item-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; font-size: .82rem; transition: .2s; }
+.item-row:hover { background: var(--card-hover-bg); }
+.item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
+.item-name { color: var(--text); font-weight: 600; flex: 1; }
+.item-sub  { font-size: .72rem; color: var(--muted); }
+.item-tag  { font-size: .7rem; padding: 2px 8px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
+.tag-blue { background: rgba(79,142,247,.15); color: var(--accent); border: 1px solid rgba(79,142,247,.3); }
+.tag-red  { background: rgba(239,68,68,.15);  color: #f87171;       border: 1px solid rgba(239,68,68,.3); }
+.tag-green{ background: rgba(34,197,94,.15);  color: var(--green);  border: 1px solid rgba(34,197,94,.3); }
+.tag-gold { background: rgba(245,158,11,.15); color: var(--gold);   border: 1px solid rgba(245,158,11,.3); }
+/* ── DEMO / INTERACTIVE BLOCK ── */
+.demo-block { background: rgba(79,142,247,.04); border: 1px solid rgba(79,142,247,.15); border-radius: var(--radius); padding: 28px; }
+.demo-intro { font-size: .85rem; color: var(--muted); margin-bottom: 18px; font-style: italic; }
+.scenario-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
+.scen-btn { padding: 7px 16px; border-radius: 20px; font-size: .8rem; font-weight: 600; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-border); color: var(--muted); transition: .2s; font-family: inherit; }
+.scen-btn.active, .scen-btn:hover { background: rgba(79,142,247,.15); border-color: rgba(79,142,247,.35); color: var(--accent); }
+.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
+.res-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 14px; text-align: center; transition: .2s; }
+.res-card:hover { background: var(--card-hover-bg); transform: translateY(-2px); }
+.res-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
+.res-val   { font-size: 1.4rem; font-weight: 900; line-height: 1.1; }
+.res-sub   { font-size: .72rem; color: var(--muted); margin-top: 2px; }
+.risk-bar-wrap { margin: 14px 0; }
+.risk-bar-label { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 5px; }
+.risk-bar-track { height: 10px; border-radius: 5px; background: var(--glass); overflow: hidden; }
+.risk-bar-fill  { height: 100%; border-radius: 5px; transition: width .7s ease; }
+.demo-note { font-size: .73rem; color: var(--muted); font-style: italic; margin-top: 14px; text-align: center; }
+/* ─��� CHART TABS ── */
+.chart-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
+.chart-tab  { padding: 7px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; cursor: pointer; background: var(--glass); border: 1px solid var(--glass-border); color: var(--muted); transition: .2s; }
+.chart-tab.active { background: rgba(79,142,247,.15); border-color: rgba(79,142,247,.35); color: var(--accent); }
+.chart-panel { display: none; }
+.chart-panel.active { display: block; }
+.chart-wrap  { position: relative; height: 280px; }
+.chart-caption { font-size: .8rem; color: var(--muted); margin-top: 10px; font-style: italic; text-align: center; }
+/* ── TAKEAWAYS / HIGHLIGHTS ── */
+.takeaway-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 8px; }
+.takeaway { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; padding: 20px; text-align: center; transition: .2s; }
+.takeaway:hover { background: var(--card-hover-bg); transform: translateY(-3px); }
+.tk-icon  { font-size: 2rem; margin-bottom: 8px; }
+.tk-val   { font-size: 1.2rem; font-weight: 900; background: linear-gradient(135deg,var(--accent),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; }
+.tk-label { font-size: .78rem; color: var(--muted); line-height: 1.45; }
+/* ── SIDEBAR ── */
+.sidebar-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 20px; }
+.sidebar-card h3 { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 14px; }
+.tldr-text { font-size: .87rem; color: var(--muted); line-height: 1.7; }
+.tldr-text strong { color: var(--text); }
+.info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--glass-border); font-size: .82rem; gap: 8px; }
+.info-row:last-child { border-bottom: none; }
+.info-key { color: var(--muted); flex-shrink: 0; }
+.info-val { color: var(--text); font-weight: 600; text-align: right; font-size: .79rem; }
+.tech-pills { display: flex; flex-wrap: wrap; gap: 6px; }
+.tech-pill { background: rgba(79,142,247,.1); border: 1px solid rgba(79,142,247,.2); border-radius: 6px; padding: 3px 10px; font-size: .75rem; color: var(--accent); font-weight: 600; }
+[data-theme="light"] .tech-pill { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.2); }
+.sidebar-links { display: flex; flex-direction: column; gap: 8px; }
+.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; font-size: .82rem; color: var(--muted); transition: .2s; text-decoration: none; }
+.sidebar-link:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); color: var(--text); }
+.sidebar-link i { color: var(--accent); width: 16px; text-align: center; }
+.hf-btn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(135deg,rgba(255,175,7,.12),rgba(255,175,7,.06)); border: 1px solid rgba(255,175,7,.3); border-radius: 10px; font-size: .85rem; font-weight: 700; color: #f59e0b; transition: .2s; text-decoration: none; }
+.hf-btn:hover { background: linear-gradient(135deg,rgba(255,175,7,.2),rgba(255,175,7,.1)); transform: translateY(-2px); }
+/* ── RESPONSIVE ── */
+@media (max-width: 1000px) {
+  .main-layout { grid-template-columns: 1fr; }
+  .sidebar { position: static; }
+  .module-grid { grid-template-columns: 1fr 1fr; }
+  .takeaway-grid { grid-template-columns: 1fr 1fr; }
+  .stats-inner { grid-template-columns: repeat(3,1fr); }
+  .result-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 600px) {
+  .hero { padding: 70px 16px 40px; }
+  .pipeline { flex-direction: column; }
+  .module-grid { grid-template-columns: 1fr; }
+  .takeaway-grid { grid-template-columns: 1fr; }
+  .stats-inner { grid-template-columns: repeat(2,1fr); }
+  .result-grid { grid-template-columns: 1fr; }
+}
+</style>
+</head>
+<body>
+<!-- ═══════════════════════════════════════════
+     HERO SECTION
+     Replace all [PLACEHOLDER] text below.
+════════════════════════════════════════════ -->
+<section class="hero">
+  <div class="hero-inner">
+    <!-- Breadcrumb navigation -->
+    <div class="breadcrumb">
+      <a href="/index.html"><i class="fas fa-home"></i> Home</a>
+      <span>›</span>
+      <a href="/projects/index.html">Projects</a>
+      <span>›</span>
+      <span style="color:var(--text)">[PROJECT NAME]</span>
+    </div>
+    <!-- Category pills: edit icon, text for each pill -->
+    <div class="tag-row">
+      <span class="pill pill-blue"><i class="fas fa-tag"></i> [DOMAIN / CATEGORY]</span>
+      <span class="pill pill-teal"><i class="fab fa-python"></i> [TECH STACK SUMMARY]</span>
+      <span class="pill pill-gold"><i class="fas fa-rocket"></i> [STATUS / PLATFORM]</span>
+    </div>
+    <!-- Main title: wrap gradient words in <span class="grad-text"> -->
+    <h1>[PROJECT NAME] — <span class="grad-text">[SUBTITLE OR TAGLINE]</span></h1>
+    <!-- One or two sentence description -->
+    <p class="hero-sub">
+      [BRIEF DESCRIPTION OF WHAT THE PROJECT IS AND WHAT IT DOES.]
+      <strong>[KEY CAPABILITY OR DIFFERENTIATOR.]</strong>
+    </p>
+    <!-- Meta info chips -->
+    <div class="hero-meta">
+      <span><i class="fas fa-calendar-alt"></i> [YEAR / DATE]</span>
+      <span><i class="fas fa-user"></i> <strong>[YOUR NAME]</strong></span>
+      <span><i class="fas fa-database"></i> [DATASET SIZE / TYPE]</span>
+      <span><i class="fas fa-brain"></i> [MODEL COUNT / TYPE]</span>
+    </div>
+    <!-- CTA buttons — update hrefs -->
+    <div class="hero-actions">
+      <a href="#demo" class="btn btn-blue"><i class="fas fa-play-circle"></i> Explore Demo</a>
+      <a href="https://huggingface.co/spaces/[YOUR-HF-USERNAME]/[SPACE-NAME]" target="_blank" class="btn btn-gold">
+        <i class="fas fa-external-link-alt"></i> Try on HuggingFace
+      </a>
+      <a href="https://github.com/[YOUR-GITHUB-USERNAME]/[REPO-NAME]" target="_blank" class="btn btn-gray">
+        <i class="fab fa-github"></i> View on GitHub
+      </a>
+      <a href="/projects/index.html" class="btn btn-back"><i class="fas fa-arrow-left"></i> All Projects</a>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════════════
+     STATS BAR — 5 key numbers/facts
+════════════════════════════════════════════ -->
+<div class="stats-bar">
+  <div class="stats-inner">
+    <!-- Replace [VALUE] and [DESCRIPTION] for each stat -->
+    <div class="stat-item">
+      <div class="stat-val">[VALUE 1]</div>
+      <div class="stat-label">[Description of stat 1]</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-val">[VALUE 2]</div>
+      <div class="stat-label">[Description of stat 2]</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-val">[VALUE 3]</div>
+      <div class="stat-label">[Description of stat 3]</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-val">[VALUE 4]</div>
+      <div class="stat-label">[Description of stat 4]</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-val">[VALUE 5]</div>
+      <div class="stat-label">[Description of stat 5]</div>
+    </div>
+  </div>
+</div>
+<!-- ═══════════════════════════════════════════
+     MAIN LAYOUT: content column + sidebar
+════════════════════════════════════════════ -->
+<div class="main-layout">
+<div class="content-col">
+  <!-- ─────────────────────────────────────────
+       CARD 1: Architecture / Pipeline
+  ──────────────────────────────────────────── -->
+  <div class="card">
+    <div class="s-tag s-tag-blue">Architecture Overview</div>
+    <h2 class="card-title"><i class="fas fa-route"></i> [PIPELINE / ARCHITECTURE TITLE]</h2>
+    <!-- Narrative paragraph -->
+    <p class="narrative">
+      [Describe your system architecture and data flow here.
+      <strong>Highlight the key design decisions in bold.</strong>
+      Keep it 3–5 sentences.]
+    </p>
+    <!-- Pipeline steps — add/remove steps as needed -->
+    <div class="pipeline">
+      <div class="pipe-step">
+        <div class="pipe-icon">🗄️</div>
+        <div class="pipe-label">[Step 1 Name]</div>
+        <div class="pipe-sub">[Brief description]</div>
+      </div>
+      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
+      <div class="pipe-step">
+        <div class="pipe-icon">🧠</div>
+        <div class="pipe-label">[Step 2 Name]</div>
+        <div class="pipe-sub">[Brief description]</div>
+      </div>
+      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
+      <div class="pipe-step">
+        <div class="pipe-icon">📊</div>
+        <div class="pipe-label">[Step 3 Name]</div>
+        <div class="pipe-sub">[Brief description]</div>
+      </div>
+      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
+      <div class="pipe-step">
+        <div class="pipe-icon">🌐</div>
+        <div class="pipe-label">[Step 4 Name]</div>
+        <div class="pipe-sub">[Brief description]</div>
+      </div>
+      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
+      <div class="pipe-step">
+        <div class="pipe-icon">🚀</div>
+        <div class="pipe-label">[Step 5 Name]</div>
+        <div class="pipe-sub">[Brief description]</div>
+      </div>
+    </div>
+    <!-- Insight banner — a highlighted callout box -->
+    <div class="insight-banner">
+      <div class="insight-icon">💡</div>
+      <div class="insight-body">
+        <h4>[Callout / Insight Title]</h4>
+        <p>[Explain a key insight, design choice, or interesting fact about your architecture.
+           <strong>Highlight the most important part.</strong>]</p>
+      </div>
+    </div>
+  </div>
+  <!-- ─────────────────────────────────────────
+       CARD 2: Module / Feature Breakdown
+       6-card grid — remove cards if not needed
+  ──────────────────────────────────────────── -->
+  <div class="card">
+    <div class="s-tag s-tag-teal">Module Breakdown</div>
+    <h2 class="card-title"><i class="fas fa-layer-group"></i> [MODULES / FEATURES TITLE]</h2>
+    <div class="module-grid">
+      <!-- Module 1 -->
+      <div class="mod-card mod-1">
+        <div class="mod-badge" style="background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.22)">
+          [EMOJI] [Badge Label]
+        </div>
+        <div class="mod-name">[Module 1 Name]</div>
+        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--accent);font-weight:700">[Value]</span></div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
+      </div>
+      <!-- Module 2 -->
+      <div class="mod-card mod-2">
+        <div class="mod-badge" style="background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.22)">
+          [EMOJI] [Badge Label]
+        </div>
+        <div class="mod-name">[Module 2 Name]</div>
+        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:#f87171;font-weight:700">[Value]</span></div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
+      </div>
+      <!-- Module 3 -->
+      <div class="mod-card mod-3">
+        <div class="mod-badge" style="background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.22)">
+          [EMOJI] [Badge Label]
+        </div>
+        <div class="mod-name">[Module 3 Name]</div>
+        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--gold);font-weight:700">[Value]</span></div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
+      </div>
+      <!-- Module 4 -->
+      <div class="mod-card mod-4">
+        <div class="mod-badge" style="background:rgba(6,182,212,.12);color:var(--teal);border:1px solid rgba(6,182,212,.22)">
+          [EMOJI] [Badge Label]
+        </div>
+        <div class="mod-name">[Module 4 Name]</div>
+        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--teal);font-weight:700">[Value]</span></div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
+      </div>
+      <!-- Module 5 -->
+      <div class="mod-card mod-5">
+        <div class="mod-badge" style="background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.22)">
+          [EMOJI] [Badge Label]
+        </div>
+        <div class="mod-name">[Module 5 Name]</div>
+        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:#a78bfa;font-weight:700">[Value]</span></div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
+      </div>
+      <!-- Module 6 -->
+      <div class="mod-card mod-6">
+        <div class="mod-badge" style="background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.22)">
+          [EMOJI] [Badge Label]
+        </div>
+        <div class="mod-name">[Module 6 Name]</div>
+        <div class="mod-desc">[Short description of what this module does — 2 to 3 sentences.]</div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="color:var(--green);font-weight:700">[Value]</span></div>
+        <div class="mod-detail"><span class="mod-detail-key">[Key]</span><span style="font-weight:700">[Value]</span></div>
+      </div>
+    </div>
+  </div>
+  <!-- ─────────────────────────────────────────
+       CARD 3: Tech / Model Stack (row list)
+  ──────────────────────────────────────────── -->
+  <div class="card">
+    <div class="s-tag s-tag-blue">[Stack / Method Section Label]</div>
+    <h2 class="card-title"><i class="fas fa-brain"></i> [STACK / MODELS TITLE]</h2>
+    <p class="narrative">[Describe your models or technical stack in 2–3 sentences. <strong>Explain why these choices were made.</strong>]</p>
+    <div class="item-stack">
+      <!-- Item row 1 -->
+      <div class="item-row">
+        <div class="item-icon" style="background:rgba(79,142,247,.15);color:var(--accent)">
+          <i class="fas fa-cube"></i>
+        </div>
+        <div>
+          <div class="item-name">[Model / Component 1 Name]</div>
+          <div class="item-sub">[Features or details]</div>
+        </div>
+        <div class="item-tag tag-blue">[Tag label]</div>
+      </div>
+      <!-- Item row 2 -->
+      <div class="item-row">
+        <div class="item-icon" style="background:rgba(239,68,68,.15);color:#f87171">
+          <i class="fas fa-cube"></i>
+        </div>
+        <div>
+          <div class="item-name">[Model / Component 2 Name]</div>
+          <div class="item-sub">[Features or details]</div>
+        </div>
+        <div class="item-tag tag-red">[Tag label]</div>
+      </div>
+      <!-- Item row 3 -->
+      <div class="item-row">
+        <div class="item-icon" style="background:rgba(34,197,94,.15);color:var(--green)">
+          <i class="fas fa-cube"></i>
+        </div>
+        <div>
+          <div class="item-name">[Model / Component 3 Name]</div>
+          <div class="item-sub">[Features or details]</div>
+        </div>
+        <div class="item-tag tag-green">[Tag label]</div>
+      </div>
+      <!-- Item row 4 -->
+      <div class="item-row">
+        <div class="item-icon" style="background:rgba(245,158,11,.15);color:var(--gold)">
+          <i class="fas fa-cube"></i>
+        </div>
+        <div>
+          <div class="item-name">[Model / Component 4 Name]</div>
+          <div class="item-sub">[Features or details]</div>
+        </div>
+        <div class="item-tag tag-gold">[Tag label]</div>
+      </div>
+    </div>
+    <!-- Second insight banner -->
+    <div class="insight-banner" style="margin-top:16px">
+      <div class="insight-icon">⚙️</div>
+      <div class="insight-body">
+        <h4>[Second Callout Title]</h4>
+        <p>[Additional insight about your stack or methodology.
+           <strong>Highlight the most important part here.</strong>]</p>
+      </div>
+    </div>
+  </div>
+  <!-- ─────────────────────────────────────────
+       CARD 4: Interactive Demo
+       id="demo" is linked by the hero button
+  ──────────────────────────────────────────── -->
+  <div class="demo-block" id="demo">
+    <div class="s-tag s-tag-blue">Interactive Explorer</div>
+    <h2 class="card-title" style="margin-bottom:4px"><i class="fas fa-flask"></i> [DEMO SECTION TITLE]</h2>
+    <p class="demo-intro">[Brief intro sentence about what these tabs show — e.g. "Select a scenario to see representative outputs from the live model."]</p>
+    <!-- Tab buttons — update labels and onclick indices to match SCENARIOS array in JS -->
+    <div class="scenario-tabs" id="scenTabs">
+      <button class="scen-btn active" onclick="selectScen(0,this)">[Tab 1 Label]</button>
+      <button class="scen-btn"        onclick="selectScen(1,this)">[Tab 2 Label]</button>
+      <button class="scen-btn"        onclick="selectScen(2,this)">[Tab 3 Label]</button>
+      <button class="scen-btn"        onclick="selectScen(3,this)">[Tab 4 Label]</button>
+    </div>
+    <div id="scenOutput"></div>
+    <p class="demo-note">[Disclaimer note, e.g. "Illustrative outputs based on synthetic data. Live app scores in real time."]</p>
+  </div>
+  <!-- ─────────────────────────────────────────
+       CARD 5: Charts (tabbed)
+  ──────────────────────────────────────────── -->
+  <div class="card">
+    <div class="s-tag s-tag-blue">Performance Snapshot</div>
+    <h2 class="card-title"><i class="fas fa-chart-bar"></i> [CHARTS SECTION TITLE]</h2>
+    <!-- Tab labels — update to match your charts -->
+    <div class="chart-tabs">
+      <div class="chart-tab active" onclick="switchTab(0,this)">[Chart 1 Tab Label]</div>
+      <div class="chart-tab"        onclick="switchTab(1,this)">[Chart 2 Tab Label]</div>
+      <div class="chart-tab"        onclick="switchTab(2,this)">[Chart 3 Tab Label]</div>
+    </div>
+    <div class="chart-panel active" id="cp0">
+      <div class="chart-wrap"><canvas id="chart0"></canvas></div>
+      <p class="chart-caption">[Caption for chart 1 — explain what the data shows and what insight to take away.]</p>
+    </div>
+    <div class="chart-panel" id="cp1">
+      <div class="chart-wrap"><canvas id="chart1"></canvas></div>
+      <p class="chart-caption">[Caption for chart 2.]</p>
+    </div>
+    <div class="chart-panel" id="cp2">
+      <div class="chart-wrap"><canvas id="chart2"></canvas></div>
+      <p class="chart-caption">[Caption for chart 3.]</p>
+    </div>
+  </div>
+  <!-- ─────────────────────────────────────────
+       CARD 6: Key Design Decisions / Takeaways
+       3-column grid of highlight boxes
+  ──────────────────────────────────────────── -->
+  <div class="card">
+    <div class="s-tag s-tag-gold">Design Decisions</div>
+    <h2 class="card-title"><i class="fas fa-lightbulb"></i> [DECISIONS / HIGHLIGHTS TITLE]</h2>
+    <div class="takeaway-grid">
+      <div class="takeaway">
+        <div class="tk-icon">[EMOJI]</div>
+        <div class="tk-val">[Short headline]</div>
+        <div class="tk-label">[Explanation of this design choice — 2 to 3 sentences.]</div>
+      </div>
+      <div class="takeaway">
+        <div class="tk-icon">[EMOJI]</div>
+        <div class="tk-val">[Short headline]</div>
+        <div class="tk-label">[Explanation of this design choice — 2 to 3 sentences.]</div>
+      </div>
+      <div class="takeaway">
+        <div class="tk-icon">[EMOJI]</div>
+        <div class="tk-val">[Short headline]</div>
+        <div class="tk-label">[Explanation of this design choice — 2 to 3 sentences.]</div>
+      </div>
+    </div>
+  </div>
+</div><!-- /content-col -->
+<!-- ═══════════════════════════════════════════
+     SIDEBAR
+════════════════════════════════════════════ -->
+<div class="sidebar">
+  <!-- At-a-Glance summary -->
+  <div class="sidebar-card">
+    <h3>At a Glance</h3>
+    <p class="tldr-text">
+      <strong>What it is:</strong> [One sentence summary.]
+      <strong>Tech:</strong> [Key tools/frameworks.]
+      <strong>Deploy:</strong> [Where it runs.]
+      <strong>Scope:</strong> [What domains/features it covers.]
+    </p>
+  </div>
+  <!-- Live link button — update href -->
+  <div class="sidebar-card">
+    <h3>Try It Live</h3>
+    <a href="https://huggingface.co/spaces/[YOUR-HF-USERNAME]/[SPACE-NAME]" target="_blank" class="hf-btn">
+      <i class="fas fa-rocket"></i> Open on HuggingFace Spaces
+    </a>
+  </div>
+  <!-- Project metadata -->
+  <div class="sidebar-card">
+    <h3>Project Info</h3>
+    <div class="info-row"><span class="info-key">Status</span>     <span class="info-val" style="color:var(--accent)">[🔵 Live / 🟡 In Progress]</span></div>
+    <div class="info-row"><span class="info-key">Type</span>       <span class="info-val">[Academic / Industry / Personal]</span></div>
+    <div class="info-row"><span class="info-key">Domain</span>     <span class="info-val">[Field / Sector]</span></div>
+    <div class="info-row"><span class="info-key">Backend</span>    <span class="info-val">[Language · Framework]</span></div>
+    <div class="info-row"><span class="info-key">ML Models</span>  <span class="info-val">[Model names]</span></div>
+    <div class="info-row"><span class="info-key">Visualization</span><span class="info-val">[Library used]</span></div>
+    <div class="info-row"><span class="info-key">Records</span>    <span class="info-val">[Dataset size]</span></div>
+    <div class="info-row"><span class="info-key">Deploy target</span><span class="info-val">[Platform · Container · Port]</span></div>
+    <div class="info-row"><span class="info-key">Year</span>       <span class="info-val">[YEAR]</span></div>
+  </div>
+  <!-- Tech stack pills -->
+  <div class="sidebar-card">
+    <h3>Tech Stack</h3>
+    <div class="tech-pills">
+      <!-- Add or remove pills as needed -->
+      <span class="tech-pill">[Tech 1]</span>
+      <span class="tech-pill">[Tech 2]</span>
+      <span class="tech-pill">[Tech 3]</span>
+      <span class="tech-pill">[Tech 4]</span>
+      <span class="tech-pill">[Tech 5]</span>
+      <span class="tech-pill">[Tech 6]</span>
+    </div>
+  </div>
+  <!-- Module / Feature links — update hrefs and labels -->
+  <div class="sidebar-card">
+    <h3>[Modules / Features]</h3>
+    <div class="sidebar-links">
+      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 1]</a>
+      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 2]</a>
+      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 3]</a>
+      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 4]</a>
+      <a href="#" class="sidebar-link"><i class="fas fa-link"></i> [Feature / Page 5]</a>
+    </div>
+  </div>
+  <!-- Related links -->
+  <div class="sidebar-card">
+    <h3>Related Work</h3>
+    <div class="sidebar-links">
+      <a href="https://github.com/[YOUR-GITHUB-USERNAME]/[REPO-NAME]" target="_blank" class="sidebar-link">
+        <i class="fab fa-github"></i> GitHub Repository
+      </a>
+      <a href="/projects/[OTHER-PROJECT].html" class="sidebar-link"><i class="fas fa-link"></i> [Related Project 1]</a>
+      <a href="/projects/[OTHER-PROJECT].html" class="sidebar-link"><i class="fas fa-link"></i> [Related Project 2]</a>
+      <a href="/index.html#publications" class="sidebar-link"><i class="fas fa-book"></i> All Publications</a>
+      <a href="/projects/index.html" class="sidebar-link"><i class="fas fa-th-large"></i> Back to Projects</a>
+    </div>
+  </div>
+</div><!-- /sidebar -->
+</div><!-- /main-layout -->
+<!-- ═══════════════════════════════════════════
+     PAGE-SPECIFIC JAVASCRIPT
+     Edit SCENARIOS and chart data below.
+════════════════════════════════════════════ -->
+<script>
+/* ─── THEME HELPERS (don't need to change these) ─── */
+const html = document.documentElement;
+function isDark(){ return html.getAttribute('data-theme') !== 'light'; }
+function gc(){ return isDark() ? 'rgba(255,255,255,.05)' : 'rgba(0,0,0,.06)'; }
+function tc(){ return isDark() ? '#8892a4' : '#4b5675'; }
+function tt(){
+  return {
+    backgroundColor: isDark() ? 'rgba(7,13,31,.95)' : 'rgba(255,255,255,.97)',
+    titleColor:      isDark() ? '#e2e8f0' : '#0f172a',
+    bodyColor:       isDark() ? '#8892a4'  : '#4b5675',
+    borderColor:     isDark() ? 'rgba(79,142,247,.3)' : 'rgba(37,99,235,.2)',
+    borderWidth: 1
+  };
+}
+/* ─── SCENARIO DEMO DATA ───────────────────────────
+   Each object = one tab. Fill in your own values.
+   - title: shown above the metric cards
+   - metrics: array of 3 cards (label, value, sub-label, color)
+   - bar: a single progress bar (label, pct 0–100, color)
+   - insight: the text box below the bar
+─────────────────────────────────────────────────── */
+const SCENARIOS = [
+  {
+    title: '[EMOJI] [Scenario 1 Title]',
+    metrics: [
+      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
+      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' },
+      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#4f8ef7' }
+    ],
+    bar: { label: '[Bar label]', pct: 50, color: '#ef4444' },
+    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
+  },
+  {
+    title: '[EMOJI] [Scenario 2 Title]',
+    metrics: [
+      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
+      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' },
+      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#4f8ef7' }
+    ],
+    bar: { label: '[Bar label]', pct: 30, color: '#f59e0b' },
+    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
+  },
+  {
+    title: '[EMOJI] [Scenario 3 Title]',
+    metrics: [
+      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#4f8ef7' },
+      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' },
+      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#22c55e' }
+    ],
+    bar: { label: '[Bar label]', pct: 70, color: '#4f8ef7' },
+    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
+  },
+  {
+    title: '[EMOJI] [Scenario 4 Title]',
+    metrics: [
+      { label: '[Metric Label 1]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
+      { label: '[Metric Label 2]', val: '[VALUE]', sub: '[Sub-label]', color: '#ef4444' },
+      { label: '[Metric Label 3]', val: '[VALUE]', sub: '[Sub-label]', color: '#f59e0b' }
+    ],
+    bar: { label: '[Bar label]', pct: 45, color: '#ef4444' },
+    insight: '[Explanation of what the numbers mean for this scenario — 2 to 3 sentences.]'
+  }
+];
+/* ─── SCENARIO RENDERER (no need to change) ─── */
+function renderScen(idx){
+  const s = SCENARIOS[idx];
+  const metrics = s.metrics.map(m => `
+    <div class="res-card">
+      <div class="res-label">${m.label}</div>
+      <div class="res-val" style="color:${m.color}">${m.val}</div>
+      <div class="res-sub">${m.sub}</div>
+    </div>`).join('');
+  document.getElementById('scenOutput').innerHTML = `
+    <div style="font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:12px">${s.title}</div>
+    <div class="result-grid">${metrics}</div>
+    <div class="risk-bar-wrap">
+      <div class="risk-bar-label">
+        <span style="color:var(--muted);font-size:.78rem">${s.bar.label}</span>
+        <span style="color:${s.bar.color};font-weight:700;font-size:.82rem">${s.bar.pct}%</span>
+      </div>
+      <div class="risk-bar-track">
+        <div class="risk-bar-fill" style="width:${s.bar.pct}%;background:${s.bar.color}"></div>
+      </div>
+    </div>
+    <div style="background:rgba(79,142,247,.06);border:1px solid rgba(79,142,247,.15);border-radius:8px;padding:12px 16px;font-size:.82rem;color:var(--muted);line-height:1.65;margin-top:4px">${s.insight}</div>`;
+}
+function selectScen(idx, btn){
+  document.querySelectorAll('.scen-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  renderScen(idx);
+}
+renderScen(0);
+/* ─── CHART DATA ───────────────────────────────────
+   Edit the three buildChart(i) blocks below.
+   i=0 → Chart Tab 1, i=1 → Tab 2, i=2 → Tab 3
+   Chart.js docs: https://www.chartjs.org/docs/
+─────────────────────────────────────────────────── */
+const charts = {};
+function buildChart(i){
+  if(charts[i]) charts[i].destroy();
+  const ctx = document.getElementById('chart' + i);
+  if(!ctx) return;
+  const g = gc(), t = tc(), tip = tt();
+  if(i === 0){
+    /* ── CHART 1: Replace labels and data ── */
+    charts[0] = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: ['[Label A]', '[Label B]', '[Label C]', '[Label D]', '[Label E]'],
+        datasets:[{
+          label: '[Dataset Name]',
+          data: [10, 25, 40, 60, 80], /* ← replace with your values */
+          backgroundColor: [
+            'rgba(248,81,73,.8)',
+            'rgba(210,153,34,.75)',
+            'rgba(88,166,255,.7)',
+            'rgba(63,185,80,.7)',
+            'rgba(0,176,255,.75)'
+          ],
+          borderRadius: 6
+        }]
+      },
+      options:{
+        responsive:true, maintainAspectRatio:false,
+        plugins:{ legend:{labels:{color:t}}, tooltip:tip },
+        scales:{
+          x:{ ticks:{color:t}, grid:{color:g} },
+          y:{ ticks:{color:t}, grid:{color:g}, title:{display:true, text:'[Y-Axis Label]', color:t, font:{size:11}} }
+        }
+      }
+    });
+  } else if(i === 1){
+    /* ── CHART 2: Replace labels and data ── */
+    charts[1] = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: ['[Label A]', '[Label B]', '[Label C]', '[Label D]'],
+        datasets:[
+          {
+            label: '[Dataset 1]',
+            data: [20, 35, 50, 65], /* ← replace */
+            backgroundColor: isDark() ? 'rgba(248,81,73,.75)' : 'rgba(220,38,38,.7)',
+            borderRadius: 6
+          },
+          {
+            label: '[Dataset 2]',
+            data: [40, 30, 20, 15], /* ← replace */
+            backgroundColor: isDark() ? 'rgba(210,153,34,.6)' : 'rgba(217,119,6,.6)',
+            borderRadius: 6
+          }
+        ]
+      },
+      options:{
+        responsive:true, maintainAspectRatio:false,
+        plugins:{ legend:{labels:{color:t}}, tooltip:tip },
+        scales:{
+          x:{ ticks:{color:t}, grid:{color:g} },
+          y:{ ticks:{color:t}, grid:{color:g}, title:{display:true, text:'[Y-Axis Label]', color:t, font:{size:11}} }
+        }
+      }
+    });
+  } else if(i === 2){
+    /* ── CHART 3: Replace labels and data ── */
+    charts[2] = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: ['[Label A]', '[Label B]', '[Label C]'],
+        datasets:[
+          {
+            label: '[Dataset 1]',
+            data: [0.8, 1.1, 1.3], /* ← replace */
+            backgroundColor: [
+              isDark()?'rgba(0,176,255,.7)':'rgba(37,99,235,.65)',
+              'rgba(210,153,34,.7)',
+              'rgba(248,81,73,.7)'
+            ],
+            borderRadius: 6
+          },
+          {
+            label: '[Dataset 2]',
+            data: [1.1, 1.4, 1.6], /* ← replace */
+            backgroundColor: ['rgba(136,146,164,.4)','rgba(136,146,164,.4)','rgba(136,146,164,.4)'],
+            borderRadius: 6
+          }
+        ]
+      },
+      options:{
+        responsive:true, maintainAspectRatio:false,
+        plugins:{ legend:{labels:{color:t}}, tooltip:tip },
+        scales:{
+          x:{ ticks:{color:t}, grid:{color:g} },
+          y:{ ticks:{color:t}, grid:{color:g}, title:{display:true, text:'[Y-Axis Label]', color:t, font:{size:11}} }
+        }
+      }
+    });
+  }
+}
+function switchTab(i, el){
+  document.querySelectorAll('.chart-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.chart-panel').forEach(p => p.classList.remove('active'));
+  el.classList.add('active');
+  document.getElementById('cp' + i).classList.add('active');
+  buildChart(i);
+}
+buildChart(0); /* Build the first chart on page load */
+</script>
+</body>
+</html>

mlops/__init__.py ADDED Viewed

	@@ -0,0 +1 @@


1	+ # MLOps core package

mlops/algorithms.py ADDED Viewed

	@@ -0,0 +1,392 @@

+"""Algorithm registry for AutoMLOps — multiple categories for classification & regression."""
+from sklearn.linear_model import (
+    LogisticRegression, RidgeClassifier, SGDClassifier,
+    PassiveAggressiveClassifier, LinearRegression, Ridge, Lasso,
+    ElasticNet, BayesianRidge, HuberRegressor, SGDRegressor,
+)
+from sklearn.tree import DecisionTreeClassifier, DecisionTreeRegressor
+from sklearn.ensemble import (
+    RandomForestClassifier, ExtraTreesClassifier,
+    GradientBoostingClassifier, AdaBoostClassifier, BaggingClassifier,
+    RandomForestRegressor, ExtraTreesRegressor,
+    GradientBoostingRegressor, AdaBoostRegressor, BaggingRegressor,
+)
+from sklearn.svm import SVC, SVR, LinearSVC
+from sklearn.naive_bayes import GaussianNB, BernoulliNB, ComplementNB
+from sklearn.neighbors import KNeighborsClassifier, KNeighborsRegressor
+from sklearn.neural_network import MLPClassifier, MLPRegressor
+from sklearn.discriminant_analysis import (
+    LinearDiscriminantAnalysis, QuadraticDiscriminantAnalysis,
+)
+from xgboost import XGBClassifier, XGBRegressor
+from lightgbm import LGBMClassifier, LGBMRegressor
+# ── Shared verbosity helper ────────────────────────────────────────────────────
+_SILENT = {"verbosity": 0}          # XGBoost
+_LGBM_SILENT = {"verbose": -1}      # LightGBM
+ALGORITHMS = {
+    # ══════════════════════════════════════════════════════════════════════
+    #  CLASSIFICATION
+    # ══════════════════════════════════════════════════════════════════════
+    "classification": {
+        "Linear Models": {
+            "Logistic Regression": {
+                "class": LogisticRegression,
+                "params": {"max_iter": 1000, "random_state": 42},
+                "description": "L2-regularised linear classifier, interpretable baseline.",
+                "color": "#3b82f6",
+            },
+            "Logistic Regression (L1)": {
+                "class": LogisticRegression,
+                "params": {"penalty": "l1", "solver": "saga", "max_iter": 1000, "random_state": 42},
+                "description": "Sparse logistic regression via L1 regularisation.",
+                "color": "#60a5fa",
+            },
+            "Ridge Classifier": {
+                "class": RidgeClassifier,
+                "params": {"alpha": 1.0},
+                "description": "Ridge-regression-based classifier; fast on high-dim data.",
+                "color": "#93c5fd",
+            },
+            "SGD Classifier": {
+                "class": SGDClassifier,
+                "params": {"max_iter": 1000, "random_state": 42},
+                "description": "Stochastic Gradient Descent for large-scale linear classification.",
+                "color": "#bfdbfe",
+            },
+            "Passive Aggressive": {
+                "class": PassiveAggressiveClassifier,
+                "params": {"max_iter": 1000, "random_state": 42},
+                "description": "Online learning algorithm suited to text/streaming data.",
+                "color": "#dbeafe",
+            },
+            "Linear Discriminant Analysis": {
+                "class": LinearDiscriminantAnalysis,
+                "params": {},
+                "description": "Finds linear combinations that maximise class separation.",
+                "color": "#eff6ff",
+            },
+        },
+        "Tree-Based": {
+            "Decision Tree": {
+                "class": DecisionTreeClassifier,
+                "params": {"max_depth": 10, "random_state": 42},
+                "description": "Interpretable tree of if-else rules.",
+                "color": "#22c55e",
+            },
+            "Random Forest": {
+                "class": RandomForestClassifier,
+                "params": {"n_estimators": 100, "random_state": 42},
+                "description": "Bagging of decision trees; robust, low variance.",
+                "color": "#4ade80",
+            },
+            "Extra Trees": {
+                "class": ExtraTreesClassifier,
+                "params": {"n_estimators": 100, "random_state": 42},
+                "description": "Extremely randomised trees; faster than Random Forest.",
+                "color": "#86efac",
+            },
+            "Quadratic Discriminant Analysis": {
+                "class": QuadraticDiscriminantAnalysis,
+                "params": {},
+                "description": "Non-linear discriminant analysis with quadratic boundary.",
+                "color": "#bbf7d0",
+            },
+        },
+        "Ensemble / Boosting": {
+            "Gradient Boosting": {
+                "class": GradientBoostingClassifier,
+                "params": {"n_estimators": 100, "learning_rate": 0.1, "random_state": 42},
+                "description": "Sequential boosting of shallow trees; high accuracy.",
+                "color": "#f59e0b",
+            },
+            "AdaBoost": {
+                "class": AdaBoostClassifier,
+                "params": {"n_estimators": 100, "random_state": 42},
+                "description": "Adaptive boosting; up-weights misclassified samples.",
+                "color": "#fbbf24",
+            },
+            "Bagging Classifier": {
+                "class": BaggingClassifier,
+                "params": {"n_estimators": 50, "random_state": 42},
+                "description": "Bootstrap aggregating of any base estimator.",
+                "color": "#fcd34d",
+            },
+            "XGBoost": {
+                "class": XGBClassifier,
+                "params": {"n_estimators": 100, "learning_rate": 0.1, "random_state": 42, **_SILENT},
+                "description": "Optimised gradient boosting with regularisation; competition favourite.",
+                "color": "#d97706",
+            },
+            "LightGBM": {
+                "class": LGBMClassifier,
+                "params": {"n_estimators": 100, "learning_rate": 0.1, "random_state": 42, **_LGBM_SILENT},
+                "description": "Leaf-wise boosting; extremely fast on large datasets.",
+                "color": "#b45309",
+            },
+        },
+        "Support Vector Machines": {
+            "SVC (RBF Kernel)": {
+                "class": SVC,
+                "params": {"kernel": "rbf", "probability": True, "random_state": 42},
+                "description": "Non-linear SVM with radial basis function kernel.",
+                "color": "#a855f7",
+            },
+            "SVC (Polynomial)": {
+                "class": SVC,
+                "params": {"kernel": "poly", "degree": 3, "probability": True, "random_state": 42},
+                "description": "SVM with polynomial kernel; captures feature interactions.",
+                "color": "#c084fc",
+            },
+            "SVC (Linear)": {
+                "class": SVC,
+                "params": {"kernel": "linear", "probability": True, "random_state": 42},
+                "description": "Linear SVM; interpretable weights, good on text features.",
+                "color": "#d8b4fe",
+            },
+            "LinearSVC": {
+                "class": LinearSVC,
+                "params": {"max_iter": 2000, "random_state": 42},
+                "description": "Faster linear SVM implementation via liblinear.",
+                "color": "#ede9fe",
+            },
+        },
+        "Probabilistic": {
+            "Gaussian Naive Bayes": {
+                "class": GaussianNB,
+                "params": {},
+                "description": "Assumes Gaussian feature distribution; very fast baseline.",
+                "color": "#ec4899",
+            },
+            "Bernoulli Naive Bayes": {
+                "class": BernoulliNB,
+                "params": {},
+                "description": "NB for binary/boolean features; popular in text classification.",
+                "color": "#f472b6",
+            },
+            "Complement Naive Bayes": {
+                "class": ComplementNB,
+                "params": {},
+                "description": "Improved NB variant, particularly strong on imbalanced text data.",
+                "color": "#fbcfe8",
+            },
+        },
+        "Instance-Based (KNN)": {
+            "KNN (k=3)": {
+                "class": KNeighborsClassifier,
+                "params": {"n_neighbors": 3},
+                "description": "Majority vote from 3 nearest neighbours.",
+                "color": "#06b6d4",
+            },
+            "KNN (k=5)": {
+                "class": KNeighborsClassifier,
+                "params": {"n_neighbors": 5},
+                "description": "Majority vote from 5 nearest neighbours.",
+                "color": "#22d3ee",
+            },
+            "KNN (k=9)": {
+                "class": KNeighborsClassifier,
+                "params": {"n_neighbors": 9},
+                "description": "Majority vote from 9 nearest neighbours; smoother boundary.",
+                "color": "#67e8f9",
+            },
+        },
+        "Neural Networks": {
+            "MLP (Small)": {
+                "class": MLPClassifier,
+                "params": {"hidden_layer_sizes": (64,), "max_iter": 500, "random_state": 42},
+                "description": "Single hidden-layer neural network.",
+                "color": "#f43f5e",
+            },
+            "MLP (Medium)": {
+                "class": MLPClassifier,
+                "params": {"hidden_layer_sizes": (128, 64), "max_iter": 500, "random_state": 42},
+                "description": "Two hidden-layer neural network.",
+                "color": "#fb7185",
+            },
+            "MLP (Deep)": {
+                "class": MLPClassifier,
+                "params": {"hidden_layer_sizes": (256, 128, 64), "max_iter": 500, "random_state": 42},
+                "description": "Three hidden-layer neural network with ReLU activations.",
+                "color": "#fda4af",
+            },
+        },
+    },
+    # ══════════════════════════════════════════════════════════════════════
+    #  REGRESSION
+    # ══════════════════════════════════════════════════════════════════════
+    "regression": {
+        "Linear Models": {
+            "Linear Regression": {
+                "class": LinearRegression,
+                "params": {},
+                "description": "Ordinary least-squares; interpretable baseline.",
+                "color": "#3b82f6",
+            },
+            "Ridge Regression": {
+                "class": Ridge,
+                "params": {"alpha": 1.0},
+                "description": "L2-regularised linear regression; handles multicollinearity.",
+                "color": "#60a5fa",
+            },
+            "Lasso": {
+                "class": Lasso,
+                "params": {"alpha": 0.1, "max_iter": 2000},
+                "description": "L1 regularisation produces sparse feature weights.",
+                "color": "#93c5fd",
+            },
+            "ElasticNet": {
+                "class": ElasticNet,
+                "params": {"alpha": 0.1, "l1_ratio": 0.5, "max_iter": 2000},
+                "description": "Combines L1 and L2 regularisation.",
+                "color": "#bfdbfe",
+            },
+            "Bayesian Ridge": {
+                "class": BayesianRidge,
+                "params": {},
+                "description": "Probabilistic Bayesian linear regression with automatic regularisation.",
+                "color": "#dbeafe",
+            },
+            "Huber Regressor": {
+                "class": HuberRegressor,
+                "params": {"max_iter": 200},
+                "description": "Robust to outliers via Huber loss function.",
+                "color": "#eff6ff",
+            },
+        },
+        "Tree-Based": {
+            "Decision Tree Regressor": {
+                "class": DecisionTreeRegressor,
+                "params": {"max_depth": 10, "random_state": 42},
+                "description": "Recursive partitioning for regression.",
+                "color": "#22c55e",
+            },
+            "Random Forest Regressor": {
+                "class": RandomForestRegressor,
+                "params": {"n_estimators": 100, "random_state": 42},
+                "description": "Averaged predictions of many trees; low variance.",
+                "color": "#4ade80",
+            },
+            "Extra Trees Regressor": {
+                "class": ExtraTreesRegressor,
+                "params": {"n_estimators": 100, "random_state": 42},
+                "description": "Extremely randomised regression trees; fast.",
+                "color": "#86efac",
+            },
+        },
+        "Ensemble / Boosting": {
+            "Gradient Boosting Regressor": {
+                "class": GradientBoostingRegressor,
+                "params": {"n_estimators": 100, "learning_rate": 0.1, "random_state": 42},
+                "description": "Sequential boosting minimising regression loss.",
+                "color": "#f59e0b",
+            },
+            "AdaBoost Regressor": {
+                "class": AdaBoostRegressor,
+                "params": {"n_estimators": 100, "random_state": 42},
+                "description": "Adaptive boosting for regression.",
+                "color": "#fbbf24",
+            },
+            "Bagging Regressor": {
+                "class": BaggingRegressor,
+                "params": {"n_estimators": 50, "random_state": 42},
+                "description": "Bootstrap aggregating for regression.",
+                "color": "#fcd34d",
+            },
+            "XGBoost Regressor": {
+                "class": XGBRegressor,
+                "params": {"n_estimators": 100, "learning_rate": 0.1, "random_state": 42, **_SILENT},
+                "description": "Regularised gradient boosting; excellent out-of-the-box performance.",
+                "color": "#d97706",
+            },
+            "LightGBM Regressor": {
+                "class": LGBMRegressor,
+                "params": {"n_estimators": 100, "learning_rate": 0.1, "random_state": 42, **_LGBM_SILENT},
+                "description": "Leaf-wise boosting regressor; fast and memory-efficient.",
+                "color": "#b45309",
+            },
+        },
+        "Support Vector Machines": {
+            "SVR (RBF)": {
+                "class": SVR,
+                "params": {"kernel": "rbf"},
+                "description": "Non-linear support vector regression.",
+                "color": "#a855f7",
+            },
+            "SVR (Linear)": {
+                "class": SVR,
+                "params": {"kernel": "linear"},
+                "description": "Linear support vector regression.",
+                "color": "#c084fc",
+            },
+        },
+        "Instance-Based (KNN)": {
+            "KNN Regressor (k=3)": {
+                "class": KNeighborsRegressor,
+                "params": {"n_neighbors": 3},
+                "description": "Average of 3 nearest neighbours.",
+                "color": "#06b6d4",
+            },
+            "KNN Regressor (k=5)": {
+                "class": KNeighborsRegressor,
+                "params": {"n_neighbors": 5},
+                "description": "Average of 5 nearest neighbours.",
+                "color": "#22d3ee",
+            },
+        },
+        "Neural Networks": {
+            "MLP Regressor (Small)": {
+                "class": MLPRegressor,
+                "params": {"hidden_layer_sizes": (64,), "max_iter": 500, "random_state": 42},
+                "description": "Single hidden-layer neural network for regression.",
+                "color": "#f43f5e",
+            },
+            "MLP Regressor (Medium)": {
+                "class": MLPRegressor,
+                "params": {"hidden_layer_sizes": (128, 64), "max_iter": 500, "random_state": 42},
+                "description": "Two hidden-layer neural network for regression.",
+                "color": "#fb7185",
+            },
+        },
+    },
+}
+def get_algorithm(task: str, category: str, name: str) -> dict:
+    """Retrieve algorithm config by task / category / name."""
+    try:
+        return ALGORITHMS[task][category][name]
+    except KeyError:
+        raise ValueError(f"Algorithm not found: task={task}, category={category}, name={name}")
+def list_algorithms(task: str) -> dict:
+    """Return the algorithm tree for the given task type."""
+    if task not in ALGORITHMS:
+        raise ValueError(f"Unknown task: {task}")
+    return ALGORITHMS[task]
+def all_algorithm_names(task: str) -> list[str]:
+    """Flat list of all algorithm names for a given task."""
+    names = []
+    for cat in ALGORITHMS[task].values():
+        names.extend(cat.keys())
+    return names

mlops/datasets.py ADDED Viewed

	@@ -0,0 +1,96 @@

+"""Dataset loaders for AutoMLOps demo."""
+import numpy as np
+from sklearn.datasets import (
+    load_iris, load_wine, load_breast_cancer, load_digits,
+    load_diabetes, fetch_california_housing
+)
+from sklearn.model_selection import train_test_split
+from sklearn.preprocessing import StandardScaler
+DATASETS = {
+    # ── Classification ────────────────────────────────────────────────────
+    "Iris Flowers": {
+        "task": "classification",
+        "description": "Classic 3-class flower species classification (150 samples, 4 features)",
+        "loader": load_iris,
+        "icon": "🌸",
+        "difficulty": "Easy",
+    },
+    "Wine Quality": {
+        "task": "classification",
+        "description": "Wine cultivar identification from chemical analysis (178 samples, 13 features)",
+        "loader": load_wine,
+        "icon": "🍷",
+        "difficulty": "Easy",
+    },
+    "Breast Cancer": {
+        "task": "classification",
+        "description": "Tumour malignancy detection (569 samples, 30 features)",
+        "loader": load_breast_cancer,
+        "icon": "🔬",
+        "difficulty": "Medium",
+    },
+    "Handwritten Digits": {
+        "task": "classification",
+        "description": "Digit recognition 0-9 from pixel images (1797 samples, 64 features)",
+        "loader": load_digits,
+        "icon": "✍️",
+        "difficulty": "Medium",
+    },
+    # ── Regression ────────────────────────────────────────────────────────
+    "Diabetes Progression": {
+        "task": "regression",
+        "description": "Disease progression prediction from physiological measurements (442 samples, 10 features)",
+        "loader": load_diabetes,
+        "icon": "💉",
+        "difficulty": "Medium",
+    },
+    "California Housing": {
+        "task": "regression",
+        "description": "House price prediction from socio-economic data (20640 samples, 8 features)",
+        "loader": fetch_california_housing,
+        "icon": "🏠",
+        "difficulty": "Hard",
+    },
+}
+def load_dataset(name: str, test_size: float = 0.2, random_state: int = 42):
+    """Load a dataset and return train/test splits with metadata."""
+    if name not in DATASETS:
+        raise ValueError(f"Unknown dataset: {name}. Available: {list(DATASETS.keys())}")
+    cfg = DATASETS[name]
+    data = cfg["loader"]()
+    X, y = data.data, data.target
+    feature_names = (
+        list(data.feature_names) if hasattr(data, "feature_names") else
+        [f"feature_{i}" for i in range(X.shape[1])]
+    )
+    target_names = (
+        list(data.target_names) if hasattr(data, "target_names") else None
+    )
+    X_train, X_test, y_train, y_test = train_test_split(
+        X, y, test_size=test_size, random_state=random_state
+    )
+    metadata = {
+        "name": name,
+        "task": cfg["task"],
+        "description": cfg["description"],
+        "icon": cfg["icon"],
+        "difficulty": cfg["difficulty"],
+        "n_samples": X.shape[0],
+        "n_features": X.shape[1],
+        "n_train": X_train.shape[0],
+        "n_test": X_test.shape[0],
+        "feature_names": feature_names,
+        "target_names": target_names,
+        "n_classes": len(np.unique(y)) if cfg["task"] == "classification" else None,
+    }
+    return X_train, X_test, y_train, y_test, metadata

mlops/trainer.py ADDED Viewed

	@@ -0,0 +1,290 @@

+"""Background model trainer with MLflow tracking."""
+import time
+import uuid
+import threading
+import numpy as np
+from datetime import datetime
+import mlflow
+import mlflow.sklearn
+from sklearn.preprocessing import StandardScaler, LabelEncoder
+from sklearn.metrics import (
+    accuracy_score, f1_score, precision_score, recall_score,
+    r2_score, mean_absolute_error, mean_squared_error,
+    confusion_matrix, classification_report,
+)
+from mlops.datasets import load_dataset
+from mlops.algorithms import get_algorithm, ALGORITHMS
+# ── Shared job state ──────────────────────────────────────────────────────────
+training_jobs: dict = {}
+automl_jobs: dict = {}
+_lock = threading.Lock()
+# ── Internal helpers ──────────────────────────────────────────────────────────
+def _get_or_create_experiment(name: str) -> str:
+    mlflow.set_tracking_uri("sqlite:///mlflow.db")
+    exp = mlflow.get_experiment_by_name(name)
+    if exp is None:
+        return mlflow.create_experiment(name)
+    return exp.experiment_id
+def _update_job(store: dict, job_id: str, **kwargs):
+    with _lock:
+        store[job_id].update(kwargs)
+def _classification_metrics(y_test, y_pred) -> dict:
+    return {
+        "accuracy":  round(float(accuracy_score(y_test, y_pred)), 4),
+        "f1_score":  round(float(f1_score(y_test, y_pred, average="weighted", zero_division=0)), 4),
+        "precision": round(float(precision_score(y_test, y_pred, average="weighted", zero_division=0)), 4),
+        "recall":    round(float(recall_score(y_test, y_pred, average="weighted", zero_division=0)), 4),
+    }
+def _regression_metrics(y_test, y_pred) -> dict:
+    mse = float(mean_squared_error(y_test, y_pred))
+    return {
+        "r2_score": round(float(r2_score(y_test, y_pred)), 4),
+        "mae":      round(float(mean_absolute_error(y_test, y_pred)), 4),
+        "mse":      round(mse, 4),
+        "rmse":     round(float(np.sqrt(mse)), 4),
+    }
+# ── Single training run ───────────────────────────────────────────────────────
+def _do_train(job_id: str, dataset_name: str, algorithm_name: str,
+              algorithm_category: str, task_type: str, custom_params: dict | None):
+    """Executed in a daemon thread; updates training_jobs[job_id] in place."""
+    start_time = time.time()
+    try:
+        _update_job(training_jobs, job_id, status="running", progress=5)
+        mlflow.set_tracking_uri("sqlite:///mlflow.db")
+        # 1. Load data
+        X_train, X_test, y_train, y_test, meta = load_dataset(dataset_name)
+        _update_job(training_jobs, job_id, progress=20, dataset_meta=meta)
+        # 2. Algorithm config
+        algo_cfg = get_algorithm(task_type, algorithm_category, algorithm_name)
+        params = {**algo_cfg["params"], **(custom_params or {})}
+        # 3. Pre-process
+        scaler = StandardScaler()
+        X_train_s = scaler.fit_transform(X_train)
+        X_test_s  = scaler.transform(X_test)
+        # Handle NB algorithms that can't take negative inputs
+        if "Naive Bayes" in algorithm_name or "Complement" in algorithm_name:
+            from sklearn.preprocessing import MinMaxScaler
+            mms = MinMaxScaler()
+            X_train_s = mms.fit_transform(X_train)
+            X_test_s  = mms.transform(X_test)
+        _update_job(training_jobs, job_id, progress=35)
+        # 4. Train inside an MLflow run
+        exp_id = _get_or_create_experiment(dataset_name)
+        with mlflow.start_run(experiment_id=exp_id,
+                              run_name=f"{algorithm_name} — {dataset_name}") as run:
+            run_id = run.info.run_id
+            _update_job(training_jobs, job_id, mlflow_run_id=run_id, progress=40)
+            mlflow.set_tags({
+                "algorithm":  algorithm_name,
+                "category":   algorithm_category,
+                "dataset":    dataset_name,
+                "task_type":  task_type,
+                "job_id":     job_id,
+            })
+            mlflow.log_params({"algorithm": algorithm_name,
+                               "category": algorithm_category,
+                               "dataset": dataset_name,
+                               **{k: str(v) for k, v in params.items()}})
+            _update_job(training_jobs, job_id, progress=50)
+            model = algo_cfg["class"](**params)
+            model.fit(X_train_s, y_train)
+            _update_job(training_jobs, job_id, progress=75)
+            y_pred = model.predict(X_test_s)
+            if task_type == "classification":
+                metrics = _classification_metrics(y_test, y_pred)
+                cm = confusion_matrix(y_test, y_pred).tolist()
+                extra = {"confusion_matrix": cm,
+                         "report": classification_report(y_test, y_pred, output_dict=True,
+                                                          zero_division=0)}
+            else:
+                metrics = _regression_metrics(y_test, y_pred)
+                extra = {"y_test_sample": y_test[:50].tolist(),
+                         "y_pred_sample": y_pred[:50].tolist()}
+            mlflow.log_metrics(metrics)
+            mlflow.sklearn.log_model(model, "model")
+            _update_job(training_jobs, job_id, progress=90)
+        duration = round(time.time() - start_time, 2)
+        _update_job(training_jobs, job_id,
+                    status="completed", progress=100,
+                    metrics=metrics, extra=extra,
+                    duration=duration,
+                    completed_at=datetime.utcnow().isoformat())
+    except Exception as exc:
+        _update_job(training_jobs, job_id,
+                    status="failed", error=str(exc), progress=0)
+def start_training(dataset_name: str, algorithm_name: str,
+                   algorithm_category: str, task_type: str,
+                   custom_params: dict | None = None) -> str:
+    """Kick off a background training job and return its job_id."""
+    job_id = str(uuid.uuid4())[:8]
+    with _lock:
+        training_jobs[job_id] = {
+            "job_id":    job_id,
+            "status":    "queued",
+            "progress":  0,
+            "dataset":   dataset_name,
+            "algorithm": algorithm_name,
+            "category":  algorithm_category,
+            "task_type": task_type,
+            "created_at": datetime.utcnow().isoformat(),
+        }
+    t = threading.Thread(
+        target=_do_train,
+        args=(job_id, dataset_name, algorithm_name,
+              algorithm_category, task_type, custom_params),
+        daemon=True,
+    )
+    t.start()
+    return job_id
+# ── AutoML: exhaustive search across all algorithms ───────────────────────────
+def _do_automl(job_id: str, dataset_name: str, task_type: str,
+               optimize_metric: str, max_runs: int):
+    """Run every algorithm for the chosen task and log the best."""
+    try:
+        _update_job(automl_jobs, job_id, status="running", progress=2)
+        mlflow.set_tracking_uri("sqlite:///mlflow.db")
+        X_train, X_test, y_train, y_test, meta = load_dataset(dataset_name)
+        _update_job(automl_jobs, job_id, dataset_meta=meta, progress=5)
+        scaler = StandardScaler()
+        X_train_s = scaler.fit_transform(X_train)
+        X_test_s  = scaler.transform(X_test)
+        exp_id = _get_or_create_experiment(f"AutoML — {dataset_name}")
+        # Collect all algorithms for this task
+        all_algos = []
+        for cat_name, cat in ALGORITHMS[task_type].items():
+            for alg_name, alg_cfg in cat.items():
+                all_algos.append((cat_name, alg_name, alg_cfg))
+        if max_runs < len(all_algos):
+            import random
+            random.seed(42)
+            all_algos = random.sample(all_algos, max_runs)
+        results = []
+        total = len(all_algos)
+        for idx, (cat_name, alg_name, alg_cfg) in enumerate(all_algos):
+            _update_job(automl_jobs, job_id,
+                        progress=int(5 + 90 * idx / total),
+                        current_algo=alg_name)
+            try:
+                with mlflow.start_run(experiment_id=exp_id,
+                                      run_name=f"AutoML: {alg_name}") as run:
+                    mlflow.set_tags({"algorithm": alg_name, "category": cat_name,
+                                     "automl_job": job_id, "task_type": task_type})
+                    # NB needs non-negative values
+                    X_tr = X_train_s
+                    X_te = X_test_s
+                    if "Naive Bayes" in alg_name or "Complement" in alg_name:
+                        from sklearn.preprocessing import MinMaxScaler
+                        mms = MinMaxScaler()
+                        X_tr = mms.fit_transform(X_train)
+                        X_te = mms.transform(X_test)
+                    model = alg_cfg["class"](**alg_cfg["params"])
+                    t0 = time.time()
+                    model.fit(X_tr, y_train)
+                    dur = round(time.time() - t0, 2)
+                    y_pred = model.predict(X_te)
+                    if task_type == "classification":
+                        metrics = _classification_metrics(y_test, y_pred)
+                    else:
+                        metrics = _regression_metrics(y_test, y_pred)
+                    mlflow.log_params({"algorithm": alg_name, "category": cat_name})
+                    mlflow.log_metrics(metrics)
+                    mlflow.sklearn.log_model(model, "model")
+                    results.append({
+                        "rank":       idx + 1,
+                        "algorithm":  alg_name,
+                        "category":   cat_name,
+                        "metrics":    metrics,
+                        "duration":   dur,
+                        "run_id":     run.info.run_id,
+                        "color":      alg_cfg.get("color", "#8b5cf6"),
+                    })
+            except Exception:
+                pass  # skip failed algorithms silently
+        # Sort by optimise metric
+        higher_is_better = optimize_metric in ("accuracy", "f1_score", "precision",
+                                               "recall", "r2_score")
+        results.sort(key=lambda r: r["metrics"].get(optimize_metric, 0),
+                     reverse=higher_is_better)
+        for i, r in enumerate(results):
+            r["rank"] = i + 1
+        _update_job(automl_jobs, job_id,
+                    status="completed", progress=100,
+                    results=results,
+                    best=results[0] if results else None,
+                    completed_at=datetime.utcnow().isoformat())
+    except Exception as exc:
+        _update_job(automl_jobs, job_id, status="failed", error=str(exc))
+def start_automl(dataset_name: str, task_type: str,
+                 optimize_metric: str = "accuracy",
+                 max_runs: int = 20) -> str:
+    """Kick off an AutoML sweep and return the job_id."""
+    job_id = str(uuid.uuid4())[:8]
+    with _lock:
+        automl_jobs[job_id] = {
+            "job_id":     job_id,
+            "status":     "queued",
+            "progress":   0,
+            "dataset":    dataset_name,
+            "task_type":  task_type,
+            "metric":     optimize_metric,
+            "results":    [],
+            "created_at": datetime.utcnow().isoformat(),
+        }
+    t = threading.Thread(
+        target=_do_automl,
+        args=(job_id, dataset_name, task_type, optimize_metric, max_runs),
+        daemon=True,
+    )
+    t.start()
+    return job_id

pipelines/__init__.py ADDED Viewed

	@@ -0,0 +1 @@


1	+ # Pipelines package

pipelines/dag_engine.py ADDED Viewed

	@@ -0,0 +1,170 @@

+"""Lightweight DAG execution engine — inspired by Apache Airflow concepts."""
+from __future__ import annotations
+import time
+import uuid
+import threading
+from datetime import datetime
+from typing import Callable
+# ── Shared execution state ─────────────────────────────────────────────────────
+pipeline_executions: dict = {}
+_lock = threading.Lock()
+class Task:
+    """A single unit of work in a DAG."""
+    def __init__(self, task_id: str, name: str, description: str,
+                 func: Callable, upstream: list[str] | None = None,
+                 icon: str = "⚙️", layer: int = 0):
+        self.task_id    = task_id
+        self.name       = name
+        self.description = description
+        self.func       = func
+        self.upstream   = upstream or []   # list of task_ids this depends on
+        self.icon       = icon
+        self.layer      = layer            # visual column in the DAG
+class DAG:
+    """A directed acyclic graph of Tasks."""
+    def __init__(self, dag_id: str, name: str, description: str):
+        self.dag_id      = dag_id
+        self.name        = name
+        self.description = description
+        self.tasks: dict[str, Task] = {}
+    def add_task(self, task: Task):
+        self.tasks[task.task_id] = task
+    def topological_order(self) -> list[str]:
+        """Kahn's algorithm — returns task_ids in execution order."""
+        in_degree = {tid: 0 for tid in self.tasks}
+        for task in self.tasks.values():
+            for up in task.upstream:
+                in_degree[task.task_id] += 1
+        queue = [tid for tid, deg in in_degree.items() if deg == 0]
+        order = []
+        while queue:
+            # Sort for determinism
+            queue.sort(key=lambda t: (self.tasks[t].layer, t))
+            tid = queue.pop(0)
+            order.append(tid)
+            for task in self.tasks.values():
+                if tid in task.upstream:
+                    in_degree[task.task_id] -= 1
+                    if in_degree[task.task_id] == 0:
+                        queue.append(task.task_id)
+        return order
+    def to_dict(self) -> dict:
+        """Serialise DAG structure for the frontend."""
+        return {
+            "dag_id":      self.dag_id,
+            "name":        self.name,
+            "description": self.description,
+            "tasks": {
+                tid: {
+                    "task_id":     t.task_id,
+                    "name":        t.name,
+                    "description": t.description,
+                    "upstream":    t.upstream,
+                    "icon":        t.icon,
+                    "layer":       t.layer,
+                }
+                for tid, t in self.tasks.items()
+            },
+        }
+# ── Execution engine ──────────────────────────────────────────────────────────
+def _run_dag(exec_id: str, dag: DAG, context: dict):
+    """Execute a DAG in a background thread."""
+    try:
+        order = dag.topological_order()
+        total = len(order)
+        task_results: dict = {}
+        def _upd(**kw):
+            with _lock:
+                pipeline_executions[exec_id].update(kw)
+        def _upd_task(tid: str, **kw):
+            with _lock:
+                pipeline_executions[exec_id]["task_states"][tid].update(kw)
+        _upd(status="running", progress=0)
+        for step_idx, tid in enumerate(order):
+            task = dag.tasks[tid]
+            _upd_task(tid, status="running",
+                      started_at=datetime.utcnow().isoformat())
+            log_line = f"[{datetime.utcnow().strftime('%H:%M:%S')}] ▶  {task.name}"
+            with _lock:
+                pipeline_executions[exec_id]["logs"].append(log_line)
+            try:
+                result = task.func(context, task_results)
+                task_results[tid] = result
+                _upd_task(tid, status="success",
+                          finished_at=datetime.utcnow().isoformat(),
+                          result=str(result)[:200] if result is not None else "OK")
+                ok_line = f"[{datetime.utcnow().strftime('%H:%M:%S')}] ✔  {task.name} — OK"
+                with _lock:
+                    pipeline_executions[exec_id]["logs"].append(ok_line)
+            except Exception as exc:
+                _upd_task(tid, status="failed",
+                          finished_at=datetime.utcnow().isoformat(),
+                          error=str(exc))
+                err_line = f"[{datetime.utcnow().strftime('%H:%M:%S')}] ✖  {task.name} — {exc}"
+                with _lock:
+                    pipeline_executions[exec_id]["logs"].append(err_line)
+                # Continue with remaining tasks (soft failure)
+            progress = int(100 * (step_idx + 1) / total)
+            _upd(progress=progress)
+            time.sleep(0.4)   # small delay so the UI can animate
+        _upd(status="completed", progress=100,
+             completed_at=datetime.utcnow().isoformat())
+    except Exception as exc:
+        with _lock:
+            pipeline_executions[exec_id]["status"] = "failed"
+            pipeline_executions[exec_id]["error"]  = str(exc)
+def execute_dag(dag: DAG, context: dict | None = None) -> str:
+    """Start DAG execution in a background thread; return exec_id."""
+    exec_id = str(uuid.uuid4())[:8]
+    task_states = {
+        tid: {"status": "pending", "started_at": None,
+              "finished_at": None, "result": None, "error": None}
+        for tid in dag.tasks
+    }
+    with _lock:
+        pipeline_executions[exec_id] = {
+            "exec_id":    exec_id,
+            "dag_id":     dag.dag_id,
+            "dag_name":   dag.name,
+            "status":     "queued",
+            "progress":   0,
+            "task_states": task_states,
+            "logs":       [f"[{datetime.utcnow().strftime('%H:%M:%S')}] DAG '{dag.name}' queued"],
+            "created_at": datetime.utcnow().isoformat(),
+        }
+    t = threading.Thread(target=_run_dag, args=(exec_id, dag, context or {}), daemon=True)
+    t.start()
+    return exec_id

pipelines/pipeline_defs.py ADDED Viewed

	@@ -0,0 +1,195 @@

+"""Pre-built ML pipeline DAG definitions."""
+import time
+import numpy as np
+from pipelines.dag_engine import DAG, Task
+# ── Task functions ─────────────────────────────────────────────────────────────
+def _load_data(ctx, _results):
+    from mlops.datasets import load_dataset
+    ds = ctx.get("dataset", "Iris Flowers")
+    _, _, _, _, meta = load_dataset(ds)
+    return f"{meta['n_samples']} samples, {meta['n_features']} features loaded"
+def _validate_data(ctx, results):
+    time.sleep(0.2)
+    return "Schema OK · No nulls detected · Feature ranges valid"
+def _preprocess(ctx, results):
+    time.sleep(0.3)
+    return "StandardScaler fitted · Train/test split 80/20"
+def _feature_engineering(ctx, results):
+    time.sleep(0.2)
+    return "Polynomial features skipped · All features retained"
+def _train_model(ctx, results):
+    from mlops.datasets import load_dataset
+    from mlops.algorithms import get_algorithm
+    from sklearn.preprocessing import StandardScaler
+    import mlflow, mlflow.sklearn
+    ds   = ctx.get("dataset", "Iris Flowers")
+    cat  = ctx.get("category", "Ensemble / Boosting")
+    alg  = ctx.get("algorithm", "Random Forest")
+    task = ctx.get("task_type", "classification")
+    X_train, X_test, y_train, y_test, _ = load_dataset(ds)
+    scaler = StandardScaler()
+    X_tr = scaler.fit_transform(X_train)
+    X_te = scaler.transform(X_test)
+    cfg   = get_algorithm(task, cat, alg)
+    model = cfg["class"](**cfg["params"])
+    model.fit(X_tr, y_train)
+    score = model.score(X_te, y_test)
+    return f"Model trained · score={score:.4f}"
+def _evaluate_model(ctx, results):
+    time.sleep(0.2)
+    return "Accuracy / R² computed · Cross-val 5-fold done"
+def _generate_report(ctx, results):
+    time.sleep(0.15)
+    return "HTML report generated · Metrics written to mlflow"
+def _register_model(ctx, _results):
+    time.sleep(0.1)
+    return "Model artifact registered in MLflow Model Registry"
+def _deploy_staging(ctx, _results):
+    time.sleep(0.2)
+    return "Model transitioned to Staging · REST endpoint ready"
+# ── Retraining pipeline tasks ──────────────────────────────────────────────────
+def _check_drift(ctx, _):
+    time.sleep(0.2)
+    drift = round(np.random.uniform(0.01, 0.08), 4)
+    return f"PSI={drift} · {'Drift detected — retraining triggered' if drift > 0.05 else 'No drift · pipeline skipped'}"
+def _fetch_new_data(ctx, _):
+    time.sleep(0.3)
+    n = np.random.randint(200, 800)
+    return f"{n} new labelled samples fetched from data store"
+def _merge_datasets(ctx, _):
+    time.sleep(0.2)
+    return "New data merged with historical · duplicates removed"
+def _retrain_champion(ctx, _):
+    time.sleep(0.4)
+    acc = round(np.random.uniform(0.88, 0.97), 4)
+    return f"Champion model retrained · new accuracy={acc}"
+def _ab_test(ctx, _):
+    time.sleep(0.2)
+    return "A/B test scheduled · 10% traffic split for 24 h"
+def _promote_production(ctx, _):
+    time.sleep(0.15)
+    return "Champion model promoted to Production · old version archived"
+# ── Data pipeline tasks ────────────────────────────────────────────────────────
+def _ingest_raw(ctx, _):
+    time.sleep(0.2)
+    return "Raw data ingested from source"
+def _clean_data(ctx, _):
+    time.sleep(0.3)
+    removed = np.random.randint(5, 40)
+    return f"{removed} anomalous rows removed · missing values imputed"
+def _encode_features(ctx, _):
+    time.sleep(0.2)
+    return "Categorical features one-hot encoded · ordinals label-encoded"
+def _scale_features(ctx, _):
+    time.sleep(0.2)
+    return "Numeric features scaled with StandardScaler"
+def _save_processed(ctx, _):
+    time.sleep(0.1)
+    return "Processed dataset saved to feature store"
+# ── DAG builders ──────────────────────────────────────────────────────────────
+def build_training_pipeline() -> DAG:
+    dag = DAG("training_pipeline",
+              "Training Pipeline",
+              "End-to-end model training: ingest → preprocess → train → evaluate → register")
+    dag.add_task(Task("load_data",      "Load Data",          "Fetch dataset from registry",
+                      _load_data,           upstream=[],                  icon="📥", layer=0))
+    dag.add_task(Task("validate",       "Validate Data",      "Schema & quality checks",
+                      _validate_data,       upstream=["load_data"],       icon="✅", layer=1))
+    dag.add_task(Task("preprocess",     "Preprocess",         "Scale & split features",
+                      _preprocess,          upstream=["validate"],        icon="🔧", layer=2))
+    dag.add_task(Task("feat_eng",       "Feature Engineering","Derive new features",
+                      _feature_engineering, upstream=["preprocess"],      icon="⚗️", layer=2))
+    dag.add_task(Task("train",          "Train Model",        "Fit model with MLflow tracking",
+                      _train_model,         upstream=["feat_eng"],        icon="🧠", layer=3))
+    dag.add_task(Task("evaluate",       "Evaluate",           "Compute metrics on hold-out set",
+                      _evaluate_model,      upstream=["train"],           icon="📊", layer=4))
+    dag.add_task(Task("report",         "Generate Report",    "Write evaluation artefacts",
+                      _generate_report,     upstream=["evaluate"],        icon="📝", layer=4))
+    dag.add_task(Task("register",       "Register Model",     "Push model to MLflow Registry",
+                      _register_model,      upstream=["evaluate"],        icon="📦", layer=5))
+    dag.add_task(Task("deploy_staging", "Deploy to Staging",  "Transition registered model to Staging",
+                      _deploy_staging,      upstream=["register"],        icon="🚀", layer=6))
+    return dag
+def build_retraining_pipeline() -> DAG:
+    dag = DAG("retraining_pipeline",
+              "Retraining Pipeline",
+              "Automated retraining triggered by data drift detection")
+    dag.add_task(Task("drift_check",  "Drift Detection",    "PSI & KS tests on incoming data",
+                      _check_drift,         upstream=[],                  icon="📡", layer=0))
+    dag.add_task(Task("fetch_data",   "Fetch New Data",     "Pull latest labelled samples",
+                      _fetch_new_data,      upstream=["drift_check"],     icon="🗄️", layer=1))
+    dag.add_task(Task("merge",        "Merge Datasets",     "Combine new + historical data",
+                      _merge_datasets,      upstream=["fetch_data"],      icon="🔗", layer=2))
+    dag.add_task(Task("retrain",      "Retrain Champion",   "Retrain best model on merged data",
+                      _retrain_champion,    upstream=["merge"],           icon="🔁", layer=3))
+    dag.add_task(Task("ab_test",      "A/B Test",           "Shadow-deploy challenger",
+                      _ab_test,             upstream=["retrain"],         icon="🔀", layer=4))
+    dag.add_task(Task("promote",      "Promote to Prod",    "Archive old, promote new champion",
+                      _promote_production,  upstream=["ab_test"],         icon="🏆", layer=5))
+    return dag
+def build_data_pipeline() -> DAG:
+    dag = DAG("data_pipeline",
+              "Data Processing Pipeline",
+              "Automated feature engineering and data preparation pipeline")
+    dag.add_task(Task("ingest",   "Ingest Raw Data",    "Pull raw data from sources",
+                      _ingest_raw,    upstream=[],              icon="📥", layer=0))
+    dag.add_task(Task("clean",    "Clean Data",         "Remove outliers & impute missing",
+                      _clean_data,    upstream=["ingest"],      icon="🧹", layer=1))
+    dag.add_task(Task("encode",   "Encode Features",    "Categorical encoding",
+                      _encode_features, upstream=["clean"],     icon="🔢", layer=2))
+    dag.add_task(Task("scale",    "Scale Features",     "Normalise numeric columns",
+                      _scale_features, upstream=["encode"],     icon="⚖️",  layer=3))
+    dag.add_task(Task("save",     "Save to Feature Store","Persist processed dataset",
+                      _save_processed, upstream=["scale"],      icon="💾", layer=4))
+    return dag
+# Singleton instances (rebuilt on each call so context can vary)
+PIPELINE_BUILDERS = {
+    "training_pipeline":   build_training_pipeline,
+    "retraining_pipeline": build_retraining_pipeline,
+    "data_pipeline":       build_data_pipeline,
+}
+def get_pipeline(pipeline_id: str) -> DAG:
+    if pipeline_id not in PIPELINE_BUILDERS:
+        raise ValueError(f"Unknown pipeline: {pipeline_id}")
+    return PIPELINE_BUILDERS[pipeline_id]()

readme-template.md ADDED Viewed

	@@ -0,0 +1,264 @@

+---
+title: PROJECT_NAME
+colorFrom: COLOR_FROM
+colorTo: COLOR_TO
+sdk: docker
+---
+<div align="center">
+<h1>PROJECT_EMOJI PROJECT_NAME</h1>
+<img src="https://readme-typing-svg.demolab.com?font=Fira+Code&size=22&duration=3000&pause=1000&color=COLOR_HEX&center=true&vCenter=true&width=700&lines=TYPING_LINE_1;TYPING_LINE_2;TYPING_LINE_3" alt="Typing SVG"/>
+<br/>
+[![Python](https://img.shields.io/badge/Python-3.10+-3b82f6?style=for-the-badge&logo=python&logoColor=white)](https://www.python.org/)
+[![Flask](https://img.shields.io/badge/Flask-2.x-4f46e5?style=for-the-badge&logo=flask&logoColor=white)](https://flask.palletsprojects.com/)
+[![Docker](https://img.shields.io/badge/Docker-Ready-3b82f6?style=for-the-badge&logo=docker&logoColor=white)](https://www.docker.com/)
+[![HuggingFace](https://img.shields.io/badge/HuggingFace-Spaces-ffcc00?style=for-the-badge&logo=huggingface&logoColor=black)](https://huggingface.co/mnoorchenar/spaces)
+[![Status](https://img.shields.io/badge/Status-Active-22c55e?style=for-the-badge)](#)
+<br/>
+**PROJECT_EMOJI PROJECT_NAME** — PROJECT_DESCRIPTION
+<br/>
+---
+</div>
+## Table of Contents
+- [Features](#-features)
+- [Architecture](#️-architecture)
+- [Getting Started](#-getting-started)
+- [Docker Deployment](#-docker-deployment)
+- [Dashboard Modules](#-dashboard-modules)
+- [ML Models](#-ml-models)
+- [Project Structure](#-project-structure)
+- [Author](#-author)
+- [Contributing](#-contributing)
+- [Disclaimer](#disclaimer)
+- [License](#-license)
+---
+## ✨ Features
+<table>
+  <tr>
+    <td>FEATURE_EMOJI_1 <b>FEATURE_TITLE_1</b></td>
+    <td>FEATURE_DESCRIPTION_1</td>
+  </tr>
+  <tr>
+    <td>FEATURE_EMOJI_2 <b>FEATURE_TITLE_2</b></td>
+    <td>FEATURE_DESCRIPTION_2</td>
+  </tr>
+  <tr>
+    <td>FEATURE_EMOJI_3 <b>FEATURE_TITLE_3</b></td>
+    <td>FEATURE_DESCRIPTION_3</td>
+  </tr>
+  <tr>
+    <td>FEATURE_EMOJI_4 <b>FEATURE_TITLE_4</b></td>
+    <td>FEATURE_DESCRIPTION_4</td>
+  </tr>
+  <tr>
+    <td>🔒 <b>Secure by Design</b></td>
+    <td>Role-based access, audit logs, encrypted data pipelines</td>
+  </tr>
+  <tr>
+    <td>🐳 <b>Containerized Deployment</b></td>
+    <td>Docker-first architecture, cloud-ready and scalable</td>
+  </tr>
+</table>
+---
+## 🏗️ Architecture
+```
+┌─────────────────────────────────────────────────────────┐
+│                    PROJECT_NAME                         │
+│                                                         │
+│  ┌───────────┐    ┌───────────┐    ┌───────────────┐  │
+│  │  Data     │───▶│    ML     │───▶│   Flask API   │  │
+│  │  Sources  │    │  Engine   │    │   Backend     │  │
+│  └───────────┘    └───────────┘    └───────┬───────┘  │
+│                                            │           │
+│                                   ┌────────▼────────┐  │
+│                                   │  Plotly Dash    │  │
+│                                   │   Dashboard     │  │
+│                                   └─────────────────┘  │
+└─────────────────────────────────────────────────────────┘
+```
+---
+## 🚀 Getting Started
+### Prerequisites
+- Python 3.10+
+- Docker & Docker Compose
+- Git
+### Local Installation
+```bash
+# 1. Clone the repository
+git clone https://github.com/mnoorchenar/PROJECT_NAME.git
+cd PROJECT_NAME
+# 2. Create a virtual environment
+python -m venv venv
+source venv/bin/activate  # Windows: venv\Scripts\activate
+# 3. Install dependencies
+pip install -r requirements.txt
+# 4. Configure environment variables
+cp .env.example .env
+# Edit .env with your settings
+# 5. Run the application
+python app.py
+```
+Open your browser at `http://localhost:7860` 🎉
+---
+## 🐳 Docker Deployment
+```bash
+# Build and run with Docker Compose
+docker compose up --build
+# Or pull and run the pre-built image
+docker pull mnoorchenar/PROJECT_NAME
+docker run -p 7860:7860 mnoorchenar/PROJECT_NAME
+```
+---
+## 📊 Dashboard Modules
+| Module | Description | Status |
+|--------|-------------|--------|
+| MODULE_EMOJI_1 MODULE_NAME_1 | MODULE_DESC_1 | ✅ Live |
+| MODULE_EMOJI_2 MODULE_NAME_2 | MODULE_DESC_2 | ✅ Live |
+| MODULE_EMOJI_3 MODULE_NAME_3 | MODULE_DESC_3 | ✅ Live |
+| MODULE_EMOJI_4 MODULE_NAME_4 | MODULE_DESC_4 | 🔄 Beta |
+| MODULE_EMOJI_5 MODULE_NAME_5 | MODULE_DESC_5 | ✅ Live |
+| MODULE_EMOJI_6 MODULE_NAME_6 | MODULE_DESC_6 | 🗓️ Planned |
+---
+## 🧠 ML Models
+```python
+# Core Models Used in PROJECT_NAME
+models = {
+    "MODEL_KEY_1": "MODEL_VALUE_1",
+    "MODEL_KEY_2": "MODEL_VALUE_2",
+    "MODEL_KEY_3": "MODEL_VALUE_3",
+    "MODEL_KEY_4": "MODEL_VALUE_4",
+    "MODEL_KEY_5": "MODEL_VALUE_5"
+}
+```
+---
+## 📁 Project Structure
+```
+PROJECT_NAME/
+│
+├── 📂 app/
+│   ├── 📂 models/          # ML model definitions & loaders
+│   ├── 📂 routes/          # Flask API endpoints
+│   ├── 📂 dashboards/      # Plotly Dash layouts
+│   └── 📂 utils/           # Helpers, preprocessing, logging
+│
+├── 📂 data/
+│   ├── 📂 raw/             # Raw data sources
+│   └── 📂 processed/       # Feature-engineered datasets
+│
+├── 📂 notebooks/           # Exploratory analysis & model training
+├── 📂 tests/               # Unit and integration tests
+├── 📄 app.py               # Application entry point
+├── 📄 Dockerfile           # Container definition
+├── 📄 docker-compose.yml   # Multi-service orchestration
+├── 📄 requirements.txt     # Python dependencies
+└── 📄 .env.example         # Environment variable template
+```
+---
+## 👨‍💻 Author
+<div align="center">
+<table>
+<tr>
+<td align="center" width="100%">
+<img src="https://avatars.githubusercontent.com/mnoorchenar" width="120" style="border-radius:50%; border: 3px solid #4f46e5;" alt="Mohammad Noorchenarboo"/>
+<h3>Mohammad Noorchenarboo</h3>
+<code>Data Scientist</code> &nbsp;|&nbsp; <code>AI Researcher</code> &nbsp;|&nbsp; <code>Biostatistician</code>
+📍 &nbsp;Ontario, Canada &nbsp;&nbsp; 📧 &nbsp;[mohammadnoorchenarboo@gmail.com](mailto:mohammadnoorchenarboo@gmail.com)
+──────────────────────────────────────
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mnoorchenar)&nbsp;
+[![Personal Site](https://img.shields.io/badge/Website-mnoorchenar.github.io-4f46e5?style=for-the-badge&logo=githubpages&logoColor=white)](https://mnoorchenar.github.io/)&nbsp;
+[![HuggingFace](https://img.shields.io/badge/HuggingFace-ffcc00?style=for-the-badge&logo=huggingface&logoColor=black)](https://huggingface.co/mnoorchenar/spaces)&nbsp;
+[![Google Scholar](https://img.shields.io/badge/Scholar-4285F4?style=for-the-badge&logo=googlescholar&logoColor=white)](https://scholar.google.ca/citations?user=nn_Toq0AAAAJ&hl=en)&nbsp;
+[![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/mnoorchenar)
+</td>
+</tr>
+</table>
+</div>
+---
+## 🤝 Contributing
+Contributions are welcome! Please follow these steps:
+1. **Fork** the repository
+2. **Create** a feature branch: `git checkout -b feature/amazing-feature`
+3. **Commit** your changes: `git commit -m 'Add amazing feature'`
+4. **Push** to the branch: `git push origin feature/amazing-feature`
+5. **Open** a Pull Request
+---
+## Disclaimer
+<span style="color:red">This project is developed strictly for educational and research purposes and does not constitute professional advice of any kind. All datasets used are either synthetically generated or publicly available — no real user data is stored. This software is provided "as is" without warranty of any kind; use at your own risk.</span>
+---
+## 📜 License
+Distributed under the **MIT License**. See [`LICENSE`](LICENSE) for more information.
+---
+<div align="center">
+<img src="https://capsule-render.vercel.app/api?type=waving&color=0:3b82f6,100:4f46e5&height=120&section=footer&text=Made%20with%20%E2%9D%A4%EF%B8%8F%20by%20Mohammad%20Noorchenarboo&fontColor=ffffff&fontSize=18&fontAlignY=80" width="100%"/>
+[![GitHub Stars](https://img.shields.io/github/stars/mnoorchenar/PROJECT_NAME?style=social)](https://github.com/mnoorchenar/PROJECT_NAME)
+[![GitHub Forks](https://img.shields.io/github/forks/mnoorchenar/PROJECT_NAME?style=social)](https://github.com/mnoorchenar/PROJECT_NAME/fork)
+<sub>The name "PROJECT_NAME" is used purely for academic and research purposes. Any similarity to existing company names, products, or trademarks is entirely coincidental and unintentional. This project has no affiliation with any commercial entity.</sub>
+</div>

requirements.txt CHANGED Viewed

	@@ -1 +1,10 @@
1	- flask==3.0.0

+flask==3.0.0
+mlflow==2.14.1
+scikit-learn==1.4.2
+pandas==2.2.2
+numpy==1.26.4
+plotly==5.22.0
+xgboost==2.0.3
+lightgbm==4.3.0
+gunicorn==22.0.0
+scipy==1.13.0

static/css/style.css ADDED Viewed

	@@ -0,0 +1,486 @@

+/* ── AutoMLOps — Dark Theme ─────────────────────────────────────────────── */
+:root {
+  --bg-primary:    #0d1117;
+  --bg-secondary:  #161b22;
+  --bg-tertiary:   #21262d;
+  --bg-hover:      #30363d44;
+  --border-color:  #30363d;
+  --text-primary:  #e6edf3;
+  --text-secondary:#8b949e;
+  --text-muted:    #656d76;
+  --accent:        #8b5cf6;
+  --accent-light:  #a78bfa;
+  --accent-blue:   #3b82f6;
+  --success:       #22c55e;
+  --warning:       #f59e0b;
+  --danger:        #ef4444;
+  --cyan:          #06b6d4;
+  --sidebar-w:     240px;
+  --navbar-h:      56px;
+  --radius:        10px;
+  --radius-sm:     6px;
+  --shadow:        0 4px 24px rgba(0,0,0,.45);
+}
+/* ── Reset / base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 15px; }
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+a { color: var(--accent-light); text-decoration: none; }
+a:hover { color: var(--accent); }
+/* ── Scrollbar ────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
+/* ── Sidebar ──────────────────────────────────────────────────────────────── */
+.sidebar {
+  position: fixed;
+  top: 0; left: 0;
+  width: var(--sidebar-w);
+  height: 100vh;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  transition: transform .25s ease;
+}
+.sidebar-logo {
+  display: flex; align-items: center; gap: 10px;
+  padding: 18px 20px 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+.sidebar-logo-icon {
+  width: 34px; height: 34px; border-radius: 8px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
+  display: flex; align-items: center; justify-content: center;
+  font-size: 17px;
+}
+.sidebar-logo-text { font-weight: 700; font-size: 1rem; letter-spacing: -.3px; }
+.sidebar-logo-sub  { font-size: .68rem; color: var(--text-muted); }
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
+.nav-section-label {
+  padding: 14px 20px 4px;
+  font-size: .68rem;
+  font-weight: 600;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 20px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 0;
+  transition: background .15s, color .15s;
+  font-size: .9rem;
+}
+.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
+.nav-item.active { color: var(--accent-light); background: #8b5cf618; }
+.nav-item .nav-icon { width: 18px; text-align: center; font-size: .95rem; }
+.nav-badge {
+  margin-left: auto;
+  background: var(--accent);
+  color: #fff;
+  font-size: .62rem;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+.sidebar-footer {
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-color);
+  font-size: .78rem;
+  color: var(--text-muted);
+}
+.sidebar-footer a { color: var(--text-muted); }
+.sidebar-footer a:hover { color: var(--accent-light); }
+/* ── Top navbar ───────────────────────────────────────────────────────────── */
+.topnav {
+  position: fixed;
+  top: 0; left: var(--sidebar-w); right: 0;
+  height: var(--navbar-h);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex; align-items: center;
+  padding: 0 24px;
+  z-index: 90;
+  gap: 12px;
+}
+.topnav-title { font-weight: 600; font-size: 1rem; flex: 1; }
+.topnav-badge {
+  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
+  color: #fff;
+  font-size: .7rem;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+/* ── Main content ─────────────────────────────────────────────────────────── */
+.main {
+  margin-left: var(--sidebar-w);
+  padding-top: var(--navbar-h);
+  min-height: 100vh;
+}
+.page-content { padding: 28px 32px; }
+/* ── Cards ────────────────���───────────────────────────────────────────────── */
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.card-header {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 16px;
+}
+.card-title { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
+.card-sm { padding: 14px 18px; }
+/* ── Stat cards ───────────────────────────────────────────────────────────── */
+.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
+.stat-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 20px 22px;
+  position: relative;
+  overflow: hidden;
+}
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+}
+.stat-card.purple::before  { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
+.stat-card.blue::before    { background: linear-gradient(90deg, var(--accent-blue), var(--cyan)); }
+.stat-card.green::before   { background: linear-gradient(90deg, var(--success), #4ade80); }
+.stat-card.yellow::before  { background: linear-gradient(90deg, var(--warning), #fcd34d); }
+.stat-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
+.stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -.5px; }
+.stat-sub   { font-size: .78rem; color: var(--text-secondary); margin-top: 4px; }
+/* ── Badges / pills ───────────────────────────────────────────────────────── */
+.badge {
+  display: inline-block;
+  padding: 2px 9px;
+  border-radius: 12px;
+  font-size: .72rem;
+  font-weight: 600;
+}
+.badge-success  { background: #22c55e22; color: var(--success); }
+.badge-warning  { background: #f59e0b22; color: var(--warning); }
+.badge-danger   { background: #ef444422; color: var(--danger); }
+.badge-info     { background: #3b82f622; color: var(--accent-blue); }
+.badge-purple   { background: #8b5cf622; color: var(--accent-light); }
+.badge-muted    { background: var(--bg-tertiary); color: var(--text-secondary); }
+.stage-production { background: #22c55e22; color: var(--success); }
+.stage-staging    { background: #f59e0b22; color: var(--warning); }
+.stage-archived   { background: #ef444422; color: var(--danger); }
+.stage-none       { background: var(--bg-tertiary); color: var(--text-muted); }
+/* ── Buttons ──────────────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 8px 18px;
+  border-radius: var(--radius-sm);
+  font-size: .85rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity .15s, transform .1s;
+  white-space: nowrap;
+}
+.btn:hover  { opacity: .88; }
+.btn:active { transform: scale(.97); }
+.btn-primary  { background: var(--accent);      color: #fff; }
+.btn-blue     { background: var(--accent-blue); color: #fff; }
+.btn-success  { background: var(--success);     color: #fff; }
+.btn-warning  { background: var(--warning);     color: #000; }
+.btn-danger   { background: var(--danger);      color: #fff; }
+.btn-ghost    { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
+.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-secondary); background: var(--bg-hover); }
+.btn-sm { padding: 5px 12px; font-size: .8rem; }
+.btn-lg { padding: 11px 24px; font-size: .95rem; }
+.btn:disabled { opacity: .45; cursor: not-allowed; }
+/* ── Tables ───────────────────────────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; }
+thead tr { border-bottom: 1px solid var(--border-color); }
+th {
+  text-align: left;
+  padding: 10px 14px;
+  font-size: .78rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  white-space: nowrap;
+}
+td { padding: 11px 14px; font-size: .88rem; border-bottom: 1px solid #30363d55; }
+tr:last-child td { border-bottom: none; }
+tr:hover td { background: var(--bg-hover); }
+/* ── Forms ─────────────────────────────────────────────────────────────��──── */
+.form-group { margin-bottom: 16px; }
+.form-label { display: block; font-size: .82rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
+.form-control, .form-select {
+  width: 100%;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  padding: 9px 12px;
+  font-size: .88rem;
+  outline: none;
+  transition: border-color .15s;
+  appearance: none;
+}
+.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #8b5cf620; }
+.form-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 32px;
+}
+/* ── Progress bars ────────────────────────────────────────────────────────── */
+.progress-bar-wrap {
+  background: var(--bg-tertiary);
+  border-radius: 99px;
+  height: 8px;
+  overflow: hidden;
+}
+.progress-bar {
+  height: 100%;
+  border-radius: 99px;
+  background: linear-gradient(90deg, var(--accent), var(--accent-blue));
+  transition: width .4s ease;
+}
+/* ── Tabs ─────────────────────────────────────────────────────────────────── */
+.tab-bar {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 20px;
+}
+.tab-btn {
+  padding: 9px 18px;
+  font-size: .87rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color .15s, border-color .15s;
+  margin-bottom: -1px;
+}
+.tab-btn:hover  { color: var(--text-primary); }
+.tab-btn.active { color: var(--accent-light); border-bottom-color: var(--accent); }
+.tab-panel { display: none; }
+.tab-panel.active { display: block; }
+/* ── Modals ───────────────────────────────────────────────────────────────── */
+.modal-overlay {
+  position: fixed; inset: 0;
+  background: rgba(0,0,0,.65);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 200;
+  opacity: 0; pointer-events: none;
+  transition: opacity .2s;
+}
+.modal-overlay.open { opacity: 1; pointer-events: all; }
+.modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  padding: 24px;
+  width: min(540px, 95vw);
+  max-height: 90vh;
+  overflow-y: auto;
+  transform: translateY(12px);
+  transition: transform .2s;
+}
+.modal-overlay.open .modal { transform: translateY(0); }
+.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
+.modal-title  { font-size: 1.05rem; font-weight: 600; }
+.modal-close  { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.1rem; }
+.modal-close:hover { color: var(--danger); }
+.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
+/* ── Toast notifications ──────────────────────────────────────────────────── */
+#toast-area {
+  position: fixed; bottom: 24px; right: 24px;
+  z-index: 300; display: flex; flex-direction: column; gap: 10px;
+}
+.toast {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 12px 18px;
+  font-size: .86rem;
+  box-shadow: var(--shadow);
+  display: flex; align-items: center; gap: 10px;
+  animation: slideIn .25s ease;
+  min-width: 240px;
+}
+.toast.success { border-left: 3px solid var(--success); }
+.toast.error   { border-left: 3px solid var(--danger);  }
+.toast.info    { border-left: 3px solid var(--accent);  }
+@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
+/* ── Pipeline / DAG canvas ────────────────────────────────────────────────── */
+.dag-canvas { background: var(--bg-primary); border-radius: var(--radius); min-height: 300px; }
+.pipeline-log {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 14px;
+  font-family: 'Fira Code', 'Courier New', monospace;
+  font-size: .82rem;
+  color: var(--text-secondary);
+  max-height: 240px;
+  overflow-y: auto;
+  line-height: 1.7;
+}
+.log-line-ok   { color: var(--success); }
+.log-line-err  { color: var(--danger); }
+.log-line-info { color: var(--accent-light); }
+/* ── AutoML leaderboard ───────────────────────────────────────────────────── */
+.leaderboard-row {
+  display: grid;
+  grid-template-columns: 30px 1fr auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius-sm);
+  transition: background .15s;
+}
+.leaderboard-row:hover { background: var(--bg-hover); }
+.rank-badge {
+  width: 26px; height: 26px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: .8rem;
+}
+.rank-1 { background: #f59e0b33; color: var(--warning); }
+.rank-2 { background: #8b949e33; color: var(--text-secondary); }
+.rank-3 { background: #d97706aa; color: #d97706; }
+.rank-n { background: var(--bg-tertiary); color: var(--text-muted); }
+/* ── Metric value highlight ───────────────────────────────────────────────── */
+.metric-val {
+  font-weight: 700;
+  font-size: .95rem;
+  font-variant-numeric: tabular-nums;
+}
+.metric-good   { color: var(--success); }
+.metric-medium { color: var(--warning); }
+.metric-bad    { color: var(--danger);  }
+/* ── Section headings ─────────────────────────────────────────────────────── */
+.page-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
+.page-sub   { font-size: .88rem; color: var(--text-secondary); margin-bottom: 24px; }
+/* ── Grid helpers ─────────────────────────────────────────────────────────── */
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; }
+.flex-gap     { display: flex; align-items: center; gap: 10px; }
+.mt-4  { margin-top: 4px; }
+.mt-8  { margin-top: 8px; }
+.mt-12 { margin-top: 12px; }
+.mt-20 { margin-top: 20px; }
+.mb-20 { margin-bottom: 20px; }
+.gap-12 { gap: 12px; }
+/* ── Responsive ───────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .sidebar { transform: translateX(-100%); }
+  .sidebar.open { transform: none; }
+  .main, .topnav { margin-left: 0; left: 0; }
+  .page-content { padding: 16px; }
+  .grid-2, .grid-3 { grid-template-columns: 1fr; }
+  .stat-grid { grid-template-columns: 1fr 1fr; }
+}
+/* ── Plotly overrides ─────────────────────────────────────────────────────── */
+.js-plotly-plot .plotly { border-radius: var(--radius-sm); }
+.modebar { display: none !important; }
+/* ── Category pill row ────────────────────────────────────────────────────── */
+.category-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
+.category-pill {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: .78rem;
+  font-weight: 500;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: all .15s;
+}
+.category-pill:hover, .category-pill.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+/* ── Algorithm card grid ──────────────────────────────────────────────────── */
+.algo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
+.algo-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  cursor: pointer;
+  transition: border-color .15s, background .15s;
+  position: relative;
+}
+.algo-card:hover  { border-color: var(--accent); background: #8b5cf610; }
+.algo-card.selected { border-color: var(--accent); background: #8b5cf618; }
+.algo-card .algo-name { font-weight: 500; font-size: .85rem; margin-bottom: 3px; }
+.algo-card .algo-desc { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
+.algo-card .algo-dot  {
+  width: 8px; height: 8px; border-radius: 50%;
+  position: absolute; top: 12px; right: 12px;
+}
+/* ── Spinning loader ──────────────────────────────────────────────────────── */
+.spinner {
+  width: 20px; height: 20px; border-radius: 50%;
+  border: 2px solid var(--border-color);
+  border-top-color: var(--accent);
+  animation: spin .6s linear infinite;
+  display: inline-block;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+.empty-state {
+  text-align: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+}
+.empty-state-icon { font-size: 3rem; margin-bottom: 12px; }
+.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }

static/js/app.js ADDED Viewed

	@@ -0,0 +1,49 @@

+/* AutoMLOps — shared utilities */
+// ── Toast notifications ────────────────────────────────────────────────────
+function showToast(message, type = 'info', duration = 3500) {
+  const area = document.getElementById('toast-area');
+  if (!area) return;
+  const icons = { success: '✅', error: '❌', info: 'ℹ️' };
+  const toast = document.createElement('div');
+  toast.className = `toast ${type}`;
+  toast.innerHTML = `<span>${icons[type] || 'ℹ️'}</span><span>${message}</span>`;
+  area.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    toast.style.transform = 'translateX(40px)';
+    toast.style.transition = 'opacity .3s, transform .3s';
+    setTimeout(() => toast.remove(), 300);
+  }, duration);
+}
+// ── Responsive sidebar toggle ──────────────────────────────────────────────
+(function () {
+  function checkWidth() {
+    const toggle = document.getElementById('sidebar-toggle');
+    if (toggle) toggle.style.display = window.innerWidth <= 768 ? 'inline-flex' : 'none';
+  }
+  window.addEventListener('resize', checkWidth);
+  document.addEventListener('DOMContentLoaded', checkWidth);
+  // Close sidebar when clicking outside on mobile
+  document.addEventListener('click', (e) => {
+    const sidebar = document.getElementById('sidebar');
+    const toggle  = document.getElementById('sidebar-toggle');
+    if (window.innerWidth <= 768 && sidebar && sidebar.classList.contains('open')) {
+      if (!sidebar.contains(e.target) && e.target !== toggle) {
+        sidebar.classList.remove('open');
+      }
+    }
+  });
+})();
+// ── Generic tab switcher ───────────────────────────────────────────────────
+function activateTab(panelId, btn, groupClass) {
+  document.querySelectorAll(`.${groupClass}`).forEach(p => p.classList.remove('active'));
+  document.querySelectorAll(`[data-tab-group="${groupClass}"]`).forEach(b => b.classList.remove('active'));
+  document.getElementById(panelId)?.classList.add('active');
+  if (btn) btn.classList.add('active');
+}

templates/automl.html ADDED Viewed

	@@ -0,0 +1,284 @@

+{% extends "base.html" %}
+{% set active_page = "automl" %}
+{% block title %}AutoML{% endblock %}
+{% block page_title %}<i class="fa-solid fa-wand-magic-sparkles" style="color:var(--accent)"></i> AutoML{% endblock %}
+{% block content %}
+<div class="page-title">AutoML Sweep</div>
+<div class="page-sub">Automatically benchmark every algorithm category against your dataset and rank by chosen metric</div>
+<div class="grid-2" style="align-items:start">
+  <!-- Config panel -->
+  <div class="card">
+    <div class="card-title" style="margin-bottom:16px"><i class="fa-solid fa-sliders" style="color:var(--accent)"></i> Configuration</div>
+    <div class="form-group">
+      <label class="form-label">Dataset</label>
+      <select class="form-select" id="aml-dataset" onchange="updateTaskFromDataset()">
+        {% for name, cfg in datasets.items() %}
+        <option value="{{ name }}" data-task="{{ cfg.task }}">{{ cfg.icon }} {{ name }}</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Task Type</label>
+      <select class="form-select" id="aml-task" onchange="updateMetrics()">
+        <option value="classification">Classification</option>
+        <option value="regression">Regression</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Optimise Metric</label>
+      <select class="form-select" id="aml-metric">
+        <option value="accuracy">Accuracy</option>
+        <option value="f1_score">F1 Score</option>
+        <option value="precision">Precision</option>
+        <option value="recall">Recall</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Max Algorithms to Run</label>
+      <select class="form-select" id="aml-max-runs">
+        <option value="10">10 — Quick sweep</option>
+        <option value="20" selected>20 — Standard</option>
+        <option value="35">35 — Exhaustive</option>
+      </select>
+    </div>
+    <!-- Coverage preview -->
+    <div style="background:var(--bg-tertiary);border-radius:8px;padding:12px;margin-bottom:16px">
+      <div style="font-size:.78rem;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em">Algorithm Categories</div>
+      <div id="cat-pills" class="category-pills" style="margin-bottom:0"></div>
+    </div>
+    <!-- Progress -->
+    <div id="aml-progress-wrap" style="display:none;margin-bottom:14px">
+      <div class="flex-between" style="margin-bottom:6px">
+        <span style="font-size:.82rem;color:var(--text-secondary)" id="aml-status-text">Starting…</span>
+        <span style="font-size:.82rem;font-weight:600" id="aml-pct">0%</span>
+      </div>
+      <div class="progress-bar-wrap"><div class="progress-bar" id="aml-bar" style="width:0%"></div></div>
+      <div id="aml-current-algo" style="font-size:.75rem;color:var(--text-muted);margin-top:4px"></div>
+    </div>
+    <button class="btn btn-primary" id="btn-aml-run" onclick="runAutoML()" style="width:100%">
+      <i class="fa-solid fa-wand-magic-sparkles"></i> Run AutoML Sweep
+    </button>
+  </div>
+  <!-- Results panel -->
+  <div style="display:flex;flex-direction:column;gap:16px">
+    <!-- Best model highlight -->
+    <div class="card" id="aml-best-card" style="display:none;border-color:var(--accent)">
+      <div class="card-title" style="margin-bottom:10px;color:var(--accent-light)">
+        <i class="fa-solid fa-trophy" style="color:var(--warning)"></i> Best Model
+      </div>
+      <div id="aml-best-content"></div>
+    </div>
+    <!-- Score chart -->
+    <div class="card" id="aml-chart-card" style="display:none">
+      <div class="card-header">
+        <div class="card-title"><i class="fa-solid fa-chart-bar" style="color:var(--accent-blue)"></i> Score Comparison</div>
+      </div>
+      <div id="aml-chart" style="height:260px"></div>
+    </div>
+    <!-- Leaderboard -->
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title"><i class="fa-solid fa-ranking-star" style="color:var(--warning)"></i> Leaderboard</div>
+        <span id="aml-count" style="font-size:.8rem;color:var(--text-muted)"></span>
+      </div>
+      <div id="aml-leaderboard">
+        <div class="empty-state" style="padding:32px 16px">
+          <div class="empty-state-icon" style="font-size:2rem">🏁</div>
+          <div class="empty-state-title">No results yet</div>
+          <div>Configure and run the AutoML sweep to see rankings</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+const ALGO_DATA_AML = {{ algorithms | tojson }};
+document.addEventListener('DOMContentLoaded', () => {
+  updateTaskFromDataset();
+});
+function updateTaskFromDataset() {
+  const ds  = document.getElementById('aml-dataset');
+  const opt = ds.options[ds.selectedIndex];
+  document.getElementById('aml-task').value = opt.dataset.task || 'classification';
+  updateMetrics();
+  updateCategoryPills();
+}
+function updateMetrics() {
+  const task = document.getElementById('aml-task').value;
+  const sel  = document.getElementById('aml-metric');
+  sel.innerHTML = task === 'classification'
+    ? `<option value="accuracy">Accuracy</option>
+       <option value="f1_score">F1 Score</option>
+       <option value="precision">Precision</option>
+       <option value="recall">Recall</option>`
+    : `<option value="r2_score">R² Score</option>
+       <option value="mae">MAE (lower = better)</option>
+       <option value="rmse">RMSE (lower = better)</option>`;
+  updateCategoryPills();
+}
+function updateCategoryPills() {
+  const task = document.getElementById('aml-task').value;
+  const cats = Object.keys(ALGO_DATA_AML[task] || {});
+  const el   = document.getElementById('cat-pills');
+  el.innerHTML = cats.map(c => `<span class="category-pill active">${c}</span>`).join('');
+}
+async function runAutoML() {
+  const dataset   = document.getElementById('aml-dataset').value;
+  const task_type = document.getElementById('aml-task').value;
+  const metric    = document.getElementById('aml-metric').value;
+  const max_runs  = parseInt(document.getElementById('aml-max-runs').value);
+  document.getElementById('btn-aml-run').disabled = true;
+  document.getElementById('btn-aml-run').innerHTML = '<span class="spinner"></span> Sweeping…';
+  document.getElementById('aml-progress-wrap').style.display = 'block';
+  document.getElementById('aml-best-card').style.display = 'none';
+  document.getElementById('aml-chart-card').style.display = 'none';
+  document.getElementById('aml-leaderboard').innerHTML =
+    '<div style="text-align:center;padding:20px;color:var(--text-muted)"><span class="spinner"></span> Running sweep…</div>';
+  try {
+    const res  = await fetch('/api/automl', {
+      method: 'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({ dataset, task_type, metric, max_runs }),
+    });
+    const data = await res.json();
+    if (data.error) { showToast(data.error, 'error'); resetAML(); return; }
+    pollAutoML(data.job_id, metric);
+  } catch(e) { showToast('Failed to start AutoML', 'error'); resetAML(); }
+}
+function pollAutoML(jobId, metric) {
+  const bar     = document.getElementById('aml-bar');
+  const pct     = document.getElementById('aml-pct');
+  const statusT = document.getElementById('aml-status-text');
+  const curAlgo = document.getElementById('aml-current-algo');
+  const iv = setInterval(async () => {
+    const res = await fetch(`/api/automl/status/${jobId}`);
+    const job = await res.json();
+    bar.style.width = job.progress + '%';
+    pct.textContent = job.progress + '%';
+    statusT.textContent = job.status === 'running' ? 'Running sweep…' : job.status;
+    if (job.current_algo) curAlgo.textContent = `▶ ${job.current_algo}`;
+    const results = job.results || [];
+    if (results.length > 0) {
+      renderLeaderboard(results, metric);
+      document.getElementById('aml-count').textContent = `${results.length} models`;
+    }
+    if (job.status === 'completed') {
+      clearInterval(iv);
+      statusT.textContent = 'Completed';
+      curAlgo.textContent = '';
+      renderLeaderboard(results, metric);
+      if (job.best) renderBest(job.best, metric);
+      renderChart(results, metric);
+      document.getElementById('btn-aml-run').disabled = false;
+      document.getElementById('btn-aml-run').innerHTML = '<i class="fa-solid fa-rotate-right"></i> Re-run Sweep';
+      showToast(`AutoML complete — best: ${job.best?.algorithm} (${metric}: ${job.best?.metrics[metric]})`, 'success');
+    } else if (job.status === 'failed') {
+      clearInterval(iv);
+      showToast('AutoML failed: ' + (job.error || 'unknown'), 'error');
+      resetAML();
+    }
+  }, 1200);
+}
+function renderLeaderboard(results, metric) {
+  const el = document.getElementById('aml-leaderboard');
+  if (!results.length) return;
+  el.innerHTML = results.map(r => {
+    const rankClass = r.rank === 1 ? 'rank-1' : r.rank === 2 ? 'rank-2' : r.rank === 3 ? 'rank-3' : 'rank-n';
+    const v = r.metrics[metric];
+    const isGood = v >= 0.9;
+    const isMed  = v >= 0.7;
+    const metricClass = isGood ? 'metric-good' : isMed ? 'metric-medium' : 'metric-bad';
+    return `<div class="leaderboard-row">
+      <div class="rank-badge ${rankClass}">${r.rank}</div>
+      <div>
+        <div style="font-weight:500;font-size:.88rem">${r.algorithm}</div>
+        <div style="font-size:.75rem;color:var(--text-muted)">${r.category} · ${r.duration}s</div>
+      </div>
+      <span class="badge badge-purple" style="font-size:.72rem">${r.category.split(' ')[0]}</span>
+      <div class="metric-val ${metricClass}" style="min-width:52px;text-align:right">${typeof v === 'number' ? v.toFixed(4) : '—'}</div>
+    </div>`;
+  }).join('');
+}
+function renderBest(best, metric) {
+  const card = document.getElementById('aml-best-card');
+  const v    = best.metrics[metric];
+  document.getElementById('aml-best-content').innerHTML = `
+    <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap">
+      <div>
+        <div style="font-size:1.4rem;font-weight:700">${best.algorithm}</div>
+        <div style="font-size:.82rem;color:var(--text-secondary)">${best.category}</div>
+      </div>
+      <div style="margin-left:auto;text-align:right">
+        <div style="font-size:.75rem;color:var(--text-muted);text-transform:uppercase">${metric}</div>
+        <div style="font-size:2rem;font-weight:700;color:var(--success)">${typeof v === 'number' ? v.toFixed(4) : '—'}</div>
+      </div>
+    </div>
+    <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap">
+      ${Object.entries(best.metrics).map(([k,val]) =>
+        `<div style="background:var(--bg-tertiary);padding:6px 12px;border-radius:6px;font-size:.82rem">
+          <span style="color:var(--text-muted)">${k}:</span>
+          <strong>${typeof val === 'number' ? val.toFixed(4) : val}</strong>
+        </div>`).join('')}
+    </div>`;
+  card.style.display = 'block';
+}
+function renderChart(results, metric) {
+  const top = results.slice(0, 15);
+  const bg2 = '#161b22', border = '#30363d', txt = '#8b949e';
+  const colors = top.map(r => r.color || '#8b5cf6');
+  Plotly.newPlot('aml-chart', [{
+    type: 'bar', orientation: 'h',
+    y: top.map(r => r.algorithm).reverse(),
+    x: top.map(r => r.metrics[metric] || 0).reverse(),
+    marker: { color: colors.slice().reverse() },
+    hovertemplate: '<b>%{y}</b><br>' + metric + ': %{x:.4f}<extra></extra>',
+  }], {
+    paper_bgcolor: bg2, plot_bgcolor: bg2,
+    margin: { t: 8, b: 40, l: 8, r: 16 },
+    xaxis: { gridcolor: border, color: txt, tickfont:{size:10} },
+    yaxis: { color: txt, tickfont:{size:10}, automargin: true },
+    bargap: .3,
+  }, { responsive: true, displayModeBar: false });
+  document.getElementById('aml-chart-card').style.display = 'block';
+}
+function resetAML() {
+  document.getElementById('btn-aml-run').disabled = false;
+  document.getElementById('btn-aml-run').innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> Run AutoML Sweep';
+}
+</script>
+{% endblock %}

templates/base.html ADDED Viewed

	@@ -0,0 +1,93 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}AutoMLOps{% endblock %} — ML Experiment Platform</title>
+  <!-- Google Font -->
+  <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=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <!-- Plotly.js -->
+  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" defer></script>
+  <link rel="stylesheet" href="/static/css/style.css">
+  {% block head_extra %}{% endblock %}
+</head>
+<body>
+<!-- ── Sidebar ──────────────────────────────────────────────────────────── -->
+<aside class="sidebar" id="sidebar">
+  <div class="sidebar-logo">
+    <div class="sidebar-logo-icon">🤖</div>
+    <div>
+      <div class="sidebar-logo-text">AutoMLOps</div>
+      <div class="sidebar-logo-sub">ML Experiment Platform</div>
+    </div>
+  </div>
+  <nav class="sidebar-nav">
+    <div class="nav-section-label">Overview</div>
+    <a href="/" class="nav-item {% if active_page == 'dashboard' %}active{% endif %}">
+      <span class="nav-icon"><i class="fa-solid fa-gauge-high"></i></span> Dashboard
+    </a>
+    <div class="nav-section-label">Experiments</div>
+    <a href="/experiments" class="nav-item {% if active_page == 'experiments' %}active{% endif %}">
+      <span class="nav-icon"><i class="fa-solid fa-flask"></i></span> Experiments
+    </a>
+    <a href="/automl" class="nav-item {% if active_page == 'automl' %}active{% endif %}">
+      <span class="nav-icon"><i class="fa-solid fa-wand-magic-sparkles"></i></span> AutoML
+      <span class="nav-badge">NEW</span>
+    </a>
+    <div class="nav-section-label">Operations</div>
+    <a href="/pipeline" class="nav-item {% if active_page == 'pipeline' %}active{% endif %}">
+      <span class="nav-icon"><i class="fa-solid fa-diagram-project"></i></span> Pipelines
+    </a>
+    <a href="/models" class="nav-item {% if active_page == 'models' %}active{% endif %}">
+      <span class="nav-icon"><i class="fa-solid fa-box-archive"></i></span> Model Registry
+    </a>
+  </nav>
+  <div class="sidebar-footer">
+    <div>Powered by <a href="https://mlflow.org" target="_blank">MLflow</a> &amp; sklearn</div>
+    <div class="mt-4" style="color: var(--text-muted); font-size:.72rem;">
+      <i class="fa-brands fa-python"></i> Python 3.11 &nbsp;·&nbsp;
+      <i class="fa-solid fa-code-branch"></i> v1.0
+    </div>
+  </div>
+</aside>
+<!-- ── Top navbar ────────────────────────────────────────────────────────── -->
+<header class="topnav">
+  <button class="btn btn-ghost btn-sm" id="sidebar-toggle" style="display:none"
+          onclick="document.getElementById('sidebar').classList.toggle('open')">
+    <i class="fa-solid fa-bars"></i>
+  </button>
+  <span class="topnav-title">{% block page_title %}AutoMLOps{% endblock %}</span>
+  <span class="topnav-badge"><i class="fa-solid fa-circle" style="color:#22c55e;font-size:.55rem"></i> Live</span>
+  {% block topnav_actions %}{% endblock %}
+</header>
+<!-- ── Main ──────────────────────────────────────────────────────────────── -->
+<main class="main">
+  <div class="page-content">
+    {% block content %}{% endblock %}
+  </div>
+</main>
+<!-- ── Toast area ────────────────────────────────────────────────────────── -->
+<div id="toast-area"></div>
+<!-- ── Global JS ─────────────────────────────────────────────────────────── -->
+<script src="/static/js/app.js"></script>
+{% block scripts %}{% endblock %}
+</body>
+</html>

templates/dashboard.html ADDED Viewed

	@@ -0,0 +1,327 @@

+{% extends "base.html" %}
+{% set active_page = "dashboard" %}
+{% block title %}Dashboard{% endblock %}
+{% block page_title %}<i class="fa-solid fa-gauge-high" style="color:var(--accent)"></i> Dashboard{% endblock %}
+{% block topnav_actions %}
+<button class="btn btn-primary btn-sm" onclick="openTrainModal()">
+  <i class="fa-solid fa-play"></i> New Run
+</button>
+{% endblock %}
+{% block content %}
+<div class="page-title">Overview</div>
+<div class="page-sub">Real-time ML experiment tracking powered by MLflow</div>
+<!-- Stat cards -->
+<div class="stat-grid">
+  <div class="stat-card purple">
+    <div class="stat-label">Total Runs</div>
+    <div class="stat-value" id="stat-total">{{ total_runs }}</div>
+    <div class="stat-sub"><i class="fa-solid fa-arrow-trend-up"></i> all time</div>
+  </div>
+  <div class="stat-card blue">
+    <div class="stat-label">Completed</div>
+    <div class="stat-value" id="stat-completed">{{ completed_runs }}</div>
+    <div class="stat-sub">finished successfully</div>
+  </div>
+  <div class="stat-card green">
+    <div class="stat-label">Best Score</div>
+    <div class="stat-value" id="stat-best">{{ best_metric }}</div>
+    <div class="stat-sub">accuracy / R²</div>
+  </div>
+  <div class="stat-card yellow">
+    <div class="stat-label">Experiments</div>
+    <div class="stat-value" id="stat-exps">{{ n_experiments }}</div>
+    <div class="stat-sub">active datasets</div>
+  </div>
+</div>
+<!-- Charts row -->
+<div class="grid-2 mb-20">
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title"><i class="fa-solid fa-chart-pie" style="color:var(--accent)"></i> Algorithm Categories</div>
+    </div>
+    <div id="chart-algo" style="height:220px"></div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title"><i class="fa-solid fa-database" style="color:var(--accent-blue)"></i> Runs by Dataset</div>
+    </div>
+    <div id="chart-ds" style="height:220px"></div>
+  </div>
+</div>
+<!-- Recent runs -->
+<div class="card">
+  <div class="card-header">
+    <div class="card-title"><i class="fa-solid fa-clock-rotate-left" style="color:var(--warning)"></i> Recent Runs</div>
+    <a href="/experiments" class="btn btn-ghost btn-sm">View all <i class="fa-solid fa-arrow-right"></i></a>
+  </div>
+  <div class="table-wrap">
+    <table id="recent-table">
+      <thead>
+        <tr>
+          <th>Run ID</th><th>Algorithm</th><th>Category</th><th>Dataset</th>
+          <th>Primary Metric</th><th>Duration</th><th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for r in recent_runs %}
+        <tr>
+          <td><code style="font-size:.8rem;color:var(--accent-light)">{{ r.run_id }}</code></td>
+          <td><strong>{{ r.algorithm }}</strong></td>
+          <td><span class="badge badge-purple">{{ r.category }}</span></td>
+          <td>{{ r.dataset }}</td>
+          <td>
+            <span class="metric-val {% if r.primary_metric >= 0.9 %}metric-good{% elif r.primary_metric >= 0.7 %}metric-medium{% else %}metric-bad{% endif %}">
+              {{ r.primary_metric }}
+            </span>
+          </td>
+          <td>{{ r.duration }}s</td>
+          <td>
+            {% if r.status == 'FINISHED' %}
+              <span class="badge badge-success"><i class="fa-solid fa-check"></i> Done</span>
+            {% elif r.status == 'RUNNING' %}
+              <span class="badge badge-info"><span class="spinner" style="width:10px;height:10px;border-width:1.5px"></span> Running</span>
+            {% else %}
+              <span class="badge badge-muted">{{ r.status }}</span>
+            {% endif %}
+          </td>
+        </tr>
+        {% else %}
+        <tr><td colspan="7">
+          <div class="empty-state">
+            <div class="empty-state-icon">🔬</div>
+            <div class="empty-state-title">No runs yet</div>
+            <div>Click <strong>New Run</strong> to train your first model</div>
+          </div>
+        </td></tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+<!-- ── Quick Train Modal ──────────────────────────────────────────────────── -->
+<div class="modal-overlay" id="train-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <div class="modal-title"><i class="fa-solid fa-play" style="color:var(--accent)"></i> New Training Run</div>
+      <button class="modal-close" onclick="closeTrainModal()"><i class="fa-solid fa-xmark"></i></button>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Dataset</label>
+      <select class="form-select" id="sel-dataset" onchange="updateTaskType()">
+        {% for name, cfg in datasets.items() %}
+        <option value="{{ name }}" data-task="{{ cfg.task }}">{{ cfg.icon }} {{ name }} — {{ cfg.description[:55] }}…</option>
+        {% endfor %}
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Task Type</label>
+      <select class="form-select" id="sel-task" onchange="populateCategories()">
+        <option value="classification">Classification</option>
+        <option value="regression">Regression</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Algorithm Category</label>
+      <select class="form-select" id="sel-category" onchange="populateAlgorithms()"></select>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Algorithm</label>
+      <select class="form-select" id="sel-algorithm"></select>
+    </div>
+    <!-- Progress (hidden until running) -->
+    <div id="train-progress-wrap" style="display:none;margin-top:12px">
+      <div class="flex-between mb-20" style="margin-bottom:6px">
+        <span style="font-size:.85rem;color:var(--text-secondary)" id="train-status-text">Initialising…</span>
+        <span style="font-size:.85rem;font-weight:600" id="train-pct">0%</span>
+      </div>
+      <div class="progress-bar-wrap"><div class="progress-bar" id="train-bar" style="width:0%"></div></div>
+    </div>
+    <!-- Result (hidden until done) -->
+    <div id="train-result" style="display:none;margin-top:14px"></div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" onclick="closeTrainModal()">Cancel</button>
+      <button class="btn btn-primary" id="btn-start-train" onclick="startTraining()">
+        <i class="fa-solid fa-play"></i> Train
+      </button>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+const ALGO_DATA = {{ algorithms | tojson }};
+const ALGO_COUNTS = {{ algo_counts }};
+const DS_COUNTS   = {{ ds_counts }};
+// ── Charts ────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  const dark = '#0d1117', bg2 = '#161b22', border = '#30363d', txt = '#8b949e';
+  // Donut — algorithm categories
+  const cats  = Object.keys(ALGO_COUNTS);
+  const vals  = Object.values(ALGO_COUNTS);
+  const COLORS = ['#8b5cf6','#3b82f6','#22c55e','#f59e0b','#ef4444','#06b6d4','#ec4899','#a855f7'];
+  Plotly.newPlot('chart-algo', [{
+    type: 'pie', hole: .55,
+    labels: cats, values: vals,
+    marker: { colors: COLORS.slice(0, cats.length) },
+    textinfo: 'none',
+    hovertemplate: '<b>%{label}</b><br>%{value} runs<extra></extra>',
+  }], {
+    paper_bgcolor: bg2, plot_bgcolor: bg2,
+    margin: { t:8, b:8, l:8, r:8 },
+    legend: { font: { color: txt, size: 11 }, bgcolor: 'transparent', x: 1.05 },
+    showlegend: cats.length > 0,
+    annotations: [{ text: `<b>${vals.reduce((a,b)=>a+b,0)}</b><br><span style="font-size:10px">runs</span>`,
+                    x:.5, y:.5, font:{size:14,color:'#e6edf3'}, showarrow:false }],
+  }, { responsive: true, displayModeBar: false });
+  // Bar — datasets
+  const dsKeys = Object.keys(DS_COUNTS);
+  const dsVals = Object.values(DS_COUNTS);
+  Plotly.newPlot('chart-ds', [{
+    type: 'bar', orientation: 'h',
+    y: dsKeys, x: dsVals,
+    marker: { color: '#3b82f6', opacity: .85 },
+    hovertemplate: '<b>%{y}</b>: %{x} runs<extra></extra>',
+  }], {
+    paper_bgcolor: bg2, plot_bgcolor: bg2,
+    margin: { t:8, b:24, l:8, r:16 },
+    xaxis: { gridcolor: border, color: txt, tickfont:{size:10} },
+    yaxis: { color: txt, tickfont:{size:10}, automargin:true },
+    bargap: .35,
+  }, { responsive: true, displayModeBar: false });
+  populateCategories();
+});
+// ── Train modal helpers ────────────────────────────────────────────────────
+function updateTaskType() {
+  const ds = document.getElementById('sel-dataset');
+  const opt = ds.options[ds.selectedIndex];
+  document.getElementById('sel-task').value = opt.dataset.task || 'classification';
+  populateCategories();
+}
+function populateCategories() {
+  const task = document.getElementById('sel-task').value;
+  const sel  = document.getElementById('sel-category');
+  sel.innerHTML = '';
+  const cats = Object.keys(ALGO_DATA[task] || {});
+  cats.forEach(c => { const o = document.createElement('option'); o.value = c; o.text = c; sel.add(o); });
+  populateAlgorithms();
+}
+function populateAlgorithms() {
+  const task = document.getElementById('sel-task').value;
+  const cat  = document.getElementById('sel-category').value;
+  const sel  = document.getElementById('sel-algorithm');
+  sel.innerHTML = '';
+  const algos = Object.keys((ALGO_DATA[task] || {})[cat] || {});
+  algos.forEach(a => { const o = document.createElement('option'); o.value = a; o.text = a; sel.add(o); });
+}
+function openTrainModal()  { document.getElementById('train-modal').classList.add('open'); resetTrainModal(); }
+function closeTrainModal() { document.getElementById('train-modal').classList.remove('open'); }
+function resetTrainModal() {
+  document.getElementById('train-progress-wrap').style.display = 'none';
+  document.getElementById('train-result').style.display = 'none';
+  document.getElementById('btn-start-train').disabled = false;
+  document.getElementById('btn-start-train').innerHTML = '<i class="fa-solid fa-play"></i> Train';
+}
+async function startTraining() {
+  const dataset   = document.getElementById('sel-dataset').value;
+  const task_type = document.getElementById('sel-task').value;
+  const category  = document.getElementById('sel-category').value;
+  const algorithm = document.getElementById('sel-algorithm').value;
+  document.getElementById('btn-start-train').disabled = true;
+  document.getElementById('btn-start-train').innerHTML = '<span class="spinner"></span> Running…';
+  document.getElementById('train-progress-wrap').style.display = 'block';
+  document.getElementById('train-result').style.display = 'none';
+  try {
+    const res  = await fetch('/api/train', {
+      method: 'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({ dataset, task_type, category, algorithm }),
+    });
+    const data = await res.json();
+    if (data.error) { showToast(data.error, 'error'); resetTrainModal(); return; }
+    pollTraining(data.job_id);
+  } catch(e) { showToast('Request failed', 'error'); resetTrainModal(); }
+}
+function pollTraining(jobId) {
+  const bar     = document.getElementById('train-bar');
+  const pct     = document.getElementById('train-pct');
+  const statusT = document.getElementById('train-status-text');
+  const resultD = document.getElementById('train-result');
+  const iv = setInterval(async () => {
+    const res  = await fetch(`/api/run/${jobId}/status`);
+    const job  = await res.json();
+    bar.style.width = job.progress + '%';
+    pct.textContent = job.progress + '%';
+    statusT.textContent = job.status.charAt(0).toUpperCase() + job.status.slice(1) + '…';
+    if (job.status === 'completed') {
+      clearInterval(iv);
+      statusT.textContent = 'Completed';
+      const m = job.metrics || {};
+      const keys = Object.keys(m);
+      const primary = keys[0];
+      resultD.style.display = 'block';
+      resultD.innerHTML = `
+        <div style="background:var(--bg-tertiary);border-radius:8px;padding:14px">
+          <div style="font-weight:600;margin-bottom:10px;color:var(--success)">
+            <i class="fa-solid fa-circle-check"></i> Training complete
+          </div>
+          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px">
+            ${keys.map(k=>`<div style="background:var(--bg-secondary);padding:8px 10px;border-radius:6px">
+              <div style="font-size:.72rem;color:var(--text-muted);text-transform:uppercase">${k}</div>
+              <div style="font-size:1.1rem;font-weight:700;color:var(--success)">${m[k]}</div>
+            </div>`).join('')}
+          </div>
+        </div>`;
+      document.getElementById('btn-start-train').innerHTML = '<i class="fa-solid fa-rotate-right"></i> Run Again';
+      document.getElementById('btn-start-train').disabled = false;
+      showToast(`${job.algorithm} → ${primary}: ${m[primary]}`, 'success');
+      refreshStats();
+    } else if (job.status === 'failed') {
+      clearInterval(iv);
+      showToast('Training failed: ' + (job.error || 'unknown'), 'error');
+      resetTrainModal();
+    }
+  }, 1000);
+}
+async function refreshStats() {
+  try {
+    const r = await fetch('/api/stats');
+    const s = await r.json();
+    document.getElementById('stat-total').textContent     = s.total_runs;
+    document.getElementById('stat-completed').textContent = s.completed_runs;
+    document.getElementById('stat-best').textContent      = s.best_metric;
+    document.getElementById('stat-exps').textContent      = s.n_experiments;
+  } catch(_) {}
+}
+</script>
+{% endblock %}

templates/experiments.html ADDED Viewed

	@@ -0,0 +1,47 @@

+{% extends "base.html" %}
+{% set active_page = "experiments" %}
+{% block title %}Experiments{% endblock %}
+{% block page_title %}<i class="fa-solid fa-flask" style="color:var(--accent-blue)"></i> Experiments{% endblock %}
+{% block content %}
+<div class="page-title">Experiment Tracker</div>
+<div class="page-sub">Browse all MLflow experiments and compare runs side-by-side</div>
+{% if experiments %}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px">
+  {% for exp in experiments %}
+  <a href="/experiments/{{ exp.experiment_id }}" style="text-decoration:none">
+    <div class="card" style="cursor:pointer;transition:border-color .15s" onmouseover="this.style.borderColor='var(--accent)'" onmouseout="this.style.borderColor='var(--border-color)'">
+      <div class="flex-between mb-20" style="margin-bottom:12px">
+        <div style="font-weight:600;font-size:.95rem">{{ exp.name }}</div>
+        <span class="badge badge-info">{{ exp.run_count }} runs</span>
+      </div>
+      <div style="display:flex;gap:20px;font-size:.85rem">
+        <div>
+          <div style="color:var(--text-muted);font-size:.75rem;margin-bottom:2px">Best Score</div>
+          <div class="metric-val {% if exp.best_metric >= 0.9 %}metric-good{% elif exp.best_metric >= 0.7 %}metric-medium{% else %}metric-bad{% endif %}">
+            {{ exp.best_metric if exp.best_metric > 0 else '—' }}
+          </div>
+        </div>
+        <div>
+          <div style="color:var(--text-muted);font-size:.75rem;margin-bottom:2px">Created</div>
+          <div style="color:var(--text-secondary)">{{ exp.created_at }}</div>
+        </div>
+      </div>
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% else %}
+<div class="card">
+  <div class="empty-state">
+    <div class="empty-state-icon">🔬</div>
+    <div class="empty-state-title">No experiments yet</div>
+    <div style="margin-bottom:16px">Start a training run from the Dashboard to create your first experiment.</div>
+    <a href="/" class="btn btn-primary"><i class="fa-solid fa-play"></i> Go to Dashboard</a>
+  </div>
+</div>
+{% endif %}
+{% endblock %}

templates/models.html ADDED Viewed

	@@ -0,0 +1,155 @@

+{% extends "base.html" %}
+{% set active_page = "models" %}
+{% block title %}Model Registry{% endblock %}
+{% block page_title %}<i class="fa-solid fa-box-archive" style="color:var(--warning)"></i> Model Registry{% endblock %}
+{% block content %}
+<div class="page-title">Model Registry</div>
+<div class="page-sub">Track model versions and manage stage transitions: None → Staging → Production → Archived</div>
+{% if models %}
+<div style="display:flex;flex-direction:column;gap:16px">
+  {% for model in models %}
+  <div class="card">
+    <div class="flex-between" style="margin-bottom:14px">
+      <div>
+        <div style="font-weight:700;font-size:1rem">{{ model.name }}</div>
+        <div style="font-size:.82rem;color:var(--text-secondary);margin-top:2px">{{ model.description }}</div>
+      </div>
+      <span class="badge stage-{{ model.latest_stage | lower }}">
+        {% if model.latest_stage == 'Production' %}<i class="fa-solid fa-rocket"></i>
+        {% elif model.latest_stage == 'Staging' %}<i class="fa-solid fa-flask"></i>
+        {% elif model.latest_stage == 'Archived' %}<i class="fa-solid fa-archive"></i>
+        {% else %}<i class="fa-solid fa-box"></i>{% endif %}
+        {{ model.latest_stage }}
+      </span>
+    </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr><th>Version</th><th>Stage</th><th>Run ID</th><th>Key Metrics</th><th>Registered</th><th>Actions</th></tr>
+        </thead>
+        <tbody>
+          {% for v in model.versions %}
+          <tr>
+            <td><span class="badge badge-muted">v{{ v.version }}</span></td>
+            <td>
+              <span class="badge stage-{{ v.stage | lower }}">
+                {{ v.stage }}
+              </span>
+            </td>
+            <td><code style="font-size:.8rem;color:var(--accent-light)">{{ v.run_id }}</code></td>
+            <td>
+              {% if v.metrics %}
+                {% for k, val in v.metrics.items() %}
+                  <span style="font-size:.8rem;margin-right:8px">
+                    <span style="color:var(--text-muted)">{{ k }}:</span>
+                    <strong>{{ val }}</strong>
+                  </span>
+                {% endfor %}
+              {% else %}—{% endif %}
+            </td>
+            <td style="font-size:.8rem;color:var(--text-muted)">{{ v.created_at }}</td>
+            <td>
+              <div style="display:flex;gap:6px;flex-wrap:wrap">
+                {% if v.stage != 'Staging' and v.stage != 'Production' %}
+                <button class="btn btn-ghost btn-sm"
+                        onclick="transitionStage('{{ model.name }}','{{ v.version }}','Staging', this)">
+                  → Staging
+                </button>
+                {% endif %}
+                {% if v.stage == 'Staging' %}
+                <button class="btn btn-success btn-sm"
+                        onclick="transitionStage('{{ model.name }}','{{ v.version }}','Production', this)">
+                  <i class="fa-solid fa-rocket"></i> Promote
+                </button>
+                {% endif %}
+                {% if v.stage == 'Production' %}
+                <button class="btn btn-warning btn-sm"
+                        onclick="transitionStage('{{ model.name }}','{{ v.version }}','Archived', this)">
+                  Archive
+                </button>
+                {% endif %}
+              </div>
+            </td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<div class="card">
+  <div class="empty-state">
+    <div class="empty-state-icon">📦</div>
+    <div class="empty-state-title">No registered models yet</div>
+    <div style="margin-bottom:16px;max-width:400px;margin-left:auto;margin-right:auto">
+      Run the <strong>Training Pipeline</strong> or use the AutoML sweep,
+      then register the best model from the Experiments page.
+    </div>
+    <a href="/pipeline" class="btn btn-primary"><i class="fa-solid fa-diagram-project"></i> Go to Pipelines</a>
+  </div>
+</div>
+{% endif %}
+<!-- Register modal -->
+<div class="modal-overlay" id="register-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <div class="modal-title"><i class="fa-solid fa-plus" style="color:var(--accent)"></i> Register Model</div>
+      <button class="modal-close" onclick="document.getElementById('register-modal').classList.remove('open')"><i class="fa-solid fa-xmark"></i></button>
+    </div>
+    <div class="form-group">
+      <label class="form-label">MLflow Run ID</label>
+      <input type="text" class="form-control" id="reg-run-id" placeholder="e.g. abc12345…">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Model Name</label>
+      <input type="text" class="form-control" id="reg-name" placeholder="e.g. iris-classifier">
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" onclick="document.getElementById('register-modal').classList.remove('open')">Cancel</button>
+      <button class="btn btn-primary" onclick="registerModel()"><i class="fa-solid fa-box-archive"></i> Register</button>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+async function transitionStage(name, version, stage, btn) {
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner" style="width:12px;height:12px;border-width:1.5px"></span>';
+  try {
+    const res  = await fetch(`/api/models/${encodeURIComponent(name)}/${version}/stage`, {
+      method: 'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({ stage }),
+    });
+    const data = await res.json();
+    if (data.error) { showToast(data.error, 'error'); btn.disabled = false; return; }
+    showToast(`${name} v${version} → ${stage}`, 'success');
+    setTimeout(() => location.reload(), 900);
+  } catch(e) { showToast('Request failed', 'error'); btn.disabled = false; }
+}
+async function registerModel() {
+  const runId = document.getElementById('reg-run-id').value.trim();
+  const name  = document.getElementById('reg-name').value.trim();
+  if (!runId || !name) { showToast('Run ID and name are required', 'error'); return; }
+  try {
+    const res  = await fetch('/api/models/register', {
+      method: 'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({ run_id: runId, name }),
+    });
+    const data = await res.json();
+    if (data.error) { showToast(data.error, 'error'); return; }
+    showToast(`Registered ${data.name} v${data.version}`, 'success');
+    setTimeout(() => location.reload(), 900);
+  } catch(e) { showToast('Request failed', 'error'); }
+}
+</script>
+{% endblock %}

templates/pipeline.html ADDED Viewed

	@@ -0,0 +1,295 @@

+{% extends "base.html" %}
+{% set active_page = "pipeline" %}
+{% block title %}Pipelines{% endblock %}
+{% block page_title %}<i class="fa-solid fa-diagram-project" style="color:var(--cyan)"></i> Pipelines{% endblock %}
+{% block content %}
+<div class="page-title">Pipeline Orchestration</div>
+<div class="page-sub">Airflow-style DAG visualisation and execution — click any pipeline to inspect and run</div>
+<!-- Pipeline selector tabs -->
+<div class="tab-bar" id="pipeline-tabs">
+  <button class="tab-btn active" onclick="switchPipeline('training_pipeline', this)">
+    <i class="fa-solid fa-brain"></i> Training Pipeline
+  </button>
+  <button class="tab-btn" onclick="switchPipeline('retraining_pipeline', this)">
+    <i class="fa-solid fa-rotate"></i> Retraining Pipeline
+  </button>
+  <button class="tab-btn" onclick="switchPipeline('data_pipeline', this)">
+    <i class="fa-solid fa-database"></i> Data Pipeline
+  </button>
+</div>
+<!-- Pipeline description + run button -->
+<div class="card mb-20" style="margin-bottom:16px">
+  <div class="flex-between">
+    <div>
+      <div class="card-title" id="pipeline-name" style="font-size:1rem;margin-bottom:4px">Training Pipeline</div>
+      <div id="pipeline-desc" style="font-size:.85rem;color:var(--text-secondary)">
+        End-to-end model training: ingest → preprocess → train → evaluate → register
+      </div>
+    </div>
+    <div class="flex-gap">
+      <!-- Context form for training pipeline -->
+      <div id="ctx-form" style="display:flex;gap:8px;flex-wrap:wrap">
+        <select class="form-select" id="ctx-dataset" style="width:auto;padding:6px 28px 6px 10px;font-size:.82rem">
+          {% for name in datasets %}<option>{{ name }}</option>{% endfor %}
+        </select>
+      </div>
+      <button class="btn btn-primary" id="btn-run-pipeline" onclick="runPipeline()">
+        <i class="fa-solid fa-play"></i> Execute DAG
+      </button>
+    </div>
+  </div>
+</div>
+<!-- DAG canvas -->
+<div class="card mb-20" style="margin-bottom:16px">
+  <div class="card-header">
+    <div class="card-title"><i class="fa-solid fa-sitemap" style="color:var(--accent)"></i> DAG Graph</div>
+    <span id="exec-status-badge"></span>
+  </div>
+  <div id="dag-canvas" class="dag-canvas" style="height:320px"></div>
+</div>
+<!-- Execution state grid + log -->
+<div class="grid-2">
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title"><i class="fa-solid fa-list-check" style="color:var(--success)"></i> Task Status</div>
+      <div id="exec-progress-wrap" style="display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-muted)">
+        <span id="exec-pct">—</span>
+      </div>
+    </div>
+    <div id="task-list" style="display:flex;flex-direction:column;gap:6px"></div>
+  </div>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title"><i class="fa-solid fa-terminal" style="color:var(--warning)"></i> Execution Log</div>
+      <button class="btn btn-ghost btn-sm" onclick="clearLog()"><i class="fa-solid fa-trash"></i></button>
+    </div>
+    <div class="pipeline-log" id="exec-log">Waiting for execution…</div>
+  </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+const DAGS = {{ dags | safe }};
+let currentPipeline = 'training_pipeline';
+let currentExecId   = null;
+let pollIv          = null;
+let currentDag      = null;
+const STATUS_COLORS = {
+  pending: '#30363d', running: '#f59e0b', success: '#22c55e', failed: '#ef4444',
+};
+const STATUS_ICONS = {
+  pending: '⏳', running: '⚡', success: '✅', failed: '❌',
+};
+// ── Init ─────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  switchPipeline('training_pipeline',
+    document.querySelector('.tab-btn.active'));
+});
+function switchPipeline(id, btn) {
+  currentPipeline = id;
+  currentExecId   = null;
+  if (pollIv) { clearInterval(pollIv); pollIv = null; }
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  const dag = DAGS[id];
+  currentDag = dag;
+  document.getElementById('pipeline-name').textContent = dag.name;
+  document.getElementById('pipeline-desc').textContent = dag.description;
+  // Show dataset selector only for training pipeline
+  document.getElementById('ctx-form').style.display =
+    id === 'training_pipeline' ? 'flex' : 'none';
+  renderDAG(dag);
+  renderTaskList(dag, {});
+  document.getElementById('exec-log').textContent = 'Waiting for execution…';
+  document.getElementById('exec-status-badge').innerHTML = '';
+  document.getElementById('exec-pct').textContent = '—';
+  document.getElementById('btn-run-pipeline').disabled = false;
+  document.getElementById('btn-run-pipeline').innerHTML = '<i class="fa-solid fa-play"></i> Execute DAG';
+}
+// ── DAG rendering with Plotly ─────────────────────────────────────────────────
+function renderDAG(dag, taskStates) {
+  taskStates = taskStates || {};
+  const tasks   = Object.values(dag.tasks);
+  const layers  = {};
+  tasks.forEach(t => { layers[t.layer] = (layers[t.layer] || []); layers[t.layer].push(t); });
+  const nodeX = {}, nodeY = {};
+  const maxLayer = Math.max(...tasks.map(t => t.layer));
+  const xStep = 1 / (maxLayer + 1);
+  Object.entries(layers).forEach(([layer, ts]) => {
+    const xPos = (parseInt(layer) + 0.5) * xStep;
+    const yStep = 1 / (ts.length + 1);
+    ts.forEach((t, i) => {
+      nodeX[t.task_id] = xPos;
+      nodeY[t.task_id] = (i + 1) * yStep;
+    });
+  });
+  // Build edge traces
+  const edgeTraces = [];
+  tasks.forEach(t => {
+    t.upstream.forEach(upId => {
+      if (!nodeX[upId]) return;
+      edgeTraces.push({
+        type: 'scatter', mode: 'lines',
+        x: [nodeX[upId], nodeX[t.task_id]],
+        y: [nodeY[upId], nodeY[t.task_id]],
+        line: { color: '#30363d', width: 2 },
+        hoverinfo: 'none', showlegend: false,
+      });
+    });
+  });
+  // Node trace
+  const nodeColors = tasks.map(t => {
+    const st = (taskStates[t.task_id] || {}).status || 'pending';
+    return STATUS_COLORS[st] || '#30363d';
+  });
+  const nodeText = tasks.map(t => {
+    const st = (taskStates[t.task_id] || {}).status || 'pending';
+    return `${t.icon} ${t.name}<br><span style="font-size:10px">${STATUS_ICONS[st]} ${st}</span>`;
+  });
+  const nodeHover = tasks.map(t => {
+    const st = (taskStates[t.task_id] || {}).status || 'pending';
+    return `<b>${t.name}</b><br>${t.description}<br>Status: ${st}`;
+  });
+  const nodeTrace = {
+    type: 'scatter', mode: 'markers+text',
+    x: tasks.map(t => nodeX[t.task_id]),
+    y: tasks.map(t => nodeY[t.task_id]),
+    text: nodeText,
+    textposition: 'bottom center',
+    textfont: { color: '#e6edf3', size: 11 },
+    marker: {
+      size: 36,
+      color: nodeColors,
+      line: { color: '#e6edf3', width: 1.5 },
+      symbol: 'circle',
+    },
+    hovertemplate: nodeHover.map(h => h + '<extra></extra>'),
+    showlegend: false,
+  };
+  const bg = '#0d1117';
+  Plotly.react('dag-canvas', [...edgeTraces, nodeTrace], {
+    paper_bgcolor: bg, plot_bgcolor: bg,
+    margin: { t: 20, b: 40, l: 20, r: 20 },
+    xaxis: { showgrid: false, zeroline: false, showticklabels: false, range: [0,1] },
+    yaxis: { showgrid: false, zeroline: false, showticklabels: false, range: [0,1] },
+    dragmode: false,
+  }, { responsive: true, displayModeBar: false });
+}
+// ── Task status list ──────────────────────────────────────────────────────────
+function renderTaskList(dag, taskStates) {
+  const tasks = Object.values(dag.tasks).sort((a,b) => a.layer - b.layer);
+  const el = document.getElementById('task-list');
+  el.innerHTML = tasks.map(t => {
+    const st  = (taskStates[t.task_id] || {}).status || 'pending';
+    const res = (taskStates[t.task_id] || {}).result || '';
+    const clr = STATUS_COLORS[st] || '#30363d';
+    return `<div style="display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:6px;background:var(--bg-tertiary)">
+      <div style="width:10px;height:10px;border-radius:50%;background:${clr};margin-top:4px;flex-shrink:0"></div>
+      <div style="flex:1;min-width:0">
+        <div style="font-size:.85rem;font-weight:500">${t.icon} ${t.name}</div>
+        ${res ? `<div style="font-size:.75rem;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${res}">${res}</div>` : ''}
+      </div>
+      <span style="font-size:.72rem;padding:2px 7px;border-radius:10px;background:${clr}22;color:${clr};white-space:nowrap">${STATUS_ICONS[st]} ${st}</span>
+    </div>`;
+  }).join('');
+}
+// ── Execute pipeline ──────────────────────────────────────────────────────────
+async function runPipeline() {
+  document.getElementById('btn-run-pipeline').disabled = true;
+  document.getElementById('btn-run-pipeline').innerHTML = '<span class="spinner"></span> Running…';
+  document.getElementById('exec-log').textContent = '';
+  document.getElementById('exec-status-badge').innerHTML =
+    '<span class="badge badge-warning"><span class="spinner" style="width:9px;height:9px;border-width:1.5px"></span> Running</span>';
+  const ctx = {};
+  if (currentPipeline === 'training_pipeline') {
+    ctx.dataset = document.getElementById('ctx-dataset').value;
+  }
+  try {
+    const res  = await fetch(`/api/pipeline/${currentPipeline}/execute`, {
+      method: 'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify(ctx),
+    });
+    const data = await res.json();
+    currentExecId = data.exec_id;
+    pollExecution();
+  } catch(e) {
+    showToast('Failed to start pipeline', 'error');
+    document.getElementById('btn-run-pipeline').disabled = false;
+    document.getElementById('btn-run-pipeline').innerHTML = '<i class="fa-solid fa-play"></i> Execute DAG';
+  }
+}
+function pollExecution() {
+  if (pollIv) clearInterval(pollIv);
+  pollIv = setInterval(async () => {
+    const res  = await fetch(`/api/pipeline/status/${currentExecId}`);
+    const exec = await res.json();
+    // Update progress
+    document.getElementById('exec-pct').textContent = exec.progress + '%';
+    // Update log
+    const logEl = document.getElementById('exec-log');
+    logEl.innerHTML = (exec.logs || []).map(line => {
+      let cls = '';
+      if (line.includes('✔')) cls = 'log-line-ok';
+      else if (line.includes('✖')) cls = 'log-line-err';
+      else if (line.includes('▶')) cls = 'log-line-info';
+      return `<div class="${cls}">${line}</div>`;
+    }).join('');
+    logEl.scrollTop = logEl.scrollHeight;
+    // Update DAG
+    if (exec.task_states) {
+      renderDAG(currentDag, exec.task_states);
+      renderTaskList(currentDag, exec.task_states);
+    }
+    if (exec.status === 'completed') {
+      clearInterval(pollIv); pollIv = null;
+      document.getElementById('exec-status-badge').innerHTML =
+        '<span class="badge badge-success"><i class="fa-solid fa-check"></i> Completed</span>';
+      document.getElementById('btn-run-pipeline').disabled = false;
+      document.getElementById('btn-run-pipeline').innerHTML = '<i class="fa-solid fa-rotate-right"></i> Run Again';
+      showToast(`Pipeline "${currentDag.name}" completed`, 'success');
+    } else if (exec.status === 'failed') {
+      clearInterval(pollIv); pollIv = null;
+      document.getElementById('exec-status-badge').innerHTML =
+        '<span class="badge badge-danger"><i class="fa-solid fa-xmark"></i> Failed</span>';
+      document.getElementById('btn-run-pipeline').disabled = false;
+      document.getElementById('btn-run-pipeline').innerHTML = '<i class="fa-solid fa-play"></i> Retry';
+      showToast('Pipeline failed: ' + (exec.error || 'unknown'), 'error');
+    }
+  }, 800);
+}
+function clearLog() { document.getElementById('exec-log').textContent = 'Cleared.'; }
+</script>
+{% endblock %}

templates/runs.html ADDED Viewed

	@@ -0,0 +1,179 @@

+{% extends "base.html" %}
+{% set active_page = "experiments" %}
+{% block title %}{{ experiment.name }} Runs{% endblock %}
+{% block page_title %}<i class="fa-solid fa-flask" style="color:var(--accent-blue)"></i> {{ experiment.name }}{% endblock %}
+{% block topnav_actions %}
+<button class="btn btn-ghost btn-sm" id="btn-compare" onclick="compareSelected()" disabled>
+  <i class="fa-solid fa-code-compare"></i> Compare Selected
+</button>
+{% endblock %}
+{% block content %}
+<div class="flex-gap mb-20" style="margin-bottom:16px">
+  <a href="/experiments" class="btn btn-ghost btn-sm"><i class="fa-solid fa-arrow-left"></i> All Experiments</a>
+  <span class="badge badge-info">{{ runs | length }} runs</span>
+</div>
+<!-- Filter bar -->
+<div class="card card-sm mb-20" style="margin-bottom:16px">
+  <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
+    <div style="font-size:.82rem;color:var(--text-muted);margin-right:4px"><i class="fa-solid fa-filter"></i> Filter:</div>
+    <select class="form-select" id="filter-task" style="width:auto;padding:5px 28px 5px 10px;font-size:.82rem" onchange="filterRuns()">
+      <option value="">All tasks</option>
+      <option value="classification">Classification</option>
+      <option value="regression">Regression</option>
+    </select>
+    <select class="form-select" id="filter-cat" style="width:auto;padding:5px 28px 5px 10px;font-size:.82rem" onchange="filterRuns()">
+      <option value="">All categories</option>
+      {% set cats = runs | map(attribute='category') | unique | list %}
+      {% for cat in cats %}<option value="{{ cat }}">{{ cat }}</option>{% endfor %}
+    </select>
+    <input type="text" class="form-control" id="filter-search" placeholder="Search algorithm…"
+           style="width:200px;padding:5px 10px;font-size:.82rem" oninput="filterRuns()">
+    <button class="btn btn-ghost btn-sm" onclick="clearFilters()"><i class="fa-solid fa-xmark"></i> Clear</button>
+  </div>
+</div>
+<!-- Runs table -->
+<div class="card">
+  <div class="table-wrap">
+    <table id="runs-table">
+      <thead>
+        <tr>
+          <th style="width:32px"><input type="checkbox" id="chk-all" onchange="toggleAll(this)"></th>
+          <th>Run ID</th><th>Algorithm</th><th>Category</th><th>Task</th>
+          {% if runs and runs[0].task_type == 'classification' %}
+          <th>Accuracy</th><th>F1</th><th>Precision</th><th>Recall</th>
+          {% else %}
+          <th>R²</th><th>MAE</th><th>RMSE</th>
+          {% endif %}
+          <th>Duration</th><th>Started</th>
+        </tr>
+      </thead>
+      <tbody id="runs-tbody">
+        {% for r in runs %}
+        <tr data-task="{{ r.task_type }}" data-cat="{{ r.category }}" data-alg="{{ r.algorithm | lower }}"
+            data-run="{{ r.run_id }}">
+          <td><input type="checkbox" class="run-chk" value="{{ r.run_id }}" onchange="updateCompareBtn()"></td>
+          <td><code style="font-size:.78rem;color:var(--accent-light)">{{ r.run_id_short }}</code></td>
+          <td><strong>{{ r.algorithm }}</strong></td>
+          <td><span class="badge badge-purple">{{ r.category }}</span></td>
+          <td><span class="badge {% if r.task_type == 'classification' %}badge-info{% else %}badge-warning{% endif %}">{{ r.task_type }}</span></td>
+          {% if r.task_type == 'classification' %}
+            {% set acc = r.metrics.get('accuracy', 0) %}
+            <td><span class="metric-val {% if acc >= 0.9 %}metric-good{% elif acc >= 0.7 %}metric-medium{% else %}metric-bad{% endif %}">{{ acc }}</span></td>
+            <td>{{ r.metrics.get('f1_score', '—') }}</td>
+            <td>{{ r.metrics.get('precision', '—') }}</td>
+            <td>{{ r.metrics.get('recall', '—') }}</td>
+          {% else %}
+            {% set r2 = r.metrics.get('r2_score', 0) %}
+            <td><span class="metric-val {% if r2 >= 0.8 %}metric-good{% elif r2 >= 0.5 %}metric-medium{% else %}metric-bad{% endif %}">{{ r2 }}</span></td>
+            <td>{{ r.metrics.get('mae', '—') }}</td>
+            <td>{{ r.metrics.get('rmse', '—') }}</td>
+          {% endif %}
+          <td>{{ r.duration }}s</td>
+          <td style="color:var(--text-muted);font-size:.8rem">{{ r.start_time }}</td>
+        </tr>
+        {% else %}
+        <tr><td colspan="12">
+          <div class="empty-state"><div class="empty-state-icon">📊</div><div class="empty-state-title">No runs in this experiment</div></div>
+        </td></tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+<!-- Compare Modal -->
+<div class="modal-overlay" id="compare-modal">
+  <div class="modal" style="width:min(820px,96vw)">
+    <div class="modal-header">
+      <div class="modal-title"><i class="fa-solid fa-code-compare" style="color:var(--accent)"></i> Run Comparison</div>
+      <button class="modal-close" onclick="document.getElementById('compare-modal').classList.remove('open')"><i class="fa-solid fa-xmark"></i></button>
+    </div>
+    <div id="compare-chart" style="height:320px"></div>
+    <div id="compare-table" style="margin-top:16px"></div>
+  </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+const ALL_RUNS = {{ runs | tojson }};
+function filterRuns() {
+  const task   = document.getElementById('filter-task').value.toLowerCase();
+  const cat    = document.getElementById('filter-cat').value.toLowerCase();
+  const search = document.getElementById('filter-search').value.toLowerCase();
+  document.querySelectorAll('#runs-tbody tr[data-run]').forEach(row => {
+    const matchTask = !task   || row.dataset.task === task;
+    const matchCat  = !cat   || row.dataset.cat.toLowerCase() === cat;
+    const matchAlg  = !search || row.dataset.alg.includes(search);
+    row.style.display = (matchTask && matchCat && matchAlg) ? '' : 'none';
+  });
+}
+function clearFilters() {
+  document.getElementById('filter-task').value   = '';
+  document.getElementById('filter-cat').value    = '';
+  document.getElementById('filter-search').value = '';
+  filterRuns();
+}
+function toggleAll(cb) {
+  document.querySelectorAll('.run-chk').forEach(c => c.checked = cb.checked);
+  updateCompareBtn();
+}
+function updateCompareBtn() {
+  const count = document.querySelectorAll('.run-chk:checked').length;
+  document.getElementById('btn-compare').disabled = count < 2;
+}
+function compareSelected() {
+  const checked = [...document.querySelectorAll('.run-chk:checked')].map(c => c.value);
+  const selected = ALL_RUNS.filter(r => checked.includes(r.run_id));
+  if (selected.length < 2) return;
+  const isClass = selected[0].task_type === 'classification';
+  const metricKeys = isClass
+    ? ['accuracy','f1_score','precision','recall']
+    : ['r2_score','mae','mse','rmse'];
+  const colors = ['#8b5cf6','#3b82f6','#22c55e','#f59e0b','#ef4444','#06b6d4'];
+  const traces = metricKeys.map((mk, i) => ({
+    type: 'bar',
+    name: mk,
+    x: selected.map(r => r.algorithm),
+    y: selected.map(r => r.metrics[mk] || 0),
+    marker: { color: colors[i] },
+    hovertemplate: `<b>%{x}</b><br>${mk}: %{y:.4f}<extra></extra>`,
+  }));
+  const bg2 = '#161b22', border = '#30363d', txt = '#8b949e';
+  Plotly.newPlot('compare-chart', traces, {
+    paper_bgcolor: bg2, plot_bgcolor: bg2, barmode: 'group',
+    margin: { t:12, b:60, l:48, r:12 },
+    xaxis: { color: txt, tickfont:{size:10}, gridcolor: border },
+    yaxis: { color: txt, tickfont:{size:10}, gridcolor: border },
+    legend: { font:{color: txt, size:11}, bgcolor:'transparent' },
+  }, { responsive:true, displayModeBar:false });
+  // Table
+  let html = `<div class="table-wrap"><table><thead><tr><th>Algorithm</th><th>Dataset</th>`;
+  metricKeys.forEach(mk => html += `<th>${mk}</th>`);
+  html += '</tr></thead><tbody>';
+  selected.forEach(r => {
+    html += `<tr><td><strong>${r.algorithm}</strong></td><td>${r.dataset}</td>`;
+    metricKeys.forEach(mk => {
+      const v = r.metrics[mk];
+      html += `<td>${v !== undefined ? v : '—'}</td>`;
+    });
+    html += '</tr>';
+  });
+  html += '</tbody></table></div>';
+  document.getElementById('compare-table').innerHTML = html;
+  document.getElementById('compare-modal').classList.add('open');
+}
+</script>
+{% endblock %}