Add examples modes (#4)

- Update app.py (4d1b1fe30d42871efcea779217e874a8348a3209)
- Run Black formatter (7f7588e48cea7178916d11b3f3634b948c3dcf60)
- Move examples dictionary to examples_db (0c6a3710cbbdf3fddb60cb030ddc9da71919f7ad)
- Replace Dataset by Examples (7c276e82d1907d65f3b154d65a49b16ec2a787ed)
- Add images to lfs (11fa7472b5fc42c51133bfaaa8ff90aa8b4ec5f3)
- Add background images examples (a90338fa31dbb02dbe498c9e16e52846579d779a)
- comment out canny, depth and deblur examples (ea4c9b35107d65bcdbc47552a8fffb9a9e237346)
- Add Subject Generation images (7adbc62c3965e7ccf9c17f80e0ebf3352a57d20f)
- Update subject generation examples (7266d6367b2f8c20adeda111c53fdb9e6ad51b6c)
- add conditional to display examples (ae4669bccf7b0534deb37b8ea39e78677006c659)
- delete example (166b0767dd98008f82fdcc5a099e556c23bc3f28)
- Reorganize tabs (61480b4ce9e6141da5c89f6871cb441327dd9552)
- Step slider default to 10 (55244f639dc92b5ae59a8c40edceb634851644d3)


Co-authored-by: fmarcano <[email protected]>

.gitattributes

@@ -33,3 +33,6 @@ 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
+*.webp filter=lfs diff=lfs merge=lfs -text

app.py

@@ -6,24 +6,20 @@ import requests
 import gradio as gr
 from PIL import Image
 
+import examples_db
+
 # Read Baseten configuration from environment variables.
 BTEN_API_KEY = os.getenv("API_KEY")
 URL = os.getenv("URL")
 
+
 def image_to_base64(image: Image.Image) -> str:
-    """Convert a PIL image to a base64-encoded PNG string."""
     with io.BytesIO() as buffer:
         image.save(buffer, format="PNG")
         return base64.b64encode(buffer.getvalue()).decode("utf-8")
 
 
 def ensure_image(img) -> Image.Image:
-    """
-    Ensure the input is a PIL Image.
-    If it's already a PIL Image, return it.
-    If it's a string (file path), open it.
-    If it's a dict with a "name" key, open the file at that path.
-    """
     if isinstance(img, Image.Image):
         return img
     elif isinstance(img, str):
@@ -44,9 +40,6 @@ def call_baseten_generate(
     lora_name: str,
     remove_bg: bool,
 ) -> Image.Image | None:
-    """
-    Call the Baseten /predict endpoint with provided parameters and return the generated image.
-    """
     image = ensure_image(image)
     b64_image = image_to_base64(image)
     payload = {
@@ -59,14 +52,10 @@ def call_baseten_generate(
         "lora_name": lora_name,
         "bgrm": remove_bg,
     }
-    if not BTEN_API_KEY:
-        headers = {"Authorization": f"Api-Key {os.getenv('API_KEY')}"}
-    else:
-        headers = {"Authorization": f"Api-Key {BTEN_API_KEY}"}
+    headers = {"Authorization": f"Api-Key {BTEN_API_KEY or os.getenv('API_KEY')}"}
     try:
         if not URL:
             raise ValueError("The URL environment variable is not set.")
-
         response = requests.post(URL, headers=headers, json=payload)
         if response.status_code == 200:
             data = response.json()
@@ -83,7 +72,7 @@ def call_baseten_generate(
         return None
 
 
-# Mode defaults for each tab.
+# ================== MODE CONFIG =====================
 
 Mode = TypedDict(
     "Mode",
@@ -99,40 +88,22 @@ Mode = TypedDict(
 )
 
 MODE_DEFAULTS: dict[str, Mode] = {
-    "Subject Generation": {
-        "model": "subject_99000_512",
-        "prompt": "A detailed portrait with soft lighting",
-        "default_strength": 1.2,
-        "default_height": 512,
-        "default_width": 512,
-        "models": [
-            "zendsd_512_146000",
-            "subject_99000_512",
-            # "zen_pers_11000",
-            "zen_26000_512",
-        ],
-        "remove_bg": True,
-    },
     "Background Generation": {
         "model": "bg_canny_58000_1024",
         "prompt": "A vibrant background with dynamic lighting and textures",
         "default_strength": 1.2,
         "default_height": 1024,
         "default_width": 1024,
-        "models": [
-            "bgwlight_15000_1024",
-            # "rmgb_12000_1024",
-            "bg_canny_58000_1024",
-            # "gen_back_3000_1024",
-            "gen_back_7000_1024",
-            # "gen_bckgnd_18000_512",
-            # "gen_bckgnd_18000_512",
-            # "loose_25000_512",
-            # "looser_23000_1024",
-            # "looser_bg_gen_21000_1280",
-            # "old_looser_46000_1024",
-            # "relight_bg_gen_31000_1024",
-        ],
+        "models": ["bgwlight_15000_1024", "bg_canny_58000_1024", "gen_back_7000_1024"],
+        "remove_bg": True,
+    },
+    "Subject Generation": {
+        "model": "subject_99000_512",
+        "prompt": "A detailed portrait with soft lighting",
+        "default_strength": 1.2,
+        "default_height": 512,
+        "default_width": 512,
+        "models": ["zendsd_512_146000", "subject_99000_512", "zen_26000_512"],
         "remove_bg": True,
     },
     "Canny": {
@@ -150,9 +121,7 @@ MODE_DEFAULTS: dict[str, Mode] = {
         "default_strength": 1.2,
         "default_height": 1024,
         "default_width": 1024,
-        "models": [
-            "depth_9800_1024",
-        ],
+        "models": ["depth_9800_1024"],
         "remove_bg": True,
     },
     "Deblurring": {
@@ -161,63 +130,42 @@ MODE_DEFAULTS: dict[str, Mode] = {
         "default_strength": 1.2,
         "default_height": 1024,
         "default_width": 1024,
-        "models": ["deblurr_1024_10000"],  # "slight_deblurr_18000",
+        "models": ["deblurr_1024_10000"],
         "remove_bg": False,
     },
 }
 
+# ================== PRESET EXAMPLES =====================
+
+
+
+
+# ================== UI =====================
 
 header = """
 <h1>🌍 ZenCtrl / FLUX</h1>
 <div align="center" style="line-height: 1;">
-    <a href="https://github.com/FotographerAI/ZenCtrl/tree/main" target="_blank" style="margin: 2px;" name="github_repo_link"><img src="https://img.shields.io/badge/GitHub-Repo-181717.svg" alt="GitHub Repo" style="display: inline-block; vertical-align: middle;"></a>
-    <a href="https://huggingface.co/spaces/fotographerai/ZenCtrl" target="_blank" name="huggingface_space_link"><img src="https://img.shields.io/badge/🤗_HuggingFace-Space-ffbd45.svg" alt="HuggingFace Space" style="display: inline-block; vertical-align: middle;"></a>
-    <a href="https://discord.com/invite/b9RuYQ3F8k" target="_blank" style="margin: 2px;" name="discord_link"><img src="https://img.shields.io/badge/Discord-Join-7289da.svg?logo=discord" alt="Discord" style="display: inline-block; vertical-align: middle;"></a>
-    <a href="https://fotographer.ai/" target="_blank" style="margin: 2px;" name="lp_link"><img src="https://img.shields.io/badge/Website-Landing_Page-blue" alt="LP" style="display: inline-block; vertical-align: middle;"></a>
-    <a href="https://x.com/FotographerAI" target="_blank" style="margin: 2px;" name="twitter_link"><img src="https://img.shields.io/twitter/follow/FotographerAI?style=social" alt="X" style="display: inline-block; vertical-align: middle;"></a>
+    <a href="https://github.com/FotographerAI/ZenCtrl/tree/main" target="_blank"><img src="https://img.shields.io/badge/GitHub-Repo-181717.svg"></a>
+    <a href="https://huggingface.co/spaces/fotographerai/ZenCtrl" target="_blank"><img src="https://img.shields.io/badge/🤗_HuggingFace-Space-ffbd45.svg"></a>
+    <a href="https://discord.com/invite/b9RuYQ3F8k" target="_blank"><img src="https://img.shields.io/badge/Discord-Join-7289da.svg?logo=discord"></a>
 </div>
 """
 
-defaults = MODE_DEFAULTS["Subject Generation"]
-
-
 with gr.Blocks(title="🌍 ZenCtrl") as demo:
     gr.HTML(header)
-    gr.Markdown(
-        """
-        # ZenCtrl Demo
-        [WIP] One Agent to Generate multi-view, diverse-scene, and task-specific high-resolution images from a single subject image—without fine-tuning.
-        We are first releasing some of the task specific weights and will release the codes soon.
-        The goal is to unify all of the visual content generation tasks with a single LLM...
-        
-        **Modes:**
-        - **Subject Generation:** Focuses on generating detailed subject portraits.
-        - **Background Generation:** Creates dynamic, vibrant backgrounds:
-            You can generate part of the image from sketch while keeping part of it as it is.
-        - **Canny:** Emphasizes strong edge detection.
-        - **Depth:** Produces images with realistic depth and perspective.
-        
-        For more details, shoot us a message on discord.
-        """
-    )
+    gr.Markdown("# ZenCtrl Demo")
+
     with gr.Tabs():
         for mode in MODE_DEFAULTS:
             with gr.Tab(mode):
                 defaults = MODE_DEFAULTS[mode]
                 gr.Markdown(f"### {mode} Mode")
-                gr.Markdown(f"**Default Model:** {defaults['model']}")
 
                 with gr.Row():
-                    with gr.Column(scale=2, min_width=370):
-                        input_image = gr.Image(
-                            label="Upload Image",
-                            type="pil",
-                            scale=3,
-                            height=370,
-                            min_width=100,
-                        )
+                    with gr.Column(scale=2):
+                        input_image = gr.Image(label="Input Image", type="pil")
                         generate_button = gr.Button("Generate")
-                        with gr.Blocks(title="Options"):
+                        with gr.Blocks():
                             model_dropdown = gr.Dropdown(
                                 label="Model",
                                 choices=defaults["models"],
@@ -229,24 +177,16 @@ with gr.Blocks(title="🌍 ZenCtrl") as demo:
                             )
 
                     with gr.Column(scale=2):
-                        output_image = gr.Image(
-                            label="Generated Image",
-                            type="pil",
-                            height=573,
-                            scale=4,
-                            min_width=100,
-                        )
+                        output_image = gr.Image(label="Generated Image", type="pil")
 
-                gr.Markdown("#### Prompt")
                 prompt_box = gr.Textbox(
                     label="Prompt", value=defaults["prompt"], lines=2
                 )
 
-                # Wrap generation parameters in an Accordion for collapsible view.
                 with gr.Accordion("Generation Parameters", open=False):
                     with gr.Row():
                         step_slider = gr.Slider(
-                            minimum=2, maximum=28, value=2, step=2, label="Steps"
+                            minimum=2, maximum=28, value=10, step=2, label="Steps"
                         )
                         strength_slider = gr.Slider(
                             minimum=0.5,
@@ -272,14 +212,7 @@ with gr.Blocks(title="🌍 ZenCtrl") as demo:
                         )
 
                 def on_generate_click(
-                    model_name,
-                    prompt,
-                    steps,
-                    strength,
-                    height,
-                    width,
-                    remove_bg,
-                    image,
+                    model_name, prompt, steps, strength, height, width, remove_bg, image
                 ):
                     return call_baseten_generate(
                         image,
@@ -305,9 +238,16 @@ with gr.Blocks(title="🌍 ZenCtrl") as demo:
                         input_image,
                     ],
                     outputs=[output_image],
-                    concurrency_limit=None
                 )
 
+                # ---------------- Templates --------------------
+                if examples_db.MODE_EXAMPLES.get(mode):
+                    gr.Examples(
+                        examples=examples_db.MODE_EXAMPLES.get(mode, []),
+                        inputs=[input_image, prompt_box, output_image],
+                        label="Presets (Input / Prompt / Output)",
+                        examples_per_page=6,
+                    )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

examples_db.py

@@ -0,0 +1,108 @@
+MODE_EXAMPLES = {
+    "Subject Generation": [
+        [
+            "imgs/sub_i1.png",
+            "Low angle photography, shoes, stepping in water in a futuristic cityscape with neon lights, in the back in large, the words 'ZenCtrl 2025' are written in a futuristic font",
+            "imgs/sub_o1.webp",
+        ],
+        [
+            "imgs/sub_i2.png",
+            "blue car, on the road, outdoor, sunny day , beautiful cityscape",
+            "imgs/sub_o2.webp",
+        ],
+        [
+            "imgs/sub_i3.png",
+            "in a modern living room , next to a flower vase",
+            "imgs/sub_o3.webp",
+        ],
+        ["imgs/sub_i4.png", "a watch with blue dial, on a table, in a living room, next to a window, sunny day", "imgs/sub_o4.webp"],
+        ["imgs/sub_i5.png", "a ring , on a jewelry box, next to a luxurious shop window, side view, sunny day", "imgs/sub_o5.webp"],
+    ],
+    "Background Generation": [
+        [
+            "imgs/bg_i1.png",
+            "placed on a dark marble table  in a bathroom of luxury hotel  modern light authentic atmosphere",
+            "imgs/bg_o1.png",
+        ],
+        [
+            "imgs/bg_i2.png",
+            "sitting on the middle of the city road on a sunny day very bright day front view",
+            "imgs/bg_o2.png",
+        ],
+        [
+            "imgs/bg_i3.png",
+            "A creative capture in an art gallery, with soft, focused lighting highlighting both the person’s features and the abstract surroundings, exuding sophistication.",
+            "imgs/bg_o3.jpg",
+        ],
+        [
+            "imgs/bg_i4.png",
+            "In a rain-soaked urban nightscape, with headlights piercing through the mist and wet streets reflecting the city’s vibrant neon colors, creating an atmosphere of mystery and modern elegance.",
+            "imgs/bg_o4.jpg",
+        ],
+        [
+            "imgs/bg_i5.png",
+            "An elegant  room scene featuring a minimalist table and chairs, illuminated by ambient lighting that casts gentle shadows and enhances the refined, contemporary decor.",
+            "imgs/bg_o5.jpg",
+        ],
+    ],
+    # "Canny": [
+    #     ["assets/canny1.jpg", "A neon cyberpunk city skyline", "assets/canny1_out.jpg"],
+    #     ["assets/canny2.jpg", "A robot walking in the fog", "assets/canny2_out.jpg"],
+    #     [
+    #         "assets/canny3.jpg",
+    #         "A futuristic vehicle parked under a bridge",
+    #         "assets/canny3_out.jpg",
+    #     ],
+    #     [
+    #         "assets/canny4.jpg",
+    #         "Sci-fi lab interior with glowing machinery",
+    #         "assets/canny4_out.jpg",
+    #     ],
+    #     [
+    #         "assets/canny5.jpg",
+    #         "A portrait of a woman outlined in neon",
+    #         "assets/canny5_out.jpg",
+    #     ],
+    #     [
+    #         "assets/canny6.jpg",
+    #         "Post-apocalyptic abandoned street",
+    #         "assets/canny6_out.jpg",
+    #     ],
+    # ],
+    # "Depth": [
+    #     [
+    #         "assets/depth1.jpg",
+    #         "A narrow alleyway with deep perspective",
+    #         "assets/depth1_out.jpg",
+    #     ],
+    #     [
+    #         "assets/depth2.jpg",
+    #         "A mountain road vanishing into the distance",
+    #         "assets/depth2_out.jpg",
+    #     ],
+    #     [
+    #         "assets/depth3.jpg",
+    #         "A hallway with strong depth of field",
+    #         "assets/depth3_out.jpg",
+    #     ],
+    #     [
+    #         "assets/depth4.jpg",
+    #         "A misty forest path stretching far away",
+    #         "assets/depth4_out.jpg",
+    #     ],
+    #     ["assets/depth5.jpg", "A bridge over a deep canyon", "assets/depth5_out.jpg"],
+    #     [
+    #         "assets/depth6.jpg",
+    #         "An underground tunnel with receding arches",
+    #         "assets/depth6_out.jpg",
+    #     ],
+    # ],
+    # "Deblurring": [
+    #     ["assets/deblur1.jpg", "", "assets/deblur1_out.jpg"],
+    #     ["assets/deblur2.jpg", "", "assets/deblur2_out.jpg"],
+    #     ["assets/deblur3.jpg", "", "assets/deblur3_out.jpg"],
+    #     ["assets/deblur4.jpg", "", "assets/deblur4_out.jpg"],
+    #     ["assets/deblur5.jpg", "", "assets/deblur5_out.jpg"],
+    #     ["assets/deblur6.jpg", "", "assets/deblur6_out.jpg"],
+    # ],
+}