Update app.py

app.py

@@ -131,26 +131,24 @@ def predict_batch(texts: List[str], model_id: str = MODEL_ID_DEFAULT) -> List[Tu
         results.append((top_label, float(top_conf), probs))
     return results
 
-# ---------------- Explainability (simple occlusion) ----------------
-# (left intentionally minimal — UI only request)
+
 
 # ---------------- UI Callbacks ----------------
 
 # Single predict wrapper for Gradio
 def single_predict(text: str, model_id: str, threshold: float):
     txt = _prepare_text(text)
+    empty_bar = "<div class='conf-bar'><div class='conf-fill' style='width:0%'>0%</div></div>"
     if txt == "":
-        return "", "0.0%", {}, "Empty input"
+        return "", empty_bar, {}, "Empty input"
     try:
         probs, idx = predict_raw(txt, model_id)
         # sort probs descending
         probs_sorted = dict(sorted(probs.items(), key=lambda kv: kv[1], reverse=True))
         top_label = list(probs_sorted.keys())[0]
         top_conf = float(probs_sorted[top_label])
-        # format as percentage for UI
         top_conf_pct = f"{top_conf * 100:.1f}%"
-        # include percentage in the top prediction display as well
-        top_label_display = f"{top_label} ({top_conf_pct})"
+        progress_html = f"<div class='conf-bar'><div class='conf-fill' style='width:{top_conf*100:.1f}%'>{top_conf_pct}</div></div>"
         warn = "" if top_conf >= threshold else f"Below threshold {threshold:.2f}"
 
         # log (no-op if history disabled)
@@ -165,9 +163,9 @@ def single_predict(text: str, model_id: str, threshold: float):
         except Exception:
             pass
 
-        return top_label_display, top_conf_pct, probs_sorted, warn
+        return top_label, progress_html, probs_sorted, warn
     except Exception as e:
-        return "", "0.0%", {}, f"Error: {str(e)}"
+        return "", empty_bar, {}, f"Error: {str(e)}"
 
 
 # Batch predict from uploaded CSV (expects column 'message' or 'text')
@@ -216,6 +214,10 @@ MODERN_CSS = """
 .label-muted { color: #6b7280; font-size: 13px; }
 .small-note { font-size: 13px; color: #6b7280; }
 .warning-pill { background: #fff7ed; padding: 8px 12px; border-radius: 999px; display:inline-block; color: #92400e; font-weight:600; }
+
+/* confidence bar */
+.conf-bar { background: #e6f0ff; border-radius: 999px; padding: 4px; width: 200px; }
+.conf-fill { display:inline-block; height:26px; line-height:26px; padding:0 10px; border-radius: 999px; background: linear-gradient(90deg,#60a5fa,#3b82f6); color: white; font-weight:700; transition: width 400ms ease; }
 """
 
 
@@ -223,7 +225,7 @@ def build_ui():
     with gr.Blocks(title="Phishing Detector", css=MODERN_CSS) as demo:
         with gr.Column():
             # Header
-            gr.HTML("<div class='header-gradient'><h1 style='margin:0;'>🛡️ Phishing Detector</h1><p style='margin:6px 0 0 0; opacity:0.95;'>Classify messages or URLs as phishing or legitimate — clean, modern interface.</p></div>")
+            gr.HTML("<div class='header-gradient'><h1 style='margin:0;color:white;'>🛡️ Phishing Detector</h1><p style='margin:6px 0 0 0;color:rgba(255,255,255,0.95);'>Classify messages or URLs as phishing or legitimate — clean, modern interface.</p></div> ")
 
             with gr.Row(elem_id="main-row", variant="default"):
                 # Left: Main actions
@@ -236,7 +238,7 @@ def build_ui():
                                 predict_btn = gr.Button("Analyze", variant="primary")
                                 with gr.Row():
                                     out_label = gr.Textbox(label="Top prediction", interactive=False)
-                                    out_conf = gr.Textbox(label="Top confidence", interactive=False)
+                                    out_conf = gr.HTML("<div class='conf-bar'><div class='conf-fill' style='width:0%'>0%</div></div>", label="Confidence")
                                 out_probs = gr.JSON(label="Probabilities (descending)")
                                 warn_box = gr.Textbox(label="Warning", interactive=False)