🖼️ 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.

---

🛤️ 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  

• Open the project folder in VS Code:

   code .  

• Install the required libraries using the following command:

   pip install streamlit pillow  

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  

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

   echo. > imgconvrtr.py  

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  

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  

For Windows users:

   echo. > app.py  

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()}"  
           )  

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  

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  

1. Navigate to the project directory:

   cd Image-Convertor  

1. Install dependencies:

   pip install -r requirements.txt  

1. Start the Streamlit server:

   streamlit run app.py  

1. Open your browser at http://localhost:8501.

---

🎥 Demo

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

And a screenshot of the app interface:

---

🙏 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! 😄

---