How to Make Your First Streamlit Web Application

Creating your first Streamlit web application can seem like a daunting task, but it's actually quite simple once you understand the basics. In this article, we'll walk through the process of building a simple web application using Streamlit, a powerful open-source framework for building machine learning and data science applications. By the end of this tutorial, you'll have a solid understanding of how to create a web application with Streamlit and be ready to start building your own projects.

Before diving into the tutorial, it's important to note that you'll need to have Python and Streamlit installed on your computer in order to follow along. You can install Streamlit by running the following command in your terminal:

pip install streamlit

Setting up a new Streamlit project

The first step in creating a Streamlit web application is to set up a new project. To do this, open a terminal and navigate to the directory where you want to create your project. Then, run the following command:

streamlit init

This will create a new directory with the name app and a file called app.py in it. This is the starting point for your Streamlit web application.

Creating a simple user interface

Now that you have a new Streamlit project set up, it's time to start building the user interface for your application. The core building block of a Streamlit web application is the st. function. This function is used to create various elements of the user interface such as text, input fields, and buttons.

Let's start by adding a simple text element to the page. Open the app.py file in your text editor and add the following code:

import streamlit as st

st.title("My first Streamlit web application")
st.write("Hello, Streamlit!")

This code imports the streamlit module and uses the st.title and st.write functions to create a title and a simple text element on the page.

Now, let's run the application using the following command:

streamlit run app.py

You will get a localhost link to see your application.

Adding user input

One of the key features of a web application is the ability to accept user input. Streamlit makes it easy to add input fields and other interactive elements to your application.

Let's add a simple input field to the page where users can enter their name. Add the following code to the app.py file:

name = st.text_input("What's your name?")
if st.button("Submit"):
    st.write("Hello, " + name + "!")

This code uses the st.text_input function to create a text input field, and the st.button function to create a submit button. When the button is clicked, the code retrieves the value entered in the input field and displays a greeting message.

Adding a chart

A common use case for web applications is visualizing data. Streamlit has built-in support for several charting libraries, including matplotlib, bokeh, and plotly.

Here is an example of how to create a simple line chart using matplotlib:

import matplotlib.pyplot as plt
import numpy as np

# Create some data
x = np.linspace(0, 10, 100)
y = np.sin(x)

Create a chart

st.line_chart(y)

This code creates a simple line chart using `matplotlib` and the `numpy` library togenerate some data. The `st.line_chart` function is used to create the chart and display it on the page. You can also use other charting libraries such as `bokeh` and `plotly`. For example, the following code shows how to create a bar chart using `plotly`:

import plotly.express as px

# Create some data
data = px.data.gapminder()

# Create a chart
st.bar_chart(data)

Adding a map

Another common use case for web applications is displaying maps. Streamlit has built-in support for several map libraries, including folium, plotly, and mapbox. Here is an example of how to create a simple map using folium:

import folium

# Create a map
m = folium.Map(location=[45.523, -122.675])

# Add a marker
folium.Marker(location=[45.523, -122.675]).add_to(m)

# Display the map
st.folium_map(m)

This code creates a simple map using folium and the folium.Map function to create the map. The folium.Marker function is used to add a marker to the map. The st.folium_map function is used to display the map on the page.

Adding a video

Another way to add multimedia to your Streamlit application is by adding a video. You can use the st.video function to add a video to your page.

Here is an example of how to add a video:

video_file = open("video.mp4", "rb").read()
st.video(video_file)

This code uses the st.video function to add a video to the page. You can also specify the width and height of the video using the width and height arguments.

Conclusion

In this tutorial, we've walked through the process of building a simple web application using Streamlit. We've covered the basics of setting up a new project, creating a user interface, adding user input, charts, maps, and videos. With the knowledge you've gained from this tutorial, you should be able to start building your own Streamlit web applications. Remember that Streamlit has many more features, widgets and functionalities. Feel free to explore the documentation and build more sophisticated and interactive applications.