Update app.py

app.py

@@ -68,40 +68,42 @@ if __name__ == "__main__":
             """
         )
 
-        # Global Color Picker - Repositioned and simplified layout
-        with gr.Row(variant="panel", equal_height=True): # Removed mobile_collapse=False
-            gr.Markdown("### Main Diagram Color") # Removed scale=1 from gr.Markdown
+        # Global Color Picker - Repositioned for clarity and function
+        # This will hold the *value* of the currently selected color
+        current_base_color = gr.State(DEFAULT_BASE_COLOR) 
+
+        with gr.Row(variant="panel"): # Simplified Row, removed equal_height
+            gr.Markdown("### Main Diagram Color") 
             base_color_picker = gr.ColorPicker(
                 label="Select Base Color for Diagram",
-                value=DEFAULT_BASE_COLOR, # Default to your dark color
+                value=DEFAULT_BASE_COLOR, 
                 interactive=True,
                 elem_id="main-color-picker",
-                scale=2 # Allow color picker to take more space
             )
-        
-        # Add a small space after the color picker row before tabs
+            # Update the gr.State variable whenever the color picker changes
+            base_color_picker.change(fn=lambda x: x, inputs=base_color_picker, outputs=current_base_color)
+
         gr.Markdown("<br>") 
 
         with gr.Tabs():
             with gr.TabItem("Concept Map"):
-                # 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",
+                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, current_base_color], # Pass the State's value
+                    outputs=output_cm
                 )
                 gr.Markdown("<br>") 
                 gr.Markdown("## Example Concept Maps")
@@ -110,23 +112,23 @@ if __name__ == "__main__":
                     gr.Image(value="./images/cm2.png", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
 
             with gr.TabItem("Synoptic Chart"):
-                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",
+                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, current_base_color], # Pass the State's value
+                    outputs=output_sc
                 )
                 gr.Markdown("<br>")
                 gr.Markdown("## Example Synoptic Charts")
@@ -135,23 +137,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"):
-                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",
+                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, current_base_color], # Pass the State's value
+                    outputs=output_rd
                 )
                 gr.Markdown("<br>")
                 gr.Markdown("## Example Radial Diagrams")
@@ -161,23 +163,23 @@ if __name__ == "__main__":
 
             # New Tab for Process Flow Diagram
             with gr.TabItem("Process Flow"):
-                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",
+                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, current_base_color], # Pass the State's value
+                    outputs=output_pf
                 )
                 gr.Markdown("<br>")
                 gr.Markdown("## Example Process Flow Diagrams")
@@ -187,23 +189,23 @@ if __name__ == "__main__":
 
             # New Tab for WBS Diagram
             with gr.TabItem("WBS Diagram"):
-                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",
+                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, current_base_color], # Pass the State's value
+                    outputs=output_wbs
                 )
                 gr.Markdown("<br>")
                 gr.Markdown("## Example WBS Diagrams")