| | 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 concept maps, synoptic charts and radial diagrams from JSON! |
| | 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.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], |
| | 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], |
| | 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], |
| | 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], |
| | 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], |
| | 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" |
| | ) |
| |
|
| |
|