Update app.py

app.py

@@ -108,8 +108,8 @@ if __name__ == "__main__":
                 
                 gr.Markdown("## Examples")
                 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%")
+                    gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
 
             with gr.TabItem("Synoptic Chart"):
                 with gr.Row():
@@ -138,8 +138,8 @@ if __name__ == "__main__":
                 
                 gr.Markdown("## Examples")
                 with gr.Row(elem_classes=["example-images"]):
-                    gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height=1150, width="100%")
-                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height=1150, width="100%")
+                    gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
 
             with gr.TabItem("Radial Diagram"):
                 with gr.Row():
@@ -168,10 +168,10 @@ if __name__ == "__main__":
                 
                 gr.Markdown("## Examples")
                 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%")
+                    gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False, height="auto", width="100%")
 
             with gr.TabItem("Process Flow"):
                 with gr.Row():
@@ -230,8 +230,8 @@ if __name__ == "__main__":
                 
                 gr.Markdown("## Examples")
                 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%")
+                    gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
     
     demo.launch(
         mcp_server=True,