Add a web UI with Streamlit (intermediate)¶

Audience: Users who want to communicate between the Lightning App and Streamlit.

Prereqs: Must have read the streamlit basic guide.

Interact with the App from Streamlit¶

The streamlit UI enables user interactions with the Lightning App via UI elements like buttons. To modify the variables of a Lightning component, access the lightning_app_state variable in .

For example, here we increase the count variable of the Lightning Component every time a user presses a button:

# app.py
import lightning as L
import lightning.app.frontend as frontend
import streamlit as st


def your_streamlit_app(lightning_app_state):
    if st.button("press to increase count"):
        lightning_app_state.count += 1
    st.write(f"current count: {lightning_app_state.count}")


class LitStreamlit(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.count = 0

    def configure_layout(self):
        return frontend.StreamlitFrontend(render_fn=your_streamlit_app)


class LitApp(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_streamlit = LitStreamlit()

    def run(self):
        self.lit_streamlit.run()

    def configure_layout(self):
        tab1 = {"name": "home", "content": self.lit_streamlit}
        return tab1


app = L.LightningApp(LitApp())

Interact with Streamlit from a component¶

To update the streamlit UI from any Lightning component, update the property in the component and make sure to call run from the parent component.

In this example we update the value of the counter from the component:

# app.py
import lightning as L
import lightning.app.frontend as frontend
import streamlit as st


def your_streamlit_app(lightning_app_state):
    st.write(f"current count: {lightning_app_state.count}")


class LitStreamlit(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.count = 0

    def run(self):
        self.count += 1

    def configure_layout(self):
        return frontend.StreamlitFrontend(render_fn=your_streamlit_app)


class LitApp(L.LightningFlow):
    def __init__(self):
        super().__init__()
        self.lit_streamlit = LitStreamlit()

    def run(self):
        self.lit_streamlit.run()

    def configure_layout(self):
        tab1 = {"name": "home", "content": self.lit_streamlit}
        return tab1


app = L.LightningApp(LitApp())