Spaces:

Wiuhh
/

New-bg

Sleeping

App Files Files Community

Wiuhh commited on Sep 29

Commit

c551c9e

verified ·

1 Parent(s): 3e99e42

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +579 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,579 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Background Remover</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --bg-dark: hsl(240, 14%, 5%);
+            --bg-darker: hsl(240, 14%, 3%);
+            --bg-card: hsl(240, 10%, 7%);
+            --accent-purple: hsl(265, 100%, 61%);
+            --accent-pink: hsl(327, 100%, 72%);
+            --accent-blue: hsl(204, 100%, 72%);
+            --text-light: hsl(240, 5%, 90%);
+            --text-muted: hsl(240, 4%, 65%);
+            --text-error: hsl(0, 100%, 74%);
+            --border-accent: hsl(253, 100%, 72%, 0.15);
+            --gradient-purple-pink: linear-gradient(135deg, hsl(265, 100%, 61%), hsl(327, 100%, 72%));
+            --gradient-purple-blue: linear-gradient(135deg, hsl(265, 100%, 61%), hsl(204, 100%, 72%));
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: var(--bg-dark);
+            color: var(--text-light);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .header h1 {
+            font-size: clamp(2rem, 5vw, 3.5rem);
+            font-weight: 700;
+            background: var(--gradient-purple-pink);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 1rem;
+        }
+        .header p {
+            font-size: clamp(1rem, 2.5vw, 1.25rem);
+            color: var(--text-muted);
+            max-width: 600px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+        .upload-section {
+            background: var(--bg-card);
+            border: 2px dashed var(--border-accent);
+            border-radius: 20px;
+            padding: 3rem 2rem;
+            text-align: center;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .upload-section:hover {
+            border-color: var(--accent-purple);
+            transform: translateY(-2px);
+        }
+        .upload-section::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--gradient-purple-pink);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            z-index: -1;
+        }
+        .upload-section:hover::before {
+            opacity: 0.05;
+        }
+        .upload-icon {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 1.5rem;
+            background: var(--gradient-purple-blue);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+        }
+        .upload-text h3 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-light);
+        }
+        .upload-text p {
+            color: var(--text-muted);
+            margin-bottom: 1.5rem;
+        }
+        .file-input {
+            display: none;
+        }
+        .btn {
+            background: var(--gradient-purple-pink);
+            border: none;
+            padding: 1rem 2rem;
+            border-radius: 12px;
+            color: white;
+            font-weight: 600;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px hsla(265, 100%, 61%, 0.3);
+        }
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .processing-section {
+            display: none;
+            background: var(--bg-card);
+            border-radius: 20px;
+            padding: 2rem;
+            text-align: center;
+            border: 1px solid var(--border-accent);
+        }
+        .processing-section.active {
+            display: block;
+        }
+        .loading-spinner {
+            width: 60px;
+            height: 60px;
+            margin: 0 auto 1rem;
+            border: 4px solid var(--bg-dark);
+            border-top: 4px solid var(--accent-purple);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .result-section {
+            display: none;
+            background: var(--bg-card);
+            border-radius: 20px;
+            padding: 2rem;
+            border: 1px solid var(--border-accent);
+        }
+        .result-section.active {
+            display: block;
+        }
+        .image-comparison {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2rem;
+            margin-bottom: 2rem;
+        }
+        .image-container {
+            text-align: center;
+        }
+        .image-container h4 {
+            margin-bottom: 1rem;
+            color: var(--text-light);
+        }
+        .image-container img {
+            max-width: 100%;
+            max-height: 300px;
+            border-radius: 12px;
+            border: 1px solid var(--border-accent);
+        }
+        .download-section {
+            text-align: center;
+            padding-top: 1rem;
+            border-top: 1px solid var(--border-accent);
+        }
+        .error-message {
+            background: var(--bg-card);
+            border: 1px solid var(--text-error);
+            border-radius: 12px;
+            padding: 1rem;
+            color: var(--text-error);
+            margin-top: 1rem;
+            display: none;
+        }
+        .error-message.active {
+            display: block;
+        }
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            margin-top: 3rem;
+        }
+        .feature-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-accent);
+            border-radius: 16px;
+            padding: 1.5rem;
+            text-align: center;
+            transition: transform 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-4px);
+        }
+        .feature-icon {
+            width: 50px;
+            height: 50px;
+            margin: 0 auto 1rem;
+            background: var(--gradient-purple-blue);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+        }
+        .feature-card h4 {
+            margin-bottom: 0.5rem;
+            color: var(--text-light);
+        }
+        .feature-card p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+        /* Mobile Responsiveness */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+                gap: 1.5rem;
+            }
+            .upload-section {
+                padding: 2rem 1rem;
+            }
+            .upload-icon {
+                width: 60px;
+                height: 60px;
+                font-size: 1.5rem;
+            }
+            .image-comparison {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+            .features {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+            .btn {
+                padding: 0.875rem 1.5rem;
+                font-size: 0.9rem;
+            }
+        }
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 2rem;
+            }
+            .header p {
+                font-size: 1rem;
+            }
+            .upload-section {
+                padding: 1.5rem 0.75rem;
+            }
+            .feature-card {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>AI Background Remover</h1>
+        </header>
+        <main>
+            <!-- Upload Section -->
+            <section class="upload-section" id="uploadSection">
+                <div class="upload-icon">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+                        <circle cx="12" cy="13" r="4"></circle>
+                    </svg>
+                </div>
+                <div class="upload-text">
+                    <h3>Drop your image here</h3>
+                    <p>or click to browse your files</p>
+                    <button class="btn" onclick="document.getElementById('fileInput').click()">
+                        Choose Image
+                    </button>
+                </div>
+                <input type="file" id="fileInput" class="file-input" accept="image/*" onchange="handleFileSelect(event)">
+            </section>
+            <!-- Processing Section -->
+            <section class="processing-section" id="processingSectionElement">
+                <div class="loading-spinner"></div>
+                <h3>Processing your image...</h3>
+                <p>Our AI is removing the background. This usually takes a few seconds.</p>
+            </section>
+            <!-- Result Section -->
+            <section class="result-section" id="resultSection">
+                <div class="image-comparison">
+                    <div class="image-container">
+                        <h4>Original</h4>
+                        <img id="originalImage" src="" alt="Original image">
+                    </div>
+                    <div class="image-container">
+                        <h4>Background Removed</h4>
+                        <img id="processedImage" src="" alt="Processed image">
+                    </div>
+                </div>
+                <div class="download-section">
+                    <button class="btn" id="downloadBtn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                            <polyline points="7,10 12,15 17,10"></polyline>
+                            <line x1="12" y1="15" x2="12" y2="3"></line>
+                        </svg>
+                        Download Result
+                    </button>
+                    <button class="btn" onclick="resetApp()" style="background: var(--gradient-purple-blue); margin-left: 1rem;">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="1,4 1,10 7,10"></polyline>
+                            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
+                        </svg>
+                        Process Another
+                    </button>
+                </div>
+            </section>
+            <!-- Error Message -->
+            <div class="error-message" id="errorMessage">
+                <strong>Error:</strong> <span id="errorText"></span>
+            </div>
+        </main>
+        <!-- Features Section -->
+        <section class="features">
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="11" width="18" height="10" rx="2" ry="2"></rect>
+                        <circle cx="12" cy="5" r="2"></circle>
+                        <path d="M12 7v4"></path>
+                        <line x1="8" y1="16" x2="8" y2="16"></line>
+                        <line x1="16" y1="16" x2="16" y2="16"></line>
+                    </svg>
+                </div>
+                <h4>AI-Powered</h4>
+                <p>Advanced machine learning automatically detects and removes backgrounds with precision</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"></polygon>
+                    </svg>
+                </div>
+                <h4>Lightning Fast</h4>
+                <p>Process your images in seconds, not minutes. Perfect for bulk editing workflows</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
+                        <line x1="12" y1="18" x2="12.01" y2="18"></line>
+                    </svg>
+                </div>
+                <h4>Mobile Friendly</h4>
+                <p>Works seamlessly on all devices - desktop, tablet, and mobile</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
+                    </svg>
+                </div>
+                <h4>High Quality</h4>
+                <p>Preserve image quality while achieving clean, professional background removal</p>
+            </div>
+        </section>
+    </div>
+    <script>
+        let currentFile = null;
+        function handleFileSelect(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            // Validate file type
+            if (!file.type.startsWith('image/')) {
+                showError('Please select a valid image file (JPG, PNG, BMP, TIFF, WebP)');
+                return;
+            }
+            // Validate file size (max 10MB)
+            if (file.size > 10 * 1024 * 1024) {
+                showError('File size must be less than 10MB');
+                return;
+            }
+            currentFile = file;
+            processImage(file);
+        }
+        async function processImage(file) {
+            hideError();
+            showProcessing();
+            const formData = new FormData();
+            formData.append('image', file);
+            try {
+                const response = await fetch('/remove-background', {
+                    method: 'POST',
+                    body: formData
+                });
+                const result = await response.json();
+                if (response.ok) {
+                    showResult(file, result.output_url);
+                } else {
+                    showError(result.error || 'Failed to process image');
+                }
+            } catch (error) {
+                showError('Network error: ' + error.message);
+            }
+        }
+        function showProcessing() {
+            document.getElementById('uploadSection').style.display = 'none';
+            document.getElementById('processingSectionElement').classList.add('active');
+            document.getElementById('resultSection').classList.remove('active');
+        }
+        function showResult(originalFile, outputUrl) {
+            document.getElementById('processingSectionElement').classList.remove('active');
+            document.getElementById('resultSection').classList.add('active');
+            // Show original image
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                document.getElementById('originalImage').src = e.target.result;
+            };
+            reader.readAsDataURL(originalFile);
+            // Show processed image
+            document.getElementById('processedImage').src = outputUrl;
+            // Set up download
+            document.getElementById('downloadBtn').onclick = function() {
+                const link = document.createElement('a');
+                link.href = outputUrl;
+                link.download = `removed_bg_${originalFile.name.split('.')[0]}.png`;
+                link.click();
+            };
+        }
+        function showError(message) {
+            document.getElementById('errorText').textContent = message;
+            document.getElementById('errorMessage').classList.add('active');
+            document.getElementById('processingSectionElement').classList.remove('active');
+            // Restore upload section so users can retry
+            document.getElementById('uploadSection').style.display = 'block';
+            // Clear file input so users can retry with the same file
+            document.getElementById('fileInput').value = '';
+            currentFile = null;
+        }
+        function hideError() {
+            document.getElementById('errorMessage').classList.remove('active');
+        }
+        function resetApp() {
+            document.getElementById('uploadSection').style.display = 'block';
+            document.getElementById('processingSectionElement').classList.remove('active');
+            document.getElementById('resultSection').classList.remove('active');
+            document.getElementById('fileInput').value = '';
+            hideError();
+            currentFile = null;
+        }
+        // Drag and drop functionality
+        const uploadSection = document.getElementById('uploadSection');
+        uploadSection.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            uploadSection.style.borderColor = 'var(--accent-purple)';
+        });
+        uploadSection.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            uploadSection.style.borderColor = 'var(--border-accent)';
+        });
+        uploadSection.addEventListener('drop', function(e) {
+            e.preventDefault();
+            uploadSection.style.borderColor = 'var(--border-accent)';
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                const file = files[0];
+                document.getElementById('fileInput').files = files;
+                handleFileSelect({ target: { files: [file] } });
+            }
+        });
+    </script>
+</body>
+</html>