up

app.py

@@ -1015,85 +1015,116 @@ with gr.Blocks(css=css) as demo:
     session_state = gr.State(value={"session_id": str(uuid.uuid4()), "page_count": 0})
 
     with gr.Column(elem_id="col-container"):
-        gr.HTML("""
-        <div id="logo-title" style="display: flex; align-items: center; justify-content: center; padding: 0px 0; position: relative;">
-            <img src="/gradio_api/file=logo.png" alt="AI Comic Factory Logo" style="max-height: 100px; width: auto; margin-right: 0px; border-radius: 6px;">
-            <div style="position: relative; display: flex; flex-direction: column; align-items: center;">
-                
-                <style>
-                    @keyframes pulse {
-                        0%, 100% {
-                            transform: scale(1) rotate(var(--rotation));
-                        }
-                        50% {
-                            transform: scale(1.05) rotate(var(--rotation));
-                        }
-                    }
-                    .comic-label-top {
-                        --rotation: -5deg;
-                    }
-                    .comic-label-bottom {
-                        --rotation: 7deg;
-                    }
-                    .comic-label:hover {
-                        transform: scale(1.1) rotate(var(--rotation)) !important;
-                        transition: transform 0.3s ease;
-                    }
-                    .comic-label::before {
-                        content: '';
-                        position: absolute;
-                        top: -8px;
-                        right: -8px;
-                        width: 30px;
-                        height: 30px;
-                        background: radial-gradient(circle, #ffeb3b, #ffc107);
-                        border-radius: 50%;
-                        border: 2px solid #fff;
-                        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.6);
-                        z-index: -1;
-                        animation: sparkle 1.5s ease-in-out infinite;
-                    }
-                    @keyframes sparkle {
-                        0%, 100% {
-                            transform: scale(1);
-                            opacity: 1;
-                        }
-                        50% {
-                            transform: scale(1.2);
-                            opacity: 0.8;
-                        }
-                    }
-                </style>
-            </div>
-        </div>
-        """)
-        gr.Markdown("This demo uses [Qwen-Image-Lightning](https://huggingface.co/lightx2v/Qwen-Image-Lightning). Hugging Face PRO users can perform more generations.")
-
-        # First row: prompt input, generate button, reset button
-        with gr.Row():
-            prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
-                placeholder="Enter your prompt",
-                container=False,
-                scale=4
-            )
-            run_button = gr.Button("Generate page 1", variant="primary", scale=1)
-            reset_button = gr.Button("Reset", variant="secondary", scale=1)
-
-        # Second row: 1/3 controls on left, 2/3 PDF preview on right
+
+        # Row 1: Logo, Inputs, Buttons
         with gr.Row():
-            # Left column (1/3) - Controls
+            # Column 1: Logo
             with gr.Column(scale=1):
-                # Create dropdown choices from loaded presets
-                style_choices = [(preset["label"], key) for key, preset in STYLE_PRESETS.items()]
-                style_preset = gr.Dropdown(
-                    label="Style Preset",
-                    choices=style_choices,
-                    value="no_style",
-                    interactive=True
+                gr.HTML("""
+                <div id="logo-title" style="display: flex; align-items: center; justify-content: center; padding: 0px 0; position: relative;">
+                    <img src="/gradio_api/file=logo.png" alt="AI Comic Factory Logo" style="max-height: 100px; width: auto; margin-right: 0px; border-radius: 6px;">
+                    <div style="position: relative; display: flex; flex-direction: column; align-items: center;">
+
+                        <style>
+                            @keyframes pulse {
+                                0%, 100% {
+                                    transform: scale(1) rotate(var(--rotation));
+                                }
+                                50% {
+                                    transform: scale(1.05) rotate(var(--rotation));
+                                }
+                            }
+                            .comic-label-top {
+                                --rotation: -5deg;
+                            }
+                            .comic-label-bottom {
+                                --rotation: 7deg;
+                            }
+                            .comic-label:hover {
+                                transform: scale(1.1) rotate(var(--rotation)) !important;
+                                transition: transform 0.3s ease;
+                            }
+                            .comic-label::before {
+                                content: '';
+                                position: absolute;
+                                top: -8px;
+                                right: -8px;
+                                width: 30px;
+                                height: 30px;
+                                background: radial-gradient(circle, #ffeb3b, #ffc107);
+                                border-radius: 50%;
+                                border: 2px solid #fff;
+                                box-shadow: 0 2px 8px rgba(255, 193, 7, 0.6);
+                                z-index: -1;
+                                animation: sparkle 1.5s ease-in-out infinite;
+                            }
+                            @keyframes sparkle {
+                                0%, 100% {
+                                    transform: scale(1);
+                                    opacity: 1;
+                                }
+                                50% {
+                                    transform: scale(1.2);
+                                    opacity: 0.8;
+                                }
+                            }
+                        </style>
+                    </div>
+                </div>
+                """)
+
+            # Column 2: Inputs
+            with gr.Column(scale=2):
+                # Sub-row 1: Prompt
+                prompt = gr.Text(
+                    label="Prompt",
+                    show_label=False,
+                    placeholder="Enter your prompt",
+                    container=False,
                 )
 
+                # Sub-row 2: Style, number of images, layout
+                with gr.Row():
+                    # Create dropdown choices from loaded presets
+                    style_choices = [(preset["label"], key) for key, preset in STYLE_PRESETS.items()]
+                    style_preset = gr.Dropdown(
+                        label="Style Preset",
+                        choices=style_choices,
+                        value="no_style",
+                        interactive=True,
+                        scale=1
+                    )
+
+                    # Number of images slider
+                    num_images_slider = gr.Slider(
+                        label="Images per page",
+                        minimum=1,
+                        # we can support 8, but we will need better layouts
+                        # also starting from 8 I notice some latency for story generation
+                        maximum=7,
+                        step=1,
+                        value=6,
+                        scale=1
+                    )
+
+                    # Page layout dropdown
+                    layout_dropdown = gr.Dropdown(
+                        label="Page Layout",
+                        choices=[("Full Page", "full_page")],
+                        value="full_page",
+                        interactive=True,
+                        scale=1
+                    )
+
+            # Column 3: Buttons
+            with gr.Column(scale=1):
+                run_button = gr.Button("Generate page 1", variant="primary")
+                reset_button = gr.Button("Reset", variant="secondary")
+
+        # Row 2: Settings column and PDF preview
+        with gr.Row():
+            # Left column - Additional settings
+            with gr.Column(scale=1):
                 custom_style_text = gr.Textbox(
                     label="Custom Style Text",
                     placeholder="Enter custom style (e.g., 'oil painting')",
@@ -1101,28 +1132,8 @@ with gr.Blocks(css=css) as demo:
                     lines=1
                 )
 
-                # Number of images slider
-                num_images_slider = gr.Slider(
-                    label="Images per page",
-                    minimum=1,
-
-                    # we can support 8, but we will need better layouts
-                    # also starting from 8 I notice some latency for story generation
-                    maximum=7,
-
-                    step=1,
-                    value=6,
-                    info="Number of images to generate for the PDF"
-                )
-
-                # Page layout dropdown
-                layout_dropdown = gr.Dropdown(
-                    label="Page Layout",
-                    choices=[("Full Page", "full_page")],
-                    value="full_page",
-                    interactive=True,
-                    info="How images are arranged on the page"
-                )
+                # Download link
+                pdf_output = gr.File(label="Download PDF", show_label=True, elem_id="pdf-download")
 
                 # Advanced settings accordion
                 with gr.Accordion("Advanced Settings", open=False):
@@ -1151,36 +1162,12 @@ with gr.Blocks(css=css) as demo:
                         info="Maximum dimension for generated images (higher = better quality but slower)"
                     )
 
-                # Download link
-                pdf_output = gr.File(label="Download PDF", show_label=True, elem_id="pdf-download")
-
                 gr.Markdown("""**Note:** Your images and PDF are saved for up to 24 hours.
                 You can continue adding pages (up to 24) by clicking the generate button.""")
 
-                # Examples section in the left column
-                with gr.Accordion("Examples", open=True):
-                    styled_examples = [
-                        ["A capybara wearing a suit holding a sign that reads Hello World", "no_style", "", 1],
-                        ["Two astronauts discovering alien technology on Mars", "flying_saucer", "", 2],
-                        ["Detective solving a mystery in a noir city", "manga_no_color", "", 3],
-                        ["Epic battle between robots and monsters", "american_comic_90", "", 4],
-                        ["Journey through an enchanted forest", "franco_belgian", "", 5],
-                        ["Space station crew dealing with an emergency", "render", "", 6],
-                        ["Medieval knights on a quest", "medieval", "", 7],
-                        ["Superhero team assembling for final battle", "american_comic_90", "", 8],
-                    ]
-
-                    gr.Examples(
-                        examples=styled_examples,
-                        inputs=[prompt, style_preset, custom_style_text, num_images_slider],
-                        outputs=None,
-                        fn=None,
-                        cache_examples=False
-                    )
-
-            # Right column (2/3) - PDF Preview
+            # Right column - PDF Preview
             with gr.Column(scale=2):
-                pdf_preview = PDF(label="PDF Preview", show_label=True, height=700, elem_id="pdf-preview")
+                pdf_preview = PDF(label="PDF Preview", show_label=True, height=900, elem_id="pdf-preview")
 
         # Add interaction to show/hide custom style text field
         def toggle_custom_style(style_value):