| from flask import Flask, request, Response |
| from rembg import remove |
| from rembg.session_factory import new_session |
| import io |
|
|
| app = Flask(__name__) |
|
|
| |
| session = new_session("u2net") |
|
|
| HTML = """ |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Xlnk RMBG - AI Background Remover</title> |
| <link rel="icon" type="image/svg+xml" href="https://me.xo.je/icon.svg"> |
| <meta name="description" content="Remove backgrounds from images instantly with Xlnk RMBG. Drag & drop images from anywhere, including Google Images. Auto-download transparent PNGs."> |
| <meta name="keywords" content="background removal, AI background remover, remove background online, transparent PNG, drag drop image, U2-Net, Xlnk RMBG"> |
| <meta name="robots" content="index, follow"> |
| |
| <!-- Open Graph for social sharing --> |
| <meta property="og:title" content="Xlnk RMBG - AI Background Remover"> |
| <meta property="og:description" content="Drag & drop images from anywhere and remove the background instantly. Full U²-Net AI engine."> |
| <meta property="og:type" content="website"> |
| <meta property="og:image" content="https://huggingface.co/spaces/Xlnk/rmbg/resolve/main/preview.png"> |
| <meta property="og:url" content="https://huggingface.co/spaces/Xlnk/rmbg"> |
| |
| <style> |
| html, body { |
| margin: 0; |
| height: 100%; |
| background: #0b0f19; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| color: white; |
| font-family: sans-serif; |
| } |
| #dropZone { |
| width: 100vw; |
| height: 100vh; |
| border: 2px dashed #555; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| text-align: center; |
| } |
| #dropZone.dragover { background-color: #1b2030; } |
| input { display: none; } |
| </style> |
| </head> |
| <body> |
| <div id="dropZone">Drop image from anywhere</div> |
| |
| <form id="uploadForm" method="post" enctype="multipart/form-data"> |
| <input type="file" id="fileInput" name="file" /> |
| </form> |
| |
| <script> |
| const dropZone = document.getElementById("dropZone"); |
| const fileInput = document.getElementById("fileInput"); |
| const form = document.getElementById("uploadForm"); |
| |
| dropZone.addEventListener("click", () => fileInput.click()); |
| |
| fileInput.addEventListener("change", () => { |
| if(fileInput.files.length > 0) form.submit(); |
| }); |
| |
| dropZone.addEventListener("dragover", e => { |
| e.preventDefault(); |
| dropZone.classList.add("dragover"); |
| }); |
| |
| dropZone.addEventListener("dragleave", e => { |
| dropZone.classList.remove("dragover"); |
| }); |
| |
| dropZone.addEventListener("drop", e => { |
| e.preventDefault(); |
| dropZone.classList.remove("dragover"); |
| |
| // Local files |
| if (e.dataTransfer.files.length > 0) { |
| fileInput.files = e.dataTransfer.files; |
| form.submit(); |
| } |
| // Drag from browser (Google Images, etc) |
| else { |
| let url = e.dataTransfer.getData('text/uri-list'); |
| if(url){ |
| fetch(url) |
| .then(res => res.blob()) |
| .then(blob => { |
| let dt = new DataTransfer(); |
| dt.items.add(new File([blob], "image.png", {type: blob.type})); |
| fileInput.files = dt.files; |
| form.submit(); |
| }); |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
| """ |
|
|
| @app.route("/", methods=["GET", "POST"]) |
| def index(): |
| if request.method == "POST": |
| file = request.files.get("file") |
| if not file: |
| return "No file", 400 |
|
|
| input_bytes = file.read() |
| output_bytes = remove(input_bytes, session=session, alpha_matting=False) |
|
|
| return Response( |
| output_bytes, |
| mimetype="image/png", |
| headers={"Content-Disposition": "attachment; filename=xlnk-rmbg.png"} |
| ) |
|
|
| return HTML |
|
|
| if __name__ == "__main__": |
| app.run(host="0.0.0.0", port=7860) |
