update Gradio UI

app.py

@@ -149,10 +149,22 @@ def generate_blog(topic, tone):
     yield final_text
 
 # Build Gradio Interface
-with gr.Blocks(theme=gr.themes.Glass(primary_hue="purple")) as demo:
+with gr.Blocks(css="""
+#output-box {
+        background-color: #f8f9fa;
+        border-radius: 12px;
+        padding: 1.5rem;
+        font-family: 'Inter', sans-serif;
+        font-size: 1rem;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        overflow-y: auto;
+        max-height: 70vh;
+    }
+    """) as demo:
     gr.Markdown(
         """
-        # ✍️ AI Blog Writer Multi-Agent
+        ## ✍️ AI Blog Writer Multi-Agent
         Create a professional, fact-checked, and polished article using CrewAI agents.
         """
     )
@@ -164,15 +176,15 @@ with gr.Blocks(theme=gr.themes.Glass(primary_hue="purple")) as demo:
             value="Sustainable Investing"
         )
         tone=gr.Dropdown(
-            ["professional", "playful", "academic", "casual", "satirical"],
+            ["professional", "playful", "academic", "casual", "satirical", "humorous"],
             label="Select Writing Tone",
             value="academic"
         )
 
     run_button = gr.Button("🚀 Generate Blog", variant="primary")
-    output = gr.Markdown(label="📰 Generated Blog Post")
+    output = gr.Textbox(label="📰 Generated Blog Post", elem_id="output-box", lines=25, interactive=False, show_label=False)
 
-    run_button.click(generate_blog, inputs=[topic, tone], outputs=output)
+    run_button.click(generate_blog, inputs=[topic, tone], outputs=[output])
 
 #Launch app
 if __name__=="__main__":