Spaces:

Ashrafb
/

Faceswdockerfast

Paused

App Files Files Community

Ashrafb commited on Feb 27, 2024

Commit

8238e8a

verified ·

1 Parent(s): c855cea

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +34 -23

static/index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Face Swapper App</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
     <style>
@@ -264,38 +264,49 @@ h1 {
             reader.readAsDataURL(file);
         }
-        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
-                const resultContainer = document.getElementById('resultContainer');
-                resultContainer.innerHTML = '';
-                const response = await fetch('/swap_faces/', {
-                    method: 'POST',
-                    body: formData
-                });
                 const blob = await response.blob();
                 const imageUrl = URL.createObjectURL(blob);
                 // Display the result image
                 resultContainer.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
-                // Hide loading spinner after result image 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';
             }
         }
     </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
     <style>
             reader.readAsDataURL(file);
         }
+    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 error message
+            const resultContainer = document.getElementById('resultContainer');
+            resultContainer.innerHTML = '';
+            const response = await fetch('/swap_faces/', {
+                method: 'POST',
+                body: formData
+            });
+            // Check if response is ok
+            if (response.ok) {
                 const blob = await response.blob();
                 const imageUrl = URL.createObjectURL(blob);
                 // Display the result image
                 resultContainer.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
+            } else {
+                // If response is not ok, display the error message
+                const errorMessage = await response.text();
+                resultContainer.innerText = errorMessage;
             }
+            // Hide loading spinner after result image 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';
         }
+    }
     </script>
 </body>
 </html>