Update app.py

app.py

@@ -73,98 +73,104 @@ def add_to_history(email, cat, pri, summ):
     }
     classification_history.append(entry)
 
-with gr.Blocks(css="""
-body { background: linear-gradient(120deg, #131d47 0%, #28398f 50%, #101d42 100%) !important; font-family: 'Inter', 'Segoe UI', 'Roboto', Arial, sans-serif; }
+css = """
+body { background: linear-gradient(120deg, #10193a 0%, #175ad7 120%) !important; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;}
 .gradio-container { background: transparent !important; }
-
 .card-block {
-    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);
+    background: rgba(27,36,68,0.96);
+    border-radius: 30px;
+    box-shadow: 0 6px 42px #0b2269bb, 0 1.5px 0 #186fc055 inset;
+    padding: 38px 28px 29px 28px;
+    margin: 32px 0;
+    color: #fafeff;
+    border: 2px solid #2847a46c;
+    backdrop-filter: blur(8px);
 }
-#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;
+input, textarea, .wrap.svelte-psy7la, .wrap.svelte-1ybjah6 { 
+    background: rgba(21,28,56,0.91)!important; border:1.5px solid #345ca3e3!important; color:#def1ff!important;
+    border-radius: 14px !important; box-shadow: none !important;
 }
-.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;}
+label, .label.svelte-1ybjah6 { color: #70acf8!important; font-size: 1em !important; font-weight: 400;}
 .glass-btn {
     border-radius: 18px !important;
-    box-shadow: 0 4px 18px #0e1b3e35 !important;
-    background:linear-gradient(90deg,#336bc0 70%,#2dbcfb 100%)!important;
+    box-shadow: 0 4px 18px #287bef25 !important;
+    background: linear-gradient(90deg,#336bc0 60%,#1ae6ff 140%)!important;
     color: #fff !important;
     letter-spacing: .04em;
     border: none !important;
-    font-size: 1.09em !important;
+    font-size: 1.11em !important;
     font-weight: 600;
+    padding: 12px 0 10px 0 !important;
 }
-.glass-btn:hover {
-    background:linear-gradient(90deg,#154678 50%,#0fdbee 110%)!important;
-    color: #fff !important;
+.card-header {
+    font-size: 1.32em;
+    font-weight: 800;
+    letter-spacing: 0.01em;
+    margin: 0 0 15px 0;
+    color: #ffffff;
+    text-shadow: 0 3px 24px #175ad799;
+    display: flex; align-items: center;
+}
+.badge {
+    display:inline-block;
+    border-radius:999px;
+    padding:4px 16px;
+    font-weight:600;
+    background:linear-gradient(90deg,#2870ee 70%,#13e4fc 140%);
+    box-shadow:0 1px 12px #0663fd29;
+    color:#fff;
+    margin-right:12px;
+    font-size:1.05em;
+    vertical-align:middle;
 }
-.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:linear-gradient(90deg,#ed4864 60%,#fa4764 150%)!important; color:#fff;}
+.priority-medium { background:linear-gradient(90deg,#f3aa36 70%,#f6ea48 120%)!important;color:#222;}
+.priority-low { background:linear-gradient(90deg,#18cd67 60%,#27f8ac 150%)!important;color:#fff;}
+.history-record {
+    background: rgba(35, 54, 90, 0.92);
+    color: #e2f5ff;
+    margin: 0 0 13px 0;
+    border-radius: 14px;
+    border-left: 5px solid #10baff;
+    padding: 13px 22px 12px 22px;
+    box-shadow: 0 2px 12px #08526733;
+    transition: box-shadow .2s;
+    font-size: 1.01em;
 }
-.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:16px; color:#fff;'>📧 AI Email Classifier & Router</h1>")
+.history-record.selected { border-left:7px solid #22eef8; background: rgba(44,86,166,1);}
+.history-record .small { color:#a6c5e7; font-size: .92em;}
+"""
+
+with gr.Blocks(css=css) as demo:
+    gr.Markdown("<div style='text-align:center; margin:10px 0 16px 0; font-size:2em; letter-spacing:.01em; font-weight:900;color:#fff;'><span style='margin-right:10px;'>📧</span>AI Email Classifier & Router</div>")
     with gr.Row():
-        # Input Card
-        with gr.Column(scale=5, min_width=390):
+        with gr.Column(scale=5, min_width=410):
             with gr.Group(elem_id="input-card", elem_classes=["card-block"]):
-                gr.Markdown("<h3>Paste Your Email</h3>")
-                gr.Markdown("Choose Example:")
+                gr.Markdown("<div class='card-header'>✉️ Paste Your Email</div>")
+                gr.Markdown("<span style='font-size:.95em; color:#a6c5e7;'>Choose Example:</span>")
                 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="", placeholder="From: ...\nSubject: ...", elem_id='email_box')
-                classify_btn = gr.Button("Classify Email", elem_id='classify_btn', elem_classes=["glass-btn"])
+                email_box = gr.Textbox(lines=8, label="", placeholder="From: ...\nSubject: ...")
+                classify_btn = gr.Button("Classify Email", elem_classes=["glass-btn"])
 
-        # Output Card
-        with gr.Column(scale=7, min_width=420):
+        with gr.Column(scale=7, min_width=430):
             with gr.Group(elem_id="output-card", elem_classes=["card-block"]):
-                gr.Markdown("<h3>Classification Results</h3>")
-                result_labels = gr.Markdown("", elem_id="result-labels")
+                gr.Markdown("""<div class='card-header'>🧮 Classification Results</div>""")
+                result_labels = gr.Markdown("")
                 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("<h3>Classification History</h3>")
+        gr.Markdown("""<div class='card-header'>🕒 Classification History</div>""")
         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?"
     ex2 = "From: sales@prospect.com\nSubject: Inquiry about pricing\nHi, Can you send over your latest pricing for enterprise?"
     ex3 = "From: accounts@supplier.com\nSubject: Invoice #2024-00123 Due Date Reminder\nDear Valued Client, This is a reminder invoice #2024-00123 for $1,500.00 is due..."
@@ -188,7 +194,10 @@ body { background: linear-gradient(120deg, #131d47 0%, #28398f 50%, #101d42 100%
         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']}<div class='card-history-header'>Category: {h['category']} | Priority: {h['priority']}</div><div>{h['summary'][:90]}...</div>"
+            f"**{h['datetime']}**\n"
+            f"**Category:** <span class='badge'>{h['category']}</span>  \n"
+            f"**Priority:** <span class='badge priority-{h['priority'].lower()}'>{h['priority']}</span>  \n"
+            f"<span class='small'>{h['summary']}</span>"
             for h in classification_history
         ]
         return badge, rec, dra, summ, acts, gr.update(choices=display, value=len(display)-1)
@@ -198,18 +207,12 @@ body { background: linear-gradient(120deg, #131d47 0%, #28398f 50%, #101d42 100%
             return classification_history[idx]["email"]
         return ""
 
-    def copy_history(idx):
-        if idx is not None and 0 <= idx < len(classification_history):
-            return classification_history[idx]["email"]
-        return ""
-
     classify_btn.click(
         classify_and_render,
         inputs=[email_box],
         outputs=[result_labels, recipient, draft_response, summary, action_items, history_radio]
     )
     load_btn.click(load_history, inputs=[history_radio], outputs=email_box)
-    copy_btn.click(copy_history, inputs=[history_radio], outputs=email_box)
 
 if __name__ == "__main__":
     demo.launch()