Hugging Face's logo

Spaces:
Athagi
/
S
Runtime error

App Files Community
Athagi commited on
Commit
08fc19d
·
verified ·
1 Parent(s): 5211ce8

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +115 -11
templates/index.html CHANGED
@@ -1,17 +1,121 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>Real-Time Face Swap</title>
5
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
  <body>
8
- <h1>Upload Source and Target Images</h1>
9
- <form method="post" enctype="multipart/form-data">
10
- <label for="source">Source Image:</label>
11
- <input type="file" name="source" accept="image/*" required><br><br>
12
- <label for="target">Target Image:</label>
13
- <input type="file" name="target" accept="image/*" required><br><br>
14
- <input type="submit" value="Swap Faces">
15
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </body>
17
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Real-Time Face Swap</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background: #f9f9f9;
11
+ text-align: center;
12
+ padding: 20px;
13
+ }
14
+ h1 {
15
+ margin-bottom: 20px;
16
+ }
17
+ form {
18
+ display: inline-block;
19
+ background: white;
20
+ padding: 20px;
21
+ border-radius: 8px;
22
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
23
+ }
24
+ label {
25
+ display: block;
26
+ margin-top: 10px;
27
+ font-weight: bold;
28
+ }
29
+ input[type="file"] {
30
+ margin-top: 5px;
31
+ }
32
+ button {
33
+ margin-top: 15px;
34
+ padding: 10px 20px;
35
+ font-size: 16px;
36
+ cursor: pointer;
37
+ background: #007bff;
38
+ color: white;
39
+ border: none;
40
+ border-radius: 4px;
41
+ }
42
+ button:disabled {
43
+ background: #aaa;
44
+ cursor: not-allowed;
45
+ }
46
+ #result {
47
+ margin-top: 30px;
48
+ }
49
+ #result img {
50
+ max-width: 300px;
51
+ border-radius: 8px;
52
+ box-shadow: 0 0 8px rgba(0,0,0,0.1);
53
+ }
54
+ #status {
55
+ margin-top: 10px;
56
+ font-style: italic;
57
+ color: #555;
58
+ }
59
+ </style>
60
  </head>
61
  <body>
62
+ <h1>Real-Time Face Swap</h1>
63
+
64
+ <form id="uploadForm">
65
+ <label for="source">Source Image:</label>
66
+ <input type="file" name="source" id="source" accept="image/*" required />
67
+
68
+ <label for="target">Target Image:</label>
69
+ <input type="file" name="target" id="target" accept="image/*" required />
70
+
71
+ <button type="submit" id="swapBtn">Swap Faces</button>
72
+ </form>
73
+
74
+ <div id="status"></div>
75
+ <div id="result"></div>
76
+
77
+ <script>
78
+ const form = document.getElementById('uploadForm');
79
+ const statusDiv = document.getElementById('status');
80
+ const resultDiv = document.getElementById('result');
81
+ const swapBtn = document.getElementById('swapBtn');
82
+
83
+ form.addEventListener('submit', async (e) => {
84
+ e.preventDefault();
85
+
86
+ // Disable button to prevent multiple clicks
87
+ swapBtn.disabled = true;
88
+ statusDiv.textContent = 'Processing...';
89
+ resultDiv.innerHTML = '';
90
+
91
+ const formData = new FormData();
92
+ formData.append('source', document.getElementById('source').files[0]);
93
+ formData.append('target', document.getElementById('target').files[0]);
94
+
95
+ try {
96
+ const response = await fetch('/swap', {
97
+ method: 'POST',
98
+ body: formData
99
+ });
100
+
101
+ if (!response.ok) {
102
+ const err = await response.json();
103
+ statusDiv.textContent = 'Error: ' + (err.error || response.statusText);
104
+ swapBtn.disabled = false;
105
+ return;
106
+ }
107
+
108
+ const blob = await response.blob();
109
+ const imgURL = URL.createObjectURL(blob);
110
+
111
+ statusDiv.textContent = '';
112
+ resultDiv.innerHTML = '<h3>Result:</h3><img src="' + imgURL + '" alt="Swapped Image" />';
113
+ } catch (err) {
114
+ statusDiv.textContent = 'Error: ' + err.message;
115
+ } finally {
116
+ swapBtn.disabled = false;
117
+ }
118
+ });
119
+ </script>
120
  </body>
121
  </html>