Initial commit

.gitattributes

@@ -33,3 +33,10 @@ 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
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.bmp filter=lfs diff=lfs merge=lfs -text
+*.tiff filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,13 +1,46 @@
 ---
-title: Voost
-emoji: 🐠
-colorFrom: pink
-colorTo: indigo
+title: Voost - Virtual Try-On/Off
+emoji: 👕
+colorFrom: yellow
+colorTo: yellow
 sdk: gradio
 sdk_version: 5.42.0
 app_file: app.py
 pinned: false
 license: cc-by-nc-sa-4.0
+short_description: Virtual Try-On&Off model from NXN Labs (https://nxn.ai/)
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Virtual Try-On Demo
+
+This demo utilizes the Virtual Try-On and Try-Off models introduced in [Voost](https://arxiv.org/abs/2508.04825).
+
+## Overview
+
+This application provides a live demo, allowing users to virtually try on and try off clothing items using advanced AI models.
+
+## Commercial Use
+
+If you are planning to use this for commercial purposes or need more advanced commercial-level services, please contact us through our website: [https://nxn.ai/contact](https://nxn.ai/contact)
+
+## Citation
+
+If you use this work in your research, please cite:
+```bibtex
+@article{lee2025voost,
+  author  = {Seungyong Lee and Jeong-gi Kwak},
+  title   = {Voost: A Unified and Scalable Diffusion Transformer for Bidirectional Virtual Try-On and Try-Off},
+  journal = {arXiv preprint arXiv:2508.04825},
+  year    = {2025}
+}
+```
+
+## Contact
+
+For commercial inquiries and advanced services, visit: [https://nxn.ai](https://nxn.ai)
+
+---
+Most models and clothing images used are from internet and public datasets (VITON, DressCode).
+All images and brands are the property of their respective owners.
+
+This demo is licensed under a Creative [Commons Attribution-ShareAlike 4.0 International License.](http://creativecommons.org/licenses/by-sa/4.0/)

app.py

@@ -0,0 +1,381 @@
+from io import BytesIO
+import gradio as gr
+from PIL import Image
+import httpx
+from gradio_toggle import Toggle
+from pathlib import Path
+import numpy as np
+import os
+
+api_server = os.environ["NXN_API_SERVER"]
+tryon_endpoint = os.environ["NXN_TRYON_ENDPOINT"]
+tryoff_endpoint = os.environ["NXN_TRYOFF_ENDPOINT"]
+
+MAX_DIM = 2048
+MIN_DIM = 500
+
+def encode_bytes(image: Image.Image, format="PNG"):
+    buffered = BytesIO()
+    image.save(buffered, format=format)
+    buffered.seek(0)
+    return buffered
+
+# str to int
+def garment_type_to_int(garment_type: str):
+    garment_dict = {"Upper": 0, "Lower": 1, "Full": 2}
+    if garment_dict[garment_type] is None:
+        raise gr.Error("Unexpected garment condition error")
+    else:
+        return garment_dict[garment_type]
+
+def extract_image_from_input(image_data):
+    if isinstance(image_data, dict) and "background" in image_data:
+        return image_data["background"].convert("RGB")
+    else:
+        return image_data.convert("RGB")
+
+def resize_image_if_needed(image: Image.Image):
+    if image is None:
+        return None, False
+    
+    original_width, original_height = image.size
+    
+    if original_width > MAX_DIM or original_height > MAX_DIM:
+        gr.Warning("A provided image is too large and has been resized")
+        scale_factor = min(MAX_DIM / original_width, MAX_DIM / original_height)
+        new_width = int(original_width * scale_factor)
+        new_height = int(original_height * scale_factor)
+        return image.resize((new_width, new_height), Image.Resampling.LANCZOS), True
+    elif original_width < MIN_DIM or original_height < MIN_DIM:
+        gr.Warning("A provided image is too small and has been resized")
+        scale_factor = max(MIN_DIM / original_width, MIN_DIM / original_height)
+        new_width = int(original_width * scale_factor)
+        new_height = int(original_height * scale_factor)
+        return image.resize((new_width, new_height), Image.Resampling.LANCZOS), True
+    
+    return image, False
+
+
+# API Helpers
+async def _call_api(url: str, files: dict, data: dict):
+    try:
+        async with httpx.AsyncClient(timeout=3600) as client:
+            response = await client.post(url, data=data, files=files)
+            response.raise_for_status()
+            return Image.open(BytesIO(response.content))
+    except httpx.RequestError as e:
+        print(f"API request failed: {e}")
+        raise gr.Error("Network error: Could not connect to the model API. Please try again later.")
+    except Exception as e:
+        print(f"An unexpected error occurred: {e}")
+        raise
+        raise gr.Error("An unexpected error occurred. The model may have failed to process the images.")
+
+
+async def call_tryon_api(model_image: Image.Image, garment_image: Image.Image, garment_type: int, mask: Image.Image=None, seed: int=1234):
+    files = [ 
+        ("images", ("target.png", encode_bytes(model_image), "image/png")), 
+        ("images", ("garment.png", encode_bytes(garment_image), "image/png")) 
+    ]
+    if mask:
+        files.append(("images", ("mask.png", encode_bytes(mask, format="PNG"), "image/png")))
+    data = {'garment_type': garment_type, 'seed': seed}
+    return await _call_api(f"{api_server}/{tryon_endpoint}", files=files, data=data)
+
+async def call_tryoff_api(model_image: Image.Image, garment_type: int, seed: int=1234):
+    files = [ ("images", ("target.png", encode_bytes(model_image), "image/png")) ]
+    data = {'garment_type': garment_type, 'seed': seed}
+    return await _call_api(f"{api_server}/{tryoff_endpoint}", files=files, data=data)
+
+async def api_helper(model_image_dict: dict, garment_image: Image.Image, garment_type: str, is_tryoff: bool, seed: int):
+    if model_image_dict is None:
+        raise gr.Error("Missing model image")
+    elif not is_tryoff and garment_image is None:
+        raise gr.Error("Missing garment image for Try-On")
+
+    # Because Gradio ImageEditor can return a dict
+    model_image = extract_image_from_input(model_image_dict)
+    model_image, model_resized = resize_image_if_needed(model_image)
+
+    garment_image, _ = resize_image_if_needed(garment_image)
+    
+    garment_type_int = garment_type_to_int(garment_type)
+
+    if is_tryoff:
+        return await call_tryoff_api(model_image, garment_type_int, seed)
+    else:
+        mask_image = None
+        if isinstance(model_image_dict, dict) and model_image_dict.get("layers"):
+            mask = model_image_dict["layers"][0]
+            mask_array = np.array(mask)
+            if not np.all(mask_array < 10):
+                is_black = np.all(mask_array < 10, axis=2)
+                mask_image = Image.fromarray(((~is_black) * 255).astype(np.uint8))
+                if model_resized:
+                    mask_image = mask_image.resize(model_image.size, Image.Resampling.NEAREST)
+            else:
+                gr.Info("No mask provided, using auto-generated mask")
+
+        return await call_tryon_api(model_image, garment_image, garment_type_int, mask=mask_image, seed=seed)
+
+# Event handler functions
+def handle_toggle(toggle_value):
+    """Handle toggle state changes - controls garment input visibility"""
+    toggle_label = gr.update(value=toggle_value, label="Try-Off") if toggle_value else gr.update(value=toggle_value, label="Try-On")
+    submit_btn_label = gr.update(value="Run Try-Off", elem_id="tryoff-color") if toggle_value else gr.update(value="Run Try-On", elem_id="tryon-color")
+    
+    if toggle_value:
+        # Clear the image and disable the component
+        return gr.update(value=None, elem_classes=["disabled-image"], interactive=False), toggle_label, submit_btn_label
+    else:
+        # Re-enable the component without clearing the image
+        return gr.update(elem_classes=[], interactive=True), toggle_label, submit_btn_label
+
+def set_tryon(garment_img, model_img, output_img, garment_condition):
+    garment_update, toggle_label, submit_btn_label = handle_toggle(False)
+    return garment_update, toggle_label, submit_btn_label
+
+def set_tryoff(model_img, output_img, garment_condition):
+    garment_update, toggle_label, submit_btn_label = handle_toggle(True)
+    return garment_update, toggle_label, submit_btn_label
+
+def garment_sort_key(filename):
+    if filename.startswith("upper_"):
+        return (0, filename)
+    elif filename.startswith("lower_"):
+        return (1, filename)
+    elif filename.startswith("full_"):
+        return (2, filename)
+    else:
+        return (3, filename)
+
+# Get images for examples
+images_path = os.path.join(os.path.dirname(__file__),'images')
+
+garment_list = os.listdir(os.path.join(images_path, "garments"))
+garment_list_path = [
+    os.path.join(images_path, "garments", cloth)
+    for cloth in sorted(garment_list, key=garment_sort_key)
+]
+
+people_list = os.listdir(os.path.join(images_path, "persons"))
+people_list_path = [os.path.join(images_path, "persons", human) for human in sorted(people_list)]
+
+gr.set_static_paths(paths=[Path.cwd().absolute()/"images"])
+
+# Create the Gradio interface
+with gr.Blocks(css_paths="styles.css", theme=gr.themes.Ocean(), title="Voost: Virtual Try-On/Off") as demo:
+    with gr.Row():
+        gr.HTML("""
+            <div class="header-container">
+                <div class="logo-container">
+                    <a href="https://nxn.ai/">
+                        <picture>
+                            <source media="(prefers-color-scheme: dark)" srcset="/gradio_api/file=images/dark_mode_logo.png"/>
+                            <img src='/gradio_api/file=images/nxn_logo_transparent.png' style="height: 120px; width: 150px;"/>
+                        </picture>
+                    </a>
+                </div>
+                <div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
+                    <div style="font-size: 45px; margin-bottom: 10px;">
+                        <b>Voost: Virtual Try-On/Off</b>
+                    </div>
+                    <div style="display: flex; justify-content: center; align-items: center; text-align: center;">
+                        <a href="https://arxiv.org/abs/2508.04825">
+                            <img src='https://img.shields.io/badge/arXiv-2508.04825-red?style=flat&logo=arXiv&logoColor=red' alt='arxiv'>
+                        </a> &ensp;
+
+                        <a href='https://nxnai.github.io/Voost/'>
+                            <img src='https://img.shields.io/badge/Webpage-Project-silver?style=flat&logo=&logoColor=orange' alt='webpage'>
+                        </a> &ensp;
+
+                        <a href="https://github.com/nxnai/Voost">
+                            <img src='https://img.shields.io/badge/GitHub-Repo-blue?style=flat&logo=GitHub' alt='GitHub'>
+                        </a> &ensp;
+                        
+                        <a href="https://github.com/nxnai/Voost/blob/main/LICENSE">
+                            <img src='https://img.shields.io/badge/License-CC BY--NC--SA--4.0-lightgreen?style=flat&logo=Lisence' alt='License'>
+                        </a>
+                    </div>
+                    <div style="font-size: 14px; color: #666; margin-top: 5px;">
+                        Website: <a href="https://nxn.ai" target="_blank">https://nxn.ai</a> &nbsp; &nbsp; &nbsp; Inquiries: <a href="mailto:[email protected]">[email protected]</a>
+                    </div>
+                </div>
+            </div>
+        """)
+
+    gr.Markdown("---")
+
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("<center><h4>Step 1: Select <em>Try-On</em> or <em>Try-Off</em> mode. </h4></center>")
+            input_toggle = Toggle(
+                label="Try-On",
+                value=False,
+                interactive=True,
+                elem_classes=["button-container"],
+                color="rgba(177, 162, 239, .5)",
+                elem_id="toggle-modify"
+        )
+        
+        with gr.Column(scale=1):
+            gr.Markdown("<center><h4>Step 2: Select your desired garment type.</h4></center>")
+            garment_condition = gr.Radio(
+                choices=["Upper", "Lower", "Full"],
+                value="Upper", 
+                interactive=True,
+                elem_classes=["center-item"],
+                show_label=False,
+                label="Garment Type"
+            )
+
+    with gr.Row():
+        with gr.Column(scale=1, elem_id="col-left"):
+            gr.Markdown("<center><h4>Step 3: Upload a model image. <br> (Optional) Use the draw tool to create the mask. ⬇️</h4></center>")
+            model_image = gr.ImageEditor(
+                label="Model Image",
+                type="pil",
+                height=450,
+                width=600,
+                interactive=True,
+                brush=gr.Brush(
+                    default_color=f"rgba(255, 255, 255, 0.5)",
+                    colors=["rgb(255, 255, 255)"]
+                ),
+                eraser=gr.Eraser(),
+                placeholder="Upload an image\n or\n select the draw tool on the left\n to start editing mask"
+            )
+
+            model_examples = gr.Examples(
+                examples=people_list_path,
+                inputs=[model_image],
+                label="Model Examples",
+                examples_per_page=12,
+            )
+        
+        with gr.Column(scale=1, elem_id="col-mid"):
+            gr.Markdown("<center><h4>Step 4: Upload a garment image. ⬇️ <br><br></h4></center>")
+            garment_input = gr.Image(
+                label="Garment Image",
+                type="pil",
+                height=450,
+                width=350,
+                visible=True,
+                interactive=True,
+            )
+            
+            garment_examples = gr.Examples(
+                examples=garment_list_path,
+                inputs=[garment_input],
+                label="Garment Examples",
+                examples_per_page=12
+            )
+
+        with gr.Column(scale=1, elem_id="col-right"):
+            gr.Markdown("<center><h4>Step 5: Click the button below to run the model! ⬇️ <br><br></h4></center>")
+            output_image = gr.Image(
+                format="png",
+                label="Output Image",
+                type="pil",
+                height=450,
+                width=550,
+                interactive=False,
+            )
+
+            submit_btn = gr.Button(
+                value="Run Try-On",
+                elem_id="tryon-color"
+            )
+            seed_input = gr.Slider(
+                label="Seed",
+                value=1234,
+                minimum=0,
+                maximum=2**16 - 1, # 2**32 - 1
+                step=1,
+                interactive=True,
+                elem_id="seed-input",
+            )
+    
+            gr.HTML("""
+            <div style="margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 8px; border-left: 4px solid #ffc107;">
+                <p style="margin: 0; font-size: 16px; color: #856404;">
+                    <strong>⚠️ Note:</strong> Errors may occur due to high concurrent requests or NSFW content detection. Please try again if needed.
+                </p>
+            </div>
+            """)
+
+    gr.Markdown("---")
+
+    with gr.Row():
+        tryon_examples = gr.Examples(
+            examples=[
+                ["Upper", "images/examples/tryon/persons/1.jpg", "images/examples/tryon/garments/1.jpg", "images/examples/tryon/outputs/1.webp"],
+                ["Lower", "images/examples/tryon/persons/2.jpg", "images/examples/tryon/garments/2.jpg", "images/examples/tryon/outputs/2.webp"],
+                ["Full", "images/examples/tryon/persons/3.jpg", "images/examples/tryon/garments/3.jpg", "images/examples/tryon/outputs/3.webp"],
+            ],
+            inputs=[garment_condition, model_image, garment_input, output_image],
+            fn=set_tryon,
+            outputs=[garment_input, input_toggle, submit_btn],
+            label="Try-on Examples",
+            run_on_click=True
+        )
+
+        tryoff_examples = gr.Examples(
+            examples=[
+                ["Upper", "images/examples/tryoff/persons/1.jpg", "images/examples/tryoff/outputs/1.webp"],
+                ["Lower", "images/examples/tryoff/persons/2.jpg", "images/examples/tryoff/outputs/2.webp"],
+                ["Full", "images/examples/tryoff/persons/3.jpg", "images/examples/tryoff/outputs/3.webp"],
+            ],
+            inputs=[garment_condition, model_image, output_image],
+            fn=set_tryoff,
+            outputs=[garment_input, input_toggle, submit_btn],
+            label="Try-Off Examples",
+            run_on_click=True
+        )
+
+    gr.Markdown("---")
+    
+    gr.HTML("""
+        <div class="footer-container">
+            <div class="footer-col footer-logo">
+            </div>
+            <div class="footer-col footer-main">
+                <h3>AI Studio Shaping the New Architecture of Fashion Imagery</h3>
+                <p>We’re a team of researchers from <b>Stanford</b>, <b>NYU</b>, <b>Seoul National University</b>, and <b>KAIST</b>. At <b>NXN Labs</b>, we’re developing an <b>image-to-image virtual try-on/try-off diffusion model</b>, designed to push the boundaries of digital production in the fashion industry.
+                    This demo is <b>not the full version</b> of our model - it is based on our recent research work, <a href="https://arxiv.org/abs/2508.04825">Voost</a> - but it reflects the underlying research direction.
+                    We’re headquartered in <b>San Francisco</b> and <b>Seoul</b>. If you’re a <b>brand or retailer</b> interested in using our full model API, please sign up at <a href="https://nxn.ai" target="_blank">https://nxn.ai</a> with your business name, and we’ll get back to you within 1–2 business days.
+                    For part-time or full-time research roles, contact <a href="mailto:[email protected]">[email protected]</a>.
+                </p>
+                <p>©2025 NXN Labs   ———  Copyright.</p>
+            </div>
+            <div class="footer-col footer-credits">
+                <h3>Special Thanks to NXN Labs Summer Interns:</h3>
+                <p>
+                <a href="https://www.linkedin.com/in/james-fu-74a16524b/" target="_blank">James Fu</a>,
+                <a href="https://www.linkedin.com/in/wing-lai-7a8987271/" target="_blank">Wing Lai</a>,
+                <a href="https://www.linkedin.com/in/stephen-park-53640332b/" target="_blank">Stephen Park</a>
+                <br><small>for their valuable contributions to this demo space</small>
+                </p>
+            </div>
+        </div>
+    """)
+
+    # Connect toggle to control garment input visibility
+    input_toggle.change(
+        fn=handle_toggle,
+        inputs=[input_toggle],
+        outputs=[garment_input, input_toggle, submit_btn],
+        api_name=False
+    )
+
+    submit_btn.click(
+        fn=api_helper,
+        inputs=[model_image, garment_input, garment_condition, input_toggle, seed_input],
+        outputs=[output_image],
+        concurrency_limit=7,
+        api_name=False
+    )
+
+
+if __name__ == "__main__":
+    demo.launch(allowed_paths=["/gradio_api/images/examples"], share=True)

requirements.txt

@@ -0,0 +1,4 @@
+gradio
+gradio-toggle
+Pillow
+httpx

styles.css

@@ -0,0 +1,180 @@
+.header-container {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: relative !important;
+    width: 100% !important;
+    padding: 8px 0 !important;
+}
+
+.logo-container {
+    position: absolute !important;
+    left: 3% !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+}
+
+.title-container {
+    flex: 1 !important;
+    text-align: center !important;
+}
+
+.disabled-image {
+        opacity: 0.5;
+        pointer-events: none;
+        filter: grayscale(100%);
+    }
+
+/* Hide Gradio footer */
+footer {
+    display: none !important;
+}
+
+.footer {
+    display: none !important;
+}
+
+.gradio-container .footer {
+    display: none !important;
+}
+
+.button-container {
+    display: flex;
+    align-items: center !important;
+    justify-content: center;
+    gap: 8px;
+}
+
+.center-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+
+.button-container .button {
+    margin: 0 !important;
+    padding: 0.5em 1.2em !important;
+    height: 40px !important;      
+    line-height: 40px !important; 
+    box-sizing: border-box !important;
+    vertical-align: middle !important;
+    font-size: 1rem !important;
+}
+
+.footer-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+    padding: 15px 0 !important;
+    gap: 32px;
+}
+
+.footer-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-width: 0;
+}
+
+.footer-logo {
+    flex: 1;
+    align-items: flex-start;
+    text-align: left;
+}
+
+.footer-main {
+    flex: 3; /* 다른 컬럼보다 3배 더 넓게 */
+    align-items: center;
+    text-align: center;
+}
+
+.footer-credits {
+    flex: 1;
+    align-items: flex-end;
+    text-align: right;
+}
+
+#tryoff-color {
+    background-image: linear-gradient(120deg, rgb(177, 162, 239) 0%, rgb(179, 172, 241) 20%, rgb(181, 182, 243) 30%, rgb(183, 192, 245) 40%, rgb(185, 202, 247) 50%, rgb(175, 212, 239) 60%, rgb(165, 222, 231) 70%, rgb(155, 232, 223) 80%, rgb(145, 235, 215) 90%, rgb(127, 215, 185) 100%);
+}
+
+#tryon-color {
+    background-image: linear-gradient(120deg, rgb(102, 205, 170) 0%, rgb(124, 215, 180) 15%, rgb(146, 225, 190) 30%, rgb(168, 235, 200) 45%, rgb(190, 235, 220) 60%, rgb(212, 235, 240) 75%, rgb(174, 225, 247) 90%, rgb(135, 206, 250) 100%);
+}
+
+#toggle-modify{
+    padding: 17.4px;
+}
+
+/* Model & Garment Examples images */
+.gallery-item {
+    width: 90px !important;
+    height: 120px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.gallery-item > * {
+    width: auto !important;
+    height: auto !important;
+    max-width: 90px !important;
+    max-height: 120px !important;
+    border: none !important;
+}
+
+@media only screen and (min-width: 768px){
+    #col-left {
+    margin: 0 auto;
+    max-width: 450px;
+    }
+    #col-mid {
+        margin: 0 auto;
+        max-width: 450px;
+    }
+    #col-right {
+        margin: 0 auto;
+        max-width: 450px;
+    }
+}
+
+@media only screen and (max-width: 768px){
+    #col-left {
+    margin: 0 auto;
+    max-width: 300px;
+    }
+    #col-mid {
+        margin: 0 auto;
+        max-width: 300px;
+    }
+    #col-right {
+        margin: 0 auto;
+        max-width: 300px;
+    }
+}
+
+/* Hide the Garment Type column in Examples */
+.svelte-p5q82i table th:first-child,
+.svelte-p5q82i table td:first-child {
+    display: none;
+}
+
+/* For Model Image because for some reason it is seperate */
+.container {
+    overflow: hidden;
+    width: 100% !important;
+    height: auto !important;
+    max-width: 90px !important;
+    max-height: 120px !important;
+}
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+    .toggle-label{
+        color:white;
+    }
+}