Update app.py

app.py

@@ -25,28 +25,28 @@ if __name__ == "__main__":
         .gr-button {
             border-radius: 8px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            background-color: #FFA500; /* Orange color for buttons */
+            background-color: #FFA500;
             color: white;
             padding: 10px 20px;
             font-size: 1.1em;
         }
         .gr-button:hover {
-            background-color: #FF8C00; /* Darker Orange on hover */
+            background-color: #FF8C00;
         }
         .gr-textbox {
             border-radius: 8px;
             padding: 10px;
         }
-        /* Dark mode styles, adjust if needed */
+        /* Dark mode styles */
         .gradio-container.dark { 
             --tw-bg-opacity: 1;
             background-color: rgb(24 24 27 / var(--tw-bg-opacity));
-            color: #d4d4d8; /* text-zinc-300 */
+            color: #d4d4d8;
         }
         .gradio-container.dark .gr-textbox {
             background-color: rgb(39 39 42 / var(--tw-bg-opacity)); 
             color: #d4d4d8;
-            border-color: #52525b; /* border-zinc-600 */
+            border-color: #52525b;
         }
         .gradio-container.dark .gr-tab-item {
             color: #d4d4d8;
@@ -67,150 +67,170 @@ if __name__ == "__main__":
         )
 
         with gr.Row(variant="panel"):
-            gr.Markdown("### Output Format")
             output_format_radio = gr.Radio(
                 choices=["png", "svg"],
                 value="png",
-                label="Select Output File Format",
-                interactive=True,
-                elem_id="output-format-selector"
+                label="Output Format",
+                interactive=True
             )
 
-        gr.Markdown("<br>") 
-
         with gr.Tabs():
             with gr.TabItem("Concept Map"):
-                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")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        json_input_cm = gr.Textbox(
+                            value=CONCEPT_MAP_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_cm = gr.Button("Generate Concept Map", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_cm = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
                 
                 submit_btn_cm.click(
                     fn=generate_concept_map, 
                     inputs=[json_input_cm, output_format_radio], 
                     outputs=output_cm
                 )
-                gr.Markdown("<br>") 
-                gr.Markdown("## Example Concept Maps")
+                
+                gr.Markdown("## Examples")
                 with gr.Row():
-                    gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/cm1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
+                    gr.Image(value="./images/cm2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
 
             with gr.TabItem("Synoptic Chart"):
-                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")
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        json_input_sc = gr.Textbox(
+                            value=SYNOPTIC_CHART_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_sc = gr.Button("Generate Synoptic Chart", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_sc = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
                 
                 submit_btn_sc.click(
                     fn=generate_synoptic_chart, 
                     inputs=[json_input_sc, output_format_radio], 
                     outputs=output_sc
                 )
-                gr.Markdown("<br>")
-                gr.Markdown("## Example Synoptic Charts")
+                
+                gr.Markdown("## Examples")
                 with gr.Row():
-                    gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/sc1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
+                    gr.Image(value="./images/sc2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
 
             with gr.TabItem("Radial Diagram"):
-                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")
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        json_input_rd = gr.Textbox(
+                            value=RADIAL_DIAGRAM_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_rd = gr.Button("Generate Radial Diagram", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_rd = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
                 
                 submit_btn_rd.click(
                     fn=generate_radial_diagram, 
                     inputs=[json_input_rd, output_format_radio], 
                     outputs=output_rd
                 )
-                gr.Markdown("<br>")
-                gr.Markdown("## Example Radial Diagrams")
+                
+                gr.Markdown("## Examples")
                 with gr.Row():
-                    gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/rd1.svg", label="Sample 1", show_label=True, interactive=False, height=250)
+                    gr.Image(value="./images/rd2.svg", label="Sample 2", show_label=True, interactive=False, height=250)
                 with gr.Row():
-                    gr.Image(value="./images/rd3.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/rd4.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/rd3.svg", label="Sample 3", show_label=True, interactive=False, height=250)
+                    gr.Image(value="./images/rd4.svg", label="Sample 4", show_label=True, interactive=False, height=250)
 
             with gr.TabItem("Process Flow"):
-                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")
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        json_input_pf = gr.Textbox(
+                            value=PROCESS_FLOW_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_pf = gr.Button("Generate Process Flow", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_pf = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
                 
                 submit_btn_pf.click(
                     fn=generate_process_flow_diagram, 
                     inputs=[json_input_pf, output_format_radio], 
                     outputs=output_pf
                 )
-                gr.Markdown("<br>")
-                gr.Markdown("## Example Process Flow Diagrams")
+                
+                gr.Markdown("## Examples")
                 with gr.Row():
-                    gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/pf1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
+                    gr.Image(value="./images/pf2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
 
             with gr.TabItem("WBS Diagram"):
-                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")
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        json_input_wbs = gr.Textbox(
+                            value=WBS_DIAGRAM_JSON,
+                            placeholder="Paste JSON following the documented format",
+                            label="JSON Input",
+                            lines=20
+                        )
+                        submit_btn_wbs = gr.Button("Generate WBS Diagram", variant="primary")
+                    
+                    with gr.Column(scale=2):
+                        output_wbs = gr.Image(
+                            label="Generated Diagram",
+                            type="filepath",
+                            show_download_button=True,
+                            height=500
+                        )
                 
                 submit_btn_wbs.click(
                     fn=generate_wbs_diagram, 
                     inputs=[json_input_wbs, output_format_radio], 
                     outputs=output_wbs
                 )
-                gr.Markdown("<br>")
-                gr.Markdown("## Example WBS Diagrams")
+                
+                gr.Markdown("## Examples")
                 with gr.Row():
-                    gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height="auto", width="100%")
-                    gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height="auto", width="100%")
+                    gr.Image(value="./images/wd1.svg", label="Sample 1", show_label=True, interactive=False, height=300)
+                    gr.Image(value="./images/wd2.svg", label="Sample 2", show_label=True, interactive=False, height=300)
     
     demo.launch(
         mcp_server=True,
         share=False,
         server_port=7860,
         server_name="0.0.0.0"
-    )
-
+    )