V2

templates/index.html

@@ -29,7 +29,8 @@
     <section class="upload-section text-center py-16">
         <h2 class="text-3xl font-semibold">Upload Your Image</h2>
         <input type="file" id="file-upload" class="mt-4 p-2 border rounded" />
-        <button onclick="uploadImage()" class="mt-4 bg-blue-600 text-white p-2 rounded">Upload and Detect</button>
+        <button id="upload-btn" onclick="uploadImage()" class="mt-4 bg-blue-600 text-white p-2 rounded">Upload and Detect</button>
+        <div id="loading" class="hidden mt-4">Loading...</div>
     </section>
 
     <!-- Result Section -->
@@ -41,35 +42,21 @@
         <div id="result-container" class="mt-8 max-w-xl mx-auto"></div>
     </section>
 
-    <!-- Workflow Cards -->
-    <section class="workflow py-16 bg-gray-200">
-        <div class="text-center">
-            <h2 class="text-3xl font-semibold">How It Works</h2>
-        </div>
-        <div class="flex justify-around mt-8">
-            <div class="card p-6 bg-white shadow-lg rounded-lg max-w-xs">
-                <h3 class="text-xl font-semibold">Upload Image</h3>
-                <p>Choose an image from your device to upload.</p>
-            </div>
-            <div class="card p-6 bg-white shadow-lg rounded-lg max-w-xs">
-                <h3 class="text-xl font-semibold">AI Process</h3>
-                <p>Our AI, trained on 100 million faces, processes your image.</p>
-            </div>
-            <div class="card p-6 bg-white shadow-lg rounded-lg max-w-xs">
-                <h3 class="text-xl font-semibold">Get Your Face Shape</h3>
-                <p>Our AI returns the most accurate prediction with up to 99.9% accuracy.</p>
-            </div>
-        </div>
-    </section>
-
     <!-- Footer -->
-    <footer class="bg-blue-600 text-white text-center py-4">
+    <footer class="bg-blue-600 text-white text-center py-12">
         <p>&copy; 2024 Face Shape Detect. All rights reserved.</p>
     </footer>
 
     <script>
         function uploadImage() {
+            const uploadBtn = document.getElementById('upload-btn');
+            const loadingDiv = document.getElementById('loading');
             const fileInput = document.getElementById('file-upload');
+
+            // Disable the upload button to prevent multiple clicks
+            uploadBtn.disabled = true;
+            loadingDiv.classList.remove('hidden');  // Show loading animation
+
             const formData = new FormData();
             formData.append('file', fileInput.files[0]);
 
@@ -105,10 +92,13 @@
                 })
                 .catch(error => {
                     console.error('Error uploading image:', error);
+                })
+                .finally(() => {
+                    // Enable the upload button and hide loading animation
+                    uploadBtn.disabled = false;
+                    loadingDiv.classList.add('hidden');
                 });
         }
     </script>
-    
-    
 </body>
 </html>