File size: 6,259 Bytes
7c43635
 
1dbebbe
 
 
 
 
6449b98
7c43635
1dbebbe
7c43635
1dbebbe
 
7c43635
1dbebbe
028a336
 
 
7c43635
7e08bc6
1dbebbe
7e08bc6
028a336
7c43635
1dbebbe
7c43635
1dbebbe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c43efb6
1dbebbe
 
 
 
 
 
 
 
 
 
 
c43efb6
1dbebbe
c43efb6
1dbebbe
 
 
c43efb6
1dbebbe
 
 
 
 
 
 
 
 
 
 
 
 
 
335f9c7
1dbebbe
 
 
 
 
 
 
 
 
 
 
4517972
1dbebbe
6449b98
908d9fd
6449b98
908d9fd
6449b98
908d9fd
 
6449b98
 
 
 
908d9fd
 
6449b98
908d9fd
 
 
 
 
 
 
 
1dbebbe
 
 
 
4517972
1dbebbe
6449b98
908d9fd
6449b98
908d9fd
6449b98
908d9fd
 
 
 
 
 
 
 
6449b98
908d9fd
 
 
 
 
 
 
 
1dbebbe
 
 
 
4517972
1dbebbe
6449b98
908d9fd
6449b98
908d9fd
6449b98
908d9fd
 
 
 
 
 
 
 
6449b98
908d9fd
 
 
 
 
 
 
7c43635
 
 
 
9912372
7c43635
1dbebbe
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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 sample_data import CONCEPT_MAP_JSON, SYNOPTIC_CHART_JSON, RADIAL_DIAGRAM_JSON

def create_interface(generator_fn, sample_json, title): 
    """
    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,
    )

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.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.TabItem("Synoptic Chart"):
                synoptic_chart_interface = create_interface(
                    generate_synoptic_chart,
                    SYNOPTIC_CHART_JSON,
                    "Synoptic Chart Generator"
                )
                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"
                    )

            with gr.TabItem("Radial Diagram"):
                radial_diagram_interface = create_interface(
                    generate_radial_diagram,
                    RADIAL_DIAGRAM_JSON,
                    "Radial Diagram Generator"
                )
                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"
                    )
    
    demo.launch(
        mcp_server=True,
        share=False,
        server_port=7860,
        server_name="0.0.0.0"
    )