Bringing it to life: Deployment with Streamlit

After Modeling in Data Science: Deployment

Published in

Academy Team

13 min readOct 9, 2023

Data Science has become synonymous with complex algorithms, deep learning models, and intricate analyses for many individuals. However, this only constitutes a portion of the process. As data scientists, we often focus on data cleaning and modeling, achieving successful results in these processes. It is also stated that this section forms approximately 60–70% of the entire work. However, for these models and analyses to create value in the real world, the next step is necessary: Deployment.

Let’s assume that we have developed a very good model and created it on a Jupyter Notebook. A model that produces excellent results! If we consider that it is requested by an industry user who will use it continuously, it is highly likely that the person concerned will not have the ability to write code or make changes to the Notebook. When we deliver this excellent result-producing model to the relevant company or person, will we say: “Oh, don’t touch the rest of the codes and just come to the places in quotes in these lines and write the values you want to predict!”? Such an approach is clearly not reasonable. Therefore, the final product should not be in this format. It should be in a more “user-friendly” form and in a web page format that everyone is accustomed to using. This process is generally referred to as Deployment.

Why is Deployment So Important?

The true value of a model or analysis is realized when it reaches those who can use it. These users can vary from a colleague in the same department to a customer on the other side of the world. Therefore, delivering the final product to these users is as critical as the modeling and analysis itself.

We can emphasize the importance of deployment for the following reasons:

Real-World Applications: When a machine learning model is trained, it needs to be integrated into applications to solve real-world problems. For example, if a product recommendation system is developed for an e-commerce website, it needs to be integrated into the site to provide real-time recommendations to the users.
Automation: Deployment enables automation. For instance, if a bank develops a credit scoring model, it needs to be integrated into the system to automatically evaluate customer applications.
User Interaction: Especially interactive data analysis and visualization tools allow users to interact with the data. This can help users better understand the data and make more informed decisions.

The Rise of Web-Based Applications

In today’s world, desktop applications are giving way to web-based applications. This shift provides data scientists with the opportunity to directly deploy their analytical products on the web.

Introducing Streamlit

In this article, I am introducing Streamlit, a tool that allows you to deploy your products directly on the web, designing customizable applications. Streamlit enables data scientists to quickly and effectively transform their models and analyses into web-based applications.

Let’s take a more comprehensive look at the matter. First, let’s discuss the role of Streamlit in the deployment process. For this purpose, I present the image below for your attention.

Here we can observe the inner workings of one of the deployment methods. Deploying using Streamlit is one option. You can also choose to deploy using Flask. It’s similar to creating a web page using HTML and CSS. Throughout the process, we will create a web page using Streamlit code, where the results of your model and alternative choices for making predictions will be displayed. We will obtain the necessary model files from GitHub. Subsequently, we will deploy the page created with Streamlit and the files fetched from GitHub on the AWS (Amazon Web Services) Cloud system. In the IT industry, deploying is also referred to as “going live.” AWS will serve as our remote desktop computer, ensuring 24/7 accessibility to our files. For those who do not utilize AWS, other cloud system alternatives like Azure or Google Cloud can be used. With our AWS account, we will import the necessary libraries on the instances we create and use the web page files and other modeling files that we uploaded there. As an alternative to the cloud service provided by AWS, the cloud system offered by Streamlit can also be used, as well as alternatives like Vercel and Streamlit Sharing, where we can obtain this service for free.

Streamlit: Effortlessly Publishing Web Apps with Python

Artificial intelligence and data science projects have made significant progress in recent years. However, delivering these projects to end-users can often be a complex and time-consuming process. This is where Streamlit comes into play!

What is Streamlit?

Streamlit is an open-source framework that enables individuals working in the field of data science to easily publish their projects on the web. It primarily operates with the Python programming language but can also be enriched with basic HTML — CSS codes if desired. Consequently, you can create web applications that are extremely easy to use and aesthetically appealing. For the applications we will create below, you need to register for a free membership on the “streamlit.io” page.

Why Streamlit?

Traditionally, to bring web applications to life, you are expected to be familiar with languages such as HTML, CSS, and JavaScript. However, Streamlit allows you to develop interactive web applications directly using Python, without the need for these languages. This feature is a significant advantage for data scientists and artificial intelligence professionals; as it allows you to create impressive web applications with just Python knowledge.

Streamlit is a fantastic platform that facilitates effectively presenting your data science and machine learning projects on the web. If you are working in the Python language and want to share your work with a wide audience, Streamlit is an ideal choice for you!

Let’s take a look at a sample page design created with Streamlit.

https://blog.streamlit.io/building-a-streamlit-and-scikit-learn-app-with-chatgpt/

Embarking upon the creation of a web page with Streamlit, initiating the process with a sketch study for preliminary design will pave the way for a smoother subsequent progression. In this sketch design, determinations are made regarding the final layout on paper, seeking answers to questions such as the locations of menus, positions of buttons, and the placement of the sliding bar. An example sketch is visualized in the image below. In this section, if possessed, the incorporation of HTML-CSS skills can yield more aesthetically pleasing visuals. However, it is presumably unexpected by many to anticipate an advanced web page design from experts in the Data Science field.

https://www.misraturp.com/post/create-a-web-app-for-your-data-science-project-in-under-an-hour

When creating a web page step by step with Streamlit, I recommend utilizing Anaconda Jupyter Lab to deploy the design simultaneously on your own computer, thereby enabling the visualization of the result. The starting point of Jupyter Lab is depicted in the image below. Alternatively, continuation can be achieved using a “txt” file with Notepad on your computer, or similar operations can be conducted with VS Code. The crucial aspect is the ability to monitor the changes on the screen as they are made.

Within Jupyter Lab, we will navigate to the desired working folder and commence by creating a new txt file therein. After forming the file as shown in the image below, it is requisite to alter its extension. We will set the extension of such files to “*.py”. The file, wherein we will write and deploy the Streamlit code, must possess a .py extension. Typically, a file name “app.py” is created, and codes are written into this file.

Now, let’s momentarily pause code writing and establish the infrastructure on our own computer, wherein we will execute the Streamlit code and deploy it. For this purpose, we will utilize the “Anaconda Prompt terminal”. The Anaconda Prompt Terminal may be preferred as it encompasses the Python library. If a current Python version issue is encountered, it is necessary to install the latest Python version supported by Streamlit. At this juncture, you may also proceed by creating an SSH connection on your computer using VS Code. We will opt to proceed via the Terminal due to the more secure connection opportunity it provides.

In the Prompt Terminal, the Streamlit library is installed by entering the code below. Mac users can similarly proceed via the terminal.

pip install streamlit

If you have a Streamlit install problem, you can use an installation method like below as an additional solution.

conda install -c conda-forge streamlit

So far, the logical structure works as follows: We are doing these deployments on our own computer for now in order to make them live. Once all the design is successfully completed on our own computer, we will do all the deployments again on an empty AWS machine (on the Instance we will open there) and go live from there. I have published the operations that will take place in the AWS section as the second article.

In the Anaconda Prompt Terminal, we check the Streamlit version by typing “Streamlit version”.

Then, in the terminal screen again, we can reach the image shown in the picture by typing “Streamlit hello”. The numbers in the Network URL section in the picture represent the URL allocated on our computer. We can copy this URL to open the front page. At the same time, the Streamlit Hello page will also be opened in your Web Browser on your computer. During the opening of the Streamlit Hello page, it will ask for login information for the “streamlit.io” page where you previously registered for a free membership.

Several example projects are displayed on this page. As seen in the example projects, Machine Learning projects are dumped, saved, and run as applications written in an HTML-style script. The results can be observed by changing the values of the buttons in the menu on the left.

If the Streamlit Hello page has opened smoothly on your computer, everything is fine up to this point. We can close this page for now. Shortly, we will build our new web page via Streamlit.

Now, we will go to the folder we are working in and start writing streamlit codes into the file we renamed “app.py”. For this purpose, let’s use the Anaconda Jupyter Lab program. First, we will import streamlit into the App.py file. Right after that, we will create the initial information of the page by writing some streamlit codes. I also include information about the purpose of the codes in the explanation section next to the codes (such as “# adds a title”).

import streamlit as st   # import streamlit library
#text/file 
st.title(“Streamlit Tutorial”)  # H1 tag
st.text(“Hello Streamlit”)  # text adds

(No error will be received if double quotes are used in the texts instead of single quotes.)

We need to run the app.py file to immediately deploy the codes we wrote on our own computer. For this, we need to go to the folder location where the app.py file is in the Anaconda Prompt terminal. For example, we can change the folder by typing “cd desktop”.

Upon executing this command, a Terminal prompt screen, similar to the one on the streamlit hello page, and an empty web page on the right will be displayed, as seen below. The deployed versions of the st.title and st.text commands written in the App.py file are visible.

Now, as depicted in the image, we will split the screen in two, writing code on the left side, and observing the ‘live’ or deployed version on the right side.

As we add new code to the App.py file and save it, to see its deployed version on the side, we must activate the ‘Always Rerun’ option in the upper right of the Streamlit page. To avoid doing this continuously, we will enter the menu in the upper right corner of Streamlit and activate the ‘Run on Save’ option from the Settings.

Now let’s share a list of Streamlit codes and example uses that we can use in “app.py”.

st.header("This is a header") # adds subheader
st.subheader("This is a subheader") # adds a smaller subheader
st.write("Writing example text ") # inserts informational text

#importing image (To add an image, use the codes below)
from PIL import Image
img=Image.open("image_path.jpg")
st.image(img, width=600, caption="image_alt_title")

#importing video (adding a video file or youtube link)
video=open("video_name.mp4", "rb") # to add a video file from your own computer
st.video(video)
# st.video('https://www.youtube.com/watch?v=xhGwjUKbiC4') # to insert a video from youtube

# add chekbox
if st.checkbox("On/Off"):
    st.text("You Selected box")

#radio button creation
car=st.radio("Select your car ", ("BMV", "Audi"))
if car == "BMV" :
    st.success("Congrats")
else:
    st.info("Good car") 
    
st.markdown("**markdown text**") # adds text in markdown format
# (** .......** in bold when typed in style)

st.success("Green Text") # Adds green band text
st.info("Blue text") # Adds blue band text

#warning-eror (Adds a banded text field)
st.warning("This is a warning") # Adds yellow band text
st.error("This is an error") # Adds red band text

#get help (Shows the help documentation for any object)
st.help(st.slider)

#select box (Adds a drop-down menu)
menu=st.selectbox("Your program is ", ["DS", "DEV", "Cyber"])
st.write("Your program is", menu)

#multiselect (Adds a box where multiple options can be selected)
career = st.multiselect("Select your career", ["IT", "Engineer", "Doctor"])
st.write("Your career is", career)

#slider (Adds a slider for the user to select a value)
points=st.slider("How many points" ,1,10)                              
#button (Adds a button)
st.button("Click")
if st.write("Button clicked"):

 #text input (Adds a box for text input)
name= st.text_input("Enter your name:")
if st.button("Run"):
    st.success(firstname.title()) # capitalizes the first letter of the entered name with ".title()"

#text area (Adds a typing area for text input)
area= st.text_area("you can type paragraph:")
    
#date input (Adds a box for date selection)
import datetime   
today=st.date_input("Today is" , datetime.datetime.now()) # adds today's date with now()

#number input
st.number_input('Pick a number', 0, 10)

# multiple line code 
with st.echo(): # Shows the code and the output of the code at the same time.
    import pandas as pd
    import numpy as np
    import streamlit as st

# code raw (to print as a single line of code)
st.code("import pandas as pd")

# sidebar (Adds a side panel area)
st.sidebar.title("Side pane

# Read the file directly with pandas..file must be in the same directory
data = pd.read_csv('Advertising.csv')
st.write(data) # Print DataFrame to screen
# st.dataframe(data) # does the same thing as the top line (prints df to the screen)
# Let's create a scatter plot with Plotly. For example, let's compare TV advertising budget and sales. Let's do it with Advertising.csv file
import plotly.express as px
fig = px.scatter(data, x='TV', y='sales', title='TV Ads vs. Sales')
st.plotly_chart(fig)
Let's create a bar chart with #Vega-Lite. For example, let's show the average radio advertising budget. We use the Advertising.csv file
bar_chart = {
    "mark": "bar",
    "encoding": {
        "x": {"field": "radio", "bin": True, "type": "quantitative"},
        "y": {"aggregate": "average", "field": "sales", "type": "quantitative"}
    }
}
st.vega_lite_chart(data, bar_chart)

#st.pyplot(): This function is used to show graphs created with Matplotlib. For example, let's show TV advertising budget and sales in a scatter plot. We use the Advertising.csv file
import matplotlib.pyplot as plt
plt.figure(figsize=(10, 6))
plt.scatter(data['TV'], data['sales'], color='blue')
plt.title('TV Ads vs. Sales')
plt.xlabel('TV Advertising Budget')
plt.ylabel('Sales')
st.pyplot(plt)

#st.map():This function is used for geographic data visualization. Advertising.csv does not have this type of data, so the use of this function is not appropriate for this dataset. However, a general example
# Sample data
map_data = pd.DataFrame({
    'lat': [37.76, 37.77, 37.78],
    'lon': [-122.4, -122.5, -122.6]
})
st.map(map_data)

#st.line_chart():This function is used to show line charts. For example, let's show the sales in the data set with a line chart:
st.line_chart(data['sales'])

#st.altair_chart():Let's create a bar chart with Altair. For example, let's compare radio advertising budget with sales. We use the Advertising.csv file:
import altair as alt
chart = alt.Chart(data).mark_bar().encode(
    x='radio',
    y='sales',
    color='sales'
).properties(
    title='Radio Ads vs. Sales'
)
st.altair_chart(chart, use_container_width=True)

# Displays the data frame
df = pd.DataFrame({"a": [1, 2, 3], "b": [4, 5, 6]})
st.code(
    df.to_markdown(),
    #lang="markdown",
    #linenumbers=True,
)

#st.checkbox ( Creates a checkbox)
if st.checkbox('Confirm'): st.write('Confirmed!')

st.balloons() # Adds a balloon and snowflake effect to the page for a fun look
st.snow()

As in the picture below, with additions such as st.sidebar.slider, st.sidebar.selectbox, st.sidebar.radio on the left, we design the inside of the sidebar, that is, the panel seen in the picture.

Additional codes beyond these can be found within the content on streamlit.io. Please click on the link to access this page. The writing of the codes is sometimes updated, or information about commands being removed in the new version is also provided by Streamlit.

Along with enhancing the page design with the codes provided above, we must also add codes that will recall the ML model within the app.py file and perform predictions using functions such as pickle.load(), joblib.load(), Scaler.transform(), and model.predict().

Recently, writings in which integration with ChatGPT is achieved are quite esteemed. In this context, I did not delve into the integration of Streamlit with ChatGPT in this article, but I am sharing a blog post published on Streamlit’s official page in the linked connection.

Let us conclude our writing with a screenshot created with some of the codes featured in this article. In the continuation of this article, you can read the stages of deploying and publishing the web page you created with streamlit via AWS in an academic manner.