###################################
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:
.. code:: bash
pip install streamlit
----
*************************
Run a basic streamlit app
*************************
..
To explain how to use Streamlit with Lightning, let's replicate the |st_link|.
.. |st_link| raw:: html
example running here
In the next few sections we'll build an app step-by-step.
First **create a file named app.py** with the app content:
.. code:: python
# 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:
.. code:: bash
echo 'streamlit' >> requirements.txt
this is a best practice to make apps reproducible.
----
***********
Run the app
***********
Run the app locally to see it!
.. code:: python
lightning run app app.py
Now run it on the cloud as well:
.. code:: python
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:
.. code:: python
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.
.. code:: python
:emphasize-lines: 9-11
# 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.
.. code:: python
:emphasize-lines: 22
# 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())