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 sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON

def create_interface(generator_fn, sample_json, title): # Removed 'description' parameter
    """
    Helper function to create a Gradio Interface for a specific generator.
    """
    return gr.Interface(
        fn=generator_fn,
        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,
        # Removed description here
    )

if __name__ == "__main__":
    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;
        }
        .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⚡!
            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.Tabs():
            with gr.TabItem("Concept Map"):
                concept_map_interface = create_interface(
                    generate_concept_map,
                    CONCEPT_MAP_JSON,
                    "Concept Map Generator"
                )
                gr.Space(height="md") # Added space here
                gr.Markdown("## Example Concept Maps")
                with gr.Row(): # <--- Added gr.Row() here for side-by-side layout
                    gr.Image(
                        value="./images/cm1.png", # Path to your first example image
                        label="Sample Concept Map 1",
                        show_label=True,
                        interactive=False, # Make it non-interactive
                        height="auto", # Adjust height automatically
                        width="100%", # Adjust width automatically to its container
                        elem_id="concept-map-example-image1" # Optional: for CSS targeting
                    )
                    gr.Image(
                        value="./images/cm2.png", # Path to your second example image
                        label="Sample Concept Map 2",
                        show_label=True,
                        interactive=False,
                        height="auto",
                        width="100%",
                        elem_id="concept-map-example-image2"
                    )

            with gr.TabItem("Synoptic Chart"):
                synoptic_chart_interface = create_interface(
                    generate_synoptic_chart,
                    SYNOPTIC_CHART_JSON,
                    "Synoptic Chart Generator"
                )
                gr.Space(height="md") # Added space here
                gr.Markdown("## Example Synoptic Charts")
                with gr.Row(): # <--- Added gr.Row() here
                    gr.Image(
                        value="./images/sc1.png", # Path to your first example image
                        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", # Path to your second example image
                        label="Sample Synoptic Chart 2",
                        show_label=True,
                        interactive=False,
                        height="auto",
                        width="100%",
                        elem_id="synoptic-chart-example-image2"
                    )

            with gr.TabItem("Radial Diagram"):
                radial_diagram_interface = create_interface(
                    generate_radial_diagram,
                    RADIAL_DIAGRAM_JSON,
                    "Radial Diagram Generator"
                )
                gr.Space(height="md") # Added space here
                gr.Markdown("## Example Radial Diagrams")
                with gr.Row(): # <--- Added gr.Row() here
                    gr.Image(
                        value="./images/rd1.png", # Path to your first example image
                        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", # Path to your second example image
                        label="Sample Radial Diagram 2",
                        show_label=True,
                        interactive=False,
                        height="auto",
                        width="100%",
                        elem_id="radial-diagram-example-image2"
                    )
    
    demo.launch(
        mcp_server=True,
        share=False,
        server_port=7860,
        server_name="0.0.0.0"
    )