| | <!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> |
| | 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" type="module"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
