Streamlit

Streamlit Example

Streamlit - 😃

• Very Pythonic
  • Simple to transition from script
• Lots of elements to use
  • New ones all the time

Streamlit - 🫤

• Runs top to bottom - not at all reactive
• Can get very slow if it gets big
  • Has caching, session_state
• All Streamlit apps kinda look the same
  • Hard to tweak UI

Streamlit-Lite

• Stlite
  • Not officially supported by Streamlit
• Pretty easy interface to copy your Streamlit apps
• I couldn’t figure out how to do streaming
• Slower to load, slower to run

Gradio

Gradio - Simplest

Gradio - More Complex

Gradio - 😃

• Very focused on AI
• Even simpler than Streamlit
• Built in interfaces for Chat
  • Easy to add in features like chat history, Thumbs Up/ Thumbs Down
• Has reactivity

Gradio - 🫤

• Less flexible than Streamlit
  • Complicated to do multiple things at once
• Fewer components available
  • Sometimes need to use HTML to do what you want
• All Gradio apps look the same – at least as much as Streamlit

Gradio - Deployment Possibilities

• Local / Self-hosted
• Public Link, local compute (share=True)
• Through Huggingface Spaces (free with basic CPU)
• In-browser (Gradio Lite)
  • I couldn’t figure it out for complex app

Shiny

• 2012: Developed for R by the company formerly known as RStudio
• 2022:
  

Shiny Example

Shiny - 😃

• All Shiny is reactive - great for complex Apps
• Very flexible, can make almost any change you want
• Lots of components
• Documentation gives really good background / philosophy on how it works

Shiny - 🫤

• I found it confusing, not as intuitive/“Pythonic”
• Default UI is pretty bland
• Not as many components as Streamlit
• You kinda need to learn the philosophy of Shiny before you can do much complicated

::: –>

Help is on the way!

Shinylive

Shinylive really is easy!

One other option…

If you’re going to go in-browser, and what you’re doing isn’t that complex…

Ask Claude/ChatGPT to build you an in-browser tool

It will then improve it nicely

It will then improve it nicely

It will then improve it nicely

So What Should I Do?

If you know one tool well, you can use it for most things - they overlap a lot.

Really, What Should I Do?

%%{init: {'theme': 'default', 'themeVariables': { 'fontSize': '20px', 'fontFamily': 'arial', 'nodeTextColor': '#000000', 'mainBkg': '#f5f5f5' }}}%%
flowchart LR
    A[Start] --> B{Running a simple<br>AI model?}
    B -->|Yes| C[Use Gradio]
    B -->|No| F{Need complex app with<br>lots of interactive changes?}
    F -->|Yes| E[Use Shiny]
    F -->|No| H[Use Streamlit]

    style C fill:#90EE90,color:#000000,font-weight:bold
    style E fill:#90EE90,color:#000000,font-weight:bold
    style H fill:#90EE90,color:#000000,font-weight:bold
    style B fill:#f5f5f5,color:#000000,font-weight:bold
    style F fill:#f5f5f5,color:#000000,font-weight:bold
    style A fill:#f5f5f5,color:#000000,font-weight:bold

But …

%%{init: {'theme': 'default', 'themeVariables': { 'fontSize': '16px', 'fontFamily': 'arial', 'nodeTextColor': '#000000', 'mainBkg': '#f5f5f5', 'labelBackgroundColor': 'transparent' }}}%%
flowchart LR

    A([Start])
    X{Is this a one-off app that<br>can be done in-browser and<br>doesn't need heavy Python?}
    Y[Just ask an LLM<br>to make it for you]
    
    A --> X
    X -->|Yes| Y
    X -->|No| B
    subgraph Python-Frameworks[" "]
        direction LR
        B{Running a simple<br>AI model?}
        B -->|Yes| C[Use Gradio]
        B -->|No| F{Need complex app with<br>lots of interactive changes?}
        F -->|Yes| E[Use Shiny]
        F -->|No| H[Use Streamlit]
    end

    style C fill:#90EE90,color:#000000,font-weight:bold
    style H fill:#90EE90,color:#000000,font-weight:bold
    style E fill:#90EE90,color:#000000,font-weight:bold
    style Y fill:#90EE90,color:#000000,font-weight:bold,font-size:16px,stroke:#000000,stroke-width:3px
    style B fill:#f5f5f5,color:#000000,font-weight:bold
    style F fill:#f5f5f5,color:#000000,font-weight:bold
    style A fill:#f5f5f5,color:#000000,font-weight:bold,fontSize:20px
    style X fill:#f5f5f5,color:#000000,font-weight:bold
    
    style Python-Frameworks fill:#e0e0e0,stroke-dasharray: 5 5