How to make a background remover app using Python rembg and Flask

Flask is a lightweight and flexible microweb framework for Python. It’s designed to help learners get started with web development quickly and easily. Flask provides the basics for building web applications, leaving the choice of extensions up to the developer.

To remove backgrounds in Flask and enhance the functionality of our web application, integrating the rembg library is a crucial step. The rembg library is specifically designed for efficient background removal, making it an ideal choice for image-processing tasks within your Flask application. Below is a detailed guide on how to seamlessly incorporate rembg into your Flask project:

Steps to remove the background

Install `rembg`

Use pip to install the rembg library:

Create a Flask application

Set up a Flask application. Create a file named app.py and add the necessary routes and logic.

Handle background removal

In the Flask route for processing images, utilize the rembg library to remove the background.

Create HTML templates

Create a folder named templates and inside it, add an HTML file (e.g., index.html) for the user interface.

Demo application

Following is the running example of removing background using rembg in Flask. Click the run button and the output will be displayed in the output tab.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Background Remover</title>
    <style>
        img {
            max-height: 500px;
            border: 1px solid black;
        }
        .images-container {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .image-container {
            flex: 1;
            margin: 10px;
            text-align: center;
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Background Remover</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/*">
        <input type="submit" value="Upload and Remove Background">
    </form>

    {% if original_image and modified_image %}
        <div class="images-container">
            <div class="image-container">
                <h2>Original Image</h2>
                <img src="{{ original_image }}">
            </div>
            <div class="image-container">
                <h2>Modified Image</h2>
                <img src="{{ modified_image }}">
            </div>
        </div>
    {% endif %}
</body>
</html>

Background removal application

Code explanation

Following is the breakdown of the code given above:

Lines 1–4: Importing the required libraries.
Line 6: Creating an instance of the Flask application.
Line 8: This is a route decorator for the root URL. It means that when a user navigates to the base URL of the application, the index() function will be called.
Lines 9–10: This function simply renders an HTML template called index.html.
Lines 13–25: This function does the following:
- Retrieves the uploaded image file from the request.
- Reads the contents of the uploaded file.
- Applies the remove function (which is likely used for background removal) to the input image.
- Encodes both the original and modified images to base64 format.
- Passes these base64-encoded images to the index.html template for display.
Lines 28–29: This section ensures that the Flask application runs when the script is executed directly. It specifies that the application should run in debug mode, be accessible from all interfaces (0.0.0.0), and use the 3000 port.

Free Resources