Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Virtual Fitting</title> | |
| <style> | |
| body { | |
| display: flex; flex-direction: column; margin: 0; padding: 0; | |
| font-family: Arial, sans-serif; | |
| } | |
| .row { display: flex; flex: 1; margin-top: 10px; } | |
| .left, .right { flex: 1; } | |
| .right { display: flex; flex-direction: column; align-items: center; } | |
| .right img, .left img, .top img { | |
| width: 100%; margin-bottom: 10px; object-fit: cover; | |
| } | |
| .button-container { margin-bottom: 10px; text-align: center; } | |
| .try-on-button { | |
| background-color: #ff9487; | |
| color: white; border: none; border-radius: 5px; | |
| padding: 5px 15px; font-size: 3vw; cursor: pointer; | |
| } | |
| .popup-overlay { | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; | |
| z-index: 999; | |
| } | |
| .popup-content { | |
| background: white; padding: 20px; border-radius: 10px; text-align: center; width: 400px; position: relative; | |
| } | |
| .close-btn { | |
| position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px; color: #888; | |
| } | |
| .drag-box { | |
| border: 2px dashed #ccc; padding: 20px; border-radius: 10px; | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; | |
| height: 200px; position: relative; | |
| } | |
| .drag-box img { max-height: 50px; margin-bottom: 10px; } | |
| .hidden { display: none; } | |
| .loading-container { | |
| position: relative; opacity: 0.5; | |
| } | |
| .loading-container::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; left: 50%; | |
| width: 50px; height: 50px; | |
| background: url('/static/spinner.gif') no-repeat center center; | |
| background-size: contain; | |
| transform: translate(-50%, -50%); | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top"> | |
| <img src="/static/1.png" alt="Top Image"> | |
| </div> | |
| <div class="row"> | |
| <div class="left"> | |
| <img src="/static/2.png" alt="Left Image"> | |
| </div> | |
| <div class="right"> | |
| <img src="/static/3.png" alt="Right Top Image"> | |
| <div class="button-container"> | |
| <button class="try-on-button" onclick="showPopup()">Try On!</button> | |
| </div> | |
| <img src="/static/4.png" alt="Right Bottom Image"> | |
| </div> | |
| </div> | |
| <!-- Popup --> | |
| <div class="popup-overlay" id="popup"> | |
| <div class="popup-content"> | |
| <span class="close-btn" onclick="closePopup()">✕</span> | |
| <h2>Virtual Fitting</h2> | |
| <div id="drag-container"> | |
| <div class="drag-box" id="drop-area"> | |
| <img src="/static/icon.png" alt="Icon"> | |
| <p>Drag your image file here or click to select</p> | |
| <input type="file" id="file-input" style="display: none;"> | |
| </div> | |
| </div> | |
| <div id="uploaded-image" style="margin-top: 10px;"></div> | |
| </div> | |
| </div> | |
| <script> | |
| const popup = document.getElementById('popup'); | |
| const dragContainer = document.getElementById('drag-container'); | |
| const uploadedImageContainer = document.getElementById('uploaded-image'); | |
| function showPopup() { | |
| popup.style.display = 'flex'; | |
| resetDragAndDrop(); | |
| } | |
| function closePopup() { | |
| popup.style.display = 'none'; | |
| uploadedImageContainer.innerHTML = ""; | |
| dragContainer.classList.remove('hidden'); | |
| } | |
| function resetDragAndDrop() { | |
| // Reset the drag-and-drop container | |
| dragContainer.innerHTML = ` | |
| <div class="drag-box" id="drop-area"> | |
| <img src="/static/icon.png" alt="Icon"> | |
| <p>Drag your image file here or click to select</p> | |
| <input type="file" id="file-input" style="display: none;"> | |
| </div> | |
| `; | |
| attachEvents(); | |
| } | |
| function attachEvents() { | |
| const dropArea = document.getElementById('drop-area'); | |
| const fileInput = dropArea.querySelector('#file-input'); | |
| dropArea.addEventListener('click', () => fileInput.click()); | |
| dropArea.addEventListener('dragover', (e) => e.preventDefault()); | |
| dropArea.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadImage(e.dataTransfer.files[0]); | |
| }); | |
| fileInput.addEventListener('change', (e) => uploadImage(e.target.files[0])); | |
| } | |
| function uploadImage(file) { | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| dragContainer.classList.add('hidden'); | |
| uploadedImageContainer.innerHTML = ` | |
| <div class="loading-container"> | |
| <img src="${URL.createObjectURL(file)}" style="width: 100%;"> | |
| </div> | |
| `; | |
| fetch("/upload", { method: "POST", body: formData }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.processed_image) { | |
| uploadedImageContainer.innerHTML = ` | |
| <img src="${data.processed_image}" style="width: 100%;"> | |
| `; | |
| } | |
| }); | |
| } | |
| // Initialize events on page load | |
| attachEvents(); | |
| </script> | |
| </body> | |
| </html> | |