Update app.py

app.py

@@ -89,18 +89,80 @@ if __name__ == "__main__":
                     CONCEPT_MAP_JSON,
                     "Concept Map Generator"
                 )
+                gr.Markdown("## Example Concept Maps")
+                with gr.Row(): # <--- Added gr.Row() here for side-by-side layout
+                    gr.Image(
+                        value="./images/cm1.png", # Path to your first example image
+                        label="Sample Concept Map 1",
+                        show_label=True,
+                        interactive=False, # Make it non-interactive
+                        height="auto", # Adjust height automatically
+                        width="100%", # Adjust width automatically to its container
+                        elem_id="concept-map-example-image1" # Optional: for CSS targeting
+                    )
+                    gr.Image(
+                        value="./images/cm2.png", # Path to your second example image
+                        label="Sample Concept Map 2",
+                        show_label=True,
+                        interactive=False,
+                        height="auto",
+                        width="100%",
+                        elem_id="concept-map-example-image2"
+                    )
+
             with gr.TabItem("Synoptic Chart"):
                 synoptic_chart_interface = create_interface(
                     generate_synoptic_chart,
                     SYNOPTIC_CHART_JSON,
                     "Synoptic Chart Generator"
                 )
+                gr.Markdown("## Example Synoptic Charts")
+                with gr.Row(): # <--- Added gr.Row() here
+                    gr.Image(
+                        value="./images/sc1.png", # Path to your first example image
+                        label="Sample Synoptic Chart 1",
+                        show_label=True,
+                        interactive=False,
+                        height="auto",
+                        width="100%",
+                        elem_id="synoptic-chart-example-image1"
+                    )
+                    gr.Image(
+                        value="./images/sc2.png", # Path to your second example image
+                        label="Sample Synoptic Chart 2",
+                        show_label=True,
+                        interactive=False,
+                        height="auto",
+                        width="100%",
+                        elem_id="synoptic-chart-example-image2"
+                    )
+
             with gr.TabItem("Radial Diagram"):
                 radial_diagram_interface = create_interface(
                     generate_radial_diagram,
                     RADIAL_DIAGRAM_JSON,
                     "Radial Diagram Generator"
                 )
+                gr.Markdown("## Example Radial Diagrams")
+                with gr.Row(): # <--- Added gr.Row() here
+                    gr.Image(
+                        value="./images/rd1.png", # Path to your first example image
+                        label="Sample Radial Diagram 1",
+                        show_label=True,
+                        interactive=False,
+                        height="auto",
+                        width="100%",
+                        elem_id="radial-diagram-example-image1"
+                    )
+                    gr.Image(
+                        value="./images/rd2.png", # Path to your second example image
+                        label="Sample Radial Diagram 2",
+                        show_label=True,
+                        interactive=False,
+                        height="auto",
+                        width="100%",
+                        elem_id="radial-diagram-example-image2"
+                    )
     
     demo.launch(
         mcp_server=True,
@@ -108,4 +170,3 @@ if __name__ == "__main__":
         server_port=7860,
         server_name="0.0.0.0"
     )
-