Hugging Face's logo

Spaces:
Agents-MCP-Hackathon
/
Graphify
Running

App Files Community
ZahirJS commited on
Commit
59cb64e
·
verified ·
1 Parent(s): 8828f63

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +77 -485
app.py CHANGED
@@ -1,407 +1,3 @@
1
- # import gradio as gr
2
-
3
- # from class_diagram_generator import generate_class_diagram
4
- # from entity_relationship_generator import generate_entity_relationship_diagram
5
- # from radial_diagram_generator import generate_radial_diagram
6
- # from concept_map_generator import generate_concept_map
7
- # from process_flow_generator import generate_process_flow_diagram
8
- # from timeline_generator import generate_timeline_diagram
9
- # from network_graph_generator import generate_network_graph
10
- # from binary_tree_generator import generate_binary_tree_diagram
11
- # from wbs_diagram_generator import generate_wbs_diagram
12
- # from synoptic_chart_generator import generate_synoptic_chart
13
-
14
- # from sample_data import CLASS_DIAGRAM_JSON, ENTITY_RELATIONSHIP_JSON, RADIAL_DIAGRAM_JSON, CONCEPT_MAP_JSON, PROCESS_FLOW_JSON, TIMELINE_JSON, NETWORK_GRAPH_JSON, BINARY_TREE_JSON, WBS_DIAGRAM_JSON, SYNOPTIC_CHART_JSON
15
-
16
- # if __name__ == "__main__":
17
- # DEFAULT_BASE_COLOR = '#19191a'
18
-
19
- # with gr.Blocks(
20
- # title="Advanced Graph Generator",
21
- # css="""
22
- # .gradio-container {
23
- # font-family: 'Inter', sans-serif !important;
24
- # }
25
- # .gr-tab-item {
26
- # padding: 10px 20px;
27
- # font-size: 1.1em;
28
- # font-weight: bold;
29
- # }
30
- # .gr-button {
31
- # border-radius: 8px;
32
- # box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
33
- # background-color: #FFA500;
34
- # color: white;
35
- # padding: 10px 20px;
36
- # font-size: 1.1em;
37
- # }
38
- # .gr-button:hover {
39
- # background-color: #FF8C00;
40
- # }
41
- # .gr-textbox {
42
- # border-radius: 8px;
43
- # padding: 10px;
44
- # }
45
- # .example-images img {
46
- # max-width: 100%;
47
- # height: auto;
48
- # min-height: 400px;
49
- # object-fit: contain;
50
- # }
51
- # /* Dark mode styles */
52
- # .gradio-container.dark {
53
- # --tw-bg-opacity: 1;
54
- # background-color: rgb(24 24 27 / var(--tw-bg-opacity));
55
- # color: #d4d4d8;
56
- # }
57
- # .gradio-container.dark .gr-textbox {
58
- # background-color: rgb(39 39 42 / var(--tw-bg-opacity));
59
- # color: #d4d4d8;
60
- # border-color: #52525b;
61
- # }
62
- # .gradio-container.dark .gr-tab-item {
63
- # color: #d4d4d8;
64
- # }
65
- # .gradio-container.dark .gr-tab-item.selected {
66
- # background-color: rgb(39 39 42 / var(--tw-bg-opacity));
67
- # color: #fff;
68
- # }
69
- # """
70
- # ) as demo:
71
- # gr.Markdown(
72
- # """
73
- # # Graphify: generate diagrams from JSON super fast and easy ⚡!
74
- # Choose a graph type and provide your JSON data to generate a visual representation.
75
- # All graphs maintain a consistent, elegant style with rounded boxes,
76
- # a dark-to-light color gradient, and a clean white background.
77
- # """
78
- # )
79
-
80
- # with gr.Row(variant="panel"):
81
- # output_format_radio = gr.Radio(
82
- # choices=["png", "svg"],
83
- # value="png",
84
- # label="Output Format",
85
- # interactive=True
86
- # )
87
-
88
- # with gr.Tabs():
89
- # with gr.TabItem("Class Diagram"):
90
- # with gr.Row():
91
- # with gr.Column(scale=1):
92
- # json_input_cd = gr.Textbox(
93
- # value=CLASS_DIAGRAM_JSON,
94
- # placeholder="Paste JSON following the documented format",
95
- # label="JSON Input",
96
- # lines=20
97
- # )
98
- # submit_btn_cd = gr.Button("Generate Class Diagram", variant="primary")
99
-
100
- # with gr.Column(scale=2):
101
- # output_cd = gr.Image(
102
- # label="Generated Diagram",
103
- # type="filepath",
104
- # show_download_button=True,
105
- # height=500
106
- # )
107
-
108
- # submit_btn_cd.click(
109
- # fn=generate_class_diagram,
110
- # inputs=[json_input_cd, output_format_radio],
111
- # outputs=output_cd
112
- # )
113
-
114
- # gr.Markdown("## Examples")
115
- # with gr.Row():
116
- # with gr.Column(scale=1):
117
- # gr.Image(value="./images/cd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
118
- # gr.Image(value="./images/cd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
119
- # gr.Image(value="./images/cd5.svg", label="Sample 5", show_label=True, interactive=False, height="auto")
120
-
121
- # with gr.Column(scale=1):
122
- # gr.Image(value="./images/cd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
123
- # gr.Image(value="./images/cd6.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
124
- # gr.Image(value="./images/cd4.svg", label="Sample 6", show_label=True, interactive=False, height="auto")
125
-
126
- # # with gr.TabItem("Entity Relationship"):
127
- # # with gr.Row():
128
- # # with gr.Column(scale=1):
129
- # # json_input_er = gr.Textbox(
130
- # # value=ENTITY_RELATIONSHIP_JSON,
131
- # # placeholder="Paste JSON following the documented format",
132
- # # label="JSON Input",
133
- # # lines=20
134
- # # )
135
- # # submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
136
-
137
- # # with gr.Column(scale=2):
138
- # # output_er = gr.Image(
139
- # # label="Generated Diagram",
140
- # # type="filepath",
141
- # # show_download_button=True,
142
- # # height=500
143
- # # )
144
-
145
- # # submit_btn_er.click(
146
- # # fn=generate_entity_relationship_diagram,
147
- # # inputs=[json_input_er, output_format_radio],
148
- # # outputs=output_er
149
- # # )
150
-
151
- # # gr.Markdown("## Examples")
152
- # # with gr.Row(elem_classes=["example-images"]):
153
- # # gr.Image(value="./images/er1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
154
- # # gr.Image(value="./images/er2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
155
-
156
- # with gr.TabItem("Radial Diagram"):
157
- # with gr.Row():
158
- # with gr.Column(scale=1):
159
- # json_input_rd = gr.Textbox(
160
- # value=RADIAL_DIAGRAM_JSON,
161
- # placeholder="Paste JSON following the documented format",
162
- # label="JSON Input",
163
- # lines=20
164
- # )
165
- # submit_btn_rd = gr.Button("Generate Radial Diagram", variant="primary")
166
-
167
- # with gr.Column(scale=2):
168
- # output_rd = gr.Image(
169
- # label="Generated Diagram",
170
- # type="filepath",
171
- # show_download_button=True,
172
- # height=500
173
- # )
174
-
175
- # submit_btn_rd.click(
176
- # fn=generate_radial_diagram,
177
- # inputs=[json_input_rd, output_format_radio],
178
- # outputs=output_rd
179
- # )
180
-
181
- # gr.Markdown("## Examples")
182
- # with gr.Row(elem_classes=["example-images"]):
183
- # gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
184
- # gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
185
- # gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto", width="100%")
186
- # gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False, height="auto", width="100%")
187
-
188
- # with gr.TabItem("Concept Map"):
189
- # with gr.Row():
190
- # with gr.Column(scale=1):
191
- # json_input_cm = gr.Textbox(
192
- # value=CONCEPT_MAP_JSON,
193
- # placeholder="Paste JSON following the documented format",
194
- # label="JSON Input",
195
- # lines=20
196
- # )
197
- # submit_btn_cm = gr.Button("Generate Concept Map", variant="primary")
198
-
199
- # with gr.Column(scale=2):
200
- # output_cm = gr.Image(
201
- # label="Generated Diagram",
202
- # type="filepath",
203
- # show_download_button=True,
204
- # height=500
205
- # )
206
-
207
- # submit_btn_cm.click(
208
- # fn=generate_concept_map,
209
- # inputs=[json_input_cm, output_format_radio],
210
- # outputs=output_cm
211
- # )
212
-
213
- # gr.Markdown("## Examples")
214
- # with gr.Row(elem_classes=["example-images"]):
215
- # gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
216
- # gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
217
-
218
- # with gr.TabItem("Timeline"):
219
- # with gr.Row():
220
- # with gr.Column(scale=1):
221
- # json_input_tl = gr.Textbox(
222
- # value=TIMELINE_JSON,
223
- # placeholder="Paste JSON following the documented format",
224
- # label="JSON Input",
225
- # lines=20
226
- # )
227
- # submit_btn_tl = gr.Button("Generate Timeline", variant="primary")
228
-
229
- # with gr.Column(scale=2):
230
- # output_tl = gr.Image(
231
- # label="Generated Diagram",
232
- # type="filepath",
233
- # show_download_button=True,
234
- # height=500
235
- # )
236
-
237
- # submit_btn_tl.click(
238
- # fn=generate_timeline_diagram,
239
- # inputs=[json_input_tl, output_format_radio],
240
- # outputs=output_tl
241
- # )
242
-
243
- # gr.Markdown("## Examples")
244
- # with gr.Row(elem_classes=["example-images"]):
245
- # gr.Image(value="./images/tl1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
246
- # gr.Image(value="./images/tl2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
247
-
248
- # with gr.TabItem("Binary Tree"):
249
- # with gr.Row():
250
- # with gr.Column(scale=1):
251
- # json_input_bt = gr.Textbox(
252
- # value=BINARY_TREE_JSON,
253
- # placeholder="Paste JSON following the documented format",
254
- # label="JSON Input",
255
- # lines=20
256
- # )
257
- # submit_btn_bt = gr.Button("Generate Binary Tree", variant="primary")
258
-
259
- # with gr.Column(scale=2):
260
- # output_bt = gr.Image(
261
- # label="Generated Diagram",
262
- # type="filepath",
263
- # show_download_button=True,
264
- # height=500
265
- # )
266
-
267
- # submit_btn_bt.click(
268
- # fn=generate_binary_tree_diagram,
269
- # inputs=[json_input_bt, output_format_radio],
270
- # outputs=output_bt
271
- # )
272
-
273
- # gr.Markdown("## Examples")
274
- # with gr.Row(elem_classes=["example-images"]):
275
- # gr.Image(value="./images/bt1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
276
- # gr.Image(value="./images/bt2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
277
-
278
- # with gr.TabItem("WBS Diagram"):
279
- # with gr.Row():
280
- # with gr.Column(scale=1):
281
- # json_input_wbs = gr.Textbox(
282
- # value=WBS_DIAGRAM_JSON,
283
- # placeholder="Paste JSON following the documented format",
284
- # label="JSON Input",
285
- # lines=20
286
- # )
287
- # submit_btn_wbs = gr.Button("Generate WBS Diagram", variant="primary")
288
-
289
- # with gr.Column(scale=2):
290
- # output_wbs = gr.Image(
291
- # label="Generated Diagram",
292
- # type="filepath",
293
- # show_download_button=True,
294
- # height=500
295
- # )
296
-
297
- # submit_btn_wbs.click(
298
- # fn=generate_wbs_diagram,
299
- # inputs=[json_input_wbs, output_format_radio],
300
- # outputs=output_wbs
301
- # )
302
-
303
- # gr.Markdown("## Examples")
304
- # with gr.Row(elem_classes=["example-images"]):
305
- # gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
306
- # gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
307
-
308
- # with gr.TabItem("Synoptic Chart"):
309
- # with gr.Row():
310
- # with gr.Column(scale=1):
311
- # json_input_sc = gr.Textbox(
312
- # value=SYNOPTIC_CHART_JSON,
313
- # placeholder="Paste JSON following the documented format",
314
- # label="JSON Input",
315
- # lines=20
316
- # )
317
- # submit_btn_sc = gr.Button("Generate Synoptic Chart", variant="primary")
318
-
319
- # with gr.Column(scale=2):
320
- # output_sc = gr.Image(
321
- # label="Generated Diagram",
322
- # type="filepath",
323
- # show_download_button=True,
324
- # height=500
325
- # )
326
-
327
- # submit_btn_sc.click(
328
- # fn=generate_synoptic_chart,
329
- # inputs=[json_input_sc, output_format_radio],
330
- # outputs=output_sc
331
- # )
332
-
333
- # gr.Markdown("## Examples")
334
- # with gr.Row(elem_classes=["example-images"]):
335
- # gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
336
- # gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
337
-
338
- # with gr.TabItem("Process Flow"):
339
- # with gr.Row():
340
- # with gr.Column(scale=1):
341
- # json_input_pf = gr.Textbox(
342
- # value=PROCESS_FLOW_JSON,
343
- # placeholder="Paste JSON following the documented format",
344
- # label="JSON Input",
345
- # lines=20
346
- # )
347
- # submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
348
-
349
- # with gr.Column(scale=2):
350
- # output_pf = gr.Image(
351
- # label="Generated Diagram",
352
- # type="filepath",
353
- # show_download_button=True,
354
- # height=500
355
- # )
356
-
357
- # submit_btn_pf.click(
358
- # fn=generate_process_flow_diagram,
359
- # inputs=[json_input_pf, output_format_radio],
360
- # outputs=output_pf
361
- # )
362
-
363
- # gr.Markdown("## Examples")
364
- # with gr.Row(elem_classes=["example-images"]):
365
- # gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
366
- # gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
367
-
368
- # with gr.TabItem("Network Graph"):
369
- # with gr.Row():
370
- # with gr.Column(scale=1):
371
- # json_input_ng = gr.Textbox(
372
- # value=NETWORK_GRAPH_JSON,
373
- # placeholder="Paste JSON following the documented format",
374
- # label="JSON Input",
375
- # lines=20
376
- # )
377
- # submit_btn_ng = gr.Button("Generate Network Graph", variant="primary")
378
-
379
- # with gr.Column(scale=2):
380
- # output_ng = gr.Image(
381
- # label="Generated Diagram",
382
- # type="filepath",
383
- # show_download_button=True,
384
- # height=500
385
- # )
386
-
387
- # submit_btn_ng.click(
388
- # fn=generate_network_graph,
389
- # inputs=[json_input_ng, output_format_radio],
390
- # outputs=output_ng
391
- # )
392
-
393
- # gr.Markdown("## Examples")
394
- # with gr.Row(elem_classes=["example-images"]):
395
- # gr.Image(value="./images/ng1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
396
- # gr.Image(value="./images/ng2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
397
-
398
- # demo.launch(
399
- # mcp_server=True,
400
- # share=False,
401
- # server_port=7860,
402
- # server_name="0.0.0.0"
403
- # )
404
-
405
  import gradio as gr
406
 
407
  from class_diagram_generator import generate_class_diagram
@@ -537,7 +133,7 @@ if __name__ == "__main__":
537
  lines=20
538
  )
539
  submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
540
-
541
  with gr.Column(scale=2):
542
  output_er = gr.Image(
543
  label="Generated Diagram",
@@ -545,22 +141,17 @@ if __name__ == "__main__":
545
  show_download_button=True,
546
  height=500
547
  )
548
-
549
  submit_btn_er.click(
550
  fn=generate_entity_relationship_diagram,
551
  inputs=[json_input_er, output_format_radio],
552
  outputs=output_er
553
  )
554
 
555
- gr.Markdown("## Examples")
556
- with gr.Row():
557
- with gr.Column(scale=1):
558
- gr.Image(value="./images/er1.svg", label="Sample 1", show_label=True, interactive=False, height="auto")
559
- gr.Image(value="./images/er3.svg", label="Sample 3", show_label=True, interactive=False, height="auto")
560
-
561
- with gr.Column(scale=1):
562
- gr.Image(value="./images/er2.svg", label="Sample 2", show_label=True, interactive=False, height="auto")
563
- gr.Image(value="./images/er4.svg", label="Sample 4", show_label=True, interactive=False, height="auto")
564
 
565
  with gr.TabItem("Radial Diagram"):
566
  with gr.Row():
@@ -589,75 +180,6 @@ if __name__ == "__main__":
589
 
590
  gr.Markdown("## Examples")
591
  with gr.Row(elem_classes=["example-images"]):
592
- gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
593
- gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
594
-
595
- with gr.TabItem("Process Flow"):
596
- with gr.Row():
597
- with gr.Column(scale=1):
598
- json_input_pf = gr.Textbox(
599
- value=PROCESS_FLOW_JSON,
600
- placeholder="Paste JSON following the documented format",
601
- label="JSON Input",
602
- lines=20
603
- )
604
- submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
605
-
606
- with gr.Column(scale=2):
607
- output_pf = gr.Image(
608
- label="Generated Diagram",
609
- type="filepath",
610
- show_download_button=True,
611
- height=500
612
- )
613
-
614
- submit_btn_pf.click(
615
- fn=generate_process_flow_diagram,
616
- inputs=[json_input_pf, output_format_radio],
617
- outputs=output_pf
618
- )
619
-
620
- gr.Markdown("## Examples")
621
- with gr.Row(elem_classes=["example-images"]):
622
- gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
623
- gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
624
-
625
- with gr.TabItem("Network Graph"):
626
- with gr.Row():
627
- with gr.Column(scale=1):
628
- json_input_ng = gr.Textbox(
629
- value=NETWORK_GRAPH_JSON,
630
- placeholder="Paste JSON following the documented format",
631
- label="JSON Input",
632
- lines=20
633
- )
634
- submit_btn_ng = gr.Button("Generate Network Graph", variant="primary")
635
-
636
- with gr.Column(scale=2):
637
- output_ng = gr.Image(
638
- label="Generated Diagram",
639
- type="filepath",
640
- show_download_button=True,
641
- height=500
642
- )
643
-
644
- submit_btn_ng.click(
645
- fn=generate_network_graph,
646
- inputs=[json_input_ng, output_format_radio],
647
- outputs=output_ng
648
- )
649
-
650
- gr.Markdown("## Examples")
651
- with gr.Row(elem_classes=["example-images"]):
652
- gr.Image(value="./images/ng1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
653
- gr.Image(value="./images/ng2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
654
-
655
- demo.launch(
656
- mcp_server=True,
657
- share=False,
658
- server_port=7860,
659
- server_name="0.0.0.0"
660
- )=["example-images"]):
661
  gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
662
  gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
663
  gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto", width="100%")
@@ -809,4 +331,74 @@ if __name__ == "__main__":
809
  )
810
 
811
  gr.Markdown("## Examples")
812
- with gr.Row(elem_classes
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  import gradio as gr
2
 
3
  from class_diagram_generator import generate_class_diagram
 
133
  lines=20
134
  )
135
  submit_btn_er = gr.Button("Generate ER Diagram", variant="primary")
136
+
137
  with gr.Column(scale=2):
138
  output_er = gr.Image(
139
  label="Generated Diagram",
 
141
  show_download_button=True,
142
  height=500
143
  )
144
+
145
  submit_btn_er.click(
146
  fn=generate_entity_relationship_diagram,
147
  inputs=[json_input_er, output_format_radio],
148
  outputs=output_er
149
  )
150
 
151
+ # gr.Markdown("## Examples")
152
+ # with gr.Row(elem_classes=["example-images"]):
153
+ # gr.Image(value="./images/er1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
154
+ # gr.Image(value="./images/er2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
 
 
 
 
 
155
 
156
  with gr.TabItem("Radial Diagram"):
157
  with gr.Row():
 
180
 
181
  gr.Markdown("## Examples")
182
  with gr.Row(elem_classes=["example-images"]):
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
184
  gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
185
  gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height="auto", width="100%")
 
331
  )
332
 
333
  gr.Markdown("## Examples")
334
+ with gr.Row(elem_classes=["example-images"]):
335
+ gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
336
+ gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
337
+
338
+ with gr.TabItem("Process Flow"):
339
+ with gr.Row():
340
+ with gr.Column(scale=1):
341
+ json_input_pf = gr.Textbox(
342
+ value=PROCESS_FLOW_JSON,
343
+ placeholder="Paste JSON following the documented format",
344
+ label="JSON Input",
345
+ lines=20
346
+ )
347
+ submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
348
+
349
+ with gr.Column(scale=2):
350
+ output_pf = gr.Image(
351
+ label="Generated Diagram",
352
+ type="filepath",
353
+ show_download_button=True,
354
+ height=500
355
+ )
356
+
357
+ submit_btn_pf.click(
358
+ fn=generate_process_flow_diagram,
359
+ inputs=[json_input_pf, output_format_radio],
360
+ outputs=output_pf
361
+ )
362
+
363
+ gr.Markdown("## Examples")
364
+ with gr.Row(elem_classes=["example-images"]):
365
+ gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
366
+ gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
367
+
368
+ with gr.TabItem("Network Graph"):
369
+ with gr.Row():
370
+ with gr.Column(scale=1):
371
+ json_input_ng = gr.Textbox(
372
+ value=NETWORK_GRAPH_JSON,
373
+ placeholder="Paste JSON following the documented format",
374
+ label="JSON Input",
375
+ lines=20
376
+ )
377
+ submit_btn_ng = gr.Button("Generate Network Graph", variant="primary")
378
+
379
+ with gr.Column(scale=2):
380
+ output_ng = gr.Image(
381
+ label="Generated Diagram",
382
+ type="filepath",
383
+ show_download_button=True,
384
+ height=500
385
+ )
386
+
387
+ submit_btn_ng.click(
388
+ fn=generate_network_graph,
389
+ inputs=[json_input_ng, output_format_radio],
390
+ outputs=output_ng
391
+ )
392
+
393
+ gr.Markdown("## Examples")
394
+ with gr.Row(elem_classes=["example-images"]):
395
+ gr.Image(value="./images/ng1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
396
+ gr.Image(value="./images/ng2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
397
+
398
+ demo.launch(
399
+ mcp_server=True,
400
+ share=False,
401
+ server_port=7860,
402
+ server_name="0.0.0.0"
403
+ )
404
+