# DEM-03: Streamlit vs Gradio Bake-Off

**Decision: Streamlit selected** (2026-04-25, Pratham)

## Evaluation Criteria

| Criterion | Streamlit | Gradio | Winner |
|-----------|-----------|--------|--------|
| D3/plotly recursion-tree embed | Native `st.components.v1.html` | `gr.HTML`, less flexible | Streamlit |
| Multi-panel layout control | `st.columns`, `st.sidebar` | Grid layout rigid | Streamlit |
| Live W&B metrics embed (iframe) | `st.components.v1.iframe` | `gr.HTML` | Tie |
| Pareto chart (plotly) | `st.plotly_chart` native | Custom wrapper | Streamlit |
| Setup time for HF Space | `app.py` + `requirements.txt` | Same | Tie |
| Ecosystem familiarity | Pratham: familiar | Pratham: less familiar | Streamlit |
| Interactive sliders for α sweep | `st.slider` | `gr.Slider` | Tie |
| Real-time episode streaming | `st.experimental_data_editor` + `st.status` | Gradio stream not as clean | Streamlit |

## Verdict

Streamlit wins on recursion-tree D3 embed flexibility and Pareto chart native plotly integration.
Both were scaffolded in ~20 min; Streamlit rendered the D3 tree with `st.components.v1.html`
without any wrapper boilerplate. Decision is FINAL for Phase 1–3.

## Notes

- Gradio's `gr.HTML` component requires manual iframe escaping for complex D3 visualizations.
- Streamlit `st.plotly_chart(use_container_width=True)` renders the Pareto frontier cleanly.
- For the pitch: 3-panel layout (recursion tree | Pareto frontier | W&B curves) is achievable in ~100 LoC with Streamlit.