Spaces:

Ashrafb
/

Faceswdockerfast

Paused

App Files Files Community

Ashrafb commited on Feb 27, 2024

Commit

5e1f803

verified ·

1 Parent(s): 0148de7

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +85 -79

static/index.html CHANGED Viewed

@@ -2,108 +2,114 @@
 <html>
 <head>
     <title>Face Swapper App</title>
-<style >
-  #resultImage {
-  border: 2px solid blue;
-  width: 330px;
-  height: 330px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  margin: auto;
-  margin-top: 30px;
-  padding-bottom: 7px;
-  gap: 14px;
-  background: linear-gradient(white , white) padding-box,
-              linear-gradient(to right, red, blue) border-box;
-  border-radius: 20px;
-  border: 2.5px solid transparent;
-}
-#resultContainer img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: auto;
-}
-  #loadingSpinner {
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top: 8px solid pink;
-  width: 40px;
-  height: 40px;
-  animation: spin 2s linear infinite;
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-  }
-</style>
 </head>
 <body>
     <h1>Face Swapper App</h1>
     <form id="swapForm" action="/swap_faces/" method="post" enctype="multipart/form-data">
         <h2>Upload Source Image</h2>
-        <input type="file" name="source_file" accept="image/*" required><br>
         <label>Source Face Position:</label>
         <input type="number" name="source_face_index" min="1" required><br>
         <h2>Upload Destination Image</h2>
-        <input type="file" name="destination_file" accept="image/*" required><br>
         <label>Destination Face Position:</label>
         <input type="number" name="destination_face_index" min="1" required><br>
-        <button type="button" onclick="swapFaces()">Swap Faces</button>  <!-- Changed to type="button" and added onclick handler -->
     </form>
     <div id="resultImage">
-        <div id="loadingSpinner" style="display: none;">
-             <!-- Replace this with your loading spinner HTML/CSS -->
-        </div>
-        <div id="resultContainer">
-        </div>
     </div>
-    <!-- Placeholder for the result image -->
     <script>
         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>

 <html>
 <head>
     <title>Face Swapper App</title>
+    <style>
+        #resultImage {
+            border: 2px solid blue;
+            width: 330px;
+            height: 330px;
+            display: flex;
+            flex-direction: column;
+            overflow-y: scroll;
+            margin: auto;
+            margin-top: 30px;
+            padding-bottom: 7px;
+            gap: 14px;
+            background: linear-gradient(white , white) padding-box,
+                        linear-gradient(to right, red, blue) border-box;
+            border-radius: 20px;
+            border: 2.5px solid transparent;
+        }
+        #loadingSpinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 8px solid pink;
+            width: 40px;
+            height: 40px;
+            animation: spin 2s linear infinite;
+            position: relative;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </head>
 <body>
     <h1>Face Swapper App</h1>
     <form id="swapForm" action="/swap_faces/" method="post" enctype="multipart/form-data">
         <h2>Upload Source Image</h2>
+        <input type="file" name="source_file" accept="image/*" required onchange="displayImage('source_image', this)"><br>
         <label>Source Face Position:</label>
         <input type="number" name="source_face_index" min="1" required><br>
         <h2>Upload Destination Image</h2>
+        <input type="file" name="destination_file" accept="image/*" required onchange="displayImage('destination_image', this)"><br>
         <label>Destination Face Position:</label>
         <input type="number" name="destination_face_index" min="1" required><br>
+        <button type="button" onclick="swapFaces()">Swap Faces</button>
     </form>
     <div id="resultImage">
+        <div id="loadingSpinner" style="display: none;"></div>
+        <div id="resultContainer"></div>
     </div>
     <script>
+        function displayImage(id, input) {
+            const file = input.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const image = document.createElement('img');
+                    image.src = e.target.result;
+                    image.alt = id === 'source_image' ? 'Source Image' : 'Destination Image';
+                    image.style.maxWidth = '100%';
+                    const container = document.getElementById('resultContainer');
+                    container.appendChild(image);
+                }
+                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 images
+                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
+                const resultImage = document.createElement('img');
+                resultImage.src = imageUrl;
+                resultImage.alt = 'Result Image';
+                resultImage.style.maxWidth = '100%';
+                resultContainer.appendChild(resultImage);
+                // 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>