Update app.py

app.py

@@ -166,8 +166,7 @@ t2i_example_prompts = [
     ["A cute robot sitting at a desk, digital art style", 1024, 1024, 44],
 ]
 
-# Custom CSS for Apple-style design
-# The closing </style> tag is removed as it is not needed when passing as a string to launch()
+# Custom CSS for Apple-style design and responsiveness
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
 
@@ -178,6 +177,7 @@ custom_css = """
 .gradio-container {
     max-width: 1400px !important;
     margin: auto !important;
+    padding: 0 16px; /* Added padding for mobile/small desktop */
 }
 
 #component-0 {
@@ -205,10 +205,12 @@ button.selected {
     font-weight: 500 !important;
 }
 
+/* Ensure images scale correctly on mobile */
 .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"] {
@@ -257,16 +259,30 @@ label {
     font-size: 13px !important;
 }
 
+/* The .card class targets the underlying gr-panel component for the elevated look */
 .card {
     background: white !important;
     border-radius: 16px !important;
     padding: 24px !important;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
 }
+
+/* Mobile Responsiveness: Adjust padding/margins for smaller screens */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 0 8px !important;
+    }
+    .card {
+        padding: 16px !important;
+    }
+    .primary-btn {
+        padding: 12px 24px !important;
+        font-size: 15px !important;
+    }
+}
 """
 
 # Build Gradio interface
-# In Gradio 6, custom CSS is passed to launch()
 with gr.Blocks() as demo:
     gr.HTML("""
         <div style="text-align: center; padding: 40px 20px 30px 20px;">
@@ -282,41 +298,44 @@ with gr.Blocks() as demo:
     with gr.Tabs(selected=0):
         # Image Edit Tab (Default)
         with gr.TabItem("Edit Image", id=0):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    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"])
-
-                with gr.Column(scale=1):
-                    output_image = gr.Image(
-                        label="Result",
-                        type="pil",
-                        height=450,
-                        elem_classes=["output-image"]
-                    )
+            # 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"]
+                )
 
             gr.HTML("<div style='margin: 30px 0 20px 0;'></div>")
 
@@ -332,50 +351,51 @@ with gr.Blocks() as demo:
 
         # Text-to-Image Tab
         with gr.TabItem("Generate Image", id=1):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    t2i_prompt = gr.Textbox(
-                        label="Describe your image",
-                        placeholder="e.g., A serene mountain landscape at sunset...",
-                        lines=4,
-                        max_lines=6
-                    )
-
-                    with gr.Row():
-                        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(scale=1):
-                    t2i_output = gr.Image(
-                        label="Result",
-                        type="pil",
-                        height=550,
-                        elem_classes=["output-image"]
-                    )
+            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"]
+                )
 
             gr.HTML("<div style='margin: 30px 0 20px 0;'></div>")
 
@@ -416,6 +436,5 @@ with gr.Blocks() as demo:
 if __name__ == "__main__":
     demo.launch(
         mcp_server=True,
-        # *** Gradio 6 Migration: CSS is now passed to launch() ***
         css=custom_css 
     )