feat: move doc up

app.py

@@ -88,7 +88,7 @@ with gr.Blocks(
     .button-container {
         display: flex !important;
         justify-content: center !important;
-        width: 600px !important;  /* Match coordinate container width */
+        width: 600px !important;
     }
     .optimal-button {
         margin-top: 1rem !important;
@@ -100,15 +100,39 @@ with gr.Blocks(
     gr.Markdown(
         """
     # Interactive Image Generation
-    Select a task using the radio buttons, then click on the coordinate selector to generate a new image.
+    
+    ## Method Overview
+    This interactive demo showcases our novel image generation method that uses coordinate-based control.
+    The process allows precise control over generated patterns through a coordinate-conditioning mechanism.
+    """
+    )
+
+    # Add the diagram at the top
+    gr.Image(
+        value="imgs/lpn_diagram.png",
+        show_label=False,
+        interactive=False,
+        show_download_button=False,
+        show_fullscreen_button=False,
+    )
+
+    gr.Markdown(
+        """
+    ### How to Use
+    1. Choose a pattern generation task using the radio buttons
+    2. View the target pattern for your selected task
+    3. Click anywhere in the heatmap to specify coordinates in the latent space
+    4. See the generated image based on your selection
+    
+    Use the "Find Optimal Latent" button to automatically select pre-determined optimal coordinates.
     """
     )
 
     with gr.Row():
         # Left column
-        with gr.Column(scale=1):
+        with gr.Column(scale=3):
             selected_idx = gr.State(value=0)
-            coords = gr.State()  # Add state for coordinates
+            coords = gr.State()
 
             with gr.Column(elem_classes="radio-container"):
                 task_select = gr.Radio(
@@ -140,7 +164,7 @@ with gr.Blocks(
             )
 
         # Right column
-        with gr.Column(scale=1):
+        with gr.Column(scale=4):
             gr.Markdown("### Coordinate Selector")
             gr.Markdown("Click anywhere in the image below to select (x, y) coordinates in the latent space")
             with gr.Column(elem_classes="coordinate-container"):
@@ -157,37 +181,13 @@ with gr.Blocks(
             with gr.Column(elem_classes="button-container"):
                 optimal_button = gr.Button("Find Optimal Latent", elem_classes="optimal-button")
 
-    # Documentation section
+    # Footer with additional information
     with gr.Column(elem_classes="documentation"):
-        gr.Markdown(
-            """
-        ## Method Documentation
-        
-        ### How It Works
-        This interactive demo showcases our novel image generation method that uses coordinate-based control. The process works as follows:
-        
-        1. **Task Selection**: Choose one of four different pattern generation tasks
-        2. **Reference Pattern**: View the target pattern for the selected task
-        3. **Coordinate Selection**: Click anywhere in the heatmap to specify where in the latent space you want to generate from
-        4. **Generation**: The model generates a new image based on your selected coordinates
-        
-        The "Find Optimal Latent" button automatically selects pre-determined optimal coordinates for the current task.
-        """
-        )
-
-        # Add the diagram as a separate Image component instead of Markdown
-        gr.Image(
-            value="imgs/lpn_diagram.png",
-            show_label=False,
-            interactive=False,
-            show_download_button=False,
-            show_fullscreen_button=False,
-        )
-
         gr.Markdown(
             """
         ### Technical Details
-        Our approach uses a novel coordinate-conditioning mechanism that allows precise control over the generated patterns. The heatmap visualization shows the distribution of pattern characteristics across the latent space.
+        Our approach uses a novel coordinate-conditioning mechanism that allows precise control over the generated patterns. 
+        The heatmap visualization shows the distribution of pattern characteristics across the latent space.
         
         For more information, please refer to our [paper](https://arxiv.org/pdf/2411.08706) or GitHub [repository](https://github.com/clement-bonnet/lpn).
         """
@@ -200,7 +200,6 @@ with gr.Blocks(
         outputs=[reference_image, selected_idx, coord_selector],
     )
 
-    # Split the coordinate selection into two events with state passing
     coord_selector.select(
         fn=update_marker,
         inputs=[selected_idx],
@@ -212,7 +211,6 @@ with gr.Blocks(
         outputs=output_image,
     )
 
-    # Add event handler for the optimal latent button
     optimal_button.click(
         fn=find_optimal_latent,
         inputs=[selected_idx],