Update app.py

app.py

@@ -82,14 +82,21 @@ with gr.Blocks() as demo:
             status = gr.Markdown(visible=False)
 
         with gr.Column():
-            output = gr.Markdown(value="", label="Output")  # 🔁 changed from gr.HTML
+            output = gr.HTML(label="Output")
 
     def wrapper(name, description, architecture, components, deployment, platform, extra):
         result = generate_software_spec(name, description, architecture, components, deployment, platform, extra)
-        return result, gr.update(visible=False)  # ✅ just return raw Markdown text
+        html_content = """
+        <div>{}</div>
+        <script type='module'>
+            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+            mermaid.initialize({startOnLoad: true});
+        </script>
+        """.format(result)
+        return html_content, gr.update(visible=False)
 
     def show_spinner():
-        return gr.update(visible=True, value="⏳ Generating... Please wait.")
+        return gr.update(visible=True, value="<center>⏳ Generating... Please wait.</center>")
 
     submit.click(fn=show_spinner, inputs=[], outputs=[status], queue=False)
     submit.click(