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" )