Dual Model Files

README.md

@@ -10,4 +10,13 @@ pinned: false
 ---
 
 # FaultSense - Industrial Equipment Fault Predictor
-Real-time binary fault detection using LightGBM and Flask.
+Real-time binary fault detection using LightGBM and Flask.
+
+---
+title: FaultSense
+emoji: ⚡
+colorFrom: green
+colorTo: blue
+sdk: docker        # or "gradio" / "streamlit" if not using Docker
+app_port: 7860
+---

app.py

@@ -1,8 +1,6 @@
 """
-FaultSense — LightGBM Fault Prediction App
-Fixes applied:
-  1. Model loads at module level so gunicorn workers pick it up
-  2. Select dropdown works cross-platform
+FaultSense — LightGBM + Random Forest Fault Prediction App
+Both models trained at startup; UI lets user switch between them.
 """
 
 import os
@@ -20,6 +18,7 @@ from sklearn.metrics import (
 from sklearn.preprocessing import OneHotEncoder
 from sklearn.compose import ColumnTransformer
 from sklearn.pipeline import Pipeline
+from sklearn.ensemble import RandomForestClassifier
 import joblib
 from lightgbm import LGBMClassifier
 from flask import Flask, request, jsonify, render_template_string
@@ -28,9 +27,9 @@ from flask import Flask, request, jsonify, render_template_string
 # CONFIG
 # ─────────────────────────────────────────────
 
-
 DATA_PATH  = "synthetic_nim_parallel_10000.csv"
-MODEL_PATH = "/tmp/faultsense_model.joblib"
+LGBM_PATH  = "/tmp/faultsense_lgbm.joblib"
+RF_PATH    = "/tmp/faultsense_rf.joblib"
 
 DROP_COLS = ["location"]
 TARGET    = "faulty"
@@ -40,7 +39,7 @@ NUM_COLS  = ["temperature", "pressure", "vibration", "humidity"]
 RANDOM_STATE = 42
 THRESHOLD    = 0.5
 
-FIXED_PARAMS = dict(
+LGBM_PARAMS = dict(
     max_depth=8,
     num_leaves=50,
     min_child_samples=20,
@@ -49,14 +48,24 @@ FIXED_PARAMS = dict(
     class_weight="balanced",
     random_state=RANDOM_STATE,
     verbose=-1,
+    learning_rate=0.05,
+    n_estimators=100,
+)
+
+RF_PARAMS = dict(
+    n_estimators=200,
+    max_depth=10,
+    min_samples_split=10,
+    min_samples_leaf=5,
+    class_weight="balanced",
+    random_state=RANDOM_STATE,
+    n_jobs=-1,
 )
 
 BEST_CONFIG = {
-    "learning_rate": 0.05,
-    "n_estimators":  10,
-    "train_ratio":   0.50,
-    "val_ratio":     0.20,
-    "test_ratio":    0.30,
+    "train_ratio": 0.50,
+    "val_ratio":   0.20,
+    "test_ratio":  0.30,
 }
 
 EQUIPMENT_OPTIONS = ["pump", "compressor", "motor", "valve", "sensor"]
@@ -71,13 +80,11 @@ def make_preprocessor():
         ("num", "passthrough", NUM_COLS),
     ])
 
-def train_model(cfg: dict):
-    print(f"Training: lr={cfg['learning_rate']}, n_est={cfg['n_estimators']}")
+def load_data(cfg):
     df_raw = pd.read_csv(DATA_PATH)
     df_raw = df_raw.drop(columns=DROP_COLS, errors="ignore")
     X = df_raw.drop(columns=[TARGET])
     y = df_raw[TARGET]
-
     train_r, val_r, test_r = cfg["train_ratio"], cfg["val_ratio"], cfg["test_ratio"]
     X_trainval, X_test, y_trainval, y_test = train_test_split(
         X, y, test_size=test_r, stratify=y, random_state=RANDOM_STATE
@@ -87,43 +94,70 @@ def train_model(cfg: dict):
         X_trainval, y_trainval, test_size=val_relative,
         stratify=y_trainval, random_state=RANDOM_STATE
     )
+    return X_train, X_val, X_test, y_train, y_val, y_test
 
-    pipeline = Pipeline([
-        ("pre", make_preprocessor()),
-        ("clf", LGBMClassifier(
-            n_estimators=cfg["n_estimators"],
-            learning_rate=cfg["learning_rate"],
-            **FIXED_PARAMS
-        ))
-    ])
-    pipeline.fit(X_train, y_train)
-
+def compute_metrics(pipeline, X_test, y_test):
     y_prob = pipeline.predict_proba(X_test)[:, 1]
     y_pred = (y_prob >= THRESHOLD).astype(int)
-
-    test_metrics = {
+    return {
         "test_auc":       round(roc_auc_score(y_test, y_prob), 4),
         "test_accuracy":  round(accuracy_score(y_test, y_pred), 4),
         "test_precision": round(precision_score(y_test, y_pred, zero_division=0), 4),
         "test_recall":    round(recall_score(y_test, y_pred, zero_division=0), 4),
         "test_f1":        round(f1_score(y_test, y_pred, zero_division=0), 4),
         "test_logloss":   round(log_loss(y_test, y_prob), 4),
-    }
-    cm = confusion_matrix(y_test, y_pred).tolist()
-    artifact = {"pipeline": pipeline, "config": cfg, "test_metrics": test_metrics, "cm": cm}
-    print(f"Model saved → {MODEL_PATH}  AUC={test_metrics['test_auc']}  F1={test_metrics['test_f1']}")
-    return artifact
-
-def load_or_train():
-    if os.path.exists(MODEL_PATH):
-        print(f"Loading saved model from {MODEL_PATH}")
-        return joblib.load(MODEL_PATH)
-    return train_model(BEST_CONFIG)
+    }, confusion_matrix(y_test, y_pred).tolist()
+
+def train_lgbm(X_train, X_test, y_train, y_test):
+    print("Training LightGBM...")
+    pipeline = Pipeline([
+        ("pre", make_preprocessor()),
+        ("clf", LGBMClassifier(**LGBM_PARAMS))
+    ])
+    pipeline.fit(X_train, y_train)
+    metrics, cm = compute_metrics(pipeline, X_test, y_test)
+    print(f"LGBM  AUC={metrics['test_auc']}  F1={metrics['test_f1']}")
+    return {"pipeline": pipeline, "test_metrics": metrics, "cm": cm,
+            "config": {**BEST_CONFIG, "model": "LightGBM",
+                       "learning_rate": LGBM_PARAMS["learning_rate"],
+                       "n_estimators": LGBM_PARAMS["n_estimators"]}}
+
+def train_rf(X_train, X_test, y_train, y_test):
+    print("Training Random Forest...")
+    pipeline = Pipeline([
+        ("pre", make_preprocessor()),
+        ("clf", RandomForestClassifier(**RF_PARAMS))
+    ])
+    pipeline.fit(X_train, y_train)
+    metrics, cm = compute_metrics(pipeline, X_test, y_test)
+    print(f"RF    AUC={metrics['test_auc']}  F1={metrics['test_f1']}")
+    return {"pipeline": pipeline, "test_metrics": metrics, "cm": cm,
+            "config": {**BEST_CONFIG, "model": "Random Forest",
+                       "n_estimators": RF_PARAMS["n_estimators"],
+                       "max_depth": RF_PARAMS["max_depth"]}}
+
+def load_or_train_all():
+    X_train, X_val, X_test, y_train, y_val, y_test = load_data(BEST_CONFIG)
+    if os.path.exists(LGBM_PATH):
+        print(f"Loading LGBM from {LGBM_PATH}")
+        lgbm_artifact = joblib.load(LGBM_PATH)
+    else:
+        lgbm_artifact = train_lgbm(X_train, X_test, y_train, y_test)
+        joblib.dump(lgbm_artifact, LGBM_PATH)
+
+    if os.path.exists(RF_PATH):
+        print(f"Loading RF from {RF_PATH}")
+        rf_artifact = joblib.load(RF_PATH)
+    else:
+        rf_artifact = train_rf(X_train, X_test, y_train, y_test)
+        joblib.dump(rf_artifact, RF_PATH)
+
+    return {"lgbm": lgbm_artifact, "rf": rf_artifact}
 
 # ─────────────────────────────────────────────
-# LOAD MODEL AT MODULE LEVEL (runs under gunicorn)
+# LOAD MODELS AT MODULE LEVEL
 # ─────────────────────────────────────────────
-ARTIFACT = load_or_train()
+ARTIFACTS = load_or_train_all()
 
 # ─────────────────────────────────────────────
 # FLASK APP
@@ -143,7 +177,8 @@ HTML = r"""<!DOCTYPE html>
 :root {
   --bg: #0a0c10; --surface: #111318; --surface2: #181c24;
   --border: #232838; --accent: #00e5a0; --accent2: #ff4d6d;
-  --accent3: #4d9fff; --text: #e8eaf0; --muted: #6b7280;
+  --accent3: #4d9fff; --accent4: #f59e0b;
+  --text: #e8eaf0; --muted: #6b7280;
   --mono: 'Space Mono', monospace; --sans: 'DM Sans', sans-serif;
 }
 html { font-size: 16px; }
@@ -157,14 +192,30 @@ body::before {
 .blob-1 { background: var(--accent); top: -200px; left: -200px; }
 .blob-2 { background: var(--accent3); bottom: -200px; right: -100px; animation-delay: -6s; }
 @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,30px) scale(1.05); } }
-.wrapper { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
-header { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
+.wrapper { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; }
+header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
 .logo-mark { width: 44px; height: 44px; background: var(--accent); border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--bg); flex-shrink: 0; }
 header h1 { font-family: var(--mono); font-size: 1.5rem; letter-spacing: -.5px; }
 header p { font-size: .85rem; color: var(--muted); margin-top: 2px; }
 .badge { margin-left: auto; font-family: var(--mono); font-size: .7rem; background: rgba(0,229,160,.12); color: var(--accent); border: 1px solid rgba(0,229,160,.3); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
-.main-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
-@media (max-width: 860px) { .main-grid { grid-template-columns: 1fr; } }
+
+/* MODEL SELECTOR TABS */
+.model-tabs { display: flex; gap: 10px; margin-bottom: 24px; }
+.model-tab {
+  flex: 1; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--border);
+  background: var(--surface); cursor: pointer; font-family: var(--mono);
+  font-size: .8rem; color: var(--muted); transition: all .2s; text-align: center;
+  display: flex; flex-direction: column; gap: 4px; align-items: center;
+}
+.model-tab:hover { border-color: var(--accent); color: var(--text); }
+.model-tab.active.lgbm { border-color: var(--accent); background: rgba(0,229,160,.08); color: var(--accent); }
+.model-tab.active.rf   { border-color: var(--accent4); background: rgba(245,158,11,.08); color: var(--accent4); }
+.model-tab .tab-name { font-size: .95rem; font-weight: 700; }
+.model-tab .tab-desc { font-size: .65rem; color: inherit; opacity: .7; }
+.tab-auc { font-size: .7rem; opacity: .85; margin-top: 2px; }
+
+.main-grid { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; }
+@media (max-width: 900px) { .main-grid { grid-template-columns: 1fr; } }
 .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
 .card-title { font-family: var(--mono); font-size: .75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
 .card-title::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
@@ -206,16 +257,23 @@ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px;
 input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.3); }
 input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: none; }
 .slider-val { font-family: var(--mono); font-size: .85rem; color: var(--accent); min-width: 60px; text-align: right; }
+
 .btn-predict { margin-top: 24px; width: 100%; padding: 14px; background: var(--accent); color: var(--bg); border: none; border-radius: 12px; font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: transform .15s, box-shadow .2s; }
 .btn-predict:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(0,229,160,.5); }
-.btn-predict:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
+.btn-predict.rf-active { background: var(--accent4); }
+.btn-predict.rf-active:hover { box-shadow: 0 0 32px rgba(245,158,11,.5); }
+.btn-predict:disabled { background: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }
+
 .result-card { border-radius: 16px; padding: 28px; border: 1px solid var(--border); background: var(--surface); transition: border-color .4s; }
 .result-card.faulty { border-color: var(--accent2); background: rgba(255,77,109,.06); }
 .result-card.healthy { border-color: var(--accent); background: rgba(0,229,160,.06); }
 .verdict { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -1px; margin-bottom: 6px; }
 .verdict.faulty { color: var(--accent2); }
 .verdict.healthy { color: var(--accent); }
-.verdict-sub { font-size: .85rem; color: var(--muted); margin-bottom: 24px; }
+.verdict-sub { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
+.model-used-tag { display: inline-block; font-family: var(--mono); font-size: .65rem; padding: 3px 8px; border-radius: 6px; margin-bottom: 20px; }
+.model-used-tag.lgbm { background: rgba(0,229,160,.12); color: var(--accent); border: 1px solid rgba(0,229,160,.3); }
+.model-used-tag.rf   { background: rgba(245,158,11,.12); color: var(--accent4); border: 1px solid rgba(245,158,11,.3); }
 .prob-bar-wrap { margin-bottom: 24px; }
 .prob-label { font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
 .prob-track { height: 10px; background: var(--border); border-radius: 10px; overflow: hidden; }
@@ -226,17 +284,39 @@ input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius:
 .mini-metric { background: var(--surface2); border-radius: 10px; padding: 12px; border: 1px solid var(--border); }
 .mini-metric .mm-val { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--accent3); }
 .mini-metric .mm-key { font-size: .7rem; color: var(--muted); margin-top: 2px; font-family: var(--mono); }
+
+/* METRICS COMPARISON TABLE */
+.compare-table { width: 100%; border-collapse: collapse; }
+.compare-table th { font-family: var(--mono); font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
+.compare-table th.lgbm-col { color: var(--accent); }
+.compare-table th.rf-col   { color: var(--accent4); }
+.compare-table td { font-family: var(--mono); font-size: .78rem; padding: 9px 10px; border-bottom: 1px solid var(--border); }
+.compare-table tr:last-child td { border-bottom: none; }
+.compare-table td.metric-name { color: var(--muted); font-size: .7rem; }
+.compare-table td.win { font-weight: 700; }
+.compare-table td.win.lgbm { color: var(--accent); }
+.compare-table td.win.rf   { color: var(--accent4); }
+.win-tag { font-size: .55rem; padding: 1px 5px; border-radius: 4px; margin-left: 5px; vertical-align: middle; }
+.win-tag.lgbm { background: rgba(0,229,160,.15); color: var(--accent); }
+.win-tag.rf   { background: rgba(245,158,11,.15); color: var(--accent4); }
+
 .info-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
 .info-row:last-child { border-bottom: none; }
 .info-key { color: var(--muted); font-family: var(--mono); font-size: .72rem; }
 .info-val { font-family: var(--mono); color: var(--text); font-weight: 700; }
 .info-val.green { color: var(--accent); }
+.info-val.amber { color: var(--accent4); }
+
 .history-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
 .hist-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-size: .78rem; }
 .hist-equip { color: var(--muted); font-family: var(--mono); font-size: .7rem; }
 .hist-badge { font-family: var(--mono); font-size: .68rem; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
 .hist-badge.faulty { background: rgba(255,77,109,.2); color: var(--accent2); }
 .hist-badge.healthy { background: rgba(0,229,160,.2); color: var(--accent); }
+.hist-model-tag { font-family: var(--mono); font-size: .58rem; padding: 2px 6px; border-radius: 4px; margin-top: 3px; display: inline-block; }
+.hist-model-tag.lgbm { background: rgba(0,229,160,.1); color: var(--accent); }
+.hist-model-tag.rf   { background: rgba(245,158,11,.1); color: var(--accent4); }
+
 .spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(10,12,16,.3); border-top-color: var(--bg); border-radius: 50%; animation: spin .6s linear infinite; margin: 0 auto; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .btn-predict.loading .btn-text { display: none; }
@@ -255,11 +335,25 @@ input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius:
     <div class="logo-mark">FS</div>
     <div>
       <h1>FaultSense</h1>
-      <p>LightGBM Equipment Fault Predictor</p>
+      <p>Multi-Model Equipment Fault Predictor</p>
     </div>
-    <div class="badge" id="model-badge">Model Loading…</div>
+    <div class="badge" id="model-badge">Loading Models…</div>
   </header>
 
+  <!-- MODEL SELECTOR TABS -->
+  <div class="model-tabs" id="model-tabs">
+    <div class="model-tab active lgbm" id="tab-lgbm" onclick="selectModel('lgbm')">
+      <span class="tab-name">⚡ LightGBM</span>
+      <span class="tab-desc">Gradient Boosting</span>
+      <span class="tab-auc" id="lgbm-tab-auc">Loading…</span>
+    </div>
+    <div class="model-tab rf" id="tab-rf" onclick="selectModel('rf')">
+      <span class="tab-name">🌲 Random Forest</span>
+      <span class="tab-desc">Ensemble Trees</span>
+      <span class="tab-auc" id="rf-tab-auc">Loading…</span>
+    </div>
+  </div>
+
   <div class="main-grid">
     <div style="display:flex;flex-direction:column;gap:20px;">
       <div class="card">
@@ -321,12 +415,20 @@ input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius:
           </div>
 
         </div>
-        <button class="btn-predict" id="predict-btn" onclick="runPredict()">
+        <button class="btn-predict lgbm-active" id="predict-btn" onclick="runPredict()">
           <span class="btn-text">⚡ Run Prediction</span>
           <div class="spinner"></div>
         </button>
       </div>
 
+      <!-- METRICS COMPARISON -->
+      <div class="card">
+        <div class="card-title">Model Comparison</div>
+        <div id="compare-content">
+          <div style="color:var(--muted);font-size:.8rem;font-family:var(--mono);text-align:center;padding:12px 0;">Loading…</div>
+        </div>
+      </div>
+
       <div class="card">
         <div class="card-title">Prediction History</div>
         <div class="history-list" id="history-list">
@@ -339,11 +441,12 @@ input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius:
       <div class="result-card" id="result-card">
         <div class="idle-state" id="idle-state">
           <div class="idle-icon">🔬</div>
-          <p>Enter sensor readings<br>and run a prediction<br>to see results here.</p>
+          <p>Select a model, enter sensor<br>readings, and run a prediction<br>to see results here.</p>
         </div>
         <div id="result-content" style="display:none;">
           <div class="verdict" id="verdict-text"></div>
           <div class="verdict-sub" id="verdict-sub"></div>
+          <div id="model-used-tag" class="model-used-tag lgbm"></div>
           <div class="prob-bar-wrap">
             <div class="prob-label"><span>Fault Probability</span><span id="prob-pct"></span></div>
             <div class="prob-track"><div class="prob-fill" id="prob-fill" style="width:0%"></div></div>
@@ -353,7 +456,7 @@ input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius:
       </div>
 
       <div class="card">
-        <div class="card-title">Model Configuration</div>
+        <div class="card-title" id="model-config-title">Active Model Config</div>
         <div id="model-info">
           <div style="color:var(--muted);font-size:.8rem;font-family:var(--mono);text-align:center;padding:12px 0;">Loading…</div>
         </div>
@@ -366,6 +469,19 @@ input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius:
 
 <script>
 let csOpen = false;
+let activeModel = 'lgbm';
+let modelData = {};
+
+function selectModel(model) {
+  activeModel = model;
+  document.getElementById('tab-lgbm').className = 'model-tab' + (model === 'lgbm' ? ' active lgbm' : '');
+  document.getElementById('tab-rf').className   = 'model-tab' + (model === 'rf'   ? ' active rf'   : '');
+  const btn = document.getElementById('predict-btn');
+  btn.className = model === 'lgbm' ? 'btn-predict lgbm-active' : 'btn-predict rf-active';
+  btn.querySelector('.btn-text').textContent = model === 'lgbm' ? '⚡ Run Prediction' : '🌲 Run Prediction';
+  updateModelInfo(model);
+}
+
 function toggleDropdown() {
   csOpen = !csOpen;
   document.getElementById('cs-trigger').classList.toggle('open', csOpen);
@@ -387,37 +503,94 @@ document.addEventListener('click', function(e) {
     document.getElementById('cs-options').classList.remove('open');
   }
 });
+
 async function loadModelInfo() {
   try {
     const res = await fetch('/model_info');
-    const data = await res.json();
-    if (data.error) { showToast('Model not ready: ' + data.error); return; }
-    document.getElementById('model-badge').textContent =
-      'LR=' + data.config.learning_rate + ' · N=' + data.config.n_estimators;
-    const rows = [
-      ['Learning Rate', data.config.learning_rate],
-      ['N Estimators',  data.config.n_estimators],
-      ['Split', data.config.train_ratio + '/' + data.config.val_ratio + '/' + data.config.test_ratio],
-      ['Test AUC',      (data.test_metrics.test_auc      * 100).toFixed(2) + '%'],
-      ['Test F1',       (data.test_metrics.test_f1       * 100).toFixed(2) + '%'],
-      ['Test Accuracy', (data.test_metrics.test_accuracy * 100).toFixed(2) + '%'],
-      ['Precision',     (data.test_metrics.test_precision* 100).toFixed(2) + '%'],
-      ['Recall',        (data.test_metrics.test_recall   * 100).toFixed(2) + '%'],
+    modelData = await res.json();
+    if (modelData.error) { showToast('Model error: ' + modelData.error); return; }
+
+    const lg = modelData.lgbm, rf = modelData.rf;
+    document.getElementById('lgbm-tab-auc').textContent = 'AUC ' + (lg.test_metrics.test_auc * 100).toFixed(1) + '%';
+    document.getElementById('rf-tab-auc').textContent   = 'AUC ' + (rf.test_metrics.test_auc  * 100).toFixed(1) + '%';
+    document.getElementById('model-badge').textContent  = '2 Models Ready';
+
+    // Build comparison table
+    const metrics = [
+      ['AUC',       'test_auc'],
+      ['Accuracy',  'test_accuracy'],
+      ['Precision', 'test_precision'],
+      ['Recall',    'test_recall'],
+      ['F1 Score',  'test_f1'],
+      ['Log Loss',  'test_logloss'],
     ];
-    document.getElementById('model-info').innerHTML = rows.map(([k,v],i) =>
-      '<div class="info-row"><span class="info-key">' + k + '</span>' +
-      '<span class="info-val' + (i >= 3 ? ' green' : '') + '">' + v + '</span></div>'
-    ).join('');
+    const rows = metrics.map(([label, key]) => {
+      const lv = lg.test_metrics[key], rv = rf.test_metrics[key];
+      const higherBetter = key !== 'test_logloss';
+      const lgWins = higherBetter ? lv > rv : lv < rv;
+      const rfWins = higherBetter ? rv > lv : rv < lv;
+      const fmt = v => key === 'test_logloss' ? v.toFixed(4) : (v * 100).toFixed(2) + '%';
+      return `<tr>
+        <td class="metric-name">${label}</td>
+        <td class="${lgWins ? 'win lgbm' : ''}">${fmt(lv)}${lgWins ? '<span class="win-tag lgbm">▲</span>' : ''}</td>
+        <td class="${rfWins ? 'win rf' : ''}">${fmt(rv)}${rfWins ? '<span class="win-tag rf">▲</span>' : ''}</td>
+      </tr>`;
+    }).join('');
+    document.getElementById('compare-content').innerHTML = `
+      <table class="compare-table">
+        <thead><tr>
+          <th>Metric</th>
+          <th class="lgbm-col">⚡ LightGBM</th>
+          <th class="rf-col">🌲 Random Forest</th>
+        </tr></thead>
+        <tbody>${rows}</tbody>
+      </table>`;
+
+    updateModelInfo('lgbm');
   } catch(e) {
-    document.getElementById('model-badge').textContent = 'Model Error';
+    document.getElementById('model-badge').textContent = 'Load Error';
   }
 }
 
+function updateModelInfo(model) {
+  if (!modelData[model]) return;
+  const d = modelData[model];
+  const isLgbm = model === 'lgbm';
+  const color = isLgbm ? 'green' : 'amber';
+
+  const rows = isLgbm ? [
+    ['Model',         'LightGBM'],
+    ['Learning Rate', d.config.learning_rate],
+    ['N Estimators',  d.config.n_estimators],
+    ['Split',         d.config.train_ratio + '/' + d.config.val_ratio + '/' + d.config.test_ratio],
+  ] : [
+    ['Model',        'Random Forest'],
+    ['N Estimators', d.config.n_estimators],
+    ['Max Depth',    d.config.max_depth],
+    ['Split',        d.config.train_ratio + '/' + d.config.val_ratio + '/' + d.config.test_ratio],
+  ];
+
+  const metricRows = [
+    ['Test AUC',      (d.test_metrics.test_auc       * 100).toFixed(2) + '%'],
+    ['Test F1',       (d.test_metrics.test_f1        * 100).toFixed(2) + '%'],
+    ['Test Accuracy', (d.test_metrics.test_accuracy  * 100).toFixed(2) + '%'],
+    ['Precision',     (d.test_metrics.test_precision * 100).toFixed(2) + '%'],
+    ['Recall',        (d.test_metrics.test_recall    * 100).toFixed(2) + '%'],
+  ];
+
+  document.getElementById('model-info').innerHTML =
+    [...rows, ...metricRows].map(([k, v], i) =>
+      '<div class="info-row"><span class="info-key">' + k + '</span>' +
+      '<span class="info-val' + (i >= rows.length ? ' ' + color : '') + '">' + v + '</span></div>'
+    ).join('');
+}
+
 async function runPredict() {
   const btn = document.getElementById('predict-btn');
   btn.classList.add('loading');
   btn.disabled = true;
   const payload = {
+    model:       activeModel,
     equipment:   document.getElementById('equipment').value,
     temperature: parseFloat(document.getElementById('temperature').value),
     pressure:    parseFloat(document.getElementById('pressure').value),
@@ -446,6 +619,7 @@ function showResult(data, payload) {
   const isFaulty = data.prediction === 1;
   const prob = (data.probability * 100).toFixed(1);
   const cls  = isFaulty ? 'faulty' : 'healthy';
+  const isLgbm = data.model === 'lgbm';
   document.getElementById('result-card').className = 'result-card ' + cls;
   document.getElementById('idle-state').style.display = 'none';
   document.getElementById('result-content').style.display = 'block';
@@ -455,6 +629,9 @@ function showResult(data, payload) {
   document.getElementById('verdict-sub').textContent = isFaulty
     ? 'High fault probability — immediate inspection recommended.'
     : 'Equipment readings within normal operating range.';
+  const tag = document.getElementById('model-used-tag');
+  tag.className = 'model-used-tag ' + (isLgbm ? 'lgbm' : 'rf');
+  tag.textContent = isLgbm ? '⚡ LightGBM' : '🌲 Random Forest';
   document.getElementById('prob-pct').textContent = prob + '%';
   const fill = document.getElementById('prob-fill');
   fill.className = 'prob-fill ' + cls;
@@ -472,13 +649,17 @@ function showResult(data, payload) {
 function addHistory(data, payload) {
   const isFaulty = data.prediction === 1;
   const cls  = isFaulty ? 'faulty' : 'healthy';
+  const isLgbm = data.model === 'lgbm';
   const list = document.getElementById('history-list');
-  if (list.children.length === 1 && list.firstElementChild.style.color) list.innerHTML = '';
+  if (list.children.length === 1 && list.firstElementChild.style.color !== undefined
+      && list.firstElementChild.querySelector) list.innerHTML = '';
+  if (list.children.length === 1 && !list.firstElementChild.classList.contains('hist-item')) list.innerHTML = '';
   const item = document.createElement('div');
   item.className = 'hist-item';
   item.innerHTML =
     '<div><div style="font-family:var(--mono);font-size:.78rem;">' + payload.equipment + '</div>' +
-    '<div class="hist-equip">T=' + payload.temperature + '° P=' + payload.pressure + 'bar V=' + payload.vibration + '</div></div>' +
+    '<div class="hist-equip">T=' + payload.temperature + '° P=' + payload.pressure + 'bar V=' + payload.vibration + '</div>' +
+    '<span class="hist-model-tag ' + (isLgbm ? 'lgbm' : 'rf') + '">' + (isLgbm ? '⚡ LGBM' : '🌲 RF') + '</span></div>' +
     '<span class="hist-badge ' + cls + '">' + (isFaulty ? 'FAULT' : 'OK') + ' · ' + (data.probability*100).toFixed(1) + '%</span>';
   list.prepend(item);
   if (list.children.length > 20) list.removeChild(list.lastChild);
@@ -503,24 +684,30 @@ loadModelInfo();
 
 @app.route("/")
 def index():
-    options = "\n".join(
-        f'<option value="{e}">{e.capitalize()}</option>'
-        for e in EQUIPMENT_OPTIONS
-    )
-    return render_template_string(HTML, equipment_options=options)
+    return render_template_string(HTML)
 
 @app.route("/model_info")
 def model_info():
-    cfg = ARTIFACT["config"]
     return jsonify({
-        "config":       cfg,
-        "test_metrics": ARTIFACT["test_metrics"],
-        "cm":           ARTIFACT["cm"],
+        "lgbm": {
+            "config":       ARTIFACTS["lgbm"]["config"],
+            "test_metrics": ARTIFACTS["lgbm"]["test_metrics"],
+            "cm":           ARTIFACTS["lgbm"]["cm"],
+        },
+        "rf": {
+            "config":       ARTIFACTS["rf"]["config"],
+            "test_metrics": ARTIFACTS["rf"]["test_metrics"],
+            "cm":           ARTIFACTS["rf"]["cm"],
+        },
     })
 
 @app.route("/predict", methods=["POST"])
 def predict():
     body = request.get_json(force=True)
+    model_key = body.get("model", "lgbm")
+    if model_key not in ARTIFACTS:
+        return jsonify({"error": f"Unknown model '{model_key}'. Use 'lgbm' or 'rf'."}), 400
+
     try:
         row = pd.DataFrame([{
             "equipment":   body["equipment"],
@@ -532,11 +719,13 @@ def predict():
     except (KeyError, ValueError) as e:
         return jsonify({"error": f"Bad input: {e}"}), 400
 
-    prob = float(ARTIFACT["pipeline"].predict_proba(row)[0, 1])
+    artifact = ARTIFACTS[model_key]
+    prob = float(artifact["pipeline"].predict_proba(row)[0, 1])
     pred = int(prob >= THRESHOLD)
     confidence = "HIGH" if prob > 0.85 or prob < 0.15 else "MEDIUM" if prob > 0.65 or prob < 0.35 else "LOW"
 
     return jsonify({
+        "model":       model_key,
         "prediction":  pred,
         "probability": round(prob, 4),
         "confidence":  confidence,

requirements.txt

@@ -37,3 +37,12 @@ openpyxl>=3.1.0
 
 
 gunicorn>=21.2.0
+
+
+flask
+lightgbm
+scikit-learn
+pandas
+numpy
+joblib
+gunicorn