Update app.py

app.py

@@ -7,7 +7,7 @@ from longcat_image.models import LongCatImageTransformer2DModel
 from longcat_image.pipelines import LongCatImageEditPipeline, LongCatImagePipeline
 import numpy as np
 
-# Load models directly at startup
+# --- Model Loading (Kept for completeness) ---
 device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 
 # Text-to-Image Model
@@ -60,6 +60,7 @@ edit_pipe.to(device, torch.bfloat16)
 
 print(f"✅ Image Edit model loaded successfully on {device}")
 
+# --- Core Functions (Kept for completeness) ---
 @spaces.GPU(duration=120)
 def generate_image(
     prompt: str,
@@ -69,19 +70,12 @@ def generate_image(
     progress=gr.Progress()
 ):
     """Generate image from text prompt"""
-
     if not prompt or prompt.strip() == "":
         raise gr.Error("Please enter a prompt")
-
     try:
         progress(0.1, desc="Preparing generation...")
-
         progress(0.2, desc="Generating image...")
-
-        # Set random seed for reproducibility
         generator = torch.Generator("cuda" if torch.cuda.is_available() else "cpu").manual_seed(seed)
-
-        # Run the pipeline with default optimal settings
         with torch.inference_mode():
             output = t2i_pipe(
                 prompt,
@@ -95,13 +89,8 @@ def generate_image(
                 enable_cfg_renorm=True,
                 enable_prompt_rewrite=True
             )
-
         progress(1.0, desc="Done!")
-
-        generated_image = output.images[0]
-
-        return generated_image
-
+        return output.images[0]
     except Exception as e:
         raise gr.Error(f"Error during image generation: {str(e)}")
 
@@ -113,26 +102,16 @@ def edit_image(
     progress=gr.Progress()
 ):
     """Edit image based on text prompt"""
-
     if input_image is None:
         raise gr.Error("Please upload an image first")
-
     if not prompt or prompt.strip() == "":
         raise gr.Error("Please enter an edit instruction")
-
     try:
         progress(0.1, desc="Preparing image...")
-
-        # Convert to RGB if needed
         if input_image.mode != 'RGB':
             input_image = input_image.convert('RGB')
-
         progress(0.2, desc="Generating edited image...")
-
-        # Set random seed for reproducibility
         generator = torch.Generator("cuda" if torch.cuda.is_available() else "cpu").manual_seed(seed)
-
-        # Run the pipeline with optimal default settings
         with torch.inference_mode():
             output = edit_pipe(
                 input_image,
@@ -143,30 +122,24 @@ def edit_image(
                 num_images_per_prompt=1,
                 generator=generator
             )
-
         progress(1.0, desc="Done!")
-
-        edited_image = output.images[0]
-
-        return edited_image
-
+        return output.images[0]
     except Exception as e:
         raise gr.Error(f"Error during image editing: {str(e)}")
 
-# Example for image editing
+# --- Examples (Kept for completeness) ---
 edit_example_image_url = "https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png"
 edit_example_data = [
     [edit_example_image_url, "Add a mustache", 42],
 ]
 
-# Examples for text-to-image
 t2i_example_prompts = [
     ["一个年轻的亚裔女性，身穿黄色针织衫，搭配白色项链。她的双手放在膝盖上，表情恬静。背景是一堵粗糙的砖墙，午后的阳光温暖地洒在她身上，营造出一种宁静而温馨的氛围。", 1344, 768, 43],
     ["A serene mountain landscape at sunset with golden clouds", 1344, 768, 42],
     ["A cute robot sitting at a desk, digital art style", 1024, 1024, 44],
 ]
 
-# Custom CSS for Apple-style design and responsiveness
+# --- Custom CSS (Kept from previous refined version) ---
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
 
@@ -174,16 +147,19 @@ custom_css = """
     font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
 
+/* Ensure padding on all screen sizes */
 .gradio-container {
     max-width: 1400px !important;
     margin: auto !important;
-    padding: 0 16px; /* Added padding for mobile/small desktop */
+    padding: 0 16px; 
 }
 
+/* Background gradient for the overall app (like a subtle card) */
 #component-0 {
     background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%) !important;
 }
 
+/* Tab bar styling for the segmented control look */
 .tabs {
     border: none !important;
     background: transparent !important;
@@ -205,12 +181,11 @@ button.selected {
     font-weight: 500 !important;
 }
 
-/* Ensure images scale correctly on mobile */
+/* Image and input component styling */
 .input-image, .output-image {
     border-radius: 16px !important;
     overflow: hidden !important;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
-    min-height: 250px; /* Base minimum height for better mobile scaling */
 }
 
 textarea, input[type="text"] {
@@ -226,6 +201,7 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
 }
 
+/* Primary Button Styling */
 .primary-btn {
     background: linear-gradient(180deg, #007aff 0%, #0051d5 100%) !important;
     border: none !important;
@@ -243,6 +219,7 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4) !important;
 }
 
+/* Slider and Label styling */
 .slider-container {
     margin: 16px 0 !important;
 }
@@ -259,7 +236,7 @@ label {
     font-size: 13px !important;
 }
 
-/* The .card class targets the underlying gr-panel component for the elevated look */
+/* Card Style (targets gr-panel when variant="panel" is used) */
 .card {
     background: white !important;
     border-radius: 16px !important;
@@ -267,7 +244,7 @@ label {
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
 }
 
-/* Mobile Responsiveness: Adjust padding/margins for smaller screens */
+/* Mobile adjustments */
 @media (max-width: 768px) {
     .gradio-container {
         padding: 0 8px !important;
@@ -275,10 +252,6 @@ label {
     .card {
         padding: 16px !important;
     }
-    .primary-btn {
-        padding: 12px 24px !important;
-        font-size: 15px !important;
-    }
 }
 """
 
@@ -296,46 +269,47 @@ with gr.Blocks() as demo:
     """)
 
     with gr.Tabs(selected=0):
-        # Image Edit Tab (Default)
+        # Image Edit Tab (Responsive Layout: Row on Desktop, Column on Mobile)
         with gr.TabItem("Edit Image", id=0):
-            # Use gr.Column with variant="panel" to get the 'card' look for inputs
-            with gr.Column(variant="panel", scale=1):
-                gr.Markdown("### 🖼️ Input Image & Controls")
-                input_image = gr.Image(
-                    label="Upload Image",
-                    type="pil",
-                    sources=["upload", "clipboard"],
-                    height=450,
-                    elem_classes=["input-image"]
-                )
-
-                prompt = gr.Textbox(
-                    label="What would you like to change?",
-                    placeholder="e.g., Add a mustache, Change to sunset, Make it vintage...",
-                    lines=2,
-                    max_lines=3
-                )
-
-                seed = gr.Slider(
-                    minimum=0,
-                    maximum=999999,
-                    value=42,
-                    step=1,
-                    label="Seed",
-                    visible=False
-                )
-
-                edit_btn = gr.Button("Edit Image", variant="primary", size="lg", elem_classes=["primary-btn"])
-
-            # Use gr.Column with variant="panel" for the output image
-            with gr.Column(variant="panel", scale=1):
-                gr.Markdown("### ✨ Result")
-                output_image = gr.Image(
-                    label="Result",
-                    type="pil",
-                    height=450,
-                    elem_classes=["output-image"]
-                )
+            with gr.Row(): # <-- Re-introducing the responsive row
+                # Left Column (Inputs)
+                with gr.Column(scale=1, variant="panel"): 
+                    gr.Markdown("### 🖼️ Input Image & Controls")
+                    input_image = gr.Image(
+                        label="Upload Image",
+                        type="pil",
+                        sources=["upload", "clipboard"],
+                        height=450,
+                        elem_classes=["input-image"]
+                    )
+
+                    prompt = gr.Textbox(
+                        label="What would you like to change?",
+                        placeholder="e.g., Add a mustache, Change to sunset, Make it vintage...",
+                        lines=2,
+                        max_lines=3
+                    )
+
+                    seed = gr.Slider(
+                        minimum=0,
+                        maximum=999999,
+                        value=42,
+                        step=1,
+                        label="Seed",
+                        visible=False
+                    )
+
+                    edit_btn = gr.Button("Edit Image", variant="primary", size="lg", elem_classes=["primary-btn"])
+
+                # Right Column (Output)
+                with gr.Column(scale=1, variant="panel"):
+                    gr.Markdown("### ✨ Result")
+                    output_image = gr.Image(
+                        label="Result",
+                        type="pil",
+                        height=450,
+                        elem_classes=["output-image"]
+                    )
 
             gr.HTML("<div style='margin: 30px 0 20px 0;'></div>")
 
@@ -349,53 +323,55 @@ with gr.Blocks() as demo:
                 examples_per_page=3
             )
 
-        # Text-to-Image Tab
+        # Text-to-Image Tab (Responsive Layout: Row on Desktop, Column on Mobile)
         with gr.TabItem("Generate Image", id=1):
-            with gr.Column(variant="panel", scale=1):
-                gr.Markdown("### 🎨 Generation Controls")
-                t2i_prompt = gr.Textbox(
-                    label="Describe your image",
-                    placeholder="e.g., A serene mountain landscape at sunset...",
-                    lines=4,
-                    max_lines=6
-                )
-
-                # Sliders remain vertical
-                t2i_width = gr.Slider(
-                    minimum=512,
-                    maximum=2048,
-                    value=1344,
-                    step=64,
-                    label="Width",
-                )
-
-                t2i_height = gr.Slider(
-                    minimum=512,
-                    maximum=2048,
-                    value=768,
-                    step=64,
-                    label="Height",
-                )
-
-                t2i_seed = gr.Slider(
-                    minimum=0,
-                    maximum=999999,
-                    value=42,
-                    step=1,
-                    label="Seed",
-                    visible=False
-                )
-                
-                generate_btn = gr.Button("Generate Image", variant="primary", size="lg", elem_classes=["primary-btn"])
-
-            with gr.Column(variant="panel", scale=1):
-                gr.Markdown("### ✨ Result")
-                t2i_output = gr.Image(
-                    label="Result",
-                    type="pil",
-                    height=550,
-                    elem_classes=["output-image"]
-                )
+            with gr.Row(): # <-- Re-introducing the responsive row
+                # Left Column (Inputs)
+                with gr.Column(scale=1, variant="panel"):
+                    gr.Markdown("### 🎨 Generation Controls")
+                    t2i_prompt = gr.Textbox(
+                        label="Describe your image",
+                        placeholder="e.g., A serene mountain landscape at sunset...",
+                        lines=4,
+                        max_lines=6
+                    )
+
+                    t2i_width = gr.Slider(
+                        minimum=512,
+                        maximum=2048,
+                        value=1344,
+                        step=64,
+                        label="Width",
+                    )
+
+                    t2i_height = gr.Slider(
+                        minimum=512,
+                        maximum=2048,
+                        value=768,
+                        step=64,
+                        label="Height",
+                    )
+
+                    t2i_seed = gr.Slider(
+                        minimum=0,
+                        maximum=999999,
+                        value=42,
+                        step=1,
+                        label="Seed",
+                        visible=False
+                    )
+
+                    generate_btn = gr.Button("Generate Image", variant="primary", size="lg", elem_classes=["primary-btn"])
+
+                # Right Column (Output)
+                with gr.Column(scale=1, variant="panel"):
+                    gr.Markdown("### ✨ Result")
+                    t2i_output = gr.Image(
+                        label="Result",
+                        type="pil",
+                        height=550,
+                        elem_classes=["output-image"]
+                    )
 
             gr.HTML("<div style='margin: 30px 0 20px 0;'></div>")
 
@@ -422,7 +398,7 @@ with gr.Blocks() as demo:
         outputs=output_image,
     )
 
-    # Footer (HTML content is kept in Blocks, it is not an app-level parameter)
+    # Footer
     gr.HTML("""
         <div style="text-align: center; margin-top: 60px; padding: 30px 20px; border-top: 1px solid #d2d2d7;">
             <p style="color: #86868b; font-size: 13px; margin: 0;">
@@ -432,9 +408,10 @@ with gr.Blocks() as demo:
         </div>
     """)
 
-# Launch the app
+# Launch the app with theme and custom CSS
 if __name__ == "__main__":
     demo.launch(
         mcp_server=True,
+        theme=gr.themes.Soft(), 
         css=custom_css 
     )