Update app.py

app.py

@@ -1,3 +1,245 @@
+# 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
@@ -5,8 +247,10 @@ 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
+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' 
@@ -232,6 +476,66 @@ if __name__ == "__main__":
                 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,