Update app.py

app.py

@@ -142,26 +142,27 @@ async def review_blog(text_input, url_input):
 
 # Custom CSS for hover effect, loading state, and Inter font
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 .gradio-container {
     font-family: 'Inter', sans-serif !important;
+    background-color: #f9f9f9;
 }
 .review-btn {
     transition: all 0.3s ease;
-    font-weight: 500;
-    background-color: #2c3e50;
+    font-weight: 600;
+    font-size: 16px;
+    background-color: #1f2937;
     color: white;
-    border-radius: 8px;
-    padding: 10px 20px;
-    position: relative;
+    border-radius: 12px;
+    padding: 12px 24px;
+    margin-top: 10px;
 }
 .review-btn:hover {
-    background-color: #4CAF50;
-    color: white;
-    transform: scale(1.05);
+    background-color: #10b981;
+    transform: scale(1.03);
 }
 .review-btn:disabled {
-    opacity: 0.7;
+    opacity: 0.6;
     cursor: not-allowed;
 }
 .review-btn:disabled::before {
@@ -169,7 +170,7 @@ custom_css = """
     display: inline-block;
     width: 16px;
     height: 16px;
-    border: 2px solid #fff;
+    border: 3px solid #fff;
     border-radius: 50%;
     border-top-color: transparent;
     animation: spin 1s linear infinite;
@@ -180,33 +181,50 @@ custom_css = """
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
-.tab-nav button {
-    font-family: 'Inter', sans-serif;
-    font-weight: 500;
-}
 input, textarea {
     font-family: 'Inter', sans-serif;
+    font-size: 15px;
+    padding: 10px;
+    border-radius: 8px;
 }
 """
 
-# Gradio UI with Tabs
-with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as demo:
-    gr.Markdown("# 📝 AI Blog Reviewer")
-    gr.Markdown("Enter blog text or a URL to review for grammar, legal issues, crude language, and sensitive topics. The report is generated in markdown format.")
+with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as demo:
+    gr.Markdown("## 📝 AI Blog Reviewer", elem_id="title")
+    gr.Markdown(
+        """
+        <div style="font-size: 16px; color: #444; line-height: 1.6;">
+        📌 Enter your blog text or a blog URL below.<br>
+        ✅ The AI will check for grammar, legal issues, crude language, and sensitive content.<br>
+        🧾 A detailed report will be shown and available to download.
+        </div>
+        """,
+        elem_id="description"
+    )
 
     with gr.Tabs():
-        with gr.TabItem("Text"):
-            text_input = gr.Textbox(lines=8, label="Blog Content", placeholder="Paste your blog text here...")
-        with gr.TabItem("URL"):
-            url_input = gr.Textbox(lines=1, label="Blog URL", placeholder="Enter the blog URL here...")
-
-    status_button = gr.Button(value="Review Blog", elem_classes=["review-btn"])
+        with gr.TabItem("✍️ Text Input"):
+            text_input = gr.Textbox(
+                lines=10,
+                label="Your Blog Content",
+                placeholder="Paste your blog text here...",
+                show_label=True
+            )
+        with gr.TabItem("🌐 URL Input"):
+            url_input = gr.Textbox(
+                lines=1,
+                label="Blog URL",
+                placeholder="Enter the blog URL here...",
+                show_label=True
+            )
+
+    status_button = gr.Button(value="🚀 Review Blog", elem_classes=["review-btn"])
 
     gr.Markdown("### 📄 Review Report")
-    report_output = gr.Markdown()
-    download_btn = gr.File(label="Download Report", visible=False)
+    report_output = gr.Markdown(elem_id="report-markdown")
+    download_btn = gr.File(label="📥 Download Markdown Report", visible=False)
 
-    # Bind the review button to process inputs
+    # Bind button click
     status_button.click(
         fn=review_blog,
         inputs=[text_input, url_input],