Spaces:
Running
Running
| # import gradio as gr | |
| # from concept_map_generator import generate_concept_map | |
| # from synoptic_chart_generator import generate_synoptic_chart | |
| # from radial_diagram_generator import generate_radial_diagram | |
| # from process_flow_generator import generate_process_flow_diagram | |
| # from wbs_diagram_generator import generate_wbs_diagram | |
| # from sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON, PROCESS_FLOW_JSON, WBS_DIAGRAM_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("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("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("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("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("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%") | |
| # demo.launch( | |
| # mcp_server=True, | |
| # share=False, | |
| # server_port=7860, | |
| # server_name="0.0.0.0" | |
| # ) | |
| import gradio as gr | |
| from concept_map_generator import generate_concept_map | |
| from synoptic_chart_generator import generate_synoptic_chart | |
| from radial_diagram_generator import generate_radial_diagram | |
| 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 sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON, PROCESS_FLOW_JSON, WBS_DIAGRAM_JSON, TIMELINE_JSON, BINARY_TREE_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("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("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("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("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("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("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%") | |
| demo.launch( | |
| mcp_server=True, | |
| share=False, | |
| server_port=7860, | |
| server_name="0.0.0.0" | |
| ) |