Update app.py

app.py

@@ -1,16 +1,24 @@
 import gradio as gr
 
+# Import generator functions and sample JSONs
 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 sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON
+from process_flow_generator import generate_process_flow_diagram # New Import
+from wbs_diagram_generator import generate_wbs_diagram           # New Import
 
-def create_interface(generator_fn, sample_json, title): 
+from sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON, PROCESS_FLOW_JSON, WBS_DIAGRAM_JSON # New Imports
+
+def create_interface(generator_fn, sample_json, title, base_color_input): # Added base_color_input
     """
     Helper function to create a Gradio Interface for a specific generator.
     """
+    # Create a wrapper function to pass the color input to the generator
+    def wrapped_generator_fn(json_input):
+        return generator_fn(json_input, base_color_input.value) # Pass the value from the color picker
+
     return gr.Interface(
-        fn=generator_fn,
+        fn=wrapped_generator_fn, # Use the wrapper function
         inputs=gr.Textbox(
             value=sample_json,
             placeholder="Paste JSON following the documented format",
@@ -26,6 +34,9 @@ def create_interface(generator_fn, sample_json, title):
     )
 
 if __name__ == "__main__":
+    # Define the default dark color
+    DEFAULT_BASE_COLOR = '#19191a'
+
     with gr.Blocks(
         title="Advanced Graph Generator",
         css="""
@@ -52,6 +63,7 @@ if __name__ == "__main__":
             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));
@@ -73,97 +85,92 @@ if __name__ == "__main__":
     ) as demo:
         gr.Markdown(
             """
-            # Graphify: Generate concept maps, synoptic charts and radial diagrams ⚡!
+            # 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.
             """
         )
 
+        # Global Color Picker
+        with gr.Row():
+            gr.Markdown("### Main Diagram Color")
+            # Changed to gr.ColorPicker for custom color selection
+            base_color_picker = gr.ColorPicker(
+                label="Select Base Color for Diagram",
+                value=DEFAULT_BASE_COLOR, # Default to your dark color
+                interactive=True,
+                elem_id="main-color-picker"
+            )
+
         with gr.Tabs():
             with gr.TabItem("Concept Map"):
+                # Pass the base_color_picker component to create_interface
                 concept_map_interface = create_interface(
                     generate_concept_map,
                     CONCEPT_MAP_JSON,
-                    "Concept Map Generator"
+                    "Concept Map Generator",
+                    base_color_picker # Pass the component itself
                 )
-                gr.Markdown("<br>") 
+                gr.Markdown("<br>")
                 gr.Markdown("## Example Concept Maps")
-                with gr.Row(): 
-                    gr.Image(
-                        value="./images/cm1.png", 
-                        label="Sample Concept Map 1",
-                        show_label=True,
-                        interactive=False, 
-                        height="auto", 
-                        width="100%", 
-                        elem_id="concept-map-example-image1" 
-                    )
-                    gr.Image(
-                        value="./images/cm2.png", 
-                        label="Sample Concept Map 2",
-                        show_label=True,
-                        interactive=False,
-                        height="auto",
-                        width="100%",
-                        elem_id="concept-map-example-image2"
-                    )
+                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"):
                 synoptic_chart_interface = create_interface(
                     generate_synoptic_chart,
                     SYNOPTIC_CHART_JSON,
-                    "Synoptic Chart Generator"
+                    "Synoptic Chart Generator",
+                    base_color_picker
                 )
-                gr.Markdown("<br>") 
+                gr.Markdown("<br>")
                 gr.Markdown("## Example Synoptic Charts")
                 with gr.Row():
-                    gr.Image(
-                        value="./images/sc1.png", 
-                        label="Sample Synoptic Chart 1",
-                        show_label=True,
-                        interactive=False,
-                        height="auto",
-                        width="100%",
-                        elem_id="synoptic-chart-example-image1"
-                    )
-                    gr.Image(
-                        value="./images/sc2.png", 
-                        label="Sample Synoptic Chart 2",
-                        show_label=True,
-                        interactive=False,
-                        height="auto",
-                        width="100%",
-                        elem_id="synoptic-chart-example-image2"
-                    )
+                    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"):
                 radial_diagram_interface = create_interface(
                     generate_radial_diagram,
                     RADIAL_DIAGRAM_JSON,
-                    "Radial Diagram Generator"
+                    "Radial Diagram Generator",
+                    base_color_picker
                 )
-                gr.Markdown("<br>") 
+                gr.Markdown("<br>")
                 gr.Markdown("## Example Radial Diagrams")
-                with gr.Row(): 
-                    gr.Image(
-                        value="./images/rd1.png", 
-                        label="Sample Radial Diagram 1",
-                        show_label=True,
-                        interactive=False,
-                        height="auto",
-                        width="100%",
-                        elem_id="radial-diagram-example-image1"
-                    )
-                    gr.Image(
-                        value="./images/rd2.png", 
-                        label="Sample Radial Diagram 2",
-                        show_label=True,
-                        interactive=False,
-                        height="auto",
-                        width="100%",
-                        elem_id="radial-diagram-example-image2"
-                    )
+                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%")
+
+            # New Tab for Process Flow Diagram
+            with gr.TabItem("Process Flow"):
+                process_flow_interface = create_interface(
+                    generate_process_flow_diagram,
+                    PROCESS_FLOW_JSON,
+                    "Process Flow Diagram Generator",
+                    base_color_picker
+                )
+                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%") # You'll need to create this image
+
+            # New Tab for WBS Diagram
+            with gr.TabItem("WBS Diagram"):
+                wbs_diagram_interface = create_interface(
+                    generate_wbs_diagram,
+                    WBS_DIAGRAM_JSON,
+                    "WBS Diagram Generator",
+                    base_color_picker
+                )
+                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%") # You'll need to create this image
     
     demo.launch(
         mcp_server=True,
@@ -171,3 +178,4 @@ if __name__ == "__main__":
         server_port=7860,
         server_name="0.0.0.0"
     )
+