| # 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. | |