%%html
<!-- The customized css for the slides -->
<link rel="stylesheet" type="text/css" href="../styles/python-programming-introduction.css"/>
<link rel="stylesheet" type="text/css" href="../styles/basic.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/styles/basic.css" />

# Install the necessary dependencies

import os
import sys
!{sys.executable} -m pip install --quiet pandas scikit-learn numpy matplotlib jupyterlab_myst ipython seaborn scipy streamlit

43.16. Build an machine learning web application#

43.16.1. Introduction#

  • Imagine that youā€™re working on a machine learning project and youā€™ve found your champion model. What happens next?

  • Let clients run your Jupyter notebook? Not a good idea!

  • You can convert their notebooks to scripts for somewhat production-grade code

  • And thatā€™s where Streamlit comes into play

43.16.2. Streamlit#

  • A Python-based library that allows the creation and deployment of machine learning web applications

  • Fast and flexible, turning application development time from days into hours

43.16.3. Display and style data#

43.16.3.1. Use magic#

%pip install streamlit pandas numpy

"""
# My first app
Here's our first attempt at using data to create a table:
"""

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame({
  'first column': [1, 2, 3, 4],
  'second column': [10, 20, 30, 40],
})

df

43.16.4. Display and style data#

43.16.4.1. st.write()#

  • st.write() is Streamlitā€™s ā€œSwiss Army knifeā€

  • You can pass almost anything to st.write(): text, data, Matplotlib figures, Altair charts, and more

  • Streamlit will figure it out and render things the right way

st.write("Here's our first attempt at using data to create a table:")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40],
}))

43.16.5. Display and style data#

43.16.5.1. Styling#

dataframe = pd.DataFrame(
    np.random.randn(10, 20),
    columns=('col %d' % i for i in range(20)))

st.dataframe(dataframe.style.highlight_max(axis=0))

43.16.6. Draw a line chart#

  • You can easily add a line chart to your app with st.line_chart()

chart_data = pd.DataFrame(
     np.random.randn(20, 3),
     columns=['a', 'b', 'c'])

st.line_chart(chart_data)

43.16.7. Plot a map#

  • With st.map() you can display data points on a map

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(map_data)

43.16.8. Widgets#

  • When youā€™ve got the data or model into the state that you want to explore, you can add in widgets like st.slider(), st.button() or st.selectbox()

43.16.9. st.slider()#

x = st.slider('x')  # šŸ‘ˆ this is a widget
st.write(x, 'squared is', x * x)

  • On first run, the app above should output the text ā€œ0 squared is 0ā€

  • Then every time a user interacts with a widget, Streamlit simply reruns your script from top to bottom, assigning the current state of the widget to your variable in the process

43.16.10. st.text_input()#

st.text_input("Your name", key="name")

# You can access the value at any point with:
st.session_state.name

43.16.11. Use checkboxes to show/hide data#

if st.checkbox('Show dataframe'):
   chart_data = pd.DataFrame(
      np.random.randn(20, 3),
      columns=['a', 'b', 'c'])

   chart_data

43.16.12. Use a selectbox for options#

df = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
    })

option = st.selectbox(
    'Which number do you like best?',
    df['first column'])

'You selected: ', option

43.16.13. Layout#

  • Streamlit makes it easy to organize your widgets in a left panel sidebar with st.sidebar. Each element thatā€™s passed to st.sidebar is pinned to the left, allowing users to focus on the content in your app while still having access to UI controls.

43.16.14. st.sidebar#

# Add a selectbox to the sidebar:
add_selectbox = st.sidebar.selectbox(
    'How would you like to be contacted?',
    ('Email', 'Home phone', 'Mobile phone')
)

# Add a slider to the sidebar:
add_slider = st.sidebar.slider(
    'Select a range of values',
    0.0, 100.0, (25.0, 75.0)
)

43.16.15. st.columns#

left_column, right_column = st.columns(2)
# You can use a column just like st.sidebar:
left_column.button('Press me!')

# Or even better, call Streamlit functions inside a "with" block:
with right_column:
    chosen = st.radio(
        'Sorting hat',
        ("Gryffindor", "Ravenclaw", "Hufflepuff", "Slytherin"))
    st.write(f"You are in {chosen} house!")

43.16.16. Show progress#

import time

'Starting a long computation...'

# Add a placeholder
latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
  # Update the progress bar with each iteration.
  latest_iteration.text(f'Iteration {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)

'...and now we\'re done!'

43.16.17. Themes#

  • Streamlit supports Light and Dark themes out of the box

  • The ā€œSettingsā€ menu has a theme editor accessible by clicking on ā€œEdit active themeā€

  • When youā€™re happy with your work, themes can be saved by setting config options in the [theme] config section. After youā€™ve defined a theme for your app, it will appear as ā€œCustom Themeā€ in the theme selector and will be applied by default instead of the included Light and Dark themes.

43.16.18. Caching#

  • The Streamlit cache allows your app to stay performant even when loading data from the web, manipulating large datasets, or performing expensive computations

  • The basic idea behind caching is to store the results of expensive function calls and return the cached result when the same inputs occur again rather than calling the function on subsequent runs

  • To cache a function in Streamlit, you need to decorate it with one of two decorators (st.cache_data and st.cache_resource)

43.16.19. Acknowledgments#

Thanks to PRASHANT BANERJEE for creating the open-source Kaggle jupyter notebook, licensed under Apache 2.0. It inspires the majority of the content of this slides.