Spaces:

DAOUED31
/

nobg-ai

Running

App Files Files Community

DAOUED31 commited on Apr 24, 2025

Commit

5781a3a

verified ·

1 Parent(s): ebb1239

Add 2 files

Browse files

Files changed (2) hide show

index.html +675 -38
prompts.txt +4 -0

index.html CHANGED Viewed

@@ -1,41 +1,678 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
-  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DAOUED31/nobg-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NoBG.AI - Remove Background from Images Instantly</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            transition: background-color 0.3s, color 0.3s;
+            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+        }
+        .dark body {
+            background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+        }
+        .upload-area {
+            border: 2px dashed #d1d5db;
+            transition: all 0.3s;
+            background-color: rgba(255, 255, 255, 0.8);
+        }
+        .dark .upload-area {
+            background-color: rgba(31, 41, 55, 0.8);
+        }
+        .upload-area:hover {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+        }
+        .upload-area.dragover {
+            border-color: #3b82f6;
+            background-color: rgba(59, 130, 246, 0.05);
+        }
+        .btn-primary {
+            background-color: #3b82f6;
+            transition: all 0.2s;
+        }
+        .btn-primary:hover {
+            background-color: #2563eb;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .btn-secondary {
+            background-color: #f3f4f6;
+            transition: all 0.2s;
+        }
+        .btn-secondary:hover {
+            background-color: #e5e7eb;
+        }
+        .dark .btn-secondary {
+            background-color: #374151;
+            color: white;
+        }
+        .dark .btn-secondary:hover {
+            background-color: #4b5563;
+        }
+        .theme-toggle {
+            transition: all 0.3s;
+        }
+        .theme-toggle:hover {
+            transform: rotate(15deg) scale(1.1);
+        }
+        .image-comparison {
+            position: relative;
+            width: 100%;
+            overflow: hidden;
+        }
+        .image-comparison img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        .image-comparison .before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 50%;
+            height: 100%;
+            overflow: hidden;
+        }
+        .comparison-slider {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 4px;
+            height: 100%;
+            background-color: white;
+            cursor: ew-resize;
+            z-index: 10;
+        }
+        .comparison-slider::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: white;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 0 0 2px #3b82f6;
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .processing-animation {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+        .error-message {
+            color: #ef4444;
+            background-color: #fee2e2;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            margin-top: 1rem;
+        }
+        .dark .error-message {
+            background-color: #450a0a;
+        }
+        .glass-effect {
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            background-color: rgba(255, 255, 255, 0.8);
+        }
+        .dark .glass-effect {
+            background-color: rgba(17, 24, 39, 0.8);
+        }
     </style>
+</head>
+<body class="min-h-screen">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 glass-effect shadow-sm">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center text-white font-bold">NB</div>
+                <h1 class="text-xl font-bold">NoBG<span class="text-blue-500">.AI</span></h1>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="font-medium hover:text-blue-500">Remove Background</a>
+                <a href="#" class="font-medium hover:text-blue-500">Photo Editing</a>
+                <a href="#" class="font-medium hover:text-blue-500">Tools & API</a>
+                <a href="#" class="font-medium hover:text-blue-500">How To Use</a>
+                <a href="#" class="font-medium hover:text-blue-500">Pricing</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="px-4 py-2 rounded-md font-medium hover:bg-gray-100 dark:hover:bg-gray-800">Login</button>
+                <button class="px-4 py-2 bg-blue-500 text-white rounded-md font-medium hover:bg-blue-600">Sign Up</button>
+            </div>
+            <button class="md:hidden text-gray-600 dark:text-gray-300">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8 md:py-12">
+        <!-- Hero Section -->
+        <section class="max-w-4xl mx-auto text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Remove Background from Images</h1>
+            <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">Get transparent backgrounds instantly with our AI-powered tool. No registration required.</p>
+            <!-- Upload Box -->
+            <div id="upload-container" class="upload-area rounded-xl p-8 md:p-12 mb-6 shadow-md">
+                <div id="upload-content" class="flex flex-col items-center justify-center">
+                    <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
+                    <h3 class="text-xl font-medium mb-2">Upload Your Image</h3>
+                    <p class="text-gray-500 dark:text-gray-400 mb-6">Supported formats: JPG, PNG, or WebP (up to 10MB)</p>
+                    <button id="upload-btn" class="btn-primary px-6 py-3 rounded-md text-white font-medium mb-2">
+                        <i class="fas fa-upload mr-2"></i> Select an Image
+                    </button>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Or drag & drop, paste with Ctrl+V</p>
+                    <input type="file" id="file-input" accept="image/*" class="hidden">
+                </div>
+                <div id="processing-container" class="hidden flex-col items-center justify-center">
+                    <div class="w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4 processing-animation">
+                        <i class="fas fa-magic text-blue-500 text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-medium mb-2">Processing your image...</h3>
+                    <p class="text-gray-500 dark:text-gray-400 mb-4">Our AI is removing the background automatically</p>
+                    <div id="progress-bar" class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-4">
+                        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
+                    </div>
+                    <button id="cancel-btn" class="px-4 py-2 rounded-md font-medium bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
+                        Cancel
+                    </button>
+                </div>
+                <div id="result-container" class="hidden flex-col items-center justify-center">
+                    <div class="w-full mb-6">
+                        <div class="image-comparison rounded-lg overflow-hidden shadow-lg">
+                            <img id="result-image" src="" alt="Result with transparent background" class="w-full">
+                            <div class="before">
+                                <img id="original-image" src="" alt="Original image" class="w-full">
+                            </div>
+                            <div class="comparison-slider"></div>
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap justify-center gap-4 mb-6">
+                        <button id="download-btn" class="btn-primary px-6 py-3 rounded-md text-white font-medium">
+                            <i class="fas fa-download mr-2"></i> Download PNG
+                        </button>
+                        <button id="new-project-btn" class="btn-secondary px-6 py-3 rounded-md font-medium">
+                            <i class="fas fa-redo mr-2"></i> Process Another
+                        </button>
+                    </div>
+                </div>
+                <div id="error-container" class="hidden">
+                    <div class="error-message">
+                        <i class="fas fa-exclamation-circle mr-2"></i>
+                        <span id="error-text"></span>
+                    </div>
+                </div>
+            </div>
+            <!-- Quick Test Section -->
+            <div class="mt-8">
+                <p class="text-gray-600 dark:text-gray-300 mb-4">Try with our sample images:</p>
+                <div class="flex justify-center gap-4">
+                    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200" alt="Sample watch" class="w-16 h-16 md:w-20 md:h-20 rounded-md cursor-pointer hover:opacity-80 transition" data-sample="watch">
+                    <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=200" alt="Sample shoes" class="w-16 h-16 md:w-20 md:h-20 rounded-md cursor-pointer hover:opacity-80 transition" data-sample="shoes">
+                    <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=200" alt="Sample sunglasses" class="w-16 h-16 md:w-20 md:h-20 rounded-md cursor-pointer hover:opacity-80 transition" data-sample="sunglasses">
+                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=200" alt="Sample portrait" class="w-16 h-16 md:w-20 md:h-20 rounded-md cursor-pointer hover:opacity-80 transition" data-sample="portrait">
+                </div>
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section class="max-w-6xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
+                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
+                    <i class="fas fa-bolt text-blue-500"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-2">Instant Processing</h3>
+                <p class="text-gray-600 dark:text-gray-300">Get results in seconds with our powerful AI technology. No waiting in queues.</p>
+            </div>
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
+                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
+                    <i class="fas fa-lock-open text-blue-500"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-2">No Registration</h3>
+                <p class="text-gray-600 dark:text-gray-300">Use our tool without creating an account. Your privacy matters to us.</p>
+            </div>
+            <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm">
+                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4">
+                    <i class="fas fa-shield-alt text-blue-500"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-2">Secure Processing</h3>
+                <p class="text-gray-600 dark:text-gray-300">Your images are processed securely and deleted automatically after 24 hours.</p>
+            </div>
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                    <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center text-white font-bold">NB</div>
+                    <h2 class="text-xl font-bold">NoBG<span class="text-blue-500">.AI</span></h2>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">Privacy Policy</a>
+                    <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">Terms of Service</a>
+                    <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500">Contact Us</a>
+                </div>
+            </div>
+            <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-sm">
+                <p>© 2023 NoBG.AI. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <!-- Theme Toggle -->
+    <button id="theme-toggle" class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-white dark:bg-gray-800 shadow-lg flex items-center justify-center theme-toggle">
+        <i class="fas fa-sun text-yellow-400 dark:hidden"></i>
+        <i class="fas fa-moon text-gray-300 hidden dark:block"></i>
+    </button>
+    <script>
+        // DOM Elements
+        const uploadContainer = document.getElementById('upload-container');
+        const uploadContent = document.getElementById('upload-content');
+        const processingContainer = document.getElementById('processing-container');
+        const resultContainer = document.getElementById('result-container');
+        const errorContainer = document.getElementById('error-container');
+        const errorText = document.getElementById('error-text');
+        const uploadBtn = document.getElementById('upload-btn');
+        const fileInput = document.getElementById('file-input');
+        const cancelBtn = document.getElementById('cancel-btn');
+        const downloadBtn = document.getElementById('download-btn');
+        const newProjectBtn = document.getElementById('new-project-btn');
+        const originalImage = document.getElementById('original-image');
+        const resultImage = document.getElementById('result-image');
+        const progressBar = document.querySelector('#progress-bar div');
+        const themeToggle = document.getElementById('theme-toggle');
+        const sampleImages = document.querySelectorAll('[data-sample]');
+        // API Key
+        const API_KEY = "CHLEvtuxaKf9d72Jqerc3ExQ";
+        // Variables
+        let currentFile = null;
+        let processedImageUrl = null;
+        let apiRequest = null;
+        let controller = null;
+        // Event Listeners
+        uploadBtn.addEventListener('click', () => fileInput.click());
+        fileInput.addEventListener('change', handleFileSelect);
+        cancelBtn.addEventListener('click', cancelProcessing);
+        downloadBtn.addEventListener('click', downloadImage);
+        newProjectBtn.addEventListener('click', resetUpload);
+        themeToggle.addEventListener('click', toggleTheme);
+        // Drag and drop events
+        uploadContainer.addEventListener('dragover', handleDragOver);
+        uploadContainer.addEventListener('dragleave', handleDragLeave);
+        uploadContainer.addEventListener('drop', handleDrop);
+        // Paste event
+        document.addEventListener('paste', handlePaste);
+        // Sample images
+        sampleImages.forEach(img => {
+            img.addEventListener('click', () => useSampleImage(img.dataset.sample));
+        });
+        // Initialize image comparison slider
+        initImageComparison();
+        // Functions
+        function handleFileSelect(e) {
+            const file = e.target.files[0];
+            if (file && file.type.match('image.*')) {
+                if (file.size > 10 * 1024 * 1024) {
+                    showError("File size exceeds 10MB limit");
+                    return;
+                }
+                processImage(file);
+            }
+        }
+        function handleDragOver(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            uploadContainer.classList.add('dragover');
+        }
+        function handleDragLeave(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            uploadContainer.classList.remove('dragover');
+        }
+        function handleDrop(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            uploadContainer.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.match('image.*')) {
+                if (file.size > 10 * 1024 * 1024) {
+                    showError("File size exceeds 10MB limit");
+                    return;
+                }
+                processImage(file);
+            }
+        }
+        function handlePaste(e) {
+            const items = e.clipboardData.items;
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const blob = items[i].getAsFile();
+                    if (blob.size > 10 * 1024 * 1024) {
+                        showError("File size exceeds 10MB limit");
+                        return;
+                    }
+                    processImage(blob);
+                    break;
+                }
+            }
+        }
+        function useSampleImage(sample) {
+            let sampleUrl = '';
+            switch(sample) {
+                case 'watch':
+                    sampleUrl = 'https://images.unsplash.com/photo-1523275335684-37898b6baf30';
+                    break;
+                case 'shoes':
+                    sampleUrl = 'https://images.unsplash.com/photo-1491553895911-0055eca6402d';
+                    break;
+                case 'sunglasses':
+                    sampleUrl = 'https://images.unsplash.com/photo-1572635196237-14b3f281503f';
+                    break;
+                case 'portrait':
+                    sampleUrl = 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e';
+                    break;
+            }
+            // Show processing state
+            uploadContent.classList.add('hidden');
+            processingContainer.classList.remove('hidden');
+            errorContainer.classList.add('hidden');
+            // Create a promise to call the real API
+            controller = new AbortController();
+            const signal = controller.signal;
+            // First fetch the sample image
+            fetch(sampleUrl + '?w=800&h=800&fit=crop')
+                .then(response => response.blob())
+                .then(blob => {
+                    // Set original image preview
+                    const url = URL.createObjectURL(blob);
+                    originalImage.src = url;
+                    // Create FormData for API
+                    const formData = new FormData();
+                    formData.append('image_file', blob, 'sample.jpg');
+                    // Call remove.bg API
+                    return fetch('https://api.remove.bg/v1.0/removebg', {
+                        method: 'POST',
+                        headers: {
+                            'X-Api-Key': API_KEY
+                        },
+                        body: formData,
+                        signal: signal
+                    });
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('API request failed');
+                    }
+                    return response.blob();
+                })
+                .then(blob => {
+                    const url = URL.createObjectURL(blob);
+                    resultImage.src = url;
+                    processedImageUrl = url;
+                    // Show result
+                    processingContainer.classList.add('hidden');
+                    resultContainer.classList.remove('hidden');
+                })
+                .catch(err => {
+                    if (err.name === 'AbortError') {
+                        console.log('Request was aborted');
+                        return;
+                    }
+                    showError("Failed to process image. Please try again.");
+                    resetUpload();
+                });
+        }
+        function processImage(file) {
+            currentFile = file;
+            // Show processing state
+            uploadContent.classList.add('hidden');
+            processingContainer.classList.remove('hidden');
+            errorContainer.classList.add('hidden');
+            progressBar.style.width = '0%';
+            // Create preview of original image
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                originalImage.src = e.target.result;
+                // Create FormData for API
+                const formData = new FormData();
+                formData.append('image_file', file);
+                // Create AbortController for cancelling
+                controller = new AbortController();
+                const signal = controller.signal;
+                // Call remove.bg API
+                fetch('https://api.remove.bg/v1.0/removebg', {
+                    method: 'POST',
+                    headers: {
+                        'X-Api-Key': API_KEY
+                    },
+                    body: formData,
+                    signal: signal
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('API request failed');
+                    }
+                    return response.blob();
+                })
+                .then(blob => {
+                    const url = URL.createObjectURL(blob);
+                    resultImage.src = url;
+                    processedImageUrl = url;
+                    // Show result
+                    processingContainer.classList.add('hidden');
+                    resultContainer.classList.remove('hidden');
+                })
+                .catch(err => {
+                    if (err.name === 'AbortError') {
+                        console.log('Request was aborted');
+                        return;
+                    }
+                    showError("Failed to process image. Please try again.");
+                    resetUpload();
+                });
+                // Simulate progress (API doesn't provide progress events)
+                let progress = 0;
+                const progressInterval = setInterval(() => {
+                    progress += Math.random() * 10;
+                    if (progress > 90) {
+                        clearInterval(progressInterval);
+                        return;
+                    }
+                    progressBar.style.width = `${progress}%`;
+                }, 300);
+            };
+            reader.readAsDataURL(file);
+        }
+        function cancelProcessing() {
+            // Cancel the API request if it exists
+            if (controller) {
+                controller.abort();
+                controller = null;
+            }
+            // Reset to upload state
+            resetUpload();
+        }
+        function resetUpload() {
+            // Reset all states
+            uploadContent.classList.remove('hidden');
+            processingContainer.classList.add('hidden');
+            resultContainer.classList.add('hidden');
+            errorContainer.classList.add('hidden');
+            // Reset file input
+            fileInput.value = '';
+            currentFile = null;
+            processedImageUrl = null;
+            controller = null;
+        }
+        function downloadImage() {
+            if (!processedImageUrl) return;
+            const link = document.createElement('a');
+            link.href = processedImageUrl;
+            link.download = 'nobg-ai-' + (currentFile?.name || 'image') + '.png';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        function showError(message) {
+            errorText.textContent = message;
+            errorContainer.classList.remove('hidden');
+        }
+        function toggleTheme() {
+            const html = document.documentElement;
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+        function initImageComparison() {
+            const slider = document.querySelector('.comparison-slider');
+            const before = document.querySelector('.before');
+            let isDragging = false;
+            slider.addEventListener('mousedown', () => {
+                isDragging = true;
+            });
+            document.addEventListener('mouseup', () => {
+                isDragging = false;
+            });
+            document.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                const containerRect = uploadContainer.getBoundingClientRect();
+                const x = e.clientX - containerRect.left;
+                const percent = Math.min(Math.max(0, x / containerRect.width), 1) * 100;
+                before.style.width = `${percent}%`;
+                slider.style.left = `${percent}%`;
+            });
+            // Touch support
+            slider.addEventListener('touchstart', () => {
+                isDragging = true;
+            });
+            document.addEventListener('touchend', () => {
+                isDragging = false;
+            });
+            document.addEventListener('touchmove', (e) => {
+                if (!isDragging) return;
+                const containerRect = uploadContainer.getBoundingClientRect();
+                const x = e.touches[0].clientX - containerRect.left;
+                const percent = Math.min(Math.max(0, x / containerRect.width), 1) * 100;
+                before.style.width = `${percent}%`;
+                slider.style.left = `${percent}%`;
+            });
+        }
+        // Check for saved theme preference
+        if (localStorage.getItem('theme') === 'dark' ||
+            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DAOUED31/nobg-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1,4 @@

+Act like a senior UI/UX designer and front-end developer who specializes in modern web apps using HTML, CSS, JavaScript, and Tailwind CSS. You’ve built over 50 SaaS applications with a focus on clean user interfaces and instant interaction. Your task is to build the front-end layout for an AI-powered web app named NoBG.AI. This app allows users to upload any image, remove its background instantly with one click, and then download the transparent image. Objective: Build a fully responsive, modern, and minimal user interface for the NoBG.AI background remover app. Focus on simplicity, elegance, and fast user experience. Include the following components: ________________________________________ Step-by-step Features to Include: 1.	Header o	App name: NoBG.AI o	Navigation menu: Remove Background, Photo Editing Services, Tools & API, How To Use, Pricing, Login, Sign Up 2.	Hero Section o	Big bold title: “AI Background Remover” o	Subtext: “Remove background from image instantly, fully automated and FREE.” o	Upload Box with drag & drop enabled. Also support copy-paste image upload (Ctrl + V). o	Button label: Upload Your Image o	Below upload box, write: “Or drop an image, paste image with Ctrl + V” 3.	After Upload o	Show an interactive "Remove Background" button o	After clicking it, display the "before and after" image in a side-by-side layout with a knowledge scale (labeled “Before removing background” / “After removing background”). o	Provide a Download Image button that downloads the image with a transparent background 4.	Quick Test Section o	Show 4 mini sample images in small square thumbnails below the upload box o	Label: “No image? Try one of these to test instantly” o	Clicking one loads the sample into the workspace 5.	Dark/Light Mode Toggle o	Add a floating animated toggle icon (like a sun/moon animation) in the bottom-right corner o	Allows switching between light and dark theme of the app in real-time 6.	Encouraging Description Text o	Below the hero section, include this motivating message: “Tired of messy backgrounds? Try NoBG.AI and remove them in seconds. No login required, just upload and click! Perfect for product shots, profile pictures, and marketing designs.” 7.	Styling Suggestions o	Use clean sans-serif fonts (e.g., Inter or Poppins) o	Buttons should have subtle hover transitions o	Use white background with soft shadows, and support dark mode with dark gray tones o	Upload area should have dashed borders with a light blue glow effect on hover o	Animate the “Remove Background” button on hover for feedback 8.	Tech Stack o	HTML, TailwindCSS for layout and responsiveness o	Vanilla JavaScript or React for interactions (you choose) o	Ensure accessibility: proper alt tags, focus states, and ARIA labels Take a deep breath and work on this problem step-by-step.  Activate the application when I drag or upload the image to the application, a button appears to remove the background, and when I click on it, it automatically removes the background professionally Add the download button after i delete the background and reduce the size of the images below. Make them smaller than this. Add a button called remove background after I upload the image to the application, and also a download button after I delete the background. When I click on the upload image button, it transfers me to my device to upload my image, work on it, and remove its background. Add this key to make the application interactive and remove the background CHLEvtuxaKf9d72Jqerc3ExQ " Also make a button to cancel the process and start again or start a new project
+Add this key to make the application interactive and remove the backgroundCHLEvtuxaKf9d72Jqerc3ExQ" Also make a button to cancel the process and start again or start a new project
+Why is the app not working? I want an app that erases the background of photos. Why is the app not working?
+Change the background to a clear and modern background, and correct my text.