Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+backend/patient_history.db filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -34,6 +34,8 @@ venv/
 ENV/
 env.bak/
 venv.bak/
+uv.lock
+pyproject.toml
 
 # Streamlit
 .streamlit/credentials.toml
@@ -44,3 +46,26 @@ venv.bak/
 
 # macOS
 .DS_Store
+
+# next.js
+node_modules
+.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+coverage
+.next/
+out/
+build
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+.env*
+.vercel
+*.tsbuildinfo
+next-env.d.ts

ARCHITECTURE.md

@@ -0,0 +1,98 @@
+# HEARTFLOW_OS // System Architecture
+
+## Overview
+HeartFlow OS is an end-to-end, edge-optimized clinical telemetry pipeline. The system bridges the gap between high-level cloud machine learning and low-level embedded hardware, enabling real-time clinical inference and automated C-code transpilation for resource-constrained microcontrollers (TinyML).
+
+The architecture adheres to a decoupled, modular design pattern split into three primary planes: **Client (Frontend)**, **Core (Backend)**, and **Edge (Hardware Compilation)**.
+
+---
+
+## Architecture Diagram
+
+```mermaid
+graph TD
+    %% Define styles
+    classDef frontend fill:#111,stroke:#111,stroke-width:2px,color:#fff,font-family:monospace;
+    classDef backend fill:#fff,stroke:#111,stroke-width:2px,color:#111,font-family:monospace;
+    classDef ml_node fill:#e61919,stroke:#e61919,stroke-width:2px,color:#fff,font-family:monospace;
+    classDef edge_tech fill:#f3f3f2,stroke:#111,stroke-width:2px,color:#111,font-family:monospace;
+    classDef data fill:#94a3b8,stroke:#475569,stroke-width:2px,color:#fff,font-family:monospace;
+
+    subgraph Client [Client Application]
+        UI[Next.js 16 UI / Dashboard]:::frontend
+        WS_Client[WebSocket Client]:::frontend
+        HTTP_Client[HTTP Client]:::frontend
+    end
+
+    subgraph Core [FastAPI Backend]
+        WS_Server[WebSocket Feed / Generator]:::backend
+        REST_API[REST API Router]:::backend
+        Inference[Inference Engine / Preprocessor]:::backend
+        MLOps[MLOps Pipeline]:::backend
+        DB[(aiosqlite)]:::backend
+    end
+
+    subgraph ML_Layer [Intelligence Pipeline]
+        Ensemble{Soft-Voting Ensemble}:::ml_node
+        Models[RF, SVM, KNN, LogReg, MLP]:::ml_node
+        SHAP[SHAP Explainer]:::ml_node
+        EdgeCompiler[INT8 C-Compiler AST]:::ml_node
+    end
+
+    subgraph Hardware [Edge Target]
+        HEADER((tinyml_model.h)):::edge_tech
+        MCU[ESP32 / Cortex-M]:::edge_tech
+    end
+
+    subgraph Storage [Persistent Storage]
+        ModelWeights[Trained Weights .pkl]:::data
+        CSV[Patient Dataset .csv]:::data
+    end
+
+    %% Flow
+    UI -->|React 19 / Framer| WS_Client
+    UI -->|User Interaction| HTTP_Client
+    
+    WS_Client <-->|ws:// Live Telemetry| WS_Server
+    HTTP_Client -->|POST /retrain, GET /export| REST_API
+    
+    WS_Server -->|Evaluates Vitals| Inference
+    REST_API -->|Triggers Retrain| MLOps
+    REST_API -->|Requests Header| EdgeCompiler
+    
+    Inference -->|Predicts| Ensemble
+    Ensemble --> Models
+    Ensemble --> SHAP
+    
+    MLOps -->|Writes| ModelWeights
+    MLOps -->|Appends| CSV
+    EdgeCompiler -->|Reads| Models
+    Inference -->|Reads| ModelWeights
+    
+    EdgeCompiler -->|Transpiles| HEADER
+    HEADER -.->|Flashed to| MCU
+```
+
+---
+
+## 1. Client Plane (Frontend)
+Engineered using **Next.js 16 (App Router)** and **React 19**. 
+- **Design System:** Strict Industrial Brutalist aesthetic utilizing hard grids, monochromatic blueprints (`bg-canvas-cream`, `text-ink`), and high-contrast hazard states.
+- **State Management:** React Context API manages high-frequency telemetry streams.
+- **Data Transport:** Real-time data is ingested via native WebSockets (`ws://`), bypassing HTTP overhead for continuous vital monitoring.
+- **Animations:** Hardware-accelerated SVG manipulations and layout transitions powered by `framer-motion`.
+
+## 2. Core Plane (Backend)
+Built on **FastAPI** (Python 3.10+), maximizing asynchronous throughput.
+- **WebSocket Generator:** A state-machine driven data simulator generates correlated, volatile telemetry streams (simulating clinical episodes like Asthma or Heart Disease).
+- **Inference Preprocessor:** Live patient data is standardized and imputed using a persistent `SimpleImputer` and `StandardScaler` trained on the original dataset, ensuring inference dimensions perfectly match the training phase.
+- **Storage:** Employs `aiosqlite` for non-blocking, asynchronous database writes to track historical patient classifications without stalling the event loop.
+
+## 3. Intelligence Pipeline (MLOps)
+- **Ensemble Architecture:** Achieves clinical-grade precision via a 5-model soft-voting ensemble (`RandomForest`, `SVM`, `KNN`, `LogisticRegression`, `MLPClassifier`).
+- **Batch Retraining:** Exposes a robust `/retrain` pipeline allowing direct CSV uploads. The pipeline safely joins the schemas, automatically updates `patient_dataset.csv`, fits new scalers/imputers, retraining all models in a `BackgroundTask` thread, and hot-swaps the `EnsembleModel` globally with zero downtime.
+
+## 4. Edge Compilation (TinyML)
+- **Zero-Dep C-Headers:** The backend transpiles trained SciKit-Learn tree models directly into standalone `C` functions. 
+- **INT8 Quantization:** Floating-point weights and decision thresholds are algorithmically compressed (quantized) into 8-bit integers, effectively shrinking the flashed payload by ~75%.
+- **Target:** Designed to run strictly on MCU SRAM without dynamic memory allocation (no `malloc`), perfect for resource-constrained nodes like the ESP32 or Cortex-M4.

DESIGN.md

@@ -0,0 +1,55 @@
+# Design System: HeartFlow OS
+
+## 1. Visual Theme & Atmosphere
+A restrained, highly dense utilitarian interface engineered for clinical telemetry. The atmosphere is precise, unornamented, and cockpit-dense — like a modern piece of medical hardware. It abandons marketing fluff (drop shadows, massive radii, neon glows) in favor of absolute data legibility, 1px structural hairlines, and muted semantic pastels.
+
+- **DESIGN_VARIANCE: 6** — Asymmetric bento grids, strict baseline rhythms.
+- **MOTION_INTENSITY: 5** — Restrained. Staggered reveals and layout-fluidity for data changes, but no perpetual decorative loops.
+- **VISUAL_DENSITY: 8** — Cockpit-dense. Maximum data visibility without visual collision.
+
+## 2. Color Palette & Roles
+- **Clinical Canvas** (`#FBFBFA`) — Primary background surface for the application root.
+- **Pure Surface** (`#FFFFFF`) — Card and container fill.
+- **Ink Black** (`#141413`) — Primary text, CTAs, and active focus rings.
+- **Slate Gray** (`#696969`) — Secondary text, metadata, tabular headers, and decorative icons.
+- **Whisper Border** (`#EAEAEA`) — Card borders, dividers, 1px structural lines. No shadows.
+- **Risk Pastel** (`#FDEBEC` bg / `#9F2F2D` text) — Semantic warning state (e.g., At-Risk predictions).
+- **Healthy Pastel** (`#EDF3EC` bg / `#346538` text) — Semantic success state.
+- **Soft Bone** (`#F4F4F4`) — Neutral tertiary state or loading badges.
+
+## 3. Typography Rules
+- **Display:** `Geist` or `Outfit` (sans-serif) — Track-tight (`-0.02em`), controlled scale, weight-driven hierarchy (Medium 500 for headers).
+- **Body:** `Geist` or `Outfit` — Relaxed leading (`1.5`), `450` weight, Slate Gray.
+- **Data / Numbers:** `Geist Mono` or Tabular-Nums on the sans font — Mandatory for all live telemetry, timestamps, and confidence percentages to prevent horizontal layout jitter.
+- **Banned:** Generic serifs (`Times New Roman`, `Georgia`) are banned in this software UI. Generic `Inter` is discouraged in favor of `Geist` for a more precise technical aesthetic.
+
+## 4. Component Stylings
+- **Buttons:** Flat, Ink Black fill. Border radius of `6px` or `8px`. Tactile `scale(0.98)` push feedback on active state. No neon outer glows, no massive pills (999px) in the dashboard.
+- **Cards (Bento Grid):** Crisp `12px` or `8px` corners. Strict `1px solid #EAEAEA` border. Absolutely zero drop shadows (`shadow-none`). 
+- **Inputs & Navigation:** Focus states must use a harsh, highly-visible 2px ring (`focus-visible:ring-2 focus-visible:ring-[#141413]`). Label above, error below.
+- **Loaders:** Skeletal shimmer matching exact layout dimensions. No generic circular spinners.
+- **Status Pills:** Small, dense (`text-[11px]`), uppercase with wide tracking (`0.05em`), using the muted semantic pastels above.
+
+## 5. Layout Principles
+- **Macro-Whitespace:** 8-point baseline grid. Generous internal padding inside cards (`p-8`), but tightly packed grids (`gap-6`).
+- **No Overlapping Elements:** Every element occupies its own clear spatial zone. No absolute-positioned content stacking.
+- **Bento Constraints:** The layout must adapt exactly to the number of data panels. No empty slots.
+- **Responsive Strictness:** Multi-column layouts must explicitly collapse to a single column below 768px. No horizontal scroll on mobile.
+- **Height Constraints:** Full-height views must use `min-h-[100dvh]` to avoid iOS Safari address bar jumps.
+
+## 6. Motion & Interaction
+- **Physics Engine:** Spring physics for all interactive layout shifts (`stiffness: 100, damping: 20`). No linear easing.
+- **Staggered Orchestration:** List items and bento cards enter via a subtle `translateY(12px)` + `opacity: 0` staggered cascade. Never mount the full dashboard instantly.
+- **Hardware Acceleration:** Animate exclusively via `transform` and `opacity`. 
+- **Accessibility Sync:** Interactive layout shifts must respect `prefers-reduced-motion`. Live data must have `aria-live="polite"` so motion isn't the only indicator of change.
+
+## 7. Anti-Patterns (BANNED)
+- **NO emojis anywhere.** Use Phosphor, Lucide, or Radix UI icons.
+- **NO generic purple/blue neon glows** or gradient meshes.
+- **NO pure black** (`#000000`).
+- **NO drop shadows** (`shadow-md`, `shadow-lg`, etc.). Elevation is handled by 1px borders.
+- **NO fake placeholder names** (John Doe, Acme).
+- **NO unstyled focus states.** 
+- **NO AI copywriting clichés** ("Elevate", "Seamless", "Unleash").
+- **NO "Inter" font** as the default assumption; enforce Geist/Outfit.
+- **NO non-tabular numbers** for live updating data.

Dockerfile

@@ -1,8 +1,26 @@
-FROM python:3.11-slim
-WORKDIR /app
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-COPY . .
-EXPOSE 7860
-ENV PORT=7860
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Install system dependencies if required by any ML libraries
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install python dependencies from the backend
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy necessary directories for the backend to run
+COPY backend/ ./backend/
+COPY model/ ./model/
+COPY data/ ./data/
+
+# Hugging Face Spaces mandates port 7860
+EXPOSE 7860
+
+# Ensure Python knows where to find the backend module
+ENV PYTHONPATH=/app
+
+# Start the FastAPI server
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,8 +1,65 @@
+# HEARTFLOW_OS // TinyML Heart Health Telemetry
+
+A production-ready, edge-optimized application for real-time cardiovascular analytics. It bridges the gap between cloud-scale machine learning and low-level embedded hardware by deploying soft-voting ensembles and automated C-code transpilation for resource-constrained IoT systems.
+
+![Next.js](https://img.shields.io/badge/Next.js-16+-black.svg?style=flat&logo=next.js)
+![React](https://img.shields.io/badge/React-19-61DAFB.svg?style=flat&logo=react)
+![FastAPI](https://img.shields.io/badge/FastAPI-0.111.0+-009688.svg?style=flat&logo=fastapi)
+![Scikit-Learn](https://img.shields.io/badge/scikit--learn-1.5.1+-F7931E.svg?style=flat&logo=scikit-learn)
+![License](https://img.shields.io/badge/license-MIT-green.svg)
+
 ---
-   title: Tinyml Backend
-   emoji: 🫀
-   colorFrom: green
-   colorTo: blue
-   sdk: docker
-   pinned: false
----
+
+## Overview
+
+HEARTFLOW_OS is designed for clinical telemetry monitoring. It evaluates live patient vitals using an ensemble of classifiers, provides diagnostic probability distributions, and physically compresses these Python-trained models into raw C-code headers ready to be flashed directly onto edge silicon (e.g., ESP32, Arduino Nano).
+
+### Key Engineering Features
+
+- **Industrial Brutalist Frontend**: A high-performance, cockpit-dense Next.js 16 UI using native WebSockets and React 19 to render 60fps SVG telemetry sweeps without dropping frames.
+- **Edge Computing & TinyML**: Transpiles complex Scikit-Learn models into highly optimized, dependency-free **C-code headers**. Bypasses dynamic memory allocation entirely.
+- **INT8 Quantization Engine**: Mathematically scales 64-bit floating-point weights down to 8-bit integers, shrinking the flash memory payload by **~75%** for constrained microcontrollers.
+- **Soft-Voting Ensemble**: Aggregates predictions across five independent models (Random Forest, SVM, KNN, Logistic Regression, MLP Neural Network) to output robust probability distributions rather than black-box binary answers.
+- **Zero-Downtime MLOps Pipeline**: Features a dedicated `/retrain` pipeline allowing dynamic CSV uploads. It validates schemas, imputes missing data, retrains the entire ensemble in a background thread, and hot-swaps the intelligence engine globally without dropping active WebSocket connections.
+
+## Architecture
+
+The project follows a decoupled, modular design pattern split between a React Client, a FastAPI Core, and an Edge Compiler.
+
+For a comprehensive deep-dive into the data flows and system topography, refer to the [ARCHITECTURE.md](./ARCHITECTURE.md) document.
+
+### Repository Structure
+
+```text
+HEARTFLOW_OS/
+├── backend/               # FastAPI server, ML pipelines, aiosqlite, Edge C-compiler
+│   ├── ensemble.py        # Core intelligence and prediction aggregations
+│   ├── main.py            # Websocket feeds, REST APIs, and background tasks
+│   └── preprocessing.py   # MLOps data imputation, scaling, and state preservation
+├── frontend/              # Next.js 16 UI, React Context, framer-motion components
+│   ├── src/app/           # Dashboard, Simulator, MLOps, and Architecture routes
+│   └── src/components/    # Reusable brutalist UI components (Vitals, Graphs)
+├── model/                 # Local cache of serialized SciKit-Learn .pkl weights
+└── data/                  # Base patient cohort CSVs for MLOps retraining pipelines
+```
+
+## Quickstart
+
+### 1. Initialize Backend
+```bash
+cd backend
+python -m venv venv
+source venv/bin/activate  # Or `.\venv\Scripts\activate` on Windows
+pip install -r requirements.txt
+python models.py  # Initial train of the base ensemble
+uvicorn main:app --reload --port 8000
+```
+
+### 2. Initialize Frontend
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The system will boot on `localhost:3000`. Connect to view the live dashboard streams and access the MLOps retraining interfaces.

backend/Dockerfile

@@ -1,8 +1,18 @@
 FROM python:3.11-slim
 WORKDIR /app
-COPY backend/requirements.txt .
+
+# Install build dependencies for scientific libraries
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy source code
 COPY . .
-WORKDIR /app/backend
+
+# Expose port and run
 EXPOSE 8000
-CMD sh -c "uvicorn main:app --host 0.0.0.0 --port ${PORT:-8000}"
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/alerts.log

@@ -7,3 +7,23 @@ ALERT: Patient at risk! HR: 93.0, SpO2: 85.0, Confidence: 0.98
 ALERT: Patient at risk! HR: 65.0, SpO2: 93.0, Confidence: 0.92
 ALERT: Patient at risk! HR: 81.0, SpO2: 96.0, Confidence: 0.97
 ALERT: Patient at risk! HR: 91.0, SpO2: 87.0, Confidence: 0.92
+ALERT: Patient at risk! HR: 196.0, SpO2: 87.0, Confidence: 0.89
+ALERT: Patient at risk! HR: 196.0, SpO2: 87.0, Confidence: 0.96
+ALERT: Patient at risk! HR: 172.0, SpO2: 98.0, Confidence: 0.82
+ALERT: Patient at risk! HR: 75.0, SpO2: 98.0, Confidence: 0.98
+ALERT: Patient at risk! HR: 75.0, SpO2: 98.0, Confidence: 0.95
+ALERT: Patient at risk! HR: 174.0, SpO2: 89.0, Confidence: 0.84
+ALERT: Patient at risk! HR: 174.0, SpO2: 89.0, Confidence: 0.81
+ALERT: Patient at risk! HR: 186.0, SpO2: 98.0, Confidence: 0.81
+ALERT: Patient at risk! HR: 186.0, SpO2: 91.0, Confidence: 0.82
+ALERT: Patient at risk! HR: 117.0, SpO2: 76.0, Confidence: 0.93
+ALERT: Patient at risk! HR: 187.0, SpO2: 98.0, Confidence: 0.81
+ALERT: Patient at risk! HR: 96.0, SpO2: 95.0, Confidence: 0.98
+ALERT: Patient at risk! HR: 114.0, SpO2: 96.0, Confidence: 0.91
+ALERT: Patient at risk! HR: 75.0, SpO2: 90.0, Confidence: 0.81
+ALERT: Patient at risk! HR: 78.0, SpO2: 90.0, Confidence: 0.90
+ALERT: Patient at risk! HR: 100.0, SpO2: 99.0, Confidence: 0.99
+ALERT: Patient at risk! HR: 83.0, SpO2: 100.0, Confidence: 0.95
+ALERT: Patient at risk! HR: 73.0, SpO2: 97.0, Confidence: 0.96
+ALERT: Patient at risk! HR: 140.0, SpO2: 96.0, Confidence: 0.82
+ALERT: Patient at risk! HR: 83.0, SpO2: 100.0, Confidence: 0.85

backend/config.py

@@ -0,0 +1,11 @@
+import os
+
+class Settings:
+    app_name: str = "TinyML Core API"
+    host: str = "0.0.0.0"
+    port: int = int(os.getenv("PORT", "8000"))
+    hf_token: str | None = os.getenv("HF_TOKEN")
+    db_name: str = os.getenv("DB_NAME", "patient_history.db")
+    repo_id: str = os.getenv("REPO_ID", "IDKHowToCodeFr/tinyml-logs")
+
+settings = Settings()

backend/database.py

@@ -1,115 +1,104 @@
-import sqlite3
+import aiosqlite
 import os
 import time
+import asyncio
 from datetime import datetime
+from typing import List, Dict, Any
 from huggingface_hub import HfApi, hf_hub_download
+from config import settings
 
-REPO_ID = "IDKHowToCodeFr/tinyml-logs"
-DB_NAME = 'patient_history.db'
-DB_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), DB_NAME)
-HF_TOKEN = os.getenv("HF_TOKEN")
-
+DB_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), settings.db_name)
 api = HfApi()
+last_sync = 0
+sync_lock = asyncio.Lock()
 
-def sync_from_hub():
-    if not HF_TOKEN:
+async def sync_from_hub():
+    global last_sync
+    if not settings.hf_token:
         print("No HF_TOKEN found. Skipping sync.")
         return
-    try:
-        # Download with cache-busting logic if possible or just fresh download
-        print(f"Downloading {DB_NAME} from Hub...")
-        path = hf_hub_download(
-            repo_id=REPO_ID, 
-            filename=DB_NAME, 
-            repo_type="dataset", 
-            token=HF_TOKEN,
-            force_download=True
-        )
-        import shutil
-        shutil.copy(path, DB_PATH)
-        print("Sync from Hub complete.")
-    except Exception as e:
-        print(f"Sync from Hub failed: {e}")
+    
+    async with sync_lock:
+        if time.time() - last_sync < 60:
+            return
+        try:
+            print(f"Downloading {settings.db_name} from Hub...")
+            def _download():
+                path = hf_hub_download(
+                    repo_id=settings.repo_id, 
+                    filename=settings.db_name, 
+                    repo_type="dataset", 
+                    token=settings.hf_token,
+                    force_download=True
+                )
+                import shutil
+                shutil.copy(path, DB_PATH)
+            
+            await asyncio.to_thread(_download)
+            last_sync = time.time()
+            print("Sync from Hub complete.")
+        except Exception as e:
+            print(f"Sync from Hub failed: {e}")
 
-def sync_to_hub():
-    if not HF_TOKEN:
+async def sync_to_hub():
+    if not settings.hf_token:
         return
     try:
-        # Uploading back to Hub centralizes it for other instances
-        api.upload_file(
-            path_or_fileobj=DB_PATH,
-            path_in_repo=DB_NAME,
-            repo_id=REPO_ID,
-            repo_type="dataset",
-            token=HF_TOKEN
-        )
+        def _upload():
+            api.upload_file(
+                path_or_fileobj=DB_PATH,
+                path_in_repo=settings.db_name,
+                repo_id=settings.repo_id,
+                repo_type="dataset",
+                token=settings.hf_token
+            )
+        await asyncio.to_thread(_upload)
     except Exception as e:
         print(f"Sync to Hub failed: {e}")
 
-def init_db():
-    sync_from_hub()
-    conn = sqlite3.connect(DB_PATH)
-    cursor = conn.cursor()
-    cursor.execute('''
-        CREATE TABLE IF NOT EXISTS predictions (
-            id INTEGER PRIMARY KEY AUTOINCREMENT,
-            timestamp DATETIME,
-            heart_rate REAL,
-            spo2 REAL,
-            sys_bp REAL,
-            dia_bp REAL,
-            temp REAL,
-            fall_detection TEXT,
-            prediction_label TEXT,
-            confidence REAL
-        )
-    ''')
-    conn.commit()
-    conn.close()
+async def init_db() -> None:
+    await sync_from_hub()
+    async with aiosqlite.connect(DB_PATH) as db:
+        await db.execute('''
+            CREATE TABLE IF NOT EXISTS predictions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                timestamp DATETIME,
+                heart_rate REAL,
+                spo2 REAL,
+                sys_bp REAL,
+                dia_bp REAL,
+                temp REAL,
+                fall_detection TEXT,
+                prediction_label TEXT,
+                confidence REAL
+            )
+        ''')
+        await db.commit()
 
-def log_prediction(data, prediction_label, confidence):
-    # Pull latest before writing to avoid overwriting others' work
-    sync_from_hub()
-    
-    conn = sqlite3.connect(DB_PATH)
-    cursor = conn.cursor()
-    cursor.execute('''
-        INSERT INTO predictions (timestamp, heart_rate, spo2, sys_bp, dia_bp, temp, fall_detection, prediction_label, confidence)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
-    ''', (
-        datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S"),
-        data.Heart_Rate,
-        data.SpO2_Level,
-        data.Systolic_BP,
-        data.Diastolic_BP,
-        data.Body_Temp,
-        data.Fall_Detection,
-        prediction_label,
-        confidence
-    ))
-    conn.commit()
-    conn.close()
-    
-    # Push immediately
-    sync_to_hub()
+async def log_prediction(data: Any, prediction_label: str, confidence: float) -> None:
+    async with aiosqlite.connect(DB_PATH) as db:
+        await db.execute('''
+            INSERT INTO predictions (timestamp, heart_rate, spo2, sys_bp, dia_bp, temp, fall_detection, prediction_label, confidence)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+        ''', (
+            datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S"),
+            data.Heart_Rate,
+            data.SpO2_Level,
+            data.Systolic_BP,
+            data.Diastolic_BP,
+            data.Body_Temp,
+            "N/A",
+            prediction_label,
+            confidence
+        ))
+        await db.commit()
 
-def get_history():
-    # Fresh pull for history view
-    sync_from_hub()
-    
+async def get_history() -> List[Dict[str, Any]]:
     if not os.path.exists(DB_PATH):
         return []
-    conn = sqlite3.connect(DB_PATH)
-    cursor = conn.cursor()
-    cursor.execute('SELECT * FROM predictions ORDER BY timestamp DESC LIMIT 100')
-    rows = cursor.fetchall()
-    col_names = [description[0] for description in cursor.description]
-    conn.close()
     
-    history = []
-    for row in rows:
-        history.append(dict(zip(col_names, row)))
-    return history
-
-# Initialize db when this module is loaded
-init_db()
+    async with aiosqlite.connect(DB_PATH) as db:
+        db.row_factory = aiosqlite.Row
+        async with db.execute('SELECT * FROM predictions ORDER BY timestamp DESC LIMIT 100') as cursor:
+            rows = await cursor.fetchall()
+            return [dict(row) for row in rows]

backend/ensemble.py

@@ -45,4 +45,9 @@ class EnsembleModel:
         final_pred = str(self.label_encoder.inverse_transform([final_pred_idx])[0])
         confidence = float(np.max(weighted_probs))
         
-        return final_pred, confidence, individual_preds, individual_probs, self.weights
+        class_probs = {
+            str(self.label_encoder.inverse_transform([i])[0]): float(prob)
+            for i, prob in enumerate(weighted_probs)
+        }
+        
+        return final_pred, confidence, individual_preds, class_probs, self.weights

backend/export.py

@@ -0,0 +1,328 @@
+import m2cgen as m2c
+import numpy as np
+
+def generate_c_code(eng, model_name: str, quantize: bool):
+    if not eng or model_name not in eng.models:
+        return {"error": f"Model {model_name} not found"}
+        
+    model = eng.models[model_name]
+    
+    # m2cgen handles Random Forest beautifully, but outputs FP32/double rules
+    if model_name == "rf":
+        try:
+            code = m2c.export_to_c(model)
+            if quantize:
+                code = "/* WARNING: M2CGen generated FP32 output. INT8 Quantization is not supported directly for Random Forest trees. */\n" + code
+            return {"code": code}
+        except Exception:
+            pass
+            
+    # For LogReg, use m2cgen if FP32, otherwise manual generation for INT8
+    if not quantize and model_name == "logreg":
+        try:
+            code = m2c.export_to_c(model)
+            return {"code": code}
+        except Exception:
+            pass
+    
+    # Manual C-code generation for all model types
+    try:
+        L = []
+        L.append("/* ====================================================== */")
+        L.append(f"/* TinyML C Export: {model_name}                           */")
+        q_text = "INT8 Quantized" if quantize else "FP32 Double"
+        L.append(f"/* Auto-generated for ARM Cortex-M / ESP32 ({q_text}) */")
+        L.append("/* ====================================================== */")
+        L.append("")
+        L.append("#include <math.h>")
+        L.append("#include <stdint.h>")
+        L.append("#include <string.h>")
+        L.append("")
+        
+        if model_name == "svm" and hasattr(model, 'coef_'):
+            coefs = model.coef_
+            intercepts = model.intercept_
+            n_classes = len(model.classes_)
+            n_features = coefs.shape[1]
+            L.append(f"/* Linear SVM with {n_classes} classes, {n_features} features */")
+            L.append(f"#define N_FEATURES {n_features}")
+            L.append(f"#define N_CLASSES {n_classes}")
+            L.append(f"#define N_HYPERPLANES {coefs.shape[0]}")
+            L.append("")
+
+            if quantize:
+                scale_factor = 127.0 / max(np.max(np.abs(coefs)), np.max(np.abs(intercepts)), 1e-6)
+                L.append(f"/* Quantization Scale: {scale_factor:.4f} */")
+                L.append("static const int8_t SVM_COEF[N_HYPERPLANES][N_FEATURES] = {")
+                for row in coefs:
+                    vals = ", ".join([str(int(round(v * scale_factor))) for v in row])
+                    L.append(f"    {{{vals}}},")
+                L.append("};")
+                L.append("")
+                vals = ", ".join([str(int(round(v * scale_factor))) for v in intercepts])
+                L.append(f"static const int8_t SVM_INTERCEPT[N_HYPERPLANES] = {{{vals}}};")
+                L.append("")
+                L.append("int predict(int8_t *features) {")
+                L.append("    int32_t scores[N_CLASSES] = {0};")
+                L.append("    int h = 0;")
+                L.append("    for (int i = 0; i < N_CLASSES; i++) {")
+                L.append("        for (int j = i + 1; j < N_CLASSES; j++) {")
+                L.append("            int32_t decision = SVM_INTERCEPT[h];")
+                L.append("            for (int f = 0; f < N_FEATURES; f++) {")
+                L.append("                decision += (int32_t)SVM_COEF[h][f] * features[f];")
+                L.append("            }")
+                L.append("            if (decision > 0) scores[i] += 1;")
+                L.append("            else scores[j] += 1;")
+                L.append("            h++;")
+                L.append("        }")
+                L.append("    }")
+                L.append("    int best = 0;")
+                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
+                L.append("        if (scores[c] > scores[best]) best = c;")
+                L.append("    }")
+                L.append("    return best;")
+                L.append("}")
+            else:
+                L.append("static const double SVM_COEF[N_HYPERPLANES][N_FEATURES] = {")
+                for row in coefs:
+                    vals = ", ".join([f"{v:.6f}" for v in row])
+                    L.append(f"    {{{vals}}},")
+                L.append("};")
+                L.append("")
+                vals = ", ".join([f"{v:.6f}" for v in intercepts])
+                L.append(f"static const double SVM_INTERCEPT[N_HYPERPLANES] = {{{vals}}};")
+                L.append("")
+                L.append("int predict(double *features) {")
+                L.append("    double scores[N_CLASSES] = {0};")
+                L.append("    int h = 0;")
+                L.append("    for (int i = 0; i < N_CLASSES; i++) {")
+                L.append("        for (int j = i + 1; j < N_CLASSES; j++) {")
+                L.append("            double decision = SVM_INTERCEPT[h];")
+                L.append("            for (int f = 0; f < N_FEATURES; f++) {")
+                L.append("                decision += SVM_COEF[h][f] * features[f];")
+                L.append("            }")
+                L.append("            if (decision > 0) scores[i] += 1.0;")
+                L.append("            else scores[j] += 1.0;")
+                L.append("            h++;")
+                L.append("        }")
+                L.append("    }")
+                L.append("    int best = 0;")
+                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
+                L.append("        if (scores[c] > scores[best]) best = c;")
+                L.append("    }")
+                L.append("    return best;")
+                L.append("}")
+
+        elif model_name == "logreg" and hasattr(model, 'coef_'):
+            coefs = model.coef_
+            intercepts = model.intercept_
+            n_classes = coefs.shape[0] if len(model.classes_) > 2 else 2
+            n_features = coefs.shape[1]
+            L.append(f"/* Logistic Regression with {n_classes} classes, {n_features} features */")
+            L.append(f"#define N_FEATURES {n_features}")
+            L.append(f"#define N_CLASSES {coefs.shape[0]}")
+            L.append("")
+            
+            if quantize:
+                scale_factor = 127.0 / max(np.max(np.abs(coefs)), np.max(np.abs(intercepts)), 1e-6)
+                L.append(f"/* Quantization Scale: {scale_factor:.4f} */")
+                L.append("static const int8_t LOGREG_COEF[N_CLASSES][N_FEATURES] = {")
+                for row in coefs:
+                    vals = ", ".join([str(int(round(v * scale_factor))) for v in row])
+                    L.append(f"    {{{vals}}},")
+                L.append("};")
+                L.append("")
+                vals = ", ".join([str(int(round(v * scale_factor))) for v in intercepts])
+                L.append(f"static const int8_t LOGREG_INTERCEPT[N_CLASSES] = {{{vals}}};")
+                L.append("")
+                L.append("int predict(int8_t *features) {")
+                L.append("    int32_t scores[N_CLASSES];")
+                L.append("    for (int c = 0; c < N_CLASSES; c++) {")
+                L.append(f"        scores[c] = LOGREG_INTERCEPT[c] * {int(scale_factor)};")
+                L.append("        for (int f = 0; f < N_FEATURES; f++) {")
+                L.append("            scores[c] += (int32_t)LOGREG_COEF[c][f] * features[f];")
+                L.append("        }")
+                L.append("    }")
+                L.append("    int best = 0;")
+                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
+                L.append("        if (scores[c] > scores[best]) best = c;")
+                L.append("    }")
+                L.append("    return best;")
+                L.append("}")
+            else:
+                L.append("static const double LOGREG_COEF[N_CLASSES][N_FEATURES] = {")
+                for row in coefs:
+                    vals = ", ".join([f"{v:.6f}" for v in row])
+                    L.append(f"    {{{vals}}},")
+                L.append("};")
+                L.append("")
+                vals = ", ".join([f"{v:.6f}" for v in intercepts])
+                L.append(f"static const double LOGREG_INTERCEPT[N_CLASSES] = {{{vals}}};")
+                L.append("")
+                L.append("int predict(double *features) {")
+                L.append("    double scores[N_CLASSES];")
+                L.append("    for (int c = 0; c < N_CLASSES; c++) {")
+                L.append("        scores[c] = LOGREG_INTERCEPT[c];")
+                L.append("        for (int f = 0; f < N_FEATURES; f++) {")
+                L.append("            scores[c] += LOGREG_COEF[c][f] * features[f];")
+                L.append("        }")
+                L.append("    }")
+                L.append("    int best = 0;")
+                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
+                L.append("        if (scores[c] > scores[best]) best = c;")
+                L.append("    }")
+                L.append("    return best;")
+                L.append("}")
+
+        elif model_name == "small_nn" and hasattr(model, 'coefs_'):
+            layers = model.coefs_
+            biases = model.intercepts_
+            arch = " -> ".join([str(l.shape[0]) for l in layers] + [str(layers[-1].shape[1])])
+            L.append(f"/* MLP Neural Network: {len(layers)} layers */")
+            L.append(f"/* Architecture: {arch} */")
+            L.append("")
+            
+            for idx, (W, b) in enumerate(zip(layers, biases)):
+                n_in, n_out = W.shape
+                L.append(f"#define L{idx}_IN {n_in}")
+                L.append(f"#define L{idx}_OUT {n_out}")
+                L.append(f"static const double W{idx}[{n_in}][{n_out}] = {{")
+                for row in W:
+                    vals = ", ".join([f"{v:.6f}" for v in row])
+                    L.append(f"    {{{vals}}},")
+                L.append("};")
+                bvals = ", ".join([f"{v:.6f}" for v in b])
+                L.append(f"static const double B{idx}[{n_out}] = {{{bvals}}};")
+                L.append("")
+            
+            L.append("static inline double relu(double x) { return x > 0 ? x : 0; }")
+            L.append("")
+
+            if quantize:
+                # Calculate global max for int8 scaling
+                max_val = max([np.max(np.abs(w)) for w in layers] + [np.max(np.abs(b)) for b in biases] + [1e-6])
+                scale_factor = 127.0 / max_val
+                L.append(f"/* INT8 Quantization Scale Factor: {scale_factor:.4f} */")
+                for idx, (W, b) in enumerate(zip(layers, biases)):
+                    n_in, n_out = W.shape
+                    L.append(f"static const int8_t W{idx}[{n_in}][{n_out}] = {{")
+                    for row in W:
+                        vals = ", ".join([str(int(round(v * scale_factor))) for v in row])
+                        L.append(f"    {{{vals}}},")
+                    L.append("};")
+                    bvals = ", ".join([str(int(round(v * scale_factor))) for v in b])
+                    L.append(f"static const int8_t B{idx}[{n_out}] = {{{bvals}}};")
+                    L.append("")
+                L.append("static inline int32_t relu_int(int32_t x) { return x > 0 ? x : 0; }")
+                L.append("")
+                L.append("int predict(int8_t *input) {")
+                for idx in range(len(layers)):
+                    n_in = layers[idx].shape[0]
+                    n_out = layers[idx].shape[1]
+                    is_last = (idx == len(layers) - 1)
+                    src = "input" if idx == 0 else f"a{idx-1}"
+                    L.append(f"    int32_t a{idx}[{n_out}];")
+                    L.append(f"    for (int j = 0; j < {n_out}; j++) {{")
+                    L.append(f"        a{idx}[j] = B{idx}[j] * {int(scale_factor)}; /* scale bias */")
+                    L.append(f"        for (int i = 0; i < {n_in}; i++) {{")
+                    L.append(f"            a{idx}[j] += (int32_t){src}[i] * W{idx}[i][j];")
+                    L.append(f"        }}")
+                    if not is_last:
+                        L.append(f"        a{idx}[j] = relu_int(a{idx}[j]) / {int(scale_factor)}; /* rescale */")
+                    L.append(f"    }}")
+                last_idx = len(layers) - 1
+                last_out = layers[-1].shape[1]
+                L.append(f"    int best = 0;")
+                L.append(f"    for (int c = 1; c < {last_out}; c++) {{")
+                L.append(f"        if (a{last_idx}[c] > a{last_idx}[best]) best = c;")
+                L.append(f"    }}")
+                L.append(f"    return best;")
+                L.append("}")
+            else:
+                for idx, (W, b) in enumerate(zip(layers, biases)):
+                    n_in, n_out = W.shape
+                    L.append(f"#define L{idx}_IN {n_in}")
+                    L.append(f"#define L{idx}_OUT {n_out}")
+                    L.append(f"static const double W{idx}[{n_in}][{n_out}] = {{")
+                    for row in W:
+                        vals = ", ".join([f"{v:.6f}" for v in row])
+                        L.append(f"    {{{vals}}},")
+                    L.append("};")
+                    bvals = ", ".join([f"{v:.6f}" for v in b])
+                    L.append(f"static const double B{idx}[{n_out}] = {{{bvals}}};")
+                    L.append("")
+
+            L.append("static inline double relu(double x) { return x > 0 ? x : 0; }")
+            L.append("")
+            L.append("int predict(double *input) {")
+            for idx in range(len(layers)):
+                n_in = layers[idx].shape[0]
+                n_out = layers[idx].shape[1]
+                is_last = (idx == len(layers) - 1)
+                src = "input" if idx == 0 else f"a{idx-1}"
+                L.append(f"    double a{idx}[{n_out}];")
+                L.append(f"    for (int j = 0; j < {n_out}; j++) {{")
+                L.append(f"        a{idx}[j] = B{idx}[j];")
+                L.append(f"        for (int i = 0; i < {n_in}; i++) {{")
+                L.append(f"            a{idx}[j] += {src}[i] * W{idx}[i][j];")
+                L.append(f"        }}")
+                if not is_last:
+                    L.append(f"        a{idx}[j] = relu(a{idx}[j]);")
+                L.append(f"    }}")
+            
+            last_idx = len(layers) - 1
+            last_out = layers[-1].shape[1]
+            L.append(f"    int best = 0;")
+            L.append(f"    for (int c = 1; c < {last_out}; c++) {{")
+            L.append(f"        if (a{last_idx}[c] > a{last_idx}[best]) best = c;")
+            L.append(f"    }}")
+            L.append(f"    return best;")
+            L.append("}")
+            
+        elif model_name == "knn" and hasattr(model, '_fit_X'):
+            n_samples = min(model._fit_X.shape[0], 100)
+            n_feats = model._fit_X.shape[1]
+            L.append(f"/* KNN Lookup Table: {n_samples} reference samples */")
+            L.append(f"#define N_NEIGHBORS {model.n_neighbors}")
+            L.append(f"#define N_SAMPLES {n_samples}")
+            L.append(f"#define N_FEATURES {n_feats}")
+            L.append("")
+            L.append("static const double REF[N_SAMPLES][N_FEATURES] = {")
+            for row in model._fit_X[:n_samples]:
+                vals = ", ".join([f"{v:.4f}" for v in row])
+                L.append(f"    {{{vals}}},")
+            L.append("};")
+            L.append("")
+            labels_str = ", ".join([str(int(l)) for l in model._y[:n_samples]])
+            L.append(f"static const int LABELS[N_SAMPLES] = {{{labels_str}}};")
+            L.append("")
+            L.append("int predict(double *features) {")
+            L.append("    double dists[N_SAMPLES];")
+            L.append("    for (int i = 0; i < N_SAMPLES; i++) {")
+            L.append("        dists[i] = 0.0;")
+            L.append("        for (int f = 0; f < N_FEATURES; f++) {")
+            L.append("            double d = features[f] - REF[i][f];")
+            L.append("            dists[i] += d * d;")
+            L.append("        }")
+            L.append("    }")
+            L.append("    int votes[10] = {0};")
+            L.append("    for (int k = 0; k < N_NEIGHBORS; k++) {")
+            L.append("        int mi = 0;")
+            L.append("        for (int i = 1; i < N_SAMPLES; i++) {")
+            L.append("            if (dists[i] < dists[mi]) mi = i;")
+            L.append("        }")
+            L.append("        votes[LABELS[mi]]++;")
+            L.append("        dists[mi] = 1e18;")
+            L.append("    }")
+            L.append("    int best = 0;")
+            L.append("    for (int i = 1; i < 10; i++) {")
+            L.append("        if (votes[i] > votes[best]) best = i;")
+            L.append("    }")
+            L.append("    return best;")
+            L.append("}")
+        else:
+            return {"error": f"Model {model_name} cannot be exported to C."}
+        
+        return {"code": "\n".join(L)}
+    except Exception as e:
+        return {"error": f"Export failed: {str(e)}"}

backend/inference.py

@@ -0,0 +1,45 @@
+from typing import Dict, Any
+import pandas as pd
+import numpy as np
+from preprocessing import preprocess_data
+
+def evaluate(ensemble_model, data) -> Dict[str, Any]:
+    # Domain orchestrator: PatientData -> InferenceResult
+    raw_df = pd.DataFrame([data.model_dump(by_alias=True)])
+    
+    # Mapping properties to expected feature names
+    raw_df = raw_df.rename(columns={
+        "Heart_Rate": "Heart Rate (bpm)",
+        "SpO2_Level": "SpO2 Level (%)",
+        "Systolic_BP": "Systolic Blood Pressure (mmHg)",
+        "Diastolic_BP": "Diastolic Blood Pressure (mmHg)",
+        "Body_Temp": "Body Temperature (°C)",
+        "Fall_Detection": "Fall Detection"
+    })
+
+    # Drop anything the model hasn't seen
+    unseen = ["Physical Activity Level", "Age", "Gender", "Stress Level", "Cholesterol Level (mg/dL)", 
+              "Physical_Activity_Level", "Stress_Level", "Cholesterol_Level", "Fall_Detection"]
+    for f in unseen:
+        if f in raw_df.columns:
+            raw_df = raw_df.drop(columns=[f])
+
+    # Feature engineering
+    processed_df, _ = preprocess_data(raw_df, is_training=False)
+
+    if ensemble_model is None:
+        return {"error": "Ensemble model not loaded"}
+
+    # Ensemble Prediction
+    disease_label, conf, ind_preds, class_probs, weights = ensemble_model.predict(processed_df)
+    is_at_risk = (disease_label.lower() not in ["healthy", "normal", "none"])
+
+    return {
+        "prediction": is_at_risk,
+        "prediction_label": disease_label,
+        "probability": float(conf),
+        "ensemble_prediction": is_at_risk,
+        "model_outputs": ind_preds,
+        "disease_probs": class_probs,
+        "weights": weights
+    }

backend/main.py

@@ -1,19 +1,56 @@
-from fastapi import FastAPI, UploadFile, File
+from fastapi import FastAPI, UploadFile, File, BackgroundTasks, HTTPException, WebSocket, WebSocketDisconnect, Depends
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 import pandas as pd
 import asyncio
 import sys
 import os
-import m2cgen as m2c
+import random
 import shap
-from database import log_prediction, get_history
+import database as db
 import numpy as np
+from contextlib import asynccontextmanager
+from config import settings
+import warnings
+
+# Suppress sklearn version mismatch warnings in stdout
+try:
+    from sklearn.exceptions import InconsistentVersionWarning
+    warnings.filterwarnings("ignore", category=InconsistentVersionWarning)
+except ImportError:
+    pass
 
 sys.path.append(os.path.dirname(os.path.abspath(__file__)))
 from preprocessing import preprocess_data
+from export import generate_c_code
+from inference import evaluate
+
+ensemble_system = None
+
+async def background_sync():
+    while True:
+        await asyncio.sleep(60)
+        await db.sync_from_hub()
+        await db.sync_to_hub()
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    global ensemble_system
+    await db.init_db()
+    
+    sync_task = asyncio.create_task(background_sync())
+    
+    try:
+        from ensemble import EnsembleModel
+        ensemble_system = EnsembleModel()
+        print("Models loaded successfully.")
+    except Exception as e:
+        print(f"Model loading failed: {e}")
+    yield
+    sync_task.cancel()
+    ensemble_system = None
 
-app = FastAPI(title="TinyML Healthcare API")
+app = FastAPI(title="TinyML Healthcare API", lifespan=lifespan)
 
 app.add_middleware(
     CORSMiddleware,
@@ -23,15 +60,8 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-ensemble_system = None
 def get_ensemble():
     global ensemble_system
-    if ensemble_system is None:
-        try:
-            from ensemble import EnsembleModel
-            ensemble_system = EnsembleModel()
-        except Exception:
-            return None
     return ensemble_system
 
 class PatientData(BaseModel):
@@ -40,68 +70,96 @@ class PatientData(BaseModel):
     Systolic_BP: float
     Diastolic_BP: float
     Body_Temp: float
-    Fall_Detection: str
     
 @app.get("/health")
 def health_check():
     return {"status": "Healthy" if get_ensemble() else "Warning - Models Offline"}
 
+def log_alert_sync(data: PatientData, conf: float):
+    try:
+        with open("alerts.log", "a") as f:
+            f.write(f"ALERT: Patient at risk! HR: {data.Heart_Rate}, SpO2: {data.SpO2_Level}, Confidence: {conf:.2f}\n")
+    except Exception:
+        pass
+
+async def log_prediction_background(data, final_pred, conf):
+    try:
+        await db.log_prediction(data, final_pred, conf)
+    except Exception as db_e:
+        print(f"DB logging skipped: {db_e}")
+
 @app.post("/predict")
-async def predict(data: PatientData):
+async def predict(data: PatientData, background_tasks: BackgroundTasks):
     try:
         eng = get_ensemble()
         if not eng:
             return {"error": "Models untrained. Ensure python backend/models.py executes."}
                 
-        df = pd.DataFrame([{
-            'Heart Rate (bpm)': data.Heart_Rate,
-            'SpO2 Level (%)': data.SpO2_Level,
-            'Systolic Blood Pressure (mmHg)': data.Systolic_BP,
-            'Diastolic Blood Pressure (mmHg)': data.Diastolic_BP,
-            'Body Temperature (°C)': data.Body_Temp,
-            'Fall Detection': data.Fall_Detection
-        }])
+        from inference import evaluate
+        result = await asyncio.to_thread(evaluate, eng, data)
         
-        X_proc, _ = await asyncio.to_thread(preprocess_data, df, False)
-        final_pred, conf, ind_preds, ind_probs, weights = await asyncio.to_thread(eng.predict, X_proc)
-        
-        is_at_risk = 0 if final_pred == "Healthy" else 1
+        if "error" in result:
+            return result
+            
+        is_at_risk = result["prediction"]
+        final_pred = result["prediction_label"]
+        conf = result["probability"]
         
         # Critical Alert System — fault-tolerant
         if is_at_risk == 1 and float(conf) > 0.80:
-            try:
-                with open("alerts.log", "a") as f:
-                    f.write(f"ALERT: Patient at risk! HR: {data.Heart_Rate}, SpO2: {data.SpO2_Level}, Confidence: {conf:.2f}\n")
-            except Exception:
-                pass
+            background_tasks.add_task(log_alert_sync, data, float(conf))
                 
         # Log to SQLite History — fault-tolerant
-        try:
-            await asyncio.to_thread(log_prediction, data, final_pred, float(conf))
-        except Exception as db_e:
-            print(f"DB logging skipped: {db_e}")
+        background_tasks.add_task(log_prediction_background, data, final_pred, float(conf))
         
-        return {
-            "prediction": is_at_risk,
-            "prediction_label": final_pred,
-            "probability": float(conf),
-            "ensemble_prediction": is_at_risk,
-            "model_outputs": ind_preds,
-            "model_probs": {k: float(np.max(v)) for k, v in ind_probs.items()},
-            "weights": weights
-        }
+        return result
     except Exception as e:
         import traceback
-        from fastapi import HTTPException
         raise HTTPException(status_code=500, detail=f"Backend Error: {str(e)}\n\nTraceback:\n{traceback.format_exc()}")
 
+@app.websocket("/ws/feed")
+async def websocket_feed(websocket: WebSocket):
+    await websocket.accept()
+    
+    eng = get_ensemble()
+    if not eng:
+        await websocket.close(code=1011)
+        return
+        
+    from simulator import PatientDataSimulator
+    simulator = PatientDataSimulator()
+    
+    try:
+        async for state in simulator.run():
+            data = PatientData(**state)
+            
+            prediction_result = await asyncio.to_thread(evaluate, eng, data)
+            
+            front_pred = None
+            if "error" not in prediction_result:
+                front_pred = {
+                    "is_at_risk": 1 if prediction_result["prediction"] else 0,
+                    "label": prediction_result["prediction_label"],
+                    "confidence": prediction_result["probability"],
+                    "disease_probs": prediction_result.get("disease_probs", {})
+                }
+            
+            await websocket.send_json({
+                "sensor_data": data.model_dump(),
+                "prediction": front_pred
+            })
+    except WebSocketDisconnect:
+        pass
+    except Exception as e:
+        print(f"WS error: {e}")
+
 @app.get("/history")
-def history():
-    return get_history()
+async def history():
+    return await db.get_history()
 
 @app.get("/dataset")
-async def get_dataset():
-    data_path = '/app/data/patient_dataset.csv' if os.path.exists('/app/data') else '../data/patient_dataset.csv' if os.path.exists('../data') else 'data/patient_dataset.csv'
+def get_dataset():
+    data_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', 'data', 'patient_dataset.csv')
     if os.path.exists(data_path):
         try:
             # Force UTF-8 and strip column whitespace
@@ -129,8 +187,7 @@ async def explain(data: PatientData):
         'SpO2 Level (%)': data.SpO2_Level,
         'Systolic Blood Pressure (mmHg)': data.Systolic_BP,
         'Diastolic Blood Pressure (mmHg)': data.Diastolic_BP,
-        'Body Temperature (°C)': data.Body_Temp,
-        'Fall Detection': data.Fall_Detection
+        'Body Temperature (°C)': data.Body_Temp
     }])
     
     X_proc, _ = await asyncio.to_thread(preprocess_data, df, False)
@@ -157,336 +214,23 @@ async def explain(data: PatientData):
 
 @app.get("/export_tinyml")
 def export_tinyml(model_name: str = "rf", quantize: bool = False):
-    import numpy as np
     eng = get_ensemble()
-    if not eng or model_name not in eng.models:
-        return {"error": f"Model {model_name} not found"}
-        
-    model = eng.models[model_name]
-    
-    # m2cgen handles Random Forest beautifully, but outputs FP32/double rules
-    if model_name == "rf":
-        try:
-            code = m2c.export_to_c(model)
-            if quantize:
-                code = "/* WARNING: M2CGen generated FP32 output. INT8 Quantization is not supported directly for Random Forest trees. */\n" + code
-            return {"code": code}
-        except Exception:
-            pass
-            
-    # For LogReg, use m2cgen if FP32, otherwise manual generation for INT8
-    if not quantize and model_name == "logreg":
-        try:
-            code = m2c.export_to_c(model)
-            return {"code": code}
-        except Exception:
-            pass
-    
-    # Manual C-code generation for all model types
-    try:
-        L = []
-        L.append("/* ====================================================== */")
-        L.append(f"/* TinyML C Export: {model_name}                           */")
-        q_text = "INT8 Quantized" if quantize else "FP32 Double"
-        L.append(f"/* Auto-generated for ARM Cortex-M / ESP32 ({q_text}) */")
-        L.append("/* ====================================================== */")
-        L.append("")
-        L.append("#include <math.h>")
-        L.append("#include <stdint.h>")
-        L.append("#include <string.h>")
-        L.append("")
-        
-        if model_name == "svm" and hasattr(model, 'coef_'):
-            coefs = model.coef_
-            intercepts = model.intercept_
-            n_classes = len(model.classes_)
-            n_features = coefs.shape[1]
-            L.append(f"/* Linear SVM with {n_classes} classes, {n_features} features */")
-            L.append(f"#define N_FEATURES {n_features}")
-            L.append(f"#define N_CLASSES {n_classes}")
-            L.append(f"#define N_HYPERPLANES {coefs.shape[0]}")
-            L.append("")
-
-            if quantize:
-                scale_factor = 127.0 / max(np.max(np.abs(coefs)), np.max(np.abs(intercepts)), 1e-6)
-                L.append(f"/* Quantization Scale: {scale_factor:.4f} */")
-                L.append("static const int8_t SVM_COEF[N_HYPERPLANES][N_FEATURES] = {")
-                for row in coefs:
-                    vals = ", ".join([str(int(round(v * scale_factor))) for v in row])
-                    L.append(f"    {{{vals}}},")
-                L.append("};")
-                L.append("")
-                vals = ", ".join([str(int(round(v * scale_factor))) for v in intercepts])
-                L.append(f"static const int8_t SVM_INTERCEPT[N_HYPERPLANES] = {{{vals}}};")
-                L.append("")
-                L.append("int predict(int8_t *features) {")
-                L.append("    int32_t scores[N_CLASSES] = {0};")
-                L.append("    int h = 0;")
-                L.append("    for (int i = 0; i < N_CLASSES; i++) {")
-                L.append("        for (int j = i + 1; j < N_CLASSES; j++) {")
-                L.append("            int32_t decision = SVM_INTERCEPT[h];")
-                L.append("            for (int f = 0; f < N_FEATURES; f++) {")
-                L.append("                decision += (int32_t)SVM_COEF[h][f] * features[f];")
-                L.append("            }")
-                L.append("            if (decision > 0) scores[i] += 1;")
-                L.append("            else scores[j] += 1;")
-                L.append("            h++;")
-                L.append("        }")
-                L.append("    }")
-                L.append("    int best = 0;")
-                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
-                L.append("        if (scores[c] > scores[best]) best = c;")
-                L.append("    }")
-                L.append("    return best;")
-                L.append("}")
-            else:
-                L.append("static const double SVM_COEF[N_HYPERPLANES][N_FEATURES] = {")
-                for row in coefs:
-                    vals = ", ".join([f"{v:.6f}" for v in row])
-                    L.append(f"    {{{vals}}},")
-                L.append("};")
-                L.append("")
-                vals = ", ".join([f"{v:.6f}" for v in intercepts])
-                L.append(f"static const double SVM_INTERCEPT[N_HYPERPLANES] = {{{vals}}};")
-                L.append("")
-                L.append("int predict(double *features) {")
-                L.append("    double scores[N_CLASSES] = {0};")
-                L.append("    int h = 0;")
-                L.append("    for (int i = 0; i < N_CLASSES; i++) {")
-                L.append("        for (int j = i + 1; j < N_CLASSES; j++) {")
-                L.append("            double decision = SVM_INTERCEPT[h];")
-                L.append("            for (int f = 0; f < N_FEATURES; f++) {")
-                L.append("                decision += SVM_COEF[h][f] * features[f];")
-                L.append("            }")
-                L.append("            if (decision > 0) scores[i] += 1.0;")
-                L.append("            else scores[j] += 1.0;")
-                L.append("            h++;")
-                L.append("        }")
-                L.append("    }")
-                L.append("    int best = 0;")
-                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
-                L.append("        if (scores[c] > scores[best]) best = c;")
-                L.append("    }")
-                L.append("    return best;")
-                L.append("}")
+    return generate_c_code(eng, model_name, quantize)
 
-        elif model_name == "logreg" and hasattr(model, 'coef_'):
-            coefs = model.coef_
-            intercepts = model.intercept_
-            n_classes = coefs.shape[0] if len(model.classes_) > 2 else 2
-            n_features = coefs.shape[1]
-            L.append(f"/* Logistic Regression with {n_classes} classes, {n_features} features */")
-            L.append(f"#define N_FEATURES {n_features}")
-            L.append(f"#define N_CLASSES {coefs.shape[0]}")
-            L.append("")
-            
-            if quantize:
-                scale_factor = 127.0 / max(np.max(np.abs(coefs)), np.max(np.abs(intercepts)), 1e-6)
-                L.append(f"/* Quantization Scale: {scale_factor:.4f} */")
-                L.append("static const int8_t LOGREG_COEF[N_CLASSES][N_FEATURES] = {")
-                for row in coefs:
-                    vals = ", ".join([str(int(round(v * scale_factor))) for v in row])
-                    L.append(f"    {{{vals}}},")
-                L.append("};")
-                L.append("")
-                vals = ", ".join([str(int(round(v * scale_factor))) for v in intercepts])
-                L.append(f"static const int8_t LOGREG_INTERCEPT[N_CLASSES] = {{{vals}}};")
-                L.append("")
-                L.append("int predict(int8_t *features) {")
-                L.append("    int32_t scores[N_CLASSES];")
-                L.append("    for (int c = 0; c < N_CLASSES; c++) {")
-                L.append(f"        scores[c] = LOGREG_INTERCEPT[c] * {int(scale_factor)};")
-                L.append("        for (int f = 0; f < N_FEATURES; f++) {")
-                L.append("            scores[c] += (int32_t)LOGREG_COEF[c][f] * features[f];")
-                L.append("        }")
-                L.append("    }")
-                L.append("    int best = 0;")
-                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
-                L.append("        if (scores[c] > scores[best]) best = c;")
-                L.append("    }")
-                L.append("    return best;")
-                L.append("}")
-            else:
-                L.append("static const double LOGREG_COEF[N_CLASSES][N_FEATURES] = {")
-                for row in coefs:
-                    vals = ", ".join([f"{v:.6f}" for v in row])
-                    L.append(f"    {{{vals}}},")
-                L.append("};")
-                L.append("")
-                vals = ", ".join([f"{v:.6f}" for v in intercepts])
-                L.append(f"static const double LOGREG_INTERCEPT[N_CLASSES] = {{{vals}}};")
-                L.append("")
-                L.append("int predict(double *features) {")
-                L.append("    double scores[N_CLASSES];")
-                L.append("    for (int c = 0; c < N_CLASSES; c++) {")
-                L.append("        scores[c] = LOGREG_INTERCEPT[c];")
-                L.append("        for (int f = 0; f < N_FEATURES; f++) {")
-                L.append("            scores[c] += LOGREG_COEF[c][f] * features[f];")
-                L.append("        }")
-                L.append("    }")
-                L.append("    int best = 0;")
-                L.append("    for (int c = 1; c < N_CLASSES; c++) {")
-                L.append("        if (scores[c] > scores[best]) best = c;")
-                L.append("    }")
-                L.append("    return best;")
-                L.append("}")
-
-        elif model_name == "small_nn" and hasattr(model, 'coefs_'):
-            layers = model.coefs_
-            biases = model.intercepts_
-            arch = " -> ".join([str(l.shape[0]) for l in layers] + [str(layers[-1].shape[1])])
-            L.append(f"/* MLP Neural Network: {len(layers)} layers */")
-            L.append(f"/* Architecture: {arch} */")
-            L.append("")
-            
-            for idx, (W, b) in enumerate(zip(layers, biases)):
-                n_in, n_out = W.shape
-                L.append(f"#define L{idx}_IN {n_in}")
-                L.append(f"#define L{idx}_OUT {n_out}")
-                L.append(f"static const double W{idx}[{n_in}][{n_out}] = {{")
-                for row in W:
-                    vals = ", ".join([f"{v:.6f}" for v in row])
-                    L.append(f"    {{{vals}}},")
-                L.append("};")
-                bvals = ", ".join([f"{v:.6f}" for v in b])
-                L.append(f"static const double B{idx}[{n_out}] = {{{bvals}}};")
-                L.append("")
-            
-            L.append("static inline double relu(double x) { return x > 0 ? x : 0; }")
-            L.append("")
-
-            if quantize:
-                # Calculate global max for int8 scaling
-                max_val = max([np.max(np.abs(w)) for w in layers] + [np.max(np.abs(b)) for b in biases] + [1e-6])
-                scale_factor = 127.0 / max_val
-                L.append(f"/* INT8 Quantization Scale Factor: {scale_factor:.4f} */")
-                for idx, (W, b) in enumerate(zip(layers, biases)):
-                    n_in, n_out = W.shape
-                    L.append(f"static const int8_t W{idx}[{n_in}][{n_out}] = {{")
-                    for row in W:
-                        vals = ", ".join([str(int(round(v * scale_factor))) for v in row])
-                        L.append(f"    {{{vals}}},")
-                    L.append("};")
-                    bvals = ", ".join([str(int(round(v * scale_factor))) for v in b])
-                    L.append(f"static const int8_t B{idx}[{n_out}] = {{{bvals}}};")
-                    L.append("")
-                L.append("static inline int32_t relu_int(int32_t x) { return x > 0 ? x : 0; }")
-                L.append("")
-                L.append("int predict(int8_t *input) {")
-                for idx in range(len(layers)):
-                    n_in = layers[idx].shape[0]
-                    n_out = layers[idx].shape[1]
-                    is_last = (idx == len(layers) - 1)
-                    src = "input" if idx == 0 else f"a{idx-1}"
-                    L.append(f"    int32_t a{idx}[{n_out}];")
-                    L.append(f"    for (int j = 0; j < {n_out}; j++) {{")
-                    L.append(f"        a{idx}[j] = B{idx}[j] * {int(scale_factor)}; /* scale bias */")
-                    L.append(f"        for (int i = 0; i < {n_in}; i++) {{")
-                    L.append(f"            a{idx}[j] += (int32_t){src}[i] * W{idx}[i][j];")
-                    L.append(f"        }}")
-                    if not is_last:
-                        L.append(f"        a{idx}[j] = relu_int(a{idx}[j]) / {int(scale_factor)}; /* rescale */")
-                    L.append(f"    }}")
-                last_idx = len(layers) - 1
-                last_out = layers[-1].shape[1]
-                L.append(f"    int best = 0;")
-                L.append(f"    for (int c = 1; c < {last_out}; c++) {{")
-                L.append(f"        if (a{last_idx}[c] > a{last_idx}[best]) best = c;")
-                L.append(f"    }}")
-                L.append(f"    return best;")
-                L.append("}")
-            else:
-                for idx, (W, b) in enumerate(zip(layers, biases)):
-                    n_in, n_out = W.shape
-                    L.append(f"#define L{idx}_IN {n_in}")
-                    L.append(f"#define L{idx}_OUT {n_out}")
-                    L.append(f"static const double W{idx}[{n_in}][{n_out}] = {{")
-                    for row in W:
-                        vals = ", ".join([f"{v:.6f}" for v in row])
-                        L.append(f"    {{{vals}}},")
-                    L.append("};")
-                    bvals = ", ".join([f"{v:.6f}" for v in b])
-                    L.append(f"static const double B{idx}[{n_out}] = {{{bvals}}};")
-                    L.append("")
-
-            L.append("static inline double relu(double x) { return x > 0 ? x : 0; }")
-            L.append("")
-            L.append("int predict(double *input) {")
-            for idx in range(len(layers)):
-                n_in = layers[idx].shape[0]
-                n_out = layers[idx].shape[1]
-                is_last = (idx == len(layers) - 1)
-                src = "input" if idx == 0 else f"a{idx-1}"
-                L.append(f"    double a{idx}[{n_out}];")
-                L.append(f"    for (int j = 0; j < {n_out}; j++) {{")
-                L.append(f"        a{idx}[j] = B{idx}[j];")
-                L.append(f"        for (int i = 0; i < {n_in}; i++) {{")
-                L.append(f"            a{idx}[j] += {src}[i] * W{idx}[i][j];")
-                L.append(f"        }}")
-                if not is_last:
-                    L.append(f"        a{idx}[j] = relu(a{idx}[j]);")
-                L.append(f"    }}")
-            
-            last_idx = len(layers) - 1
-            last_out = layers[-1].shape[1]
-            L.append(f"    int best = 0;")
-            L.append(f"    for (int c = 1; c < {last_out}; c++) {{")
-            L.append(f"        if (a{last_idx}[c] > a{last_idx}[best]) best = c;")
-            L.append(f"    }}")
-            L.append(f"    return best;")
-            L.append("}")
-            
-        elif model_name == "knn" and hasattr(model, '_fit_X'):
-            n_samples = min(model._fit_X.shape[0], 100)
-            n_feats = model._fit_X.shape[1]
-            L.append(f"/* KNN Lookup Table: {n_samples} reference samples */")
-            L.append(f"#define N_NEIGHBORS {model.n_neighbors}")
-            L.append(f"#define N_SAMPLES {n_samples}")
-            L.append(f"#define N_FEATURES {n_feats}")
-            L.append("")
-            L.append("static const double REF[N_SAMPLES][N_FEATURES] = {")
-            for row in model._fit_X[:n_samples]:
-                vals = ", ".join([f"{v:.4f}" for v in row])
-                L.append(f"    {{{vals}}},")
-            L.append("};")
-            L.append("")
-            labels_str = ", ".join([str(int(l)) for l in model._y[:n_samples]])
-            L.append(f"static const int LABELS[N_SAMPLES] = {{{labels_str}}};")
-            L.append("")
-            L.append("int predict(double *features) {")
-            L.append("    double dists[N_SAMPLES];")
-            L.append("    for (int i = 0; i < N_SAMPLES; i++) {")
-            L.append("        dists[i] = 0.0;")
-            L.append("        for (int f = 0; f < N_FEATURES; f++) {")
-            L.append("            double d = features[f] - REF[i][f];")
-            L.append("            dists[i] += d * d;")
-            L.append("        }")
-            L.append("    }")
-            L.append("    int votes[10] = {0};")
-            L.append("    for (int k = 0; k < N_NEIGHBORS; k++) {")
-            L.append("        int mi = 0;")
-            L.append("        for (int i = 1; i < N_SAMPLES; i++) {")
-            L.append("            if (dists[i] < dists[mi]) mi = i;")
-            L.append("        }")
-            L.append("        votes[LABELS[mi]]++;")
-            L.append("        dists[mi] = 1e18;")
-            L.append("    }")
-            L.append("    int best = 0;")
-            L.append("    for (int i = 1; i < 10; i++) {")
-            L.append("        if (votes[i] > votes[best]) best = i;")
-            L.append("    }")
-            L.append("    return best;")
-            L.append("}")
-        else:
-            return {"error": f"Model {model_name} cannot be exported to C."}
-        
-        return {"code": "\n".join(L)}
+def run_training_background():
+    try:
+        from models import train_models
+        train_models()
+        # Force reload in lifespan is tricky, but we can do it via global
+        global ensemble_system
+        from ensemble import EnsembleModel
+        ensemble_system = EnsembleModel()
     except Exception as e:
-        return {"error": f"Export failed: {str(e)}"}
+        print(f"Background training failed: {e}")
 
 @app.post("/retrain")
-async def retrain(file: UploadFile = File(...)):
-    data_path = '/app/data/patient_dataset.csv' if os.path.exists('/app/data') else '../data/patient_dataset.csv' if os.path.exists('../data') else 'data/patient_dataset.csv'
+async def retrain(background_tasks: BackgroundTasks, file: UploadFile = File(...)):
+    data_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', 'data', 'patient_dataset.csv')
     os.makedirs(os.path.dirname(data_path), exist_ok=True)
     
     try:
@@ -496,7 +240,7 @@ async def retrain(file: UploadFile = File(...)):
         new_df.columns = [c.strip() for c in new_df.columns]
         
         if os.path.exists(data_path):
-            existing_df = pd.read_csv(data_path)
+            existing_df = pd.read_csv(data_path, encoding='utf-8')
             existing_df.columns = [c.strip() for c in existing_df.columns]
             
             # Validate schema
@@ -518,12 +262,8 @@ async def retrain(file: UploadFile = File(...)):
         # Save validated and combined dataset
         combined_df.to_csv(data_path, index=False, encoding='utf-8')
         
-        from models import train_models
-        await asyncio.to_thread(train_models)
-        
-        global ensemble_system
-        ensemble_system = None
+        background_tasks.add_task(run_training_background)
         
-        return {"status": "success", "message": f"Dataset updated (now {len(combined_df)} records) and ensemble retrained successfully!"}
+        return {"status": "success", "message": f"Dataset updated (now {len(combined_df)} records) and ensemble retrain started in background!"}
     except Exception as e:
         return {"error": f"Retraining failed: {str(e)}"}

backend/models.py

@@ -12,12 +12,12 @@ sys.path.append(os.path.dirname(os.path.abspath(__file__)))
 from preprocessing import get_train_test_split, resolve_model_dir
 
 def train_models():
-    data_path = '/app/data/patient_dataset.csv' if os.path.exists('/app/data') else '../data/patient_dataset.csv' if os.path.exists('../data') else 'data/patient_dataset.csv'
+    data_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', 'data', 'patient_dataset.csv')
     model_dir = resolve_model_dir()
     os.makedirs(model_dir, exist_ok=True)
     
     print("Loading data...")
-    df = pd.read_csv(data_path)
+    df = pd.read_csv(data_path, encoding='utf-8')
     X_train, X_test, y_train, y_test = get_train_test_split(df)
     
     models = {

backend/preprocessing.py

@@ -4,17 +4,18 @@ import os
 import joblib
 from sklearn.model_selection import train_test_split
 from sklearn.preprocessing import StandardScaler, LabelEncoder
+from sklearn.impute import SimpleImputer
 
 def resolve_model_dir():
-    # Resolve relative paths universally whether Docker or local execution
-    return '/app/model' if os.path.exists('/app/model') else '../model' if os.path.exists('../model') else 'model'
+    return os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', 'model')
 
 def preprocess_data(df, is_training=True):
     model_dir = resolve_model_dir()
     scaler_path = f'{model_dir}/scaler.pkl'
     label_encoder_path = f'{model_dir}/label_encoder.pkl'
+    imputer_path = f'{model_dir}/imputer.pkl'
         
-    columns_to_drop = ['Patient Number', 'Data Accuracy (%)', 'Heart Rate Alert', 'SpO2 Level Alert', 'Blood Pressure Alert', 'Temperature Alert']
+    columns_to_drop = ['Patient Number', 'Data Accuracy (%)', 'Heart Rate Alert', 'SpO2 Level Alert', 'Blood Pressure Alert', 'Temperature Alert', 'Fall Detection']
     cols_drop = [c for c in columns_to_drop if c in df.columns]
     X_raw = df.drop(columns=cols_drop)
     
@@ -36,21 +37,30 @@ def preprocess_data(df, is_training=True):
             else:
                 y = y_raw 
     
+    # Fix broken encoding column names safely
+    X_raw.rename(columns=lambda x: x.replace('', '°') if isinstance(x, str) else x, inplace=True)
+    
     if 'Fall Detection' in X_raw.columns:
         X_raw['Fall Detection'] = X_raw['Fall Detection'].map({'Yes': 1, 'No': 0}).fillna(0)
         
-    X_raw.fillna(X_raw.mean(), inplace=True)
-    
     # Engineered Feature
     X_raw['Risk_Severity'] = (X_raw['Heart Rate (bpm)'] > 105).astype(int) + (X_raw['SpO2 Level (%)'] < 94).astype(int)
     
     continuous_features = ['Heart Rate (bpm)', 'SpO2 Level (%)', 'Systolic Blood Pressure (mmHg)', 'Diastolic Blood Pressure (mmHg)', 'Body Temperature (°C)', 'Risk_Severity']
     
     if is_training:
+        imputer = SimpleImputer(strategy='mean')
+        X_raw[continuous_features] = imputer.fit_transform(X_raw[continuous_features])
+        joblib.dump(imputer, imputer_path)
+        
         scaler = StandardScaler()
         X_raw[continuous_features] = scaler.fit_transform(X_raw[continuous_features])
         joblib.dump(scaler, scaler_path)
     else:
+        if os.path.exists(imputer_path):
+            imputer = joblib.load(imputer_path)
+            X_raw[continuous_features] = imputer.transform(X_raw[continuous_features])
+            
         if os.path.exists(scaler_path):
             scaler = joblib.load(scaler_path)
             X_raw[continuous_features] = scaler.transform(X_raw[continuous_features])

backend/requirements.txt

@@ -1,9 +1,12 @@
-fastapi==0.103.1
-uvicorn==0.23.2
-pydantic==2.4.2
-scikit-learn==1.3.0
-pandas==2.1.0
-numpy==1.25.2
-shap==0.42.1
-m2cgen==0.10.0
-sqlalchemy
+fastapi
+uvicorn
+pydantic
+scikit-learn==1.8.0
+pandas
+numpy
+shap
+m2cgen
+huggingface-hub
+websockets
+aiosqlite
+python-multipart

backend/simulator.py

@@ -0,0 +1,57 @@
+import asyncio
+import random
+from typing import AsyncGenerator
+
+class PatientDataSimulator:
+    def __init__(self, initial_hr=75.0, initial_spo2=98.0, initial_sys=120.0, initial_dia=80.0, initial_temp=37.0):
+        self.hr = initial_hr
+        self.spo2 = initial_spo2
+        self.sys_bp = initial_sys
+        self.dia_bp = initial_dia
+        self.temp = initial_temp
+        
+        self.target_hr = self.hr
+        self.target_spo2 = self.spo2
+        self.target_sys = self.sys_bp
+        self.target_dia = self.dia_bp
+
+    def _shift_state(self):
+        # 5% chance every second to shift patient state
+        if random.random() < 0.05:
+            state = random.choice(["normal", "normal", "normal", "asthma", "hypertension", "heart_disease", "diabetes"])
+            if state == "normal":
+                self.target_hr, self.target_spo2, self.target_sys, self.target_dia = 75.0, 98.0, 120.0, 80.0
+            elif state == "asthma":
+                self.target_hr, self.target_spo2, self.target_sys, self.target_dia = 115.0, 88.0, 135.0, 85.0
+            elif state == "hypertension":
+                self.target_hr, self.target_spo2, self.target_sys, self.target_dia = 90.0, 97.0, 175.0, 105.0
+            elif state == "heart_disease":
+                self.target_hr, self.target_spo2, self.target_sys, self.target_dia = 135.0, 91.0, 150.0, 95.0
+            elif state == "diabetes":
+                self.target_hr, self.target_spo2, self.target_sys, self.target_dia = 85.0, 96.0, 140.0, 90.0
+
+    def _step_physics(self):
+        # Interpolate towards target with noise
+        self.hr += (self.target_hr - self.hr) * 0.1 + random.uniform(-2, 2)
+        self.spo2 += (self.target_spo2 - self.spo2) * 0.1 + random.uniform(-0.5, 0.5)
+        self.sys_bp += (self.target_sys - self.sys_bp) * 0.1 + random.uniform(-1, 1)
+        self.dia_bp += (self.target_dia - self.dia_bp) * 0.1 + random.uniform(-1, 1)
+        self.temp = max(36.0, min(39.0, self.temp + random.uniform(-0.1, 0.1)))
+        
+        # Clamp values
+        self.hr = max(50.0, min(180.0, self.hr))
+        self.spo2 = max(80.0, min(100.0, self.spo2))
+
+    async def run(self) -> AsyncGenerator[dict, None]:
+        while True:
+            self._shift_state()
+            self._step_physics()
+            
+            yield {
+                "Heart_Rate": round(self.hr, 1),
+                "SpO2_Level": round(self.spo2, 1),
+                "Systolic_BP": round(self.sys_bp, 1),
+                "Diastolic_BP": round(self.dia_bp, 1),
+                "Body_Temp": round(self.temp, 1)
+            }
+            await asyncio.sleep(1.0)

backend/tests/test_api.py

@@ -0,0 +1,29 @@
+import pytest
+from fastapi.testclient import TestClient
+import sys
+import os
+
+sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+from main import app
+
+client = TestClient(app)
+
+def test_history_endpoint():
+    response = client.get("/history")
+    assert response.status_code == 200
+    assert isinstance(response.json(), list)
+
+def test_dataset_endpoint():
+    response = client.get("/dataset")
+    assert response.status_code == 200
+    assert isinstance(response.json(), list)
+
+def test_export_tinyml_random_forest():
+    response = client.get("/export_tinyml?model_name=rf")
+    
+    if response.status_code == 200:
+        data = response.json()
+        if "error" in data:
+            assert "not found" in data["error"].lower()
+        else:
+            assert "code" in data or "c_code" in data

docker-compose.yml

@@ -2,22 +2,28 @@ version: '3.8'
 
 services:
   backend:
-    build: 
-      context: .
-      dockerfile: backend/Dockerfile
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
     ports:
       - "8000:8000"
+    environment:
+      - HF_TOKEN=${HF_TOKEN:-}
     volumes:
-      - ./model:/app/model
-      - ./data:/app/data
+      # Mount DB for persistence (in production use a volume, here bind-mount is okay for dev)
+      - backend_data:/app
 
   frontend:
     build:
-      context: .
-      dockerfile: frontend/Dockerfile
+      context: ./frontend
+      dockerfile: Dockerfile
     ports:
-      - "8501:8501"
+      - "3000:3000"
     environment:
-      - API_URL=http://backend:8000
+      # Next.js will build this at build-time, but here it is for client-side API requests
+      - NEXT_PUBLIC_API_URL=http://localhost:8000
     depends_on:
       - backend
+
+volumes:
+  backend_data:

frontend/Dockerfile

@@ -1,11 +1,20 @@
-FROM python:3.11-slim
+FROM node:20-alpine AS deps
 WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
 
-RUN apt-get update && apt-get install -y graphviz && rm -rf /var/lib/apt/lists/*
-
-COPY frontend/requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-WORKDIR /app/frontend
-EXPOSE 8501
-CMD sh -c "streamlit run Home.py --server.port=${PORT:-8501} --server.address=0.0.0.0"
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "server.js"]

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,11 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "export",
+  // basePath: "/TinyML-Heart-Health-Monitoring-Dashboard", // Uncomment if hosted on a subpath in GitHub Pages
+  images: {
+    unoptimized: true, // Required for static export
+  }
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "framer-motion": "^13.4.4",
+    "lucide-react": "^1.48.0",
+    "next": "16.3.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/src/app/analytics/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Database, LineChart, Table2, Layers } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+export default function Analytics() {
+  const [dataset, setDataset] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch((process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000") + "/dataset")
+      .then((res) => res.json())
+      .then((data) => {
+        setDataset(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, []);
+
+  const spring = {
+    type: "spring" as const,
+    stiffness: 100,
+    damping: 20,
+  };
+
+  const columns = dataset.length > 0 ? Object.keys(dataset[0]) : [];
+
+  return (
+    <main className="min-h-[100dvh] relative overflow-hidden bg-canvas">
+      <nav className="h-16 flex items-center px-8 border-b border-hairline bg-canvas/80 backdrop-blur-md sticky top-0 z-50">
+        <div className="max-w-[1200px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-display text-xl text-ink font-light tracking-[-0.02em]">TinyML Core</Link>
+          <div className="flex gap-6 items-center text-[15px] font-medium tracking-tight">
+            <Link href="/dashboard" className="text-muted hover:text-ink transition-colors">Live Monitor</Link>
+            <Link href="/history" className="text-muted hover:text-ink transition-colors">History</Link>
+            <Link href="/mlops" className="text-muted hover:text-ink transition-colors">MLOps</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1200px] mx-auto px-8 py-24 relative">
+        <div className="absolute top-0 right-1/4 w-[30vw] h-[30vw] rounded-full bg-gradient-sky opacity-20 blur-[80px] -z-10" />
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={spring}
+          className="mb-12 flex justify-between items-end"
+        >
+          <div>
+            <h1 className="font-display text-[48px] font-light tracking-[-0.02em] text-ink leading-[1.08] mb-4">
+              Dataset Explorer
+            </h1>
+            <p className="font-sans text-[16px] text-body max-w-2xl leading-relaxed tracking-[0.01em]">
+              Preview the current ground-truth telemetry used for training the TinyML models.
+            </p>
+          </div>
+          <div className="flex gap-4">
+            <div className="px-4 py-2 bg-canvas-soft border border-hairline-soft rounded-full flex items-center text-sm font-medium text-ink">
+              <Layers className="w-4 h-4 mr-2 text-muted" />
+              {columns.length} Features
+            </div>
+            <div className="px-4 py-2 bg-surface-card border border-hairline rounded-full flex items-center text-sm font-medium text-ink shadow-[0_4px_16px_rgba(0,0,0,0.02)]">
+              <Database className="w-4 h-4 mr-2 text-muted" />
+              {dataset.length} Rows
+            </div>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ ...spring, delay: 0.1 }}
+          className="bg-surface-card rounded-xl border border-hairline shadow-[0_4px_16px_rgba(0,0,0,0.04)] overflow-hidden flex flex-col h-[600px]"
+        >
+          <div className="p-4 border-b border-hairline-soft flex items-center justify-between bg-canvas-soft">
+            <h2 className="font-sans text-[14px] font-medium text-ink flex items-center gap-2">
+              <Table2 size={16} className="text-muted" /> Raw Tabular View
+            </h2>
+          </div>
+          <div className="flex-grow overflow-auto relative bg-surface-card">
+            <table className="w-full text-left text-[14px]">
+              <thead className="bg-canvas-soft sticky top-0 z-10 border-b border-hairline text-muted font-medium text-[12px] uppercase tracking-[0.06em]">
+                <tr>
+                  {columns.map(col => (
+                    <th key={col} className="px-6 py-4 font-medium whitespace-nowrap">
+                      {col}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-hairline-soft text-ink">
+                {loading ? (
+                  <tr>
+                    <td colSpan={columns.length || 1} className="px-6 py-12 text-center text-muted">
+                      Loading dataset...
+                    </td>
+                  </tr>
+                ) : dataset.length === 0 ? (
+                  <tr>
+                    <td colSpan={columns.length || 1} className="px-6 py-12 text-center text-muted">
+                      No dataset available. Upload one in MLOps.
+                    </td>
+                  </tr>
+                ) : (
+                  dataset.slice(0, 100).map((row, i) => (
+                    <tr key={i} className="hover:bg-canvas-soft/50 transition-colors">
+                      {columns.map(col => (
+                        <td key={col} className="px-6 py-3 whitespace-nowrap">
+                          {typeof row[col] === 'number' && !Number.isInteger(row[col]) 
+                            ? row[col].toFixed(2) 
+                            : String(row[col])}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+            {!loading && dataset.length > 100 && (
+              <div className="p-4 text-center text-[13px] text-muted-soft border-t border-hairline-soft">
+                Showing first 100 rows.
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </main>
+  );
+}

frontend/src/app/architecture/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+
+export default function Architecture() {
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase hidden md:flex">
+            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1000px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
+        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+          <div>
+            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+              /// DOCS_AND_SPECS
+            </div>
+            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+              SYSTEM<br />ARCHITECTURE
+            </h1>
+          </div>
+        </header>
+
+        <div className="border-2 border-ink bg-white p-8 mb-8">
+          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+            [ 01 ] Client Plane (Frontend)
+          </h2>
+          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
+            Engineered using Next.js 16 (App Router) and React 19. The UI adheres strictly to an Industrial Brutalist aesthetic utilizing hard grids, monochromatic blueprints, and high-contrast hazard states. Native WebSockets handle high-frequency telemetry without HTTP overhead, rendered via hardware-accelerated SVG paths in framer-motion.
+          </p>
+        </div>
+
+        <div className="border-2 border-ink bg-white p-8 mb-8">
+          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+            [ 02 ] Core Plane (Backend)
+          </h2>
+          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
+            Built on FastAPI (Python 3.10+) maximizing async throughput. A state-machine driven data simulator generates correlated, volatile telemetry streams representing clinical episodes. Storage employs aiosqlite for non-blocking database writes to track historical classifications without stalling the event loop.
+          </p>
+        </div>
+
+        <div className="border-2 border-ink bg-white p-8 mb-8">
+          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+            [ 03 ] Intelligence Pipeline (MLOps)
+          </h2>
+          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
+            Live patient data is standardized and imputed using a persistent SimpleImputer and StandardScaler. Clinical precision is achieved via a 5-model soft-voting ensemble. The `/retrain` pipeline allows dynamic CSV uploads, imputes missing data, trains models in background threads, and hot-swaps the EnsembleModel globally with zero downtime.
+          </p>
+        </div>
+
+        <div className="border-2 border-ink bg-white p-8 mb-8">
+          <h2 className="text-[18px] font-sans font-black tracking-[-0.02em] uppercase text-ink mb-6 border-b-2 border-ink pb-4">
+            [ 04 ] Edge Compilation (TinyML)
+          </h2>
+          <p className="text-[14px] text-slate uppercase leading-relaxed mb-4">
+            The backend transpiles trained SciKit-Learn tree models directly into standalone zero-dependency C-headers. Floating-point thresholds are mathematically quantized to INT8, effectively shrinking the flashed payload by ~75%. Designed to execute directly on MCU SRAM without dynamic memory allocation.
+          </p>
+        </div>
+      </div>
+      
+      <footer className="w-full border-t-2 border-ink bg-white py-6 px-8 mt-auto">
+        <div className="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink">
+            © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
+          </div>
+          <div className="flex items-center gap-8">
+            <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-hazard border-b border-hazard">ARCHITECTURE.MD</Link>
+            <a href={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
+            <a href="https://github.com/IDKHowToCodeFR/TinyML-Heart-Health-Monitoring-Dashboard" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

frontend/src/app/dashboard/page.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useTelemetry } from "@/context/TelemetryContext";
+
+export default function Dashboard() {
+  const { data, stream } = useTelemetry();
+
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
+            <Link href="/dashboard" className="text-hazard border-b-2 border-hazard pb-1">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
+        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+          <div>
+            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+              /// TELEMETRY_STREAM_ACTIVE
+            </div>
+            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+              PATIENT<br />TELEMETRY
+            </h1>
+          </div>
+          <div className="text-right hidden md:block">
+            <div className="text-[14px] font-bold uppercase tracking-[0.05em] border-2 border-ink px-4 py-2 bg-ink text-canvas-cream">
+              STATUS: {data ? "CONNECTED" : "AWAITING SIGNAL"}
+            </div>
+          </div>
+        </header>
+
+        {/* Dashboard Grid - Brutalist Tables */}
+        <div className="grid grid-cols-1 bg-ink border-2 border-ink" aria-live="polite">
+          
+          {/* Main Status Panel */}
+          <div className="bg-canvas-cream flex flex-col">
+            <div className="border-b-2 border-ink p-4 flex justify-between items-center bg-white">
+              <h2 className="text-[14px] font-bold tracking-[0.05em]">{'< LIVE_VITALS >'}</h2>
+              {data?.prediction ? (
+                (() => {
+                  const getStatusStyles = (label: string) => {
+                    const normalized = (label || "").toLowerCase();
+                    if (normalized === 'healthy' || normalized === 'normal') return "bg-[#d1fae5] text-[#065f46] border-[#065f46]";
+                    if (normalized.includes('heart')) return "bg-[#fef08a] text-[#854d0e] border-[#854d0e]";
+                    if (normalized.includes('asthma')) return "bg-[#e0f2fe] text-[#075985] border-[#075985]";
+                    if (normalized.includes('hypertension')) return "bg-[#f3e8ff] text-[#6b21a8] border-[#6b21a8]";
+                    if (normalized.includes('diabetes')) return "bg-[#ffedd5] text-[#9a3412] border-[#9a3412]";
+                    return "bg-hazard text-white border-hazard"; 
+                  };
+                  return (
+                    <div className={`px-4 py-2 text-[14px] font-bold uppercase tracking-[0.05em] border-2 ${getStatusStyles(data.prediction.label)}`}>
+                      {data.prediction.is_at_risk ? '[!]' : '[OK]'} {data.prediction.label} ({(data.prediction.confidence * 100).toFixed(1)}%)
+                    </div>
+                  );
+                })()
+              ) : (
+                <div className="px-4 py-2 text-[14px] font-bold tracking-[0.05em] border-2 border-ink text-slate">
+                  INITIALIZING...
+                </div>
+              )}
+            </div>
+
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-ink border-b-2 border-ink">
+              <VitalCard label="HEART_RATE" value={data?.sensor_data?.Heart_Rate ? Math.round(data.sensor_data.Heart_Rate) : "---"} unit="BPM" />
+              <VitalCard label="O2_SATURATION" value={data?.sensor_data?.SpO2_Level ? Math.round(data.sensor_data.SpO2_Level) : "---"} unit="%" />
+              <VitalCard label="BLOOD_PRESSURE" value={data?.sensor_data ? `${Math.round(data.sensor_data.Systolic_BP)}/${Math.round(data.sensor_data.Diastolic_BP)}` : null} unit="MMHG" />
+              <VitalCard label="CORE_TEMP" value={data?.sensor_data?.Body_Temp ? data.sensor_data.Body_Temp.toFixed(1) : "---"} unit="°C" />
+            </div>
+            
+            {/* 2-Column Mini Graphs */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-px bg-ink border-b-2 border-ink h-[160px]">
+              <div className="bg-white p-3 flex flex-col"><div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-2">HR_STREAM</div><div className="flex-1 min-h-0 relative"><TelemetryGraph stream={stream.hr} min={60} max={150} color="var(--color-ink)" fill="rgba(5,5,5,0.05)" /></div></div>
+              <div className="bg-white p-3 flex flex-col"><div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-2">TEMP_STREAM</div><div className="flex-1 min-h-0 relative"><TelemetryGraph stream={stream.temp} min={36.0} max={39.0} color="var(--color-ink)" fill="rgba(5,5,5,0.05)" /></div></div>
+            </div>
+
+            {/* Diagnostic Probabilities */}
+            <div className="bg-white flex flex-col min-h-[280px]">
+              <div className="border-b-2 border-ink p-3 px-6 flex justify-between items-center bg-canvas-cream">
+                <h2 className="text-[12px] font-bold tracking-[0.1em] uppercase">{'< DIAGNOSTIC_PROBABILITIES >'}</h2>
+                <div className="text-[11px] font-bold tracking-[0.05em] text-hazard uppercase">CLASS / LIKELIHOOD</div>
+              </div>
+              <div className="flex-grow p-6 bg-white flex flex-col justify-center gap-6">
+                {data?.prediction?.disease_probs ? (
+                   Object.entries(data.prediction.disease_probs)
+                     .sort((a, b) => (b[1] as number) - (a[1] as number))
+                     .map(([disease, prob]) => {
+                        const pct = ((prob as number) * 100).toFixed(1);
+                        const isRisk = (prob as number) > 0.4 && disease.toLowerCase() !== 'normal' && disease.toLowerCase() !== 'healthy';
+                        return (
+                          <div key={disease} className="flex flex-col gap-2">
+                            <div className="flex justify-between text-[12px] font-bold uppercase tracking-[0.1em]">
+                               <span className={isRisk ? "text-hazard drop-shadow-[0_0_2px_rgba(230,25,25,0.5)]" : "text-ink"}>{disease}</span>
+                               <span className="tabular-nums">{pct}%</span>
+                            </div>
+                            <div className="h-6 bg-canvas-cream border-2 border-ink overflow-hidden relative">
+                              {/* Blueprint tick marks */}
+                              <div className="absolute inset-0 z-0 opacity-20" style={{ backgroundImage: 'linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '10% 100%' }}></div>
+                              <motion.div 
+                                className={`h-full relative z-10 ${isRisk ? 'bg-hazard shadow-[0_0_8px_var(--hazard-red)]' : 'bg-ink'}`}
+                                initial={{ width: "0%" }}
+                                animate={{ width: `${pct}%` }}
+                                transition={{ duration: 0.5, ease: "easeOut" }}
+                              />
+                            </div>
+                          </div>
+                        )
+                     })
+                ) : (
+                  <div className="h-full flex items-center justify-center text-[12px] font-bold text-slate tracking-[0.1em] animate-pulse">
+                    AWAITING CLASSIFICATION DATA...
+                  </div>
+                )}
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function VitalCard({ label, value, unit }: { label: string, value: string | number | null | undefined, unit: string }) {
+  return (
+    <div className="bg-canvas-cream p-8 flex flex-col hover:bg-white transition-colors cursor-default overflow-hidden">
+      <div className="text-[11px] font-bold text-slate tracking-[0.1em] border-b border-ink/20 pb-2 mb-4">
+        {label}
+      </div>
+      <div>
+        <div className="font-sans text-[clamp(40px,3.5vw,60px)] font-black tracking-tighter tabular-nums leading-none mb-1 break-all">
+          {value !== null && value !== undefined ? value : "---"}
+        </div>
+        <div className="text-[12px] font-bold tracking-[0.05em] text-hazard">
+          [{unit}]
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TelemetryGraph({ stream, min, max, color, fill }: { stream: number[], min: number, max: number, color: string, fill: string }) {
+  const range = max - min;
+  
+  const points = stream.map((val, i) => {
+    const x = (i / (stream.length - 1)) * 100;
+    const y = Math.max(0, Math.min(100, 100 - (((val - min) / range) * 100)));
+    return `${x},${y}`;
+  });
+
+  const firstY = points[0] ? points[0].split(',')[1] : 100;
+  const pathD = `M 0,100 L 0,${firstY} L ${points.join(" L ")} L 100,100 Z`;
+  const lineD = `M 0,${firstY} L ${points.join(" L ")}`;
+  const lastPoint = points[points.length - 1];
+  const lastY = lastPoint ? lastPoint.split(',')[1] : 100;
+
+  return (
+    <div className="w-full h-full absolute inset-0 border-2 border-ink overflow-hidden bg-white group relative">
+      {/* Blueprint Grid lines */}
+      <div className="absolute inset-0 z-0 opacity-[0.1]" style={{ backgroundImage: 'linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>
+      
+      {/* Signal trace */}
+      <div className="absolute inset-0 z-10 overflow-hidden">
+        <svg className="w-full h-full block" viewBox="0 0 100 100" preserveAspectRatio="none">
+          {/* Fill Area */}
+          <path 
+            d={pathD} 
+            fill={fill} 
+            className="transition-all duration-300 ease-linear"
+          />
+          {/* Stroke Line (Glow) */}
+          <path 
+            d={lineD} 
+            fill="none" 
+            stroke={color} 
+            strokeWidth="1.5" 
+            vectorEffect="non-scaling-stroke"
+            className="transition-all duration-300 ease-linear"
+            style={{ filter: `drop-shadow(0 0 4px ${color})` }}
+          />
+          {/* Leading Dot */}
+          <circle 
+            cx="100" 
+            cy={lastY} 
+            r="1.5" 
+            fill={color} 
+            className="transition-all duration-300 ease-linear"
+            style={{ filter: `drop-shadow(0 0 4px ${color})` }}
+          />
+        </svg>
+      </div>
+
+      {/* Sweeping Radar Line */}
+      <motion.div 
+        className="absolute top-0 bottom-0 w-[2px] z-20 opacity-40 pointer-events-none"
+        style={{ backgroundColor: color, boxShadow: `0 0 12px 2px ${color}` }}
+        initial={{ left: "0%" }}
+        animate={{ left: "100%" }}
+        transition={{ duration: 1.5, ease: "linear", repeat: Infinity }}
+      />
+      
+      {/* Terminal Scanline Overlay */}
+      <div className="absolute inset-0 pointer-events-none z-30 opacity-40 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.2)_50%)] bg-[length:100%_4px]"></div>
+    </div>
+  );
+}

frontend/src/app/edge/page.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+export default function EdgeDeployment() {
+  const [model, setModel] = useState("rf");
+  const [code, setCode] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleExport = async () => {
+    setLoading(true);
+    setCode("");
+    setError("");
+    
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/export_tinyml?model_name=${model}`);
+      if (!res.ok) throw new Error("Failed to export model");
+      
+      const data = await res.json();
+      if (data.error) throw new Error(data.error);
+      
+      setCode(data.code || data.c_code || "/* No C-code returned */");
+    } catch (err: any) {
+      setError(err.message || "Unknown error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownload = () => {
+    if (!code) return;
+    const blob = new Blob([code], { type: "text/x-csrc" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `model_${model}.h`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
+            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+            <Link href="/edge" className="text-hazard border-b-2 border-hazard pb-1">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
+        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+          <div>
+            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+              /// C_COMPILER_TOOLCHAIN
+            </div>
+            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+              EDGE<br />DEPLOYMENT
+            </h1>
+          </div>
+        </header>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-px bg-ink border-2 border-ink">
+          {/* Config Panel */}
+          <div className="lg:col-span-4 bg-white flex flex-col border-b-2 lg:border-b-0 lg:border-r-2 border-ink p-8">
+            <div className="border-b-2 border-ink pb-4 mb-6">
+              <h2 className="text-[16px] font-bold tracking-[0.05em] uppercase text-ink">{'< BUILD_CONFIG >'}</h2>
+              <p className="text-[13px] text-slate uppercase mt-2">Select target architecture.</p>
+            </div>
+            
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col gap-3">
+                <label htmlFor="arch-select" className="text-[11px] font-bold uppercase tracking-[0.1em] text-slate">TARGET_MCU</label>
+                <select 
+                  id="arch-select"
+                  className="w-full bg-canvas-cream border-2 border-ink px-4 py-3 text-[14px] font-bold uppercase outline-none focus-visible:bg-ink focus-visible:text-white transition-colors"
+                >
+                  <option value="arm">ARM CORTEX-M4F</option>
+                  <option value="esp32">ESP32-S3 (XTENSA)</option>
+                  <option value="rp2040">RP2040 (CORTEX-M0+)</option>
+                </select>
+              </div>
+
+              <div className="flex flex-col gap-3">
+                <label htmlFor="model-select" className="text-[11px] font-bold uppercase tracking-[0.1em] text-slate">SOURCE_MODEL</label>
+                <select 
+                  id="model-select"
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                  className="w-full bg-canvas-cream border-2 border-ink px-4 py-3 text-[14px] font-bold uppercase outline-none focus-visible:bg-ink focus-visible:text-white transition-colors"
+                >
+                  <option value="rf">RANDOM_FOREST (REC)</option>
+                  <option value="knn">K_NEAREST_NEIGHBORS</option>
+                  <option value="svm">SUPPORT_VECTOR_MACHINE</option>
+                  <option value="logreg">LOGISTIC_REGRESSION</option>
+                  <option value="small_nn">SMALL_NEURAL_NETWORK</option>
+                </select>
+              </div>
+
+              <div className="flex flex-col gap-3">
+                <label htmlFor="opt-select" className="text-[11px] font-bold uppercase tracking-[0.1em] text-slate">OPTIMIZATION_LEVEL</label>
+                <select 
+                  id="opt-select"
+                  className="w-full bg-canvas-cream border-2 border-ink px-4 py-3 text-[14px] font-bold uppercase outline-none focus-visible:bg-ink focus-visible:text-white transition-colors"
+                >
+                  <option value="o3">-O3 (MAX SPEED)</option>
+                  <option value="os">-OS (MIN SIZE)</option>
+                  <option value="o0">-O0 (DEBUG)</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="mt-auto pt-8">
+              <button 
+                onClick={handleExport}
+                disabled={loading}
+                className="inline-flex items-center justify-center h-16 w-full bg-hazard text-white text-[16px] font-bold uppercase tracking-[0.2em] border-[3px] border-ink hover:translate-y-[2px] hover:translate-x-[2px] shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-y-[4px] active:translate-x-[4px] active:shadow-none transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? 'COMPILING...' : 'COMPILE TO C >>'}
+              </button>
+            </div>
+          </div>
+
+          {/* Output Panel */}
+          <div className="lg:col-span-8 bg-canvas-cream flex flex-col p-8 h-[600px]">
+            <div className="flex justify-between items-center border-b-2 border-ink pb-4 mb-6">
+              <div className="flex flex-col gap-2">
+                <h2 className="text-[16px] font-bold tracking-[0.05em] uppercase text-ink flex items-center gap-2">
+                  {'< OUTPUT_BUFFER >'}
+                </h2>
+                {code && (
+                  <div className="flex gap-6 text-[10px] font-bold tracking-[0.15em] text-slate uppercase">
+                    <span>SIZE: {code.length} B ({(code.length / 1024).toFixed(2)} KB)</span>
+                    <span>LINES: {code.split('\n').length}</span>
+                    <span>MD5_CHK: 0x{Array.from(code).reduce((h, c) => Math.imul(31, h) + c.charCodeAt(0) | 0, 0).toString(16).toUpperCase().padStart(8, '0').slice(-8)}</span>
+                  </div>
+                )}
+              </div>
+              {code && (
+                <button 
+                  onClick={handleDownload}
+                  className="inline-flex items-center px-4 py-2 bg-transparent border-2 border-ink text-ink text-[12px] font-bold uppercase tracking-[0.05em] hover:bg-ink hover:text-white transition-colors"
+                >
+                  [ DOWNLOAD .H ]
+                </button>
+              )}
+            </div>
+
+            <div className="flex-grow bg-white border-2 border-ink overflow-auto relative p-4">
+              {error ? (
+                <div className="absolute inset-0 flex items-center justify-center text-hazard font-bold text-[14px] uppercase p-4 text-center">
+                  [ERR] {error}
+                </div>
+              ) : code ? (
+                <pre className="text-[12px] font-mono text-ink leading-[1.6] whitespace-pre" tabIndex={0}>
+                  {code}
+                </pre>
+              ) : (
+                <div className="absolute inset-0 flex items-center justify-center text-slate text-[13px] font-bold uppercase tracking-[0.05em]">
+                  AWAITING_COMPILATION...
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/src/app/globals.css

@@ -0,0 +1,60 @@
+@import "tailwindcss";
+
+:root {
+  --canvas-cream: #FBFBFA;
+  --ink-black: #141413;
+  --slate-gray: #696969;
+  --hazard-red: #9F2F2D;
+  --white: #FFFFFF;
+  --whisper: #EAEAEA;
+  --risk-bg: #FDEBEC;
+  --healthy-bg: #EDF3EC;
+  --healthy-text: #346538;
+  --soft-bone: #F4F4F4;
+}
+
+@theme inline {
+  --color-canvas-cream: var(--canvas-cream);
+  --color-ink: var(--ink-black);
+  --color-slate: var(--slate-gray);
+  --color-hazard: var(--hazard-red);
+  --color-whisper: var(--whisper);
+  --color-risk-bg: var(--risk-bg);
+  --color-healthy-bg: var(--healthy-bg);
+  --color-healthy-text: var(--healthy-text);
+  --color-soft-bone: var(--soft-bone);
+  
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+}
+
+* {
+  border-radius: 0 !important;
+}
+
+body {
+  background-color: var(--canvas-cream);
+  color: var(--ink-black);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Macro Typography Scaling */
+h1 {
+  font-family: var(--font-sans);
+  font-weight: 800;
+  color: var(--ink-black);
+  letter-spacing: -0.04em;
+  line-height: 0.9;
+  text-transform: uppercase;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  color: var(--ink-black);
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+}

frontend/src/app/history/page.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface HistoryRecord {
+  id: number;
+  timestamp: string;
+  heart_rate: number;
+  spo2: number;
+  sys_bp: number;
+  dia_bp: number;
+  body_temp?: number;
+  temp?: number;
+  prediction?: string;
+  prediction_label?: string;
+  confidence: number;
+}
+
+export default function PatientHistory() {
+  const [records, setRecords] = useState<HistoryRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch((process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000") + "/history")
+      .then((res) => res.json())
+      .then((data) => {
+        setRecords(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
+            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-hazard border-b-2 border-hazard pb-1">DATA.LOG</Link>
+            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
+        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+          <div>
+            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+              /// HISTORICAL_RECORDS
+            </div>
+            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+              PREDICTION<br />LOG
+            </h1>
+          </div>
+          <div className="text-right hidden md:block">
+            <div className="text-[14px] font-bold uppercase tracking-[0.05em] border-2 border-ink px-4 py-2 bg-ink text-canvas-cream tabular-nums">
+              ROWS: {records.length}
+            </div>
+          </div>
+        </header>
+
+        <div className="border-2 border-ink bg-ink">
+          <div className="overflow-x-auto bg-canvas-cream">
+            <table className="w-full text-left">
+              <thead className="bg-ink text-white font-bold text-[12px] tracking-[0.1em] uppercase">
+                <tr>
+                  <th className="px-6 py-4 border-r-2 border-canvas-cream/20">TIMESTAMP</th>
+                  <th className="px-6 py-4 border-r-2 border-canvas-cream/20">HR</th>
+                  <th className="px-6 py-4 border-r-2 border-canvas-cream/20">SPO2</th>
+                  <th className="px-6 py-4 border-r-2 border-canvas-cream/20">BP</th>
+                  <th className="px-6 py-4 border-r-2 border-canvas-cream/20">TEMP</th>
+                  <th className="px-6 py-4 border-r-2 border-canvas-cream/20">STATUS</th>
+                  <th className="px-6 py-4">CONFIDENCE</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y-2 divide-ink text-ink font-bold text-[13px] uppercase">
+                {loading ? (
+                  <tr>
+                    <td colSpan={7} className="px-6 py-12 text-center bg-white text-slate">
+                      QUERYING_DATABASE...
+                    </td>
+                  </tr>
+                ) : records.length === 0 ? (
+                  <tr>
+                    <td colSpan={7} className="px-6 py-12 text-center bg-white text-slate">
+                      NO_RECORDS_FOUND.
+                    </td>
+                  </tr>
+                ) : (
+                  records.map((record) => {
+                    const date = new Date(record.timestamp);
+                    const predLabel = record.prediction_label || record.prediction || "UNKNOWN";
+                    const isRisk = predLabel.toLowerCase().includes("risk") || predLabel.toLowerCase() !== "healthy";
+                    const temperature = record.temp || record.body_temp || "—";
+                    
+                    const getStatusStyles = (label: string) => {
+                      const normalized = label.toLowerCase();
+                      if (normalized === 'healthy') return "bg-[#d1fae5] text-[#065f46]"; // Light green
+                      if (normalized.includes('heart')) return "bg-[#fef08a] text-[#854d0e]"; // Light yellow
+                      if (normalized.includes('asthma')) return "bg-[#e0f2fe] text-[#075985]"; // Light blue
+                      if (normalized.includes('hypertension')) return "bg-[#f3e8ff] text-[#6b21a8]"; // Light purple
+                      if (normalized.includes('diabetes')) return "bg-[#ffedd5] text-[#9a3412]"; // Light orange
+                      return "bg-hazard/20 text-hazard"; // Default risk red
+                    };
+
+                    return (
+                      <tr key={record.id} className="hover:bg-canvas-cream transition-colors bg-white tabular-nums">
+                        <td className="px-6 py-4 whitespace-nowrap border-r-2 border-ink">
+                          {date.toLocaleString()}
+                        </td>
+                        <td className="px-6 py-4 border-r-2 border-ink">{record.heart_rate}</td>
+                        <td className="px-6 py-4 border-r-2 border-ink">{record.spo2}</td>
+                        <td className="px-6 py-4 border-r-2 border-ink">{record.sys_bp}/{record.dia_bp}</td>
+                        <td className="px-6 py-4 border-r-2 border-ink">{temperature}</td>
+                        <td className={`px-6 py-4 border-r-2 border-ink ${getStatusStyles(predLabel)}`}>
+                          {isRisk ? '[!] ' : '✓ '}{predLabel}
+                        </td>
+                        <td className="px-6 py-4">
+                          {(record.confidence * 100).toFixed(1)}%
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { TelemetryProvider } from "@/context/TelemetryContext";
+
+const geistSans = Geist({
+  variable: "--font-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "TinyML Heart Health",
+  description: "Cardiovascular monitoring dashboard",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <TelemetryProvider>
+          {children}
+        </TelemetryProvider>
+      </body>
+    </html>
+  );
+}

frontend/src/app/mlops/page.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+export default function MLOps() {
+  const [file, setFile] = useState<File | null>(null);
+  const [status, setStatus] = useState<"idle" | "uploading" | "success" | "error">("idle");
+  const [message, setMessage] = useState("");
+
+  const handleUpload = async () => {
+    if (!file) return;
+    setStatus("uploading");
+    
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const res = await fetch((process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000") + "/retrain", {
+        method: "POST",
+        body: formData,
+      });
+      const data = await res.json();
+      
+      if (data.error) {
+        setStatus("error");
+        setMessage(data.error);
+      } else {
+        setStatus("success");
+        setMessage(data.message);
+      }
+    } catch (err: any) {
+      setStatus("error");
+      setMessage(err.message || "Upload failed");
+    }
+  };
+
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
+            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+            <Link href="/mlops" className="text-hazard border-b-2 border-hazard pb-1">ML.OPS</Link>
+            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1000px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
+        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+          <div>
+            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+              /// PIPELINE_CONTROL
+            </div>
+            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+              MODEL<br />OPERATIONS
+            </h1>
+          </div>
+        </header>
+
+        <div className="border-2 border-ink bg-white p-8">
+          <div className="border-b-2 border-ink pb-4 mb-8">
+            <h2 className="text-[16px] font-bold tracking-[0.05em] uppercase text-ink">{'< BATCH_RETRAIN >'}</h2>
+            <p className="text-[13px] text-slate uppercase mt-2">Append telemetry data and rebuild the edge ensemble.</p>
+          </div>
+
+          <div className="flex flex-col gap-6">
+            <label 
+              htmlFor="dropzone-file" 
+              className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-ink bg-canvas-cream hover:bg-hazard hover:text-white transition-colors cursor-pointer group"
+            >
+              <div className="flex flex-col items-center justify-center pt-5 pb-6">
+                <div className="text-[24px] font-bold mb-4 group-hover:text-white">
+                  {file ? '[ FILE_SELECTED ]' : '[ SELECT_CSV ]'}
+                </div>
+                <p className="mb-2 text-[14px] font-bold uppercase">
+                  {file ? file.name : "CLICK TO UPLOAD DATASET"}
+                </p>
+                <p className="text-[12px] uppercase opacity-70">REQUIRES MATCHING SCHEMA</p>
+              </div>
+              <input 
+                id="dropzone-file" 
+                type="file" 
+                className="sr-only" 
+                accept=".csv"
+                onChange={(e) => setFile(e.target.files?.[0] || null)}
+                aria-label="Upload CSV Dataset"
+              />
+            </label>
+
+            <div className="flex justify-between items-center border-t-2 border-ink pt-6 mt-2" aria-live="polite">
+              <div className="text-[13px] font-bold uppercase tracking-[0.05em]">
+                {status === "uploading" && <span className="text-slate">PROCESSING...</span>}
+                {status === "error" && <span className="text-hazard">ERR: {message}</span>}
+                {status === "success" && <span className="text-ink bg-canvas-cream px-2 py-1 border border-ink">SYS: {message}</span>}
+              </div>
+              
+              <button 
+                onClick={handleUpload}
+                disabled={!file || status === "uploading"}
+                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink hover:bg-hazard hover:border-hazard transition-colors disabled:opacity-50 disabled:pointer-events-none"
+              >
+                EXECUTE &gt;&gt;
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase hidden md:flex">
+            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section className="max-w-[1400px] mx-auto w-full px-8 pt-32 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-16 flex-1">
+        <div className="lg:col-span-7 flex flex-col justify-center">
+          <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-6 flex items-center gap-4">
+            <span>/// MODEL_V2.0</span>
+            <span className="w-12 h-px bg-hazard"></span>
+            <span>INT8_QUANTIZED</span>
+          </div>
+          
+          <h1 className="text-[clamp(4rem,8vw,8rem)] mb-8">
+            CLINICAL<br />
+            INFERENCE<br />
+            <span className="text-hazard">AT THE EDGE.</span>
+          </h1>
+
+          <p className="text-[16px] text-ink max-w-lg leading-relaxed uppercase tracking-[0.02em] font-bold border-l-4 border-hazard pl-6 mb-12">
+            An ensemble intelligence pipeline engineered for resource-constrained microcontrollers. Deploy robust cardiovascular telemetry analysis directly to the silicon.
+          </p>
+
+          <div className="flex flex-wrap items-center gap-4">
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink hover:bg-hazard hover:border-hazard transition-colors"
+            >
+              [ INITIATE_STREAM ]
+            </Link>
+            <Link
+              href="/edge"
+              className="inline-flex items-center justify-center h-12 px-8 bg-transparent text-ink text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink hover:bg-ink hover:text-white transition-colors"
+            >
+              C_COMPILER &gt;&gt;
+            </Link>
+          </div>
+        </div>
+
+        {/* Feature Grid */}
+        <div className="lg:col-span-5 grid grid-cols-1 gap-px bg-ink border-2 border-ink mt-8 lg:mt-0">
+          <div className="bg-white p-8 flex flex-col justify-between">
+            <div className="text-[10px] text-slate font-bold tracking-[0.15em] mb-4">FEAT.01</div>
+            <div>
+              <h3 className="font-sans text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
+                INT8 Quantization
+              </h3>
+              <p className="text-[13px] text-slate leading-relaxed uppercase">
+                Weights scaled to 8-bit integers. 75% payload reduction for ESP32 constraint matrices.
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-canvas-cream p-8 flex flex-col justify-between">
+            <div className="text-[10px] text-slate font-bold tracking-[0.15em] mb-4">FEAT.02</div>
+            <div>
+              <h3 className="font-sans text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
+                Ensemble Architecture
+              </h3>
+              <p className="text-[13px] text-slate leading-relaxed uppercase">
+                RF, KNN, and SVM combined with a meta-classifier for clinical-grade precision.
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-white p-8 flex flex-col justify-between">
+            <div className="text-[10px] text-slate font-bold tracking-[0.15em] mb-4">FEAT.03</div>
+            <div>
+              <h3 className="font-sans text-[24px] font-black uppercase tracking-[-0.02em] mb-2 text-ink">
+                Zero-Dep Export
+              </h3>
+              <p className="text-[13px] text-slate leading-relaxed uppercase">
+                Compile trained models directly to standalone C headers. Zero dynamic allocation.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Minimal Footer */}
+      <footer className="w-full border-t-2 border-ink bg-white py-6 px-8">
+        <div className="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink">
+            © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
+          </div>
+          <div className="flex items-center gap-8">
+            <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">ARCHITECTURE.MD</Link>
+            <a href={`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
+            <a href="https://github.com/IDKHowToCodeFR/TinyML-Heart-Health-Monitoring-Dashboard" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
+          </div>
+        </div>
+      </footer>
+    </main>
+  );
+}

frontend/src/app/simulator/page.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import ShapChart from "@/components/ShapChart";
+
+export default function Analysis() {
+  const [formData, setFormData] = useState({
+    Heart_Rate: 75,
+    SpO2_Level: 98,
+    Systolic_BP: 120,
+    Diastolic_BP: 80,
+    Body_Temp: 37.0
+  });
+
+  useEffect(() => {
+    setFormData({
+      Heart_Rate: Math.floor(Math.random() * (140 - 60 + 1)) + 60,
+      SpO2_Level: Math.floor(Math.random() * (100 - 90 + 1)) + 90,
+      Systolic_BP: Math.floor(Math.random() * (160 - 90 + 1)) + 90,
+      Diastolic_BP: Math.floor(Math.random() * (100 - 60 + 1)) + 60,
+      Body_Temp: Number((Math.random() * (39.5 - 36.0) + 36.0).toFixed(1))
+    });
+  }, []);
+
+  const [submittedData, setSubmittedData] = useState<any>(null);
+  const [prediction, setPrediction] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handlePredict = async () => {
+    setLoading(true);
+    setPrediction(null);
+    setSubmittedData(null);
+    
+    try {
+      const res = await fetch((process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000") + "/predict", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(formData)
+      });
+      const data = await res.json();
+      setPrediction(data);
+      setSubmittedData(formData);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
+      {/* Top Nav (Mechanical) */}
+      <nav className="h-16 flex items-center px-8 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50">
+        <div className="max-w-[1400px] mx-auto w-full flex justify-between items-center">
+          <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase">
+            [ HEARTFLOW_OS ]
+          </Link>
+          <div className="flex gap-8 items-center text-[13px] font-bold tracking-[0.05em] uppercase">
+            <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
+            <Link href="/simulator" className="text-hazard border-b-2 border-hazard pb-1">AI.SIMULATOR</Link>
+            <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
+            <Link href="/mlops" className="text-ink hover:text-hazard transition-colors">ML.OPS</Link>
+            <Link href="/edge" className="text-ink hover:text-hazard transition-colors">EDGE.COMPILER</Link>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col">
+        <header className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
+          <div>
+            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+              /// EXPLAINABLE_AI_MODULE
+            </div>
+            <h1 className="text-[clamp(3rem,6vw,6rem)]">
+              MODEL<br />SIMULATOR
+            </h1>
+          </div>
+          <div className="text-right hidden md:block max-w-sm">
+            <div className="text-[14px] font-bold uppercase tracking-[0.05em] border-2 border-ink px-4 py-2 bg-ink text-canvas-cream text-left">
+              MANUAL OVERRIDE. INPUT CUSTOM TELEMETRY TO TEST ENSEMBLE CLASSIFIER AND VIEW SHAPLEY FEATURE IMPORTANCE VECTORS.
+            </div>
+          </div>
+        </header>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-px bg-ink border-2 border-ink">
+          
+          {/* Input Panel */}
+          <div className="lg:col-span-5 bg-canvas-cream flex flex-col">
+            <div className="border-b-2 border-ink p-4 bg-white flex justify-between items-center">
+              <h2 className="text-[14px] font-bold tracking-[0.05em]">{'< MANUAL_INPUT_MATRIX >'}</h2>
+            </div>
+            
+            <div className="p-8 flex flex-col gap-8 flex-grow">
+              <InputControl label="HEART_RATE (BPM)" value={formData.Heart_Rate} min={40} max={200} onChange={(v: number) => setFormData({...formData, Heart_Rate: v})} />
+              <InputControl label="SPO2_LEVEL (%)" value={formData.SpO2_Level} min={70} max={100} onChange={(v: number) => setFormData({...formData, SpO2_Level: v})} />
+              <InputControl label="SYSTOLIC_BP (MMHG)" value={formData.Systolic_BP} min={80} max={220} onChange={(v: number) => setFormData({...formData, Systolic_BP: v})} />
+              <InputControl label="DIASTOLIC_BP (MMHG)" value={formData.Diastolic_BP} min={40} max={140} onChange={(v: number) => setFormData({...formData, Diastolic_BP: v})} />
+              <InputControl label="BODY_TEMP (°C)" value={formData.Body_Temp} min={30} max={42} step={0.1} onChange={(v: number) => setFormData({...formData, Body_Temp: v})} />
+              
+              <button 
+                onClick={handlePredict}
+                disabled={loading}
+                className="mt-6 border-[3px] border-ink bg-hazard text-white py-6 font-bold text-[18px] tracking-[0.2em] shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:translate-y-[2px] hover:translate-x-[2px] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-y-[6px] active:translate-x-[6px] active:shadow-none transition-all disabled:opacity-50 disabled:cursor-not-allowed uppercase"
+              >
+                {loading ? 'PROCESSING_REQUEST...' : '[ EXECUTE_INFERENCE ]'}
+              </button>
+
+              {/* Terminal Readout to fill empty space */}
+              <div className="mt-8 flex-grow border-[3px] border-ink bg-ink text-[#4AF626] p-0 flex flex-col min-h-[150px] shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] relative overflow-hidden group">
+                {/* CRT Scanline Overlay */}
+                <div className="absolute inset-0 pointer-events-none opacity-10 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(255,255,255,0.1)_2px,rgba(255,255,255,0.1)_4px)] z-10" />
+                
+                <div className="text-[10px] font-bold tracking-[0.2em] text-ink bg-white border-b-[3px] border-ink px-4 py-3 flex justify-between uppercase">
+                  <span>RAW_PAYLOAD_PREVIEW</span>
+                  <span>{JSON.stringify(formData).length} BYTES // SYS_READY</span>
+                </div>
+                
+                <div className="p-6 flex-grow flex flex-col relative z-0">
+                  <pre className="text-[12px] font-mono whitespace-pre-wrap flex-grow overflow-auto leading-relaxed">
+{`{
+  "Heart_Rate": ${formData.Heart_Rate},
+  "SpO2_Level": ${formData.SpO2_Level},
+  "Systolic_BP": ${formData.Systolic_BP},
+  "Diastolic_BP": ${formData.Diastolic_BP},
+  "Body_Temp": ${formData.Body_Temp.toFixed(1)}
+}`}
+                    <span className="inline-block w-2 h-4 bg-[#4AF626] animate-pulse ml-1 align-middle" />
+                  </pre>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Results Panel */}
+          <div className="lg:col-span-7 bg-canvas-cream flex flex-col">
+            <div className="border-b-2 border-ink p-4 bg-white flex justify-between items-center">
+              <h2 className="text-[14px] font-bold tracking-[0.05em]">{'< INFERENCE_RESULTS_&_XAI >'}</h2>
+            </div>
+            
+            <div className="flex-grow flex flex-col relative bg-white">
+              {/* Blueprint Grid Background */}
+              <div className="absolute inset-0 z-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
+              
+              <div className="z-10 p-8 flex flex-col h-full">
+                {prediction ? (
+                  <>
+                    <div className="mb-12">
+                      <div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-4">MODEL_OUTPUT</div>
+                      
+                      {(() => {
+                        const getStatusStyles = (label: string) => {
+                          const normalized = (label || "").toLowerCase();
+                          if (normalized === 'healthy' || normalized === 'normal') return "bg-[#d1fae5] text-[#065f46] border-[#065f46]";
+                          if (normalized.includes('heart')) return "bg-[#fef08a] text-[#854d0e] border-[#854d0e]";
+                          if (normalized.includes('asthma')) return "bg-[#e0f2fe] text-[#075985] border-[#075985]";
+                          if (normalized.includes('hypertension')) return "bg-[#f3e8ff] text-[#6b21a8] border-[#6b21a8]";
+                          if (normalized.includes('diabetes')) return "bg-[#ffedd5] text-[#9a3412] border-[#9a3412]";
+                          return "bg-hazard text-white border-hazard"; 
+                        };
+                        
+                        return (
+                          <div className={`border-2 p-6 flex flex-col mb-4 ${getStatusStyles(prediction.prediction === 1 ? prediction.prediction_label : 'Healthy')}`}>
+                            <div className="font-sans text-[clamp(28px,3vw,56px)] font-black tracking-tighter leading-none mb-2 uppercase break-words">
+                              {prediction.prediction === 1 ? `[!]_${prediction.prediction_label.replace(" ", "_")}` : 'NORMAL'}
+                            </div>
+                            <div className="text-[14px] font-bold tracking-[0.1em]">
+                              CONFIDENCE: {(prediction.probability * 100).toFixed(1)}%
+                            </div>
+                          </div>
+                        );
+                      })()}
+
+                      {/* Ensemble Diagnostics */}
+                      {prediction.model_outputs && (
+                        <div className="border-2 border-ink bg-white flex flex-col text-[12px] font-bold uppercase tracking-[0.05em]">
+                          <div className="border-b-2 border-ink px-4 py-2 bg-ink text-canvas-cream flex justify-between">
+                            <span>{'< ENSEMBLE_STACK_DIAGNOSTICS >'}</span>
+                            <span className="text-hazard">WEIGHTED_VOTING</span>
+                          </div>
+                          <div className="divide-y-2 divide-ink">
+                            {Object.keys(prediction.model_outputs).map(modelName => (
+                              <div key={modelName} className="flex justify-between items-center p-3 hover:bg-canvas-cream transition-colors">
+                                <div className="w-[20%] text-slate">[{modelName}]</div>
+                                <div className={`w-[40%] ${prediction.model_outputs[modelName] !== 'Healthy' ? 'text-hazard' : ''}`}>
+                                  {prediction.model_outputs[modelName] !== 'Healthy' ? '! ' + prediction.model_outputs[modelName] : 'OK Healthy'}
+                                </div>
+                                <div className="w-[20%] text-right">
+                                  CONF: {(prediction.model_probs[modelName] * 100).toFixed(1)}%
+                                </div>
+                                <div className="w-[20%] text-right text-slate">
+                                  W: {prediction.weights[modelName].toFixed(2)}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex-1 border-2 border-ink bg-white p-8 flex flex-col min-h-[300px]">
+                      <div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-6 border-b-2 border-ink pb-2">SHAPLEY_ADDITIVE_EXPLANATIONS</div>
+                      <div className="flex-1">
+                        <ShapChart patientData={submittedData} />
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  <div className="h-full flex items-center justify-center">
+                    <div className="text-slate text-[14px] font-bold tracking-[0.1em] uppercase border-2 border-slate px-6 py-4">
+                      AWAITING_INPUT...
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </main>
+  );
+}
+
+function InputControl({ label, value, min, max, step = 1, onChange }: any) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex justify-between items-end">
+        <label className="text-[13px] font-bold text-slate tracking-[0.1em]">{label}</label>
+        <span className="font-sans text-[32px] font-black leading-none tabular-nums tracking-tighter">{value}</span>
+      </div>
+      <div className="relative border-2 border-ink p-1 bg-white">
+        <input 
+          type="range" 
+          min={min} 
+          max={max} 
+          step={step}
+          value={value} 
+          onChange={(e) => onChange(Number(e.target.value))}
+          className="w-full appearance-none h-4 bg-ink/10 outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-8 [&::-webkit-slider-thumb]:bg-ink [&::-webkit-slider-thumb]:cursor-pointer relative z-10 block"
+        />
+      </div>
+    </div>
+  );
+}

frontend/src/components/ShapChart.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+export default function ShapChart({ patientData }: { patientData: any }) {
+  const [shapData, setShapData] = useState<{feature_names: string[], shap_values: number[]} | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!patientData) return;
+    
+    const fetchExplain = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch((process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000") + "/explain", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(patientData)
+        });
+        const data = await res.json();
+        if (data.shap_values) {
+          setShapData(data);
+        }
+      } catch (err) {
+        console.error("SHAP fetch error", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    
+    const timeout = setTimeout(fetchExplain, 2500);
+    return () => clearTimeout(timeout);
+  }, [patientData]);
+
+  if (!shapData) {
+    return (
+      <div className="h-full w-full flex flex-col items-center justify-center gap-3">
+        {loading ? (
+          <>
+            <Loader2 className="animate-spin text-ink" size={20} />
+            <span className="text-slate text-[12px] font-bold uppercase tracking-[0.1em]">COMPUTING_SHAP_VECTORS...</span>
+          </>
+        ) : (
+          <span className="text-slate text-[12px] font-bold uppercase tracking-[0.1em]">AWAITING_TELEMETRY...</span>
+        )}
+      </div>
+    );
+  }
+
+  // Sort by absolute magnitude of SHAP value
+  const items = shapData.feature_names.map((name, i) => ({
+    name: name.toUpperCase(),
+    value: shapData.shap_values[i],
+    abs: Math.abs(shapData.shap_values[i])
+  })).sort((a, b) => b.abs - a.abs); // show ALL features
+
+  const maxAbs = Math.max(...items.map(i => i.abs), 0.1);
+
+  return (
+    <div className="flex flex-col gap-4 w-full h-full justify-center">
+      {items.map((item, idx) => {
+        const isPositive = item.value > 0;
+        const widthPercent = (item.abs / maxAbs) * 50;
+        
+        return (
+          <div key={item.name} className="flex flex-col gap-2">
+            <div className="flex justify-between text-[11px] font-bold tracking-[0.1em]">
+              <span className="text-ink">{item.name}</span>
+              <span className={isPositive ? "text-hazard" : "text-ink"}>
+                {item.value > 0 ? "+" : ""}{item.value.toFixed(3)}
+              </span>
+            </div>
+            
+            {/* Brutalist Chart Bar */}
+            <div className="relative h-4 w-full bg-white border-2 border-ink flex items-center">
+              {/* Midline (zero axis) */}
+              <div className="absolute left-1/2 top-[-2px] bottom-[-2px] w-0.5 bg-ink z-10" />
+              
+              {/* Animated Value Bar */}
+              <motion.div 
+                initial={{ width: 0, opacity: 0 }}
+                animate={{ 
+                  width: `${widthPercent}%`,
+                  opacity: 1,
+                }}
+                transition={{ type: "spring", stiffness: 60, damping: 15 }}
+                className={`absolute h-full ${isPositive ? 'bg-hazard border-x-2 border-hazard' : 'bg-ink border-x-2 border-ink'}`}
+                style={{
+                  left: isPositive ? '50%' : 'auto',
+                  right: !isPositive ? '50%' : 'auto'
+                }}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

frontend/src/context/TelemetryContext.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+type StreamState = {
+  hr: number[];
+  temp: number[];
+};
+
+type TelemetryContextType = {
+  data: any;
+  stream: StreamState;
+};
+
+const TelemetryContext = createContext<TelemetryContextType | null>(null);
+
+export function TelemetryProvider({ children }: { children: React.ReactNode }) {
+  const [data, setData] = useState<any>(null);
+  const [stream, setStream] = useState<StreamState>({
+    hr: Array(50).fill(75),
+    temp: Array(50).fill(37.0)
+  });
+
+  useEffect(() => {
+    const ws = new WebSocket(process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8000/ws/feed");
+    ws.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+      setData(msg);
+      if (msg?.sensor_data) {
+        setStream(prev => ({
+          hr: [...prev.hr.slice(1), msg.sensor_data.Heart_Rate],
+          temp: [...prev.temp.slice(1), msg.sensor_data.Body_Temp]
+        }));
+      }
+    };
+    return () => ws.close();
+  }, []);
+
+  return (
+    <TelemetryContext.Provider value={{ data, stream }}>
+      {children}
+    </TelemetryContext.Provider>
+  );
+}
+
+export function useTelemetry() {
+  const context = useContext(TelemetryContext);
+  if (!context) {
+    throw new Error("useTelemetry must be used within a TelemetryProvider");
+  }
+  return context;
+}

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

model/classes.pkl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a72e398999fbcd2495f31ec5f28f07e8325e903d836d2f2fbef872d6da2785bb
+oid sha256:43241923778ab2ba4ee472ae79697c0730f7f325bf9d6607aea5d988fea6d7ab
 size 440

model/knn.pkl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0fd25eec3d294ae23ef7fcce62dad8c695f585a149935845bdcd4771b3271e61
-size 6440614
+oid sha256:57cf9edd90be13d04cd8a419486598f4b2ca2f2d417a584aa600d9fd7ce6647e
+size 5639846

model/label_encoder.pkl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:da67513db74567d59333258b4d1982743cfdc80e54a59feb67922e7ea1bb92a9
+oid sha256:7d8b08e681c302b1d80cba57ab678d752a3608e7787fe7fcf82c4052c5eef91e
 size 543