Hugging Face's logo

Spaces:
lordofgaming
/
voiceforge-universal
Sleeping

App Files Community
voiceforge-universal / docs /adr /003-streamlit-over-react.md
creator-o1
Initial commit: Complete VoiceForge Enterprise Speech AI Platform
d00203b
preview code
|
raw
history blame contribute delete
2.56 kB

ADR-003: Streamlit over React for Frontend

Status

✅ Accepted

Context

Need a web UI for the speech processing platform with:

  • Fast development iteration
  • Data visualization capabilities
  • File upload support
  • Audio playback widgets
  • Portfolio-appropriate complexity

Decision

Use Streamlit instead of React.

Comparison

Criteria Streamlit React
Development Speed ✅ Very Fast ⚠️ Moderate
Python Integration ✅ Native ❌ Requires API calls
Built-in Widgets ✅ Audio, file upload, charts ⚠️ Need libraries
Learning Curve ✅ Minimal ⚠️ Steep (JSX, hooks, state)
Customization ⚠️ Limited ✅ Full control
Real-time Updates ✅ Auto-refresh ⚠️ Manual state mgmt

Rationale

Perfect for Portfolio Project:

  1. Speed: Built entire UI in 2 days vs ~2 weeks with React
  2. Focus: Showcase backend/AI skills, not frontend complexity
  3. Iteration: Instant reload during development
  4. Widgets: Audio player, file upload, charts all built-in

Streamlit Wins for This Use Case: 

# Streamlit: 3  lines
uploaded_file = st.file_uploader("Upload Audio")
if uploaded_file:
    st.audio(uploaded_file)

// React: ~30 lines
const [file, setFile] = useState(null);
const handleChange = (e) => { setFile(e.target.files[0]); };
return (
  <div>
    <input type="file" onChange={handleChange} />
    {file && <audio src={URL.createObjectURL(file)} controls />}
  </div>
);

Custom Components

Extended Streamlit with:

  • streamlit-mic-recorder: Live audio capture (Python 3.13 compatible)
  • Custom CSS: Glassmorphism design system
  • Waveform visualizer: HTML/JS component

Consequences

Positive:

  • ✅ 10x faster UI development
  • ✅ Python-native data flow
  • ✅ Built-in session state management
  • ✅ Automatic responsiveness

Negative:

  • ⚠️ Limited customization (vs React)
  • ⚠️ Full page reloads on interaction
  • ⚠️ Not ideal for complex SPA features

When to Migrate to React

If project scope expands to:

  • Multi-user real-time collaboration
  • Complex state management needs
  • Mobile app (React Native)
  • SEO-critical pages

For portfolio demo, Streamlit is optimal.

Related Decisions

  • ADR-001: FastAPI (Python-first stack)
  • ADR-002: Local AI (data processing in backend)

References