| 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; /* Orange color for buttons */ | |
| color: white; | |
| padding: 10px 20px; | |
| font-size: 1.1em; | |
| } | |
| .gr-button:hover { | |
| background-color: #FF8C00; /* Darker Orange on hover */ | |
| } | |
| .gr-textbox { | |
| border-radius: 8px; | |
| padding: 10px; | |
| } | |
| /* Dark mode styles, adjust if needed */ | |
| .gradio-container.dark { | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(24 24 27 / var(--tw-bg-opacity)); | |
| color: #d4d4d8; /* text-zinc-300 */ | |
| } | |
| .gradio-container.dark .gr-textbox { | |
| background-color: rgb(39 39 42 / var(--tw-bg-opacity)); | |
| color: #d4d4d8; | |
| border-color: #52525b; /* border-zinc-600 */ | |
| } | |
| .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"): | |
| gr.Markdown("### Output Format") | |
| output_format_radio = gr.Radio( | |
| choices=["png", "svg"], | |
| value="png", | |
| label="Select Output File Format", | |
| interactive=True, | |
| elem_id="output-format-selector" | |
| ) | |
| gr.Markdown("<br>") | |
| with gr.Tabs(): | |
| with gr.TabItem("Concept Map"): | |
| json_input_cm = gr.Textbox( | |
| value=CONCEPT_MAP_JSON, | |
| placeholder="Paste JSON following the documented format", | |
| label="Structured JSON Input", | |
| lines=25 | |
| ) | |
| output_cm = gr.Image( | |
| label="Generated Graph", | |
| type="filepath", | |
| show_download_button=True | |
| ) | |
| submit_btn_cm = gr.Button("Submit") | |
| submit_btn_cm.click( | |
| fn=generate_concept_map, | |
| inputs=[json_input_cm, output_format_radio], | |
| outputs=output_cm | |
| ) | |
| gr.Markdown("<br>") | |
| gr.Markdown("## Example Concept Maps") | |
| with gr.Row(): | |
| gr.Image(value="./images/cm1.png", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%") | |
| gr.Image(value="./images/cm2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%") | |
| with gr.TabItem("Synoptic Chart"): | |
| json_input_sc = gr.Textbox( | |
| value=SYNOPTIC_CHART_JSON, | |
| placeholder="Paste JSON following the documented format", | |
| label="Structured JSON Input", | |
| lines=25 | |
| ) | |
| output_sc = gr.Image( | |
| label="Generated Graph", | |
| type="filepath", | |
| show_download_button=True | |
| ) | |
| submit_btn_sc = gr.Button("Submit") | |
| submit_btn_sc.click( | |
| fn=generate_synoptic_chart, | |
| inputs=[json_input_sc, output_format_radio], | |
| outputs=output_sc | |
| ) | |
| gr.Markdown("<br>") | |
| gr.Markdown("## Example Synoptic Charts") | |
| with gr.Row(): | |
| gr.Image(value="./images/sc1.png", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%") | |
| gr.Image(value="./images/sc2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%") | |
| with gr.TabItem("Radial Diagram"): | |
| json_input_rd = gr.Textbox( | |
| value=RADIAL_DIAGRAM_JSON, | |
| placeholder="Paste JSON following the documented format", | |
| label="Structured JSON Input", | |
| lines=25 | |
| ) | |
| output_rd = gr.Image( | |
| label="Generated Graph", | |
| type="filepath", | |
| show_download_button=True | |
| ) | |
| submit_btn_rd = gr.Button("Submit") | |
| submit_btn_rd.click( | |
| fn=generate_radial_diagram, | |
| inputs=[json_input_rd, output_format_radio], | |
| outputs=output_rd | |
| ) | |
| gr.Markdown("<br>") | |
| gr.Markdown("## Example Radial Diagrams") | |
| with gr.Row(): | |
| gr.Image(value="./images/rd1.png", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%") | |
| gr.Image(value="./images/rd2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%") | |
| with gr.TabItem("Process Flow"): | |
| json_input_pf = gr.Textbox( | |
| value=PROCESS_FLOW_JSON, | |
| placeholder="Paste JSON following the documented format", | |
| label="Structured JSON Input", | |
| lines=25 | |
| ) | |
| output_pf = gr.Image( | |
| label="Generated Graph", | |
| type="filepath", | |
| show_download_button=True | |
| ) | |
| submit_btn_pf = gr.Button("Submit") | |
| submit_btn_pf.click( | |
| fn=generate_process_flow_diagram, | |
| inputs=[json_input_pf, output_format_radio], | |
| outputs=output_pf | |
| ) | |
| gr.Markdown("<br>") | |
| gr.Markdown("## Example Process Flow Diagrams") | |
| with gr.Row(): | |
| gr.Image(value="./images/pf1.png", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%") | |
| gr.Image(value="./images/pf2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%") | |
| with gr.TabItem("WBS Diagram"): | |
| json_input_wbs = gr.Textbox( | |
| value=WBS_DIAGRAM_JSON, | |
| placeholder="Paste JSON following the documented format", | |
| label="Structured JSON Input", | |
| lines=25 | |
| ) | |
| output_wbs = gr.Image( | |
| label="Generated Graph", | |
| type="filepath", | |
| show_download_button=True | |
| ) | |
| submit_btn_wbs = gr.Button("Submit") | |
| submit_btn_wbs.click( | |
| fn=generate_wbs_diagram, | |
| inputs=[json_input_wbs, output_format_radio], | |
| outputs=output_wbs | |
| ) | |
| gr.Markdown("<br>") | |
| gr.Markdown("## Example WBS Diagrams") | |
| with gr.Row(): | |
| gr.Image(value="./images/wbs1.png", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%") | |
| gr.Image(value="./images/wbs2.png", 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" | |
| ) | |