Update app.py

app.py

@@ -129,39 +129,42 @@ async def review_blog(text_input, url_input, progress=gr.Progress()):
     except Exception as e:
         return "Review Blog", f"Error creating temporary file: {str(e)}", gr.update(visible=False)
 
-# Enhanced custom CSS for a more attractive UI
+# Enhanced custom CSS for a more attractive and user-friendly UI
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 .gradio-container {
     font-family: 'Inter', sans-serif !important;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
+    color: #2d3748;
 }
 h1, h3 {
-    color: #1a3c34;
+    color: #2b6cb0;
     text-align: center;
     font-weight: 700;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 .review-btn {
-    background: linear-gradient(45deg, #2c3e50, #3498db);
+    background: linear-gradient(45deg, #4a90e2, #63b3ed);
     color: white;
     font-weight: 600;
     border: none;
-    border-radius: 10px;
-    padding: 12px 24px;
+    border-radius: 12px;
+    padding: 14px 28px;
     transition: all 0.3s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
+    cursor: pointer;
 }
 .review-btn:hover {
-    background: linear-gradient(45deg, #3498db, #2c3e50);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    background: linear-gradient(45deg, #63b3ed, #4a90e2);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 15px rgba(74, 144, 226, 0.4);
 }
 .review-btn:disabled {
-    opacity: 0.6;
+    opacity: 0.7;
     cursor: not-allowed;
     transform: none;
     box-shadow: none;
@@ -172,56 +175,63 @@ h1, h3 {
 .tab-nav button {
     font-family: 'Inter', sans-serif;
     font-weight: 600;
-    background: #ffffff;
-    color: #2c3e50;
-    border-radius: 8px 8px 0 0;
-    padding: 10px 20px;
+    background: #edf2f7;
+    color: #2d3748;
+    border-radius: 10px 10px 0 0;
+    padding: 12px 24px;
     transition: all 0.2s ease;
+    border: 1px solid #e2e8f0;
 }
 .tab-nav button:hover {
-    background: #3498db;
+    background: #4a90e2;
     color: white;
+    border-color: #4a90e2;
 }
 input, textarea {
     font-family: 'Inter', sans-serif;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    padding: 10px;
+    border: 2px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 12px;
     background: #ffffff;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+    color: #2d3748;
+    font-size: 16px;
 }
 .gr-textbox textarea {
     resize: vertical;
+    min-height: 150px;
 }
 .gr-progress {
-    background: #e2e8f0;
-    border-radius: 10px;
+    background: #edf2f7;
+    border-radius: 12px;
     overflow: hidden;
-    height: 24px;
+    height: 30px;
 }
 .gr-progress > div {
-    background: linear-gradient(90deg, #34c759, #4CAF50);
+    background: linear-gradient(90deg, #48bb78, #38a169);
     height: 100%;
-    transition: width 0.4s ease-in-out;
+    transition: width 0.5s ease;
 }
 .markdown-container {
     background: #ffffff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    padding: 25px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     margin-top: 20px;
+    color: #2d3748;
 }
 .download-btn {
-    background: #4CAF50;
+    background: #48bb78;
     color: white;
-    border-radius: 8px;
-    padding: 10px 20px;
-    font-weight: 500;
+    border-radius: 10px;
+    padding: 12px 24px;
+    font-weight: 600;
     transition: all 0.3s ease;
+    cursor: pointer;
 }
 .download-btn:hover {
-    background: #45a049;
-    transform: translateY(-2px);
+    background: #38a169;
+    transform: translateY(-3px);
 }
 """
 
@@ -230,7 +240,7 @@ with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as demo:
     gr.Markdown(
         """
         # 📝 AI Blog Reviewer
-        Analyze your blog content for grammar, legal issues, crude language, and sensitive topics with ease.
+        Easily analyze your blog for grammar, legal issues, crude language, and sensitive topics.
         """
     )
     with gr.Row():
@@ -254,9 +264,9 @@ with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as demo:
             gr.Markdown(
                 """
                 ### How It Works
-                1. **Input**: Paste blog text or provide a URL.
-                2. **Analysis**: Our AI reviews for grammar, legal issues, and more.
-                3. **Report**: Get a detailed markdown report with suggestions.
+                1. **Input**: Paste text or provide a URL.
+                2. **Analysis**: AI checks grammar, legal issues, and more.
+                3. **Report**: Download a detailed markdown report.
                 """
             )
             status_button = gr.Button("Review Blog", elem_classes=["review-btn"])
@@ -265,7 +275,7 @@ with gr.Blocks(theme=gr.themes.Monochrome(), css=custom_css) as demo:
     with gr.Row():
         with gr.Column():
             report_output = gr.Markdown(elem_classes=["markdown-container"])
-            download_btn = gr.File(label="Download Report as Markdown", visible=False, elem_classes=["download-btn"])
+            download_btn = gr.File(label="Download Report", visible=False, elem_classes=["download-btn"])
 
     status_button.click(
         fn=review_blog,