feat: upgrade pipeline UI — binary seg + multiclass + PWAT raw vs adjusted

app.py

@@ -1,102 +1,350 @@
-"""Gradio app for WoundNetB7 DFU Analysis — Hugging Face Spaces deployment."""
+"""Gradio app for WoundNetB7 DFU Analysis — Hugging Face Spaces deployment.
+
+Pipeline visualization:
+  1. Binary ulcer segmentation (WoundNetB7 + ASPP + CBAM + CoordAttention + TAM)
+  2. Multiclass segmentation (background / foot / perilesion / ulcer)
+  3. Fitzpatrick/ITA skin type estimation
+  4. PWAT scores (raw) + PWAT adjusted by Fitzpatrick debiasing
+
+Launch locally: python app.py
+Deploy to HF: push this repo to a Hugging Face Space (GPU recommended).
+"""
 import gradio as gr
 import numpy as np
 import cv2
 import json
-import traceback
+from pipeline import WoundNetB7Pipeline
+
+pipe = WoundNetB7Pipeline(models_dir="models", use_tta=True)
+
+FITZ_COLORS = {
+    "I": "#fef3c7", "II": "#fde68a", "III": "#fbbf24",
+    "IV": "#b45309", "V": "#78350f", "VI": "#451a03",
+}
+
+FITZ_TEXT_COLORS = {
+    "I": "#1f2937", "II": "#1f2937", "III": "#1f2937",
+    "IV": "#ffffff", "V": "#ffffff", "VI": "#ffffff",
+}
+
+
+def build_fitz_html(fitz):
+    """Build Fitzpatrick/ITA HTML card."""
+    if fitz is None or fitz.confidence == 0:
+        return "<p style='color:#6b7280;'>No se pudo estimar (insuficientes pixeles de piel sana).</p>"
+
+    bg = FITZ_COLORS.get(fitz.fitzpatrick_type, "#e5e7eb")
+    fg = FITZ_TEXT_COLORS.get(fitz.fitzpatrick_type, "#1f2937")
+
+    return f"""
+    <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
+      <div style="background:{bg}; color:{fg}; border-radius:12px; padding:18px 28px;
+                  font-size:1.5em; font-weight:700; min-width:120px; text-align:center;
+                  border:2px solid rgba(0,0,0,0.1);">
+        Tipo {fitz.fitzpatrick_type}<br>
+        <span style="font-size:0.55em; font-weight:400;">{fitz.fitzpatrick_label}</span>
+      </div>
+      <div style="font-size:0.95em; line-height:1.8;">
+        <b>ITA:</b> {fitz.ita_angle:.1f}&deg; &plusmn; {fitz.ita_std:.1f}&deg;<br>
+        <b>L* medio:</b> {fitz.l_skin_mean:.1f}<br>
+        <b>Pixeles sanos:</b> {fitz.healthy_pixels:,}<br>
+        <b>Confianza:</b> {fitz.confidence:.0%}
+      </div>
+    </div>
+    """
+
+
+def build_pwat_html(pwat):
+    """Build PWAT scores comparison table (raw vs adjusted)."""
+    if pwat is None or not pwat.scores_raw:
+        return "<p style='color:#6b7280;'>No se pudo estimar PWAT (ulcera no detectada o muy pequena).</p>"
+
+    from src.pwat_estimator import ITEM_NAMES
 
-# Lazy loading — don't crash at import time
-pipe = None
+    rows = ""
+    for item in [3, 4, 5, 6, 7, 8]:
+        name = ITEM_NAMES.get(item, f"Item {item}")
+        raw = pwat.scores_raw.get(item, 0)
+        adj = pwat.scores_adjusted.get(item, 0.0)
+        diff = adj - raw
 
+        # Color code: green if adjusted lower (debiased), neutral otherwise
+        diff_color = "#059669" if diff < -0.05 else "#6b7280"
+        diff_str = f"{diff:+.1f}" if abs(diff) > 0.01 else "0.0"
 
-def get_pipeline():
-    global pipe
-    if pipe is None:
-        from pipeline import WoundNetB7Pipeline
-        pipe = WoundNetB7Pipeline(models_dir="models", use_tta=False)
-    return pipe
+        # Bar visualization (0-4 scale)
+        raw_pct = raw / 4 * 100
+        adj_pct = adj / 4 * 100
 
+        rows += f"""
+        <tr>
+          <td style="padding:8px 12px; font-weight:500;">{name}</td>
+          <td style="padding:8px 12px; text-align:center;">
+            <div style="display:flex; align-items:center; gap:8px;">
+              <div style="background:#e5e7eb; border-radius:4px; height:14px; width:80px; overflow:hidden;">
+                <div style="background:#ef4444; height:100%; width:{raw_pct}%; border-radius:4px;"></div>
+              </div>
+              <span style="font-weight:600; min-width:20px;">{raw}</span>
+            </div>
+          </td>
+          <td style="padding:8px 12px; text-align:center;">
+            <div style="display:flex; align-items:center; gap:8px;">
+              <div style="background:#e5e7eb; border-radius:4px; height:14px; width:80px; overflow:hidden;">
+                <div style="background:#3b82f6; height:100%; width:{adj_pct}%; border-radius:4px;"></div>
+              </div>
+              <span style="font-weight:600; min-width:30px;">{adj:.1f}</span>
+            </div>
+          </td>
+          <td style="padding:8px 12px; text-align:center; color:{diff_color}; font-weight:600;">
+            {diff_str}
+          </td>
+        </tr>"""
 
-def create_overlay(img_rgb, classmap):
-    """Create segmentation overlay on RGB image."""
-    colors = {1: (0, 255, 0), 2: (255, 165, 0), 3: (255, 0, 0)}
-    overlay = img_rgb.astype(np.float32).copy()
-    for cid, color in colors.items():
-        mask = classmap == cid
-        if np.any(mask):
-            overlay[mask] = overlay[mask] * 0.5 + np.array(color, dtype=np.float32) * 0.5
-    return overlay.astype(np.uint8)
+    total_diff = pwat.total_adjusted - pwat.total_raw
+    total_color = "#059669" if total_diff < -0.05 else "#6b7280"
+    total_diff_str = f"{total_diff:+.1f}" if abs(total_diff) > 0.01 else "0.0"
+
+    return f"""
+    <table style="width:100%; border-collapse:collapse; font-size:0.92em;">
+      <thead>
+        <tr style="border-bottom:2px solid #d1d5db;">
+          <th style="padding:10px 12px; text-align:left;">Item PWAT</th>
+          <th style="padding:10px 12px; text-align:center;">Score Raw</th>
+          <th style="padding:10px 12px; text-align:center;">Score Ajustado</th>
+          <th style="padding:10px 12px; text-align:center;">&Delta;</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows}
+        <tr style="border-top:2px solid #374151; font-weight:700; font-size:1.05em;">
+          <td style="padding:10px 12px;">TOTAL</td>
+          <td style="padding:10px 12px; text-align:center;">{pwat.total_raw}</td>
+          <td style="padding:10px 12px; text-align:center;">{pwat.total_adjusted:.1f}</td>
+          <td style="padding:10px 12px; text-align:center; color:{total_color};">{total_diff_str}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p style="font-size:0.82em; color:#6b7280; margin-top:8px;">
+      Escala: 0 (mejor) &mdash; 4 (peor) por item &bull;
+      Correccion Fitzpatrick tipo {pwat.fitzpatrick_type} aplicada &bull;
+      Items: 3=Tipo necrotico, 4=Cantidad necrotica, 5=Tipo granulacion,
+      6=Cantidad granulacion, 7=Bordes, 8=Piel periulceral
+    </p>
+    """
+
+
+def build_seg_stats_html(result):
+    """Build segmentation statistics HTML."""
+    dist = result.class_distribution
+    colors = {"background": "#374151", "foot": "#22c55e", "perilesion": "#f97316", "ulcer": "#ef4444"}
+
+    bars = ""
+    for cls_name in ["foot", "perilesion", "ulcer"]:
+        pct = dist.get(cls_name, 0)
+        color = colors.get(cls_name, "#6b7280")
+        label = {"foot": "Pie", "perilesion": "Perilesion", "ulcer": "Ulcera"}.get(cls_name, cls_name)
+        bars += f"""
+        <div style="margin-bottom:6px;">
+          <div style="display:flex; justify-content:space-between; font-size:0.9em; margin-bottom:2px;">
+            <span style="color:{color}; font-weight:600;">{label}</span>
+            <span>{pct:.1f}%</span>
+          </div>
+          <div style="background:#e5e7eb; border-radius:4px; height:12px; overflow:hidden;">
+            <div style="background:{color}; height:100%; width:{pct}%; border-radius:4px;"></div>
+          </div>
+        </div>"""
+
+    return f"""
+    <div style="padding:4px 0;">
+      <p style="font-size:0.85em; color:#6b7280; margin-bottom:10px;">
+        Imagen: {result.image_size[1]}x{result.image_size[0]} &bull; Device: {result.device}
+      </p>
+      {bars}
+    </div>
+    """
 
 
 def analyze_image(image):
     """Main analysis function called by Gradio."""
     if image is None:
-        return None, "Please upload an image.", "{}"
+        empty = np.zeros((100, 100, 3), dtype=np.uint8)
+        return empty, empty, "", "", "", "{}"
 
-    try:
-        pipeline = get_pipeline()
-        img_bgr = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
-        result = pipeline.analyze(img_bgr, use_tta=False)
+    img_bgr = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
 
-        # Create overlay from the segmentation already done (no re-run)
-        from src.segmentation import segment, CLASS_NAMES
-        seg = segment(pipeline.seg_model, img_bgr, pipeline.device, use_tta=False)
-        classmap = seg["classmap"]
+    result = pipe.analyze(img_bgr, use_tta=True)
 
-        if classmap.shape[:2] != image.shape[:2]:
-            classmap = cv2.resize(classmap, (image.shape[1], image.shape[0]), interpolation=cv2.INTER_NEAREST)
+    # Visualizations
+    binary_overlay = pipe.visualize_binary(img_bgr, result)
+    multiclass_overlay = pipe.visualize_multiclass(img_bgr, result)
 
-        overlay = create_overlay(image, classmap)
-        summary = result.summary()
-        json_out = json.dumps(result.to_dict(), indent=2, ensure_ascii=False)
+    # HTML outputs
+    seg_stats = build_seg_stats_html(result)
+    fitz_html = build_fitz_html(result.fitzpatrick)
+    pwat_html = build_pwat_html(result.pwat)
 
-        return overlay, summary, json_out
+    # JSON
+    json_out = json.dumps(result.to_dict(), indent=2, ensure_ascii=False)
 
-    except Exception as e:
-        error_msg = f"Error: {str(e)}\n\n{traceback.format_exc()}"
-        return None, error_msg, "{}"
+    return binary_overlay, multiclass_overlay, seg_stats, fitz_html, pwat_html, json_out
 
 
-with gr.Blocks(title="WoundNetB7 DFU Analysis", theme=gr.themes.Soft()) as demo:
-    gr.Markdown(
-        """
-        # WoundNetB7 — Diabetic Foot Ulcer Analysis
+# ── Gradio UI ────────────────────────────────────────────────────────────────
 
-        Upload a DFU image to get:
-        1. **Multiclass segmentation** (foot / perilesion / ulcer)
-        2. **Fitzpatrick skin type** via calibrated ITA (86.9% accuracy)
-        3. **PWAT scores** items 3-8 with Fitzpatrick debiasing
+css = """
+.pipeline-step {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 8px;
+}
+.step-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+.step-number {
+    background: #1f2937;
+    color: white;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 0.9em;
+    flex-shrink: 0;
+}
+.step-title {
+    font-weight: 600;
+    font-size: 1.1em;
+}
+"""
 
-        > Model: EfficientNet-B7 + ASPP + CBAM + TAM | Ulcer Dice: 0.927
-        """
-    )
+with gr.Blocks(
+    title="WoundNetB7 DFU Analysis Pipeline",
+    theme=gr.themes.Soft(),
+    css=css,
+) as demo:
+
+    gr.HTML("""
+    <div style="text-align:center; padding:20px 0 10px;">
+      <h1 style="font-size:1.8em; margin:0;">WoundNetB7 — DFU Analysis Pipeline</h1>
+      <p style="color:#6b7280; font-size:1em; margin-top:6px;">
+        EfficientNet-B7 + ASPP + CBAM + CoordAttention + TAM &bull; Ulcer Dice: 0.927
+      </p>
+    </div>
+    """)
 
     with gr.Row():
         with gr.Column(scale=1):
-            input_image = gr.Image(label="DFU Image", type="numpy")
-            analyze_btn = gr.Button("Analyze", variant="primary", size="lg")
+            input_image = gr.Image(label="Imagen DFU", type="numpy")
+            analyze_btn = gr.Button("Analizar", variant="primary", size="lg")
+            gr.HTML("""
+            <div style="font-size:0.82em; color:#6b7280; margin-top:8px; line-height:1.6;">
+              <b>Pipeline:</b> La imagen pasa por 4 etapas secuenciales.<br>
+              <b>Modelo:</b> WoundNetB7 entrenado con Combo Loss + Small Object Loss
+              para ulceras pequenas. Mecanismos de atencion: CBAM (canal+espacial),
+              CoordAttention (posicional), TAM (topologico con dimension fractal
+              y caracteristica de Euler).<br>
+              <b>TTA:</b> 6 augmentaciones en inferencia (flips + rotaciones).
+            </div>
+            """)
+
+    # ── Step 1: Binary Segmentation ──
+    gr.HTML("""
+    <div class="step-header">
+      <div class="step-number">1</div>
+      <div class="step-title">Segmentacion Binaria de la Ulcera</div>
+    </div>
+    """)
+    with gr.Row():
         with gr.Column(scale=1):
-            output_overlay = gr.Image(label="Segmentation Overlay")
+            output_binary = gr.Image(label="Mascara Binaria Ulcera (WoundNetB7)")
+        with gr.Column(scale=1):
+            output_seg_stats = gr.HTML(label="Estadisticas de Segmentacion")
 
+    # ── Step 2: Multiclass Segmentation ──
+    gr.HTML("""
+    <div class="step-header" style="margin-top:12px;">
+      <div class="step-number">2</div>
+      <div class="step-title">Segmentacion Multiclase (4 clases)</div>
+    </div>
+    """)
     with gr.Row():
         with gr.Column(scale=1):
-            output_text = gr.Textbox(label="Analysis Summary", lines=25, max_lines=40)
+            output_multiclass = gr.Image(label="Overlay Multiclase")
         with gr.Column(scale=1):
-            output_json = gr.Code(label="JSON Output", language="json")
+            gr.HTML("""
+            <div style="padding:12px;">
+              <p style="font-weight:600; margin-bottom:10px;">Leyenda de clases:</p>
+              <div style="display:flex; flex-direction:column; gap:8px;">
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <div style="width:20px; height:20px; background:#22c55e; border-radius:4px;"></div>
+                  <span><b>Pie</b> &mdash; tejido sano del pie</span>
+                </div>
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <div style="width:20px; height:20px; background:#f97316; border-radius:4px;"></div>
+                  <span><b>Perilesion</b> &mdash; zona periulceral</span>
+                </div>
+                <div style="display:flex; align-items:center; gap:8px;">
+                  <div style="width:20px; height:20px; background:#ef4444; border-radius:4px;"></div>
+                  <span><b>Ulcera</b> &mdash; lecho de la herida</span>
+                </div>
+              </div>
+              <p style="font-size:0.82em; color:#6b7280; margin-top:12px;">
+                Modelo multiclase con Combo Loss (Dice + CE ponderado) +
+                Small Object Focal Loss para deteccion de ulceras pequenas.
+                Arquitectura con skip connections y ASPP (rates 6, 12, 18)
+                para capturar contexto multi-escala.
+              </p>
+            </div>
+            """)
 
-    analyze_btn.click(fn=analyze_image, inputs=[input_image], outputs=[output_overlay, output_text, output_json])
+    # ── Step 3: Fitzpatrick/ITA ──
+    gr.HTML("""
+    <div class="step-header" style="margin-top:12px;">
+      <div class="step-number">3</div>
+      <div class="step-title">Estimacion Fitzpatrick / ITA</div>
+    </div>
+    """)
+    output_fitz = gr.HTML()
 
-    gr.Markdown(
-        """
-        ---
-        **Legend:** Green = Foot | Orange = Perilesion | Red = Ulcer
+    # ── Step 4: PWAT ──
+    gr.HTML("""
+    <div class="step-header" style="margin-top:12px;">
+      <div class="step-number">4</div>
+      <div class="step-title">PWAT &mdash; Scores Raw vs Ajustados por Fitzpatrick</div>
+    </div>
+    """)
+    output_pwat = gr.HTML()
 
-        **PWAT Items:** 3=Necrotic Type, 4=Necrotic Amount, 5=Granulation Type,
-        6=Granulation Amount, 7=Edges, 8=Periulcer Skin (0=best, 4=worst)
+    # ── JSON (collapsible) ──
+    with gr.Accordion("JSON completo (para integracion)", open=False):
+        output_json = gr.Code(label="JSON Output", language="json")
 
-        **Debiasing:** Scores adjusted by Fitzpatrick type to reduce skin-tone bias.
-        """
+    analyze_btn.click(
+        fn=analyze_image,
+        inputs=[input_image],
+        outputs=[
+            output_binary,
+            output_multiclass,
+            output_seg_stats,
+            output_fitz,
+            output_pwat,
+            output_json,
+        ],
     )
 
+    gr.HTML("""
+    <div style="text-align:center; padding:16px 0; font-size:0.82em; color:#9ca3af; border-top:1px solid #e5e7eb; margin-top:20px;">
+      WoundNetB7 &bull; Tesis Doctoral &bull; Marcelo Marquez-Murillo &bull;
+      Ulcer Dice 0.927 (CI 95%: [0.917, 0.936]) &bull;
+      Debiasing: 46.6% max group gap reduction (p &lt; 10<sup>-55</sup>)
+    </div>
+    """)
+
 if __name__ == "__main__":
     demo.launch(share=False)