|
|
<!DOCTYPE html> |
|
|
<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> |
|
|
|
|
|
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"; |
|
|
} |
|
|
|
|
|
|
|
|
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)); |
|
|
} |
|
|
|
|
|
|
|
|
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 = ""; |
|
|
preview.src = ""; |
|
|
preview.style.display = "none"; |
|
|
text.style.display = "block"; |
|
|
removeButton.style.display = "none"; |
|
|
} |
|
|
|
|
|
|
|
|
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"; |
|
|
|
|
|
|
|
|
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"; |
|
|
alert("Error: " + err); |
|
|
}) |
|
|
.finally(() => { |
|
|
spinner.style.display = "none"; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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"> |
|
|
|
|
|
<h1 class="title">Virtual Try-On</h1> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
