feat: swap left and right columns

app.py

@@ -48,7 +48,7 @@ def find_optimal_latent(image_idx: int) -> tuple[Image.Image, tuple[int, int], I
 with gr.Blocks(
     css="""
     .container {
-        max-width: 1000px !important;
+        max-width: 1200px !important;
         width: 100% !important;
         margin-left: auto !important;
         margin-right: auto !important;
@@ -68,15 +68,13 @@ with gr.Blocks(
     .radio-container {
         width: 100% !important;
         max-width: 450px !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-bottom: 1rem !important;
     }
     .image-container {
         width: 100% !important;
         aspect-ratio: 1 !important;
         max-width: 450px !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-bottom: 1rem !important;
     }
     .image-container img {
         width: 100% !important;
@@ -87,9 +85,8 @@ with gr.Blocks(
         width: 100% !important;
         aspect-ratio: 1 !important;
         position: relative !important;
-        max-width: 600px !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
+        max-width: 450px !important;
+        margin-bottom: 1rem !important;
     }
     .coordinate-container img {
         width: 100% !important;
@@ -97,12 +94,11 @@ with gr.Blocks(
         object-fit: contain !important;
     }
     .button-container {
+        width: 100% !important;
+        max-width: 450px !important;
         display: flex !important;
         justify-content: center !important;
-        width: 100% !important;
-        max-width: 600px !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
+        margin-bottom: 1rem !important;
     }
     .documentation {
         margin-top: 2rem !important;
@@ -111,8 +107,6 @@ with gr.Blocks(
         border-radius: 8px !important;
     }
     .optimal-button {
-        margin-top: 1rem !important;
-        margin-bottom: 1rem !important;
         width: 200px !important;
     }
 """
@@ -150,7 +144,8 @@ with gr.Blocks(
         )
 
         with gr.Row():
-            with gr.Column(scale=3):
+            # Left column for controls
+            with gr.Column(scale=1):
                 selected_idx = gr.State(value=0)
                 coords = gr.State()
 
@@ -162,26 +157,6 @@ with gr.Blocks(
                         interactive=True,
                     )
 
-                gr.Markdown("### Reference Pattern")
-                with gr.Column(elem_classes="image-container"):
-                    reference_image = gr.Image(
-                        value="imgs/pattern_0.png",
-                        show_label=False,
-                        interactive=False,
-                        show_download_button=False,
-                        show_fullscreen_button=False,
-                    )
-
-                gr.Markdown("### Generated Output")
-                with gr.Column(elem_classes="image-container"):
-                    output_image = gr.Image(
-                        show_label=False,
-                        interactive=False,
-                        show_download_button=False,
-                        show_fullscreen_button=False,
-                    )
-
-            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"
@@ -201,6 +176,27 @@ with gr.Blocks(
                 with gr.Column(elem_classes="button-container"):
                     optimal_button = gr.Button("Find Optimal Latent", elem_classes="optimal-button")
 
+            # Right column for images
+            with gr.Column(scale=1):
+                gr.Markdown("### Reference Pattern")
+                with gr.Column(elem_classes="image-container"):
+                    reference_image = gr.Image(
+                        value="imgs/pattern_0.png",
+                        show_label=False,
+                        interactive=False,
+                        show_download_button=False,
+                        show_fullscreen_button=False,
+                    )
+
+                gr.Markdown("### Generated Output")
+                with gr.Column(elem_classes="image-container"):
+                    output_image = gr.Image(
+                        show_label=False,
+                        interactive=False,
+                        show_download_button=False,
+                        show_fullscreen_button=False,
+                    )
+
         with gr.Column(elem_classes="documentation"):
             gr.Markdown(
                 """