Spaces:

Natkat1
/

magic-background-remover

Running

App Files Files Community

Natkat1 commited on Nov 25, 2025

Commit

e92cdc4

verified ·

1 Parent(s): 47469b0

Generate a single-file HTML application that performs background removal entirely in the browser.

Browse files

Requirements:

Engine: Use the @imgly/background-removal library, which provides a WebAssembly (WASM) wrapper around ONNX models.

Client-Side Processing: The app must process images 100% locally. After the initial download of model assets (approximately 20–40 MB, cached afterward), all computation should run on the user's CPU/GPU. No server uploads.

User Interface: Include a modern, responsive UI with drag-and-drop support and a transparency grid for displaying the output.

First-Use Notice: Inform users that the first image may take 10–30 seconds as the WASM engine and models load, while subsequent images should process in 1–2 seconds.

Files changed (4) hide show

README.md +8 -5
index.html +104 -19
script.js +163 -0
style.css +14 -24

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Magic Background Remover
-emoji: 🏃
-colorFrom: yellow
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Magic Background Remover 🔮
+colorFrom: purple
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,104 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic Background Remover 🔮</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@imgly/background-removal"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#f97316',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-10">
+            <h1 class="text-4xl font-bold text-primary-500 mb-2">Magic Background Remover <span class="text-3xl">🔮</span></h1>
+            <p class="text-gray-400">Remove backgrounds from images instantly in your browser</p>
+        </header>
+        <main>
+            <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-6 shadow-lg">
+                <div id="drop-area" class="border-2 border-dashed border-primary-500 rounded-xl p-12 text-center cursor-pointer hover:bg-gray-700 transition-colors duration-200">
+                    <div id="upload-ui">
+                        <i data-feather="upload" class="w-12 h-12 mx-auto text-primary-500 mb-4"></i>
+                        <h2 class="text-xl font-semibold mb-2">Drag & Drop your image here</h2>
+                        <p class="text-gray-400 mb-4">or click to browse files</p>
+                        <input type="file" id="file-input" accept="image/*" class="hidden">
+                        <button id="browse-btn" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-200">
+                            Select Image
+                        </button>
+                    </div>
+                    <div id="processing-ui" class="hidden">
+                        <div class="flex flex-col items-center">
+                            <i data-feather="loader" class="w-12 h-12 mx-auto text-primary-500 mb-4 animate-spin"></i>
+                            <h2 class="text-xl font-semibold mb-2">Processing image...</h2>
+                            <p class="text-gray-400" id="progress-text">Loading models for the first time...</p>
+                            <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
+                                <div id="progress-bar" class="bg-primary-500 h-2.5 rounded-full" style="width: 0%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+                    <div>
+                        <h3 class="font-medium text-gray-300 mb-2">Original Image</h3>
+                        <div class="bg-gray-700 rounded-lg overflow-hidden flex items-center justify-center h-64">
+                            <img id="original-image" class="max-w-full max-h-full hidden">
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="font-medium text-gray-300 mb-2">Result</h3>
+                        <div class="bg-gray-700 rounded-lg overflow-hidden flex items-center justify-center h-64 bg-checkerboard">
+                            <img id="result-image" class="max-w-full max-h-full hidden">
+                        </div>
+                    </div>
+                </div>
+                <div id="download-section" class="mt-6 hidden">
+                    <button id="download-btn" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-6 rounded-lg transition-colors duration-200 flex items-center gap-2">
+                        <i data-feather="download"></i>
+                        Download Result
+                    </button>
+                </div>
+            </div>
+            <div id="first-run-notice" class="max-w-2xl mx-auto mt-8 p-4 bg-gray-800 border-l-4 border-primary-500 rounded-r">
+                <div class="flex items-start">
+                    <i data-feather="alert-circle" class="w-5 h-5 text-primary-500 mr-2 mt-0.5"></i>
+                    <div>
+                        <h3 class="font-medium">First Run Notice</h3>
+                        <p class="text-gray-400 text-sm mt-1">The first image may take 10-30 seconds as the engine loads (approximately 20-40 MB). Subsequent images will process in 1-2 seconds.</p>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <footer class="mt-16 text-center text-gray-500 text-sm">
+            <p>All processing happens 100% in your browser. No images are uploaded to any server.</p>
+            <p class="mt-1">Powered by <span class="text-primary-500">@imgly/background-removal</span> and ONNX</p>
+        </footer>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,163 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const dropArea = document.getElementById('drop-area');
+    const fileInput = document.getElementById('file-input');
+    const browseBtn = document.getElementById('browse-btn');
+    const uploadUI = document.getElementById('upload-ui');
+    const processingUI = document.getElementById('processing-ui');
+    const originalImage = document.getElementById('original-image');
+    const resultImage = document.getElementById('result-image');
+    const downloadBtn = document.getElementById('download-btn');
+    const downloadSection = document.getElementById('download-section');
+    const progressText = document.getElementById('progress-text');
+    const progressBar = document.getElementById('progress-bar');
+    let isFirstRun = true;
+    let processing = false;
+    let currentFile = null;
+    // Prevent default drag behaviors
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, preventDefaults, false);
+    });
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    // Highlight drop area when item is dragged over it
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropArea.addEventListener(eventName, highlight, false);
+    });
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropArea.addEventListener(eventName, unhighlight, false);
+    });
+    function highlight() {
+        dropArea.classList.add('highlight');
+    }
+    function unhighlight() {
+        dropArea.classList.remove('highlight');
+    }
+    // Handle dropped files
+    dropArea.addEventListener('drop', handleDrop, false);
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        if (files.length && !processing) {
+            handleFiles(files);
+        }
+    }
+    // Handle file input
+    fileInput.addEventListener('change', function() {
+        if (this.files.length && !processing) {
+            handleFiles(this.files);
+        }
+    });
+    // Browse button click
+    browseBtn.addEventListener('click', () => {
+        fileInput.click();
+    });
+    // Handle file processing
+    async function handleFiles(files) {
+        const file = files[0];
+        if (!file.type.match('image.*')) {
+            alert('Please select an image file');
+            return;
+        }
+        currentFile = file;
+        processing = true;
+        // Show original image
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            originalImage.src = e.target.result;
+            originalImage.classList.remove('hidden');
+        };
+        reader.readAsDataURL(file);
+        // Show processing UI
+        uploadUI.classList.add('hidden');
+        processingUI.classList.remove('hidden');
+        if (isFirstRun) {
+            progressText.textContent = 'Loading models for the first time (20-40MB)...';
+            progressBar.style.width = '10%';
+        } else {
+            progressText.textContent = 'Processing image...';
+            progressBar.style.width = '30%';
+        }
+        try {
+            // Initialize the background removal
+            const blobURL = URL.createObjectURL(file);
+            const progressCallback = (progress) => {
+                const percent = Math.floor(progress * 100);
+                progressBar.style.width = `${percent}%`;
+                if (isFirstRun) {
+                    if (progress < 0.9) {
+                        progressText.textContent = `Downloading models... ${percent}%`;
+                    } else {
+                        progressText.textContent = 'Processing image...';
+                    }
+                } else {
+                    progressText.textContent = `Processing... ${percent}%`;
+                }
+            };
+            const result = await backgroundRemoval(blobURL, {
+                progress: progressCallback,
+                debug: true
+            });
+            // Convert Blob to URL for display
+            const resultURL = URL.createObjectURL(result);
+            // Display result
+            resultImage.src = resultURL;
+            resultImage.classList.remove('hidden');
+            // Enable download button
+            downloadBtn.onclick = function() {
+                const a = document.createElement('a');
+                a.href = resultURL;
+                a.download = `background-removed-${file.name}`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                setTimeout(() => URL.revokeObjectURL(resultURL), 100);
+            };
+            downloadSection.classList.remove('hidden');
+            // Reset UI
+            processing = false;
+            uploadUI.classList.remove('hidden');
+            processingUI.classList.add('hidden');
+            if (isFirstRun) {
+                isFirstRun = false;
+                document.getElementById('first-run-notice').classList.add('hidden');
+            }
+        } catch (error) {
+            console.error('Error during background removal:', error);
+            alert('An error occurred during background removal. Please try again.');
+            // Reset UI
+            processing = false;
+            uploadUI.classList.remove('hidden');
+            processingUI.classList.add('hidden');
+        }
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,18 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+.bg-checkerboard {
+    background-image:
+        linear-gradient(45deg, #555 25%, transparent 25%),
+        linear-gradient(-45deg, #555 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #555 75%),
+        linear-gradient(-45deg, transparent 75%, #555 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }
+#drop-area.highlight {
+    background-color: rgba(249, 115, 22, 0.1);
+    border-color: rgba(249, 115, 22, 0.8);
 }
+#original-image, #result-image {
+    object-fit: contain;
+}