Update static/index.html

static/index.html

@@ -268,43 +268,54 @@ h1 {
     
     
     async function swapFaces() {
-        const form = document.getElementById('swapForm');
-        const formData = new FormData(form);
-
-        try {
-            // Display loading spinner
-            const loadingSpinner = document.getElementById('loadingSpinner');
-            loadingSpinner.style.display = 'block';
-
-            // Remove previous result image and message
-            const resultContainer = document.getElementById('resultContainer');
-            resultContainer.innerHTML = '';
-
-            const response = await fetch('/swap_faces/', {
-                method: 'POST',
-                body: formData
-            });
-
-            if (response.ok) {
-                // If successful response, display the result image
-                const blob = await response.blob();
-                const imageUrl = URL.createObjectURL(blob);
-                resultContainer.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
-            } else {
-                // If server error, display the error message
-                const errorMessage = await response.text();
-                resultContainer.innerHTML = `<p>Error: ${errorMessage}</p>`;
-            }
+    const sourceFileInput = document.getElementById('sourceFile');
+    const destinationFileInput = document.getElementById('destinationFile');
+    const resultContainer = document.getElementById('resultContainer');
+
+    // Check if both source and destination file inputs are empty
+    if (!sourceFileInput.files[0] || !destinationFileInput.files[0]) {
+        // Update the result container with the error message
+        resultContainer.innerHTML = "<p>Please upload both source and destination images.</p>";
+        return;
+    }
 
-            // Hide loading spinner after result (or error message) is displayed
-            loadingSpinner.style.display = 'none';
-        } catch (error) {
-            console.error('Error swapping faces:', error);
-            // Hide loading spinner if there's an error
-            const loadingSpinner = document.getElementById('loadingSpinner');
-            loadingSpinner.style.display = 'none';
+    // Clear the result container if both images are uploaded
+    resultContainer.innerHTML = "";
+
+    const form = document.getElementById('swapForm');
+    const formData = new FormData(form);
+
+    try {
+        // Display loading spinner
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'block';
+
+        const response = await fetch('/swap_faces/', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.ok) {
+            // If successful response, display the result image
+            const blob = await response.blob();
+            const imageUrl = URL.createObjectURL(blob);
+            resultContainer.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
+        } else {
+            // If server error, display the error message
+            const errorMessage = await response.text();
+            resultContainer.innerHTML = `<p>Error: ${errorMessage}</p>`;
         }
+
+        // Hide loading spinner after result (or error message) is displayed
+        loadingSpinner.style.display = 'none';
+    } catch (error) {
+        console.error('Error swapping faces:', error);
+        // Hide loading spinner if there's an error
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        loadingSpinner.style.display = 'none';
     }
+}
+