Update app.py

app.py

@@ -11,19 +11,9 @@
 #     3) Final consensus (comparison + next step)
 # - Adds collapsible detailed report per image
 # - Keeps gallery, adds legend, better labels
+# - Fixes welcome screen rendering (uses gr.HTML + inline styles; no raw HTML shown)
 #
 # HF Spaces: use relative weight paths (edit below if needed)
-#
-# Requirements (requirements.txt):
-# gradio
-# torch
-# torchvision
-# timm
-# opencv-python
-# pillow
-# transformers
-# einops
-# open_clip_torch
 
 import os
 import cv2
@@ -70,10 +60,10 @@ RADIO_GATE_DEFAULT = 0.21
 
 # ---- Consensus logic thresholds ----
 TBNET_SCREEN_THR = 0.30
-TBNET_MARGIN = 0.03   # (kept for compatibility / future use)
+TBNET_MARGIN = 0.03   # kept for compatibility / future use
 
 RADIO_SCREEN_THR = RADIO_THR_SCREEN
-RADIO_MARGIN = 0.02   # (kept for compatibility / future use)
+RADIO_MARGIN = 0.02   # kept for compatibility / future use
 
 # ---- Mask fail-safes ----
 FAIL_COV = 0.10
@@ -99,7 +89,6 @@ If clinical suspicion exists (fever, weight loss, immunosuppression, known expos
 recommend **CBNAAT / GeneXpert**, sputum studies, and/or **CT chest** regardless of AI output.
 """
 
-# Friendly labels still map to GREEN/YELLOW/RED logic
 REPORT_LABELS = {
     "GREEN": {
         "title": "LOW TB LIKELIHOOD / Pulmonary T.B not detected by A.I",
@@ -135,6 +124,51 @@ CLINICAL_GUIDANCE = (
 )
 
 
+# ============================================================
+# WELCOME HTML (minimal + main features only)
+# IMPORTANT: rendered with gr.HTML (not gr.Markdown)
+# ============================================================
+WELCOME_HTML = f"""
+<div style="max-width:980px;margin:0 auto;">
+  <div style="padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);">
+    <div style="font-size:18px;font-weight:900;margin-bottom:6px;">
+      TB X-ray Assistant <span style="opacity:0.75;font-weight:700;font-size:13px;">(research / decision support)</span>
+    </div>
+
+    <div style="opacity:0.9;font-size:13px;line-height:1.35;">
+      Upload chest X-rays to get an AI screening score, heatmaps, and a simple consensus output.
+    </div>
+
+    <div style="margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;">
+      <span style="font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);">
+        <b>{MODEL_NAME_TBNET}</b> + Grad-CAM
+      </span>
+      <span style="font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);">
+        Auto lung mask + fail-safe
+      </span>
+      <span style="font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);">
+        <b>{MODEL_NAME_RADIO}</b> (optional)
+      </span>
+      <span style="font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);">
+        Consensus: ✅ LOW · ⚠️ INDET · ⚠️ SCREEN+ · 🚩 TB+
+      </span>
+      <span style="font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);">
+        Phone/WhatsApp Mode
+      </span>
+    </div>
+
+    <div style="margin-top:10px;opacity:0.85;font-size:12.5px;">
+      <b>Tip:</b> Turn on Phone/WhatsApp Mode for phone photos, WhatsApp-forwards, or screenshots with borders.
+    </div>
+  </div>
+
+  <div style="margin-top:12px;padding:10px 12px;border-left:5px solid #f59e0b;border-radius:12px;background:rgba(245,158,11,0.10);font-size:12.5px;line-height:1.35;">
+    <b>Clinical disclaimer:</b> Not diagnostic. If TB is suspected clinically, pursue CBNAAT/GeneXpert/sputum and/or CT chest regardless of AI output.
+  </div>
+</div>
+"""
+
+
 # ============================================================
 # UX HELPERS
 # ============================================================
@@ -149,12 +183,10 @@ def pretty_state(s: str) -> str:
 
 
 def html_escape(s: str) -> str:
-    # minimal escaping for safety in HTML blocks
     return (s or "").replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
 
 
 def badge_color_for_state(state: str) -> str:
-    # soft visual cue; works in both dark/light
     if state == "TB+":
         return "rgba(239,68,68,0.18)"   # red
     if state == "SCREEN+":
@@ -181,7 +213,8 @@ class DoubleConv(nn.Module):
             nn.ReLU(inplace=True),
         )
 
-    def forward(self, x): return self.net(x)
+    def forward(self, x):
+        return self.net(x)
 
 
 class LungUNet(nn.Module):
@@ -225,7 +258,8 @@ class TBNet(nn.Module):
         self.backbone = timm.create_model(backbone, pretrained=False, num_classes=0, global_pool="avg")
         self.fc = nn.Linear(self.backbone.num_features, 1)
 
-    def forward(self, x): return self.fc(self.backbone(x)).view(-1)
+    def forward(self, x):
+        return self.fc(self.backbone(x)).view(-1)
 
 
 def load_tb_weights(model: nn.Module, ckpt_path: str, device: torch.device):
@@ -241,8 +275,11 @@ class GradCAM:
         target_layer.register_forward_hook(self._fwd)
         target_layer.register_full_backward_hook(self._bwd)
 
-    def _fwd(self, _, __, out): self.activ = out
-    def _bwd(self, _, grad_in, grad_out): self.grad = grad_out[0]
+    def _fwd(self, _, __, out):
+        self.activ = out
+
+    def _bwd(self, _, grad_in, grad_out):
+        self.grad = grad_out[0]
 
     def generate(self, x: torch.Tensor) -> Tuple[np.ndarray, float, float]:
         with torch.enable_grad():
@@ -305,7 +342,9 @@ def border_fraction(gray_u8: np.ndarray) -> float:
     left = gray_u8[:, :b]
     right = gray_u8[:, -b:]
 
-    def frac_border(x): return float(((x < 15) | (x > 240)).mean())
+    def frac_border(x):
+        return float(((x < 15) | (x > 240)).mean())
+
     return float(np.mean([frac_border(top), frac_border(bot), frac_border(left), frac_border(right)]))
 
 
@@ -325,22 +364,29 @@ def phone_quality_report(gray_u8: np.ndarray) -> Tuple[float, List[str]]:
 
     if likely_phone:
         if sharp < 40:
-            score -= 25; warnings.append("Blurry / motion blur detected (likely phone capture).")
+            score -= 25
+            warnings.append("Blurry / motion blur detected (likely phone capture).")
         elif sharp < 80:
-            score -= 12; warnings.append("Slight blur detected.")
+            score -= 12
+            warnings.append("Slight blur detected.")
     else:
         if sharp < 30:
-            score -= 8; warnings.append("Low fine detail (possible downsampling).")
+            score -= 8
+            warnings.append("Low fine detail (possible downsampling).")
 
     if hi_clip > 0.05:
-        score -= 15; warnings.append("Overexposed highlights (washed-out areas).")
+        score -= 15
+        warnings.append("Overexposed highlights (washed-out areas).")
     if lo_clip > 0.10:
-        score -= 12; warnings.append("Underexposed shadows (very dark areas).")
+        score -= 12
+        warnings.append("Underexposed shadows (very dark areas).")
 
     if border > 0.55:
-        score -= 18; warnings.append("Large border/margins detected (possible screenshot/phone framing).")
+        score -= 18
+        warnings.append("Large border/margins detected (possible screenshot/phone framing).")
     elif border > 0.35:
-        score -= 10; warnings.append("Some border/margins detected.")
+        score -= 10
+        warnings.append("Some border/margins detected.")
 
     return float(np.clip(score, 0, 100)), warnings
 
@@ -349,23 +395,28 @@ def auto_border_crop(gray_u8: np.ndarray) -> np.ndarray:
     g = gray_u8.copy()
     g_blur = cv2.GaussianBlur(g, (5, 5), 0)
     _, th = cv2.threshold(g_blur, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
-    if th.mean() > 127: th = 255 - th
+    if th.mean() > 127:
+        th = 255 - th
 
     k = max(3, int(0.01 * min(g.shape)))
     kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (k, k))
     th = cv2.morphologyEx(th, cv2.MORPH_CLOSE, kernel, iterations=2)
 
     contours, _ = cv2.findContours(th, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
-    if not contours: return gray_u8
+    if not contours:
+        return gray_u8
 
     c = max(contours, key=cv2.contourArea)
     x, y, w, h = cv2.boundingRect(c)
     H, W = gray_u8.shape
-    if w * h < 0.20 * (H * W): return gray_u8
+    if w * h < 0.20 * (H * W):
+        return gray_u8
 
     pad = int(0.03 * min(H, W))
-    x1 = max(0, x - pad); y1 = max(0, y - pad)
-    x2 = min(W, x + w + pad); y2 = min(H, y + h + pad)
+    x1 = max(0, x - pad)
+    y1 = max(0, y - pad)
+    x2 = min(W, x + w + pad)
+    y2 = min(H, y + h + pad)
     return gray_u8[y1:y2, x1:x2]
 
 
@@ -493,8 +544,6 @@ def recommendation_for_band(band: Optional[str]) -> str:
 # CONSENSUS LOGIC (TBNet vs RADIO)
 # ============================================================
 def tbnet_state(tb_prob: float, tb_band: str) -> str:
-    # IMPORTANT UX FIX:
-    # If TBNet band is YELLOW, treat it as INDET (not LOW).
     if tb_band == "RED":
         return "TB+"
     if tb_band == "YELLOW":
@@ -523,8 +572,6 @@ def build_consensus(
     Returns:
       consensus_label, consensus_detail, tb_state, radio_state
     """
-
-    # TBNet unavailable => consensus is N/A (fail-safe)
     if tb_prob is None or tb_band is None:
         return (
             "N/A",
@@ -533,7 +580,6 @@ def build_consensus(
             "N/A",
         )
 
-    # Choose RADIO primary score
     if radio_masked is not None:
         radio_primary = radio_masked
         radio_used = "MASKED"
@@ -544,7 +590,6 @@ def build_consensus(
     tb_state = tbnet_state(tb_prob, tb_band)
 
     if radio_primary is None:
-        # RADIO disabled or errored; TBNet-only
         return (
             "TBNet only",
             f"{MODEL_NAME_RADIO} unavailable → TBNet state={tb_state}, p={tb_prob:.4f} (band={tb_band}).",
@@ -555,7 +600,6 @@ def build_consensus(
     radio_state = radio_state_from_prob(radio_primary)
     rb = f" (RADIO band={radio_band})" if radio_band else ""
 
-    # If either is INDET, handle explicitly
     if tb_state == "INDET" and radio_state == "INDET":
         return (
             "AGREE: INDET",
@@ -580,7 +624,6 @@ def build_consensus(
             radio_state,
         )
 
-    # Perfect agreement
     if tb_state == radio_state:
         return (
             f"AGREE: {tb_state}",
@@ -589,7 +632,6 @@ def build_consensus(
             radio_state,
         )
 
-    # Strong disagreement when one is LOW and other is SCREEN+/TB+
     if (tb_state in ("SCREEN+", "TB+") and radio_state == "LOW") or (radio_state in ("SCREEN+", "TB+") and tb_state == "LOW"):
         return (
             "DISAGREE",
@@ -598,7 +640,6 @@ def build_consensus(
             radio_state,
         )
 
-    # Otherwise mixed (e.g., SCREEN+ vs TB+)
     return (
         "MIXED",
         f"Mixed: TBNet={tb_state} (band={tb_band}, p={tb_prob:.4f}) vs RADIO={radio_state} ({radio_used})={radio_primary:.4f}{rb}.",
@@ -624,8 +665,10 @@ class ModelBundle:
             transforms.ToPILImage(),
             transforms.Resize((224, 224)),
             transforms.ToTensor(),
-            transforms.Normalize(mean=[0.485, 0.456, 0.406],
-                                 std=[0.229, 0.224, 0.225]),
+            transforms.Normalize(
+                mean=[0.485, 0.456, 0.406],
+                std=[0.229, 0.224, 0.225]
+            ),
         ])
 
     def load(self, tb_weights: str, lung_weights: str, backbone: str = "efficientnet_b0"):
@@ -740,11 +783,13 @@ def radio_overlay_heatmap(rgb_u8: np.ndarray, heatmap01: np.ndarray, alpha: floa
 
 
 @torch.inference_mode()
-def radio_predict_from_arrays(gray_vis_u8: np.ndarray,
-                             lung_mask_u8: np.ndarray,
-                             coverage: float,
-                             device: torch.device,
-                             gate_threshold: float) -> Dict[str, Any]:
+def radio_predict_from_arrays(
+    gray_vis_u8: np.ndarray,
+    lung_mask_u8: np.ndarray,
+    coverage: float,
+    device: torch.device,
+    gate_threshold: float
+) -> Dict[str, Any]:
     RADIO_BUNDLE.load(device=device)
     dtype = torch.float16 if device.type == "cuda" else torch.float32
 
@@ -835,7 +880,6 @@ def analyze_one_image(
     fail_cov: float = FAIL_COV,
     warn_cov: float = WARN_COV,
 ) -> Dict[str, Any]:
-
     BUNDLE.load(tb_weights, lung_weights, backbone)
     device = BUNDLE.device
 
@@ -852,8 +896,8 @@ def analyze_one_image(
         mask256 = torch.sigmoid(mask_logits)[0, 0].cpu().numpy()
 
     mask256_bin = (mask256 > 0.5).astype(np.uint8)
-
     mask256_bin = keep_top_k_components(mask256_bin, k=2)
+
     k = max(3, int(0.02 * 256))
     kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (k, k))
     mask256_bin = cv2.morphologyEx(mask256_bin, cv2.MORPH_CLOSE, kernel, iterations=1)
@@ -951,10 +995,14 @@ def analyze_one_image(
     cv2.putText(overlay_annotated, text2, (8, 42), cv2.FONT_HERSHEY_SIMPLEX, 0.50, (0, 0, 0), 1)
 
     warnings = []
-    if phone_mode: warnings.append("Phone/WhatsApp mode enabled; artifacts possible.")
-    if q_score < 55: warnings.append("Suboptimal image quality limits AI reliability.")
-    if coverage < warn_cov: warnings.append(f"Partial lung segmentation ({coverage*100:.1f}% coverage).")
-    if diffuse: warnings.append("Diffuse, non-focal AI attention pattern; TB-specific features not identified.")
+    if phone_mode:
+        warnings.append("Phone/WhatsApp mode enabled; artifacts possible.")
+    if q_score < 55:
+        warnings.append("Suboptimal image quality limits AI reliability.")
+    if coverage < warn_cov:
+        warnings.append(f"Partial lung segmentation ({coverage*100:.1f}% coverage).")
+    if diffuse:
+        warnings.append("Diffuse, non-focal AI attention pattern; TB-specific features not identified.")
     warnings.extend(q_warn)
 
     return {
@@ -1005,7 +1053,7 @@ def run_analysis(
     gallery_items = []
     details_md: List[str] = []
 
-    # Top banner (legend / how to read)
+    # Top banner
     summary_md.append(f"""
 <div style="border:1px solid rgba(255,255,255,0.10); border-radius:14px; padding:12px; margin:10px 0;">
   <div style="font-size:18px; font-weight:900;">Results</div>
@@ -1041,9 +1089,7 @@ def run_analysis(
             img_size=224,
         )
 
-        # ------------------------
         # RADIO (optional)
-        # ------------------------
         radio_text_long = f"{MODEL_NAME_RADIO} disabled."
         radio_raw_overlay = None
         radio_masked_overlay = None
@@ -1091,9 +1137,7 @@ def run_analysis(
                 radio_band = None
                 radio_masked_ran = False
 
-        # ------------------------
-        # Consensus (returns also states)
-        # ------------------------
+        # Consensus
         consensus_label, consensus_detail, tb_state, radio_state = build_consensus(
             tb_prob=out["prob"],
             tb_band=out["band"],
@@ -1102,27 +1146,22 @@ def run_analysis(
             radio_band=radio_band,
         )
 
-        # ------------------------
-        # Build descriptive cards (TBNet, RADIO, Consensus)
-        # ------------------------
         tb_prob_line = "N/A (fail-safe)" if out["prob"] is None else f"{out['prob']:.4f}"
-        tb_band = out.get("band", "YELLOW")
         tb_label = out.get("pred", "INDETERMINATE")
         q = float(out.get("quality_score", 0.0))
         cov = float(out.get("lung_coverage", 0.0))
+        attention = "Diffuse / non-focal" if out.get("diffuse_risk", False) else "Focal / localized"
 
         warns = out.get("warnings", [])
         top_warns = warns[:3] if warns else []
         top_warn_line = " • ".join([html_escape(w) for w in top_warns]) if top_warns else "None"
 
-        attention = "Diffuse / non-focal" if out.get("diffuse_risk", False) else "Focal / localized"
-
         radio_primary_line = "N/A" if radio_primary_val is None else f"{radio_primary_val:.4f}"
         radio_raw_line = "N/A" if radio_raw_val is None else f"{radio_raw_val:.4f}"
         radio_masked_line = "Not run" if radio_masked_val is None else f"{radio_masked_val:.4f}"
 
         if consensus_label == "DISAGREE":
-            next_step = "✅ Next step: Treat as **indeterminate** → radiologist review + microbiology if clinically suspected."
+            next_step = "✅ Next step: Treat as <b>indeterminate</b> → radiologist review + microbiology if clinically suspected."
         elif consensus_label in ("AGREE: TB+", "AGREE: SCREEN+"):
             next_step = "✅ Next step: Prompt clinician/radiologist review; consider microbiological confirmation if clinically suspected."
         elif consensus_label in ("AGREE: LOW",):
@@ -1172,9 +1211,6 @@ def run_analysis(
     <b>Scores:</b> PRIMARY <b>{radio_primary_line}</b> &nbsp; | &nbsp; RAW <b>{radio_raw_line}</b> &nbsp; | &nbsp; MASKED <b>{radio_masked_line}</b>
   </div>
   <div style="margin-top:6px; opacity:0.85;">{html_escape(gate_info)}</div>
-  <div style="margin-top:10px; padding:10px 12px; border-left:6px solid rgba(52,211,153,0.9); background: rgba(52,211,153,0.10); border-radius:12px;">
-    ✅ Recommendation: Use RADIO as decision-support only; correlate clinically and consider radiologist review.
-  </div>
 </div>
 """
 
@@ -1196,9 +1232,7 @@ def run_analysis(
         summary_md.append(radio_card)
         summary_md.append(consensus_card)
 
-        # ------------------------
-        # Visual outputs (gallery)
-        # ------------------------
+        # Gallery
         orig_rgb = cv2.cvtColor(cv2.resize(out["orig_gray"], (512, 512)), cv2.COLOR_GRAY2RGB)
         vis_rgb = cv2.cvtColor(cv2.resize(out["vis_gray"], (512, 512)), cv2.COLOR_GRAY2RGB)
         mask_overlay = cv2.resize(out["mask_overlay"], (512, 512))
@@ -1217,49 +1251,36 @@ def run_analysis(
         if radio_masked_overlay is not None:
             gallery_items.append((cv2.resize(radio_masked_overlay, (512, 512)), f"{name} • RADIO MASKED heatmap"))
 
-        # ------------------------
-        # Detailed collapsible report (per image)
-        # ------------------------
+        # Details (collapsible per image) — FIXED (no welcome HTML here)
         warn_txt = "\n".join([f"- {w}" for w in out["warnings"]]) if out["warnings"] else "- None"
-
         details_md.append(
             f"""
-<details style="margin: 10px 0;">
-  <summary style="cursor:pointer; font-weight:900; font-size:16px;">
-    {html_escape(name)} — Details (expand)
-  </summary>
-
-  <div style="margin-top:10px;">
-
-**{MODEL_NAME_TBNET}**
-- State: **{pretty_state(tb_state)}**
-- Result: **{out['pred']}**
-- Probability: **{tb_prob_line}**
-- Interpretation:
-{out['band_text']}
-
-**Reliability**
-- Image quality: **{out['quality_score']:.0f}/100**
-- Lung mask coverage: **{out.get('lung_coverage', 0.0) * 100:.1f}%**
-- Attention pattern: **{"Diffuse / non-focal" if out["diffuse_risk"] else "Focal / localized"}**
-
-**Notes that may affect reliability**
-{warn_txt}
+<details>
+  <summary><b>{html_escape(name)}</b> — detailed report</summary>
 
-**{MODEL_NAME_RADIO}**
-{radio_text_long}
+**TBNet**
+- Result: **{html_escape(tb_label)}**
+- Probability: {tb_prob_line}
+- Band: {out.get("band", "YELLOW")}
+- Quality: {q:.0f}/100
+- Lung mask coverage: {cov*100:.1f}%
+- Attention: {attention}
 
 **Consensus**
-- TBNet: **{pretty_state(tb_state)}**
-- RADIO: **{pretty_state(radio_state)}**
-- Label: **{consensus_label}**
-- Rationale: {consensus_detail}
+- TBNet state: {pretty_state(tb_state)}
+- RADIO state: {pretty_state(radio_state)}
+- Consensus label: **{html_escape(consensus_label)}**
+- Detail: {html_escape(consensus_detail)}
 
-**Clinical guidance**
-{CLINICAL_GUIDANCE}
+**Warnings**
+{warn_txt}
+
+**RADIO (full)**
+{radio_text_long}
 
-  </div>
 </details>
+
+---
 """
         )
 
@@ -1285,71 +1306,7 @@ def build_ui():
         # ---------------------------
         with gr.Column(visible=True) as welcome_screen:
             gr.Markdown('<div class="title">Welcome — TB X-ray Assistant (HF Spaces)</div>')
-
-            gr.Markdown(
-                f"""
-<style>
-  .wrap {{ max-width: 980px; margin: 0 auto; }}
-  .hero {{
-    padding: 14px 16px;
-    border-radius: 14px;
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(255,255,255,0.10);
-  }}
-  .hero h2 {{ margin: 0 0 6px 0; font-size: 18px; font-weight: 900; }}
-  .hero p {{ margin: 0; opacity: 0.9; font-size: 13px; line-height: 1.35; }}
-  .chips {{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }}
-  .chip {{
-    font-size: 12px; padding: 6px 10px; border-radius: 999px;
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.10);
-    opacity: 0.95;
-  }}
-  .warn {{
-    margin-top: 12px;
-    padding: 10px 12px;
-    border-left: 5px solid #f59e0b;
-    border-radius: 12px;
-    background: rgba(245,158,11,0.10);
-    font-size: 12.5px;
-    line-height: 1.35;
-  }}
-  .tip {{
-    margin-top: 10px;
-    opacity: 0.85;
-    font-size: 12.5px;
-  }}
-  .footer {{ margin-top: 10px; opacity: 0.65; font-size: 12px; }}
-</style>
-
-<div class="wrap">
-  <div class="hero">
-    <h2>TB X-ray screening assistant (research / decision support)</h2>
-    <p>Upload chest X-rays to get an AI screening score, heatmaps, and a simple consensus output.</p>
-
-    <div class="chips">
-      <span class="chip"><b>{MODEL_NAME_TBNET}</b> + Grad-CAM</span>
-      <span class="chip">Auto Lung Mask + fail-safe</span>
-      <span class="chip"><b>{MODEL_NAME_RADIO}</b> RAW/MASKED</span>
-      <span class="chip">Consensus: ✅ LOW · ⚠️ INDET · ⚠️ SCREEN+ · 🚩 TB+</span>
-      <span class="chip">Phone/WhatsApp Mode (safe preprocessing)</span>
-    </div>
-
-    <div class="tip"><b>Tip:</b> Enable Phone/WhatsApp Mode for phone photos, WhatsApp-forwarded images, or screenshots with borders.</div>
-  </div>
-
-  <div class="warn">
-    <b>Clinical disclaimer:</b> Not diagnostic. TB can be subtle (incl. miliary TB).
-    If TB is clinically suspected, pursue CBNAAT/GeneXpert/sputum and/or CT chest regardless of AI output.
-  </div>
-
-  <div class="footer">
-    Device: <b>{DEVICE}</b> (FORCE_CPU={FORCE_CPU})
-  </div>
-</div>
-"""
-            )
-
+            gr.HTML(WELCOME_HTML)
             continue_btn = gr.Button("Continue →", variant="primary")
 
         # ---------------------------