Add a web UI with Streamlit (basic)¶
Audience: Users who want to add a web UI written with Python.
Prereqs: Basic python knowledge.
What is Streamlit?¶
Streamlit is a web user interface builder for Python developers. Streamlit builds beautiful web pages directly from Python.
Install Streamlit with:
pip install streamlit
Run a basic streamlit app¶
In the next few sections we’ll build an app step-by-step. First create a file named app.py with the app content:
# 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('hello world')
class LitStreamlit(L.LightningFlow):
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())
add “streamlit” to a requirements.txt file:
echo 'streamlit' >> requirements.txt
this is a best practice to make apps reproducible.
Run the app¶
Run the app locally to see it!
lightning run app app.py
Now run it on the cloud as well:
lightning run app app.py --cloud
Step-by-step walkthrough¶
In this section, we explain each part of this code in detail.
0. Define a streamlit app¶
First, find the streamlit app you want to integrate. In this example, that app looks like:
import streamlit as st
def your_streamlit_app():
st.write('hello world')
Refer to the Streamlit documentation for more complex examples.
1. Add Streamlit to a component¶
Link this function to the Lightning App by using the StreamlitFrontend
class which needs to be returned from
the configure_layout
method of the Lightning component you want to connect to Streamlit.
# 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('hello world')
class LitStreamlit(L.LightningFlow):
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())
The render_fn
argument of the StreamlitFrontend
class, points to a function that runs your Streamlit app.
The first argument to the function is the lightning app state. Any changes to the app state update the app.
2. Route the UI in the root component¶
The second step, is to tell the Root component in which tab to render this component’s UI.
In this case, we render the LitStreamlit
UI in the home
tab of the application.
# 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('hello world')
class LitStreamlit(L.LightningFlow):
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())