Update app.py

app.py

@@ -70,26 +70,35 @@ with gr.Blocks() as demo:
     gr.Markdown("## 🧠 AI Software Architecture Assistant")
 
     with gr.Row():
-        name = gr.Textbox(label="App Name", placeholder="MyApp")
-        description = gr.Textbox(label="Short Description", lines=2, placeholder="A system that manages online tutoring...")
+        with gr.Column():
+            name = gr.Textbox(label="App Name", placeholder="MyApp")
+            description = gr.Textbox(label="Short Description", lines=2, placeholder="A system that manages online tutoring...")
+            architecture = gr.Radio(["Monolithic", "Backend-Frontend"], label="Architecture Style")
+            deployment = gr.Radio(["Serverless", "VM"], label="Deployment Style")
+            platform = gr.Radio(["Web App", "Mobile App"], label="Target Platform")
+            components = gr.Textbox(label="Components & Tech Stack (e.g. Backend: Python + Flask, Frontend: React)", lines=4)
+            extra = gr.Textbox(label="Extra Requirements (optional)", lines=2)
+            submit = gr.Button("Generate Design")
+            status = gr.Markdown(visible=False)
 
-    with gr.Row():
-        architecture = gr.Radio(["Monolithic", "Backend-Frontend"], label="Architecture Style")
-        deployment = gr.Radio(["Serverless", "VM"], label="Deployment Style")
-        platform = gr.Radio(["Web App", "Mobile App"], label="Target Platform")
-
-    components = gr.Textbox(label="Components & Tech Stack (e.g. Backend: Python + Flask, Frontend: React)", lines=4)
-    extra = gr.Textbox(label="Extra Requirements (optional)", lines=2)
-
-    submit = gr.Button("Generate Design")
-    output = gr.Markdown(label="Output")
-
-    status = gr.Markdown(visible=False)
+        with gr.Column():
+            output = gr.HTML(value="<div id='result'></div>", label="Output")
 
     def wrapper(name, description, architecture, components, deployment, platform, extra):
         result = generate_software_spec(name, description, architecture, components, deployment, platform, extra)
-        return gr.update(value=result), gr.update(visible=False)
+        html_content = f"""
+        <div>{result}</div>
+        <script type='module'>
+            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+            mermaid.initialize({ startOnLoad: true });
+        </script>
+        """
+        return html_content, gr.update(visible=False)
+
+    def show_spinner():
+        return gr.update(visible=True, value="<center>⏳ Generating... Please wait.</center>")
 
+    submit.click(fn=show_spinner, inputs=[], outputs=[status], queue=False)
     submit.click(
         fn=wrapper,
         inputs=[name, description, architecture, components, deployment, platform, extra],
@@ -99,14 +108,4 @@ with gr.Blocks() as demo:
         show_progress=True
     )
 
-    def show_spinner():
-        return gr.update(visible=True, value="<center>⏳ Generating... Please wait.</center>")
-
-    submit.click(
-        fn=show_spinner,
-        inputs=[],
-        outputs=[status],
-        queue=False
-    )
-
-    demo.launch()
+    demo.launch()