|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Flask App</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<img id="title-image" class="title-img" src="{{ url_for('static', filename='title1.png') }}" alt="Title Image"> |
|
|
|
|
|
<div class="upload-container fade" id="drop-area"> |
|
|
<img src="{{ url_for('static', filename='icon.jpg') }}" alt="Upload Icon" class="upload-icon"> |
|
|
<p class="upload-text">Upload your face image</p> |
|
|
<input type="file" id="file-input" accept="image/*" hidden> |
|
|
<img id="preview-image" class="preview-image" src="" alt="Image Preview"> |
|
|
<button id="remove-image" class="remove-image">×</button> |
|
|
</div> |
|
|
|
|
|
<input type="email" id="email" class="fade" placeholder="Enter your email"> |
|
|
|
|
|
<button id="generate-btn" class="fade">Generate</button> |
|
|
|
|
|
<p id="confirmation-message" class="fade hidden"> |
|
|
Your lookbook will be sent to your email in 5-20 minutes. Check your spam folder. |
|
|
</p> |
|
|
|
|
|
<script> |
|
|
document.addEventListener("DOMContentLoaded", function () { |
|
|
const fileInput = document.getElementById("file-input"); |
|
|
const dropArea = document.getElementById("drop-area"); |
|
|
const previewImage = document.getElementById("preview-image"); |
|
|
const removeImageBtn = document.getElementById("remove-image"); |
|
|
const icon = document.querySelector(".upload-icon"); |
|
|
const uploadText = document.querySelector(".upload-text"); |
|
|
const generateBtn = document.getElementById("generate-btn"); |
|
|
const emailInput = document.getElementById("email"); |
|
|
const confirmationMessage = document.getElementById("confirmation-message"); |
|
|
let uploadedFile = null; |
|
|
previewImage.style.display = "none"; |
|
|
removeImageBtn.style.display = "none"; |
|
|
function fadeOut(element) { |
|
|
element.style.opacity = "0"; |
|
|
setTimeout(() => { |
|
|
element.style.display = "none"; |
|
|
}, 500); |
|
|
} |
|
|
function fadeIn(element) { |
|
|
element.style.display = "block"; |
|
|
setTimeout(() => { |
|
|
element.style.opacity = "1"; |
|
|
}, 50); |
|
|
} |
|
|
function updateTitleImage() { |
|
|
const img = document.getElementById("title-image"); |
|
|
if (window.innerWidth > 768) { |
|
|
img.src = "{{ url_for('static', filename='title2.png') }}"; |
|
|
} else { |
|
|
img.src = "{{ url_for('static', filename='title1.png') }}"; |
|
|
} |
|
|
} |
|
|
window.addEventListener("resize", updateTitleImage); |
|
|
updateTitleImage(); |
|
|
dropArea.addEventListener("dragover", (e) => { |
|
|
e.preventDefault(); |
|
|
dropArea.classList.add("dragging"); |
|
|
}); |
|
|
dropArea.addEventListener("dragleave", () => { |
|
|
dropArea.classList.remove("dragging"); |
|
|
}); |
|
|
dropArea.addEventListener("drop", (e) => { |
|
|
e.preventDefault(); |
|
|
dropArea.classList.remove("dragging"); |
|
|
const file = e.dataTransfer.files[0]; |
|
|
handleFile(file); |
|
|
}); |
|
|
dropArea.addEventListener("click", () => { |
|
|
fileInput.click(); |
|
|
}); |
|
|
fileInput.addEventListener("change", function () { |
|
|
const file = fileInput.files[0]; |
|
|
handleFile(file); |
|
|
}); |
|
|
function handleFile(file) { |
|
|
if (file && file.type.startsWith("image/")) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function (e) { |
|
|
previewImage.src = e.target.result; |
|
|
previewImage.style.display = "block"; |
|
|
removeImageBtn.style.display = "block"; |
|
|
icon.style.display = "none"; |
|
|
uploadText.style.display = "none"; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
uploadedFile = file; |
|
|
} |
|
|
} |
|
|
removeImageBtn.addEventListener("click", function (e) { |
|
|
e.stopPropagation(); |
|
|
fileInput.value = ""; |
|
|
previewImage.style.display = "none"; |
|
|
removeImageBtn.style.display = "none"; |
|
|
icon.style.display = "block"; |
|
|
uploadText.style.display = "block"; |
|
|
previewImage.src = ""; |
|
|
uploadedFile = null; |
|
|
}); |
|
|
generateBtn.addEventListener("click", function () { |
|
|
const email = emailInput.value; |
|
|
if (!email || !uploadedFile) { |
|
|
alert("Please enter an email and select an image."); |
|
|
return; |
|
|
} |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append("email", email); |
|
|
formData.append("image", uploadedFile); |
|
|
|
|
|
fetch("/generate", { |
|
|
method: "POST", |
|
|
body: formData, |
|
|
}) |
|
|
.then(response => response.json().then(data => ({ status: response.status, body: data }))) |
|
|
.then(({ status, body }) => { |
|
|
if (status === 400) { |
|
|
alert(body.message); |
|
|
return; |
|
|
} |
|
|
|
|
|
fadeOut(dropArea); |
|
|
fadeOut(emailInput); |
|
|
fadeOut(generateBtn); |
|
|
|
|
|
setTimeout(() => { |
|
|
fadeIn(confirmationMessage); |
|
|
}, 500); |
|
|
}) |
|
|
.catch(error => { |
|
|
alert("An error occurred. Please try again."); |
|
|
}); |
|
|
}); |
|
|
|
|
|
}); |
|
|
</script> |
|
|
|
|
|
<h2 class="examples-title">Examples</h2> |
|
|
|
|
|
<div class="examples-container"> |
|
|
<a href="https://huggingface.co/spaces/tonyassi/v-style?id=gigi" target="_blank" rel="noopener noreferrer"> |
|
|
<img class="example-image" src="{{ url_for('static', filename='users/gigi/gigi.png') }}" alt="Gigi"> |
|
|
</a> |
|
|
<a href="https://huggingface.co/spaces/tonyassi/v-style?id=tim" target="_blank" rel="noopener noreferrer"> |
|
|
<img class="example-image" src="{{ url_for('static', filename='users/tim/tim.png') }}" alt="Tim"> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
</body> |
|
|
</html> |
