Update app.py

app.py

@@ -1,15 +1,17 @@
 import gradio as gr
 
-from concept_map_generator import generate_concept_map
-from synoptic_chart_generator import generate_synoptic_chart
+from class_diagram_generator import generate_class_diagram
+from entity_relationship_generator import generate_entity_relationship_diagram
 from radial_diagram_generator import generate_radial_diagram
+from concept_map_generator import generate_concept_map
 from process_flow_generator import generate_process_flow_diagram
-from wbs_diagram_generator import generate_wbs_diagram
 from timeline_generator import generate_timeline_diagram
-from binary_tree_generator import generate_binary_tree_diagram
 from network_graph_generator import generate_network_graph
+from binary_tree_generator import generate_binary_tree_diagram
+from wbs_diagram_generator import generate_wbs_diagram
+from synoptic_chart_generator import generate_synoptic_chart
 
-from sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON, PROCESS_FLOW_JSON, WBS_DIAGRAM_JSON, TIMELINE_JSON, BINARY_TREE_JSON, NETWORK_GRAPH_JSON
+from sample_data import CLASS_DIAGRAM_JSON, ENTITY_RELATIONSHIP_JSON, RADIAL_DIAGRAM_JSON, CONCEPT_MAP_JSON, PROCESS_FLOW_JSON, TIMELINE_JSON, NETWORK_GRAPH_JSON, BINARY_TREE_JSON, WBS_DIAGRAM_JSON, SYNOPTIC_CHART_JSON
 
 if __name__ == "__main__":
     DEFAULT_BASE_COLOR = '#19191a' 
@@ -84,65 +86,65 @@ if __name__ == "__main__":
             )
 
         with gr.Tabs():
-            with gr.TabItem("Concept Map"):
+            with gr.TabItem("Class Diagram"):
                 with gr.Row():
                     with gr.Column(scale=1):
-                        json_input_cm = gr.Textbox(
-                            value=CONCEPT_MAP_JSON,
+                        json_input_cd = gr.Textbox(
+                            value=CLASS_DIAGRAM_JSON,
                             placeholder="Paste JSON following the documented format",
                             label="JSON Input",
                             lines=20
                         )
-                        submit_btn_cm = gr.Button("Generate Concept Map", variant="primary")
+                        submit_btn_cd = gr.Button("Generate Class Diagram", variant="primary")
                     
                     with gr.Column(scale=2):
-                        output_cm = gr.Image(
+                        output_cd = gr.Image(
                             label="Generated Diagram",
                             type="filepath",
                             show_download_button=True,
                             height=500
                         )
                 
-                submit_btn_cm.click(
-                    fn=generate_concept_map, 
-                    inputs=[json_input_cm, output_format_radio], 
-                    outputs=output_cm
+                submit_btn_cd.click(
+                    fn=generate_class_diagram, 
+                    inputs=[json_input_cd, output_format_radio], 
+                    outputs=output_cd
                 )
                 
                 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%")
+                    gr.Image(value="./images/cd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/cd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
 
-            with gr.TabItem("Synoptic Chart"):
+            with gr.TabItem("Entity Relationship"):
                 with gr.Row():
                     with gr.Column(scale=1):
-                        json_input_sc = gr.Textbox(
-                            value=SYNOPTIC_CHART_JSON,
+                        json_input_er = gr.Textbox(
+                            value=ENTITY_RELATIONSHIP_JSON,
                             placeholder="Paste JSON following the documented format",
                             label="JSON Input",
                             lines=20
                         )
-                        submit_btn_sc = gr.Button("Generate Synoptic Chart", variant="primary")
+                        submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
                     
                     with gr.Column(scale=2):
-                        output_sc = gr.Image(
+                        output_er = gr.Image(
                             label="Generated Diagram",
                             type="filepath",
                             show_download_button=True,
                             height=500
                         )
                 
-                submit_btn_sc.click(
-                    fn=generate_synoptic_chart, 
-                    inputs=[json_input_sc, output_format_radio], 
-                    outputs=output_sc
+                submit_btn_er.click(
+                    fn=generate_entity_relationship_diagram, 
+                    inputs=[json_input_er, output_format_radio], 
+                    outputs=output_er
                 )
                 
                 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%")
+                    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%")
 
             with gr.TabItem("Radial Diagram"):
                 with gr.Row():
@@ -176,65 +178,65 @@ if __name__ == "__main__":
                     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.TabItem("Concept Map"):
                 with gr.Row():
                     with gr.Column(scale=1):
-                        json_input_pf = gr.Textbox(
-                            value=PROCESS_FLOW_JSON,
+                        json_input_cm = gr.Textbox(
+                            value=CONCEPT_MAP_JSON,
                             placeholder="Paste JSON following the documented format",
                             label="JSON Input",
                             lines=20
                         )
-                        submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
+                        submit_btn_cm = gr.Button("Generate Concept Map", variant="primary")
                     
                     with gr.Column(scale=2):
-                        output_pf = gr.Image(
+                        output_cm = gr.Image(
                             label="Generated Diagram",
                             type="filepath",
                             show_download_button=True,
                             height=500
                         )
                 
-                submit_btn_pf.click(
-                    fn=generate_process_flow_diagram, 
-                    inputs=[json_input_pf, output_format_radio], 
-                    outputs=output_pf
+                submit_btn_cm.click(
+                    fn=generate_concept_map, 
+                    inputs=[json_input_cm, output_format_radio], 
+                    outputs=output_cm
                 )
                 
                 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%")
+                    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("WBS Diagram"):
+            with gr.TabItem("Process Flow"):
                 with gr.Row():
                     with gr.Column(scale=1):
-                        json_input_wbs = gr.Textbox(
-                            value=WBS_DIAGRAM_JSON,
+                        json_input_pf = gr.Textbox(
+                            value=PROCESS_FLOW_JSON,
                             placeholder="Paste JSON following the documented format",
                             label="JSON Input",
                             lines=20
                         )
-                        submit_btn_wbs = gr.Button("Generate WBS Diagram", variant="primary")
+                        submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
                     
                     with gr.Column(scale=2):
-                        output_wbs = gr.Image(
+                        output_pf = gr.Image(
                             label="Generated Diagram",
                             type="filepath",
                             show_download_button=True,
                             height=500
                         )
                 
-                submit_btn_wbs.click(
-                    fn=generate_wbs_diagram, 
-                    inputs=[json_input_wbs, output_format_radio], 
-                    outputs=output_wbs
+                submit_btn_pf.click(
+                    fn=generate_process_flow_diagram, 
+                    inputs=[json_input_pf, output_format_radio], 
+                    outputs=output_pf
                 )
                 
                 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%")
+                    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.TabItem("Timeline"):
                 with gr.Row():
@@ -266,6 +268,36 @@ if __name__ == "__main__":
                     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.TabItem("Network Graph"):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        json_input_ng = gr.Textbox(
+                            value=NETWORK_GRAPH_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_ng = gr.Button("Generate Network Graph", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_ng = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
+                
+                submit_btn_ng.click(
+                    fn=generate_network_graph, 
+                    inputs=[json_input_ng, output_format_radio], 
+                    outputs=output_ng
+                )
+                
+                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.TabItem("Binary Tree"):
                 with gr.Row():
                     with gr.Column(scale=1):
@@ -296,35 +328,65 @@ if __name__ == "__main__":
                     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.TabItem("Network Graph"):
+            with gr.TabItem("WBS Diagram"):
                 with gr.Row():
                     with gr.Column(scale=1):
-                        json_input_ng = gr.Textbox(
-                            value=NETWORK_GRAPH_JSON,
+                        json_input_wbs = gr.Textbox(
+                            value=WBS_DIAGRAM_JSON,
                             placeholder="Paste JSON following the documented format",
                             label="JSON Input",
                             lines=20
                         )
-                        submit_btn_ng = gr.Button("Generate Network Graph", variant="primary")
+                        submit_btn_wbs = gr.Button("Generate WBS Diagram", variant="primary")
                     
                     with gr.Column(scale=2):
-                        output_ng = gr.Image(
+                        output_wbs = gr.Image(
                             label="Generated Diagram",
                             type="filepath",
                             show_download_button=True,
                             height=500
                         )
                 
-                submit_btn_ng.click(
-                    fn=generate_network_graph, 
-                    inputs=[json_input_ng, output_format_radio], 
-                    outputs=output_ng
+                submit_btn_wbs.click(
+                    fn=generate_wbs_diagram, 
+                    inputs=[json_input_wbs, output_format_radio], 
+                    outputs=output_wbs
                 )
                 
                 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%")
+                    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.TabItem("Synoptic Chart"):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        json_input_sc = gr.Textbox(
+                            value=SYNOPTIC_CHART_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_sc = gr.Button("Generate Synoptic Chart", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_sc = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
+                
+                submit_btn_sc.click(
+                    fn=generate_synoptic_chart, 
+                    inputs=[json_input_sc, output_format_radio], 
+                    outputs=output_sc
+                )
+                
+                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%")
     
     demo.launch(
         mcp_server=True,