DEV Community

Cover image for πŸ–ΌοΈ Build an Image Converter WebApp Using Python and Streamlit
Lawani Elyon John
Lawani Elyon John

Posted on

2

πŸ–ΌοΈ Build an Image Converter WebApp Using Python and Streamlit

🌟 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! πŸ˜„


Billboard image

Monitor more than uptime.

With Checkly, you can use Playwright tests and Javascript to monitor end-to-end scenarios in your NextJS, Astro, Remix, or other application.

Get started now!

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay