Hugging Face's logo

Spaces:
Ashrafb
/
Faceswdockerfast
Paused

App Files Community
Ashrafb commited on
Commit
2ef0700
·
verified ·
1 Parent(s): c892ba0

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +25 -23
static/index.html CHANGED
@@ -2,27 +2,10 @@
2
  <html>
3
  <head>
4
  <title>Face Swapper App</title>
5
- <script>
6
- function swapFaces() {
7
- var form = document.getElementById("swapForm");
8
- var formData = new FormData(form);
9
- var xhr = new XMLHttpRequest();
10
-
11
- xhr.onreadystatechange = function() {
12
- if (xhr.readyState == 4 && xhr.status == 200) {
13
- var resultImage = document.getElementById("resultImage");
14
- resultImage.src = xhr.responseText; // Set base64 string directly as src
15
- }
16
- };
17
-
18
- xhr.open("POST", "/swap_faces/", true);
19
- xhr.send(formData);
20
- }
21
- </script>
22
  </head>
23
  <body>
24
  <h1>Face Swapper App</h1>
25
- <form id="swapForm" enctype="multipart/form-data">
26
  <h2>Upload Source Image</h2>
27
  <input type="file" name="source_file" accept="image/*" required><br>
28
  <label>Source Face Position:</label>
@@ -31,11 +14,30 @@
31
  <input type="file" name="destination_file" accept="image/*" required><br>
32
  <label>Destination Face Position:</label>
33
  <input type="number" name="destination_face_index" min="1" required><br>
34
- <button type="button" onclick="swapFaces()">Swap Faces</button> <!-- Change to type="button" to prevent form submission -->
35
  </form>
36
- <div>
37
- <h2>Result Image</h2>
38
- <img id="resultImage" src="" alt="Result Image">
39
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  </body>
41
  </html>
 
2
  <html>
3
  <head>
4
  <title>Face Swapper App</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
6
  <body>
7
  <h1>Face Swapper App</h1>
8
+ <form id="swapForm" action="/swap_faces/" method="post" enctype="multipart/form-data">
9
  <h2>Upload Source Image</h2>
10
  <input type="file" name="source_file" accept="image/*" required><br>
11
  <label>Source Face Position:</label>
 
14
  <input type="file" name="destination_file" accept="image/*" required><br>
15
  <label>Destination Face Position:</label>
16
  <input type="number" name="destination_face_index" min="1" required><br>
17
+ <button type="button" onclick="swapFaces()">Swap Faces</button> <!-- Changed to type="button" and added onclick handler -->
18
  </form>
19
+ <div id="resultImage"></div> <!-- Placeholder for the result image -->
20
+
21
+ <script>
22
+ async function swapFaces() {
23
+ const form = document.getElementById('swapForm');
24
+ const formData = new FormData(form);
25
+
26
+ try {
27
+ const response = await fetch('/swap_faces/', {
28
+ method: 'POST',
29
+ body: formData
30
+ });
31
+ const blob = await response.blob();
32
+ const imageUrl = URL.createObjectURL(blob);
33
+
34
+ // Display the result image
35
+ const resultImageDiv = document.getElementById('resultImage');
36
+ resultImageDiv.innerHTML = `<img src="${imageUrl}" alt="Result Image" style="max-width: 100%;">`;
37
+ } catch (error) {
38
+ console.error('Error swapping faces:', error);
39
+ }
40
+ }
41
+ </script>
42
  </body>
43
  </html>