Update inference.py

inference.py

@@ -519,67 +519,42 @@ def create_all_shap_plots(user_inputs, max_display=10):
 # Icon Array (replaces Pie Charts)
 # ---------------------------------------------------------------------------
 
-# SVG path for a simple person/figure icon
-_PERSON_SVG_PATH = (
-    "M10,2 C11.65,2 13,3.35 13,5 C13,6.65 11.65,8 10,8 "
-    "C8.35,8 7,6.65 7,5 C7,3.35 8.35,2 10,2 Z "
-    "M10,9 C6.13,9 3,10.79 3,13 L3,14 L17,14 L17,13 "
-    "C17,10.79 13.87,9 10,9 Z"
-)
+# Uniform colors for all outcomes: red = event, green = no event
+EVENT_COLOR    = "#e53935"   # red
+NO_EVENT_COLOR = "#43a047"   # green
 
 OUTCOME_CONFIG = {
-    "DEAD":     {
-        "event_label":    "Death",
-        "no_event_label": "Survival",
-        "event_color":    "#e63946",
-        "no_event_color": "#2a9d8f",
-        "title":          "Total Mortality",
-    },
-    "GF":       {
-        "event_label":    "Graft Failure",
-        "no_event_label": "No Graft Failure",
-        "event_color":    "#e76f51",
-        "no_event_color": "#457b9d",
-        "title":          "Graft Failure",
-    },
-    "AGVHD":    {
-        "event_label":    "Acute GVHD",
-        "no_event_label": "No Acute GVHD",
-        "event_color":    "#c77dff",
-        "no_event_color": "#48cae4",
-        "title":          "Acute GvHD",
-    },
-    "CGVHD":    {
-        "event_label":    "Chronic GVHD",
-        "no_event_label": "No Chronic GVHD",
-        "event_color":    "#9b2226",
-        "no_event_color": "#94d2bd",
-        "title":          "Chronic GvHD",
-    },
-    "VOCPSHI":  {
-        "event_label":    "VOC Post-HCT",
-        "no_event_label": "No VOC",
-        "event_color":    "#f4a261",
-        "no_event_color": "#264653",
-        "title":          "Vaso-Occlusive Crisis",
-    },
-    "STROKEHI": {
-        "event_label":    "Stroke Post-HCT",
-        "no_event_label": "No Stroke",
-        "event_color":    "#d62828",
-        "no_event_color": "#606c38",
-        "title":          "Stroke Post-HCT",
-    },
+    "DEAD":     {"event_label": "Death",          "no_event_label": "Survival",          "title": "Total Mortality"},
+    "GF":       {"event_label": "Graft Failure",   "no_event_label": "No Graft Failure",  "title": "Graft Failure"},
+    "AGVHD":    {"event_label": "Acute GVHD",      "no_event_label": "No Acute GVHD",    "title": "Acute GvHD"},
+    "CGVHD":    {"event_label": "Chronic GVHD",    "no_event_label": "No Chronic GVHD",  "title": "Chronic GvHD"},
+    "VOCPSHI":  {"event_label": "VOC Post-HCT",    "no_event_label": "No VOC",            "title": "Vaso-Occlusive Crisis"},
+    "STROKEHI": {"event_label": "Stroke Post-HCT", "no_event_label": "No Stroke",         "title": "Stroke Post-HCT"},
 }
 
 
-def _person_icon_svg(color: str, size: int = 20) -> str:
-    """Return an inline SVG person icon of the given color."""
+def _stick_figure_svg(color: str, size: int = 20) -> str:
+    """
+    Return an inline SVG stick figure (head + body + arms + legs).
+    ViewBox is 0 0 20 32 so the figure is taller than wide.
+    stroke-width is scaled so figures look clean at small sizes.
+    """
+    sw = 2.2   # stroke width
+    # head: circle centred at (10, 5) r=4
+    # body: (10,9) → (10,20)
+    # arms: (3,13) → (17,13)
+    # left leg: (10,20) → (4,30)
+    # right leg: (10,20) → (16,30)
     return (
         f'<svg xmlns="http://www.w3.org/2000/svg" '
-        f'width="{size}" height="{size}" viewBox="0 0 20 20" '
-        f'style="display:inline-block;vertical-align:middle;">'
-        f'<path d="{_PERSON_SVG_PATH}" fill="{color}"/>'
+        f'width="{size}" height="{round(size * 1.6)}" viewBox="0 0 20 32" '
+        f'style="display:inline-block;vertical-align:bottom;" '
+        f'stroke="{color}" stroke-width="{sw}" stroke-linecap="round" fill="none">'
+        f'<circle cx="10" cy="5" r="3.8" fill="{color}" stroke="none"/>'
+        f'<line x1="10" y1="9" x2="10" y2="20"/>'
+        f'<line x1="3"  y1="13" x2="17" y2="13"/>'
+        f'<line x1="10" y1="20" x2="4"  y2="30"/>'
+        f'<line x1="10" y1="20" x2="16" y2="30"/>'
         f'</svg>'
     )
 
@@ -587,14 +562,13 @@ def _person_icon_svg(color: str, size: int = 20) -> str:
 def create_icon_array_html(probability: float, outcome: str) -> str:
     """
     Build an HTML icon array card for a single outcome.
-    100 person icons in a 10×10 grid; filled icons represent the event probability.
+    100 stick-figure icons in a 10×10 grid.
+    Red = event, green = no event (uniform across all outcomes).
     Returns a self-contained HTML string suitable for gr.HTML.
     """
     cfg = OUTCOME_CONFIG.get(outcome, {
         "event_label":    "Event",
         "no_event_label": "No Event",
-        "event_color":    "#e63946",
-        "no_event_color": "#adb5bd",
         "title":          OUTCOME_DESCRIPTIONS.get(outcome, outcome),
     })
 
@@ -602,47 +576,51 @@ def create_icon_array_html(probability: float, outcome: str) -> str:
     n_no_event = 100 - n_event
     pct_str    = f"{probability * 100:.1f}%"
 
-    # Build icon rows (10 columns × 10 rows)
-    icons_html = ""
-    for i in range(100):
-        color = cfg["event_color"] if i < n_event else cfg["no_event_color"]
-        icons_html += _person_icon_svg(color, size=18)
-        if (i + 1) % 10 == 0:
-            icons_html += "<br>"
+    # Build icon grid: 10 per row, event (red) figures first, then no-event (green)
+    rows_parts = []
+    for row in range(10):
+        row_html = '<div style="display:flex;justify-content:center;gap:1px;margin-bottom:1px;">'
+        for col in range(10):
+            idx   = row * 10 + col
+            color = EVENT_COLOR if idx < n_event else NO_EVENT_COLOR
+            row_html += _stick_figure_svg(color, size=16)
+        row_html += '</div>'
+        rows_parts.append(row_html)
+    grid_html = "\n".join(rows_parts)
+
+    legend_figure_event    = _stick_figure_svg(EVENT_COLOR,    size=12)
+    legend_figure_no_event = _stick_figure_svg(NO_EVENT_COLOR, size=12)
 
     html = f"""
 <div style="
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 10px;
-    padding: 14px 16px;
+    padding: 12px 10px 10px 10px;
     text-align: center;
     font-family: 'Segoe UI', Arial, sans-serif;
     box-shadow: 0 2px 6px rgba(0,0,0,0.07);
-    height: 100%;
     box-sizing: border-box;
 ">
-    <div style="font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; line-height: 1.3;">
+    <div style="font-size: 12px; font-weight: 700; color: #222; margin-bottom: 4px; line-height: 1.3;">
         {cfg['title']}
     </div>
-    <div style="font-size: 26px; font-weight: 700; color: {cfg['event_color']}; margin-bottom: 6px;">
+    <div style="font-size: 24px; font-weight: 800; color: {EVENT_COLOR}; margin-bottom: 6px;">
         {pct_str}
     </div>
-    <div style="line-height: 1.6; margin-bottom: 8px;">
-        {icons_html}
+    <div style="margin-bottom: 6px;">
+        {grid_html}
     </div>
-    <div style="font-size: 11px; color: #555; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;">
-        <span>
-            <svg width="11" height="11" viewBox="0 0 20 20" style="vertical-align:middle;margin-right:3px;">
-                <path d="{_PERSON_SVG_PATH}" fill="{cfg['event_color']}"/>
-            </svg>
-            {cfg['event_label']} ({n_event}/100)
+    <div style="font-size: 10.5px; color: #444; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;">
+        <span style="display:inline-flex;align-items:center;gap:3px;">
+            {legend_figure_event}
+            <span style="color:{EVENT_COLOR};font-weight:600;">{cfg['event_label']}</span>
+            &nbsp;({n_event}/100)
         </span>
-        <span>
-            <svg width="11" height="11" viewBox="0 0 20 20" style="vertical-align:middle;margin-right:3px;">
-                <path d="{_PERSON_SVG_PATH}" fill="{cfg['no_event_color']}"/>
-            </svg>
-            {cfg['no_event_label']} ({n_no_event}/100)
+        <span style="display:inline-flex;align-items:center;gap:3px;">
+            {legend_figure_no_event}
+            <span style="color:{NO_EVENT_COLOR};font-weight:600;">{cfg['no_event_label']}</span>
+            &nbsp;({n_no_event}/100)
         </span>
     </div>
 </div>
@@ -663,19 +641,18 @@ def create_all_icon_arrays(calibrated_probs: dict) -> dict:
     for row_start in range(0, len(pie_outcomes), 4):
         row_outcomes = pie_outcomes[row_start: row_start + 4]
         cols_html = "".join(
-            f'<div style="flex: 1 1 0; min-width: 0;">{cards[o]}</div>'
+            f'<div style="flex:1 1 0;min-width:0;">{cards[o]}</div>'
             for o in row_outcomes
         )
-        rows_html += f"""
-<div style="display: flex; gap: 12px; margin-bottom: 12px;">
-    {cols_html}
-</div>"""
+        rows_html += f'<div style="display:flex;gap:10px;margin-bottom:10px;">{cols_html}</div>'
 
     grid_html = f"""
-<div style="font-family: 'Segoe UI', Arial, sans-serif; padding: 4px 0;">
+<div style="font-family:'Segoe UI',Arial,sans-serif;padding:4px 0;">
     {rows_html}
-    <div style="font-size: 11px; color: #888; text-align: center; margin-top: 4px;">
+    <div style="font-size:11px;color:#888;text-align:center;margin-top:2px;">
         Each figure represents 1 patient out of 100 with similar characteristics.
+        &nbsp;<span style="color:{EVENT_COLOR};font-weight:600;">■ Red = event</span>
+        &nbsp;<span style="color:{NO_EVENT_COLOR};font-weight:600;">■ Green = no event</span>
     </div>
 </div>
 """