Creating an Awesome Web App with Python and Streamlit

“How can we make a machine learning script and convert it into an app as simple as possible, so that it basically feels like a scripting exercise?”

— Adrien Treuille (inventor of Streamlit)

Photo by Luke Chesser on Unsplash

Web applications are a great way to display your results for a data science or machine learning project . Developing web applications from scratch requires a lot of time, effort and technical skills. An alternative way to build web applications is to use open-source python libraries like Streamlit.

Streamlit is an open-source Python framework that allows you to create beautiful interactive websites for Data Science and Machine Learning projects. Streamlit provides features to design and configure webpages, access and display data, and generate a variety of different types of charts and graphs. You can build and deploy a powerful web application in a few minutes.

Streamlit is compatible and integrates with many Python libraries including scikit-learn, Keras, PyTorch, NumPy and Pandas. Streamlit supports displaying text, data, interactive widgets, and many charting and graphing libraries including Matplotlib, Vega-Lite and Plotly. If you would like more in depth information visit this link https://docs.streamlit.io/

In this article we will create a script that will create a webpage including design and configuration, display of data and visualizations using charts and graphs. The following steps will be performed using Python and Streamlit frameworks.

1. Install the Packages.

2. Import the Libraries.

3. Import the Dataset.

4. Design and Configure the Web Page.

5. Display some Data on the Web Page.

6. Visualize the Stock Data.

Install the Packages

First we need to install the Streamlit and Tornado packages to develop and run our application.

!pip install streamlit -q !pip install tornado==5.1

Streamlit is an open-source Python library that makes it easy to create and share beautiful, custom web apps for machine learning and data science. Tornado is a Python web framework and an asynchronous networking library that relies on non-blocking network I/O to serve web applications.

Import the Libraries

import streamlit as st import pandas as pd import numpy as np import matplotlib.pyplot as plt import datetime

Import the Dataset

The dataset we are using for this application was sourced from Kaggle and can be found at the this link https://www.kaggle.com/datasets/kalilurrahman/nvidia-stock-data-latest-and-updated The dataset contains stock data for Nvidia Corporation from 1/22/1999 thru 11/12/2021. We will download this file into our local file folder.

We are developing in Google’s Colab environment so we need to load the file we just downloaded into Colab.

from google.colab import files uploaded = files.upload()

Next we will Import the dataset into a dataframe.

df = pd.read_csv('NVidia_stock_history.csv')

For this project we are only going to look at data from the past three years with dates from 01/02/2019 thru 11/12/2021. We will delete records prior to 01/01/2019. If you would like you can look at all of the history in the dataset or a subset of the data.

# Delete rows where date is before 1/1/2019. df['Date'] = pd.to_datetime(df['Date']) df = df[~(df['Date'] < '2019-01-01')] df.head()

Let’s reset the index to the Date column.

# Reset the index to the Date column. df['Date'] = pd.to_datetime(df['Date'],format='%Y/%m/%d') df.reset_index(drop=True,inplace=True) df.set_index('Date',inplace=True)

Design and Configure the Web Page

We will begin by adding a title and logo on the web page.

# Specify the title and logo for the web page. st.set_page_config(page_title='Nvidia Stock Prices', page_icon='https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', layout="wide")

Let’s add some social media links to our personal profile on the web page.

# Add social media tags and links to the web page. """ [![Star](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@dniggl) [![Follow](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/dennisniggl) [![Follow](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/DennisNiggl) # Nvidia's Stock Performance """

Let’s add a sidebar to the web page to display some basic information about the app.

# Add a sidebar to the web page. st.markdown('---') # Sidebar Configuration st.sidebar.image('https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', width=200) st.sidebar.markdown('# Nvidia Stock Price Analysis') st.sidebar.markdown('Nvidia is a global leader in artificial intelligence hardware and software.') st.sidebar.markdown('Stock Data from 2019 thru 2021') st.sidebar.markdown('You can visualise Nvidia \'s Stock Prices Trends and Patterns over a given time span.') st.sidebar.markdown('---') st.sidebar.write('Developed by Dennis Niggl') st.sidebar.write('Contact at dniggl@cox.net')

The above specifications will produce the following web page.

Display some Data on the Web Page

Let’s look at the data and show some statistical information about the data.

# Display the Data in the App. st.subheader('Looking at the Data') st.dataframe(df.head()) # Display statistical information on the dataset. st.subheader('Statistical Info about the Data') st.write(df.describe())

This will produce the following items being displayed on the web page.

We will now add a filter that will give users the flexibility to select a date range for the data they want to analyze. This will provide useful insights for different time frames.

# Selection for a specific time frame. st.subheader('Select a Date Range') df_select = df col1, col2 = st.columns(2) with col1: st.write('Select a Start Date') start_date = st.date_input('Start Date',min_value= datetime.date(2019,1,2),max_value=datetime.date(2021,11,12),value=datetime.date(2019,1,2)) with col2: st.write('Select an End Date') end_date = st.date_input('End Date',min_value=datetime.date(1999,1,22),max_value=datetime.date(2021,11,12),value=datetime.date(2021,11,12)) if(start_date != None or end_date != None): if(start_date < end_date): df_select = df[start_date:end_date] else: st.warning("Invalid Date Range - Re-enter Dates")

This will produce the following items being displayed on the web page. In this example we have selected a start date of 11/02/2020 thru 11/12/2021.

Visualize the Stock Data

The following graphs and charts will show the performance of Nvidia stock prices from 11/02/2020 thru 11/12/2021. This will include open and close prices, high and low prices, daily volume traded and moving averages of open and close prices.

# Open and Close Prices. st.subheader("Open & Close Prices for Nvidia Stock") st.markdown("\n\n") st.line_chart(df_select[['Open','Close']])

# High and Low Prices. st.subheader("High and Low Prices for Nvidia Stock") st.markdown("\n\n") st.line_chart(df_select[['High', 'Low']])

# Volume of Stock Traded. st.subheader("Volumn Traded for Nvidia Stock") st.markdown("\n\n") st.bar_chart(df_select['Volume'])

# Moving average from 50 days to 250 days. st.subheader('Moving Averages of Open and Closing Stock Prices') movevavg_len = st.slider('Select the number of days for Moving Averages',min_value=0,max_value=250,value=50) moveavg_oc = df_select[['Open','Close']].rolling(50).mean() st.line_chart(moveavg_oc)

We now need to bundle all of our code shown above into a file (app.py) for streamlit processing. Note: prior to running this step be sure that Streamlit and Tornado packages are installed. Also, if you are running in Google Colab environment, load the dataset into Colab.

%%writefile app.py # Import the libraries. import streamlit as st import pandas as pd import numpy as np import matplotlib.pyplot as plt import datetime # Specify title and logo for the webpage. st.set_page_config(page_title='Nvidia Stock Prices', page_icon='https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', layout="wide") # Add social media tags and links to the web page. """ [![Star](https://img.shields.io/badge/Medium-12100E?style=for-the-badge&logo=medium&logoColor=white)](https://medium.com/@dniggl) [![Follow](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/dennisniggl) [![Follow](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/DennisNiggl) # Nvidia's Stock Performance """ # Add a sidebar to the web page. st.markdown('---') # Sidebar Configuration st.sidebar.image('https://cdn.freebiesupply.com/logos/thumbs/1x/nvidia-logo.png', width=200) st.sidebar.markdown('# Nvidia Stock Price Analysis') st.sidebar.markdown('Nvidia is a global leader in artificial intelligence hardware and software.') st.sidebar.markdown('Stock Data from 2019 thru 2021') st.sidebar.markdown('You can visualise Nvidia \'s Stock Prices Trends and Patterns over a given time span.') st.sidebar.markdown('---') st.sidebar.write('Developed by Dennis Niggl') st.sidebar.write('Contact at dniggl@cox.net') # Import the dataset into a dataframe. df = pd.read_csv('NVidia_stock_history.csv') # Delete rows where date is before 1/1/2019. df['Date'] = pd.to_datetime(df['Date']) df = df[~(df['Date'] < '2019-01-01')] # Reset the index to the Date column. df['Date'] = pd.to_datetime(df['Date'],format='%Y/%m/%d') df.reset_index(drop=True,inplace=True) df.set_index('Date',inplace=True) # Display the Data in the App. st.subheader('Looking at the Data') st.dataframe(df.head()) # Display statistical information on the dataset. st.subheader('Statistical Info about the Data') st.write(df.describe()) # Selection for a specific time frame. st.subheader('Select a Date Range') df_select = df col1, col2 = st.columns(2) with col1: st.write('Select a Start Date') start_date = st.date_input('Start Date',min_value= datetime.date(2019,1,2),max_value=datetime.date(2021,11,12),value=datetime.date(2019,1,2)) with col2: st.write('Select an End Date') end_date = st.date_input('End Date',min_value=datetime.date(1999,1,22),max_value=datetime.date(2021,11,12),value=datetime.date(2021,11,12)) if(start_date != None or end_date != None): if(start_date < end_date): df_select = df[start_date:end_date] else: st.warning("Invalid Date Range - Re-enter Dates") # Graphs and charts for selected date range. # Open & Close Prices. st.subheader("Open & Close Prices for Nvidia Stock") st.markdown("\n\n") st.line_chart(df_select[['Open','Close']]) # High and Low Values. st.subheader("High and Low Prices for Nvidia Stock") st.markdown("\n\n") st.line_chart(df_select[['High', 'Low']]) # Volume of Stock Traded. st.subheader("Volumn Traded for Nvidia Stock") st.markdown("\n\n") st.bar_chart(df_select['Volume']) # Moving average from 50 days to 250 days. st.subheader('Moving Averages of Open and Closing Stock Prices') movevavg_len = st.slider('Select the number of days for Moving Averages',min_value=0,max_value=250,value=50) moveavg_oc = df_select[['Open','Close']].rolling(50).mean() st.line_chart(moveavg_oc)

We will now run the streamlit application which will process the file created in the previous step using the local tunnel. Local tunnel exposes your local host to the world for testing and sharing.

!streamlit run app.py & npx localtunnel --port 8501

After the streamlit application runs you will see the screen below. You can view the web page that was created by clicking on your url link.

After selecting your url link you will see the screen shown below. This is informational and a reminder to verify the website address for security purposes. The web page also includes some options to bypass this page. For now, just select the Click to Continue button.

The newly created web page will display the screen images that were shown above. This includes title, logo, social media tags, sidebar, stock data, statistics, date range selection, and graphs and charts.

We have now completed developing a web app using python and the streamlit frameworks! You can deploy your web application on the Streamlit cloud platform for free. Streamlit Cloud is a workspace for you to deploy, manage, and collaborate with others on your Streamlit app. You deploy your app by setting up a streamlit cloud account, add your app and dependencies to your Github account, and deploy your app from Github by specifying the repository, branch and main file path. You can find more details for deployment by going to this link https://docs.streamlit.io/streamlit-cloud/get-started/deploy-an-app

Thanks so much for reading my article! If you have any comments or feedback please let me know.

You can unlock full access to my writing and the rest of Medium by signing up for Medium membership ($5 per month) using this link https://medium.com/@dniggl/membership . By signing up through this link, I will receive a portion of your membership fee at no additional cost to you. Thank you!

.css-15w88e5{color:var(--chakra-colors-fg-neutral-primary);font-weight:inherit;letter-spacing:-0.09px;}Creating an Awesome Web App with Python and Streamlit

“How can we make a machine learning script and convert it into an app as simple as possible, so that it basically feels like a scripting exercise?”

— Adrien Treuille (inventor of Streamlit)

Creating an Awesome Web App with Python and Streamlit