refactor(app): reorganize code into modular sections

- Add docstrings and type hints to all functions
- Extract constants to top-level (ASPECT_RATIOS, EXAMPLE_PROMPTS, DEFAULT_SETTINGS)
- Move CSS and HTML templates to dedicated sections
- Create builder functions for UI components (build_controls_column, build_output_column)
- Add create_app() factory function for better testability
- Wrap pipeline loading in load_pipeline() function

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

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

app.py

@@ -1,46 +1,20 @@
+"""
+Z-Image-Turbo: Ultra-fast AI image generation powered by diffusion models.
+
+A Gradio-based web application for generating images using the Tongyi-MAI/Z-Image-Turbo
+model. Features a modern dark UI with purple/violet accent theme.
+"""
+
 import torch
 import spaces
 import gradio as gr
 from diffusers import DiffusionPipeline
 
-# Load the pipeline once at startup
-print("Loading Z-Image-Turbo pipeline...")
-pipe = DiffusionPipeline.from_pretrained(
-    "Tongyi-MAI/Z-Image-Turbo",
-    torch_dtype=torch.bfloat16,
-    low_cpu_mem_usage=False,
-)
-pipe.to("cuda")
-
-# ======== AoTI compilation + FA3 ========
-# pipe.transformer.layers._repeated_blocks = ["ZImageTransformerBlock"]
-# spaces.aoti_blocks_load(pipe.transformer.layers, "zerogpu-aoti/Z-Image", variant="fa3")
 
-print("Pipeline loaded!")
-
-@spaces.GPU
-def generate_image(prompt, height, width, num_inference_steps, seed, randomize_seed, progress=gr.Progress(track_tqdm=True)):
-    """Generate an image from the given prompt."""
-    if not prompt or prompt.strip() == "":
-        gr.Warning("Please enter a prompt first!")
-        return None, None
+# =============================================================================
+# CONFIGURATION CONSTANTS
+# =============================================================================
 
-    if randomize_seed:
-        seed = torch.randint(0, 2**32 - 1, (1,)).item()
-
-    generator = torch.Generator("cuda").manual_seed(int(seed))
-    image = pipe(
-        prompt=prompt,
-        height=int(height),
-        width=int(width),
-        num_inference_steps=int(num_inference_steps),
-        guidance_scale=0.0,
-        generator=generator,
-    ).images[0]
-
-    return image, seed
-
-# Aspect ratio presets
 ASPECT_RATIOS = {
     "1:1 Square": (1024, 1024),
     "16:9 Landscape": (1344, 768),
@@ -51,18 +25,7 @@ ASPECT_RATIOS = {
     "Custom": None,
 }
 
-def update_dimensions(aspect_ratio):
-    """Update height and width based on selected aspect ratio."""
-    if aspect_ratio == "Custom":
-        return gr.Slider(interactive=True), gr.Slider(interactive=True)
-
-    dims = ASPECT_RATIOS.get(aspect_ratio)
-    if dims:
-        return gr.Slider(value=dims[1], interactive=False), gr.Slider(value=dims[0], interactive=False)
-    return gr.Slider(interactive=True), gr.Slider(interactive=True)
-
-# Example prompts - curated for quality
-examples = [
+EXAMPLE_PROMPTS = [
     ["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."],
     ["A majestic dragon soaring through clouds at sunset, scales shimmering with iridescent colors, detailed fantasy art style"],
     ["Cozy coffee shop interior, warm lighting, rain on windows, plants on shelves, vintage aesthetic, photorealistic"],
@@ -73,276 +36,76 @@ examples = [
     ["Steampunk mechanical owl with brass gears and glowing amber eyes, perched on old leather-bound books, warm candlelight"],
 ]
 
-# Modern dark theme with purple/violet accent
-custom_theme = gr.themes.Base(
-    primary_hue="violet",
-    secondary_hue="purple",
-    neutral_hue="slate",
-    font=gr.themes.GoogleFont("Inter"),
-    text_size="lg",
-    spacing_size="md",
-    radius_size="lg"
-).set(
-    # Dark mode colors
-    body_background_fill="*neutral_950",
-    body_background_fill_dark="*neutral_950",
-    background_fill_primary="*neutral_900",
-    background_fill_primary_dark="*neutral_900",
-    background_fill_secondary="*neutral_800",
-    background_fill_secondary_dark="*neutral_800",
-
-    # Text colors
-    body_text_color="*neutral_100",
-    body_text_color_dark="*neutral_100",
-    body_text_color_subdued="*neutral_400",
-    body_text_color_subdued_dark="*neutral_400",
-
-    # Border styling
-    border_color_primary="*neutral_700",
-    border_color_primary_dark="*neutral_700",
-    block_border_width="1px",
-
-    # Button styling
-    button_primary_background_fill="linear-gradient(135deg, *primary_500 0%, *secondary_600 100%)",
-    button_primary_background_fill_hover="linear-gradient(135deg, *primary_400 0%, *secondary_500 100%)",
-    button_primary_text_color="white",
-    button_primary_border_color="transparent",
-
-    # Input styling
-    input_background_fill="*neutral_800",
-    input_background_fill_dark="*neutral_800",
-    input_border_color="*neutral_600",
-    input_border_color_dark="*neutral_600",
-    input_border_color_focus="*primary_500",
-    input_border_color_focus_dark="*primary_500",
-
-    # Block styling
-    block_background_fill="*neutral_900",
-    block_background_fill_dark="*neutral_900",
-    block_label_background_fill="*neutral_800",
-    block_label_text_color="*neutral_200",
-    block_title_text_weight="600",
-    block_label_text_weight="500",
-
-    # Shadow and depth
-    shadow_drop="0 4px 20px rgba(0, 0, 0, 0.3)",
-    shadow_drop_lg="0 8px 40px rgba(0, 0, 0, 0.4)",
-)
-
-# Build the Gradio interface
-with gr.Blocks(fill_height=True, title="Z-Image-Turbo | AI Image Generator") as demo:
-    # Hero Header
-    gr.HTML(
-        """
-        <div class="hero-section">
-            <div class="hero-background"></div>
-            <div class="hero-content">
-                <div class="logo-badge">
-                    <span class="logo-icon">Z</span>
-                </div>
-                <h1 class="hero-title">Z-Image-Turbo</h1>
-                <p class="hero-subtitle">Ultra-fast AI image generation powered by state-of-the-art diffusion</p>
-                <div class="hero-stats">
-                    <div class="stat-item">
-                        <span class="stat-value">8</span>
-                        <span class="stat-label">DiT Steps</span>
-                    </div>
-                    <div class="stat-divider"></div>
-                    <div class="stat-item">
-                        <span class="stat-value">2K</span>
-                        <span class="stat-label">Max Resolution</span>
-                    </div>
-                    <div class="stat-divider"></div>
-                    <div class="stat-item">
-                        <span class="stat-value">&lt;3s</span>
-                        <span class="stat-label">Generation</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        """
-    )
-
-    with gr.Row(equal_height=False, elem_classes="main-container"):
-        # Left column - Controls
-        with gr.Column(scale=4, min_width=340, elem_classes="controls-column"):
-            # Prompt Section
-            gr.HTML('<div class="section-header"><span class="section-icon">&#9998;</span> Describe Your Vision</div>')
-
-            prompt = gr.Textbox(
-                label="",
-                placeholder="A mystical forest at twilight, bioluminescent mushrooms glowing softly, ethereal fog weaving between ancient trees...",
-                lines=4,
-                max_lines=8,
-                autofocus=True,
-                elem_classes="prompt-input",
-                show_label=False,
-            )
-
-            # Quick Actions Row
-            with gr.Row(elem_classes="quick-actions"):
-                clear_btn = gr.Button("Clear", size="sm", variant="secondary", elem_classes="action-btn")
-                enhance_btn = gr.Button("Enhance Prompt", size="sm", variant="secondary", elem_classes="action-btn")
-
-            # Aspect Ratio Selection
-            gr.HTML('<div class="section-header"><span class="section-icon">&#9634;</span> Aspect Ratio</div>')
-
-            with gr.Row(elem_classes="aspect-ratio-grid"):
-                aspect_ratio = gr.Radio(
-                    choices=list(ASPECT_RATIOS.keys()),
-                    value="1:1 Square",
-                    label="",
-                    show_label=False,
-                    elem_classes="aspect-radio",
-                )
-
-            # Dimension Controls (shown for Custom)
-            with gr.Row(visible=True, elem_classes="dimension-row") as dim_row:
-                height = gr.Slider(
-                    minimum=512,
-                    maximum=2048,
-                    value=1024,
-                    step=64,
-                    label="Height",
-                    interactive=False,
-                    elem_classes="dimension-slider"
-                )
-                width = gr.Slider(
-                    minimum=512,
-                    maximum=2048,
-                    value=1024,
-                    step=64,
-                    label="Width",
-                    interactive=False,
-                    elem_classes="dimension-slider"
-                )
-
-            # Advanced Settings
-            with gr.Accordion("Advanced Settings", open=False, elem_classes="advanced-accordion"):
-                num_inference_steps = gr.Slider(
-                    minimum=1,
-                    maximum=20,
-                    value=9,
-                    step=1,
-                    label="Quality Steps",
-                    info="Higher = better quality, slower generation (9 recommended)"
-                )
-
-                with gr.Row():
-                    randomize_seed = gr.Checkbox(
-                        label="Random Seed",
-                        value=True,
-                        elem_classes="seed-checkbox"
-                    )
-                    seed = gr.Number(
-                        label="Seed Value",
-                        value=42,
-                        precision=0,
-                        visible=False,
-                        elem_classes="seed-input"
-                    )
-
-            # Generate Button
-            generate_btn = gr.Button(
-                "Generate Image",
-                variant="primary",
-                size="lg",
-                elem_classes="generate-btn",
-            )
-
-            # Examples Section
-            gr.HTML('<div class="section-header"><span class="section-icon">&#10024;</span> Inspiration Gallery</div>')
-
-            gr.Examples(
-                examples=examples,
-                inputs=[prompt],
-                label="",
-                examples_per_page=4,
-                elem_id="examples-gallery",
-            )
-
-        # Right column - Output
-        with gr.Column(scale=5, min_width=400, elem_classes="output-column"):
-            gr.HTML('<div class="section-header"><span class="section-icon">&#128444;</span> Generated Artwork</div>')
-
-            output_image = gr.Image(
-                label="",
-                type="pil",
-                show_label=False,
-                height=580,
-                elem_classes="output-image",
-                show_download_button=True,
-                show_share_button=True,
-            )
-
-            # Image Info Bar
-            with gr.Row(elem_classes="image-info-bar"):
-                used_seed = gr.Number(
-                    label="Seed",
-                    interactive=False,
-                    elem_classes="seed-display",
-                    scale=1,
-                )
-
-    # Footer
-    gr.HTML(
-        """
-        <footer class="app-footer">
-            <div class="footer-content">
-                <div class="footer-links">
-                    <a href="https://huggingface.co/Tongyi-MAI/Z-Image-Turbo" target="_blank" class="footer-link">
-                        <span class="link-icon">&#129303;</span> Model
-                    </a>
-                    <span class="footer-divider">|</span>
-                    <a href="https://x.com/realmrfakename" target="_blank" class="footer-link">
-                        <span class="link-icon">&#128104;&#8205;&#128187;</span> @mrfakename
-                    </a>
-                    <span class="footer-divider">|</span>
-                    <span class="footer-text">Redesigned with care</span>
-                </div>
-                <div class="footer-badge">
-                    Apache 2.0 License
-                </div>
-            </div>
-        </footer>
-        """
+DEFAULT_SETTINGS = {
+    "height": 1024,
+    "width": 1024,
+    "inference_steps": 9,
+    "guidance_scale": 0.0,
+    "seed": 42,
+}
+
+
+# =============================================================================
+# THEME CONFIGURATION
+# =============================================================================
+
+def create_theme():
+    """Create the modern dark theme with purple/violet accents."""
+    return gr.themes.Base(
+        primary_hue="violet",
+        secondary_hue="purple",
+        neutral_hue="slate",
+        font=gr.themes.GoogleFont("Inter"),
+        text_size="lg",
+        spacing_size="md",
+        radius_size="lg"
+    ).set(
+        # Dark mode colors
+        body_background_fill="*neutral_950",
+        body_background_fill_dark="*neutral_950",
+        background_fill_primary="*neutral_900",
+        background_fill_primary_dark="*neutral_900",
+        background_fill_secondary="*neutral_800",
+        background_fill_secondary_dark="*neutral_800",
+        # Text colors
+        body_text_color="*neutral_100",
+        body_text_color_dark="*neutral_100",
+        body_text_color_subdued="*neutral_400",
+        body_text_color_subdued_dark="*neutral_400",
+        # Border styling
+        border_color_primary="*neutral_700",
+        border_color_primary_dark="*neutral_700",
+        block_border_width="1px",
+        # Button styling
+        button_primary_background_fill="linear-gradient(135deg, *primary_500 0%, *secondary_600 100%)",
+        button_primary_background_fill_hover="linear-gradient(135deg, *primary_400 0%, *secondary_500 100%)",
+        button_primary_text_color="white",
+        button_primary_border_color="transparent",
+        # Input styling
+        input_background_fill="*neutral_800",
+        input_background_fill_dark="*neutral_800",
+        input_border_color="*neutral_600",
+        input_border_color_dark="*neutral_600",
+        input_border_color_focus="*primary_500",
+        input_border_color_focus_dark="*primary_500",
+        # Block styling
+        block_background_fill="*neutral_900",
+        block_background_fill_dark="*neutral_900",
+        block_label_background_fill="*neutral_800",
+        block_label_text_color="*neutral_200",
+        block_title_text_weight="600",
+        block_label_text_weight="500",
+        # Shadow and depth
+        shadow_drop="0 4px 20px rgba(0, 0, 0, 0.3)",
+        shadow_drop_lg="0 8px 40px rgba(0, 0, 0, 0.4)",
     )
 
-    # Event handlers
-    def toggle_seed(randomize):
-        return gr.Number(visible=not randomize)
-
-    def clear_prompt():
-        return ""
-
-    def enhance_prompt(prompt_text):
-        if not prompt_text:
-            return prompt_text
-        enhancements = ", highly detailed, professional photography, 8k resolution, cinematic lighting, masterpiece"
-        if not any(e in prompt_text.lower() for e in ["detailed", "8k", "cinematic", "masterpiece"]):
-            return prompt_text + enhancements
-        return prompt_text
-
-    # Connect event handlers
-    randomize_seed.change(toggle_seed, inputs=[randomize_seed], outputs=[seed])
-    aspect_ratio.change(update_dimensions, inputs=[aspect_ratio], outputs=[height, width])
-    clear_btn.click(clear_prompt, outputs=[prompt])
-    enhance_btn.click(enhance_prompt, inputs=[prompt], outputs=[prompt])
 
-    generate_btn.click(
-        fn=generate_image,
-        inputs=[prompt, height, width, num_inference_steps, seed, randomize_seed],
-        outputs=[output_image, used_seed],
-    )
-
-    prompt.submit(
-        fn=generate_image,
-        inputs=[prompt, height, width, num_inference_steps, seed, randomize_seed],
-        outputs=[output_image, used_seed],
-    )
+# =============================================================================
+# CUSTOM CSS
+# =============================================================================
 
-# Custom CSS for modern UI
-custom_css = """
+CUSTOM_CSS = """
 /* ===== ROOT VARIABLES ===== */
 :root {
     --accent-primary: #8b5cf6;
@@ -905,8 +668,403 @@ custom_css = """
 }
 """
 
+
+# =============================================================================
+# HTML TEMPLATES
+# =============================================================================
+
+HERO_HTML = """
+<div class="hero-section">
+    <div class="hero-background"></div>
+    <div class="hero-content">
+        <div class="logo-badge">
+            <span class="logo-icon">Z</span>
+        </div>
+        <h1 class="hero-title">Z-Image-Turbo</h1>
+        <p class="hero-subtitle">Ultra-fast AI image generation powered by state-of-the-art diffusion</p>
+        <div class="hero-stats">
+            <div class="stat-item">
+                <span class="stat-value">8</span>
+                <span class="stat-label">DiT Steps</span>
+            </div>
+            <div class="stat-divider"></div>
+            <div class="stat-item">
+                <span class="stat-value">2K</span>
+                <span class="stat-label">Max Resolution</span>
+            </div>
+            <div class="stat-divider"></div>
+            <div class="stat-item">
+                <span class="stat-value">&lt;3s</span>
+                <span class="stat-label">Generation</span>
+            </div>
+        </div>
+    </div>
+</div>
+"""
+
+FOOTER_HTML = """
+<footer class="app-footer">
+    <div class="footer-content">
+        <div class="footer-links">
+            <a href="https://huggingface.co/Tongyi-MAI/Z-Image-Turbo" target="_blank" class="footer-link">
+                <span class="link-icon">&#129303;</span> Model
+            </a>
+            <span class="footer-divider">|</span>
+            <a href="https://x.com/realmrfakename" target="_blank" class="footer-link">
+                <span class="link-icon">&#128104;&#8205;&#128187;</span> @mrfakename
+            </a>
+            <span class="footer-divider">|</span>
+            <span class="footer-text">Redesigned with care</span>
+        </div>
+        <div class="footer-badge">
+            Apache 2.0 License
+        </div>
+    </div>
+</footer>
+"""
+
+
+# =============================================================================
+# MODEL INITIALIZATION
+# =============================================================================
+
+def load_pipeline():
+    """Load and configure the diffusion pipeline."""
+    print("Loading Z-Image-Turbo pipeline...")
+    pipeline = DiffusionPipeline.from_pretrained(
+        "Tongyi-MAI/Z-Image-Turbo",
+        torch_dtype=torch.bfloat16,
+        low_cpu_mem_usage=False,
+    )
+    pipeline.to("cuda")
+    print("Pipeline loaded!")
+    return pipeline
+
+
+# Initialize pipeline at module level
+pipe = load_pipeline()
+
+
+# =============================================================================
+# CORE FUNCTIONS
+# =============================================================================
+
+@spaces.GPU
+def generate_image(
+    prompt: str,
+    height: int,
+    width: int,
+    num_inference_steps: int,
+    seed: int,
+    randomize_seed: bool,
+    progress=gr.Progress(track_tqdm=True)
+):
+    """Generate an image from the given prompt.
+
+    Args:
+        prompt: Text description of the image to generate
+        height: Output image height in pixels
+        width: Output image width in pixels
+        num_inference_steps: Number of denoising steps
+        seed: Random seed for reproducibility
+        randomize_seed: Whether to use a random seed
+        progress: Gradio progress tracker
+
+    Returns:
+        Tuple of (generated image, seed used)
+    """
+    if not prompt or prompt.strip() == "":
+        gr.Warning("Please enter a prompt first!")
+        return None, None
+
+    if randomize_seed:
+        seed = torch.randint(0, 2**32 - 1, (1,)).item()
+
+    generator = torch.Generator("cuda").manual_seed(int(seed))
+    image = pipe(
+        prompt=prompt,
+        height=int(height),
+        width=int(width),
+        num_inference_steps=int(num_inference_steps),
+        guidance_scale=DEFAULT_SETTINGS["guidance_scale"],
+        generator=generator,
+    ).images[0]
+
+    return image, seed
+
+
+def update_dimensions(aspect_ratio: str):
+    """Update height and width sliders based on selected aspect ratio.
+
+    Args:
+        aspect_ratio: Selected aspect ratio key from ASPECT_RATIOS
+
+    Returns:
+        Tuple of (height slider, width slider) with updated values
+    """
+    if aspect_ratio == "Custom":
+        return gr.Slider(interactive=True), gr.Slider(interactive=True)
+
+    dims = ASPECT_RATIOS.get(aspect_ratio)
+    if dims:
+        return (
+            gr.Slider(value=dims[1], interactive=False),
+            gr.Slider(value=dims[0], interactive=False)
+        )
+    return gr.Slider(interactive=True), gr.Slider(interactive=True)
+
+
+def toggle_seed_visibility(randomize: bool):
+    """Toggle seed input visibility based on randomize checkbox."""
+    return gr.Number(visible=not randomize)
+
+
+def clear_prompt():
+    """Clear the prompt textbox."""
+    return ""
+
+
+def enhance_prompt(prompt_text: str) -> str:
+    """Add quality enhancement keywords to a prompt.
+
+    Args:
+        prompt_text: Original prompt text
+
+    Returns:
+        Enhanced prompt with quality keywords added
+    """
+    if not prompt_text:
+        return prompt_text
+
+    enhancements = ", highly detailed, professional photography, 8k resolution, cinematic lighting, masterpiece"
+    enhancement_keywords = ["detailed", "8k", "cinematic", "masterpiece"]
+
+    if not any(keyword in prompt_text.lower() for keyword in enhancement_keywords):
+        return prompt_text + enhancements
+    return prompt_text
+
+
+# =============================================================================
+# UI BUILDER
+# =============================================================================
+
+def build_controls_column():
+    """Build the left controls column with prompt input and settings."""
+    with gr.Column(scale=4, min_width=340, elem_classes="controls-column"):
+        # Prompt Section
+        gr.HTML('<div class="section-header"><span class="section-icon">&#9998;</span> Describe Your Vision</div>')
+
+        prompt = gr.Textbox(
+            label="",
+            placeholder="A mystical forest at twilight, bioluminescent mushrooms glowing softly, ethereal fog weaving between ancient trees...",
+            lines=4,
+            max_lines=8,
+            autofocus=True,
+            elem_classes="prompt-input",
+            show_label=False,
+        )
+
+        # Quick Actions Row
+        with gr.Row(elem_classes="quick-actions"):
+            clear_btn = gr.Button("Clear", size="sm", variant="secondary", elem_classes="action-btn")
+            enhance_btn = gr.Button("Enhance Prompt", size="sm", variant="secondary", elem_classes="action-btn")
+
+        # Aspect Ratio Selection
+        gr.HTML('<div class="section-header"><span class="section-icon">&#9634;</span> Aspect Ratio</div>')
+
+        with gr.Row(elem_classes="aspect-ratio-grid"):
+            aspect_ratio = gr.Radio(
+                choices=list(ASPECT_RATIOS.keys()),
+                value="1:1 Square",
+                label="",
+                show_label=False,
+                elem_classes="aspect-radio",
+            )
+
+        # Dimension Controls
+        with gr.Row(visible=True, elem_classes="dimension-row"):
+            height = gr.Slider(
+                minimum=512,
+                maximum=2048,
+                value=DEFAULT_SETTINGS["height"],
+                step=64,
+                label="Height",
+                interactive=False,
+                elem_classes="dimension-slider"
+            )
+            width = gr.Slider(
+                minimum=512,
+                maximum=2048,
+                value=DEFAULT_SETTINGS["width"],
+                step=64,
+                label="Width",
+                interactive=False,
+                elem_classes="dimension-slider"
+            )
+
+        # Advanced Settings
+        with gr.Accordion("Advanced Settings", open=False, elem_classes="advanced-accordion"):
+            num_inference_steps = gr.Slider(
+                minimum=1,
+                maximum=20,
+                value=DEFAULT_SETTINGS["inference_steps"],
+                step=1,
+                label="Quality Steps",
+                info="Higher = better quality, slower generation (9 recommended)"
+            )
+
+            with gr.Row():
+                randomize_seed = gr.Checkbox(
+                    label="Random Seed",
+                    value=True,
+                    elem_classes="seed-checkbox"
+                )
+                seed = gr.Number(
+                    label="Seed Value",
+                    value=DEFAULT_SETTINGS["seed"],
+                    precision=0,
+                    visible=False,
+                    elem_classes="seed-input"
+                )
+
+        # Generate Button
+        generate_btn = gr.Button(
+            "Generate Image",
+            variant="primary",
+            size="lg",
+            elem_classes="generate-btn",
+        )
+
+        # Examples Section
+        gr.HTML('<div class="section-header"><span class="section-icon">&#10024;</span> Inspiration Gallery</div>')
+
+        gr.Examples(
+            examples=EXAMPLE_PROMPTS,
+            inputs=[prompt],
+            label="",
+            examples_per_page=4,
+            elem_id="examples-gallery",
+        )
+
+    return {
+        "prompt": prompt,
+        "clear_btn": clear_btn,
+        "enhance_btn": enhance_btn,
+        "aspect_ratio": aspect_ratio,
+        "height": height,
+        "width": width,
+        "num_inference_steps": num_inference_steps,
+        "randomize_seed": randomize_seed,
+        "seed": seed,
+        "generate_btn": generate_btn,
+    }
+
+
+def build_output_column():
+    """Build the right output column with generated image display."""
+    with gr.Column(scale=5, min_width=400, elem_classes="output-column"):
+        gr.HTML('<div class="section-header"><span class="section-icon">&#128444;</span> Generated Artwork</div>')
+
+        output_image = gr.Image(
+            label="",
+            type="pil",
+            show_label=False,
+            height=580,
+            elem_classes="output-image",
+            show_download_button=True,
+            show_share_button=True,
+        )
+
+        # Image Info Bar
+        with gr.Row(elem_classes="image-info-bar"):
+            used_seed = gr.Number(
+                label="Seed",
+                interactive=False,
+                elem_classes="seed-display",
+                scale=1,
+            )
+
+    return {
+        "output_image": output_image,
+        "used_seed": used_seed,
+    }
+
+
+def create_app():
+    """Create and configure the Gradio application."""
+    theme = create_theme()
+
+    with gr.Blocks(fill_height=True, title="Z-Image-Turbo | AI Image Generator") as demo:
+        # Hero Header
+        gr.HTML(HERO_HTML)
+
+        with gr.Row(equal_height=False, elem_classes="main-container"):
+            # Build UI sections
+            controls = build_controls_column()
+            outputs = build_output_column()
+
+        # Footer
+        gr.HTML(FOOTER_HTML)
+
+        # Wire up event handlers
+        controls["randomize_seed"].change(
+            toggle_seed_visibility,
+            inputs=[controls["randomize_seed"]],
+            outputs=[controls["seed"]]
+        )
+
+        controls["aspect_ratio"].change(
+            update_dimensions,
+            inputs=[controls["aspect_ratio"]],
+            outputs=[controls["height"], controls["width"]]
+        )
+
+        controls["clear_btn"].click(
+            clear_prompt,
+            outputs=[controls["prompt"]]
+        )
+
+        controls["enhance_btn"].click(
+            enhance_prompt,
+            inputs=[controls["prompt"]],
+            outputs=[controls["prompt"]]
+        )
+
+        # Generation triggers
+        generation_inputs = [
+            controls["prompt"],
+            controls["height"],
+            controls["width"],
+            controls["num_inference_steps"],
+            controls["seed"],
+            controls["randomize_seed"],
+        ]
+        generation_outputs = [outputs["output_image"], outputs["used_seed"]]
+
+        controls["generate_btn"].click(
+            fn=generate_image,
+            inputs=generation_inputs,
+            outputs=generation_outputs,
+        )
+
+        controls["prompt"].submit(
+            fn=generate_image,
+            inputs=generation_inputs,
+            outputs=generation_outputs,
+        )
+
+    return demo, theme
+
+
+# =============================================================================
+# MAIN ENTRY POINT
+# =============================================================================
+
+# Create the application
+demo, custom_theme = create_app()
+
 if __name__ == "__main__":
     demo.launch(
         theme=custom_theme,
-        css=custom_css,
+        css=CUSTOM_CSS,
     )

requirements.txt

@@ -1,5 +1,6 @@
+torch
 gradio
 git+https://github.com/huggingface/diffusers
 transformers
-kernels
-gradio[mcp]
+accelerate
+spaces