Initial commit: CardioScreen AI v1.0 - Canine cardiac screening tool

.gitignore

@@ -0,0 +1,33 @@
+# ── Python ──────────────────────────────────────────────────────────────────
+venv/
+__pycache__/
+*.pyc
+*.pyo
+*.egg-info/
+dist/
+*.pkl
+*.h5
+
+# ── Audio / data files (too large for git) ───────────────────────────────────
+*.mp3
+*.wav
+*.flac
+*.ogg
+dataset_raw/
+Ettinger_Tracks/
+Ettinger canine heart sound/
+weights/
+local_hf_model/
+metrics/
+
+# ── Node / Frontend ──────────────────────────────────────────────────────────
+webapp/node_modules/
+webapp/dist/
+webapp/.env.local
+
+# ── OS / Editor ──────────────────────────────────────────────────────────────
+.DS_Store
+Thumbs.db
+.vscode/
+*.log
+get-pip.py

api.py

@@ -0,0 +1,32 @@
+"""
+CardioScreen AI — FastAPI Backend
+Serves the local AI inference engine for canine cardiac screening.
+"""
+import os
+
+from fastapi import FastAPI, UploadFile, File
+from fastapi.middleware.cors import CORSMiddleware
+import uvicorn
+from inference import predict_audio
+
+app = FastAPI(title="CardioScreen AI — Canine Cardiac Screening")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+@app.post("/analyze")
+async def analyze_audio(file: UploadFile = File(...)):
+    """Receives audio from the React frontend and returns screening results."""
+    audio_bytes = await file.read()
+    print(f"Received: {file.filename}, {len(audio_bytes)} bytes", flush=True)
+    return predict_audio(audio_bytes)
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 8000))
+    print(f"Starting CardioScreen AI server on http://0.0.0.0:{port}")
+    uvicorn.run(app, host="0.0.0.0", port=port)

download_hf_model.py

@@ -0,0 +1,21 @@
+from transformers import pipeline
+import os
+
+MODEL_NAME = "cogniveon/eeem069_heart_murmur_classification"
+SAVE_PATH = "./local_hf_model"
+
+if __name__ == "__main__":
+    print(f"Downloading pre-trained High-Accuracy model: {MODEL_NAME}...")
+    # This automatically downloads the weights and config if they aren't cached
+    # and saves them explicitly to our local folder so we don't rely on the cloud API
+    
+    os.makedirs(SAVE_PATH, exist_ok=True)
+    
+    # We use pipeline to ensure the feature extractor and model are both fetched
+    classifier = pipeline("audio-classification", model=MODEL_NAME)
+    
+    print(f"Saving model to {SAVE_PATH}...")
+    classifier.model.save_pretrained(SAVE_PATH)
+    classifier.feature_extractor.save_pretrained(SAVE_PATH)
+    
+    print("Download and save successful!")

inference.py

@@ -0,0 +1,252 @@
+"""
+CardioScreen AI — Lightweight Inference Engine
+No PyTorch. No transformers. Just signal processing.
+
+Detects murmurs using spectral analysis of heart sounds:
+- Heart rate via Hilbert envelope peak detection
+- Murmur screening via frequency analysis between S1/S2 beats
+  (murmurs produce abnormal energy in 100–600 Hz between heartbeats)
+"""
+import io
+import numpy as np
+
+# Numpy 2.0 compatibility
+if not hasattr(np, 'trapz'):
+    np.trapz = np.trapezoid
+if not hasattr(np, 'in1d'):
+    np.in1d = np.isin
+
+import librosa
+import scipy.signal
+
+TARGET_SR = 16000
+
+print("CardioScreen AI engine loaded (lightweight mode)", flush=True)
+
+
+def load_audio(audio_bytes: bytes):
+    """Decode audio bytes → mono 16kHz numpy array with cardiac bandpass filter."""
+    import soundfile as sf
+    y, sr = sf.read(io.BytesIO(audio_bytes))
+
+    if len(y.shape) > 1:
+        y = np.mean(y, axis=1)
+
+    if sr != TARGET_SR:
+        y = librosa.resample(y, orig_sr=sr, target_sr=TARGET_SR)
+
+    # Cardiac bandpass filter (25–600 Hz) — covers both normal sounds AND murmurs
+    nyq = 0.5 * TARGET_SR
+    b, a = scipy.signal.butter(4, [25.0 / nyq, 600.0 / nyq], btype='band')
+    y_filtered = scipy.signal.filtfilt(b, a, y)
+
+    return librosa.util.normalize(y_filtered)
+
+
+def calculate_bpm(y, sr):
+    """Extract BPM and heartbeat count via Hilbert envelope peak detection."""
+    try:
+        envelope = np.abs(scipy.signal.hilbert(y))
+        win_len = int(0.1 * sr)
+        if win_len % 2 == 0:
+            win_len += 1
+        smooth_env = scipy.signal.savgol_filter(envelope, window_length=win_len, polyorder=3)
+
+        v_90 = np.percentile(smooth_env, 90)
+        height = v_90 * 0.5
+        min_dist = int(0.3 * sr)  # min 300ms between beats
+
+        peaks, properties = scipy.signal.find_peaks(smooth_env, distance=min_dist, height=height)
+
+        if len(peaks) < 3:
+            height = v_90 * 0.2
+            peaks, properties = scipy.signal.find_peaks(smooth_env, distance=min_dist, height=height)
+            if len(peaks) < 2:
+                return 0, 0, peaks
+
+        intervals = np.diff(peaks)
+        bpm = (60.0 * sr) / np.mean(intervals)
+        return int(max(40, min(220, bpm))), len(peaks), peaks
+    except Exception as e:
+        print(f"BPM Error: {e}", flush=True)
+        return 0, 0, np.array([])
+
+
+def detect_murmur(y, sr, peaks):
+    """
+    Murmur detection via spectral analysis of inter-beat intervals.
+    
+    Normal heart sounds (S1, S2) are brief, low-frequency thuds.
+    Murmurs are prolonged, higher-frequency sounds BETWEEN the beats.
+    
+    We analyze the spectral content between detected heartbeats:
+    - High energy ratio in 100-600Hz between beats → murmur likely
+    - Low spectral entropy → normal clean silence between beats  
+    - High spectral entropy → turbulent flow (murmur indicator)
+    """
+    if len(peaks) < 3:
+        return {
+            "label": "Insufficient Data",
+            "confidence": 0.0,
+            "is_disease": False,
+            "details": "Need at least 3 heartbeats for analysis",
+            "all_classes": [
+                {"label": "Insufficient Data", "probability": 1.0},
+            ]
+        }
+
+    # Analyze the intervals BETWEEN heartbeats
+    inter_beat_energies = []
+    inter_beat_entropies = []
+    beat_energies = []
+
+    for i in range(len(peaks) - 1):
+        # Region around the beat itself (±50ms)
+        beat_start = max(0, peaks[i] - int(0.05 * sr))
+        beat_end = min(len(y), peaks[i] + int(0.05 * sr))
+        beat_segment = y[beat_start:beat_end]
+
+        # Region between beats (the "gap" where murmurs live)
+        gap_start = peaks[i] + int(0.08 * sr)  # skip 80ms after beat
+        gap_end = peaks[i + 1] - int(0.08 * sr)  # stop 80ms before next beat
+
+        if gap_end <= gap_start:
+            continue
+
+        gap_segment = y[gap_start:gap_end]
+
+        # RMS energy of the beat vs the gap
+        beat_rms = np.sqrt(np.mean(beat_segment ** 2)) if len(beat_segment) > 0 else 0
+        gap_rms = np.sqrt(np.mean(gap_segment ** 2)) if len(gap_segment) > 0 else 0
+
+        beat_energies.append(beat_rms)
+        inter_beat_energies.append(gap_rms)
+
+        # Spectral entropy of the gap (high entropy = turbulent flow = murmur)
+        if len(gap_segment) > 256:
+            freqs = np.abs(np.fft.rfft(gap_segment))
+            freqs = freqs / (np.sum(freqs) + 1e-12)
+            entropy = -np.sum(freqs * np.log2(freqs + 1e-12))
+            inter_beat_entropies.append(entropy)
+
+    if not inter_beat_energies:
+        return {
+            "label": "Insufficient Data",
+            "confidence": 0.0,
+            "is_disease": False,
+            "details": "Could not isolate inter-beat intervals",
+            "all_classes": [
+                {"label": "Insufficient Data", "probability": 1.0},
+            ]
+        }
+
+    # Key metrics
+    avg_beat_energy = np.mean(beat_energies)
+    avg_gap_energy = np.mean(inter_beat_energies)
+    energy_ratio = avg_gap_energy / (avg_beat_energy + 1e-12)
+    avg_entropy = np.mean(inter_beat_entropies) if inter_beat_entropies else 0
+
+    # Inter-beat energy consistency (murmurs are consistent; noise is random)
+    gap_energy_std = np.std(inter_beat_energies) / (avg_gap_energy + 1e-12)
+    consistency = 1.0 - min(1.0, gap_energy_std)  # High = consistent inter-beat energy
+
+    # High-frequency energy ratio (murmurs have more energy in 200-600Hz band)
+    # Analyze frequency distribution in the gaps
+    hf_ratios = []
+    for i in range(len(peaks) - 1):
+        gap_start = peaks[i] + int(0.08 * sr)
+        gap_end = peaks[i + 1] - int(0.08 * sr)
+        if gap_end <= gap_start:
+            continue
+        gap_segment = y[gap_start:gap_end]
+        if len(gap_segment) > 512:
+            fft_mag = np.abs(np.fft.rfft(gap_segment))
+            freqs_hz = np.fft.rfftfreq(len(gap_segment), 1.0 / sr)
+            # Energy in murmur band (150-500Hz) vs total
+            murmur_band = np.sum(fft_mag[(freqs_hz >= 150) & (freqs_hz <= 500)])
+            total = np.sum(fft_mag) + 1e-12
+            hf_ratios.append(murmur_band / total)
+    
+    hf_ratio = np.mean(hf_ratios) if hf_ratios else 0.0
+
+    # Also extract MFCCs for overall spectral characterization
+    mfccs = librosa.feature.mfcc(y=y, sr=sr, n_mfcc=13)
+    mfcc_var = np.mean(np.var(mfccs, axis=1))
+
+    # ─── Trained classifier (logistic regression on 21 canine recordings) ───
+    # Features: [energy_ratio, consistency, hf_ratio, entropy, mfcc_var]
+    # Trained on VetCPD (5) + Hannover Examples (9) + Hannover Grading (7)
+    # Results: 95% accuracy, 94% sensitivity, 100% specificity
+    #
+    # Model weights (scikit-learn logistic regression):
+    SCALER_MEAN = [0.4315, 0.7709, 0.2588, 7.1566, 220.9825]
+    SCALER_STD  = [0.1573, 0.0888, 0.1294, 0.7728, 124.5063]
+    WEIGHTS     = [1.2507, 0.3728, -0.4740, -0.3317, 1.1285]
+    INTERCEPT   = 0.8248
+    SCREENING_THRESHOLD = 0.40  # Optimized for screening sensitivity
+
+    # Scale features
+    raw_features = [energy_ratio, consistency, hf_ratio, avg_entropy, mfcc_var]
+    scaled = [(f - m) / (s + 1e-12) for f, m, s in zip(raw_features, SCALER_MEAN, SCALER_STD)]
+
+    # Logistic regression: P(murmur) = sigmoid(w·x + b)
+    logit = sum(w * x for w, x in zip(WEIGHTS, scaled)) + INTERCEPT
+    murmur_prob = float(1.0 / (1.0 + np.exp(-logit)))
+    normal_prob = float(1.0 - murmur_prob)
+
+    is_murmur = bool(murmur_prob >= SCREENING_THRESHOLD)
+
+    return {
+        "label": "Murmur" if is_murmur else "Normal",
+        "confidence": round(murmur_prob if is_murmur else normal_prob, 4),
+        "is_disease": is_murmur,
+        "details": f"Energy ratio: {energy_ratio:.3f}, HF ratio: {hf_ratio:.3f}, Consistency: {consistency:.3f}, Entropy: {avg_entropy:.1f}, MFCC var: {mfcc_var:.1f}",
+        "all_classes": [
+            {"label": "Normal", "probability": round(normal_prob, 4)},
+            {"label": "Murmur", "probability": round(murmur_prob, 4)},
+        ]
+    }
+
+
+def predict_audio(audio_bytes: bytes):
+    """Main inference function called by api.py."""
+    try:
+        waveform = load_audio(audio_bytes)
+        duration = len(waveform) / TARGET_SR
+        print(f"Audio: {len(waveform)} samples, {duration:.1f}s", flush=True)
+
+        bpm, heartbeat_count, peaks = calculate_bpm(waveform, TARGET_SR)
+        print(f"BPM: {bpm}, Beats: {heartbeat_count}", flush=True)
+
+        classification = detect_murmur(waveform, TARGET_SR, peaks)
+        print(f"Classification: {classification['label']} ({classification['confidence']:.1%})", flush=True)
+        print(f"Details: {classification['details']}", flush=True)
+
+        summary = "Warning: Heart Murmur Detected" if classification["is_disease"] else "Normal Heart Sound"
+
+        # Downsample waveform for frontend (~800 points)
+        num_points = 800
+        step = max(1, len(waveform) // num_points)
+        vis_waveform = waveform[::step].tolist()
+        vis_duration = len(vis_waveform)  # number of rendered points
+
+        # Convert peak sample indices → seconds, then → waveform-point index
+        peak_times_sec = [round(float(p) / TARGET_SR, 3) for p in peaks]
+        # Map peak sample position to the downsampled index space
+        peak_vis_indices = [int(p // step) for p in peaks if int(p // step) < vis_duration]
+
+        return {
+            "bpm": bpm,
+            "heartbeat_count": heartbeat_count,
+            "duration_seconds": round(duration, 1),
+            "clinical_summary": summary,
+            "ai_classification": classification,
+            "waveform": vis_waveform,
+            "peak_times_seconds": peak_times_sec,
+            "peak_vis_indices": peak_vis_indices,
+        }
+
+    except Exception as e:
+        import traceback
+        print(f"Error:\n{traceback.format_exc()}", flush=True)
+        return {"error": str(e)}

model_params.json

@@ -0,0 +1,37 @@
+{
+  "scaler_mean": [
+    0.4315492464945563,
+    0.7709345691357302,
+    0.25880673479401617,
+    7.15659643281259,
+    220.9824894463221
+  ],
+  "scaler_scale": [
+    0.1572568658351758,
+    0.08882097430976825,
+    0.12937050957583243,
+    0.7727553020891176,
+    124.5062970996893
+  ],
+  "weights": [
+    1.2507186240143076,
+    0.3727735273449431,
+    -0.4739513225273016,
+    -0.3316725756172594,
+    1.1284599560429354
+  ],
+  "intercept": 0.8248089475357907,
+  "threshold": 0.4,
+  "feature_names": [
+    "Energy Ratio",
+    "Consistency",
+    "HF Ratio",
+    "Entropy",
+    "MFCC Var"
+  ],
+  "training_samples": 21,
+  "n_normal": 3,
+  "n_murmur": 18,
+  "sensitivity": 0.9444,
+  "specificity": 1.0
+}

render.yaml

@@ -0,0 +1,21 @@
+services:
+  # ── Backend: FastAPI inference server ─────────────────────────────────────
+  - type: web
+    name: cardioscreen-api
+    runtime: python
+    region: frankfurt
+    plan: free
+    buildCommand: pip install -r requirements.txt
+    startCommand: uvicorn api:app --host 0.0.0.0 --port $PORT
+
+  # ── Frontend: Vite static build ────────────────────────────────────────────
+  - type: web
+    name: cardioscreen-ui
+    runtime: static
+    region: frankfurt
+    buildCommand: cd webapp && npm ci && npm run build
+    staticPublishPath: webapp/dist
+    routes:
+      - type: rewrite
+        source: /*
+        destination: /index.html

requirements.txt

@@ -0,0 +1,7 @@
+fastapi>=0.115.0
+uvicorn>=0.30.0
+numpy>=1.26.0
+scipy>=1.13.0
+librosa>=0.10.0
+soundfile>=0.12.1
+python-multipart>=0.0.9

src/train.py

@@ -0,0 +1,218 @@
+import os
+import glob
+import librosa
+import numpy as np
+import pandas as pd
+import scipy.signal
+import matplotlib.pyplot as plt
+import seaborn as sns
+from sklearn.model_selection import train_test_split
+from sklearn.preprocessing import StandardScaler
+from sklearn.linear_model import LogisticRegression
+from sklearn.ensemble import RandomForestClassifier
+from sklearn.svm import SVC
+from sklearn.metrics import accuracy_score, confusion_matrix, roc_curve, auc, cohen_kappa_score
+import joblib
+
+# Numpy 2.0 compatibility for librosa
+if not hasattr(np, 'trapz'):
+    np.trapz = np.trapezoid
+if not hasattr(np, 'in1d'):
+    def in1d_patch(ar1, ar2, assume_unique=False, invert=False):
+        return np.isin(ar1, ar2, assume_unique=assume_unique, invert=invert)
+    np.in1d = in1d_patch
+
+# Config
+DATASET_DIR = "dataset"
+TARGET_SR = 16000
+AUDIO_LENGTH_SEC = 5
+os.makedirs("weights", exist_ok=True)
+os.makedirs("metrics", exist_ok=True)
+
+def apply_clinical_bandpass(y, sr):
+    nyq = 0.5 * sr
+    low = 25.0 / nyq
+    high = 400.0 / nyq
+    b, a = scipy.signal.butter(4, [low, high], btype='band')
+    return scipy.signal.filtfilt(b, a, y)
+
+def extract_statistical_features(y, sr):
+    """Extracts 1D interpretable statistical biomarkers."""
+    features = {}
+    
+    mfccs = librosa.feature.mfcc(y=y, sr=sr, n_mfcc=13)
+    for i in range(13):
+        features[f'mfcc_{i}_mean'] = np.mean(mfccs[i])
+        features[f'mfcc_{i}_std'] = np.std(mfccs[i])
+        
+    features['centroid_mean'] = np.mean(librosa.feature.spectral_centroid(y=y, sr=sr))
+    features['zcr_mean'] = np.mean(librosa.feature.zero_crossing_rate(y))
+    features['rms_mean'] = np.mean(librosa.feature.rms(y=y))
+    
+    prob = np.square(np.abs(librosa.stft(y)))
+    prob = prob / np.sum(prob)
+    features['entropy'] = -np.sum(prob * np.log2(prob + 1e-10))
+    
+    return features
+
+def load_dataset():
+    print("Scanning dataset directory...")
+    files = glob.glob(os.path.join(DATASET_DIR, "*.wav"))
+    
+    if not files:
+        print("ERROR: No .wav files found in dataset/")
+        return None, None
+        
+    X_features = []
+    y_labels = []
+    
+    for f in files:
+        try:
+            basename = os.path.basename(f).lower()
+            label = 1 if 'murmur' in basename or 'abnormal' in basename else 0
+            
+            y, sr = librosa.load(f, sr=TARGET_SR, mono=True)
+            y = librosa.util.normalize(y)
+            y_clean = apply_clinical_bandpass(y, sr)
+            
+            target_length = TARGET_SR * AUDIO_LENGTH_SEC
+            if len(y_clean) > target_length:
+                y_clean = y_clean[:target_length]
+            else:
+                y_clean = np.pad(y_clean, (0, target_length - len(y_clean)))
+                
+            feats = extract_statistical_features(y_clean, sr)
+            X_features.append(feats)
+            y_labels.append(label)
+        except Exception as e:
+            print(f"Error processing {f}: {e}")
+            
+    df = pd.DataFrame(X_features)
+    labels = np.array(y_labels)
+    
+    print(f"Successfully processed {len(df)} canine recordings.")
+    return df, labels
+
+def evaluate_model(y_true, y_pred):
+    acc = accuracy_score(y_true, y_pred)
+    cm = confusion_matrix(y_true, y_pred, labels=[0, 1])
+    
+    if cm.shape == (2, 2):
+        tn, fp, fn, tp = cm.ravel()
+        sensitivity = tp / (tp + fn) if (tp + fn) > 0 else 0.0
+        specificity = tn / (tn + fp) if (tn + fp) > 0 else 0.0
+    else:
+        # Handle all one class cases for tiny datasets
+        sensitivity = 0.0
+        specificity = 0.0
+        
+    return acc, sensitivity, specificity, cm
+
+def train_and_evaluate():
+    X, y = load_dataset()
+    if X is None: return
+    
+    # Feature Scaling is critical for SVM and Logistic Regression
+    scaler = StandardScaler()
+    feature_names = X.columns
+    X_scaled = scaler.fit_transform(X)
+    X_scaled = pd.DataFrame(X_scaled, columns=feature_names)
+    joblib.dump(scaler, "weights/scaler.pkl")
+    joblib.dump(list(feature_names), "weights/feature_columns.pkl")
+    
+    # Strictly 70/30 split
+    X_train, X_test, y_train, y_test = train_test_split(X_scaled, y, test_size=0.3, random_state=42)
+    
+    print(f"\n--- Training on {len(X_train)} samples, Testing on {len(X_test)} samples (70/30 Split) ---")
+
+    models = {
+        "Logistic Regression": LogisticRegression(max_iter=1000, random_state=42),
+        "Random Forest": RandomForestClassifier(n_estimators=100, max_depth=10, random_state=42),
+        "SVM (RBF)": SVC(kernel='rbf', probability=True, random_state=42)
+    }
+
+    results = {}
+    y_preds_all = {}
+    y_proba_all = {}
+
+    for name, model in models.items():
+        print(f"\nTraining {name}...")
+        model.fit(X_train, y_train)
+        
+        y_pred = model.predict(X_test)
+        y_proba = model.predict_proba(X_test)[:, 1]
+        
+        y_preds_all[name] = y_pred
+        y_proba_all[name] = y_proba
+        
+        acc, sens, spec, cm = evaluate_model(y_test, y_pred)
+        results[name] = {
+            "Accuracy": acc,
+            "Sensitivity": sens,
+            "Specificity": spec,
+            "CM": cm
+        }
+        
+        print(f"Accuracy:    {acc*100:.1f}%")
+        print(f"Sensitivity: {sens*100:.1f}%")
+        print(f"Specificity: {spec*100:.1f}%")
+        
+        filename = name.lower().replace(" ", "_").replace("(", "").replace(")", "")
+        joblib.dump(model, f"weights/canine_{filename}.pkl")
+
+    # 1. Output ROC Curve Plot
+    plt.figure(figsize=(8, 6))
+    for name, y_proba in y_proba_all.items():
+        fpr, tpr, _ = roc_curve(y_test, y_proba)
+        roc_auc = auc(fpr, tpr)
+        plt.plot(fpr, tpr, lw=2, label=f'{name} (AUC = {roc_auc:.2f})')
+        
+    plt.plot([0, 1], [0, 1], color='navy', lw=2, linestyle='--')
+    plt.xlim([0.0, 1.0])
+    plt.ylim([0.0, 1.05])
+    plt.xlabel('False Positive Rate (1 - Specificity)')
+    plt.ylabel('True Positive Rate (Sensitivity)')
+    plt.title('Receiver Operating Characteristic (ROC) Comparison')
+    plt.legend(loc="lower right")
+    plt.grid(True, alpha=0.3)
+    plt.savefig('metrics/roc_curve.png')
+    plt.close()
+    
+    # 2. Confusion Matrices Plot
+    fig, axes = plt.subplots(1, 3, figsize=(15, 4))
+    for ax, (name, res) in zip(axes, results.items()):
+        sns.heatmap(res["CM"], annot=True, fmt='d', cmap='Blues', ax=ax, cbar=False)
+        ax.set_title(f'{name}\nAcc: {res["Accuracy"]:.2f}')
+        ax.set_xlabel('Predicted Label')
+        ax.set_ylabel('True Label')
+        ax.set_xticklabels(['Normal (0)', 'Murmur (1)'])
+        ax.set_yticklabels(['Normal (0)', 'Murmur (1)'])
+    plt.tight_layout()
+    plt.savefig('metrics/confusion_matrix.png')
+    plt.close()
+
+    # 3. Random Forest Feature Importance Plot
+    rf_model = models["Random Forest"]
+    importances = rf_model.feature_importances_
+    indices = np.argsort(importances)[::-1][:15] # Top 15 features
+    
+    plt.figure(figsize=(10, 6))
+    plt.title("Top 15 Feature Importances (Random Forest)")
+    plt.bar(range(15), importances[indices], align="center", color='skyblue', edgecolor='black')
+    plt.xticks(range(15), [feature_names[i] for i in indices], rotation=45, ha='right')
+    plt.xlim([-1, 15])
+    plt.tight_layout()
+    plt.savefig('metrics/feature_importance.png')
+    plt.close()
+    
+    # 4. Model Agreement (Kappa between RF and SVM)
+    kappa = cohen_kappa_score(y_preds_all["Random Forest"], y_preds_all["SVM (RBF)"])
+    print(f"\n--- Model Agreement ---")
+    print(f"Cohen's Kappa (Random Forest vs SVM): {kappa:.3f}")
+    
+    print("\nTraining Pipeline Complete.")
+    print("Interpretable Models saved to weights/")
+    print("Clinical visual metrics saved to metrics/")
+
+if __name__ == "__main__":
+    train_and_evaluate()

webapp/.env.production

@@ -0,0 +1,4 @@
+# This URL will be filled in AFTER you create the Render backend service.
+# Replace the placeholder with your actual Render backend URL, then redeploy the frontend.
+# Example: VITE_API_URL=https://cardioscreen-api.onrender.com/analyze
+VITE_API_URL=https://REPLACE_WITH_YOUR_RENDER_BACKEND_URL/analyze

webapp/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

webapp/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

webapp/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

webapp/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CardioScreen AI</title>
+    <!-- Google Fonts: Outfit and Inter -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

webapp/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "webapp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^4.2.0",
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^3.7.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

webapp/public/_redirects

@@ -0,0 +1 @@
+/*  /index.html  200

webapp/src/App.css

@@ -0,0 +1,184 @@
+/* App specific styles, relying on index.css for global utilities */
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+.header-title {
+  margin-bottom: 4px;
+}
+
+.header-subtitle {
+  color: var(--text-secondary);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.col-span-2 {
+  grid-column: span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3;
+}
+
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .col-span-3 {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .col-span-2,
+  .col-span-3 {
+    grid-column: span 1;
+  }
+
+  .app-container {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    padding: 16px;
+  }
+
+  .main-content {
+    padding: 16px;
+  }
+}
+
+/* Upload Area */
+.upload-zone {
+  border: 2px dashed rgba(6, 182, 212, 0.3);
+  border-radius: var(--card-radius);
+  padding: 48px 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--transition-smooth);
+  background: rgba(6, 182, 212, 0.02);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: 300px;
+}
+
+.upload-zone:hover {
+  border-color: var(--accent-cyan);
+  background: rgba(6, 182, 212, 0.05);
+  transform: scale(1.01);
+}
+
+.upload-icon {
+  color: var(--accent-cyan);
+  background: rgba(6, 182, 212, 0.1);
+  padding: 16px;
+  border-radius: 50%;
+  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
+}
+
+/* Feature Value Displays */
+.feature-metric {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.feature-metric:last-child {
+  border-bottom: none;
+}
+
+.feature-name {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.feature-value {
+  font-weight: 600;
+  font-family: monospace;
+  font-size: 1.1rem;
+  color: var(--accent-cyan);
+}
+
+/* Result Card */
+.result-normal {
+  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
+  border-color: rgba(16, 185, 129, 0.3);
+}
+
+.result-disease {
+  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02));
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.confidence-bar-bg {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 12px;
+}
+
+.confidence-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.result-normal .confidence-bar-fill {
+  background: var(--success);
+}
+
+.result-disease .confidence-bar-fill {
+  background: var(--danger);
+}
+
+/* Sidebar Navigation */
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background: rgba(6, 182, 212, 0.1);
+  color: var(--accent-cyan);
+  border-left: 3px solid var(--accent-cyan);
+}

webapp/src/App.jsx

@@ -0,0 +1,1130 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  Upload, Activity, Heart, FileAudio,
+  CheckCircle, AlertTriangle, RefreshCw,
+  Mic, Square, Download, Cpu
+} from 'lucide-react';
+import jsPDF from 'jspdf';
+import './App.css';
+
+// ─── Waveform Canvas with Time Axis + Heartbeat Markers ──────────────────────
+// Waveform Canvas: static bottom layer + live animated overlay
+function WaveformCanvas({ waveform, peakVisIndices, peakTimesSec, duration, isDisease, canvasRefOut, audioRef }) {
+  const staticRef = useRef(null);
+  const overlayRef = useRef(null);
+  const rafRef = useRef(null);
+  const accentColor = isDisease ? '#ef4444' : '#06b6d4';
+
+  const PAD = { L: 42, R: 12, T: 12, B: 36 };
+
+  // Static draw: runs once when waveform data changes
+  useEffect(() => {
+    const canvas = staticRef.current;
+    if (!canvas || !waveform || waveform.length === 0) return;
+    if (canvasRefOut) canvasRefOut.current = canvas;
+    const dpr = window.devicePixelRatio || 1;
+    const W = canvas.offsetWidth, H = canvas.offsetHeight;
+    canvas.width = W * dpr; canvas.height = H * dpr;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+
+    const { L, R, T, B } = PAD;
+    const cW = W - L - R, cH = H - B - T;
+    const n = waveform.length;
+    const xOf = (i) => L + (i / (n - 1)) * cW;
+    const yOf = (v) => T + cH / 2 - v * cH * 0.42;
+
+    ctx.fillStyle = 'rgba(5,8,18,1)'; ctx.fillRect(0, 0, W, H);
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const y = T + (cH * i) / 4;
+      ctx.beginPath(); ctx.moveTo(L, y); ctx.lineTo(L + cW, y); ctx.stroke();
+    }
+
+    const grad = ctx.createLinearGradient(0, T, 0, T + cH);
+    grad.addColorStop(0, isDisease ? 'rgba(239,68,68,0.5)' : 'rgba(6,182,212,0.5)');
+    grad.addColorStop(0.5, isDisease ? 'rgba(239,68,68,0.08)' : 'rgba(6,182,212,0.08)');
+    grad.addColorStop(1, 'rgba(0,0,0,0)');
+    ctx.beginPath();
+    ctx.moveTo(xOf(0), yOf(waveform[0]));
+    for (let i = 1; i < n; i++) ctx.lineTo(xOf(i), yOf(waveform[i]));
+    ctx.lineTo(xOf(n - 1), T + cH / 2); ctx.lineTo(xOf(0), T + cH / 2);
+    ctx.closePath(); ctx.fillStyle = grad; ctx.fill();
+
+    ctx.beginPath();
+    ctx.moveTo(xOf(0), yOf(waveform[0]));
+    for (let i = 1; i < n; i++) ctx.lineTo(xOf(i), yOf(waveform[i]));
+    ctx.strokeStyle = accentColor; ctx.lineWidth = 1.8;
+    ctx.shadowBlur = 8; ctx.shadowColor = isDisease ? 'rgba(239,68,68,0.4)' : 'rgba(6,182,212,0.4)';
+    ctx.stroke(); ctx.shadowBlur = 0;
+
+    if (peakVisIndices && peakVisIndices.length > 0) {
+      peakVisIndices.forEach((pidx, i) => {
+        const x = xOf(pidx);
+        ctx.setLineDash([3, 4]); ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 1;
+        ctx.beginPath(); ctx.moveTo(x, T + 4); ctx.lineTo(x, T + cH); ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.save(); ctx.translate(x, T + 6); ctx.rotate(Math.PI / 4);
+        ctx.fillStyle = accentColor; ctx.fillRect(-4, -4, 8, 8); ctx.restore();
+        if (peakTimesSec && peakTimesSec[i] !== undefined && (peakVisIndices.length < 30 || i % 2 === 0)) {
+          ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = '9px monospace';
+          ctx.textAlign = 'center'; ctx.fillText(peakTimesSec[i].toFixed(1) + 's', x, T + 22);
+        }
+      });
+    }
+
+    const axisY = T + cH + 6;
+    ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(L, axisY); ctx.lineTo(L + cW, axisY); ctx.stroke();
+    const numTicks = Math.min(12, Math.floor(duration));
+    for (let t = 0; t <= numTicks; t++) {
+      const ts = (t / numTicks) * duration;
+      const x = L + (ts / duration) * cW;
+      ctx.beginPath(); ctx.moveTo(x, axisY); ctx.lineTo(x, axisY + 5); ctx.stroke();
+      ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = '10px monospace';
+      ctx.textAlign = 'center'; ctx.fillText(ts.toFixed(0) + 's', x, axisY + 16);
+    }
+    ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.font = '10px sans-serif';
+    ctx.textAlign = 'left'; ctx.fillText('Time (seconds)', L, axisY + 30);
+    ctx.save(); ctx.translate(12, T + cH / 2); ctx.rotate(-Math.PI / 2);
+    ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.font = '10px sans-serif';
+    ctx.textAlign = 'center'; ctx.fillText('Amplitude', 0, 0); ctx.restore();
+
+  }, [waveform, peakVisIndices, peakTimesSec, duration, isDisease]);
+
+  // Animation loop: playhead + beat pulse (runs while audio plays)
+  useEffect(() => {
+    const audio = audioRef?.current;
+    const overlay = overlayRef.current;
+    if (!overlay || !audio || !duration) return;
+
+    const { L, R, T, B } = PAD;
+    const BEAT_WIN = 0.35; // seconds a beat glows after being crossed
+
+    const drawOverlay = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const W = overlay.offsetWidth, H = overlay.offsetHeight;
+      if (overlay.width !== Math.round(W * dpr)) overlay.width = Math.round(W * dpr);
+      if (overlay.height !== Math.round(H * dpr)) overlay.height = Math.round(H * dpr);
+      const ctx = overlay.getContext('2d');
+      ctx.save();
+      ctx.clearRect(0, 0, overlay.width, overlay.height);
+      ctx.scale(dpr, dpr);
+
+      const cW = W - L - R, cH = H - B - T;
+      const n = waveform ? waveform.length : 1;
+      const t = audio.currentTime;
+
+      if (t > 0 && cW > 0) {
+        const px = L + (t / duration) * cW;
+
+        // Scanned region overlay
+        ctx.fillStyle = 'rgba(255,255,255,0.025)';
+        ctx.fillRect(L, T, px - L, cH);
+
+        // White glowing playhead
+        ctx.save();
+        ctx.strokeStyle = 'rgba(255,255,255,0.92)'; ctx.lineWidth = 1.5;
+        ctx.shadowBlur = 10; ctx.shadowColor = 'rgba(255,255,255,0.8)';
+        ctx.beginPath(); ctx.moveTo(px, T); ctx.lineTo(px, T + cH); ctx.stroke();
+        ctx.restore();
+
+        // Beat pulse glows
+        if (peakTimesSec && peakVisIndices) {
+          peakTimesSec.forEach((beatT, i) => {
+            const diff = t - beatT;
+            if (diff < 0 || diff > BEAT_WIN) return;
+            const alpha = 1 - diff / BEAT_WIN;
+            const bx = L + (peakVisIndices[i] / (n - 1)) * cW;
+
+            // Radial halo
+            ctx.save();
+            const rg = ctx.createRadialGradient(bx, T + cH / 2, 0, bx, T + cH / 2, 40);
+            rg.addColorStop(0, isDisease ? `rgba(239,68,68,${alpha * 0.55})` : `rgba(6,182,212,${alpha * 0.55})`);
+            rg.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = rg;
+            ctx.fillRect(bx - 42, T, 84, cH);
+            ctx.restore();
+
+            // Pulsing diamond
+            const size = 5 + alpha * 10;
+            ctx.save();
+            ctx.translate(bx, T + cH / 2);
+            ctx.rotate(Math.PI / 4);
+            ctx.globalAlpha = alpha;
+            ctx.fillStyle = accentColor;
+            ctx.shadowBlur = 22 * alpha; ctx.shadowColor = accentColor;
+            ctx.fillRect(-size / 2, -size / 2, size, size);
+            ctx.restore();
+
+            // Beat number label
+            ctx.save();
+            ctx.globalAlpha = alpha * 0.85;
+            ctx.fillStyle = 'white'; ctx.font = 'bold 11px monospace';
+            ctx.textAlign = 'center';
+            ctx.fillText('\u2665 ' + (i + 1), bx, T + cH / 2 + 22);
+            ctx.restore();
+          });
+        }
+      }
+
+      ctx.restore();
+      rafRef.current = requestAnimationFrame(drawOverlay);
+    };
+
+    const startLoop = () => {
+      if (!rafRef.current) rafRef.current = requestAnimationFrame(drawOverlay);
+    };
+    const stopLoop = () => {
+      if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; }
+      const ctx = overlay.getContext('2d');
+      if (ctx) ctx.clearRect(0, 0, overlay.width, overlay.height);
+    };
+
+    audio.addEventListener('play', startLoop);
+    audio.addEventListener('pause', stopLoop);
+    audio.addEventListener('ended', stopLoop);
+    audio.addEventListener('seeked', () => { if (!audio.paused) startLoop(); });
+
+    return () => {
+      stopLoop();
+      audio.removeEventListener('play', startLoop);
+      audio.removeEventListener('pause', stopLoop);
+      audio.removeEventListener('ended', stopLoop);
+    };
+  }, [waveform, peakVisIndices, peakTimesSec, duration, isDisease, audioRef]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <canvas ref={staticRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }} />
+      <canvas ref={overlayRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', pointerEvents: 'none' }} />
+    </div>
+  );
+}
+
+
+// Module-level WAV encoder (used by both recording and trimmer)
+function bufferToWave(abuffer, startSample, numSamples) {
+  const numChan = abuffer.numberOfChannels;
+  const sr = abuffer.sampleRate;
+  const byteLen = numSamples * numChan * 2 + 44;
+  const buf = new ArrayBuffer(byteLen);
+  const view = new DataView(buf);
+  let pos = 0;
+  const w16 = (v) => { view.setUint16(pos, v, true); pos += 2; };
+  const w32 = (v) => { view.setUint32(pos, v, true); pos += 4; };
+  w32(0x46464952); w32(byteLen - 8); w32(0x45564157);
+  w32(0x20746d66); w32(16); w16(1); w16(numChan);
+  w32(sr); w32(sr * 2 * numChan); w16(numChan * 2); w16(16);
+  w32(0x61746164); w32(byteLen - pos - 4);
+  const channels = [];
+  for (let c = 0; c < numChan; c++) channels.push(abuffer.getChannelData(c));
+  for (let i = 0; i < numSamples; i++) {
+    for (let c = 0; c < numChan; c++) {
+      let s = Math.max(-1, Math.min(1, channels[c][startSample + i]));
+      s = (0.5 + s < 0 ? s * 32768 : s * 32767) | 0;
+      view.setInt16(pos, s, true); pos += 2;
+    }
+  }
+  return new Blob([buf], { type: 'audio/wav' });
+}
+
+// Decode any audio blob and return { waveform (Float32Array), duration, buffer }
+async function decodeAudioBlob(blob) {
+  const arrayBuffer = await blob.arrayBuffer();
+  const ctx = new (window.AudioContext || window.webkitAudioContext)();
+  const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+  await ctx.close();
+  return audioBuffer;
+}
+
+// Downsample a Float32Array to ~800 points for display
+function downsample(data, points = 800) {
+  const step = Math.max(1, Math.floor(data.length / points));
+  const out = [];
+  for (let i = 0; i < data.length; i += step) out.push(data[i]);
+  return out;
+}
+
+// ─── Audio Trimmer ─────────────────────────────────────────────────────────────
+function AudioTrimmer({ waveform, duration, onAnalyze, onSkip }) {
+  const canvasRef = useRef(null);
+  const [startFrac, setStartFrac] = useState(0);
+  const [endFrac, setEndFrac] = useState(1);
+  const dragging = useRef(null); // 'start' | 'end' | null
+  const stateRef = useRef({ startFrac: 0, endFrac: 1 });
+
+  const PAD = { L: 16, R: 16, T: 24, B: 28 };
+
+  // Keep stateRef in sync for RAF access inside mouse handlers
+  useEffect(() => { stateRef.current = { startFrac, endFrac }; }, [startFrac, endFrac]);
+
+  // Draw whenever state or waveform changes
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !waveform || waveform.length === 0) return;
+    const dpr = window.devicePixelRatio || 1;
+    const W = canvas.offsetWidth, H = canvas.offsetHeight;
+    canvas.width = W * dpr; canvas.height = H * dpr;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    const { L, R, T, B } = PAD;
+    const cW = W - L - R, cH = H - T - B;
+    const n = waveform.length;
+    const xOf = (i) => L + (i / (n - 1)) * cW;
+    const yOf = (v) => T + cH / 2 - v * cH * 0.42;
+    const sX = L + startFrac * cW;
+    const eX = L + endFrac * cW;
+
+    // Background
+    ctx.fillStyle = 'rgba(5,8,18,1)'; ctx.fillRect(0, 0, W, H);
+
+    // Waveform (dimmed outside selection)
+    for (let i = 1; i < n; i++) {
+      const x0 = xOf(i - 1), x1 = xOf(i);
+      const inside = x0 >= sX && x1 <= eX;
+      ctx.strokeStyle = inside ? '#06b6d4' : 'rgba(255,255,255,0.12)';
+      ctx.lineWidth = inside ? 1.8 : 1;
+      ctx.shadowBlur = inside ? 6 : 0;
+      ctx.shadowColor = '#06b6d4';
+      ctx.beginPath(); ctx.moveTo(x0, yOf(waveform[i - 1])); ctx.lineTo(x1, yOf(waveform[i])); ctx.stroke();
+    }
+    ctx.shadowBlur = 0;
+
+    // Dim excluded zones
+    ctx.fillStyle = 'rgba(5,8,18,0.6)';
+    ctx.fillRect(L, T, sX - L, cH);
+    ctx.fillRect(eX, T, L + cW - eX, cH);
+
+    // Selection highlight box
+    ctx.strokeStyle = 'rgba(6,182,212,0.4)'; ctx.lineWidth = 1;
+    ctx.strokeRect(sX, T, eX - sX, cH);
+    ctx.fillStyle = 'rgba(6,182,212,0.05)'; ctx.fillRect(sX, T, eX - sX, cH);
+
+    // Draw handles (vertical bar with grip arrows)
+    [[sX, 'start'], [eX, 'end']].forEach(([x, side]) => {
+      ctx.fillStyle = '#06b6d4';
+      ctx.fillRect(x - 2, T, 4, cH);
+      // Arrow triangle on handle
+      ctx.fillStyle = 'white';
+      const dir = side === 'start' ? 1 : -1;
+      ctx.beginPath();
+      ctx.moveTo(x + dir * 2, T + cH / 2);
+      ctx.lineTo(x + dir * 10, T + cH / 2 - 7);
+      ctx.lineTo(x + dir * 10, T + cH / 2 + 7);
+      ctx.closePath(); ctx.fill();
+    });
+
+    // Time labels on handles
+    ctx.fillStyle = 'rgba(255,255,255,0.85)'; ctx.font = 'bold 11px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText((startFrac * duration).toFixed(2) + 's', sX, T - 6);
+    ctx.fillText((endFrac * duration).toFixed(2) + 's', eX, T - 6);
+
+    // Bottom axis
+    const axisY = T + cH + 6;
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1;
+    ctx.beginPath(); ctx.moveTo(L, axisY); ctx.lineTo(L + cW, axisY); ctx.stroke();
+    const numTicks = Math.min(10, Math.floor(duration));
+    for (let t = 0; t <= numTicks; t++) {
+      const x = L + (t / numTicks) * cW;
+      ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.font = '9px monospace';
+      ctx.textAlign = 'center'; ctx.fillText(((t / numTicks) * duration).toFixed(0) + 's', x, axisY + 14);
+    }
+
+    // Selection duration label in center
+    const selSec = ((endFrac - startFrac) * duration).toFixed(1);
+    ctx.fillStyle = 'rgba(6,182,212,0.9)'; ctx.font = 'bold 12px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`Selection: ${selSec}s`, L + cW / 2, T + cH / 2 - 14);
+
+  }, [waveform, duration, startFrac, endFrac]);
+
+  // Mouse interaction
+  const fracFromX = (canvas, clientX) => {
+    const rect = canvas.getBoundingClientRect();
+    const { L, R } = PAD;
+    const cW = rect.width - L - R;
+    return Math.max(0, Math.min(1, (clientX - rect.left - L) / cW));
+  };
+
+  const onMouseDown = (e) => {
+    const canvas = canvasRef.current;
+    const f = fracFromX(canvas, e.clientX);
+    const { startFrac: s, endFrac: en } = stateRef.current;
+    const dS = Math.abs(f - s), dE = Math.abs(f - en);
+    dragging.current = dS < dE ? 'start' : 'end';
+  };
+
+  const onMouseMove = (e) => {
+    if (!dragging.current) return;
+    const f = fracFromX(canvasRef.current, e.clientX);
+    const { startFrac: s, endFrac: en } = stateRef.current;
+    if (dragging.current === 'start') setStartFrac(Math.min(f, en - 0.01));
+    else setEndFrac(Math.max(f, s + 0.01));
+  };
+
+  const onMouseUp = () => { dragging.current = null; };
+
+  // Touch support
+  const onTouchStart = (e) => onMouseDown(e.touches[0]);
+  const onTouchMove = (e) => { e.preventDefault(); onMouseMove(e.touches[0]); };
+  const onTouchEnd = () => onMouseUp();
+
+  return (
+    <div>
+      <canvas ref={canvasRef}
+        style={{ width: '100%', height: '200px', display: 'block', cursor: 'col-resize', borderRadius: '8px', overflow: 'hidden' }}
+        onMouseDown={onMouseDown} onMouseMove={onMouseMove} onMouseUp={onMouseUp} onMouseLeave={onMouseUp}
+        onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}
+      />
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '16px', flexWrap: 'wrap', gap: '12px' }}>
+        <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+          <span style={{ color: '#06b6d4', fontWeight: 600 }}>✂ Drag the handles</span> to select the clean cardiac section
+        </div>
+        <div style={{ display: 'flex', gap: '12px' }}>
+          <button className="btn-secondary" onClick={onSkip} style={{ fontSize: '0.9rem' }}>
+            Use Full Recording
+          </button>
+          <button className="btn-primary" style={{ background: 'var(--accent-cyan)', color: '#000', padding: '10px 20px', borderRadius: '8px', fontWeight: 700, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.9rem' }}
+            onClick={() => onAnalyze(startFrac, endFrac)}>
+            ✂ Analyze Selection
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const API_URL = (import.meta.env.VITE_API_URL) ?? "http://127.0.0.1:8000/analyze";
+
+function App() {
+  const [appState, setAppState] = useState('upload');
+  const [patientData, setPatientData] = useState({ dogId: '', breed: '', age: '' });
+  const [analysisResult, setAnalysisResult] = useState(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const [audioBlob, setAudioBlob] = useState(null);
+  const [audioUrl, setAudioUrl] = useState(null);
+  const [trimWaveform, setTrimWaveform] = useState(null);
+  const [trimDuration, setTrimDuration] = useState(0);
+  const rawAudioBuffer = useRef(null); // holds decoded AudioBuffer for trimming
+
+  const audioContextRef = useRef(null);
+  const analyserRef = useRef(null);
+  const mediaStreamRef = useRef(null);
+  const sourceRef = useRef(null);
+  const animationFrameRef = useRef(null);
+  const canvasRef = useRef(null);
+  const timerRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const audioChunksRef = useRef([]);
+  const waveformCanvasRef = useRef(null);
+  const audioRef = useRef(null);
+
+  const stopRecording = () => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+      mediaRecorderRef.current.stop();
+    }
+    if (mediaStreamRef.current) {
+      mediaStreamRef.current.getTracks().forEach(track => track.stop());
+      mediaStreamRef.current = null;
+    }
+    if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+      audioContextRef.current.close().catch(console.error);
+      audioContextRef.current = null;
+    }
+    if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+    if (timerRef.current) clearInterval(timerRef.current);
+    setIsRecording(false);
+  };
+
+  const startRecording = async () => {
+    if (!patientData.dogId) {
+      alert("Please enter a Dog ID first.");
+      return;
+    }
+    try {
+      setAppState('recording');
+      setIsRecording(true);
+      setRecordingTime(0);
+      audioChunksRef.current = [];
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaStreamRef.current = stream;
+
+      mediaRecorderRef.current = new MediaRecorder(stream);
+      mediaRecorderRef.current.ondataavailable = (event) => {
+        if (event.data.size > 0) audioChunksRef.current.push(event.data);
+      };
+
+      mediaRecorderRef.current.onstop = async () => {
+        const rawBlob = new Blob(audioChunksRef.current);
+        const audioBuffer = await decodeAudioBlob(rawBlob);
+        rawAudioBuffer.current = audioBuffer;
+        const wavBlob = bufferToWave(audioBuffer, 0, audioBuffer.length);
+        setAudioBlob(wavBlob);
+        setAudioUrl(URL.createObjectURL(wavBlob));
+        const wf = downsample(audioBuffer.getChannelData(0));
+        setTrimWaveform(wf);
+        setTrimDuration(audioBuffer.duration);
+        setAppState('trimming');
+      };
+
+      mediaRecorderRef.current.start();
+
+      audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+      analyserRef.current = audioContextRef.current.createAnalyser();
+      analyserRef.current.fftSize = 2048;
+      sourceRef.current = audioContextRef.current.createMediaStreamSource(stream);
+      sourceRef.current.connect(analyserRef.current);
+      drawWaveform();
+
+      timerRef.current = setInterval(() => setRecordingTime((prev) => prev + 1), 1000);
+
+    } catch (err) {
+      console.error("Microphone access error:", err);
+      alert("Microphone access denied or unavailable.");
+      setAppState('upload');
+      setIsRecording(false);
+    }
+  };
+
+  const drawWaveform = () => {
+    if (!canvasRef.current || !analyserRef.current) {
+      animationFrameRef.current = requestAnimationFrame(drawWaveform);
+      return;
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const analyser = analyserRef.current;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    analyser.getByteTimeDomainData(dataArray);
+
+    ctx.fillStyle = 'rgba(11, 15, 25, 1)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.lineWidth = 3;
+    ctx.strokeStyle = '#06b6d4';
+    ctx.shadowBlur = 10;
+    ctx.shadowColor = '#06b6d4';
+    ctx.beginPath();
+
+    const sliceWidth = canvas.width / bufferLength;
+    let x = 0;
+    for (let i = 0; i < bufferLength; i++) {
+      const v = dataArray[i] / 128.0;
+      const y = v * canvas.height / 2;
+      i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+      x += sliceWidth;
+    }
+    ctx.lineTo(canvas.width, canvas.height / 2);
+    ctx.stroke();
+    animationFrameRef.current = requestAnimationFrame(drawWaveform);
+  };
+
+  const handleFinishRecording = () => {
+    setAppState('analyzing'); // will be overridden to 'trimming' once audio decoded in onstop
+    stopRecording();
+  };
+
+  const handleManualUpload = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'audio/*';
+    input.onchange = async (e) => {
+      const file = e.target.files[0];
+      if (!file) return;
+      if (!patientData.dogId) { alert('Please enter a Dog ID first.'); return; }
+      const audioBuffer = await decodeAudioBlob(file);
+      rawAudioBuffer.current = audioBuffer;
+      const wavBlob = bufferToWave(audioBuffer, 0, audioBuffer.length);
+      setAudioBlob(wavBlob);
+      setAudioUrl(URL.createObjectURL(wavBlob));
+      const wf = downsample(audioBuffer.getChannelData(0));
+      setTrimWaveform(wf);
+      setTrimDuration(audioBuffer.duration);
+      setAppState('trimming');
+    };
+    input.click();
+  };
+
+  const handleAnalyzeTrimmed = (startFrac, endFrac) => {
+    const ab = rawAudioBuffer.current;
+    if (!ab) return;
+    const startSample = Math.floor(startFrac * ab.length);
+    const numSamples = Math.floor((endFrac - startFrac) * ab.length);
+    const trimmedBlob = bufferToWave(ab, startSample, numSamples);
+    // Update the stored audio blob/url to the trimmed version
+    if (audioUrl) URL.revokeObjectURL(audioUrl);
+    const newUrl = URL.createObjectURL(trimmedBlob);
+    setAudioBlob(trimmedBlob);
+    setAudioUrl(newUrl);
+    setAppState('analyzing');
+    sendToBackend(trimmedBlob);
+  };
+
+  const handleSkipTrim = () => {
+    setAppState('analyzing');
+    sendToBackend(audioBlob);
+  };
+
+  const sendToBackend = async (audioBlob) => {
+    try {
+      const formData = new FormData();
+      formData.append('file', audioBlob, 'recording.wav');
+
+      const response = await fetch(API_URL, { method: "POST", body: formData });
+      const result = await response.json();
+      console.log("Backend response:", result);
+
+      if (result.error) throw new Error(result.error);
+
+      let bpmStatus = "Normal";
+      let bpmColor = "var(--success)";
+      if (result.bpm > 140) { bpmStatus = "High (Tachycardia?)"; bpmColor = "var(--danger)"; }
+      else if (result.bpm < 60 && result.bpm > 0) { bpmStatus = "Low (Bradycardia?)"; bpmColor = "var(--warning)"; }
+      else if (result.bpm === 0) { bpmStatus = "Undetected"; bpmColor = "var(--text-secondary)"; }
+
+      const waveformData = result.waveform.map((amp, idx) => ({ time: idx, amplitude: amp }));
+
+      setAnalysisResult({
+        ...result,
+        bpmStatus,
+        bpmColor,
+        waveformData,
+      });
+      setAppState('dashboard');
+
+    } catch (error) {
+      console.error("Analysis error:", error);
+      alert(`Analysis failed: ${error.message}\n\nCheck if api.py is running.`);
+      resetApp();
+    }
+  };
+
+  const downloadAudio = () => {
+    if (!audioBlob) return;
+    const url = URL.createObjectURL(audioBlob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `heart_sound_${patientData.dogId}_${Date.now()}.wav`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadReport = async () => {
+    if (!analysisResult) return;
+    const r = analysisResult;
+    const ai = r.ai_classification;
+    const now = new Date().toLocaleString();
+    const isMurmur = ai.is_disease;
+    const pdf = new jsPDF('p', 'mm', 'a4');
+    const W = 210, H = 297;
+    const marginL = 18, marginR = 18;
+    const contentW = W - marginL - marginR;
+    let y = 0;
+
+    // === HEADER BAND ===
+    pdf.setFillColor(15, 23, 42);
+    pdf.rect(0, 0, W, 38, 'F');
+    // Accent line
+    pdf.setFillColor(isMurmur ? 239 : 6, isMurmur ? 68 : 182, isMurmur ? 68 : 212);
+    pdf.rect(0, 38, W, 2, 'F');
+    // Title
+    pdf.setTextColor(255, 255, 255);
+    pdf.setFont('helvetica', 'bold'); pdf.setFontSize(20);
+    pdf.text('CardioScreen AI', marginL, 18);
+    pdf.setFont('helvetica', 'normal'); pdf.setFontSize(10);
+    pdf.setTextColor(148, 163, 184);
+    pdf.text('Canine Cardiac Screening Report', marginL, 26);
+    // Date right-aligned
+    pdf.setFontSize(9); pdf.setTextColor(148, 163, 184);
+    pdf.text(now, W - marginR, 18, { align: 'right' });
+    pdf.text(`Patient: ${patientData.dogId}`, W - marginR, 26, { align: 'right' });
+    y = 48;
+
+    // === RESULT BANNER ===
+    pdf.setFillColor(isMurmur ? 254 : 240, isMurmur ? 242 : 253, isMurmur ? 242 : 250);
+    pdf.roundedRect(marginL, y, contentW, 28, 3, 3, 'F');
+    pdf.setDrawColor(isMurmur ? 239 : 34, isMurmur ? 68 : 197, isMurmur ? 68 : 94);
+    pdf.roundedRect(marginL, y, contentW, 28, 3, 3, 'S');
+    pdf.setFontSize(16); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(isMurmur ? 185 : 21, isMurmur ? 28 : 128, isMurmur ? 28 : 61);
+    pdf.text(isMurmur ? '⚠ MURMUR DETECTED' : '✓ NORMAL HEART SOUND', marginL + 8, y + 12);
+    pdf.setFontSize(10); pdf.setFont('helvetica', 'normal');
+    pdf.setTextColor(100, 100, 100);
+    pdf.text(`Confidence: ${(ai.confidence * 100).toFixed(1)}%`, marginL + 8, y + 22);
+    // BPM right side
+    pdf.setFontSize(22); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(isMurmur ? 185 : 21, isMurmur ? 28 : 128, isMurmur ? 28 : 61);
+    pdf.text(`${r.bpm}`, W - marginR - 30, y + 14, { align: 'right' });
+    pdf.setFontSize(9); pdf.setFont('helvetica', 'normal');
+    pdf.setTextColor(100, 100, 100);
+    pdf.text('BPM', W - marginR - 8, y + 14, { align: 'right' });
+    pdf.text(`${r.bpmStatus}`, W - marginR - 8, y + 22, { align: 'right' });
+    y += 36;
+
+    // === PATIENT INFO TABLE ===
+    pdf.setFontSize(11); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(30, 41, 59);
+    pdf.text('Patient Information', marginL, y);
+    y += 6;
+    pdf.setFillColor(248, 250, 252);
+    pdf.rect(marginL, y, contentW, 22, 'F');
+    pdf.setDrawColor(226, 232, 240);
+    pdf.rect(marginL, y, contentW, 22, 'S');
+    pdf.setFontSize(9); pdf.setFont('helvetica', 'normal');
+    pdf.setTextColor(71, 85, 105);
+    const col1 = marginL + 5, col2 = marginL + 50, col3 = marginL + 95, col4 = marginL + 130;
+    pdf.text('Dog ID:', col1, y + 8); pdf.setFont('helvetica', 'bold'); pdf.setTextColor(30, 41, 59); pdf.text(patientData.dogId, col1, y + 15);
+    pdf.setFont('helvetica', 'normal'); pdf.setTextColor(71, 85, 105);
+    pdf.text('Breed:', col2, y + 8); pdf.setFont('helvetica', 'bold'); pdf.setTextColor(30, 41, 59); pdf.text(patientData.breed || 'N/A', col2, y + 15);
+    pdf.setFont('helvetica', 'normal'); pdf.setTextColor(71, 85, 105);
+    pdf.text('Age:', col3, y + 8); pdf.setFont('helvetica', 'bold'); pdf.setTextColor(30, 41, 59); pdf.text(patientData.age ? `${patientData.age} years` : 'N/A', col3, y + 15);
+    pdf.setFont('helvetica', 'normal'); pdf.setTextColor(71, 85, 105);
+    pdf.text('Duration:', col4, y + 8); pdf.setFont('helvetica', 'bold'); pdf.setTextColor(30, 41, 59); pdf.text(`${r.duration_seconds}s (${r.heartbeat_count} beats)`, col4, y + 15);
+    y += 30;
+
+    // === WAVEFORM IMAGE ===
+    pdf.setFontSize(11); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(30, 41, 59);
+    pdf.text('Phonocardiogram', marginL, y);
+    y += 4;
+    if (waveformCanvasRef.current) {
+      try {
+        const imgData = waveformCanvasRef.current.toDataURL('image/png');
+        const imgW = contentW;
+        const imgH = imgW * 0.35;
+        pdf.addImage(imgData, 'PNG', marginL, y, imgW, imgH);
+        y += imgH + 4;
+      } catch (e) { console.warn('Could not capture waveform:', e); y += 4; }
+    } else { y += 4; }
+
+    // === PROBABILITY BREAKDOWN ===
+    pdf.setFontSize(11); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(30, 41, 59);
+    pdf.text('AI Classification', marginL, y);
+    y += 6;
+    ai.all_classes.forEach(cls => {
+      const pct = (cls.probability * 100).toFixed(1);
+      const isM = cls.label.toLowerCase().includes('murmur');
+      pdf.setFontSize(9); pdf.setFont('helvetica', 'normal');
+      pdf.setTextColor(71, 85, 105);
+      pdf.text(`${cls.label}:`, marginL + 5, y + 4);
+      pdf.setFont('helvetica', 'bold');
+      pdf.text(`${pct}%`, marginL + 35, y + 4);
+      // Bar background
+      pdf.setFillColor(226, 232, 240);
+      pdf.roundedRect(marginL + 52, y, contentW - 60, 6, 2, 2, 'F');
+      // Bar fill
+      const barW = Math.max(2, (cls.probability) * (contentW - 60));
+      pdf.setFillColor(isM ? 239 : 34, isM ? 68 : 197, isM ? 68 : 94);
+      pdf.roundedRect(marginL + 52, y, barW, 6, 2, 2, 'F');
+      y += 12;
+    });
+    y += 4;
+
+    // === FEATURE DETAILS ===
+    pdf.setFontSize(11); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(30, 41, 59);
+    pdf.text('Signal Analysis Features', marginL, y);
+    y += 5;
+    pdf.setFillColor(248, 250, 252);
+    pdf.rect(marginL, y, contentW, 8, 'F');
+    pdf.setDrawColor(226, 232, 240);
+    pdf.rect(marginL, y, contentW, 8, 'S');
+    pdf.setFontSize(8); pdf.setFont('helvetica', 'normal');
+    pdf.setTextColor(71, 85, 105);
+    pdf.text(ai.details || '', marginL + 4, y + 5.5);
+    y += 16;
+
+    // === DISCLAIMER ===
+    pdf.setFillColor(255, 251, 235);
+    pdf.roundedRect(marginL, y, contentW, 22, 2, 2, 'F');
+    pdf.setDrawColor(251, 191, 36);
+    pdf.roundedRect(marginL, y, contentW, 22, 2, 2, 'S');
+    pdf.setFontSize(8); pdf.setFont('helvetica', 'bold');
+    pdf.setTextColor(146, 64, 14);
+    pdf.text('IMPORTANT NOTICE', marginL + 5, y + 6);
+    pdf.setFont('helvetica', 'normal'); pdf.setFontSize(7.5);
+    pdf.setTextColor(120, 53, 15);
+    pdf.text('This is an AI-assisted screening tool for preliminary cardiac assessment. Results are NOT diagnostic.', marginL + 5, y + 12);
+    pdf.text('All findings should be confirmed by a veterinary cardiologist via echocardiography.', marginL + 5, y + 17);
+    y += 28;
+
+    // === FOOTER ===
+    pdf.setFontSize(7); pdf.setTextColor(148, 163, 184);
+    pdf.text('Model: CardioScreen Logistic Regression Classifier · Trained on: VetCPD + Hannover Vet School (21 canine recordings)', marginL, H - 12);
+    pdf.text(`Generated: ${now}`, W - marginR, H - 12, { align: 'right' });
+
+    pdf.save(`screening_${patientData.dogId}_${Date.now()}.pdf`);
+  };
+
+  const resetApp = () => {
+    stopRecording();
+    if (audioUrl) URL.revokeObjectURL(audioUrl);
+    setAppState('upload');
+    setPatientData({ dogId: '', breed: '', age: '' });
+    setAnalysisResult(null);
+    setAudioBlob(null);
+    setAudioUrl(null);
+    setTrimWaveform(null);
+    setTrimDuration(0);
+    rawAudioBuffer.current = null;
+  };
+
+  return (
+    <div className="app-container">
+      {/* Sidebar */}
+      <aside className="sidebar">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '40px' }}>
+          <div style={{ background: 'var(--accent-cyan)', padding: '8px', borderRadius: '8px' }}>
+            <Heart color="white" size={24} />
+          </div>
+          <h2 style={{ fontSize: '1.2rem', margin: 0 }}>CardioScreen <span className="text-gradient">AI</span></h2>
+        </div>
+
+        <nav>
+          <div className={`nav-item ${(appState === 'upload' || appState === 'recording') ? 'active' : ''}`} onClick={(appState !== 'analyzing') ? resetApp : undefined}>
+            <Upload size={18} />
+            <span>New Scan</span>
+          </div>
+          <div className={`nav-item ${appState === 'dashboard' ? 'active' : ''}`}>
+            <Activity size={18} />
+            <span>Analysis Result</span>
+          </div>
+        </nav>
+
+        <div style={{ marginTop: 'auto', padding: '16px', background: 'rgba(255,255,255,0.02)', borderRadius: '8px', border: '1px solid var(--border-color)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+            <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--success)', boxShadow: '0 0 10px var(--success)' }}></div>
+            <span style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Local AI Engine</span>
+          </div>
+          <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', opacity: 0.7 }}>v1.0 Thesis Edition</div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="main-content">
+
+        {/* VIEW: UPLOAD / RECORD */}
+        {(appState === 'upload' || appState === 'recording') && (
+          <div className="animate-fade-in" style={{ maxWidth: '800px', margin: '0 auto' }}>
+            <div className="dashboard-header">
+              <div>
+                <h1 className="header-title">New Patient Scan</h1>
+                <p className="header-subtitle">Capture phonocardiogram via stethoscope + microphone</p>
+              </div>
+            </div>
+
+            <div className="glass-card" style={{ marginBottom: '24px' }}>
+              <h3 style={{ marginBottom: '16px' }}>Patient Details</h3>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px' }}>
+                <div>
+                  <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Dog ID *</label>
+                  <input type="text" value={patientData.dogId} onChange={e => setPatientData({ ...patientData, dogId: e.target.value })} placeholder="e.g. DOG-001" disabled={appState === 'recording'}
+                    style={{ width: '100%', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border-color)', padding: '12px', borderRadius: '8px', color: 'white' }} />
+                </div>
+                <div>
+                  <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Breed</label>
+                  <input type="text" value={patientData.breed} onChange={e => setPatientData({ ...patientData, breed: e.target.value })} placeholder="e.g. German Shepherd" disabled={appState === 'recording'}
+                    style={{ width: '100%', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border-color)', padding: '12px', borderRadius: '8px', color: 'white' }} />
+                </div>
+                <div>
+                  <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>Age (Years)</label>
+                  <input type="number" value={patientData.age} onChange={e => setPatientData({ ...patientData, age: e.target.value })} placeholder="e.g. 7" disabled={appState === 'recording'}
+                    style={{ width: '100%', background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border-color)', padding: '12px', borderRadius: '8px', color: 'white' }} />
+                </div>
+              </div>
+            </div>
+
+            {appState === 'upload' ? (
+              <div style={{ display: 'flex', gap: '24px' }}>
+                <div className="upload-zone" style={{ flex: 1 }} onClick={startRecording}>
+                  <div style={{ background: 'rgba(59, 130, 246, 0.1)', padding: '24px', borderRadius: '50%', boxShadow: '0 0 20px rgba(59, 130, 246, 0.3)' }}>
+                    <Mic size={48} color="var(--accent-blue)" />
+                  </div>
+                  <h3 style={{ fontSize: '1.2rem', marginTop: '8px' }}>Start Live Recording</h3>
+                  <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>Record from stethoscope microphone</p>
+                </div>
+                <div className="upload-zone" style={{ flex: 1 }} onClick={handleManualUpload}>
+                  <div style={{ background: 'rgba(6, 182, 212, 0.1)', padding: '24px', borderRadius: '50%', boxShadow: '0 0 20px rgba(6, 182, 212, 0.2)' }}>
+                    <FileAudio size={48} color="var(--accent-cyan)" />
+                  </div>
+                  <h3 style={{ fontSize: '1.2rem', marginTop: '8px' }}>Upload .WAV File</h3>
+                  <p style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>Use an existing recording</p>
+                </div>
+              </div>
+            ) : (
+              <div className="glass-card" style={{ border: '2px solid var(--danger)', textAlign: 'center' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <div style={{ width: '12px', height: '12px', borderRadius: '50%', background: 'var(--danger)', animation: 'pulse-danger 1s infinite' }}></div>
+                    <span style={{ color: 'var(--danger)', fontWeight: 600 }}>RECORDING</span>
+                  </div>
+                  <div style={{ fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: 600 }}>
+                    00:{recordingTime.toString().padStart(2, '0')}
+                  </div>
+                </div>
+                <div style={{ width: '100%', height: '180px', background: 'rgba(0,0,0,0.5)', borderRadius: '8px', overflow: 'hidden', marginBottom: '24px', border: '1px solid rgba(255,255,255,0.05)' }}>
+                  <canvas ref={canvasRef} width="800" height="180" style={{ width: '100%', height: '100%' }}></canvas>
+                </div>
+                <div style={{ display: 'flex', gap: '16px', justifyContent: 'center' }}>
+                  <button className="btn-secondary" onClick={stopRecording}>
+                    <AlertTriangle size={18} /> Cancel
+                  </button>
+                  <button className="btn-danger" onClick={handleFinishRecording}>
+                    <Square size={18} fill="white" /> Stop & Analyze
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* VIEW: TRIMMING */}
+        {appState === 'trimming' && trimWaveform && (
+          <div className="animate-fade-in" style={{ maxWidth: '900px', margin: '0 auto' }}>
+            <div className="dashboard-header">
+              <div>
+                <h1 className="header-title">Trim Recording</h1>
+                <p className="header-subtitle">Remove noise before the stethoscope was placed correctly</p>
+              </div>
+              <button className="btn-secondary" onClick={resetApp}>
+                <RefreshCw size={16} /> Cancel
+              </button>
+            </div>
+            <div className="glass-card">
+              <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
+                <div style={{ background: 'rgba(6,182,212,0.15)', padding: '8px', borderRadius: '8px' }}>
+                  <Activity size={20} color="var(--accent-cyan)" />
+                </div>
+                <div>
+                  <div style={{ fontWeight: 600, fontSize: '0.95rem' }}>Select Clean Section</div>
+                  <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>
+                    Full recording: {trimDuration.toFixed(1)}s &nbsp;·&nbsp; Drag handles to select just the heart sounds
+                  </div>
+                </div>
+              </div>
+              <AudioTrimmer
+                waveform={trimWaveform}
+                duration={trimDuration}
+                onAnalyze={handleAnalyzeTrimmed}
+                onSkip={handleSkipTrim}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* VIEW: ANALYZING */}
+        {appState === 'analyzing' && (
+          <div className="animate-fade-in" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+            <RefreshCw size={48} color="var(--accent-cyan)" style={{ animation: 'spin 2s linear infinite', marginBottom: '24px' }} />
+            <style>{`@keyframes spin { 100% { transform: rotate(360deg); } }`}</style>
+            <h2>Analyzing Heart Sound...</h2>
+            <p style={{ color: 'var(--text-secondary)', marginTop: '8px', maxWidth: '400px', textAlign: 'center' }}>
+              Running cardiac screening via pre-trained AI model on your local machine.
+            </p>
+          </div>
+        )}
+
+        {/* VIEW: DASHBOARD */}
+        {appState === 'dashboard' && analysisResult && (
+          <div className="animate-fade-in delay-100">
+            <div className="dashboard-header">
+              <div>
+                <h1 className="header-title">Screening Result</h1>
+                <p className="header-subtitle">Patient: {patientData.dogId} | Breed: {patientData.breed || 'N/A'} | Age: {patientData.age || 'N/A'}</p>
+              </div>
+              <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+                <button className="btn-secondary" onClick={downloadReport}>
+                  <Download size={16} /> PDF Report
+                </button>
+                {audioBlob && (
+                  <button className="btn-secondary" onClick={downloadAudio}>
+                    <FileAudio size={16} /> Save Audio
+                  </button>
+                )}
+                <button className="btn-secondary" onClick={resetApp}>
+                  <RefreshCw size={16} /> New Scan
+                </button>
+              </div>
+            </div>
+
+            <div className="dashboard-grid">
+
+              {/* Main Result Card */}
+              <div className={`glass-card col-span-3 ${analysisResult.ai_classification.is_disease ? 'result-disease' : 'result-normal'}`}>
+
+                {/* Header: Diagnosis + BPM */}
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '24px' }}>
+                  <div>
+                    <h3 style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '1px' }}>
+                      AI Cardiac Screening
+                    </h3>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                      {analysisResult.ai_classification.is_disease ? (
+                        <AlertTriangle size={36} color="var(--danger)" />
+                      ) : (
+                        <CheckCircle size={36} color="var(--success)" />
+                      )}
+                      <h2 style={{ fontSize: '2.2rem', margin: 0, color: analysisResult.ai_classification.is_disease ? 'var(--danger)' : 'var(--success)' }}>
+                        {analysisResult.clinical_summary}
+                      </h2>
+                    </div>
+                  </div>
+
+                  {/* BPM + Heartbeat Count */}
+                  <div style={{ display: 'flex', gap: '16px' }}>
+                    <div style={{ textAlign: 'center', background: 'rgba(0,0,0,0.2)', padding: '16px 24px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}>
+                      <div style={{ fontSize: '3rem', fontWeight: 800, color: analysisResult.bpmColor, lineHeight: 1 }}>
+                        {analysisResult.bpm}
+                      </div>
+                      <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', marginTop: '4px' }}>BPM</div>
+                      <div style={{ color: analysisResult.bpmColor, fontSize: '0.8rem', fontWeight: 600, marginTop: '4px', display: 'flex', alignItems: 'center', gap: '4px', justifyContent: 'center' }}>
+                        <Activity size={12} /> {analysisResult.bpmStatus}
+                      </div>
+                    </div>
+                    <div style={{ textAlign: 'center', background: 'rgba(0,0,0,0.2)', padding: '16px 24px', borderRadius: '12px', border: '1px solid rgba(255,255,255,0.05)' }}>
+                      <div style={{ fontSize: '3rem', fontWeight: 800, color: 'var(--accent-cyan)', lineHeight: 1 }}>
+                        {analysisResult.heartbeat_count}
+                      </div>
+                      <div style={{ fontSize: '0.9rem', color: 'var(--text-secondary)', marginTop: '4px' }}>Beats</div>
+                      <div style={{ color: 'var(--text-secondary)', fontSize: '0.8rem', marginTop: '4px' }}>
+                        in {analysisResult.duration_seconds}s
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Audio Player */}
+                {audioUrl && (
+                  <div style={{ marginBottom: '16px', background: 'rgba(0,0,0,0.25)', borderRadius: '12px', padding: '14px 18px', border: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', gap: '14px' }}>
+                    <FileAudio size={20} color="var(--accent-cyan)" style={{ flexShrink: 0 }} />
+                    <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', flexShrink: 0 }}>Playback</span>
+                    <audio controls src={audioUrl} ref={audioRef} style={{ flex: 1, height: '36px', borderRadius: '8px' }} />
+                  </div>
+                )}
+
+                {/* Waveform with time axis + beat markers */}
+                <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '16px' }}>
+                  <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <span style={{ display: 'inline-block', width: 10, height: 10, background: analysisResult.ai_classification.is_disease ? 'var(--danger)' : 'var(--accent-cyan)', transform: 'rotate(45deg)' }}></span>
+                    Heartbeat peaks ({analysisResult.peak_times_seconds?.length ?? 0} detected)
+                  </span>
+                  <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>Duration: {analysisResult.duration_seconds}s</span>
+                </div>
+                <div style={{ width: '100%', height: '280px', background: 'rgba(0,0,0,0.35)', borderRadius: '12px', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.05)' }}>
+                  <WaveformCanvas
+                    waveform={analysisResult.waveform}
+                    peakVisIndices={analysisResult.peak_vis_indices}
+                    peakTimesSec={analysisResult.peak_times_seconds}
+                    duration={analysisResult.duration_seconds}
+                    isDisease={analysisResult.ai_classification.is_disease}
+                    canvasRefOut={waveformCanvasRef}
+                    audioRef={audioRef}
+                  />
+                </div>
+
+                {/* AI Probability Breakdown */}
+                <div style={{ marginTop: '24px', background: 'rgba(0,0,0,0.2)', borderRadius: '12px', padding: '24px', border: '1px solid rgba(255,255,255,0.05)' }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+                    <div style={{ color: 'var(--text-secondary)', fontSize: '1rem', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <Cpu size={18} color="var(--accent-cyan)" /> AI Probability Breakdown
+                    </div>
+                    <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', opacity: 0.7 }}>
+                      CardioScreen · Logistic Regression · 21 recordings
+                    </div>
+                  </div>
+
+                  {analysisResult.ai_classification.all_classes.map((cls, idx) => {
+                    const pct = (cls.probability * 100).toFixed(1);
+                    const isTop = cls.label === analysisResult.ai_classification.label;
+                    const isMurmur = cls.label.toLowerCase().includes('murmur') || cls.label.toLowerCase().includes('abnormal');
+                    const barColor = isMurmur ? 'var(--danger)' : 'var(--success)';
+
+                    return (
+                      <div key={idx} style={{ marginBottom: '16px' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '6px' }}>
+                          <span style={{ color: isTop ? 'white' : 'var(--text-secondary)', fontWeight: isTop ? 700 : 400, fontSize: '0.95rem' }}>
+                            {cls.label} {isTop && '★'}
+                          </span>
+                          <span style={{ color: isTop ? 'white' : 'var(--text-secondary)', fontWeight: 600 }}>
+                            {pct}%
+                          </span>
+                        </div>
+                        <div className="confidence-bar-bg" style={{ height: '10px', borderRadius: '5px' }}>
+                          <div className="confidence-bar-fill" style={{
+                            borderRadius: '5px',
+                            width: `${Math.max(2, pct)}%`,
+                            background: isTop ? barColor : 'rgba(255,255,255,0.15)',
+                            transition: 'width 1s ease'
+                          }}></div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Canine Reference Table */}
+              <div className="glass-card col-span-3" style={{ borderTop: '1px solid rgba(255,255,255,0.1)' }}>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '32px' }}>
+                  <div>
+                    <h3 style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--accent-cyan)' }}>
+                      <Activity size={18} /> Normal Heart Rate (Canine)
+                    </h3>
+                    <table style={{ width: '100%', fontSize: '0.85rem', borderCollapse: 'collapse', color: 'var(--text-secondary)' }}>
+                      <thead>
+                        <tr style={{ textAlign: 'left', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+                          <th style={{ padding: '8px 0' }}>Dog Size</th>
+                          <th style={{ padding: '8px 0' }}>Normal Range</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr><td style={{ padding: '8px 0' }}>Large (60lb+)</td><td style={{ color: 'white' }}>60 – 100 BPM</td></tr>
+                        <tr><td style={{ padding: '8px 0' }}>Medium (20–60lb)</td><td style={{ color: 'white' }}>80 – 120 BPM</td></tr>
+                        <tr><td style={{ padding: '8px 0' }}>Small (&lt;20lb)</td><td style={{ color: 'white' }}>100 – 160 BPM</td></tr>
+                        <tr><td style={{ padding: '8px 0' }}>Puppies</td><td style={{ color: 'white' }}>Up to 220 BPM</td></tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <div>
+                    <h3 style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--accent-cyan)' }}>
+                      <Heart size={18} /> Murmur Grading (Levine Scale)
+                    </h3>
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', fontSize: '0.8rem' }}>
+                      <div style={{ background: 'rgba(255,255,255,0.02)', padding: '8px', borderRadius: '4px' }}>
+                        <b style={{ color: 'white' }}>Grade I:</b> Very faint
+                      </div>
+                      <div style={{ background: 'rgba(255,255,255,0.02)', padding: '8px', borderRadius: '4px' }}>
+                        <b style={{ color: 'white' }}>Grade II:</b> Soft, easily heard
+                      </div>
+                      <div style={{ background: 'rgba(255,255,255,0.02)', padding: '8px', borderRadius: '4px' }}>
+                        <b style={{ color: 'white' }}>Grade III:</b> Intermediate
+                      </div>
+                      <div style={{ background: 'rgba(255,255,255,0.02)', padding: '8px', borderRadius: '4px' }}>
+                        <b style={{ color: 'white' }}>Grade IV:</b> Loud, no thrill
+                      </div>
+                      <div style={{ background: 'rgba(255,255,255,0.02)', padding: '8px', borderRadius: '4px' }}>
+                        <b style={{ color: 'white' }}>Grade V:</b> With palpable thrill
+                      </div>
+                      <div style={{ background: 'rgba(255,255,255,0.02)', padding: '8px', borderRadius: '4px' }}>
+                        <b style={{ color: 'white' }}>Grade VI:</b> Heard without stethoscope
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        )}
+
+      </main>
+    </div>
+  );
+}
+
+export default App;

webapp/src/index.css

@@ -0,0 +1,251 @@
+:root {
+  --bg-color: #0b0f19;
+  --bg-card: rgba(20, 26, 40, 0.6);
+  --bg-card-hover: rgba(30, 38, 56, 0.8);
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --accent-cyan: #06b6d4;
+  --accent-cyan-glow: rgba(6, 182, 212, 0.4);
+  --accent-blue: #3b82f6;
+  --accent-blue-glow: rgba(59, 130, 246, 0.4);
+  --danger: #ef4444;
+  --danger-glow: rgba(239, 68, 68, 0.4);
+  --success: #10b981;
+  --border-color: rgba(255, 255, 255, 0.08);
+  --card-radius: 16px;
+  --transition-fast: 0.2s ease;
+  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  line-height: 1.5;
+  overflow-x: hidden;
+  background-image:
+    radial-gradient(circle at 15% 50%, rgba(6, 182, 212, 0.1), transparent 25%),
+    radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.1), transparent 25%);
+  background-attachment: fixed;
+}
+
+/* Glass Card */
+.glass-card {
+  background: var(--bg-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border-color);
+  border-radius: var(--card-radius);
+  padding: 24px;
+  transition: all var(--transition-smooth);
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  opacity: 0;
+  transition: opacity var(--transition-smooth);
+}
+
+.glass-card:hover {
+  background: var(--bg-card-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.glass-card:hover::before {
+  opacity: 1;
+}
+
+/* Typography */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+}
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-family: 'Outfit', sans-serif;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  box-shadow: 0 4px 15px var(--accent-blue-glow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px var(--accent-cyan-glow);
+  filter: brightness(1.1);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, #ef4444, #b91c1c);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-family: 'Outfit', sans-serif;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  box-shadow: 0 4px 15px var(--danger-glow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  animation: pulse-danger 2s infinite;
+}
+
+.btn-danger:hover {
+  transform: translateY(-2px);
+  filter: brightness(1.2);
+}
+
+@keyframes pulse-danger {
+  0% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+
+  70% {
+    box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+}
+
+/* Layout */
+.app-container {
+  display: flex;
+  min-height: 100vh;
+  width: 100vw;
+}
+
+.sidebar {
+  width: 280px;
+  background: rgba(11, 15, 25, 0.8);
+  backdrop-filter: blur(20px);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  position: relative;
+  z-index: 10;
+}
+
+.main-content {
+  flex: 1;
+  padding: 32px 40px;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* Base Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s var(--transition-smooth) forwards;
+}
+
+.delay-100 {
+  animation-delay: 0.1s;
+}
+
+.delay-200 {
+  animation-delay: 0.2s;
+}
+
+.delay-300 {
+  animation-delay: 0.3s;
+}

webapp/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

webapp/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/hf-api': {
+        target: 'https://api-inference.huggingface.co',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/hf-api/, ''),
+      },
+    }
+  }
+})