wip

app.py

@@ -520,26 +520,31 @@ def create_single_page_pdf(images: List[Image.Image], layout_id: str, num_images
     layout = next((l for l in layouts if l["id"] == layout_id), None)
 
     if not layout:
-        # Fallback to default grid layout
+        # Fallback to default grid layout with proper spacing
         if num_images == 1:
-            positions = [[0.05, 0.05, 0.9, 0.9]]
+            positions = [[0.02, 0.02, 0.96, 0.96]]
         elif num_images == 2:
-            positions = [[0.05, 0.05, 0.425, 0.9], [0.525, 0.05, 0.425, 0.9]]
+            # Horizontal split with gap
+            positions = [[0.02, 0.02, 0.47, 0.96], [0.51, 0.02, 0.47, 0.96]]
         elif num_images == 3:
-            positions = [[0.05, 0.05, 0.283, 0.9], [0.358, 0.05, 0.283, 0.9], [0.666, 0.05, 0.283, 0.9]]
+            # Three horizontal panels with gaps
+            positions = [[0.02, 0.2, 0.31, 0.6], [0.345, 0.2, 0.31, 0.6], [0.67, 0.2, 0.31, 0.6]]
         elif num_images == 4:
-            positions = [[0.05, 0.05, 0.425, 0.425], [0.525, 0.05, 0.425, 0.425],
-                        [0.05, 0.525, 0.425, 0.425], [0.525, 0.525, 0.425, 0.425]]
+            # 2x2 grid with gaps
+            positions = [[0.02, 0.02, 0.47, 0.47], [0.51, 0.02, 0.47, 0.47],
+                        [0.02, 0.51, 0.47, 0.47], [0.51, 0.51, 0.47, 0.47]]
         elif num_images == 5:
-            positions = [[0.05, 0.05, 0.9, 0.3], [0.05, 0.4, 0.283, 0.55], [0.358, 0.4, 0.283, 0.55],
-                        [0.666, 0.4, 0.283, 0.275], [0.666, 0.7, 0.283, 0.275]]
+            # Hero top with 4 small panels below
+            positions = [[0.02, 0.02, 0.96, 0.44], [0.02, 0.48, 0.31, 0.5], [0.345, 0.48, 0.31, 0.5],
+                        [0.67, 0.48, 0.31, 0.24], [0.67, 0.74, 0.31, 0.24]]
         elif num_images == 6:
-            positions = [[0.05, 0.05, 0.425, 0.283], [0.525, 0.05, 0.425, 0.283],
-                        [0.05, 0.358, 0.425, 0.283], [0.525, 0.358, 0.425, 0.283],
-                        [0.05, 0.666, 0.425, 0.283], [0.525, 0.666, 0.425, 0.283]]
+            # 2x3 grid with gaps
+            positions = [[0.02, 0.02, 0.47, 0.31], [0.51, 0.02, 0.47, 0.31],
+                        [0.02, 0.345, 0.47, 0.31], [0.51, 0.345, 0.47, 0.31],
+                        [0.02, 0.67, 0.47, 0.31], [0.51, 0.67, 0.47, 0.31]]
         else:
             # For more than 6, create a simple grid
-            positions = [[0.05, 0.05, 0.9, 0.9]]
+            positions = [[0.02, 0.02, 0.96, 0.96]]
     else:
         positions = layout["positions"]
 
@@ -550,27 +555,13 @@ def create_single_page_pdf(images: List[Image.Image], layout_id: str, num_images
 
         x_rel, y_rel, w_rel, h_rel = pos
 
-        # Pack images more tightly - significantly reduce empty space
-        # Minimal padding between panels (0.5% of page dimensions)
-        padding = 0.005
+        # Add small padding between panels (1% of page dimensions)
+        padding = 0.01
 
-        # Scale up positions and sizes to fill more of the page
-        # This brings everything closer to the edges and each other
-        scale_factor = 1.15  # Increase overall scale by 15%
+        # Don't scale up - use the positions as defined in the layout
+        # This prevents overlapping when there are multiple images
 
-        # Calculate centered scaling to maintain layout proportions
-        center_x = 0.5
-        center_y = 0.5
-
-        # Scale positions relative to center
-        x_rel = center_x + (x_rel - center_x) * scale_factor
-        y_rel = center_y + (y_rel - center_y) * scale_factor
-
-        # Scale sizes
-        w_rel = w_rel * scale_factor
-        h_rel = h_rel * scale_factor
-
-        # Apply bounds checking to prevent overflow
+        # Apply padding to prevent images from touching edges
         if x_rel < padding:
             x_rel = padding
         if y_rel < padding:
@@ -862,21 +853,40 @@ with gr.Blocks(css=css) as demo:
         </div>
         """)
         gr.Markdown("This demo uses [Qwen-Image-Lightning](https://huggingface.co/lightx2v/Qwen-Image-Lightning). Hugigng 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
             )
-            with gr.Column(scale=0):
-                run_button = gr.Button("Generate page 1", variant="primary")
-                reset_button = gr.Button("Reset", variant="secondary")
+            run_button = gr.Button("Generate page 1", variant="primary", scale=1)
+            reset_button = gr.Button("Reset", variant="secondary", scale=1)
 
-        # New row for Style Preset and Page Layout
+        # Second row: 1/3 controls on left, 2/3 PDF preview on right
         with gr.Row():
+            # Left column (1/3) - Controls
             with gr.Column(scale=1):
-                # Number of images slider (affects layout choices)
+                # 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
+                )
+
+                custom_style_text = gr.Textbox(
+                    label="Custom Style Text",
+                    placeholder="Enter custom style (e.g., 'oil painting')",
+                    visible=False,
+                    lines=1
+                )
+
+                # Number of images slider
                 num_images_slider = gr.Slider(
                     label="Images per page",
                     minimum=1,
@@ -886,7 +896,7 @@ with gr.Blocks(css=css) as demo:
                     info="Number of images to generate for the PDF (1-6)"
                 )
 
-            with gr.Column(scale=2):
+                # Page layout dropdown
                 layout_dropdown = gr.Dropdown(
                     label="Page Layout",
                     choices=[("Full Page", "full_page")],
@@ -895,48 +905,52 @@ with gr.Blocks(css=css) as demo:
                     info="How images are arranged on the page"
                 )
 
-            with gr.Column(scale=2):
-                # 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
-                )
-
-            with gr.Column(scale=2):
-                custom_style_text = gr.Textbox(
-                    label="Custom Style Text",
-                    placeholder="Enter custom style (e.g., 'oil painting')",
-                    visible=False,
-                    lines=1
-                )
-
-        with gr.Row():
-            with gr.Column():
-                pdf_preview = PDF(label="PDF Preview", show_label=True, height=600, elem_id="pdf-preview")
+                # Advanced settings accordion
+                with gr.Accordion("Advanced Settings", open=False):
+                    guidance_scale = gr.Slider(
+                        label="Guidance scale (True CFG Scale)",
+                        minimum=1.0,
+                        maximum=5.0,
+                        step=0.1,
+                        value=1.0,
+                    )
+
+                    num_inference_steps = gr.Slider(
+                        label="Number of inference steps",
+                        minimum=4,
+                        maximum=28,
+                        step=1,
+                        value=8,
+                    )
+
+                # 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 128) by clicking the generate button.""")
 
-        with gr.Accordion("Advanced Settings", open=False):
-            with gr.Row():
-                guidance_scale = gr.Slider(
-                    label="Guidance scale (True CFG Scale)",
-                    minimum=1.0,
-                    maximum=5.0,
-                    step=0.1,
-                    value=1.0,
-                )
-
-                num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=4,
-                    maximum=28,
-                    step=1,
-                    value=8,
-                )
+                # 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],
+                        ["sharks raining down on san francisco", "anime", "", 2],
+                        ["A beautiful landscape with mountains and a lake", "watercolor", "", 3],
+                        ["A knight fighting a dragon", "medieval", "", 4],
+                        ["Space battle with laser beams", "sci-fi", "", 5],
+                        ["Detective investigating a mystery", "noir", "", 6],
+                    ]
+
+                    gr.Examples(
+                        examples=styled_examples,
+                        inputs=[prompt, style_preset, custom_style_text, num_images_slider],
+                        outputs=None,  # Don't show outputs for examples
+                        fn=None,
+                        cache_examples=False
+                    )
+
+            # Right column (2/3) - PDF Preview
+            with gr.Column(scale=2):
+                pdf_preview = PDF(label="PDF Preview", show_label=True, height=700, elem_id="pdf-preview")
 
         # Add interaction to show/hide custom style text field
         def toggle_custom_style(style_value):
@@ -959,24 +973,6 @@ with gr.Blocks(css=css) as demo:
             outputs=[layout_dropdown]
         )
 
-        # Update examples to show some with different styles and image counts
-        styled_examples = [
-            ["A capybara wearing a suit holding a sign that reads Hello World", "no_style", "", 1],
-            ["sharks raining down on san francisco", "anime", "", 2],
-            ["A beautiful landscape with mountains and a lake", "watercolor", "", 3],
-            ["A knight fighting a dragon", "medieval", "", 4],
-            ["Space battle with laser beams", "sci-fi", "", 5],
-            ["Detective investigating a mystery", "noir", "", 6],
-        ]
-
-        gr.Examples(
-            examples=styled_examples,
-            inputs=[prompt, style_preset, custom_style_text, num_images_slider],
-            outputs=None,  # Don't show outputs for examples
-            fn=None,
-            cache_examples=False
-        )
-
     # Define the main generation event
     generation_event = gr.on(
         triggers=[run_button.click, prompt.submit],