feat: some documentation on the app

app.py

@@ -10,21 +10,13 @@ def create_marker_overlay(image_path: str, x: int, y: int) -> Image.Image:
     """
     Creates an image with a marker at the specified coordinates
     """
-    # Load the base image
     base_image = Image.open(image_path)
-
-    # Create a copy to draw on
     marked_image = base_image.copy()
     draw = ImageDraw.Draw(marked_image)
-
-    # Define marker properties
     marker_size = 10
     marker_color = "red"
-
-    # Draw marker
     draw.line([x - marker_size, y, x + marker_size, y], fill=marker_color, width=2)
     draw.line([x, y - marker_size, x, y + marker_size], fill=marker_color, width=2)
-
     return marked_image
 
 
@@ -44,16 +36,10 @@ def process_coord_click(image_idx: int, evt: gr.SelectData) -> tuple[Image.Image
     Returns both the generated image and the marked coordinate selector
     """
     x, y = evt.index[0], evt.index[1]
-    # Create normalized coordinates for generation
     x_norm, y_norm = x / 1155, y / 1155
-
-    # Generate the output image
     generated_image = generate_image(image_idx, x_norm, y_norm)
-
-    # Create marked coordinate selector
     heatmap_path = f"imgs/heatmap_{image_idx}.png"
     marked_selector = create_marker_overlay(heatmap_path, x, y)
-
     return generated_image, marked_selector
 
 
@@ -73,6 +59,12 @@ with gr.Blocks(
         height: 100% !important;
         object-fit: contain !important;
     }
+    .documentation {
+        margin-top: 2rem !important;
+        padding: 1rem !important;
+        background-color: #f8f9fa !important;
+        border-radius: 8px !important;
+    }
 """
 ) as demo:
     gr.Markdown(
@@ -83,21 +75,21 @@ with gr.Blocks(
     )
 
     with gr.Row():
-        # Left column: Radio selection, reference image, and output
+        # Left column
         with gr.Column(scale=1):
-            # State variable to track selected image index
             selected_idx = gr.State(value=0)
 
-            # Radio buttons with container class
+            # gr.Markdown("### Select Task")
             with gr.Column(elem_classes="radio-container"):
                 task_select = gr.Radio(
                     choices=["Task 1", "Task 2", "Task 3", "Task 4"],
                     value="Task 1",
                     label="Select Task",
+                    # show_label=False,
                     interactive=True,
                 )
 
-            # Reference image component that updates based on selection
+            gr.Markdown("### Reference Pattern")
             reference_image = gr.Image(
                 value="imgs/pattern_0.png",
                 show_label=False,
@@ -108,9 +100,9 @@ with gr.Blocks(
                 show_fullscreen_button=False,
             )
 
-            # Generated image output moved below reference image
+            gr.Markdown("### Generated Output")
             output_image = gr.Image(
-                label="Generated Output",
+                show_label=False,
                 height=300,
                 width=450,
                 show_download_button=False,
@@ -118,14 +110,14 @@ with gr.Blocks(
                 interactive=False,
             )
 
-        # Right column: Larger coordinate selector
+        # Right column
         with gr.Column(scale=1):
-            # Coordinate selector with container class for proper scaling
+            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"):
                 coord_selector = gr.Image(
                     value="imgs/heatmap_0.png",
-                    label="Click to select (x, y) coordinates in the latent space",
-                    show_label=True,
+                    show_label=False,
                     interactive=False,
                     sources=[],
                     container=True,
@@ -133,14 +125,39 @@ with gr.Blocks(
                     show_fullscreen_button=False,
                 )
 
-    # Handle radio button selection
+    # Documentation section
+    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
+        
+        ### Sample Results
+        Here are some example outputs from our method:
+        
+        ![LPN Diagram](imgs/lpn_diagram.png)
+        
+        ### 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.
+        
+        For more information, please refer to our [paper](https://arxiv.org/pdf/2411.08706) or GitHub [repository](https://github.com/clement-bonnet/lpn).
+        """
+        )
+
+    # Event handlers
     task_select.change(
         fn=lambda x: update_reference_image(TASK_TO_INDEX[x]),
         inputs=[task_select],
         outputs=[reference_image, selected_idx, coord_selector],
     )
 
-    # Handle coordinate selection - now updates both output image and coord_selector
     coord_selector.select(
         process_coord_click,
         inputs=[selected_idx],