Upload 9 files

README.md

@@ -1,12 +1,14 @@
 ---
-title: Clothing Swap
-emoji: 💻
-colorFrom: blue
+title: Virtual Try On Pro
+emoji: 👗🧍🏼‍♀️
+colorFrom: pink
 colorTo: pink
 sdk: gradio
-sdk_version: 5.15.0
+sdk_version: 4.44.1
 app_file: app.py
-pinned: false
+pinned: true
+short_description: Free virtual clothing try-on and API
+disable_embedding: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,3 @@
+import os
+
+exec(os.environ.get('APP'))

db.py

@@ -0,0 +1,3 @@
+import os
+
+exec(os.environ.get('DB'))

requirements.txt

@@ -0,0 +1,3 @@
+imagekitio
+sendgrid
+flask

static/styles.css

@@ -0,0 +1,320 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 10px 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f8f8;
+    color: #333;
+    margin: 0;
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: flex-start; /* Align to the top */
+    min-height: 100vh;
+    overflow-y: auto; /* Allow scrolling when content overflows */
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center horizontally */
+    justify-content: flex-start; /* Align to the top */
+    width: 100%;
+    max-width: 1000px;
+    padding: 20px;
+    /* margin: 20px 20px; */ /* Add vertical margin */
+    box-sizing: border-box;
+}
+
+/* Title */
+.title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #333;
+    text-align: center;
+    width: 100%;
+}
+
+/* Key Input and Get Key Button */
+.key-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    /* margin-bottom: 20px; */
+}
+
+.key-input {
+    width: 300px;
+    padding: 10px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+    text-align: center;
+}
+
+.get-key-btn {
+    padding: 10px 20px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.get-key-btn:hover {
+    background-color: #218838;
+}
+
+/* Form Layout */
+form {
+    width: 100%;
+}
+
+.input-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 20px;
+    width: 100%;
+}
+
+/* Drag and Drop Box */
+.drag-drop-box {
+    border: 2px dashed #aaa;
+    border-radius: 10px;
+    width: 300px;
+    height: 400px;
+    position: relative;
+    background-color: #f9f9f9;
+    overflow: hidden;
+    cursor: pointer;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.drag-drop-box p {
+    position: absolute;
+    margin: 0;
+    color: #666;
+    pointer-events: none;
+    text-align: center;
+    width: 80%;
+}
+
+.drag-drop-box input[type="file"] {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+.drag-drop-box.drag-over {
+    background-color: #e8f4ff;
+    border-color: #007bff;
+}
+
+/* Image Preview */
+.preview {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    position: absolute;
+    border-radius: 5px;
+}
+
+/* Output Container */
+.output-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    width: 300px;
+}
+
+.output-box {
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    width: 300px;
+    height: 400px;
+    background-color: #fff;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.output-box img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 5px;
+}
+
+/* Generate Button */
+.generate-btn {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.generate-btn:hover {
+    background-color: #0056b3;
+}
+
+/* Popup Styles */
+.popup {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.popup-content {
+    background-color: #fff;
+    margin: 10% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 90%;
+    max-width: 400px;
+    text-align: center;
+    position: relative;
+    border-radius: 10px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center content horizontally */
+    justify-content: center; /* Center content vertically (optional) */
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    color: #aaa;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.popup-input {
+    width: 80%;
+    padding: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+}
+
+.submit-btn {
+    padding: 10px 20px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.submit-btn:hover {
+    background-color: #218838;
+}
+.remove-btn {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background-color: gray;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    font-size: 16px;
+    cursor: pointer;
+    line-height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.box-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;      /* Ensure full width on smaller screens */
+    max-width: 300px; /* Limit the maximum width for better proportions */
+    min-width: 250px; /* Prevent boxes from becoming too narrow */
+    margin: 10px auto; /* Center the box and add spacing */
+}
+
+
+
+.image-container {
+    display: flex;
+    flex-direction: row;  /* Force row layout on desktop */
+    justify-content: center;
+    border: 2px solid #aaa;
+  /* padding: 10px; */
+    border-radius: 10px;
+    gap: 10px;
+    max-width: 100%;
+    margin: 10px;
+}
+
+.image-container img {
+    width: 30%;  /* Each image takes 30% of the container width */
+    height: auto;
+    box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+    .image-container {
+        flex-direction: column;  /* Stack images vertically on mobile */
+        align-items: center;
+    }
+
+    .image-container img {
+        width: 100%;  /* Full width for each image on mobile */
+    }
+}
+
+
+
+
+
+/* Responsive Layout */
+@media (max-width: 768px) {
+    .input-container {
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .drag-drop-box,
+    .output-box {
+        width: 100%;
+    }
+}

templates/index.html

@@ -0,0 +1,223 @@
+<!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>
+        // Handle the popup window
+        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";
+        }
+
+        // Handle email submission
+        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));
+        }
+
+        // Handle drag-and-drop and previews
+        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 = ""; // Clear the file input
+            preview.src = ""; // Clear the preview image
+            preview.style.display = "none";
+            text.style.display = "block";
+            removeButton.style.display = "none";
+        }
+
+        // Submit form with AJAX
+        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"; // Unhide the spinner
+
+            // Get the key input value and add it to the form data
+            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"; // Hide the spinner on error
+                alert("Error: " + err);
+            })
+            .finally(() => {
+                spinner.style.display = "none"; // Ensure spinner hides after completion
+            });
+        }
+
+
+        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">
+        <!-- Title -->
+        <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>
+
+       <!-- Key Input -->
+        <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 -->
+        <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>
+
+                <!-- Input Box 2 -->
+                <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>
+
+
+                <!-- Output Container -->
+                <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>
+                        <!-- Generate Button -->
+                        <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>
+
+       <!-- Popup Window -->
+    <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>