Fix UI to match Z-Image exactly

- Title changed to "FLUX.2-Image"
- Added default prompt value (Empire State Building example)
- Output section now has white background (#ffffff) like Z-Image
- Updated textbox to 20 lines
- Fixed dark mode for output section

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

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

app.py

@@ -373,21 +373,23 @@ button.primary:hover {
     background: #0077ed !important;
 }
 
-/* Output Section */
-.output-section {
-    background: #1d1d1f !important;
+/* Output Section - White background like Z-Image */
+div.output-section {
+    background: #ffffff !important;
     border-radius: 18px !important;
     padding: 32px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !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;
     will-change: auto !important;
     position: relative !important;
+    flex-grow: 1 !important;
+    flex-shrink: 0 !important;
+    flex-basis: auto !important;
 }
 
 .output-section * {
@@ -404,6 +406,8 @@ button.primary:hover {
     height: auto !important;
     object-fit: contain !important;
     transform: none !important;
+    transition: none !important;
+    animation: none !important;
     backface-visibility: hidden !important;
     -webkit-backface-visibility: hidden !important;
 }
@@ -416,8 +420,6 @@ button.primary:hover {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    background: #f5f5f7 !important;
-    border-radius: 12px !important;
 }
 
 .output-section > div > div {
@@ -427,13 +429,18 @@ button.primary:hover {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    background: #f5f5f7 !important;
 }
 
 .output-section * {
     max-width: 100% !important;
 }
 
+/* Dark mode for output section */
+.dark .output-section {
+    background: #1d1d1f !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
 /* Dark Mode - title */
 .dark .main-title,
 .input-section .main-title {
@@ -591,15 +598,16 @@ with gr.Blocks() as demo:
             # Header
             gr.HTML("""
             <div class="header-container">
-                <h1 class="main-title">FLUX.2 [dev]</h1>
+                <h1 class="main-title">FLUX.2-Image</h1>
             </div>
             """)
 
             # Prompt Textbox
             prompt = gr.Textbox(
                 placeholder="Describe the image you want to create...",
-                lines=15,
-                max_lines=20,
+                value="create a highly detailed isometric 3d rendering of the Empire State Building in an architectural visualization style. extremely wide shot, very zoomed out, miniature scale model look. the building must be small enough to fit entirely within the frame with large margins on all sides. show complete building from street level to antenna tip. shown at a 45-degree angle from above, displaying three visible sides with intricate architectural details. use photorealistic textures for materials like stone, glass, metal, or brick. include the base/ground level with tiny people, cars, and landscaping for scale. use a clean white or light grey background. render it in a professional architectural style with soft ambient shadows beneath the structure. every window, column, ornamental detail, and structural element should be clearly visible. style should resemble video game building assets or architectural presentation models — clean, detailed, slightly stylized, but realistic",
+                lines=20,
+                max_lines=25,
                 max_length=2000,
                 label="Prompt",
                 show_label=True,