Update app.py

app.py

@@ -37,6 +37,12 @@ if __name__ == "__main__":
             border-radius: 8px;
             padding: 10px;
         }
+        .example-images img {
+            max-width: 100%;
+            height: auto;
+            min-height: 400px;
+            object-fit: contain;
+        }
         /* Dark mode styles */
         .gradio-container.dark { 
             --tw-bg-opacity: 1;
@@ -101,13 +107,13 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row():
-                    gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
-                    gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
+                with gr.Row(elem_classes=["example-images"]):
+                    gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height=500, width="100%")
 
             with gr.TabItem("Synoptic Chart"):
                 with gr.Row():
-                    with gr.Column(scale=2):
+                    with gr.Column(scale=1):
                         json_input_sc = gr.Textbox(
                             value=SYNOPTIC_CHART_JSON,
                             placeholder="Paste JSON following the documented format",
@@ -131,13 +137,13 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row():
-                    gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
-                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
+                with gr.Row(elem_classes=["example-images"]):
+                    gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height=500, width="100%")
 
             with gr.TabItem("Radial Diagram"):
                 with gr.Row():
-                    with gr.Column(scale=2):
+                    with gr.Column(scale=1):
                         json_input_rd = gr.Textbox(
                             value=RADIAL_DIAGRAM_JSON,
                             placeholder="Paste JSON following the documented format",
@@ -161,16 +167,15 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row():
-                    gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height=250)
-                    gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height=250)
-                with gr.Row():
-                    gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height=250)
-                    gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False, height=250)
+                with gr.Row(elem_classes=["example-images"]):
+                    gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False, height=500, width="100%")
 
             with gr.TabItem("Process Flow"):
                 with gr.Row():
-                    with gr.Column(scale=2):
+                    with gr.Column(scale=1):
                         json_input_pf = gr.Textbox(
                             value=PROCESS_FLOW_JSON,
                             placeholder="Paste JSON following the documented format",
@@ -194,13 +199,13 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row():
-                    gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
-                    gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
+                with gr.Row(elem_classes=["example-images"]):
+                    gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height=500, width="100%")
 
             with gr.TabItem("WBS Diagram"):
                 with gr.Row():
-                    with gr.Column(scale=2):
+                    with gr.Column(scale=1):
                         json_input_wbs = gr.Textbox(
                             value=WBS_DIAGRAM_JSON,
                             placeholder="Paste JSON following the documented format",
@@ -224,9 +229,9 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row():
-                    gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
-                    gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
+                with gr.Row(elem_classes=["example-images"]):
+                    gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height=500, width="100%")
+                    gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height=500, width="100%")
     
     demo.launch(
         mcp_server=True,