Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Virtual Try-On</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script> | |
| // Handle the popup window | |
| function openPopup() { | |
| document.getElementById("popup").style.display = "block"; | |
| document.getElementById("emailInput").style.display = "block"; | |
| document.getElementById("submitBtn").style.display = "block"; | |
| document.getElementById("popupMessage").innerText = "Get a free trial key sent to your email"; | |
| } | |
| function closePopup() { | |
| document.getElementById("popup").style.display = "none"; | |
| document.getElementById("emailInput").value = ""; | |
| document.getElementById("popupMessage").innerText = "Get a free trial key sent to your email"; | |
| } | |
| // Handle email submission | |
| function submitEmail() { | |
| const emailInput = document.getElementById("emailInput").value; | |
| fetch("/send_key", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ email: emailInput }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById("popupMessage").innerText = data.message; | |
| document.getElementById("emailInput").style.display = "none"; | |
| document.getElementById("submitBtn").style.display = "none"; | |
| }) | |
| .catch(err => alert("Error: " + err)); | |
| } | |
| // Handle drag-and-drop and previews | |
| function enableImagePreview(boxId, inputId, previewId, textId, removeButtonId) { | |
| const box = document.getElementById(boxId); | |
| const input = document.getElementById(inputId); | |
| const preview = document.getElementById(previewId); | |
| const text = document.getElementById(textId); | |
| box.addEventListener("dragover", (e) => { | |
| e.preventDefault(); | |
| box.classList.add("drag-over"); | |
| }); | |
| box.addEventListener("dragleave", () => box.classList.remove("drag-over")); | |
| box.addEventListener("drop", (e) => { | |
| e.preventDefault(); | |
| box.classList.remove("drag-over"); | |
| const file = e.dataTransfer.files[0]; | |
| input.files = e.dataTransfer.files; | |
| showPreview(file, preview, text, removeButtonId); | |
| }); | |
| input.addEventListener("change", () => { | |
| if (input.files.length > 0) { | |
| showPreview(input.files[0], preview, text, removeButtonId); | |
| } | |
| }); | |
| } | |
| function showPreview(file, previewElement, textElement, removeButton) { | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| previewElement.src = e.target.result; | |
| previewElement.style.display = "block"; | |
| textElement.style.display = "none"; | |
| document.getElementById(removeButton).style.display = "flex"; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function removeImage(inputId, previewId, textId, removeButtonId) { | |
| const input = document.getElementById(inputId); | |
| const preview = document.getElementById(previewId); | |
| const text = document.getElementById(textId); | |
| const removeButton = document.getElementById(removeButtonId); | |
| input.value = ""; // Clear the file input | |
| preview.src = ""; // Clear the preview image | |
| preview.style.display = "none"; | |
| text.style.display = "block"; | |
| removeButton.style.display = "none"; | |
| } | |
| // Submit form with AJAX | |
| function submitForm(event) { | |
| event.preventDefault(); | |
| const formData = new FormData(document.getElementById("imageForm")); | |
| document.getElementById("outputImage").style.display = "none"; | |
| const spinner = document.getElementById("spinner"); | |
| spinner.style.display = "block"; // Unhide the spinner | |
| // Get the key input value and add it to the form data | |
| const keyInput = document.querySelector('.key-input').value; | |
| formData.append('key', keyInput); | |
| fetch("/process", { | |
| method: "POST", | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.output_image) { | |
| spinner.style.display = "none"; | |
| document.getElementById("outputImage").src = data.output_image; | |
| document.getElementById("outputImage").style.display = "block"; | |
| } else if (data.error) { | |
| alert(data.error); | |
| } | |
| }) | |
| .catch(err => { | |
| spinner.style.display = "none"; // Hide the spinner on error | |
| alert("Error: " + err); | |
| }) | |
| .finally(() => { | |
| spinner.style.display = "none"; // Ensure spinner hides after completion | |
| }); | |
| } | |
| window.onload = () => { | |
| enableImagePreview("box1", "input1", "preview1", "text1", "remove1"); | |
| enableImagePreview("box2", "input2", "preview2", "text2", "remove2"); | |
| document.getElementById("imageForm").addEventListener("submit", submitForm); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- Title --> | |
| <h1 class="title">Virtual Try-On</h1> | |
| <p> Reach out to <a href="mailto:[email protected]">[email protected]</a> for inquiries. </p> | |
| <!-- Key Input --> | |
| <div class="key-container"> | |
| <input type="text" class="key-input" placeholder="Input your key here"> | |
| </div> | |
| <button type="button" class="get-key-btn" onclick="openPopup()">Get a free key</button> | |
| <!-- Form --> | |
| <form id="imageForm"> | |
| <div class="input-container"> | |
| <div class="box-wrapper"> | |
| <p>Person</p> | |
| <div class="drag-drop-box" id="box1"> | |
| <p id="text1">Person/Model Image</p> | |
| <input type="file" id="input1" name="image1" accept="image/*" required> | |
| <img id="preview1" class="preview" style="display: none;"> | |
| <span class="remove-btn" id="remove1" style="display: none;" onclick="removeImage('input1', 'preview1', 'text1', 'remove1')">×</span> | |
| </div> | |
| </div> | |
| <!-- Input Box 2 --> | |
| <div class="box-wrapper"> | |
| <p>Garment</p> | |
| <div class="drag-drop-box" id="box2"> | |
| <p id="text2">Garment Image</p> | |
| <input type="file" id="input2" name="image2" accept="image/*" required> | |
| <img id="preview2" class="preview" style="display: none;"> | |
| <span class="remove-btn" id="remove2" style="display: none;" onclick="removeImage('input2', 'preview2', 'text2', 'remove2')">×</span> | |
| </div> | |
| </div> | |
| <!-- Output Container --> | |
| <div class="box-wrapper"> | |
| <p>Result</p> | |
| <div class="output-container"> | |
| <div class="output-box"> | |
| <img id="spinner" src="{{ url_for('static', filename='spinner.gif') }}" style="display: none;" alt="Loading..."> | |
| <img id="outputImage" style="display: none;" alt="Output Image"> | |
| </div> | |
| <!-- Generate Button --> | |
| <button type="submit" class="generate-btn">Generate (~20 sec)</button> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| <div class="image-container"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/kim1.jpg" alt="Image 1"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/kim2.jpg" alt="Image 2"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro-Dev/resolve/main/examples/kim3.jpg" alt="Image 3"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/meg1.jpg" alt="Image 1"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/meg2.jpg" alt="Image 2"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/meg3.jpg" alt="Image 3"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/bella1.jpg" alt="Image 1"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/bella2.jpg" alt="Image 2"> | |
| <img src="https://huggingface.co/spaces/tonyassi/Virtual-Try-On-Pro/resolve/main/examples/bella3.jpg" alt="Image 3"> | |
| </div> | |
| </div> | |
| <!-- Popup Window --> | |
| <div id="popup" class="popup"> | |
| <div class="popup-content"> | |
| <span class="close-btn" onclick="closePopup()">×</span> | |
| <p id="popupMessage">Get a free trial key sent to your gmail</p> | |
| <input type="email" id="emailInput" class="popup-input" placeholder="Email"> | |
| <button id="submitBtn" type="button" class="submit-btn" onclick="submitEmail()">Submit</button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |