moving commit

.gitattributes

@@ -0,0 +1,4 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+.env*

README.md

@@ -0,0 +1,13 @@
+---
+title: LookSwap
+emoji: 🧥
+colorFrom: gray
+colorTo: gray
+sdk: gradio
+sdk_version: 4.37.2
+python_version: 3.10.14
+app_file: app.py
+pinned: true
+license: cc-by-nc-4.0
+short_description: Swap outfits from person to person
+---

app.py

@@ -0,0 +1,247 @@
+import asyncio
+import base64
+import logging
+import os
+import time
+
+import cv2
+import gradio as gr
+import httpx
+import numpy as np
+import requests
+from gradio.themes.utils import sizes
+
+# LOGGING
+logger = logging.getLogger("LookSwap")
+logger.setLevel(logging.INFO)
+handler = logging.StreamHandler()
+formatter = logging.Formatter("%(asctime)s - %(levelname)s - %(message)s", datefmt="%Y-%m-%d %H:%M:%S")
+handler.setFormatter(formatter)
+logger.addHandler(handler)
+
+# IMAGE ASSETS
+ASSETS_DIR = os.path.join(os.path.dirname(__file__), "assets")
+WATERMARK = cv2.imread(os.path.join(ASSETS_DIR, "watermark.png"), cv2.IMREAD_UNCHANGED)
+WATERMARK = cv2.resize(WATERMARK, (0, 0), fx=0.5, fy=0.5, interpolation=cv2.INTER_AREA)
+NSFW = os.path.join(ASSETS_DIR, "nsfw.webp")
+
+# API CONFIG
+FASHN_API_URL = os.environ.get("FASHN_ENPOINT_URL")
+FASHN_API_KEY = os.environ.get("FASHN_API_KEY")
+assert FASHN_API_URL, "Please set the FASHN_ENPOINT_URL environment variable"
+assert FASHN_API_KEY, "Please set the FASHN_API_KEY environment variable"
+
+# ----------------- HELPER FUNCTIONS ----------------- #
+
+
+def add_watermark(image: np.array, watermark: np.array, offset: int = 5) -> np.array:
+    """Adds a watermark to the image at the bottom right corner with a given offset."""
+    image_height, image_width = image.shape[:2]
+    watermark_height, watermark_width = watermark.shape[:2]
+
+    # Calculate the position of the watermark in the bottom right corner, with a slight offset
+    x_offset = image_width - watermark_width - offset
+    y_offset = image_height - watermark_height - offset
+
+    # Separate the watermark into its color and alpha channels
+    overlay_color = watermark[:, :, :3]
+    overlay_mask = watermark[:, :, 3]
+
+    # Blend the watermark with the image
+    for c in range(0, 3):
+        image[y_offset : y_offset + watermark_height, x_offset : x_offset + watermark_width, c] = overlay_color[
+            :, :, c
+        ] * (overlay_mask / 255.0) + image[
+            y_offset : y_offset + watermark_height, x_offset : x_offset + watermark_width, c
+        ] * (
+            1.0 - overlay_mask / 255.0
+        )
+
+    return image
+
+
+def opencv_load_image_from_http(url: str) -> np.ndarray:
+    """Loads an image from a given URL using HTTP GET."""
+    with requests.get(url) as response:
+        response.raise_for_status()
+        image_data = np.frombuffer(response.content, np.uint8)
+        image = cv2.imdecode(image_data, cv2.IMREAD_COLOR)
+        return image
+
+
+def resize_image(img: np.array, short_axis_target: int = 512) -> np.array:
+    """Resizes an image to keep the aspect ratio with the shortest axis not exceeding a target size."""
+    height, width = img.shape[:2]
+    scale_factor = short_axis_target / min(height, width)
+    resized_img = cv2.resize(img, (0, 0), fx=scale_factor, fy=scale_factor, interpolation=cv2.INTER_AREA)
+    return resized_img
+
+
+def encode_img_to_base64(img: np.array) -> str:
+    """Encodes an image as a JPEG in Base64 format."""
+    img = cv2.imencode(".jpg", img)[1].tobytes()
+    img = base64.b64encode(img).decode("utf-8")
+    img = f"data:image/jpeg;base64,{img}"
+    return img
+
+
+def parse_checkboxes(checkboxes):
+    checkboxes = [checkbox.lower().replace(" ", "_") for checkbox in checkboxes]
+    checkboxes = {checkbox: True for checkbox in checkboxes}
+    return checkboxes
+
+
+def verify_aspect_ratio(img: np.array, prefix: str = "Model"):
+    height, width = img.shape[:2]
+    aspect_ratio = width / height
+    if aspect_ratio < 0.5:
+        raise gr.Error(f"{prefix} image W:H aspect ratio is too low. Use 2:3 or 3:4 for best results.")
+    elif aspect_ratio > 0.8:
+        raise gr.Error(f"{prefix} image W:H aspect ratio is too high. Use 2:3 or 3:4 for best results.")
+
+
+# ----------------- CORE FUNCTION ----------------- #
+
+CATEGORY_API_MAPPING = {"Top": "tops", "Bottom": "bottoms", "Full-body": "one-pieces"}
+
+
+async def get_tryon_result(model_image, garment_image, category, model_checkboxes, request: gr.Request):
+    logger.info("Starting new try-on request...")
+
+    if request:
+        client_ip = request.headers.get("x-forwarded-for") or request.client.host
+
+    # verify aspect ratio of the input images
+    verify_aspect_ratio(model_image, "Model")
+    # verify_aspect_ratio(garment_image, "Garment")
+
+    # preprocessing: convert to RGB, resize, encode to base64
+    model_image, garment_image = map(lambda x: cv2.cvtColor(x, cv2.COLOR_RGB2BGR), [model_image, garment_image])
+    model_image, garment_image = map(resize_image, [model_image, garment_image])
+    model_image, garment_image = map(encode_img_to_base64, [model_image, garment_image])
+    # prepare data for API request
+    category = CATEGORY_API_MAPPING[category]
+    data = {
+        "model_image": model_image,
+        "garment_image": garment_image,
+        "category": category,
+        **parse_checkboxes(model_checkboxes),
+    }
+    headers = {"Content-Type": "application/json", "Authorization": f"Bearer {FASHN_API_KEY}"}
+
+    # make API request
+    start_time = time.time()
+    async with httpx.AsyncClient() as client:
+        response = await client.post(f"{FASHN_API_URL}/run", headers=headers, json=data, timeout=httpx.Timeout(300.0))
+        if response.is_error:
+            raise gr.Error(f"API request failed: {response.text}")
+
+        pred_id = response.json().get("id")
+        logger.info(f"Prediction ID: {pred_id}")
+
+        # poll the status of the prediction
+        while True:
+            current_time = time.time()
+            elapsed_time = current_time - start_time
+            if elapsed_time > 180:  # 3 minutes
+                raise gr.Error("Maximum polling time exceeded.")
+
+            status_response = await client.get(
+                f"{FASHN_API_URL}/status/{pred_id}", headers=headers, timeout=httpx.Timeout(10)
+            )
+            if status_response.is_error:
+                raise Exception(f"Status polling failed: {status_response.text}")
+
+            status_data = status_response.json()
+            if status_data["status"] not in ["starting", "in_queue", "processing", "completed"]:
+                error = status_data.get("error")
+                error_msg = f"Prediction failed: {error}"
+                if "NSFW" in error:
+                    if request:
+                        gr.Warning(f"NSFW attempt IP address: {client_ip}")
+                    return NSFW
+                raise gr.Error(error_msg)
+
+            logger.info(f"Prediction status: {status_data['status']}")
+            if status_data["status"] == "completed":
+                break
+
+            await asyncio.sleep(3)
+
+        # get the result image and add a watermark
+        result_img = opencv_load_image_from_http(status_data["output"][0])
+        result_img = cv2.cvtColor(result_img, cv2.COLOR_BGR2RGB)
+        result_img = add_watermark(result_img, WATERMARK)
+        return result_img
+
+
+# ----------------- GRADIO UI ----------------- #
+
+
+with open("banner.html", "r") as file:
+    banner = file.read()
+with open("tips.html", "r") as file:
+    tips = file.read()
+with open("footer.html", "r") as file:
+    footer = file.read()
+with open("docs.html", "r") as file:
+    docs = file.read()
+
+CUSTOM_CSS = """
+.image-container  img {
+    max-width: 192px;
+    max-height: 288px;
+    margin: 0 auto;
+    border-radius: 0px;
+.gradio-container {background-color: #fafafa}
+"""
+
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Monochrome(radius_size=sizes.radius_md)) as demo:
+    gr.HTML(banner)
+    gr.HTML(tips)
+    with gr.Row():
+        with gr.Column():
+            model_image = gr.Image(label="Model Image", type="numpy", format="png")
+            # create a checkbox to toggle "remove accessories"
+            model_checkboxes = gr.CheckboxGroup(
+                choices=["Remove Accessories", "Restore Hands", "Cover Feet"], label="Additional Controls", type="value"
+            )
+            example_model = gr.Examples(
+                inputs=model_image,
+                examples_per_page=10,
+                examples=[
+                    os.path.join(ASSETS_DIR, "models", img) for img in os.listdir(os.path.join(ASSETS_DIR, "models"))
+                ],
+            )
+        with gr.Column():
+            garment_image = gr.Image(label="Garment Image", type="numpy", format="png")
+            category = gr.Radio(choices=["Top", "Bottom", "Full-body"], label="Select Category", value="Top")
+
+            example_garment = gr.Examples(
+                inputs=garment_image,
+                examples_per_page=10,
+                examples=[
+                    os.path.join(ASSETS_DIR, "garments", img)
+                    for img in os.listdir(os.path.join(ASSETS_DIR, "garments"))
+                ],
+            )
+
+        with gr.Column():
+            result_image = gr.Image(label="Try-on Result", format="png")
+            run_button = gr.Button("Run")
+
+            gr.HTML(docs)
+
+    run_button.click(
+        fn=get_tryon_result,
+        inputs=[model_image, garment_image, category, model_checkboxes],
+        outputs=[result_image],
+    )
+
+    gr.HTML(footer)
+
+
+if __name__ == "__main__":
+    ip = requests.get("http://ifconfig.me/ip", timeout=1).text.strip()
+    logger.info(f"VM IP address: {ip}")
+    demo.launch(share=False)

banner.html

@@ -0,0 +1,71 @@
+<div style="
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    background: linear-gradient(45deg, #1a1a1a 0%, #333333 100%);
+      padding: 24px;
+      gap: 24px;
+      border-radius: 8px;
+    ">
+  <div style="display: flex; gap: 8px;">
+    <img src="https://cilsrdpvqtgutxprdofn.supabase.co/storage/v1/object/public/assets/logo-enhanced_60x60.png"
+      alt="FASHN AI Logo" />
+
+    <h1 style="
+  font-size: 48px;
+  color: #fafafa;
+  margin: 0;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
+">
+      FASHN AI: LookSwap
+    </h1>
+    <p style="font-size: 14px;  margin: 0; color: #fafafa;
+     ">v0.6</p>
+
+
+  </div>
+
+  <p style="
+          margin: 0;
+          line-height: 1.6rem;
+          font-size: 16px;
+          color: #fafafa;
+          opacity: 0.8;
+        ">
+    Welcome to the official FASHN AI demo! Using our dashboard or API, you can style any
+    model with either tops, bottoms or full outfits. <br />Our algorithm specializes in
+    swapping clothes from one person to another.
+  </p>
+
+  <div style="
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      ">
+    <a href="https://fashn.ai"><img
+        src="https://custom-icon-badges.demolab.com/badge/FASHN_AI-333333?style=for-the-badge&logo=fashn"
+        alt="FASHN AI" /></a>
+    <a href="https://github.com/fashn-AI"><img
+        src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white"
+        alt="Github" /></a>
+    <a href="https://www.linkedin.com/company/fashn">
+      <img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white"
+        alt="LinkedIn" />
+    </a>
+
+    <a href="https://x.com/fashn_ai"><img
+        src="https://img.shields.io/badge/@fashn_ai-%23000000.svg?style=for-the-badge&logo=X&logoColor=white"
+        alt="X" /></a>
+    <a href="https://www.instagram.com/fashn.ai/"><img
+        src="https://img.shields.io/badge/Fashn.ai-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"
+        alt="Instagram" /></a>
+    <a href="https://discord.gg/zfqzkGBxE5">
+      <img src="https://img.shields.io/badge/fashn_ai-%235865F2.svg?style=for-the-badge&logo=discord&logoColor=white"
+        alt="Discord" />
+    </a>
+  </div>
+</div>

docs.html

@@ -0,0 +1,27 @@
+<div style="
+    padding: 12px;
+    border: 1px solid #333333;
+    border-radius: 8px;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+">
+  <ul style="
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        justify-content: left;
+        align-items: left;
+        padding: 0;
+        list-style: none;
+        font-size: 14px;
+    ">
+    <li><strong>Category</strong> - Determines which part of the oufit to take from the garment image.</li>
+    <li><strong>Remove Accessories</strong> - Strips items such as belts, neckties, and handbags from the model.</li>
+    <li><strong>Restore Hands</strong> - Preserves the model's hands better, but may adjust sleeve length.
+    </li>
+    <li><strong>Cover Feet</strong> - Use when garment should cover the feet (e.g., mermaid dress) or to swap out the
+      model’s shoes.</li>
+  </ul>
+</div>

footer.html

@@ -0,0 +1,54 @@
+<div style="
+      display: flex;
+      flex-direction: column;
+      background: linear-gradient(45deg, #1a1a1a 0%, #333333 100%);
+      padding: 24px;
+      gap: 24px;
+      border-radius: 8px;
+      align-items: center;
+    ">
+  <div style="display: flex; justify-content: center; gap: 8px;">
+    <h1 style="
+      font-size: 24px;
+      color: #fafafa;
+      margin: 0;
+      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+        'Lucida Sans', Arial, sans-serif;
+    ">
+      FAQ
+    </h1>
+  </div>
+  <div style="max-width: 790px; text-align: center; display: flex; flex-direction: column; gap: 12px;">
+    <div>
+      <div style="text-align: center;">
+        <strong style="color: #fafafa; font-size: 16px;">What is this model?</strong>
+      </div>
+      <p style="
+      /* margin: 0; */
+      line-height: 1.6rem;
+      font-size: 16px;
+      color: #fafafa;
+      opacity: 0.8;
+    ">
+        LookSwap is a custom 1.2B parameter diffusion architecture, designed specifically for the task of transferring
+        clothes between images. This model was trained on an internal dataset of 2M images for about 2000 A100 GPU hours
+        (sorry 🌎).
+      </p>
+    </div>
+
+    <div>
+      <div style="text-align: center;">
+        <strong style="color: #fafafa; font-size: 16px;">Can you support higher resolutions?</strong>
+      </div>
+      <p style="
+          /* margin: 0; */
+          line-height: 1.6rem;
+          font-size: 16px;
+          color: #fafafa;
+          opacity: 0.8;
+        ">
+        Yes. Image generation at 384x576 resolution is available on the FASHN platform.
+      </p>
+    </div>
+  </div>
+</div>

requirements.txt

@@ -0,0 +1,4 @@
+gradio
+numpy
+requests
+opencv-python

tips.html

@@ -0,0 +1,28 @@
+<div style="
+    padding: 12px;
+    border: 1px solid #333333;
+    border-radius: 8px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  ">
+  <b style="font-size: 18px;"> ❣️ Tips for successful try-on generations</b>
+
+  <ul style="
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      li {
+        margin: 0;
+      }
+    ">
+    <li>2:3 aspect ratio</li>
+    <li>One person per image </li>
+    <li>Focus/Zoom on subject</li>
+    <li>Similar poses between images</li>
+    <li>Simple backgrounds</li>
+    <li>High-quality images</li>
+    <li>Take inspiration from the examples below</li>
+  </ul>
+</div>