Update app.py

app.py

@@ -117,11 +117,13 @@ if __name__ == "__main__":
                        gr.Image(value="./images/cd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
                        gr.Image(value="./images/cd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
                        gr.Image(value="./images/cd5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
+                       gr.Image(value="./images/cd7.svg", label="Sample 7", show_label=True, interactive=False, height="auto")
                    
                    with gr.Column(scale=1):
                        gr.Image(value="./images/cd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
-                       gr.Image(value="./images/cd6.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
-                       gr.Image(value="./images/cd4.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
+                       gr.Image(value="./images/cd4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
+                       gr.Image(value="./images/cd6.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
+                       gr.Image(value="./images/cd8.svg", label="Sample 8", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Entity Relationship"):
                 with gr.Row():
@@ -148,10 +150,17 @@ if __name__ == "__main__":
                     outputs=output_er
                 )
                 
-            #     gr.Markdown("## Examples")
-            #     with gr.Row(elem_classes=["example-images"]):
-            #         gr.Image(value="./images/er1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-            #         gr.Image(value="./images/er2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                gr.Markdown("## Examples")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/er1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/er3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/er5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/er2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/er4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/er6.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Radial Diagram"):
                 with gr.Row():
@@ -179,11 +188,16 @@ 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="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.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/rd5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/rd6.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Concept Map"):
                 with gr.Row():
@@ -211,9 +225,16 @@ 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="auto", width="100%")
-                    gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/cm3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/cm5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/cm4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/cm6.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Timeline"):
                 with gr.Row():
@@ -241,9 +262,12 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row(elem_classes=["example-images"]):
-                    gr.Image(value="./images/tl1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/tl2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/tl1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/tl2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Binary Tree"):
                 with gr.Row():
@@ -271,9 +295,14 @@ if __name__ == "__main__":
                 )
                 
                 gr.Markdown("## Examples")
-                with gr.Row(elem_classes=["example-images"]):
-                    gr.Image(value="./images/bt1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/bt2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/bt1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/bt3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/bt2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/bt4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("WBS Diagram"):
                 with gr.Row():
@@ -301,9 +330,14 @@ 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="auto", width="100%")
-                    gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/wd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/wd4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Synoptic Chart"):
                 with gr.Row():
@@ -331,9 +365,14 @@ 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="auto", width="100%")
-                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/sc3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                    
+                    with gr.Column(scale=1):
+                        gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        gr.Image(value="./images/sc4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
 
             with gr.TabItem("Process Flow"):
                     with gr.Row():
@@ -361,9 +400,18 @@ if __name__ == "__main__":
                     )
                     
                     gr.Markdown("## Examples")
-                    with gr.Row(elem_classes=["example-images"]):
-                        gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                        gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                        
+                        with gr.Column(scale=1):
+                            gr.Image(value="./images/pf3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/pf4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
+                        
+                        with gr.Column(scale=1):
+                            gr.Image(value="./images/pf5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/pf6.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
     
             with gr.TabItem("Network Graph"):
                     with gr.Row():
@@ -391,14 +439,20 @@ if __name__ == "__main__":
                     )
                     
                     gr.Markdown("## Examples")
-                    with gr.Row(elem_classes=["example-images"]):
-                        gr.Image(value="./images/ng1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                        gr.Image(value="./images/ng2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            gr.Image(value="./images/ng1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/ng3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/ng5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
+                        
+                        with gr.Column(scale=1):
+                            gr.Image(value="./images/ng2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/ng4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
+                            gr.Image(value="./images/ng6.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
     
     demo.launch(
         mcp_server=True,
         share=False,
         server_port=7860,
         server_name="0.0.0.0"
-    )
-
+    )