Upload 10 files · tonyassi/domi-try-on at 968b6f5

	@@ -0,0 +1,157 @@

+<!DOCTYPE html>
+<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: 15px 40px; font-size: 24px; 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()">&#10005;</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>

@@ -1,10 +1,10 @@
 ---
-title: Domi Try On
-emoji: 💻
-colorFrom: yellow
-colorTo: yellow
 sdk: gradio
-sdk_version: 5.9.1
 app_file: app.py
 pinned: false
 ---

 ---
+title: Try On Dev
+emoji: 📉
+colorFrom: gray
+colorTo: purple
 sdk: gradio
+sdk_version: 5.9.0
 app_file: app.py
 pinned: false
 ---

	@@ -0,0 +1,2 @@


1	+ flask
2	+ imagekitio