Match Z-Image UI exactly - blue pill labels and white output area

- Added elem_classes="input-section" and "output-section" to columns
- Blue pill labels for Prompt and Aspect Ratio (background #0071e3)
- Dark theme input section (#1d1d1f background)
- White/light background (#f5f5f7) for image generation area inside output
- Proper dark mode styling throughout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

app.py

@@ -242,7 +242,7 @@ examples_images = [
     ["The person from image 1 is petting the cat from image 2, the bird from image 3 is next to them", ["woman1.webp", "cat_window.webp", "bird.webp"]]
 ]
 
-# Apple-inspired CSS styling (matching Z-Image)
+# Apple-inspired CSS styling (matching Z-Image exactly)
 css = """
 /* Global Styles */
 .gradio-container {
@@ -274,46 +274,59 @@ css = """
 
 /* Input Section */
 .input-section {
-    background: #ffffff;
-    border-radius: 18px;
-    padding: 32px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-#input-column {
-    background: #ffffff !important;
+    background: #1d1d1f !important;
     border-radius: 18px !important;
     padding: 32px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
     width: 550px !important;
     min-width: 550px !important;
     max-width: 550px !important;
     flex: 0 0 550px !important;
 }
 
+/* Blue pill labels for Prompt and Aspect Ratio */
+.input-section label span,
+#prompt-textbox label span,
+.input-section .label-wrap span {
+    background: #0071e3 !important;
+    color: #ffffff !important;
+    padding: 4px 12px !important;
+    border-radius: 980px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    display: inline-block !important;
+}
+
 /* Textbox */
+.input-section textarea,
 #prompt-textbox textarea {
     font-size: 17px !important;
     line-height: 1.47 !important;
     border-radius: 12px !important;
-    border: 1px solid #d2d2d7 !important;
+    border: 1px solid #424245 !important;
     padding: 12px 16px !important;
-    background: #ffffff !important;
+    background: #2d2d2f !important;
+    color: #f5f5f7 !important;
     font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
     min-height: 500px !important;
     max-height: 700px !important;
     height: 500px !important;
     resize: vertical !important;
     overflow-y: auto !important;
-    margin-bottom: 16px !important;
 }
 
+.input-section textarea:focus,
 #prompt-textbox textarea:focus {
     border-color: #0071e3 !important;
     box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
     outline: none !important;
 }
 
+.input-section textarea::placeholder,
+#prompt-textbox textarea::placeholder {
+    color: #86868b !important;
+}
+
 /* Character counter */
 .char-counter {
     text-align: center;
@@ -331,6 +344,15 @@ css = """
     color: #ff3b30;
 }
 
+/* Dropdown styling */
+.input-section select,
+.input-section .wrap {
+    background: #2d2d2f !important;
+    border: 1px solid #424245 !important;
+    border-radius: 12px !important;
+    color: #f5f5f7 !important;
+}
+
 /* Button */
 button.primary {
     font-size: 17px !important;
@@ -352,11 +374,11 @@ button.primary:hover {
 }
 
 /* Output Section */
-#output-column {
-    background: #ffffff !important;
+.output-section {
+    background: #1d1d1f !important;
     border-radius: 18px !important;
     padding: 32px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
     overflow: hidden !important;
     display: flex !important;
     align-items: center !important;
@@ -364,36 +386,58 @@ button.primary:hover {
     min-height: 80vh !important;
     max-height: 90vh !important;
     flex: 1 1 auto !important;
+    will-change: auto !important;
+    position: relative !important;
+}
+
+.output-section * {
+    transform: none !important;
+    transition: none !important;
+    animation: none !important;
 }
 
-#output-column img {
+.output-section img {
     border-radius: 12px !important;
     max-width: 100% !important;
     max-height: 85vh !important;
     width: auto !important;
     height: auto !important;
     object-fit: contain !important;
+    transform: none !important;
+    backface-visibility: hidden !important;
+    -webkit-backface-visibility: hidden !important;
 }
 
-/* Dark Mode */
-.dark #input-column,
-.dark #output-column {
-    background: #1d1d1f !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
+/* Make progress/generation area fill more space */
+.output-section > div {
+    width: 100% !important;
+    min-height: 75vh !important;
+    max-height: 85vh !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: #f5f5f7 !important;
+    border-radius: 12px !important;
 }
 
-.dark .main-title {
-    color: #f5f5f7 !important;
+.output-section > div > div {
+    min-height: 75vh !important;
+    max-height: 85vh !important;
+    width: 100% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: #f5f5f7 !important;
 }
 
-.dark #prompt-textbox textarea {
-    background: #1d1d1f !important;
-    border-color: #424245 !important;
-    color: #f5f5f7 !important;
+.output-section * {
+    max-width: 100% !important;
 }
 
-.dark .char-counter {
-    color: #a1a1a6 !important;
+/* Dark Mode - title */
+.dark .main-title,
+.input-section .main-title {
+    color: #f5f5f7 !important;
 }
 
 /* Layout - Force horizontal layout */
@@ -440,14 +484,14 @@ footer {
         flex-wrap: wrap !important;
     }
 
-    #input-column {
+    .input-section {
         width: 100% !important;
         min-width: 100% !important;
         max-width: 100% !important;
         flex: 1 1 100% !important;
     }
 
-    #output-column {
+    .output-section {
         width: 100% !important;
         min-height: 50vh !important;
     }
@@ -542,7 +586,7 @@ with gr.Blocks() as demo:
     with gr.Row(equal_height=False, elem_id="main-row"):
 
         # LEFT COLUMN - Input Controls
-        with gr.Column(scale=0, min_width=550, elem_id="input-column"):
+        with gr.Column(scale=0, min_width=550, elem_classes="input-section", elem_id="input-column"):
 
             # Header
             gr.HTML("""
@@ -595,7 +639,7 @@ with gr.Blocks() as demo:
             )
 
         # RIGHT COLUMN - Image Output
-        with gr.Column(scale=2, elem_id="output-column"):
+        with gr.Column(scale=2, elem_classes="output-section", elem_id="output-column"):
             result = gr.Image(
                 label="Result",
                 show_label=False,