Spaces:

Athspi
/

Gttg

Sleeping

App Files Files Community

Athspi commited on Mar 21

Commit

c140ae2

verified ·

1 Parent(s): fb742dc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +19 -213

templates/index.html CHANGED Viewed

@@ -3,13 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Object Remover AI</title>
-    <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- AOS Animation -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
     <style>
         :root {
             --primary-color: #6366f1;
@@ -30,7 +26,6 @@
             margin: 0;
             padding: 0;
             min-height: 100vh;
-            overflow-x: hidden;
         }
         .container {
@@ -42,7 +37,6 @@
         header {
             text-align: center;
             margin-bottom: 2rem;
-            padding-top: 1rem;
         }
         .logo {
@@ -65,7 +59,6 @@
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
-            animation: fadeIn 1s ease-out;
         }
         .subtitle {
@@ -92,9 +85,6 @@
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
             padding: 1.5rem;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
         }
         .card:hover {
@@ -102,19 +92,6 @@
             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
         }
-        .card-title {
-            font-size: 1.25rem;
-            color: var(--primary-color);
-            margin-bottom: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .card-title i {
-            font-size: 1.5rem;
-        }
         .upload-area {
             border: 2px dashed #d1d5db;
             border-radius: 0.75rem;
@@ -136,21 +113,10 @@
             background-color: rgba(99, 102, 241, 0.05);
         }
-        .upload-area i {
-            font-size: 3rem;
-            color: var(--text-secondary);
-            margin-bottom: 1rem;
-        }
-        .upload-area.active {
-            border-color: var(--primary-color);
-        }
         .upload-placeholder {
             display: flex;
             flex-direction: column;
             align-items: center;
-            transition: opacity 0.3s ease;
         }
         .preview-container {
@@ -179,7 +145,6 @@
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
-            color: var(--text-primary);
         }
         input[type="text"] {
@@ -221,14 +186,6 @@
             transform: translateY(-2px);
         }
-        .button:active {
-            transform: translateY(0);
-        }
-        .button i {
-            font-size: 1.25rem;
-        }
         .button:disabled {
             background-color: #d1d5db;
             cursor: not-allowed;
@@ -252,19 +209,6 @@
             display: none;
         }
-        .result-placeholder {
-            color: var(--text-secondary);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .result-placeholder i {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-            color: var(--text-secondary);
-        }
         .spinner {
             display: none;
             width: 40px;
@@ -281,24 +225,11 @@
             display: none;
         }
-        .download-btn:hover {
-            background-color: #0d9668;
-        }
         .error-message {
             color: var(--error);
             margin-top: 1rem;
             display: none;
             text-align: center;
-            font-size: 0.9rem;
-        }
-        footer {
-            text-align: center;
-            margin-top: 3rem;
-            padding: 1.5rem;
-            color: var(--text-secondary);
-            font-size: 0.9rem;
         }
         @keyframes spin {
@@ -306,81 +237,21 @@
                 transform: rotate(360deg);
             }
         }
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .fade-in {
-            animation: fadeIn 0.6s ease-out;
-        }
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% {
-                transform: scale(1);
-            }
-            50% {
-                transform: scale(1.05);
-            }
-            100% {
-                transform: scale(1);
-            }
-        }
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background-color: var(--success);
-            color: white;
-            padding: 1rem;
-            border-radius: 0.5rem;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            transform: translateX(150%);
-            transition: transform 0.3s ease;
-            z-index: 1000;
-        }
-        .notification.show {
-            transform: translateX(0);
-        }
-        .notification.error {
-            background-color: var(--error);
-        }
     </style>
 </head>
 <body>
     <div class="container">
-        <header data-aos="fade-down">
             <div class="logo">
                 <i class="fas fa-magic"></i>
-                <h1>Object Remover AI</h1>
             </div>
-            <p class="subtitle">Remove unwanted objects from your images with AI magic</p>
         </header>
         <div class="app-container">
-            <div class="card" data-aos="fade-right" data-aos-delay="100">
-                <div class="card-title">
-                    <i class="fas fa-upload"></i>
-                    <span>Upload Image</span>
-                </div>
-                <div id="uploadArea" class="upload-area">
                     <div class="upload-placeholder">
                         <i class="fas fa-cloud-upload-alt"></i>
                         <p>Click or drag & drop your image here</p>
@@ -393,7 +264,7 @@
                 <div class="form-group">
                     <label for="objectType">What do you want to remove?</label>
-                    <input type="text" id="objectType" placeholder="e.g., moon, human, text, hat, car..." value="text">
                 </div>
                 <button id="processBtn" class="button" disabled>
@@ -403,13 +274,9 @@
                 <p class="error-message" id="errorMessage"></p>
             </div>
-            <div class="card" data-aos="fade-left" data-aos-delay="200">
-                <div class="card-title">
-                    <i class="fas fa-image"></i>
-                    <span>Result</span>
-                </div>
                 <div class="result-area">
-                    <div class="result-placeholder" id="resultPlaceholder">
                         <i class="fas fa-image"></i>
                         <p>Your edited image will appear here</p>
                     </div>
@@ -422,30 +289,9 @@
                 </a>
             </div>
         </div>
-        <footer>
-            <p>© 2025 Object Remover AI | Powered by Gemini API</p>
-        </footer>
-        <div class="notification" id="notification">
-            <i class="fas fa-check-circle"></i>
-            <span id="notificationText">Success!</span>
-        </div>
     </div>
-    <!-- Import AOS Animation Library -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
     <script>
-        // Initialize AOS animation library
-        document.addEventListener('DOMContentLoaded', function() {
-            AOS.init({
-                duration: 800,
-                once: true
-            });
-        });
-        // Elements
         const uploadArea = document.getElementById('uploadArea');
         const previewContainer = document.getElementById('previewContainer');
         const imagePreview = document.getElementById('imagePreview');
@@ -456,14 +302,11 @@
         const spinner = document.getElementById('spinner');
         const downloadBtn = document.getElementById('downloadBtn');
         const errorMessage = document.getElementById('errorMessage');
-        const notification = document.getElementById('notification');
-        const notificationText = document.getElementById('notificationText');
-        // File input
         let selectedFile = null;
         // Handle file selection
-        uploadArea.addEventListener('click', function() {
             const fileInput = document.createElement('input');
             fileInput.type = 'file';
             fileInput.accept = 'image/jpeg, image/png';
@@ -472,25 +315,23 @@
         });
         // Handle drag and drop
-        uploadArea.addEventListener('dragover', function(e) {
             e.preventDefault();
             uploadArea.classList.add('active');
         });
-        uploadArea.addEventListener('dragleave', function() {
             uploadArea.classList.remove('active');
         });
-        uploadArea.addEventListener('drop', function(e) {
             e.preventDefault();
             uploadArea.classList.remove('active');
             if (e.dataTransfer.files.length > 0) {
                 handleFile(e.dataTransfer.files[0]);
             }
         });
-        // Handle file selection
         function handleFileSelect(e) {
             if (e.target.files.length > 0) {
                 handleFile(e.target.files[0]);
@@ -498,7 +339,6 @@
         }
         function handleFile(file) {
-            // Check if file is an image
             if (!file.type.match('image.*')) {
                 showError('Please select a valid image file (JPG or PNG)');
                 return;
@@ -507,16 +347,11 @@
             selectedFile = file;
             const reader = new FileReader();
-            reader.onload = function(e) {
-                // Display image preview
                 imagePreview.src = e.target.result;
                 previewContainer.style.display = 'flex';
                 document.querySelector('.upload-placeholder').style.opacity = '0';
-                // Enable process button
                 processBtn.disabled = false;
-                // Clear any previous errors
                 hideError();
             };
@@ -524,7 +359,7 @@
         }
         // Process image
-        processBtn.addEventListener('click', function() {
             if (!selectedFile) {
                 showError('Please select an image first');
                 return;
@@ -536,24 +371,22 @@
                 return;
             }
-            // Show loading state
             showLoading();
-            // Read file as data URL
             const reader = new FileReader();
-            reader.onload = function(e) {
                 const imageData = e.target.result;
                 processImage(imageData, objectType);
             };
             reader.readAsDataURL(selectedFile);
         });
-        // Process image through API
         function processImage(imageData, objectType) {
             fetch('/process', {
                 method: 'POST',
                 headers: {
-                    'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
                     image: imageData,
@@ -563,19 +396,12 @@
             .then(response => response.json())
             .then(data => {
                 hideLoading();
                 if (data.success) {
-                    // Show result
-                    resultImage.src = data.resultPath + '?t=' + new Date().getTime(); // Add timestamp to prevent caching
                     resultImage.style.display = 'block';
                     resultPlaceholder.style.display = 'none';
-                    // Enable download button
                     downloadBtn.style.display = 'flex';
                     downloadBtn.href = data.resultPath;
-                    // Show success notification
-                    showNotification('Image processed successfully!', false);
                 } else {
                     showError(data.message || 'Failed to process image');
                 }
@@ -587,7 +413,6 @@
             });
         }
-        // Helper functions
         function showLoading() {
             spinner.style.display = 'block';
             resultPlaceholder.style.display = 'none';
@@ -604,30 +429,11 @@
         function showError(message) {
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
-            showNotification(message, true);
         }
         function hideError() {
             errorMessage.style.display = 'none';
         }
-        function showNotification(message, isError) {
-            notificationText.textContent = message;
-            if (isError) {
-                notification.classList.add('error');
-                notification.querySelector('i').className = 'fas fa-exclamation-circle';
-            } else {
-                notification.classList.remove('error');
-                notification.querySelector('i').className = 'fas fa-check-circle';
-            }
-            notification.classList.add('show');
-            setTimeout(() => {
-                notification.classList.remove('show');
-            }, 5000);
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Object Remover</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
             --primary-color: #6366f1;
             margin: 0;
             padding: 0;
             min-height: 100vh;
         }
         .container {
         header {
             text-align: center;
             margin-bottom: 2rem;
         }
         .logo {
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
         .subtitle {
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
             padding: 1.5rem;
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         .card:hover {
             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
         }
         .upload-area {
             border: 2px dashed #d1d5db;
             border-radius: 0.75rem;
             background-color: rgba(99, 102, 241, 0.05);
         }
         .upload-placeholder {
             display: flex;
             flex-direction: column;
             align-items: center;
         }
         .preview-container {
             display: block;
             margin-bottom: 0.5rem;
             font-weight: 500;
         }
         input[type="text"] {
             transform: translateY(-2px);
         }
         .button:disabled {
             background-color: #d1d5db;
             cursor: not-allowed;
             display: none;
         }
         .spinner {
             display: none;
             width: 40px;
             display: none;
         }
         .error-message {
             color: var(--error);
             margin-top: 1rem;
             display: none;
             text-align: center;
         }
         @keyframes spin {
                 transform: rotate(360deg);
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <header>
             <div class="logo">
                 <i class="fas fa-magic"></i>
+                <h1>AI Object Remover</h1>
             </div>
+            <p class="subtitle">Remove unwanted objects from your images with AI</p>
         </header>
         <div class="app-container">
+            <div class="card">
+                <div class="upload-area" id="uploadArea">
                     <div class="upload-placeholder">
                         <i class="fas fa-cloud-upload-alt"></i>
                         <p>Click or drag & drop your image here</p>
                 <div class="form-group">
                     <label for="objectType">What do you want to remove?</label>
+                    <input type="text" id="objectType" placeholder="e.g., person, text, car..." value="text">
                 </div>
                 <button id="processBtn" class="button" disabled>
                 <p class="error-message" id="errorMessage"></p>
             </div>
+            <div class="card">
                 <div class="result-area">
+                    <div id="resultPlaceholder">
                         <i class="fas fa-image"></i>
                         <p>Your edited image will appear here</p>
                     </div>
                 </a>
             </div>
         </div>
     </div>
     <script>
         const uploadArea = document.getElementById('uploadArea');
         const previewContainer = document.getElementById('previewContainer');
         const imagePreview = document.getElementById('imagePreview');
         const spinner = document.getElementById('spinner');
         const downloadBtn = document.getElementById('downloadBtn');
         const errorMessage = document.getElementById('errorMessage');
         let selectedFile = null;
         // Handle file selection
+        uploadArea.addEventListener('click', () => {
             const fileInput = document.createElement('input');
             fileInput.type = 'file';
             fileInput.accept = 'image/jpeg, image/png';
         });
         // Handle drag and drop
+        uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
             uploadArea.classList.add('active');
         });
+        uploadArea.addEventListener('dragleave', () => {
             uploadArea.classList.remove('active');
         });
+        uploadArea.addEventListener('drop', (e) => {
             e.preventDefault();
             uploadArea.classList.remove('active');
             if (e.dataTransfer.files.length > 0) {
                 handleFile(e.dataTransfer.files[0]);
             }
         });
         function handleFileSelect(e) {
             if (e.target.files.length > 0) {
                 handleFile(e.target.files[0]);
         }
         function handleFile(file) {
             if (!file.type.match('image.*')) {
                 showError('Please select a valid image file (JPG or PNG)');
                 return;
             selectedFile = file;
             const reader = new FileReader();
+            reader.onload = (e) => {
                 imagePreview.src = e.target.result;
                 previewContainer.style.display = 'flex';
                 document.querySelector('.upload-placeholder').style.opacity = '0';
                 processBtn.disabled = false;
                 hideError();
             };
         }
         // Process image
+        processBtn.addEventListener('click', () => {
             if (!selectedFile) {
                 showError('Please select an image first');
                 return;
                 return;
             }
             showLoading();
             const reader = new FileReader();
+            reader.onload = (e) => {
                 const imageData = e.target.result;
                 processImage(imageData, objectType);
             };
             reader.readAsDataURL(selectedFile);
         });
         function processImage(imageData, objectType) {
             fetch('/process', {
                 method: 'POST',
                 headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
                 },
                 body: JSON.stringify({
                     image: imageData,
             .then(response => response.json())
             .then(data => {
                 hideLoading();
                 if (data.success) {
+                    resultImage.src = data.resultPath + '?t=' + new Date().getTime();
                     resultImage.style.display = 'block';
                     resultPlaceholder.style.display = 'none';
                     downloadBtn.style.display = 'flex';
                     downloadBtn.href = data.resultPath;
                 } else {
                     showError(data.message || 'Failed to process image');
                 }
             });
         }
         function showLoading() {
             spinner.style.display = 'block';
             resultPlaceholder.style.display = 'none';
         function showError(message) {
             errorMessage.textContent = message;
             errorMessage.style.display = 'block';
         }
         function hideError() {
             errorMessage.style.display = 'none';
         }
     </script>
 </body>
 </html>