Update app.py

app.py

@@ -1,3 +1,407 @@
+# import gradio as gr
+
+# 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 timeline_generator import generate_timeline_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 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' 
+
+#     with gr.Blocks(
+#         title="Advanced Graph Generator",
+#         css="""
+#         .gradio-container {
+#             font-family: 'Inter', sans-serif !important;
+#         }
+#         .gr-tab-item {
+#             padding: 10px 20px;
+#             font-size: 1.1em;
+#             font-weight: bold;
+#         }
+#         .gr-button {
+#             border-radius: 8px;
+#             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+#             background-color: #FFA500;
+#             color: white;
+#             padding: 10px 20px;
+#             font-size: 1.1em;
+#         }
+#         .gr-button:hover {
+#             background-color: #FF8C00;
+#         }
+#         .gr-textbox {
+#             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;
+#             background-color: rgb(24 24 27 / var(--tw-bg-opacity));
+#             color: #d4d4d8;
+#         }
+#         .gradio-container.dark .gr-textbox {
+#             background-color: rgb(39 39 42 / var(--tw-bg-opacity)); 
+#             color: #d4d4d8;
+#             border-color: #52525b;
+#         }
+#         .gradio-container.dark .gr-tab-item {
+#             color: #d4d4d8;
+#         }
+#         .gradio-container.dark .gr-tab-item.selected {
+#             background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+#             color: #fff;
+#         }
+#         """
+#     ) as demo:
+#         gr.Markdown(
+#             """
+#             # Graphify: generate diagrams from JSON super fast and easy ⚡!
+#             Choose a graph type and provide your JSON data to generate a visual representation.
+#             All graphs maintain a consistent, elegant style with rounded boxes,
+#             a dark-to-light color gradient, and a clean white background.
+#             """
+#         )
+
+#         with gr.Row(variant="panel"):
+#             output_format_radio = gr.Radio(
+#                 choices=["png", "svg"],
+#                 value="png",
+#                 label="Output Format",
+#                 interactive=True
+#             )
+
+#         with gr.Tabs():
+#             with gr.TabItem("Class Diagram"):
+#                with gr.Row():
+#                    with gr.Column(scale=1):
+#                        json_input_cd = gr.Textbox(
+#                            value=CLASS_DIAGRAM_JSON,
+#                            placeholder="Paste JSON following the documented format",
+#                            label="JSON Input",
+#                            lines=20
+#                        )
+#                        submit_btn_cd = gr.Button("Generate Class Diagram", variant="primary")
+                   
+#                    with gr.Column(scale=2):
+#                        output_cd = gr.Image(
+#                            label="Generated Diagram",
+#                            type="filepath",
+#                            show_download_button=True,
+#                            height=500
+#                        )
+               
+#                submit_btn_cd.click(
+#                    fn=generate_class_diagram, 
+#                    inputs=[json_input_cd, output_format_radio], 
+#                    outputs=output_cd
+#                )
+               
+#                gr.Markdown("## Examples")
+#                with gr.Row():
+#                    with gr.Column(scale=1):
+#                        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")
+                   
+#                    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")
+
+#             # with gr.TabItem("Entity Relationship"):
+#             #     with gr.Row():
+#             #         with gr.Column(scale=1):
+#             #             json_input_er = gr.Textbox(
+#             #                 value=ENTITY_RELATIONSHIP_JSON,
+#             #                 placeholder="Paste JSON following the documented format",
+#             #                 label="JSON Input",
+#             #                 lines=20
+#             #             )
+#             #             submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
+                    
+#             #         with gr.Column(scale=2):
+#             #             output_er = gr.Image(
+#             #                 label="Generated Diagram",
+#             #                 type="filepath",
+#             #                 show_download_button=True,
+#             #                 height=500
+#             #             )
+                
+#             #     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/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():
+#                     with gr.Column(scale=1):
+#                         json_input_rd = gr.Textbox(
+#                             value=RADIAL_DIAGRAM_JSON,
+#                             placeholder="Paste JSON following the documented format",
+#                             label="JSON Input",
+#                             lines=20
+#                         )
+#                         submit_btn_rd = gr.Button("Generate Radial Diagram", variant="primary")
+                    
+#                     with gr.Column(scale=2):
+#                         output_rd = gr.Image(
+#                             label="Generated Diagram",
+#                             type="filepath",
+#                             show_download_button=True,
+#                             height=500
+#                         )
+                
+#                 submit_btn_rd.click(
+#                     fn=generate_radial_diagram, 
+#                     inputs=[json_input_rd, output_format_radio], 
+#                     outputs=output_rd
+#                 )
+                
+#                 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.TabItem("Concept Map"):
+#                 with gr.Row():
+#                     with gr.Column(scale=1):
+#                         json_input_cm = gr.Textbox(
+#                             value=CONCEPT_MAP_JSON,
+#                             placeholder="Paste JSON following the documented format",
+#                             label="JSON Input",
+#                             lines=20
+#                         )
+#                         submit_btn_cm = gr.Button("Generate Concept Map", variant="primary")
+                    
+#                     with gr.Column(scale=2):
+#                         output_cm = 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
+#                 )
+                
+#                 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.TabItem("Timeline"):
+#                 with gr.Row():
+#                     with gr.Column(scale=1):
+#                         json_input_tl = gr.Textbox(
+#                             value=TIMELINE_JSON,
+#                             placeholder="Paste JSON following the documented format",
+#                             label="JSON Input",
+#                             lines=20
+#                         )
+#                         submit_btn_tl = gr.Button("Generate Timeline", variant="primary")
+                    
+#                     with gr.Column(scale=2):
+#                         output_tl = gr.Image(
+#                             label="Generated Diagram",
+#                             type="filepath",
+#                             show_download_button=True,
+#                             height=500
+#                         )
+                
+#                 submit_btn_tl.click(
+#                     fn=generate_timeline_diagram, 
+#                     inputs=[json_input_tl, output_format_radio], 
+#                     outputs=output_tl
+#                 )
+                
+#                 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.TabItem("Binary Tree"):
+#                 with gr.Row():
+#                     with gr.Column(scale=1):
+#                         json_input_bt = gr.Textbox(
+#                             value=BINARY_TREE_JSON,
+#                             placeholder="Paste JSON following the documented format",
+#                             label="JSON Input",
+#                             lines=20
+#                         )
+#                         submit_btn_bt = gr.Button("Generate Binary Tree", variant="primary")
+                    
+#                     with gr.Column(scale=2):
+#                         output_bt = gr.Image(
+#                             label="Generated Diagram",
+#                             type="filepath",
+#                             show_download_button=True,
+#                             height=500
+#                         )
+                
+#                 submit_btn_bt.click(
+#                     fn=generate_binary_tree_diagram, 
+#                     inputs=[json_input_bt, output_format_radio], 
+#                     outputs=output_bt
+#                 )
+                
+#                 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.TabItem("WBS Diagram"):
+#                 with gr.Row():
+#                     with gr.Column(scale=1):
+#                         json_input_wbs = gr.Textbox(
+#                             value=WBS_DIAGRAM_JSON,
+#                             placeholder="Paste JSON following the documented format",
+#                             label="JSON Input",
+#                             lines=20
+#                         )
+#                         submit_btn_wbs = gr.Button("Generate WBS Diagram", variant="primary")
+                    
+#                     with gr.Column(scale=2):
+#                         output_wbs = 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
+#                 )
+                
+#                 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.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%")
+
+#             with gr.TabItem("Process Flow"):
+#                     with gr.Row():
+#                         with gr.Column(scale=1):
+#                             json_input_pf = gr.Textbox(
+#                                 value=PROCESS_FLOW_JSON,
+#                                 placeholder="Paste JSON following the documented format",
+#                                 label="JSON Input",
+#                                 lines=20
+#                             )
+#                             submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
+                        
+#                         with gr.Column(scale=2):
+#                             output_pf = 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
+#                     )
+                    
+#                     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.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%")
+    
+#     demo.launch(
+#         mcp_server=True,
+#         share=False,
+#         server_port=7860,
+#         server_name="0.0.0.0"
+#     )
+
 import gradio as gr
 
 from class_diagram_generator import generate_class_diagram
@@ -123,35 +527,40 @@ if __name__ == "__main__":
                        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")
 
-            # with gr.TabItem("Entity Relationship"):
-            #     with gr.Row():
-            #         with gr.Column(scale=1):
-            #             json_input_er = gr.Textbox(
-            #                 value=ENTITY_RELATIONSHIP_JSON,
-            #                 placeholder="Paste JSON following the documented format",
-            #                 label="JSON Input",
-            #                 lines=20
-            #             )
-            #             submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
-                    
-            #         with gr.Column(scale=2):
-            #             output_er = gr.Image(
-            #                 label="Generated Diagram",
-            #                 type="filepath",
-            #                 show_download_button=True,
-            #                 height=500
-            #             )
+            with gr.TabItem("Entity Relationship"):
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        json_input_er = gr.Textbox(
+                            value=ENTITY_RELATIONSHIP_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
                 
-            #     submit_btn_er.click(
-            #         fn=generate_entity_relationship_diagram, 
-            #         inputs=[json_input_er, output_format_radio], 
-            #         outputs=output_er
-            #     )
+                    with gr.Column(scale=2):
+                        output_er = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
+            
+                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/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")
+                    
+                    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")
 
             with gr.TabItem("Radial Diagram"):
                 with gr.Row():
@@ -180,6 +589,75 @@ 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.TabItem("Process Flow"):
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            json_input_pf = gr.Textbox(
+                                value=PROCESS_FLOW_JSON,
+                                placeholder="Paste JSON following the documented format",
+                                label="JSON Input",
+                                lines=20
+                            )
+                            submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
+                        
+                        with gr.Column(scale=2):
+                            output_pf = 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
+                    )
+                    
+                    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.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%")
+    
+    demo.launch(
+        mcp_server=True,
+        share=False,
+        server_port=7860,
+        server_name="0.0.0.0"
+    )=["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%")
@@ -331,73 +809,4 @@ 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.TabItem("Process Flow"):
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            json_input_pf = gr.Textbox(
-                                value=PROCESS_FLOW_JSON,
-                                placeholder="Paste JSON following the documented format",
-                                label="JSON Input",
-                                lines=20
-                            )
-                            submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
-                        
-                        with gr.Column(scale=2):
-                            output_pf = 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
-                    )
-                    
-                    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.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%")
-    
-    demo.launch(
-        mcp_server=True,
-        share=False,
-        server_port=7860,
-        server_name="0.0.0.0"
-    )
+                with gr.Row(elem_classes