File size: 6,770 Bytes
abc8d9a d83c8c3 abc8d9a d83c8c3 abc8d9a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!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); // This will show the message from Flask
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> |