app.py

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 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__":
    # Define the default dark color
    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: #4CAF50; 
            color: white;
            padding: 10px 20px;
            font-size: 1.1em;
        }
        .gr-button:hover {
            background-color: #45a049;
        }
        .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.
            """
        )

        # 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
            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",
                scale=2 # Allow color picker to take more space
            )
        
        # Add a small space after the color picker row before tabs
        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",
                )
                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"):
                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")
                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"):
                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")
                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"):
                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%")

            # 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",
                )
                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"
    )