UI 2-2

1#

UI 2-2#

Streamlit interactions

https://docs.streamlit.io/get-started/fundamentals/main-concepts

What is Streamlit?#

Streamlit markets itself as a User Interface library for building simple web applications from Python scripts.

Build:

  • Interactive dashboard with tables, charts and graphs

  • Accepting user input for a data pipeline

  • Chat applications

  • and more!

The best part of streamlit is the application runs in a browser and you don’t need to learn front-end technologies like HTML, CSS and Javascript

How does it work?#

Example: 2-hello.py

  1. Write python code that uses the streamlit library Example: 2-hello.py

  2. Run the python with the streamlit library: python -m streamlit run 2-hello.py
    NOTE: In VS Code, there is a launch.json configured for you, so:

    1. Open “Run and Debug” in the action bar: VS Code => Menu => View => Run

    2. Under RUN AND DEBUG, choose Streamlit Run and press the green play button

  3. streamlit launches a webserver on your computer to run your app.
    A web browser will open http://localhost:8501

  4. The app will continue to run in the browser you can edit and re-run without step 2!

Interactions, linear style#

Example: 2-linear-interaction.py

Streamlit supports both linear and event-driven interactions.

With linear interactions the code runs from top-down each time the input changes.

The linear pattern is the simpler pattern.

The most effective way to use of this pattern is:

- setup widgets, saving their state in variables
- then check interations through the variables with if

Interactions, event-driven style#

Example: 2-event-interaction.py

Streamlit supports both linear and event-driven interactions.

With event-driven interactions, you write a function to handle the event. This is similar to how most other UI libraries work.

The event-driven pattern is more complex, and might have unexpected behaviors due to streamlit’s processing order

The most effective use of this pattern is to:

- create handler functions with def
- setup interactions, using the function on the event

Challenge 2-2-1#

Write a streamlit to input a length and width of a rectangle, and output the permieter 2 x (L+W) and area (L x W) of that rectangle

use a “calculate” button and a “clear” button

use st.number_input() for numbers

Session State: Helping Streamlit Remember values#

st.session_state is a global key/value store for data that need to persist between streamlit runs.

Any data dependent on a previous interaction would be a use case for this.

The pattern using session state is:

- initialize the session state
- create the widgets
- check the interactions that change the state
- display the widgets that update the state

See Examples: 2-counter-wrong.py and 2-counter-session.py

Challenge 2-2-2#

Order total and history#

Write a streamlit to input an amount.

create an “add to total” button to accumulate the amount in the total create a “clear” button to reset the session vars

display the total and the history of each item entered

HINT: you’ll need to manage a list for history!

Exploring Streamlit input widgets#

Example: 2-input-widgets.py

Exploring Steamlit output widgets#

Example: 2-output-widgets.py

File Uploads#

We can use st.file_uploader() to get process uploaded files

https://docs.streamlit.io/develop/api-reference/widgets/st.file_uploader

the uploaded returns a Python “file-like” this can be used in a variety of applications with little additional processing.

Example: 2-upload.py

Image Processing with the camera#

We can use st.camera_input() to get images from our webcams.

From there its easy to load into popular image processing libaraies.

https://docs.streamlit.io/develop/api-reference/widgets/st.camera_input

Example: 2-camera.py

Challenge 2-2-3#

Order File processing#

Write a streamlit to input a text file with one line per order. Samples are provided in the data folder, but each line should have the amount of the order.

output the number of orders and the total amount of all orders.