DEV Community

Cover image for 🖼️ Build an Image Converter WebApp Using Python and Streamlit
Lawani Elyon John
Lawani Elyon John

Posted on

🖼️ Build an Image Converter WebApp Using Python and Streamlit

#python #streamlit #tutorial #learning

🌟 Introduction

Have you ever wanted a quick, browser-based tool to convert image formats without installing extra software? 🤔 Well, I built an Image Converter WebApp using Python and Streamlit, and it does just that! 🚀 In this post, I’ll walk you through the app, its features, the process of building it, and what I’ve learned along the way.

🛠️ Tech Stack

This project uses:

  • Python: The powerhouse behind image processing.
  • Streamlit: A fantastic framework for building fast, interactive web apps.
  • Pillow (PIL): For handling image file processing.

✨ Features

Here’s what this app offers:

  • 🖼️ File Upload: Supports image formats like PNG, JPG, JPEG, JFIF, and BMP.
  • 🔄 Format Conversion: Easily convert images into formats like PNG, JPEG, JFIF, or BMP.
  • 📤 Image Preview: Displays the uploaded image and its original format.
  • ⬇️ Download Option: Allows you to download the converted image instantly.

Image0 description

🛤️ Let's build the App

Step 1: Setting Up the Project

  1. Open your terminal or command prompt.

  2. Create a new directory named IMGCONVERTOR and navigate into it:

 mkdir IMGCONVERTOR cd IMGCONVERTOR
Enter fullscreen mode Exit fullscreen mode
  • Open the project folder in VS Code: 
 code .
Enter fullscreen mode Exit fullscreen mode
  • Install the required libraries using the following command: 
 pip install streamlit pillow
Enter fullscreen mode Exit fullscreen mode

Now you’re ready to start building the app! 🎉

Step 2: Writing the Core Functionality

  1. Inside your project directory, create a new Python file named imgconvrtr.py: 
 touch imgconvrtr.py
Enter fullscreen mode Exit fullscreen mode

If you're using Windows, you can create the file with:

 echo. > imgconvrtr.py
Enter fullscreen mode Exit fullscreen mode
  1. Open the imgconvrtr.py file in your text editor, and add the following code to define the core function for image conversion: 
 from PIL import Image import io 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
Enter fullscreen mode Exit fullscreen mode

This file acts as a module that will be imported into your main Streamlit app to handle image processing.

Step 3: Creating the Streamlit Interface

Streamlit makes building interactive web apps easy, and it's perfect for this project:

  1. In your project directory, create a new Python file named app.py: 
 touch app.py
Enter fullscreen mode Exit fullscreen mode

For Windows users:

 echo. > app.py
Enter fullscreen mode Exit fullscreen mode
  1. Open the app.py file in your text editor, and add the following script: 
 import streamlit as st from PIL import Image from imgconvrtr import convert_img_format # App Title  st.title("Image Converter") # File Uploader  uploaded_file = st.file_uploader("Upload an Image", type=["png", "jpg", "jpeg", "jfif", "bmp"]) if uploaded_file is not None: # Display the uploaded image  img = Image.open(uploaded_file) st.image(img, caption="Uploaded Image", use_column_width=True) st.write(f"Original format: {img.format}") # Format selection dropdown  output_format = st.selectbox("Choose the output format", ["PNG", "JPEG", "JFIF", "BMP"]) # Convert and download the image  if st.button("Convert 📸"): converted_img = convert_img_format(uploaded_file, output_format.lower()) 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()}" )
Enter fullscreen mode Exit fullscreen mode
  1. Save the file. This script builds an interactive interface where users can upload images, select a desired format, and download the converted image.

You’re now ready to test your app! Run the following command in your terminal:

streamlit run app.py
Enter fullscreen mode Exit fullscreen mode

This will launch the app in your default web browser, allowing you to interact with the converter. 🚀

🌱 What I Learned

This project taught me:

  • How to use Pillow for image processing.
  • Creating interactive UI with Streamlit.
  • Handling file uploads and downloads in web apps.

🚀 Improvements

Here are some ideas to take this project further:

  • Add GIF and WebP format support.
  • Enable image resizing and cropping.
  • Improve accessibility with better keyboard navigation.

💻 Running the Project

To run this app locally:

  1. Clone the repo: 
 git clone https://github.com/Lawani-EJ/Image-Convertor
Enter fullscreen mode Exit fullscreen mode
  1. Navigate to the project directory: 
 cd Image-Convertor
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies: 
 pip install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode
  1. Start the Streamlit server: 
 streamlit run app.py
Enter fullscreen mode Exit fullscreen mode
  1. Open your browser at http://localhost:8501.

🎥 Demo

Here’s a quick look at the app in action:

video descrtoption

And a screenshot of the app interface:

Image1 description

🙏 Thank You!

Thanks for reading! If you found this project interesting, give it a star ⭐ on GitHub and share your thoughts in the comments below. Let’s make image processing easier for everyone! 😄

Top comments (0)