π 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
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
Post a Comment