feat: lpn diagram right size

app.py

@@ -54,33 +54,41 @@ with gr.Blocks(
         margin-right: auto !important;
         padding: 0 1rem !important;
     }
+
     .diagram-container {
-        width: 80% !important;
-        max-width: 800px !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
+        width: 100% !important;
+        max-width: 1000px !important;
+        margin: 2rem auto !important;
     }
+
     .diagram-container img {
         width: 100% !important;
         height: auto !important;
-        object-fit: contain !important;
+        display: block !important;
+        margin: 0 auto !important;
+        cursor: default !important;
     }
+
     .radio-container {
         width: 100% !important;
         max-width: 450px !important;
         margin-bottom: 1rem !important;
     }
-    .image-container {
+
+    .image-preview-container {
         width: 100% !important;
         aspect-ratio: 1 !important;
         max-width: 450px !important;
         margin-bottom: 1rem !important;
     }
-    .image-container img {
+
+    .image-preview-container img {
         width: 100% !important;
         height: 100% !important;
         object-fit: contain !important;
+        cursor: default !important;
     }
+
     .coordinate-container {
         width: 100% !important;
         aspect-ratio: 1 !important;
@@ -88,11 +96,13 @@ with gr.Blocks(
         max-width: 450px !important;
         margin-bottom: 1rem !important;
     }
+
     .coordinate-container img {
         width: 100% !important;
         height: 100% !important;
         object-fit: contain !important;
     }
+
     .button-container {
         width: 100% !important;
         max-width: 450px !important;
@@ -100,12 +110,14 @@ with gr.Blocks(
         justify-content: center !important;
         margin-bottom: 1rem !important;
     }
+
     .documentation {
         margin-top: 2rem !important;
         padding: 1rem !important;
         background-color: #f8f9fa !important;
         border-radius: 8px !important;
     }
+
     .optimal-button {
         width: 200px !important;
     }
@@ -129,6 +141,7 @@ with gr.Blocks(
                 interactive=False,
                 show_download_button=False,
                 show_fullscreen_button=False,
+                container=False,
             )
 
         gr.Markdown(
@@ -179,7 +192,7 @@ with gr.Blocks(
             # Right column for images
             with gr.Column(scale=1):
                 gr.Markdown("### Reference Pattern")
-                with gr.Column(elem_classes="image-container"):
+                with gr.Column(elem_classes="image-preview-container"):
                     reference_image = gr.Image(
                         value="imgs/pattern_0.png",
                         show_label=False,
@@ -189,7 +202,7 @@ with gr.Blocks(
                     )
 
                 gr.Markdown("### Generated Output")
-                with gr.Column(elem_classes="image-container"):
+                with gr.Column(elem_classes="image-preview-container"):
                     output_image = gr.Image(
                         show_label=False,
                         interactive=False,