How to deploy an interative web-app using streamlit and python

Mariane Neiva — @maribneiva
4 min readFeb 8, 2022

Creating an interactive web app is an interesting approach to upload your analysis and methods to other users.

It may be an difficult approach if you do not have the infra structure of company such as a nice server and work for yourself or just want to show your friends some cool stuff you just did.

Do not worry, I have the perfect tutorial for yourself. Today, we are learning how to deploy an python algorithm with streamlit!

What is streamlit?

According to the website, the framework turns data scripts into shareable web apps in minutes.

Basically, it is a library in python which you can create interactive inputs and outputs for your app. Some methods are:

streamlit.write(...) #writes a text in the screen
streamlit.button(...) #creates a button in the app
streamlit.radio(...) #radio options
streamlit.selectbox(...) #select an option from an list
streamlit.sidebar.selectbox(...) #select an option from an list.
#adds selectionbox in the side menu

For full documentation click here

Python code with streamlit

As an application, we must create an python code with streamlit. Our example is able to show the daile new cases of different variants and countries for COVID-19.

In the application, the user if capable to choose the variant and country to be shown in the main page.

import pandas as pd
import streamlit as st
import plotly.express as px
#DATASET
#https://www.kaggle.com/yamqwe/omicron-covid19-variant-daily-cases
#read the dataset
df = pd.read_csv('covid-variants.csv')
#convert date column to date type
df['date'] = pd.to_datetime(df['date'], format='%Y-%m-%d')
#get list of countries
paises = list(df['location'].unique())
#get list of variants
variants = list(df['variant'].unique())
#create title
tipo = 'Casos diários'
titulo = tipo + ' para '
#allow user to select a country (or show all)
pais = st.sidebar.selectbox('Selecione o pais', ['Todos']+ paises)
#allow user to select a variant
variante = st.sidebar.selectbox('Selecione a variante', ['Todas'] + variants )
#select part of the dataframe that matches the user selectionif(pais != 'Todos'):
st.header('Mostrando dados para ' + pais)
df = df[df['location'] == pais]
titulo = titulo + pais
else:
st.header('Mostrando dados para todos os países')
if(variante != 'Todas'):
st.text('Mostrando dados para a variante ' + variante)
df = df[df['variant'] == variante]
titulo = titulo + ' (variante : ' + variante + ')'
else:
st.text('Mostrando dados para todas as variantes')
titulo = titulo + '(todas as variantes)'
#sum values in other columns according to the same date
dfShow = df.groupby(by=["date"]).sum()
#create figure
fig = px.line(dfShow, x=dfShow.index, y='num_sequences')
fig.update_layout(title=titulo )
st.plotly_chart(fig, use_container_width=True)

Full code here

As you can see in the previous code, we have seven mentions for streamlit methods:

  • sidebar.selectbox: to allow user to select from a list of strings (presented in the sidebar)
  • header: shows text
  • text: shows text (smaller font size compared to st.header)
  • plotly_chart: shows an figure created with plotly library

Running your app locally

Supossing you saved your code as omicron_streamlit.py, you can run your app by typing:

streamlit run omicron_streamlit.py

in your terminal.

It will probably open an web page with your app. If not, check the webpage and paste on your favorite browser. It will probably look like:

http://localhost:8501

Upload your app to the cloud

Instead of just keep the app to yourself, you can deploy it and send it to your friends and collagues.

Follow the step below to upload your web-application:

1 - Create a new repository in GIT-HUB with your code and data (it can be private)

2 — If there is any different library required in your code, create an requirements.txt file with all the libraries and versions necessary. In our case, we created as follows:

plotly==5.5.0

3 — Go to https://share.streamlit.io/ and create your account. Do not forget to link your git-hub account to streamlit system.

4 — Click in ‘New App’

5 -Follow the steps in the figure to choose the correct github repository and file. Then, click Deploy!

6 — If your code are requirement are correct, your app should deploy succefully. To open and share your application, click in your feed page at https://share.streamlit.io/ and on your new app name. Then, just copy the url of your running and send it to your friends.

Hope you have enjoyed this post!

Please, do not forget to follow this medium, comment and share!

Instagram and LinkedIn

--

--

Mariane Neiva — @maribneiva

Woman in tech, researcher @University of Sao Paulo. Passionate by artificial intelligence, innovation, scientific communication and programming.