Update app.py

app.py

@@ -1,10 +1,13 @@
 # -*- coding: utf-8 -*-
 
+
 import numpy as np
 import matplotlib.pyplot as plt
-import gradio as gr
+import ipywidgets as widgets
+from ipywidgets import FloatSlider, VBox, HBox, Layout, HTML
+from IPython.display import display
 
- # ── style ──────────────────────────────────────────────────────────────────
+# ── style ──────────────────────────────────────────────────────────────────
 BG      = '#f8fafc'
 PANEL   = '#ffffff'
 GRID    = '#e2e8f0'
@@ -16,7 +19,7 @@ C_TEXT  = '#1e293b'
 C_DIM   = '#64748b'
 C_BORDER= '#cbd5e1'
 
- plt.rcParams.update({
+plt.rcParams.update({
     'figure.facecolor': BG, 'axes.facecolor': PANEL,
     'axes.edgecolor': C_BORDER, 'axes.labelcolor': C_DIM,
     'xtick.color': C_DIM, 'ytick.color': C_DIM,
@@ -24,137 +27,158 @@ C_BORDER= '#cbd5e1'
     'text.color': C_TEXT, 'font.family': 'monospace',
 })
 
- EP_RANGE = np.linspace(0, 15, 600)
+EP_RANGE = np.linspace(0, 15, 600)
 
- def calc_paf(episodes, incidence, zscore, rr):
+def calc_paf(episodes, incidence, zscore, rr):
     return 1 - 1 / np.exp(episodes * incidence * zscore * rr)
 
- # ── plot function ──────────────────────────────────────────────────────────
+def make_slider(desc, mn, mx, val, step, color):
+    return FloatSlider(
+        value=val, min=mn, max=mx, step=step,
+        description=desc, continuous_update=True,
+        layout=Layout(width='520px'),
+        style={'description_width': '160px', 'handle_color': color}
+    )
+
+# ── widgets ────────────────────────────────────────────────────────────────
+s_ep  = make_slider('Episodes',           0,    15,  4.2,  0.1,  ACCENT)
+s_inc = make_slider('Pathogen Incidence', 0.01,  1,  0.3,  0.01, C_INC)
+s_zs  = make_slider('Δz per Episode',    0.01,  2,  0.2,  0.01, C_ZS)
+s_rr  = make_slider('Relative Risk (RR)', 1.01,  5,  1.5,  0.05, C_RR)
+
+btn_reset = widgets.Button(
+    description='Reset Defaults',
+    layout=Layout(width='160px', height='34px'),
+    style={'button_color': '#e2e8f0'}
+)
+
+info_box = HTML()
+out = widgets.Output()
+
+# ── plot function ──────────────────────────────────────────────────────────
 def draw(ep, inc, zs, rr):
     paf_curve = calc_paf(EP_RANGE, inc, zs, rr) * 100
     cur_paf   = calc_paf(ep, inc, zs, rr)
     exponent  = ep * inc * zs * rr
 
-     fig, axes = plt.subplots(1, 2, figsize=(15, 6),
-                             gridspec_kw={'width_ratios': [3, 1]})
-    fig.patch.set_facecolor(BG)
-
-     # ── left: curve ───────────────────────────────────────────────────────
-    ax = axes[0]
-    ax.set_facecolor(PANEL)
-    for spine in ax.spines.values():
-        spine.set_color(C_BORDER)
-
-     # shadow + main curve
-    ax.plot(EP_RANGE, paf_curve, color=ACCENT, linewidth=5,   alpha=0.15)
-    ax.plot(EP_RANGE, paf_curve, color=ACCENT, linewidth=2.2)
-
-     # crosshairs
-    ax.axvline(ep,          color=ACCENT, linestyle='--', linewidth=1.2, alpha=0.6)
-    ax.axhline(cur_paf*100, color=ACCENT, linestyle='--', linewidth=1.2, alpha=0.3)
-
-     # dot at current point
-    ax.scatter([ep], [cur_paf*100], color=ACCENT, s=80, zorder=5,
-               edgecolors='white', linewidths=1.5)
-
-     # shaded area under curve up to current episode
-    mask = EP_RANGE <= ep
-    ax.fill_between(EP_RANGE[mask], paf_curve[mask], color=ACCENT, alpha=0.08)
-
-     ax.set_xlim(0, 15)
-    ax.set_ylim(0, 102)
-    ax.set_xlabel('Episodes',  fontsize=11, labelpad=8)
-    ax.set_ylabel('PAF (%)',   fontsize=11, labelpad=8)
-    ax.set_title('Population Attributable Fraction',
-                 color=C_TEXT, fontsize=13, pad=12, fontweight='normal')
-    ax.grid(True, linewidth=0.8)
-
-     # annotation
-    ax.annotate(
-        f'  {cur_paf*100:.1f}%',
-        xy=(ep, cur_paf*100),
-        xytext=(min(ep + 1, 13), cur_paf*100 + 4),
-        color=ACCENT, fontsize=15, fontweight='bold',
-        arrowprops=dict(arrowstyle='->', color=ACCENT, lw=1.2)
-    )
-
-     # formula watermark
-    ax.text(0.98, 0.05,
-            'PAF = 1 − exp(−ep × inc × Δz × RR)',
-            transform=ax.transAxes, fontsize=11,
-            color=C_DIM, ha='right', va='bottom')
-
-     # ── right: breakdown panel ────────────────────────────────────────────
-    ax2 = axes[1]
-    ax2.set_facecolor('#f1f5f9')
-    for spine in ax2.spines.values():
-        spine.set_color(C_BORDER)
-    ax2.set_xticks([]); ax2.set_yticks([])
-
-     rows = [
-        ('episodes',  f'{ep:.2f}',                ACCENT),
-        ('incidence', f'{inc:.3f}',                C_INC),
-        ('Δz / ep.',  f'{zs:.3f}',                 C_ZS),
-        ('RR',        f'{rr:.3f}',                 C_RR),
-        ('─' * 10,    '─' * 6,                    C_BORDER),
-        ('exponent',  f'{exponent:.4f}',           '#475569'),
-        ('exp(−x)',   f'{1/np.exp(exponent):.4f}', '#475569'),
-        ('─' * 10,    '─' * 6,                    C_BORDER),
-        ('PAF',       f'{cur_paf*100:.2f}%',       ACCENT),
-    ]
-
-     ax2.text(0.5, 0.97, 'BREAKDOWN', transform=ax2.transAxes,
-             ha='center', fontsize=13, color=ACCENT, fontweight='bold')
-
-     y_start = 0.88
-    for i, (k, v, c) in enumerate(rows):
-        y = y_start - i * 0.095
-        ax2.text(0.08, y, k, transform=ax2.transAxes,
-                 fontsize=11, color=C_DIM, va='center')
-        ax2.text(0.92, y, v, transform=ax2.transAxes,
-                 fontsize=11, color=c, va='center', ha='right', fontweight='bold')
-
-     ax2.set_title('Parameters', color=C_TEXT, fontsize=13, pad=8)
-
-     plt.tight_layout(pad=1.5)
-    return fig
-
- # ── Gradio UI ───────────────────────────���─────────────────────────────────
-with gr.Blocks(theme=gr.themes.Soft(), title="PAF Visualizer") as demo:
-
-     gr.HTML("""
-    <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;
-                padding:12px 20px;margin-bottom:12px;font-family:monospace;">
-      <span style="color:#1e293b;font-size:20px;font-weight:600;">
-        Population Attributable Fraction Visualizer
-      </span><br>
-      <span style="color:#64748b;font-size:13px;">
-        PAF = 1 − exp(−episodes × incidence × Δz × RR)
-      </span>
-    </div>""")
-
-     with gr.Row():
-        with gr.Column():
-            ep  = gr.Slider(0,    15,  value=4.2,  step=0.1,  label="Episodes")
-            inc = gr.Slider(0.01,  1,  value=0.3,  step=0.01, label="Pathogen Incidence")
-            zs  = gr.Slider(0.01,  2,  value=0.2,  step=0.01, label="Δz per Episode")
-            rr  = gr.Slider(1.01,  5,  value=1.5,  step=0.05, label="Relative Risk (RR)")
-
-             reset_btn = gr.Button("Reset Defaults", variant="secondary")
-
-     plot = gr.Plot(label="")
-
-     # live update on any slider change
-    for slider in [ep, inc, zs, rr]:
-        slider.change(fn=draw, inputs=[ep, inc, zs, rr], outputs=plot)
-
-     # reset button
-    def reset():
-        return 5.0, 0.3, 1.2, 2.5
-
-     reset_btn.click(fn=reset, outputs=[ep, inc, zs, rr])
-
-     # draw on load
-    demo.load(fn=draw, inputs=[ep, inc, zs, rr], outputs=plot)
-
- demo.launch()
+    with out:
+        out.clear_output(wait=True)
+        fig, axes = plt.subplots(1, 2, figsize=(15, 6),
+                                 gridspec_kw={'width_ratios': [3, 1]})
+        fig.patch.set_facecolor(BG)
+
+        # ── left: curve ───────────────────────────────────────────────────
+        ax = axes[0]
+        ax.set_facecolor(PANEL)
+        for spine in ax.spines.values():
+            spine.set_color(C_BORDER)
+
+        # shadow effect
+        ax.plot(EP_RANGE, paf_curve, color=ACCENT, linewidth=5, alpha=0.15)
+        ax.plot(EP_RANGE, paf_curve, color=ACCENT, linewidth=2.2)
+
+        # crosshairs
+        ax.axvline(ep,          color=ACCENT, linestyle='--', linewidth=1.2, alpha=0.6)
+        ax.axhline(cur_paf*100, color=ACCENT, linestyle='--', linewidth=1.2, alpha=0.3)
+
+        # dot at current point
+        ax.scatter([ep], [cur_paf*100], color=ACCENT, s=80, zorder=5, edgecolors='white', linewidths=1.5)
+
+        # shaded area under curve up to current episode
+        mask = EP_RANGE <= ep
+        ax.fill_between(EP_RANGE[mask], paf_curve[mask], color=ACCENT, alpha=0.08)
+
+        ax.set_xlim(0, 15)
+        ax.set_ylim(0, 102)
+        ax.set_xlabel('Episodes', fontsize=11, labelpad=8)
+        ax.set_ylabel('PAF (%)',  fontsize=11, labelpad=8)
+        ax.set_title('Population Attributable Fraction',
+                     color=C_TEXT, fontsize=13, pad=12, fontweight='normal')
+        ax.grid(True, linewidth=0.8)
+
+        # annotation
+        ax.annotate(
+            f'  {cur_paf*100:.1f}%',
+            xy=(ep, cur_paf*100),
+            xytext=(min(ep + 1, 13), cur_paf*100 + 4),
+            color=ACCENT, fontsize=15, fontweight='bold',
+            arrowprops=dict(arrowstyle='->', color=ACCENT, lw=1.2)
+        )
+
+        # formula watermark
+        ax.text(0.98, 0.05,
+                'PAF = 1 − exp(−ep × inc × Δz × RR)',
+                transform=ax.transAxes, fontsize=15,
+                color=C_DIM, ha='right', va='bottom')
+
+        # ��─ right: breakdown panel ────────────────────────────────────────
+        ax2 = axes[1]
+        ax2.set_facecolor('#f1f5f9')
+        for spine in ax2.spines.values():
+            spine.set_color(C_BORDER)
+        ax2.set_xticks([]); ax2.set_yticks([])
+
+        rows = [
+            ('episodes',  f'{ep:.2f}',               ACCENT),
+            ('incidence', f'{inc:.3f}',               C_INC),
+            ('Δz / ep.',  f'{zs:.3f}',                C_ZS),
+            ('RR',        f'{rr:.3f}',                C_RR),
+            ('─' * 10,    '─' * 6,                   C_BORDER),
+            ('exponent',  f'{exponent:.4f}',          '#475569'),
+            ('exp(−x)',   f'{1/np.exp(exponent):.4f}','#475569'),
+            ('─' * 10,    '─' * 6,                   C_BORDER),
+            ('PAF',       f'{cur_paf*100:.2f}%',      ACCENT),
+        ]
+
+        ax2.text(0.5, 0.97, 'BREAKDOWN', transform=ax2.transAxes,
+                 ha='center', fontsize=15, color=ACCENT, fontweight='bold')
+
+        y_start = 0.88
+        for i, (k, v, c) in enumerate(rows):
+            y = y_start - i * 0.095
+            ax2.text(0.08, y, k, transform=ax2.transAxes,
+                     fontsize=12, color=C_DIM, va='center')
+            ax2.text(0.92, y, v, transform=ax2.transAxes,
+                     fontsize=12, color=c, va='center', ha='right', fontweight='bold')
+
+        ax2.set_title('Parameters', color=C_TEXT, fontsize=15, pad=8)
+
+        plt.tight_layout(pad=1.5)
+        plt.show()
+
+    info_box.value = f"""
+    <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;
+                padding:8px 18px;font-family:monospace;font-size:15px;
+                color:#64748b;display:inline-block;margin-top:6px;">
+        episodes&nbsp;<b style="color:{ACCENT}">{ep:.2f}</b> &nbsp;·&nbsp;
+        incidence&nbsp;<b style="color:{C_INC}">{inc:.3f}</b> &nbsp;·&nbsp;
+        Δz&nbsp;<b style="color:{C_ZS}">{zs:.3f}</b> &nbsp;·&nbsp;
+        RR&nbsp;<b style="color:{C_RR}">{rr:.3f}</b> &nbsp;&nbsp;→&nbsp;&nbsp;
+        <b style="color:{ACCENT};font-size:15px;">PAF = {cur_paf*100:.2f}%</b>
+    </div>"""
+
+def on_change(change):
+    draw(s_ep.value, s_inc.value, s_zs.value, s_rr.value)
+
+def on_reset(b):
+    s_ep.value=5.0; s_inc.value=0.3; s_zs.value=1.2; s_rr.value=2.5
+
+for s in [s_ep, s_inc, s_zs, s_rr]:
+    s.observe(on_change, names='value')
+btn_reset.on_click(on_reset)
+
+# ── layout & display ───────────────────────────────────────────────────────
+header = HTML("""
+<div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;
+            padding:12px 20px;margin-bottom:12px;font-family:monospace;">
+  <span style="color:#1e293b;font-size:18px;">Population Attributable Fraction Visualizer</span>
+</div>""")
+
+controls = VBox([
+    HBox([s_ep,  s_inc]),
+    HBox([s_zs,  s_rr]),
+    HBox([btn_reset, info_box])
+], layout=Layout(padding='10px'))
+
+display(VBox([header, controls, out]))
+draw(s_ep.value, s_inc.value, s_zs.value, s_rr.value)