app.py

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("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("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("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):
                        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%")
    
    demo.launch(
        mcp_server=True,
        share=False,
        server_port=7860,
        server_name="0.0.0.0"
    )