Update app.py

app.py

@@ -5,12 +5,80 @@ import spaces
 import torch
 import random
 from PIL import Image
+from typing import Iterable
 
 from diffusers import FluxKontextPipeline
 from diffusers.utils import load_image
 from huggingface_hub import hf_hub_download
 from aura_sr import AuraSR
 from gradio_imageslider import ImageSlider
+from gradio.themes import Soft
+from gradio.themes.utils import colors, fonts, sizes
+
+# --- Theme and CSS Definition ---
+
+# Define the new HotPink color palette
+colors.hot_pink = colors.Color(
+    name="hot_pink",
+    c50="#FFF0F7",
+    c100="#FFE0EF",
+    c200="#FFC2E0",
+    c300="#FFA4D1",
+    c400="#FF87C3",
+    c500="#FF69B4",  # HotPink base color
+    c600="#E65FA2",
+    c700="#CC5490",
+    c800="#B34A7E",
+    c900="#993F6C",
+    c950="#80355A",
+)
+
+class HotPinkTheme(Soft):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.gray,
+        secondary_hue: colors.Color | str = colors.hot_pink, # Use the new color
+        neutral_hue: colors.Color | str = colors.slate,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Outfit"), "Arial", "sans-serif",
+        ),
+        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        super().set(
+            background_fill_primary="*primary_50",
+            background_fill_primary_dark="*primary_900",
+            body_background_fill="linear-gradient(135deg, *primary_200, *primary_100)",
+            body_background_fill_dark="linear-gradient(135deg, *primary_900, *primary_800)",
+            button_primary_text_color="white",
+            button_primary_text_color_hover="white",
+            button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
+            button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
+            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
+            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
+            slider_color="*secondary_500",
+            slider_color_dark="*secondary_600",
+            block_title_text_weight="600",
+            block_border_width="2px",
+            block_shadow="*shadow_drop_lg",
+            button_primary_shadow="*shadow_drop_lg",
+            button_large_padding="12px",
+            block_label_background_fill="*primary_200",
+        )
+
+# Instantiate the new theme
+hot_pink_theme = HotPinkTheme()
 
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
@@ -35,7 +103,6 @@ pipe.load_lora_weights("prithivMLmods/PhotoCleanser-i2i", weight_name="PhotoClea
 pipe.load_lora_weights("prithivMLmods/Photo-Restore-i2i", weight_name="Photo-Restore-i2i.safetensors", adapter_name="restorer")
 pipe.load_lora_weights("prithivMLmods/Polaroid-Warm-i2i", weight_name="Polaroid-Warm-i2i.safetensors", adapter_name="polaroid")
 pipe.load_lora_weights("prithivMLmods/Monochrome-Pencil", weight_name="Monochrome-Pencil-i2i.safetensors", adapter_name="pencil")
-# Add the new LZO adapter
 pipe.load_lora_weights("prithivMLmods/LZO-1-Preview", weight_name="LZO-1-Preview.safetensors", adapter_name="lzo")
 
 
@@ -46,12 +113,6 @@ aura_sr = AuraSR.from_pretrained("fal/AuraSR-v2")
 def infer(input_image, prompt, lora_adapter, upscale_image, seed=42, randomize_seed=False, guidance_scale=2.5, steps=28, progress=gr.Progress(track_tqdm=True)):
     """
     Perform image editing and optional upscaling, returning a pair for the ImageSlider.
-    
-    Returns:
-        tuple: A 3-tuple containing:
-               - (PIL.Image.Image, PIL.Image.Image): A tuple of the (original, generated) images for the slider.
-               - int: The seed used for generation.
-               - gr.update: A Gradio update to make the reuse button visible.
     """
     if not input_image:
         raise gr.Error("Please upload an image for editing.")
@@ -64,11 +125,9 @@ def infer(input_image, prompt, lora_adapter, upscale_image, seed=42, randomize_s
         pipe.set_adapters(["polaroid"], adapter_weights=[1.0])
     elif lora_adapter == "MonochromePencil":
         pipe.set_adapters(["pencil"], adapter_weights=[1.0])
-    # Add the new LZO adapter condition
     elif lora_adapter == "LZO-Zoom":
         pipe.set_adapters(["lzo"], adapter_weights=[1.0])
 
-
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
     
@@ -103,20 +162,15 @@ css="""
     margin: 0 auto;
     max-width: 960px;
 }
-.submit-btn {
-    background-color: #2980b9 !important;
-    color: white !important;
-}
-.submit-btn:hover {
-    background-color: #3498db !important;
-}
+#main-title h1 {font-size: 2.1em !important;}
 """
 
-with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
+with gr.Blocks(css=css, theme=hot_pink_theme) as demo:
     
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""# **[Photo-Mate-i2i](https://huggingface.co/collections/prithivMLmods/i2i-kontext-exp-68ce573b5c0623476b636ec7)**
-        Image manipulation with FLUX.1 Kontext adapters. [How to Use](https://huggingface.co/spaces/prithivMLmods/Photo-Mate-i2i/discussions/2)""")
+        gr.Markdown("# **Photo-Mate-i2i**", elem_id="main-title")
+        gr.Markdown("Image manipulation with FLUX.1 Kontext adapters. [How to Use](https://huggingface.co/spaces/prithivMLmods/Photo-Mate-i2i/discussions/2)")
+        
         with gr.Row():
             with gr.Column():
                 input_image = gr.Image(label="Image [PIL]", type="pil", height="300")
@@ -125,10 +179,10 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
                         label="Edit Prompt",
                         show_label=False,
                         max_lines=1,
-                        placeholder="Enter your prompt for editing (e.g., 'Remove glasses', 'Add a hat')",
+                        placeholder="Enter your prompt for editing (e.g., 'Remove glasses')",
                         container=False,
                     )
-                    run_button = gr.Button("Run", elem_classes="submit-btn", scale=0)
+                    run_button = gr.Button("Run", variant="primary", scale=0)
                 with gr.Accordion("Advanced Settings", open=False):
                     
                     seed = gr.Slider(
@@ -158,18 +212,16 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
                     )
                     
             with gr.Column():
-                # Replace the single image result with the ImageSlider
                 output_slider = ImageSlider(label="Before / After", show_label=False, interactive=False)
                 reuse_button = gr.Button("Reuse this image", visible=False)
                 
                 with gr.Row():
                     lora_adapter = gr.Dropdown(
-                    label="Chosen LoRA",
-                    choices=["PhotoCleanser", "PhotoRestorer", "PolaroidWarm", "MonochromePencil", "LZO-Zoom"],
-                    value="PhotoCleanser"
-                )
+                        label="Chosen LoRA",
+                        choices=["PhotoCleanser", "PhotoRestorer", "PolaroidWarm", "MonochromePencil", "LZO-Zoom"],
+                        value="PhotoCleanser"
+                    )
                     
-                #AuraSR Upscale
                 with gr.Row():
                     upscale_checkbox = gr.Checkbox(label="Upscale the final image", value=False)
 
@@ -178,15 +230,12 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
                 ["photocleanser/2.png", "[photo content], remove the cat from the image while preserving the background and remaining elements, maintaining realism and original details.", "PhotoCleanser"],
                 ["photocleanser/1.png", "[photo content], remove the football from the image while preserving the background and remaining elements, maintaining realism and original details.", "PhotoCleanser"],
                 ["photorestore/1.png", "[photo content], restore and enhance the image by repairing any damage, scratches, or fading. Colorize the photo naturally while preserving authentic textures and details, maintaining a realistic and historically accurate look.", "PhotoRestorer"],
-                # Add the new LZO example
                 ["lzo/1.jpg", "[photo content], zoom in on the specified [face close-up], enhancing resolution and detail while preserving sharpness, realism, and original context. Maintain natural proportions and background continuity around the zoomed area.", "LZO-Zoom"],
                 ["photorestore/2.png", "[photo content], restore and enhance the image by repairing any damage, scratches, or fading. Colorize the photo naturally while preserving authentic textures and details, maintaining a realistic and historically accurate look.", "PhotoRestorer"],
                 ["polaroid/1.png", "[photo content], in the style of a vintage Polaroid, with warm, faded tones, and a white border.", "PolaroidWarm"],
                 ["pencil/1.png", "[photo content], replicate the image as a pencil illustration, black and white, with sketch-like detailing.", "MonochromePencil"],
-
             ],
             inputs=[input_image, prompt, lora_adapter],
-            # The output now targets the ImageSlider component
             outputs=[output_slider, seed],
             fn=infer_example,
             cache_examples="lazy",
@@ -197,13 +246,10 @@ with gr.Blocks(css=css, theme="bethecloud/storj_theme") as demo:
         triggers=[run_button.click, prompt.submit],
         fn=infer,
         inputs=[input_image, prompt, lora_adapter, upscale_checkbox, seed, randomize_seed, guidance_scale, steps],
-        # The output now targets the ImageSlider component
         outputs=[output_slider, seed, reuse_button]
     )
     
-    # Update the reuse function to handle the ImageSlider output
     reuse_button.click(
-        # The slider outputs a tuple of images; we want the second one (the generated result)
         fn=lambda images: images[1] if isinstance(images, (list, tuple)) and len(images) > 1 else images,
         inputs=[output_slider],
         outputs=[input_image]