Hallo everyone. This is the first post where I will be sharing you about how you can publish your own web app for free with almost zero coding knowledge (you would need some) and without any cost. Web app is very easy to built and with the advent of chat GPT, it is more than easier now. First thing first, you should have following things or account with you if you are planning to follow along:

• GitHub Account (2 minute task)
• Streamlit Account (1 minute task)
• ChatGPT access (1 minute task)
• Visual Studio Code (5 minutes to setup)

You can follow this on either windows, mac or Linux. Visual Studio is the platform which allows you to run codes and all those things which we don’t know. Visual Studio will be the platform. You can create GitHub account so that you can upload your code in the GitHub repository (just a fancy word). It is just like creating an Instagram account. Streamlit is the main site which will be used to publish your web app. Streamlit will look into your GitHub account for the code and publish that app. So all we need now is idea and how to code. That’s where chatGPT comes in. Let’s begin the journey to publish your own web app for free.

Setting up Prerequisite

Just a heads up to see if you have everything installed.

Sign up would be easy but most problem will come when you try to install Visual Studio Code. After downloading the VS code, you need to install python IDE and other libraries. Fortunately, you can follow along this tutorial from VS code to setup. This might be frustrating if you are new to this but after this, rest of the things will be easier and you will like it there.

Also, if you are finally not able to install and work with VS code then just copy the python code to your GitHub account. No need for VS Code too. It is needed to make sure that your code is running fine and the UI is as you desire. Google Colab is fully online and doesn’t need installation if you still want to run the python code.

Using AI to give code for Streamlit based web app

Now, you can open your chat GPT and type the following prompt.

Prompt:

can you give me a streamlit code for a web app to visualize iris dataset

import streamlit as st
import matplotlib.pyplot as plt
import pandas as pd
# Set the title of the web app
st.title("Iris Dataset Visualization")
# Load the Iris dataset
iris = pd.read_csv("https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv")
# Sidebar with options
st.sidebar.header("Visualization Options")
plot_type = st.sidebar.selectbox("Select plot type:", ["Pair Plot", "Scatter Plot", "Histogram"])
# Visualize based on user selection
if plot_type == "Pair Plot":
    st.subheader("Pair Plot")
    hue_option = st.sidebar.checkbox("Color by species")
    
    plt.figure(figsize=(10, 8))
    if hue_option:
        plt.scatter(iris['sepal_length'], iris['sepal_width'], c=iris['species'].astype('category').cat.codes, cmap='viridis')
    else:
        plt.scatter(iris['sepal_length'], iris['sepal_width'], cmap='viridis')
    plt.xlabel("Sepal Length")
    plt.ylabel("Sepal Width")
    plt.title("Scatter Plot")
    plt.colorbar(label="Species")
    st.pyplot()
elif plot_type == "Scatter Plot":
    st.subheader("Scatter Plot")
    x_axis = st.sidebar.selectbox("Select X-axis feature:", iris.columns[:-1])
    y_axis = st.sidebar.selectbox("Select Y-axis feature:", iris.columns[:-1])
    plt.figure(figsize=(10, 8))
    plt.scatter(iris[x_axis], iris[y_axis], c=iris['species'].astype('category').cat.codes, cmap='viridis')
    plt.xlabel(x_axis.capitalize())
    plt.ylabel(y_axis.capitalize())
    plt.title("Scatter Plot")
    plt.colorbar(label="Species")
    st.pyplot()
elif plot_type == "Histogram":
    st.subheader("Histogram")
    selected_feature = st.sidebar.selectbox("Select a feature:", iris.columns[:-1])
    
    plt.figure(figsize=(10, 8))
    plt.hist(iris[selected_feature], bins=20, edgecolor="k")
    plt.xlabel(selected_feature.capitalize())
    plt.ylabel("Frequency")
    plt.title("Histogram")
    st.pyplot()

This was pretty simple and such codes run as well. No need to verify it. The only problem is if you want to build something cool web app for free then you need to learn python and the libraries.

I hope you have your GitHub account and Streamlit account ready. Nothing more is needed now.

Uploading web app content to GitHub

This is the second last stage. In this step, just copy the code above and create a text file. Change the name of text file to app.py. You can use notepad.

After you have created a python file, next thing to do is upload it to GitHub. Go to repository and create a new repo by clicking new. Name it something you like. I have named it Streamlit Demo.

After this, you will see something like below:

You should keep it public for now. No need to do anything more. Publish it.

You might see a lot of words now, ignore it.

Now, upload app.py file here by selecting uploading an existing file. (Tip: You even don’t need to create app.py in the beginning, you can create in the GitHub as well, just forgot about this feature)

One last thing now, Streamlit requires you to mention the library you are using so that it can install somewhere (guess) so that our web app can be hosted. Create requirements.txt file with following lines directly in GitHub.

matplotlib
pandas

Now, all set with GitHub.

Hosting web app for free with Streamlit

There are tons of other platform but Streamlit has provided its own cloud based platform for free. There are limits though. Later you might want to switch to Heroku. After you have your streamlit account, follow this link.

Select new app here.

Now, select paste github URL and paste your github repo link you created above. The link should be of app.py.

You can even name the URL. I named it demostream. Make sure to replace URL. I have not shown my username there! Click on deploy and you got your web app!!

Web app Demo

Here is the screenshot for web app demo.

Also, link for the web app: https://demostream.streamlit.app/. I hope you were able to follow along.

I have not explained what IRIS dataset it, what python libraries are and many things. Let me know if you faced any difficulty or want anything to learn. Will be happy to help.

Also, I have made some other web apps using the same. Here is face recognition and detection app. It can detect similar faces in videos and cluster them together and visualize them. You can also download the grouped faces in zipped file after the process.

Link for the app: https://face-detection-identification.streamlit.app/