Update app.py

app.py

@@ -74,58 +74,95 @@ def add_to_history(email, cat, pri, summ):
     classification_history.append(entry)
 
 with gr.Blocks(css="""
-body { background: linear-gradient(135deg, #101d42 0%, #273e7f 100%) !important; }
+body { background: linear-gradient(120deg, #131d47 0%, #28398f 50%, #101d42 100%) !important; font-family: 'Inter', 'Segoe UI', 'Roboto', Arial, sans-serif; }
 .gradio-container { background: transparent !important; }
+
 .card-block {
-    background: #222e4a;
-    border-radius: 18px;
-    box-shadow: 0 2px 24px #0e1b3e77;
-    padding: 28px 26px 22px 26px;
-    margin: 20px 0;
-    color: #f3f8ff;
+    background: rgba(26, 35, 71, 0.93);
+    border-radius: 24px;
+    box-shadow: 0 8px 32px #17336a60;
+    padding: 34px 26px 28px 26px;
+    margin: 24px 0;
+    color: #ecf2ff;
+    border: 1.5px solid rgba(47,84,178,0.17);
+    backdrop-filter: blur(7px);
+}
+#output-card { border: 1.5px solid #3695fd66; box-shadow: 0 4px 22px #2196f380;}
+#history-card { border: 1.5px solid #1f458399;}
+.card-block h3 { font-size:1.25em; letter-spacing:0.02em; margin-bottom:18px;}
+.badge {
+    display:inline-block;
+    border-radius:999px;
+    padding:4px 17px;
+    font-weight:600;
+    background:linear-gradient(90deg,#2875b5 70%,#17d8ff 120%);
+    box-shadow: 0 1px 12px #188ad938;
+    color:#fff;
+    margin-right:12px;
+    font-size:1.02em;
+}
+.priority-high { background:linear-gradient(90deg,#d32f2f 60%,#f73368 150%)!important; color:#fff;}
+.priority-medium { background:linear-gradient(90deg,#f89e36 70%,#f7ea47 120%)!important;color:#222;}
+.priority-low { background:linear-gradient(90deg,#23ac9b 60%,#17f3ad 150%)!important;color:#fff;}
+.glass-btn {
+    border-radius: 18px !important;
+    box-shadow: 0 4px 18px #0e1b3e35 !important;
+    background:linear-gradient(90deg,#336bc0 70%,#2dbcfb 100%)!important;
+    color: #fff !important;
+    letter-spacing: .04em;
+    border: none !important;
+    font-size: 1.09em !important;
+    font-weight: 600;
+}
+.glass-btn:hover {
+    background:linear-gradient(90deg,#154678 50%,#0fdbee 110%)!important;
+    color: #fff !important;
 }
-.badge { 
-    border-radius: 8px; 
-    padding: 2px 12px; 
-    font-weight: 600; 
-    background: #3371c1;
-    color: #fff;
-    margin-right: 10px;
-    font-size: 0.98em;
+.card-history {
+    background:rgba(23,35,68,0.90);
+    color:#eafeff;
+    margin:9px 0;
+    border-radius:14px;
+    padding:16px 18px;
+    box-shadow:0 0 18px #174b8360;
+    font-size:1em;
+    border-left:4px solid #17aefcdd;
+    backdrop-filter:blur(4px);
 }
-.priority-high { background: #d32f2f !important; color: #fff !important;}
-.priority-medium { background: #ffb300 !important; color: #222 !important;}
-.priority-low { background: #388e3c !important; color: #fff !important;}
+.card-history-header {font-weight:bold;font-size:1em;margin-bottom:7px;color:#fff;}
 """) as demo:
-    gr.Markdown("<h1 style='text-align:center; margin-top:18px; color:#fff;'>📧 AI Email Classifier & Router</h1>")
+    gr.Markdown("<h1 style='text-align:center; margin-top:16px; color:#fff;'>📧 AI Email Classifier & Router</h1>")
     with gr.Row():
-        with gr.Column(scale=5, min_width=380):
+        # Input Card
+        with gr.Column(scale=5, min_width=390):
             with gr.Group(elem_id="input-card", elem_classes=["card-block"]):
-                gr.Markdown("### Input Email")
-                gr.Markdown("Select Example:")
+                gr.Markdown("<h3>Paste Your Email</h3>")
+                gr.Markdown("Choose Example:")
                 with gr.Row():
                     support_button = gr.Button("Support Request")
                     sales_button = gr.Button("Sales Inquiry")
                     finance_button = gr.Button("Finance / Billing")
                     urgent_button = gr.Button("Urgent Incident")
                     spam_button = gr.Button("Spam / Marketing")
-                email_box = gr.Textbox(lines=8, label="Paste your email (with From/Subject/etc.):", elem_id='email_box')
-                classify_btn = gr.Button("Classify Email", elem_id='classify_btn', variant="primary")
+                email_box = gr.Textbox(lines=8, label="", placeholder="From: ...\nSubject: ...", elem_id='email_box')
+                classify_btn = gr.Button("Classify Email", elem_id='classify_btn', elem_classes=["glass-btn"])
 
-        with gr.Column(scale=7, min_width=390):
+        # Output Card
+        with gr.Column(scale=7, min_width=420):
             with gr.Group(elem_id="output-card", elem_classes=["card-block"]):
-                gr.Markdown("### Classification Results")
+                gr.Markdown("<h3>Classification Results</h3>")
                 result_labels = gr.Markdown("", elem_id="result-labels")
                 recipient = gr.Textbox(label="Suggested Recipient")
                 draft_response = gr.Textbox(lines=5, label="Generated Response Draft")
                 summary = gr.Textbox(label="Summary")
                 action_items = gr.Textbox(lines=3, label="Extracted Action Items")
 
+    # History Card
     with gr.Group(elem_id="history-card", elem_classes=["card-block"]):
-        gr.Markdown("### Classification History")
-        history_radio = gr.Radio([], label="Select record", type="index")
-        load_btn = gr.Button("Load Selected")
-        copy_btn = gr.Button("Copy Selected")
+        gr.Markdown("<h3>Classification History</h3>")
+        history_radio = gr.Radio([], label="", type="index")
+        load_btn = gr.Button("Load Selected", elem_classes=["glass-btn"])
+        copy_btn = gr.Button("Copy Selected", elem_classes=["glass-btn"])
 
     # Example data
     ex1 = "From: help@company.com\nSubject: Unable to Login\nHi, I can't access my dashboard. Can you help?"
@@ -151,7 +188,7 @@ body { background: linear-gradient(135deg, #101d42 0%, #273e7f 100%) !important;
         add_to_history(email_text, cat, pri, summ)
         badge = f"<b>Category:</b> <span class='badge'>{cat}</span> <b>Priority:</b> <span class='badge priority-{pri.lower()}'>{pri}</span>"
         display = [
-            f"{h['datetime']} | Category: {h['category']} | Priority: {h['priority']} | {h['summary'][:100]}"
+            f"{h['datetime']}<div class='card-history-header'>Category: {h['category']} | Priority: {h['priority']}</div><div>{h['summary'][:90]}...</div>"
             for h in classification_history
         ]
         return badge, rec, dra, summ, acts, gr.update(choices=display, value=len(display)-1)