🎨 Redesign from AnyCoder

app.py

@@ -30,13 +30,12 @@ def generate_image(prompt, height, width, num_inference_steps, seed, randomize_s
         height=int(height),
         width=int(width),
         num_inference_steps=int(num_inference_steps),
-        guidance_scale=0.0,  # Guidance should be 0 for Turbo models
+        guidance_scale=0.0,
         generator=generator,
     ).images[0]
     
     return image, seed
 
-
 # Example prompts
 examples = [
     ["Young Chinese woman in red Hanfu, intricate embroidery. Impeccable makeup, red floral forehead pattern. Elaborate high bun, golden phoenix headdress, red flowers, beads. Holds round folding fan with lady, trees, bird. Neon lightning-bolt lamp, bright yellow glow, above extended left palm. Soft-lit outdoor night background, silhouetted tiered pagoda, blurred colorful distant lights."],
@@ -46,82 +45,141 @@ examples = [
     ["Portrait of a wise old wizard with a long white beard, holding a glowing crystal staff, magical forest background"],
 ]
 
+# Custom theme with modern aesthetics
+custom_theme = gr.themes.Soft(
+    primary_hue="yellow",
+    secondary_hue="amber",
+    neutral_hue="slate",
+    font=gr.themes.GoogleFont("Inter"),
+    text_size="lg",
+    spacing_size="md",
+    radius_size="lg"
+).set(
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_hover="*primary_600",
+    button_primary_text_weight="600",
+    block_title_text_weight="600",
+    block_label_text_weight="500",
+)
+
 # Build the Gradio interface
-with gr.Blocks(title="Z-Image-Turbo Demo") as demo:
+with gr.Blocks(fill_height=True) as demo:
+    # Header
     gr.Markdown(
         """
-        # 🎨 Z-Image-Turbo Demo
+        # 🎨 Z-Image-Turbo
+        **Ultra-fast AI image generation** • Generate stunning images in just 8 steps
         
-        Generate high-quality images using the [Tongyi-MAI/Z-Image-Turbo](https://huggingface.co/Tongyi-MAI/Z-Image-Turbo) model.
-        This turbo model generates images in just 8 inference steps!
-        """
+        <div style="margin-top: 0.5rem; opacity: 0.8;">
+        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: inherit; text-decoration: underline;">anycoder</a>
+        </div>
+        """,
+        elem_classes="header-text"
     )
     
-    with gr.Row():
-        with gr.Column(scale=1):
+    with gr.Row(equal_height=False):
+        # Left column - Input controls
+        with gr.Column(scale=1, min_width=320):
             prompt = gr.Textbox(
-                label="Prompt",
-                placeholder="Enter your image description...",
-                lines=4,
+                label="✨ Your Prompt",
+                placeholder="Describe the image you want to create...",
+                lines=5,
+                max_lines=10,
+                autofocus=True,
             )
             
-            with gr.Row():
-                height = gr.Slider(
-                    minimum=512,
-                    maximum=2048,
-                    value=1024,
-                    step=64,
-                    label="Height",
-                )
-                width = gr.Slider(
-                    minimum=512,
-                    maximum=2048,
-                    value=1024,
-                    step=64,
-                    label="Width",
-                )
-            
-            with gr.Row():
+            with gr.Accordion("⚙️ Advanced Settings", open=False):
+                with gr.Row():
+                    height = gr.Slider(
+                        minimum=512,
+                        maximum=2048,
+                        value=1024,
+                        step=64,
+                        label="Height",
+                        info="Image height in pixels"
+                    )
+                    width = gr.Slider(
+                        minimum=512,
+                        maximum=2048,
+                        value=1024,
+                        step=64,
+                        label="Width",
+                        info="Image width in pixels"
+                    )
+                
                 num_inference_steps = gr.Slider(
                     minimum=1,
                     maximum=20,
                     value=9,
                     step=1,
                     label="Inference Steps",
-                    info="9 steps results in 8 DiT forwards",
+                    info="9 steps = 8 DiT forwards (recommended)"
                 )
-            
-            with gr.Row():
-                seed = gr.Number(
-                    label="Seed",
-                    value=42,
-                    precision=0,
-                )
-                randomize_seed = gr.Checkbox(
-                    label="Randomize Seed",
-                    value=False,
+                
+                with gr.Row():
+                    randomize_seed = gr.Checkbox(
+                        label="🎲 Random Seed",
+                        value=True,
+                    )
+                    seed = gr.Number(
+                        label="Seed",
+                        value=42,
+                        precision=0,
+                        visible=False,
+                    )
+                
+                def toggle_seed(randomize):
+                    return gr.Number(visible=not randomize)
+                
+                randomize_seed.change(
+                    toggle_seed,
+                    inputs=[randomize_seed],
+                    outputs=[seed]
                 )
             
-            generate_btn = gr.Button("🚀 Generate", variant="primary", size="lg")
+            generate_btn = gr.Button(
+                "🚀 Generate Image",
+                variant="primary",
+                size="lg",
+                scale=1
+            )
+            
+            # Example prompts
+            gr.Examples(
+                examples=examples,
+                inputs=[prompt],
+                label="💡 Try these prompts",
+                examples_per_page=5,
+            )
         
-        with gr.Column(scale=1):
+        # Right column - Output
+        with gr.Column(scale=1, min_width=320):
             output_image = gr.Image(
                 label="Generated Image",
                 type="pil",
+                show_label=False,
+                height=600,
+                buttons=["download", "share"],
             )
+            
             used_seed = gr.Number(
-                label="Seed Used",
+                label="🎲 Seed Used",
                 interactive=False,
+                container=True,
             )
     
-    gr.Markdown("### 💡 Example Prompts")
-    gr.Examples(
-        examples=examples,
-        inputs=[prompt],
-        cache_examples=False,
+    # Footer credits
+    gr.Markdown(
+        """
+        ---
+        <div style="text-align: center; opacity: 0.7; font-size: 0.9em; margin-top: 1rem;">
+        <strong>Model:</strong> <a href="https://huggingface.co/Tongyi-MAI/Z-Image-Turbo" target="_blank">Tongyi-MAI/Z-Image-Turbo</a> (Apache 2.0 License) • 
+        <strong>Demo by:</strong> <a href="https://x.com/realmrfakename" target="_blank">@mrfakename</a> • 
+        <strong>Optimizations:</strong> <a href="https://huggingface.co/multimodalart" target="_blank">@multimodalart</a> (FA3 + AoTI)
+        </div>
+        """,
+        elem_classes="footer-text"
     )
-
-    gr.Markdown("Demo by [mrfakename](https://x.com/realmrfakename). Model by Alibaba. The model is licensed under Apache 2.0, you can use generated images commercially! Thanks to [multimodalart](https://huggingface.co/multimodalart) for the FA3 + AoTI enhancements/speedups")
     
     # Connect the generate button
     generate_btn.click(
@@ -138,4 +196,70 @@ with gr.Blocks(title="Z-Image-Turbo Demo") as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(mcp_server=True)
+    demo.launch(
+        theme=custom_theme,
+        css="""
+        .header-text h1 {
+            font-size: 2.5rem !important;
+            font-weight: 700 !important;
+            margin-bottom: 0.5rem !important;
+            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .header-text p {
+            font-size: 1.1rem !important;
+            color: #64748b !important;
+            margin-top: 0 !important;
+        }
+        
+        .footer-text {
+            padding: 1rem 0;
+        }
+        
+        .footer-text a {
+            color: #f59e0b !important;
+            text-decoration: none !important;
+            font-weight: 500;
+        }
+        
+        .footer-text a:hover {
+            text-decoration: underline !important;
+        }
+        
+        /* Mobile optimizations */
+        @media (max-width: 768px) {
+            .header-text h1 {
+                font-size: 1.8rem !important;
+            }
+            
+            .header-text p {
+                font-size: 1rem !important;
+            }
+        }
+        
+        /* Smooth transitions */
+        button, .gr-button {
+            transition: all 0.2s ease !important;
+        }
+        
+        button:hover, .gr-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+        }
+        
+        /* Better spacing */
+        .gradio-container {
+            max-width: 1400px !important;
+            margin: 0 auto !important;
+        }
+        """,
+        footer_links=[
+            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"},
+            "api",
+            "gradio"
+        ],
+        mcp_server=True
+    )