πŸš€ AI Background Remover – Remove Image Background in 1 Click! (Python Project)

Demo :


Click Video πŸ‘‡πŸ‘‡πŸ‘‡











πŸ“‚ Folder Structure:

/ai_bg_remover

│-- /static

│   │-- /css

│   │   └-- styles.css

│   │-- /uploads

│-- /templates

│   └-- index.html

│-- app.py

│-- requirements.txt


Code :

Install Dependencies : cmd => pip install flask rembg pillow


πŸ“Œ 1. Backend (Flask) – app.py

from flask import Flask, render_template, request, send_file
from rembg import remove
from PIL import Image
import os

app = Flask(__name__)

UPLOAD_FOLDER = "static/uploads"
OUTPUT_FOLDER = "static/outputs"
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
os.makedirs(OUTPUT_FOLDER, exist_ok=True)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/remove-bg', methods=['POST'])
def remove_bg():
    if 'image' not in request.files:
        return "No file uploaded", 400

    file = request.files['image']
    input_path = os.path.join(UPLOAD_FOLDER, file.filename)
    output_path = os.path.join(OUTPUT_FOLDER, file.filename.replace('.jpg', '.png'))

    file.save(input_path)

    # Remove Background
    image = Image.open(input_path)
    output = remove(image)
    output.save(output_path)

    return output_path  # Send image URL to frontend

if __name__ == '__main__':
    app.run(debug=True)


πŸ“Œ 2. Frontend (HTML) – templates/index.html


<!DOCTYPE html>

<html lang="en">

<head>

    <title>AI Background Remover</title>

    <link rel="stylesheet" href="/static/css/styles.css">

</head>

<body>

    <h1>Upload Image to Remove Background</h1>

    <input type="file" id="image-input">

    <button onclick="removeBg()">Remove Background</button>

    

    <h2>Output Image:</h2>

    <img id="output-img" style="display:none; max-width: 300px;">

    <br>

    <a id="download-btn" style="display:none;" download="bg_removed.png">Download Image</a>


    <script src="/static/js/script.js"></script>

</body>

</html> 


πŸ“Œ 3. JavaScript (Frontend Logic) – static/js/script.js


function removeBg() {

    let input = document.getElementById("image-input").files[0];

    if (!input) {

        alert("Please upload an image first!");

        return;

    }


    let formData = new FormData();

    formData.append("image", input);


    fetch("/remove-bg", {

        method: "POST",

        body: formData

    })

    .then(response => response.text())

    .then(imageUrl => {

        let outputImg = document.getElementById("output-img");

        outputImg.src = "/" + imageUrl;

        outputImg.style.display = "block";


        let downloadBtn = document.getElementById("download-btn");

        downloadBtn.href = "/" + imageUrl;

        downloadBtn.style.display = "inline";

        downloadBtn.textContent = "Download Image";

    })

    .catch(error => console.error("Error:", error));

}


πŸ“Œ 4. CSS (Basic Styling) – static/css/styles.css


body {

    font-family: Arial, sans-serif;

    text-align: center;

    margin: 20px;

}


button {

    background: #007BFF;

    color: white;

    border: none;

    padding: 10px 20px;

    cursor: pointer;

    font-size: 16px;

}


button:hover {

    background: #0056b3;

}


img {

    margin-top: 20px;

}

Comments

Popular posts from this blog

πŸš€ Simple Login & Registration System in Python Tkinter πŸ“±

πŸš€ Create a Python Screen Recorder with Audio (Complete Code)

Python IP Tracker App with GUI | Track IP Location Real-Time! (Working Project)