Update app.py

app.py

@@ -130,104 +130,121 @@ def process_images(prompt, image1, image2=None):
 # Enhanced CSS with modern, minimal design
 css = """
 .gradio-container {
-    background: linear-gradient(180deg, #0f0f0f 0%, #1a1a2e 100%);
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     min-height: 100vh;
 }
 .header-container {
     background: linear-gradient(135deg, #ffd93d 0%, #ffb347 100%);
-    padding: 2rem;
-    border-radius: 20px;
-    margin-bottom: 2rem;
-    box-shadow: 0 20px 40px rgba(255, 217, 61, 0.3);
+    padding: 2.5rem;
+    border-radius: 24px;
+    margin-bottom: 2.5rem;
+    box-shadow: 0 20px 60px rgba(255, 179, 71, 0.25);
 }
 .logo-text {
     font-size: 3.5rem;
     font-weight: 900;
-    color: #1a1a2e;
+    color: #2d3436;
     text-align: center;
     margin: 0;
     letter-spacing: -2px;
 }
 .subtitle {
-    color: #2a2a3e;
+    color: #2d3436;
     text-align: center;
     font-size: 1rem;
     margin-top: 0.5rem;
-    opacity: 0.9;
+    opacity: 0.8;
 }
 .main-content {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    border-radius: 20px;
-    padding: 2rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 24px;
+    padding: 2.5rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
 }
 .gr-button-primary {
     background: linear-gradient(135deg, #ffd93d 0%, #ffb347 100%) !important;
     border: none !important;
-    color: #1a1a2e !important;
+    color: #2d3436 !important;
     font-weight: 700 !important;
     font-size: 1.1rem !important;
-    padding: 1rem 2rem !important;
-    border-radius: 12px !important;
+    padding: 1.2rem 2rem !important;
+    border-radius: 14px !important;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     text-transform: uppercase;
     letter-spacing: 1px;
+    width: 100%;
+    margin-top: 1rem !important;
 }
 .gr-button-primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 10px 30px rgba(255, 217, 61, 0.4) !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 15px 40px rgba(255, 179, 71, 0.35) !important;
 }
 .gr-input, .gr-textarea {
-    background: rgba(255, 255, 255, 0.08) !important;
-    border: 1px solid rgba(255, 255, 255, 0.15) !important;
-    border-radius: 12px !important;
-    color: white !important;
+    background: #ffffff !important;
+    border: 2px solid #e1e8ed !important;
+    border-radius: 14px !important;
+    color: #2d3436 !important;
     font-size: 1rem !important;
+    padding: 0.8rem 1rem !important;
 }
 .gr-input:focus, .gr-textarea:focus {
     border-color: #ffd93d !important;
-    box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.1) !important;
+    box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.15) !important;
 }
 .gr-form {
     background: transparent !important;
     border: none !important;
 }
 .gr-panel {
-    background: rgba(255, 255, 255, 0.03) !important;
-    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    background: #ffffff !important;
+    border: 2px solid #e1e8ed !important;
     border-radius: 16px !important;
     padding: 1.5rem !important;
 }
 .gr-box {
-    border-radius: 12px !important;
-    border-color: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 14px !important;
+    border-color: #e1e8ed !important;
 }
 label {
-    color: rgba(255, 255, 255, 0.9) !important;
+    color: #636e72 !important;
     font-weight: 600 !important;
-    font-size: 0.9rem !important;
+    font-size: 0.85rem !important;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 0.5px;
     margin-bottom: 0.5rem !important;
 }
 .status-text {
     font-family: 'SF Mono', 'Monaco', monospace;
-    color: #ffd93d;
-    padding: 0.5rem 1rem;
-    background: rgba(255, 217, 61, 0.1);
-    border-radius: 8px;
-    border: 1px solid rgba(255, 217, 61, 0.3);
+    color: #00b894;
+    font-size: 0.9rem;
 }
 .image-container {
-    border-radius: 16px !important;
+    border-radius: 14px !important;
     overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    border: 2px solid #e1e8ed !important;
+    background: #fafbfc !important;
 }
 footer {
     display: none !important;
 }
+/* Equal sizing for all image containers */
+.image-upload {
+    min-height: 200px !important;
+    max-height: 200px !important;
+}
+.output-image {
+    min-height: 420px !important;
+    max-height: 420px !important;
+}
+/* Ensure consistent spacing */
+.gr-row {
+    gap: 1rem !important;
+}
+.gr-column {
+    gap: 1rem !important;
+}
 """
 
 # Build the interface
@@ -239,48 +256,52 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
         """)
     
     with gr.Column(elem_classes="main-content"):
-        with gr.Row():
+        with gr.Row(equal_height=True):
+            # Left Column - Inputs
             with gr.Column(scale=1):
                 prompt = gr.Textbox(
-                    label="Prompt",
+                    label="Style Description",
                     placeholder="Describe your style...",
-                    lines=2,
-                    value="Make the sheets in the style of the logo. Make the scene natural."
+                    lines=3,
+                    value="Make the sheets in the style of the logo. Make the scene natural.",
+                    elem_classes="prompt-input"
                 )
                 
-                with gr.Row():
+                with gr.Row(equal_height=True):
                     image1 = gr.Image(
-                        label="Image 1",
+                        label="Primary Image",
                         type="pil",
-                        height=180,
-                        elem_classes="image-container"
+                        height=200,
+                        elem_classes="image-container image-upload"
                     )
                     image2 = gr.Image(
-                        label="Image 2 (Optional)",
+                        label="Secondary Image",
                         type="pil",
-                        height=180,
-                        elem_classes="image-container"
+                        height=200,
+                        elem_classes="image-container image-upload"
                     )
                 
                 generate_btn = gr.Button(
-                    "Generate",
+                    "Generate Magic ✨",
                     variant="primary",
                     size="lg"
                 )
             
+            # Right Column - Output
             with gr.Column(scale=1):
                 output_image = gr.Image(
-                    label="Result",
+                    label="Generated Result",
                     type="pil",
-                    height=400,
-                    elem_classes="image-container"
+                    height=420,
+                    elem_classes="image-container output-image"
                 )
                 
                 status = gr.Textbox(
                     label="Status",
                     interactive=False,
                     lines=1,
-                    elem_classes="status-text"
+                    elem_classes="status-text",
+                    value="Ready to generate..."
                 )
     
     # Event handler