Update app.py

app.py

@@ -4,34 +4,10 @@ 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 # New Import
-from wbs_diagram_generator import generate_wbs_diagram           # New Import
+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 # 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=wrapped_generator_fn, # Use the wrapper function
-        inputs=gr.Textbox(
-            value=sample_json,
-            placeholder="Paste JSON following the documented format",
-            label="Structured JSON Input",
-            lines=25
-        ),
-        outputs=gr.Image(
-            label="Generated Graph",
-            type="filepath",
-            show_download_button=True
-        ),
-        title=title,
-    )
+from sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON, PROCESS_FLOW_JSON, WBS_DIAGRAM_JSON
 
 if __name__ == "__main__":
     # Define the default dark color
@@ -92,38 +68,66 @@ if __name__ == "__main__":
             """
         )
 
-        # 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"
-            )
+        # Global Color Picker - Repositioned
+        with gr.Row(variant="panel"): # Using variant="panel" for better visual grouping
+            with gr.Column(scale=1):
+                gr.Markdown("### Main Diagram Color")
+            with gr.Column(scale=2):
+                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"
+                )
+        
+        # Add a small space after the color picker row before tabs
+        gr.Markdown("<br>") 
 
         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",
-                    base_color_picker # Pass the component itself
+                # Directly define gr.Interface and pass base_color_picker as an input
+                gr.Interface(
+                    fn=generate_concept_map,
+                    inputs=[
+                        gr.Textbox(
+                            value=CONCEPT_MAP_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="Structured JSON Input",
+                            lines=25
+                        ),
+                        base_color_picker # Pass the component directly as an input
+                    ],
+                    outputs=gr.Image(
+                        label="Generated Graph",
+                        type="filepath",
+                        show_download_button=True
+                    ),
+                    title="Concept Map Generator",
                 )
-                gr.Markdown("<br>")
+                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"):
-                synoptic_chart_interface = create_interface(
-                    generate_synoptic_chart,
-                    SYNOPTIC_CHART_JSON,
-                    "Synoptic Chart Generator",
-                    base_color_picker
+                gr.Interface(
+                    fn=generate_synoptic_chart,
+                    inputs=[
+                        gr.Textbox(
+                            value=SYNOPTIC_CHART_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="Structured JSON Input",
+                            lines=25
+                        ),
+                        base_color_picker # Pass the component directly as an input
+                    ],
+                    outputs=gr.Image(
+                        label="Generated Graph",
+                        type="filepath",
+                        show_download_button=True
+                    ),
+                    title="Synoptic Chart Generator",
                 )
                 gr.Markdown("<br>")
                 gr.Markdown("## Example Synoptic Charts")
@@ -132,11 +136,23 @@ if __name__ == "__main__":
                     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",
-                    base_color_picker
+                gr.Interface(
+                    fn=generate_radial_diagram,
+                    inputs=[
+                        gr.Textbox(
+                            value=RADIAL_DIAGRAM_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="Structured JSON Input",
+                            lines=25
+                        ),
+                        base_color_picker # Pass the component directly as an input
+                    ],
+                    outputs=gr.Image(
+                        label="Generated Graph",
+                        type="filepath",
+                        show_download_button=True
+                    ),
+                    title="Radial Diagram Generator",
                 )
                 gr.Markdown("<br>")
                 gr.Markdown("## Example Radial Diagrams")
@@ -146,31 +162,55 @@ if __name__ == "__main__":
 
             # 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.Interface(
+                    fn=generate_process_flow_diagram,
+                    inputs=[
+                        gr.Textbox(
+                            value=PROCESS_FLOW_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="Structured JSON Input",
+                            lines=25
+                        ),
+                        base_color_picker # Pass the component directly as an input
+                    ],
+                    outputs=gr.Image(
+                        label="Generated Graph",
+                        type="filepath",
+                        show_download_button=True
+                    ),
+                    title="Process Flow Diagram Generator",
                 )
                 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
+                    gr.Image(value="./images/pf2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
 
             # 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.Interface(
+                    fn=generate_wbs_diagram,
+                    inputs=[
+                        gr.Textbox(
+                            value=WBS_DIAGRAM_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="Structured JSON Input",
+                            lines=25
+                        ),
+                        base_color_picker # Pass the component directly as an input
+                    ],
+                    outputs=gr.Image(
+                        label="Generated Graph",
+                        type="filepath",
+                        show_download_button=True
+                    ),
+                    title="WBS Diagram Generator",
                 )
                 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
+                    gr.Image(value="./images/wbs2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
     
     demo.launch(
         mcp_server=True,