Upload 43 files

.gitattributes

@@ -33,3 +33,32 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-1.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-10.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-2.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-3.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-4.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-5.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-6.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-7.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-8.png filter=lfs diff=lfs merge=lfs -text
+static/gaultier/gaultier-garment-9.png filter=lfs diff=lfs merge=lfs -text
+static/mugler/mugler-garment-1.png filter=lfs diff=lfs merge=lfs -text
+static/mugler/mugler-garment-2.png filter=lfs diff=lfs merge=lfs -text
+static/mugler/mugler-garment-3.png filter=lfs diff=lfs merge=lfs -text
+static/mugler/mugler-garment-4.png filter=lfs diff=lfs merge=lfs -text
+static/mugler/mugler-garment-5.png filter=lfs diff=lfs merge=lfs -text
+static/pose0.png filter=lfs diff=lfs merge=lfs -text
+static/pose1.png filter=lfs diff=lfs merge=lfs -text
+static/pose2.png filter=lfs diff=lfs merge=lfs -text
+static/users/gigi/gigi.png filter=lfs diff=lfs merge=lfs -text
+static/users/gigi/vto_output0.png filter=lfs diff=lfs merge=lfs -text
+static/users/gigi/vto_output1.png filter=lfs diff=lfs merge=lfs -text
+static/users/gigi/vto_output2.png filter=lfs diff=lfs merge=lfs -text
+static/users/gigi/vto_output3.png filter=lfs diff=lfs merge=lfs -text
+static/users/tim/tim.png filter=lfs diff=lfs merge=lfs -text
+static/users/tim/vto_output0.png filter=lfs diff=lfs merge=lfs -text
+static/users/tim/vto_output1.png filter=lfs diff=lfs merge=lfs -text
+static/users/tim/vto_output2.png filter=lfs diff=lfs merge=lfs -text
+static/users/tim/vto_output3.png filter=lfs diff=lfs merge=lfs -text
+title/title.psb filter=lfs diff=lfs merge=lfs -text

requirements.txt

@@ -0,0 +1,7 @@
+requests
+pillow
+rembg[cpu,cli]
+flask
+transformers
+torch
+sendgrid

static/style.css

@@ -0,0 +1,195 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 20px;
+}
+
+.title-img {
+    width: auto;
+    height: 30vh;
+}
+
+.title-img2 {
+    width: auto;
+    height: 30vh;
+}
+
+.upload-container {
+    border: 2px dashed #ccc;
+    padding: 20px;
+    margin: 20px auto;
+    width: 80%;
+    max-width: 400px;
+    cursor: pointer;
+    text-align: center;
+    position: relative;
+    min-height: 250px; /* Increased height */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload-container.dragging {
+    border-color: #007bff;
+    background-color: rgba(0, 123, 255, 0.1);
+}
+
+.upload-icon {
+    width: 60px;
+    height: 60px;
+    display: block;
+    margin: 10px auto;
+}
+
+.upload-text {
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 200px;
+    display: none;
+    border-radius: 10px;
+}
+
+.remove-image {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: transparent;
+    color: black;
+    border: none;
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: bold;
+    width: 24px;
+    height: 24px;
+    text-align: center;
+    line-height: 22px;
+    border-radius: 50%;
+}
+
+/* Removed hover effect */
+.remove-image:hover {
+    background: transparent;
+}
+
+input[type="email"] {
+    width: 80%;
+    max-width: 400px;
+    padding: 10px;
+    margin: 10px auto;
+    display: block;
+}
+
+button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+
+
+.hidden {
+    display: none;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.fade {
+    transition: opacity 0.5s ease-in-out;
+}
+
+#confirmation-message {
+    font-size: 16px;
+    margin-top: 60px;
+    color: #333;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+}
+
+
+.image-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px; /* Increased spacing between images */
+    margin-top: 20px;
+}
+
+.image-item {
+    text-align: left;  /* Align text to the left */
+    max-width: 280px;  /* Increase max width of images */
+    flex: 1 1 calc(25% - 15px); /* 4 items per row on desktop */
+}
+
+.image-item img {
+    width: 100%;  /* Make images fill their container */
+    max-width: 280px;  /* Increase max size */
+    height: auto;
+    border-radius: 10px;
+}
+
+/* Adjust text styling under images */
+.image-item p {
+    font-size: 16px;  /* Small text */
+    font-weight: 100;  /* Thinner font */
+    color: #444;  /* Slightly lighter color */
+    margin-top: 5px;
+    text-align: left;  /* Ensure text is left-aligned */
+    line-height: 1.2;
+}
+
+.examples-title {
+    font-family: "Bodoni", serif;
+    font-size: 24px;
+    text-align: center;
+    margin-top: 40px;
+    font-weight: 100;
+}
+
+.examples-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    margin-bottom: 10%;
+}
+
+.example-image {
+    width: 200px;
+    height: auto;
+    border-radius: 10px;
+    transition: transform 0.3s ease-in-out;
+}
+
+.example-image:hover {
+    transform: scale(1.05);
+}
+
+
+/* Mobile view: Ensure 2 columns */
+@media (max-width: 768px) {
+    .image-item {
+        flex: 1 1 calc(50% - 15px); /* 2 items per row on mobile */
+    }
+    .image-item p {
+        font-size: 12px;
+    }
+    .title-img2 {
+    height: 10vh;
+}
+}
+
+

static/users/gigi/index.html

@@ -0,0 +1,43 @@
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Your Generated Images</title>
+        <link rel="stylesheet" href="/static/style.css">
+    </head>
+    <body>
+
+        <img id="title-image" class="title-img2" src="/static/title3.png" alt="Title Image">
+
+        <div class="image-gallery">
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/women/product/mugler/black-asymmetrical-double-layered-midi-dress/17149611" target="_blank">
+                    <img src="/static/users/gigi/vto_output0.png" alt="Generated Image 1">
+                </a>
+                <p>MUGLER<br>Black Asymmetrical Double-Layered Midi Dress<br>$1680</p>
+            </div>
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/women/product/mugler/multicolor-floral-print-pierced-ruched-midi-dress/17149791" target="_blank">
+                    <img src="/static/users/gigi/vto_output1.png" alt="Generated Image 2">
+                </a>
+                <p>MUGLER<br>Multicolor Floral Print Pierced Ruched Midi Dress<br>$1230</p>
+            </div>
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/women/product/mugler/blue-cutout-jeans/14374111" target="_blank">
+                    <img src="/static/users/gigi/vto_output2.png" alt="Generated Image 3">
+                </a>
+                <p>MUGLER<br>Blue Cutout Jeans<br>$950</p>
+            </div>
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/women/product/mugler/white-star-halter-midi-dress/17149771" target="_blank">
+                    <img src="/static/users/gigi/vto_output3.png" alt="Generated Image 4">
+                </a>
+                <p>MUGLER<br>White Star Halter Midi Dress<br>$735</p>
+            </div>
+        </div>
+
+    </body>
+    </html>
+    

static/users/tim/index.html

@@ -0,0 +1,38 @@
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Your Generated Images</title>
+        <link rel="stylesheet" href="/static/style.css">
+    </head>
+    <body>
+        <img id="title-image" class="title-img2" src="/static/title3.png" alt="Title Image">
+        <div class="image-gallery">
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/men/product/jean-paul-gaultier/black-pinstripe-wool-cropped-tailored-blazer/17210041" target="_blank">
+                    <img src="/static/users/tim/vto_output0.png" alt="Generated Image 1">
+                </a>
+                <p>JEAN PAUL GAULTIER<br>Black Pinstripe Wool Cropped Tailored Blazer<br>$1615</p>
+            </div>
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/men/product/jean-paul-gaultier/khaki-shayne-oliver-edition-the-wrap-trousers/16046831" target="_blank">
+                    <img src="/static/users/tim/vto_output1.png" alt="Generated Image 2">
+                </a>
+                <p>JEAN PAUL GAULTIER<br>Khaki Shayne Oliver Edition 'The Wrap' Trousers<br>$1080</p>
+            </div>
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/men/product/jean-paul-gaultier/beige-the-tattoo-mariniere-t-shirt/17676171" target="_blank">
+                    <img src="/static/users/tim/vto_output2.png" alt="Generated Image 3">
+                </a>
+                <p>JEAN PAUL GAULTIER<br>Beige 'The Tattoo Marinière' T-shirt<br>$340</p>
+            </div>
+            <div class="image-item">
+                <a href="https://www.ssense.com/en-us/men/product/jean-paul-gaultier/beige-the-deconstructed-trench-coat/17209201" target="_blank">
+                    <img src="/static/users/tim/vto_output3.png" alt="Generated Image 4">
+                </a>
+                <p>JEAN PAUL GAULTIER<br>Beige 'The Deconstructed' Trench Coat<br>$2730</p>
+            </div>
+        </div>
+    </body>
+    </html>

templates/index.html

@@ -0,0 +1,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">&times;</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/vto-pose-dev?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/vto-pose-dev?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>

title/title.psb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9e7ba7336303f65325678fd18ee0838bdceb833784053eb20a9a0d569cc94621
+size 1019375