Hugging Face's logo

Spaces:
tonyassi
/
Virtual-TryOn-Pro
Building

App Files Community
1
tonyassi commited on
Commit
22958f9
·
verified ·
1 Parent(s): b2eba0a

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -223
templates/index.html DELETED
@@ -1,223 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Virtual Try-On</title>
6
- <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
- <script>
9
- // Handle the popup window
10
- function openPopup() {
11
- document.getElementById("popup").style.display = "block";
12
- document.getElementById("emailInput").style.display = "block";
13
- document.getElementById("submitBtn").style.display = "block";
14
- document.getElementById("popupMessage").innerText = "Get a free trial key sent to your email";
15
- }
16
-
17
- function closePopup() {
18
- document.getElementById("popup").style.display = "none";
19
- document.getElementById("emailInput").value = "";
20
- document.getElementById("popupMessage").innerText = "Get a free trial key sent to your email";
21
- }
22
-
23
- // Handle email submission
24
- function submitEmail() {
25
- const emailInput = document.getElementById("emailInput").value;
26
-
27
- fetch("/send_key", {
28
- method: "POST",
29
- headers: { "Content-Type": "application/json" },
30
- body: JSON.stringify({ email: emailInput })
31
- })
32
- .then(response => response.json())
33
- .then(data => {
34
- document.getElementById("popupMessage").innerText = data.message;
35
- document.getElementById("emailInput").style.display = "none";
36
- document.getElementById("submitBtn").style.display = "none";
37
- })
38
- .catch(err => alert("Error: " + err));
39
- }
40
-
41
- // Handle drag-and-drop and previews
42
- function enableImagePreview(boxId, inputId, previewId, textId, removeButtonId) {
43
- const box = document.getElementById(boxId);
44
- const input = document.getElementById(inputId);
45
- const preview = document.getElementById(previewId);
46
- const text = document.getElementById(textId);
47
-
48
- box.addEventListener("dragover", (e) => {
49
- e.preventDefault();
50
- box.classList.add("drag-over");
51
- });
52
-
53
- box.addEventListener("dragleave", () => box.classList.remove("drag-over"));
54
-
55
- box.addEventListener("drop", (e) => {
56
- e.preventDefault();
57
- box.classList.remove("drag-over");
58
- const file = e.dataTransfer.files[0];
59
- input.files = e.dataTransfer.files;
60
- showPreview(file, preview, text, removeButtonId);
61
- });
62
-
63
- input.addEventListener("change", () => {
64
- if (input.files.length > 0) {
65
- showPreview(input.files[0], preview, text, removeButtonId);
66
- }
67
- });
68
- }
69
-
70
- function showPreview(file, previewElement, textElement, removeButton) {
71
- const reader = new FileReader();
72
- reader.onload = (e) => {
73
- previewElement.src = e.target.result;
74
- previewElement.style.display = "block";
75
- textElement.style.display = "none";
76
- document.getElementById(removeButton).style.display = "flex";
77
- };
78
- reader.readAsDataURL(file);
79
- }
80
-
81
- function removeImage(inputId, previewId, textId, removeButtonId) {
82
- const input = document.getElementById(inputId);
83
- const preview = document.getElementById(previewId);
84
- const text = document.getElementById(textId);
85
- const removeButton = document.getElementById(removeButtonId);
86
-
87
- input.value = ""; // Clear the file input
88
- preview.src = ""; // Clear the preview image
89
- preview.style.display = "none";
90
- text.style.display = "block";
91
- removeButton.style.display = "none";
92
- }
93
-
94
- // Submit form with AJAX
95
- function submitForm(event) {
96
- event.preventDefault();
97
- const formData = new FormData(document.getElementById("imageForm"));
98
-
99
- document.getElementById("outputImage").style.display = "none";
100
-
101
- const spinner = document.getElementById("spinner");
102
- spinner.style.display = "block"; // Unhide the spinner
103
-
104
- // Get the key input value and add it to the form data
105
- const keyInput = document.querySelector('.key-input').value;
106
- formData.append('key', keyInput);
107
-
108
- fetch("/process", {
109
- method: "POST",
110
- body: formData
111
- })
112
- .then(response => response.json())
113
- .then(data => {
114
- if (data.output_image) {
115
- spinner.style.display = "none";
116
- document.getElementById("outputImage").src = data.output_image;
117
- document.getElementById("outputImage").style.display = "block";
118
- } else if (data.error) {
119
- alert(data.error);
120
- }
121
- })
122
- .catch(err => {
123
- spinner.style.display = "none"; // Hide the spinner on error
124
- alert("Error: " + err);
125
- })
126
- .finally(() => {
127
- spinner.style.display = "none"; // Ensure spinner hides after completion
128
- });
129
- }
130
-
131
-
132
- window.onload = () => {
133
- enableImagePreview("box1", "input1", "preview1", "text1", "remove1");
134
- enableImagePreview("box2", "input2", "preview2", "text2", "remove2");
135
- document.getElementById("imageForm").addEventListener("submit", submitForm);
136
- };
137
- </script>
138
- </head>
139
- <body>
140
- <div class="container">
141
- <!-- Title -->
142
- <h1 class="title">Virtual Try-On</h1>
143
-
144
- <p> Check out the <a href="https://vto.face-swap.co/" target="_blank">Virtual Try-On API</a>. Reach out to <a href="mailto:[email protected]">[email protected]</a> for inquiries. </p>
145
-
146
- <!-- Key Input -->
147
- <div class="key-container">
148
- <input type="text" class="key-input" placeholder="Input your key here">
149
- </div>
150
- <button type="button" class="get-key-btn" onclick="openPopup()">Get a free key</button>
151
-
152
-
153
- <!-- Form -->
154
- <form id="imageForm">
155
- <div class="input-container">
156
-
157
- <div class="box-wrapper">
158
- <p>Person</p>
159
- <div class="drag-drop-box" id="box1">
160
- <p id="text1">Person/Model Image</p>
161
- <input type="file" id="input1" name="image1" accept="image/*" required>
162
- <img id="preview1" class="preview" style="display: none;">
163
- <span class="remove-btn" id="remove1" style="display: none;" onclick="removeImage('input1', 'preview1', 'text1', 'remove1')">×</span>
164
- </div>
165
- </div>
166
-
167
- <!-- Input Box 2 -->
168
- <div class="box-wrapper">
169
- <p>Garment</p>
170
- <div class="drag-drop-box" id="box2">
171
- <p id="text2">Garment Image</p>
172
- <input type="file" id="input2" name="image2" accept="image/*" required>
173
- <img id="preview2" class="preview" style="display: none;">
174
- <span class="remove-btn" id="remove2" style="display: none;" onclick="removeImage('input2', 'preview2', 'text2', 'remove2')">×</span>
175
- </div>
176
- </div>
177
-
178
-
179
- <!-- Output Container -->
180
- <div class="box-wrapper">
181
- <p>Result</p>
182
- <div class="output-container">
183
- <div class="output-box">
184
- <img id="spinner" src="{{ url_for('static', filename='spinner.gif') }}" style="display: none;" alt="Loading...">
185
- <img id="outputImage" style="display: none;" alt="Output Image">
186
- </div>
187
- <!-- Generate Button -->
188
- <button type="submit" class="generate-btn">Generate (~20 sec)</button>
189
- </div>
190
- </div>
191
- </div>
192
- </form>
193
- <div class="image-container">
194
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/kim1.jpg" alt="Image 1">
195
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/kim2.jpg" alt="Image 2">
196
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro-Dev/resolve/main/examples/kim3.jpg" alt="Image 3">
197
- </div>
198
- <div class="image-container">
199
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/meg1.jpg" alt="Image 1">
200
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/meg2.jpg" alt="Image 2">
201
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/meg3.jpg" alt="Image 3">
202
- </div>
203
- <div class="image-container">
204
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/bella1.jpg" alt="Image 1">
205
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/bella2.jpg" alt="Image 2">
206
- <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/bella3.jpg" alt="Image 3">
207
- </div>
208
- </div>
209
-
210
- <!-- Popup Window -->
211
- <div id="popup" class="popup">
212
- <div class="popup-content">
213
- <span class="close-btn" onclick="closePopup()">×</span>
214
- <p id="popupMessage">Get a free trial key sent to your gmail</p>
215
- <input type="email" id="emailInput" class="popup-input" placeholder="Email">
216
- <button id="submitBtn" type="button" class="submit-btn" onclick="submitEmail()">Submit</button>
217
- </div>
218
- </div>
219
-
220
-
221
-
222
- </body>
223
- </html>