Making a Webapp is so EASY with Streamlit

Streamlit is kind of popular among data scientists because you don't require frontend knowledge in general.

They provide simple and easy-to-implement elements and widgets without writing much code.

I used streamlit several times in my ML/AI projects, and the experience was great. You can focus more on writing the logic, and the frontend part (design, layout, and more) is handled very well by streamlit.

I created a demo webapp using streamlit and Python so that you can understand what I'm saying.

Webapp

This webapp is about converting an image format into another format, for instance, if your image is in PNG format, you can convert it into a JPEG image.

The following code makes the user interface of the webapp.

import streamlit as st
from imgconvrtr import convert_img_format
from PIL import Image

# Webpage setup
st.set_page_config(page_title="Image Convrtr")
st.title("Image Converter")
st.write("Convert your images in one _click_")

# File uploader
uploaded_file = st.file_uploader(
    "Upload an image",
    type=["png", "jpg", "jpeg", "jfif", "bmp"]
)

if uploaded_file is not None:
    # Show the uploaded image
    img = Image.open(uploaded_file)
    st.image(img, caption="Uploaded Image", use_column_width=True)

    # Show original image format
    st.write(f"Original format: {img.format}")

    # Output format selection
    format_options = ["PNG", "JPEG", "JFIF", "BMP"]
    output_format = st.selectbox("Choose output format", format_options)

    # Convert the image
    if img.format != output_format:
        if st.button("Convert"):
            converted_img = convert_img_format(uploaded_file, output_format.lower())
            st.write(f"Image converted to {output_format}")

            # Download button
            st.download_button(
                label=f"Download as {output_format}",
                data=converted_img,
                file_name=f"image.{output_format.lower()}",
                mime=f"image/{output_format.lower()}"
            )
    else:
        st.write("Select a different format... Yo!")

Now you already have a brief idea of what this webapp does. We can directly jump onto discussing the components used in this code.

In the beginning, you can see page elements like st.title and st.write which are used to set the page title and display text on the page, respectively.

Next, you can see a widget for uploading a file (in this case used for uploading an image). See how easy it is to create a file uploader.

st.image is used to display the uploaded image by the user.

Then we have a dropdown to select a variety of formats which is created using a selectbox (st.selectbox) widget.

Now, you can see we have two buttons (st.button and st.download_button). They both are the same but it's all about convenience.

The st.button displays a button widget that we used here for image conversion.

The st.download_button makes it useful when the user needs to directly download the file from the app.

Streamlit provides numerous elements and widgets for different purposes.

Now if you want to try this webapp, you need to install the required libraries:

pip install streamlit pillow

Here's the image conversion function:

from PIL import Image
import io

# Function to convert image format
def convert_img_format(image_file, frmat):
    with Image.open(image_file) as img:
        output_img = io.BytesIO()
        img.save(output_img, format=frmat.upper())
        output_img.seek(0)
        return output_img

Run the app using the following command:

streamlit run <script_name>.py

Replace <scipt_name> with the actual script name.

That's all for now.
Keep Coding✌✌