Match Z-Image UI exactly

- Updated CSS to match Z-Image Apple-style design
- Output section now has white background
- Removed Advanced Settings accordion
- Hidden footer links
- Always use random seed (like Z-Image)
- Fixed inference parameters (30 steps, 4.0 guidance)
- Improved JavaScript for layout control

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -196,20 +196,27 @@ def parse_aspect_ratio(aspect_ratio_str):
         return int(match.group(1)), int(match.group(2))
     return 1024, 1024  # Default
 
-def infer(prompt, aspect_ratio="1:1 (1024x1024)", seed=42, randomize_seed=False, num_inference_steps=30, guidance_scale=4.0, progress=gr.Progress(track_tqdm=True)):
+def infer(prompt, aspect_ratio="2:3 (1344x2048)", progress=gr.Progress(track_tqdm=True)):
+    """Generate an image using FLUX.2 model."""
+    if not prompt.strip():
+        raise gr.Error("Please enter a prompt to generate an image.")
 
-    if randomize_seed:
-        seed = random.randint(0, MAX_SEED)
+    # Always use random seed
+    seed = random.randint(0, MAX_SEED)
 
     # Parse aspect ratio to get width and height
     width, height = parse_aspect_ratio(aspect_ratio)
 
+    # Fixed inference parameters
+    num_inference_steps = 30
+    guidance_scale = 4.0
+
     # Text Encoding (Network bound - No GPU needed)
     progress(0.1, desc="Encoding prompt...")
     prompt_embeds = remote_text_encoder(prompt)
 
     # Image Generation (GPU bound)
-    progress(0.3, desc="Waiting for GPU...")
+    progress(0.3, desc="Generating image...")
     image = generate_image(
         prompt_embeds,
         None,  # No input images
@@ -221,7 +228,7 @@ def infer(prompt, aspect_ratio="1:1 (1024x1024)", seed=42, randomize_seed=False,
         progress
     )
 
-    return image, seed
+    return image
 
 examples = [
     ["Create a vase on a table in living room, the color of the vase is a gradient of color, starting with #02eb3c color and finishing with #edfa3c. The flowers inside the vase have the color #ff0088"],
@@ -235,48 +242,24 @@ 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
+# Apple-inspired CSS styling (matching Z-Image)
 css = """
-/* Global container styling */
+/* Global Styles */
 .gradio-container {
     max-width: 85vw !important;
     margin: 0 auto !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', sans-serif !important;
-}
-
-/* Main row - horizontal layout */
-#main-row {
-    display: flex !important;
-    flex-direction: row !important;
-    flex-wrap: nowrap !important;
-    gap: 24px !important;
-    align-items: flex-start !important;
-}
-
-/* Input section - fixed width */
-#input-column {
-    background: #ffffff !important;
-    border-radius: 18px !important;
-    padding: 32px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
-    width: 550px !important;
-    min-width: 550px !important;
-    max-width: 550px !important;
-    flex: 0 0 550px !important;
+    padding: 48px 20px !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
 }
 
-/* Output section - flexible */
-#output-column {
-    flex: 1 1 auto !important;
-    min-height: 80vh !important;
-    max-height: 90vh !important;
-    display: flex !important;
-    flex-direction: column !important;
+* {
+    transition: none !important;
+    animation: none !important;
 }
 
-/* Header styling */
+/* Header */
 .header-container {
-    text-align: center;
+    text-align: left;
     margin-bottom: 24px;
 }
 
@@ -284,20 +267,45 @@ css = """
     font-size: 32px !important;
     font-weight: 600 !important;
     letter-spacing: -0.02em !important;
+    line-height: 1.07 !important;
     color: #1d1d1f !important;
-    margin: 0 !important;
+    margin: 0 0 16px 0 !important;
+}
+
+/* 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;
+    border-radius: 18px !important;
+    padding: 32px !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
+    width: 550px !important;
+    min-width: 550px !important;
+    max-width: 550px !important;
+    flex: 0 0 550px !important;
 }
 
-/* Prompt textbox */
+/* Textbox */
 #prompt-textbox textarea {
-    min-height: 400px !important;
-    max-height: 500px !important;
+    font-size: 17px !important;
+    line-height: 1.47 !important;
     border-radius: 12px !important;
     border: 1px solid #d2d2d7 !important;
-    padding: 16px !important;
-    font-size: 15px !important;
-    line-height: 1.5 !important;
+    padding: 12px 16px !important;
+    background: #ffffff !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;
 }
 
 #prompt-textbox textarea:focus {
@@ -323,47 +331,53 @@ css = """
     color: #ff3b30;
 }
 
-/* Generate button */
+/* Button */
 button.primary {
+    font-size: 17px !important;
+    font-weight: 400 !important;
+    padding: 12px 32px !important;
+    border-radius: 980px !important;
     background: #0071e3 !important;
     border: none !important;
-    border-radius: 980px !important;
-    padding: 12px 32px !important;
-    font-size: 17px !important;
-    font-weight: 500 !important;
-    color: white !important;
+    color: #ffffff !important;
+    min-height: 44px !important;
+    letter-spacing: -0.01em !important;
     cursor: pointer !important;
-    transition: all 0.2s ease !important;
     width: 100% !important;
     margin-top: 16px !important;
 }
 
 button.primary:hover {
-    background: #0077ED !important;
-    transform: scale(1.02) !important;
+    background: #0077ed !important;
 }
 
-/* Accordion styling */
-.accordion {
-    border: 1px solid #d2d2d7 !important;
-    border-radius: 12px !important;
-    margin-top: 16px !important;
+/* Output Section */
+#output-column {
+    background: #ffffff !important;
+    border-radius: 18px !important;
+    padding: 32px !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
+    overflow: hidden !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 80vh !important;
+    max-height: 90vh !important;
+    flex: 1 1 auto !important;
 }
 
-/* Gallery styling */
-.gallery-container img {
+#output-column img {
+    border-radius: 12px !important;
+    max-width: 100% !important;
+    max-height: 85vh !important;
+    width: auto !important;
+    height: auto !important;
     object-fit: contain !important;
 }
 
-/* Output image */
-#output-column .image-container {
-    border-radius: 18px !important;
-    overflow: hidden !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
-}
-
-/* Dark mode support */
-.dark #input-column {
+/* Dark Mode */
+.dark #input-column,
+.dark #output-column {
     background: #1d1d1f !important;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
 }
@@ -373,19 +387,52 @@ button.primary:hover {
 }
 
 .dark #prompt-textbox textarea {
-    background: #2d2d2f !important;
+    background: #1d1d1f !important;
     border-color: #424245 !important;
     color: #f5f5f7 !important;
 }
 
-.dark #prompt-textbox textarea:focus {
-    border-color: #0071e3 !important;
-}
-
 .dark .char-counter {
     color: #a1a1a6 !important;
 }
 
+/* Layout - Force horizontal layout */
+#main-row {
+    align-items: flex-start !important;
+    flex-direction: row !important;
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    width: 100% !important;
+    gap: 24px !important;
+}
+
+.gradio-row {
+    align-items: flex-start !important;
+    flex-direction: row !important;
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    width: 100% !important;
+}
+
+.gradio-row > .gradio-column:first-child,
+.gradio-row > div:first-child {
+    width: 550px !important;
+    min-width: 550px !important;
+    max-width: 550px !important;
+    flex: 0 0 550px !important;
+}
+
+.gradio-row > .gradio-column:last-child,
+.gradio-row > div:last-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+}
+
+/* Hide footer */
+footer {
+    display: none !important;
+}
+
 /* Responsive adjustments */
 @media (max-width: 1200px) {
     #main-row {
@@ -407,69 +454,82 @@ button.primary:hover {
 }
 """
 
-# JavaScript for layout control and character counter
+# JavaScript for layout control and character counter (matching Z-Image)
 js_code = """
 function() {
-    // Force horizontal layout
+    function setupCharCounter() {
+        const textbox = document.querySelector('#prompt-textbox textarea');
+        const counter = document.querySelector('.char-counter');
+        const countSpan = document.getElementById('char-count');
+
+        if (textbox && counter && countSpan) {
+            function updateCount() {
+                const len = textbox.value.length;
+                countSpan.textContent = len;
+
+                counter.classList.remove('warning', 'limit');
+                if (len >= 2000) {
+                    counter.classList.add('limit');
+                } else if (len >= 1800) {
+                    counter.classList.add('warning');
+                }
+            }
+
+            textbox.addEventListener('input', updateCount);
+            updateCount();
+        }
+    }
+
     function forceHorizontalLayout() {
+        const container = document.querySelector('.gradio-container');
+        if (container) {
+            container.style.maxWidth = '85vw';
+            container.style.width = '85vw';
+        }
+
         const mainRow = document.getElementById('main-row');
         if (mainRow) {
-            mainRow.style.display = 'flex';
             mainRow.style.flexDirection = 'row';
             mainRow.style.flexWrap = 'nowrap';
+            mainRow.style.display = 'flex';
+            mainRow.style.width = '100%';
         }
 
+        const rows = document.querySelectorAll('.gradio-row');
+        rows.forEach(row => {
+            row.style.flexDirection = 'row';
+            row.style.flexWrap = 'nowrap';
+            row.style.display = 'flex';
+        });
+
         const inputCol = document.getElementById('input-column');
         if (inputCol) {
-            inputCol.style.flex = '0 0 550px';
             inputCol.style.width = '550px';
             inputCol.style.minWidth = '550px';
             inputCol.style.maxWidth = '550px';
+            inputCol.style.flex = '0 0 550px';
         }
 
         const outputCol = document.getElementById('output-column');
         if (outputCol) {
             outputCol.style.flex = '1 1 auto';
+            outputCol.style.minWidth = '0';
         }
     }
 
-    // Character counter setup
-    function setupCharCounter() {
-        const textbox = document.querySelector('#prompt-textbox textarea');
-        const counterDiv = document.querySelector('.char-counter');
-        const countSpan = document.getElementById('char-count');
-
-        if (textbox && countSpan && counterDiv) {
-            const updateCounter = () => {
-                const len = textbox.value.length;
-                countSpan.textContent = len;
-
-                counterDiv.classList.remove('warning', 'limit');
-                if (len >= 2000) {
-                    counterDiv.classList.add('limit');
-                } else if (len >= 1800) {
-                    counterDiv.classList.add('warning');
-                }
-            };
-
-            textbox.addEventListener('input', updateCounter);
-            updateCounter();
-        }
-    }
-
-    // Run on load and with slight delay for Gradio rendering
     forceHorizontalLayout();
     setupCharCounter();
 
-    setTimeout(() => {
-        forceHorizontalLayout();
-        setupCharCounter();
-    }, 500);
+    setTimeout(forceHorizontalLayout, 100);
+    setTimeout(forceHorizontalLayout, 500);
+    setTimeout(forceHorizontalLayout, 1000);
+    setTimeout(forceHorizontalLayout, 2000);
 
-    setTimeout(() => {
-        forceHorizontalLayout();
-        setupCharCounter();
-    }, 1500);
+    setTimeout(setupCharCounter, 100);
+    setTimeout(setupCharCounter, 500);
+
+    const observer = new MutationObserver(forceHorizontalLayout);
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
 }
 """
 
@@ -526,35 +586,6 @@ with gr.Blocks() as demo:
                 container=True,
             )
 
-            # Advanced Settings accordion
-            with gr.Accordion("Advanced Settings", open=False):
-                seed = gr.Slider(
-                    label="Seed",
-                    minimum=0,
-                    maximum=MAX_SEED,
-                    step=1,
-                    value=0,
-                )
-
-                randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-
-                with gr.Row():
-                    num_inference_steps = gr.Slider(
-                        label="Number of inference steps",
-                        minimum=1,
-                        maximum=100,
-                        step=1,
-                        value=30,
-                    )
-
-                    guidance_scale = gr.Slider(
-                        label="Guidance scale",
-                        minimum=0.0,
-                        maximum=10.0,
-                        step=0.1,
-                        value=4,
-                    )
-
             # Generate Button
             generate_btn = gr.Button(
                 "Generate",
@@ -576,8 +607,8 @@ with gr.Blocks() as demo:
     gr.on(
         triggers=[generate_btn.click, prompt.submit],
         fn=infer,
-        inputs=[prompt, aspect_ratio, seed, randomize_seed, num_inference_steps, guidance_scale],
-        outputs=[result, seed],
+        inputs=[prompt, aspect_ratio],
+        outputs=[result],
         show_progress="full"
     )