Update templates/index.html

templates/index.html

@@ -96,6 +96,11 @@
             event.preventDefault();
             const formData = new FormData(document.getElementById("imageForm"));
 
+            document.getElementById("outputImage").style.display = "none";
+
+            const spinner = document.getElementById("spinner");
+            spinner.style.display = "block"; // Unhide the spinner
+
             // Get the key input value and add it to the form data
             const keyInput = document.querySelector('.key-input').value;
             formData.append('key', keyInput);
@@ -107,13 +112,20 @@
             .then(response => response.json())
             .then(data => {
                 if (data.output_image) {
+                    spinner.style.display = "none";
                     document.getElementById("outputImage").src = data.output_image;
                     document.getElementById("outputImage").style.display = "block";
                 } else if (data.error) {
                     alert(data.error);
                 }
             })
-            .catch(err => alert("Error: " + err));
+            .catch(err => {
+                spinner.style.display = "none"; // Hide the spinner on error
+                alert("Error: " + err);
+            })
+            .finally(() => {
+                spinner.style.display = "none"; // Ensure spinner hides after completion
+            });
         }
 
 
@@ -141,30 +153,40 @@
         <!-- Form -->
         <form id="imageForm">
             <div class="input-container">
-               <!-- Input Box 1 -->
-                <div class="drag-drop-box" id="box1">
-                    <p id="text1">Person/Model Image</p>
-                    <input type="file" id="input1" name="image1" accept="image/*" required>
-                    <img id="preview1" class="preview" style="display: none;">
-                    <span class="remove-btn" id="remove1" style="display: none;" onclick="removeImage('input1', 'preview1', 'text1', 'remove1')">×</span>
+              
+                <div class="box-wrapper">
+                    <p>Person</p> 
+                    <div class="drag-drop-box" id="box1">
+                        <p id="text1">Person/Model Image</p>
+                        <input type="file" id="input1" name="image1" accept="image/*" required>
+                        <img id="preview1" class="preview" style="display: none;">
+                        <span class="remove-btn" id="remove1" style="display: none;" onclick="removeImage('input1', 'preview1', 'text1', 'remove1')">×</span>
+                    </div>
                 </div>
 
                 <!-- Input Box 2 -->
-                <div class="drag-drop-box" id="box2">
-                    <p id="text2">Garment Image</p>
-                    <input type="file" id="input2" name="image2" accept="image/*" required>
-                    <img id="preview2" class="preview" style="display: none;">
-                    <span class="remove-btn" id="remove2" style="display: none;" onclick="removeImage('input2', 'preview2', 'text2', 'remove2')">×</span>
+                <div class="box-wrapper">
+                    <p>Garment</p> 
+                    <div class="drag-drop-box" id="box2">
+                        <p id="text2">Garment Image</p>
+                        <input type="file" id="input2" name="image2" accept="image/*" required>
+                        <img id="preview2" class="preview" style="display: none;">
+                        <span class="remove-btn" id="remove2" style="display: none;" onclick="removeImage('input2', 'preview2', 'text2', 'remove2')">×</span>
+                    </div>
                 </div>
 
 
                 <!-- Output Container -->
-                <div class="output-container">
-                    <div class="output-box">
-                        <img id="outputImage" style="display: none;" alt="Output Image">
+                <div class="box-wrapper">
+                    <p>Result</p> 
+                    <div class="output-container">
+                        <div class="output-box">
+                            <img id="spinner" src="{{ url_for('static', filename='spinner.gif') }}" style="display: none;" alt="Loading...">
+                            <img id="outputImage" style="display: none;" alt="Output Image">
+                        </div>
+                        <!-- Generate Button -->
+                        <button type="submit" class="generate-btn">Generate (~20 sec)</button>
                     </div>
-                    <!-- Generate Button -->
-                    <button type="submit" class="generate-btn">Generate (~20 sec)</button>
                 </div>
             </div>
         </form>