Update app.py

app.py

@@ -6,49 +6,87 @@ import gradio as gr
 from analysis_core import extract_chats, get_chat_name, analyze_chat
 
 
-# -------------------- THEME --------------------
 THEME = gr.themes.Soft(
-    primary_hue="fuchsia",     # magenta / pink vibe
+    primary_hue="fuchsia",
     secondary_hue="pink",
     neutral_hue="slate",
 )
 
 CSS = """
-/* make everything full width */
+/* full width */
 .gradio-container {
   max-width: 100% !important;
   padding-left: 24px !important;
   padding-right: 24px !important;
 }
 
-/* Load button (magenta) */
+/* buttons */
 .btn-load button {
   background: linear-gradient(90deg, #d946ef, #ec4899) !important;
   border-radius: 16px !important;
   font-weight: 700 !important;
 }
-
-/* Analyze button (green, very clear action) */
 .btn-analyze button {
   background: linear-gradient(90deg, #22c55e, #16a34a) !important;
   border-radius: 16px !important;
   font-weight: 700 !important;
 }
 
-/* Status box nicer */
+/* status */
 .status-box textarea {
   border-radius: 14px !important;
   font-weight: 500;
 }
 
-/* Slightly larger plot */
-.plot-container {
-  min-height: 520px;
+/* plot */
+.plot-container { min-height: 520px; }
+
+/* -------- Dataframe styling (match magenta theme) -------- */
+.lex-table .wrap {
+  border-radius: 16px !important;
+  border: 1px solid rgba(236,72,153,0.28) !important;
+  overflow: hidden !important;
+}
+
+.lex-table table {
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+}
+
+/* header */
+.lex-table thead th {
+  background: linear-gradient(90deg, rgba(217,70,239,0.35), rgba(236,72,153,0.25)) !important;
+  color: rgba(255,255,255,0.92) !important;
+  font-weight: 800 !important;
+  border-bottom: 1px solid rgba(236,72,153,0.28) !important;
+}
+
+/* body cells */
+.lex-table tbody td {
+  background: rgba(255,255,255,0.02) !important;
+  border-bottom: 1px solid rgba(236,72,153,0.10) !important;
+}
+
+/* zebra rows */
+.lex-table tbody tr:nth-child(even) td {
+  background: rgba(217,70,239,0.06) !important;
+}
+
+/* hover */
+.lex-table tbody tr:hover td {
+  background: rgba(236,72,153,0.14) !important;
+}
+
+/* align */
+.lex-table td, .lex-table th { padding: 10px 12px !important; }
+
+/* make numbers a bit clearer */
+.lex-table td:last-child {
+  font-variant-numeric: tabular-nums;
 }
 """
 
 
-# -------------------- HELPERS --------------------
 def _path(file_obj) -> str:
     if file_obj is None:
         raise gr.Error("upload Telegram result.json first.")
@@ -103,7 +141,6 @@ def run_analysis(choice: str, state: Dict[str, Any], max_bert_persian: int):
     return result, fig, pos_rows, neg_rows
 
 
-# -------------------- UI --------------------
 with gr.Blocks(
     title="Telegram Sentiment Analysis",
     theme=THEME,
@@ -142,15 +179,8 @@ with gr.Blocks(
         label="Max Persian messages to run BERT on (speed control)",
     )
 
-    load_btn = gr.Button(
-        "Load chats",
-        elem_classes=["btn-load"],
-    )
-
-    analyze_btn = gr.Button(
-        "Analyze selected chat",
-        elem_classes=["btn-analyze"],
-    )
+    load_btn = gr.Button("Load chats", elem_classes=["btn-load"])
+    analyze_btn = gr.Button("Analyze selected chat", elem_classes=["btn-analyze"])
 
     out_json = gr.JSON(label="Results (JSON)")
 
@@ -162,11 +192,13 @@ with gr.Blocks(
     out_pos = gr.Dataframe(
         label="Top 5 positive lex words (word, score)",
         headers=["word", "score"],
+        elem_classes=["lex-table"],
     )
 
     out_neg = gr.Dataframe(
         label="Top 5 negative lex words (word, score)",
         headers=["word", "score"],
+        elem_classes=["lex-table"],
     )
 
     load_btn.click(load_chats, inputs=[file_in], outputs=[chat_dd, state, status])