Spaces:

ExistedYear
/

ScamShield

Sleeping

App Files Files Community

ExistedYear commited on 21 days ago

Commit

7d945cb

1 Parent(s): fa9bd1a

flask design ported to gradio: verdict cards, confidence bar, url blocks, shap bars, phone-framed mobile tab

Browse files

Files changed (1) hide show

app.py +440 -150

app.py CHANGED Viewed

@@ -26,105 +26,389 @@ print("Loading SHAP explainer...")
 explainer = SmishingExplainer(predictor)
 print("Model loaded. Ready.")
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
-.gradio-container { font-family: 'Plus Jakarta Sans', sans-serif !important; max-width: 920px !important; margin: 0 auto !important; }
-.ss-hero { text-align: center; padding: 2rem 0 1.2rem; }
-.ss-hero h1 { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
-.ss-hero h1 span { color: #3b82f6; }
-.ss-hero p { opacity: 0.65; font-size: 0.92rem; margin-top: 0.4rem; }
-.ss-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(59,130,246,.12);
-  border: 1px solid rgba(59,130,246,.35); color: #3b82f6; font-size: 0.72rem; font-weight: 700;
-  padding: 0.25rem 0.7rem; border-radius: 20px; margin-bottom: 0.8rem; }
-.phone-frame { max-width: 392px !important; margin: 0 auto !important; border: 10px solid #0b0e13;
-  border-radius: 34px; padding: 1rem 0.9rem 1.3rem !important; box-shadow: 0 14px 44px rgba(0,0,0,.35); }
-.phone-notch { width: 120px; height: 22px; background: #0b0e13; border-radius: 0 0 12px 12px; margin: -1rem auto 0.7rem; }
-.phone-title { text-align: center; font-weight: 800; font-size: 1rem; margin-bottom: 0.2rem; }
-.phone-sub { text-align: center; font-size: 0.72rem; opacity: 0.6; margin-bottom: 0.8rem; }
-.ss-footer { text-align: center; font-size: 0.75rem; opacity: 0.6; margin-top: 1.6rem; line-height: 1.7; }
 """
-@spaces.GPU(duration=120)
-def analyze(message):
-    if not message or not message.strip():
-        return "⚠️ Please enter a message.", None, None, None
     result = predictor.predict(message)
-    label = result["label"]
-    risk = result["risk_level"]
-    conf = result["confidence"]
-    lang = result.get("language", "?")
-    gc = result.get("green_channel", False)
-    gc_reason = result.get("green_reason", "")
-    # --- Verdict ---
-    if label == "safe":
-        verdict = f"## ✅ Safe\nGreen Channel cleared: {gc_reason}"
-    elif label == "spam":
-        emoji = "🔴" if risk == "high" else "🟠"
-        verdict = f"## {emoji} {label.upper()} — {risk.upper()} RISK"
-    else:
-        verdict = f"## 🟢 {label.upper()} — LOW RISK"
-    verdict += f"\nConfidence: **{conf:.1%}** | Threshold: {predictor.threshold} | Language: {lang}"
-    if gc:
-        verdict += f"\n\n🛡️ Green Channel: {gc_reason}"
-    # --- URL signals ---
-    urls = result.get("url_signals", {})
-    url_text = ""
-    if urls.get("has_url"):
-        url_text = "### 🔗 URL Analysis\n"
-        flags = []
-        if urls.get("has_ip_url"):      flags.append("🔴 IP address instead of domain")
-        if urls.get("has_shortened_url"): flags.append("🔴 URL shortener — hides real destination")
-        if urls.get("suspicious_tld"):  flags.append("🟠 Suspicious TLD (.xyz, .tk, .top etc.)")
-        if urls.get("has_http") and not urls.get("has_https"):
-            flags.append("🟠 HTTP (not encrypted)")
-        if urls.get("has_legit_domain"): flags.append("🟢 Legitimate domain detected")
-        url_text += "\n".join(f"- {f}" for f in flags) if flags else "- No obvious threats"
-        url_text += f"\nLinks found: {urls.get('num_urls', 0)}"
-    # --- Text signals ---
-    text = result.get("text_signals", {})
-    text_info = "### 📝 Text Signals\n"
-    text_info += f"- Chars: {text.get('num_chars', 0)} | Words: {text.get('num_words', 0)}\n"
-    text_info += f"- Uppercase: {text.get('pct_upper', 0)*100:.0f}% | Digits: {text.get('pct_digits', 0)*100:.0f}%\n"
-    text_info += f"- Urgency keywords: {text.get('urgency_count', 0)}\n"
-    text_info += f"- Phone number: {'Yes' if text.get('has_phone') else 'No'} | Currency symbol: {'Yes' if text.get('has_currency') else 'No'}"
-    # --- Internal scores ---
-    scores = "### ⚙️ Scores\n"
-    scores += f"Neural: {result.get('_neural_score', 0):.3f} | Rule: {result.get('_rule_score', 0):.3f} | Ham: {result.get('_ham_rule_score', 0):.3f}"
-    # --- SHAP explanation ---
-    shap_text = "### 🔬 SHAP Explainability\n"
     try:
-        explanation = explainer.explain_text(message, num_features=8)
-        if explanation["top_spam_words"]:
-            shap_text += "*Spam indicators:*\n"
-            for word, val in explanation["top_spam_words"]:
-                shap_text += f"- `{word}` +{val:.3f}\n"
-        if explanation["top_ham_words"]:
-            shap_text += "*Ham indicators:*\n"
-            for word, val in explanation["top_ham_words"]:
-                shap_text += f"- `{word}` {val:.3f}\n"
-        if not explanation["top_spam_words"] and not explanation["top_ham_words"]:
-            shap_text += "No strong word-level signals found."
     except Exception:
-        shap_text += "SHAP explanation unavailable for this message."
-    return verdict, url_text if url_text else "No URLs found", text_info + "\n\n" + scores, shap_text
-examples = [
     "URGENT: Your SBI account has been suspended. Verify KYC now at http://sbi-kyc-verify.xyz or funds frozen.",
     "HDFC Bank: Rs.25,000 credited to a/c XX4521. Avl bal: Rs.1,42,356. -HDFC Bank",
     "Aapka bijli connection aaj raat 9:30 baje band ho jayega. Turant call karein: 9876543210",
-    "Airtel: Your recharge of Rs.239 is successful. Validity 28 days. -Airtel",
     "CBI notice: Aapke khilaf money laundering case darj. Digital arrest warrant. Call 9911000000.",
     "PhonePe: Rs.500 received from Rahul Kumar. UPI Ref: 4893721019.",
     "बधाई हो! आपको KBC लॉटरी में ₹25,00,000 का इनाम मिला। http://kbc-lottery.ml/win",
@@ -133,81 +417,87 @@ examples = [
     "Mom, I landed safely. Will call from the hotel in an hour.",
 ]
-seed_labels = ["Seed 1 · EN spam (KYC)", "Seed 2 · EN ham (bank)", "Seed 3 · Hinglish spam (bijli)",
-               "Seed 4 · EN ham (recharge)", "Seed 5 · Hinglish spam (CBI)", "Seed 6 · EN ham (UPI)",
-               "Seed 7 · Hindi spam (lottery)", "Seed 8 · EN ham (OTP)", "Seed 9 · EN spam (UPI)",
-               "Seed 10 · EN ham (personal)"]
-def _pick_seed(choice):
-    try:
-        idx = seed_labels.index(choice)
-    except ValueError:
-        idx = 0
-    return examples[idx]
 with gr.Blocks(title="ScamShield — Smishing Detector", css=CSS,
-               theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate")) as demo:
-    gr.HTML("""<div class="ss-hero">
-        <div class="ss-badge">🛡️ AI · Cybersecurity — Smishing Detection</div>
-        <h1>Detect <span>Scams</span> Before They Strike</h1>
-        <p>XLM-RoBERTa + URL fusion + SHAP · English · Hindi · Hinglish · Threshold 0.55</p>
-    </div>""")
     with gr.Tabs():
-        with gr.TabItem("Desktop"):
             with gr.Row():
-                with gr.Column(scale=2):
-                    inp = gr.Textbox(label="SMS Message", placeholder="Paste the SMS message here...",
-                                     lines=4, max_lines=10)
-                    btn = gr.Button("🔍 Analyze", variant="primary", size="lg")
-                    gr.Examples(examples=examples, inputs=inp, label="Try these examples")
                 with gr.Column(scale=3):
-                    verdict = gr.Markdown(label="Verdict")
                     with gr.Tabs():
                         with gr.TabItem("URL Analysis"):
-                            url_box = gr.Markdown()
                         with gr.TabItem("Text Signals"):
-                            text_box = gr.Markdown()
                         with gr.TabItem("SHAP Explainability"):
-                            shap_box = gr.Markdown()
-            btn.click(fn=analyze, inputs=inp,
-                      outputs=[verdict, url_box, text_box, shap_box], api_name="predict")
-            inp.submit(fn=analyze, inputs=inp,
-                       outputs=[verdict, url_box, text_box, shap_box])
-        with gr.TabItem("Mobile"):
-            gr.Markdown("Phone-style scanner — same live model. Full app adds the 100-message seeded inbox + Scan All; "
-                        "pick a seed below or paste any SMS.")
-            with gr.Column(elem_classes="phone-frame"):
-                gr.HTML('<div class="phone-notch"></div><div class="phone-title">🛡️ ScamShield</div>'
-                        '<div class="phone-sub">Seeded inbox preview · live analysis</div>')
-                seed = gr.Dropdown(choices=seed_labels, value=seed_labels[0], label="Seeded message")
-                minp = gr.Textbox(label="SMS Message", lines=3, max_lines=6)
-                mbtn = gr.Button("🔍 Scan", variant="primary")
-                mverdict = gr.Markdown(label="Verdict")
-                with gr.Tabs():
-                    with gr.TabItem("URLs"):
-                        murl = gr.Markdown()
-                    with gr.TabItem("Signals"):
-                        mtext = gr.Markdown()
-                    with gr.TabItem("SHAP"):
-                        mshap = gr.Markdown()
-            seed.change(fn=_pick_seed, inputs=seed, outputs=minp, api_name=False)
-            mbtn.click(fn=analyze, inputs=minp,
-                       outputs=[mverdict, murl, mtext, mshap], api_name="predict_mobile")
-    gr.HTML("""<div class="ss-footer">
-        <b>Model:</b> XLM-RoBERTa (xlm-roberta-base) · <b>Threshold:</b> 0.55 ·
-        <b>Languages:</b> English · Hindi · Hinglish · <b>Features:</b> 9 URL + 8 text signals · <b>Spam F1:</b> 0.94<br/>
-        Full Android app (.apk) via EAS build — same API underneath.
-    </div>""")
 if __name__ == "__main__":
-    demo.queue(default_concurrency_limit=1)
-    demo.launch()

 explainer = SmishingExplainer(predictor)
 print("Model loaded. Ready.")
+# ── Design tokens (ported from the Flask dashboard) ───────────────────────────
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+:root, .dark, .light, .gradio-container {
+  --bg:#0d1117; --surface:#1c2333; --surface2:#21293d; --border:#2d3748;
+  --red:#ef4444; --red-soft:rgba(239,68,68,.12); --red-border:rgba(239,68,68,.32);
+  --green:#22c55e; --green-soft:rgba(22,197,94,.12); --green-border:rgba(22,197,94,.32);
+  --amber:#f59e0b; --amber-soft:rgba(245,158,11,.12); --amber-border:rgba(245,158,11,.32);
+  --accent:#3b82f6; --accent-soft:rgba(59,130,246,.12); --accent-border:rgba(59,130,246,.34);
+  --text:#f0f6fc; --text2:#8b949e; --text3:#5b6472;
+}
+body, .gradio-container, input, textarea, button {
+  font-family:'Plus Jakarta Sans',sans-serif !important;
+}
+.dark body, .dark .gradio-container { background:var(--bg) !important; color:var(--text) !important; }
+.gradio-container { max-width:960px !important; margin:0 auto !important; }
+footer, .gradio-container > footer { display:none !important; }
+/* header */
+.ss-hero{text-align:center;padding:1.6rem 0 .6rem}
+.ss-hero h1{font-size:2.2rem;font-weight:800;letter-spacing:-.6px;margin:0;line-height:1.2}
+.ss-hero h1 span{color:var(--accent)}
+.ss-hero p{color:var(--text2);font-size:.9rem;margin-top:.35rem}
+.ss-tag{display:inline-block;background:var(--accent-soft);border:1px solid var(--accent-border);
+  color:var(--accent);font-size:.7rem;font-weight:700;padding:.22rem .7rem;border-radius:20px;
+  margin-bottom:.7rem}
+.ss-foot{text-align:center;color:var(--text3);font-size:.74rem;margin:1.2rem 0 .4rem;line-height:1.8}
+/* cards */
+.ss-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
+  padding:1.1rem 1.2rem}
+.ss-card.r-high{border-color:var(--red-border);box-shadow:0 0 0 1px var(--red-border)}
+.ss-card.r-med{border-color:var(--amber-border);box-shadow:0 0 0 1px var(--amber-border)}
+.ss-card.r-low{border-color:var(--green-border);box-shadow:0 0 0 1px var(--green-border)}
+/* verdict */
+.ss-v{display:flex;align-items:center;gap:.9rem}
+.ss-vb{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;
+  justify-content:center;font-size:1.4rem;flex-shrink:0}
+.vb-r{background:var(--red-soft);border:1.5px solid var(--red-border);color:var(--red)}
+.vb-a{background:var(--amber-soft);border:1.5px solid var(--amber-border);color:var(--amber)}
+.vb-g{background:var(--green-soft);border:1.5px solid var(--green-border);color:var(--green)}
+.ss-vt{font-size:1.02rem;font-weight:800}
+.ss-vr{font-size:.78rem;color:var(--text2);display:flex;align-items:center;gap:.35rem}
+.ss-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
+/* confidence */
+.ss-cl{font-size:.76rem;font-weight:600;color:var(--text2);margin-bottom:.35rem}
+.ss-track{height:9px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);
+  overflow:hidden}
+.ss-fill{height:100%;border-radius:5px;transition:width .9s cubic-bezier(.23,1,.32,1)}
+.ss-ticks{display:flex;justify-content:space-between;margin-top:.22rem;font-size:.64rem;
+  color:var(--text3)}
+/* labels + rows */
+.ss-lbl{font-size:.66rem;font-weight:800;color:var(--text3);letter-spacing:.8px;
+  text-transform:uppercase;margin:.9rem 0 .35rem}
+.ss-box{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--accent);
+  border-radius:0 9px 9px 0;padding:.65rem .85rem;color:var(--text2);font-size:.8rem;
+  line-height:1.6;word-break:break-word}
+.ss-url{border:1px solid var(--border);border-radius:10px;padding:.55rem .8rem;
+  background:var(--surface2);font-size:.76rem}
+.ss-flag{color:var(--text2);font-size:.74rem;line-height:1.7}
+.ss-kw{display:inline-block;background:var(--accent-soft);border:1px solid var(--accent-border);
+  border-radius:6px;color:var(--accent);font-size:.69rem;font-weight:700;padding:.12rem .42rem;
+  margin:.1rem}
+.ss-alert{border-radius:10px;padding:.8rem .95rem;margin-top:.9rem;font-size:.78rem;
+  line-height:1.7;color:var(--text2)}
+.al-red{background:var(--red-soft);border:1px solid var(--red-border)}
+.al-inf{background:var(--accent-soft);border:1px solid var(--accent-border)}
+.al-green{background:var(--green-soft);border:1px solid var(--green-border)}
+.ss-alert b{color:var(--text)}
+.ss-alert code{background:var(--surface2);border:1px solid var(--border);border-radius:4px;
+  padding:.02rem .3rem;font-family:monospace;font-size:.74rem;color:var(--text)}
+.ss-scoreline{font-size:.76rem;color:var(--text3);font-family:monospace}
+/* shap */
+.shap-chart{display:flex;flex-direction:column;gap:.4rem;margin-top:.2rem}
+.shap-row{display:flex;align-items:center;gap:.5rem}
+.shap-word{width:104px;text-align:right;font-weight:600;font-size:.72rem;color:var(--text2);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.shap-bc{flex:1;position:relative;height:16px}
+.shap-bc::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
+  background:var(--border)}
+.shap-val{width:48px;font-size:.68rem;color:var(--text3)}
+/* phone frame */
+.phone{max-width:392px;margin:0 auto;background:var(--surface);border:10px solid #0b0e13;
+  border-radius:34px;padding:.9rem .8rem 1.2rem;box-shadow:0 14px 44px rgba(0,0,0,.35)}
+.phone-notch{width:120px;height:18px;background:#0b0e13;border-radius:0 0 12px 12px;
+  margin:0 auto .7rem}
+.phone-brand{text-align:center;font-weight:800;font-size:.94rem;margin-bottom:.6rem}
+.phone-brand span{color:var(--accent)}
+.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.6rem 0 .8rem}
+.p-stat{background:var(--surface2);border:1px solid var(--border);border-radius:10px;
+  padding:.45rem .2rem;text-align:center}
+.p-stat b{display:block;font-size:1.1rem;font-weight:800}
+.p-stat span{font-size:.6rem;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
+.p-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:300px;
+  overflow-y:auto}
+.p-item{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .6rem;
+  border-bottom:1px solid var(--border);font-size:.74rem;cursor:pointer}
+.p-item:last-child{border-bottom:none}
+.p-item:hover{background:var(--surface2)}
+.p-dot{width:8px;height:8px;border-radius:50%;margin-top:.35rem;flex-shrink:0;background:var(--text3)}
+.p-sender{font-size:.66rem;color:var(--text3);font-weight:700}
+.p-body{color:var(--text2);line-height:1.45;overflow:hidden}
+.p-lab{font-size:.58rem;font-weight:800;padding:.08rem .36rem;border-radius:20px;
+  flex-shrink:0;margin-top:.15rem}
+.p-note{font-size:.73rem;color:var(--text3);line-height:1.6;margin:.8rem 0 .2rem}
+.mob-col{display:grid;grid-template-columns:392px 1fr;gap:1.3rem;align-items:start}
+@media(max-width:880px){.mob-col{grid-template-columns:1fr}}
+/* gradio bits */
+.ss-msg textarea{background:var(--bg)!important;border:1.5px solid var(--border)!important;
+  border-radius:10px!important;color:var(--text)!important}
+.ss-msg textarea:focus{border-color:var(--accent)!important}
+.ss-btn button{background:var(--accent)!important;border:none!important;font-weight:800!important;
+  border-radius:10px!important}
+.ss-sel .wrap, .gradio-container .wrap{border-color:var(--border)!important}
+footer{display:none!important}
 """
+SEED_SMS = [
+    {"s": "+91-SBI-ALERT", "b": "URGENT: Your SBI account has been suspended. Verify KYC now at http://sbi-kyc-verify.xyz or funds will be frozen.", "e": "spam"},
+    {"s": "+91-LOTTERY", "b": "CONGRATULATIONS! You have been selected as the lucky winner of Rs.5,00,000. Claim before it expires: http://prize-winner.xyz/claim", "e": "spam"},
+    {"s": "+91-DHL", "b": "Your package could not be delivered. Pay Rs.2.99 customs fee at http://dhl-fee.net/track or it will be returned.", "e": "spam"},
+    {"s": "+91-CBI", "b": "CBI notice: Aapke khilaf money laundering case darj. Digital arrest warrant. Call 9911000000.", "e": "spam"},
+    {"s": "+91-BIJLI", "b": "Aapka bijli connection aaj raat 9:30 baje band ho jayega. Turant call karein: 9876543210", "e": "spam"},
+    {"s": "+91-UPI", "b": "Dear user, your UPI ID expires in 24h. Renew at http://upi-renew.club/verify", "e": "spam"},
+    {"s": "+91-IPURL", "b": "Your account is compromised. Verify immediately at http://192.168.44.12/secure-login", "e": "spam"},
+    {"s": "लोटरी", "b": "बधाई हो! आपको KBC लॉटरी में ₹25,00,000 का इनाम मिला। http://kbc-lottery.ml/win", "e": "spam"},
+    {"s": "बिजली", "b": "प्रिय ग्राहक, आपका बिजली कनेक्शन आज रात 9:30 बजे क��ट दिया जाएगा। अभी कॉल करें: 9876543210", "e": "spam"},
+    {"s": "+91-HDFC", "b": "HDFC Bank: Rs.25,000 credited to a/c XX4521 on 02-May. Avl bal: Rs.1,42,356. -HDFC Bank", "e": "ham"},
+    {"s": "+91-SBI", "b": "Your OTP for SBI Net Banking login is 483921. Valid for 10 minutes. Do not share. -SBI", "e": "ham"},
+    {"s": "+91-AIRTEL", "b": "Airtel Thanks! Your recharge of Rs.239 is successful. Validity: 28 days. Data: 1.5GB/day. -Airtel", "e": "ham"},
+    {"s": "+91-PHONEPE", "b": "PhonePe: Rs.500 received from Rahul Kumar. UPI Ref: 4893721019.", "e": "ham"},
+    {"s": "+91-AMAZON", "b": "Your Amazon order #402-9876543 is out for delivery today. Track: amzn.in/track -Amazon", "e": "ham"},
+    {"s": "+91-IRCTC", "b": "Your IRCTC ticket PNR 4567891230 is confirmed. Train 12345 on 05-May. Seat: S4/32. -IRCTC", "e": "ham"},
+    {"s": "Mum", "b": "Mom, I landed safely. Will call from the hotel in an hour.", "e": "ham"},
+]
+SEED_LABELS = [f"{m['s']}" for m in SEED_SMS]
+def esc(s):
+    return (str(s).replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;"))
+def risk_of(p, risk_level=""):
+    if p >= 75 or risk_level == "high":
+        return "r", "var(--red)", "vb-r", "High Risk", "🔴"
+    if p >= 55 or risk_level == "medium":
+        return "a", "var(--amber)", "vb-a", "Medium Risk", "🟠"
+    return "g", "var(--green)", "vb-g", "Low Risk", "🟢"
+def verdict_html(result, msg=""):
+    conf = result.get("confidence", 0)
+    p = max(0, min(99, round(conf * 100)))
+    lvl, colour, badge, label, icon = risk_of(p, result.get("risk_level", ""))
+    spam = result.get("label") == "spam"
+    title = "Threat Detected" if spam else ("Safe" if result.get("label") == "safe" else "Appears Legitimate")
+    out = [f'<div class="ss-card r-{"high" if lvl=="r" else ("med" if lvl=="a" else "low")}">']
+    out.append(
+        f'<div class="ss-v"><div class="ss-vb {badge}">{icon}</div><div>'
+        f'<div class="ss-vt">{title}</div>'
+        f'<div class="ss-vr"><span class="ss-dot" style="background:{colour}"></span>'
+        f'{label} · {result.get("language","?")} · threshold {predictor.threshold}</div></div></div>'
+    )
+    if msg:
+        out.append('<div class="ss-lbl">Scanned input</div>')
+        out.append(f'<div class="ss-box">{esc(msg)}</div>')
+    out.append('<div class="ss-lbl">Threat confidence score</div>')
+    out.append(
+        f'<div class="ss-cl">{p}% probability of smishing</div>'
+        f'<div class="ss-track"><div class="ss-fill" style="width:{p}%;background:{colour}"></div></div>'
+        f'<div class="ss-ticks"><span>Safe 0%</span><span>Threshold 55%</span><span>High 75%+</span></div>'
+    )
+    if result.get("green_channel"):
+        out.append(
+            f'<div class="ss-alert al-green"><b>🛡 Green Channel cleared:</b> '
+            f'{esc(result.get("green_reason",""))}</div>'
+        )
+    out.append("</div>")
+    return "".join(out)
+def url_html(result):
+    u = result.get("url_signals", {})
+    if not u.get("has_url"):
+        return '<div class="ss-card"><div class="ss-flag">No URLs found in this message.</div></div>'
+    rows = []
+    if u.get("has_ip_url"):        rows.append(("🔴", "IP address used instead of a domain"))
+    if u.get("has_shortened_url"): rows.append(("🔴", "URL shortener — hides the real destination"))
+    if u.get("suspicious_tld"):    rows.append(("🟠", "Suspicious TLD (.xyz, .tk, .top …)"))
+    if u.get("has_http") and not u.get("has_https"): rows.append(("🟠", "HTTP — connection not encrypted"))
+    if u.get("has_legit_domain"):  rows.append(("🟢", "Legitimate domain detected"))
+    flags = "".join(f"<div>{i} {t}</div>" for i, t in rows) or "<div>No obvious threats</div>"
+    return (
+        f'<div class="ss-card"><div class="ss-lbl" style="margin-top:0">URL analysis</div>'
+        f'<div class="ss-url">{flags}</div>'
+        f'<div class="ss-flag" style="margin-top:.45rem">Links found: {u.get("num_urls",0)}</div></div>'
+    )
+def signals_html(result):
+    t = result.get("text_signals", {})
+    line1 = f'Chars {t.get("num_chars",0)} · Words {t.get("num_words",0)} · Upper {round(t.get("pct_upper",0)*100)}% · Digits {round(t.get("pct_digits",0)*100)}%'
+    line2 = (f'Urgency keywords {t.get("urgency_count",0)} · '
+             f'Phone number {"Yes" if t.get("has_phone") else "No"} · '
+             f'Currency symbol {"Yes" if t.get("has_currency") else "No"}')
+    kws = [w for w in result.get("_tokens", [])][:12]
+    kw_html = ""
+    if kws:
+        kw_html = ('<div class="ss-lbl">Trigger tokens</div>' +
+                   "".join(f'<span class="ss-kw">{esc(w)}</span>' for w in kws))
+    scores = (
+        f'Neural {result.get("_neural_score",0):.3f} · '
+        f'Rule {result.get("_rule_score",0):.3f} · '
+        f'Ham {result.get("_ham_rule_score",0):.3f}'
+    )
+    return (
+        f'<div class="ss-card"><div class="ss-lbl" style="margin-top:0">Text signals</div>'
+        f'<div class="ss-box">{esc(line1)}<br>{esc(line2)}</div>'
+        f'<div class="ss-lbl">Scores</div><div class="ss-scoreline">{esc(scores)}</div>{kw_html}</div>'
+    )
+def shap_html(words, note=""):
+    if not words:
+        return f'<div class="ss-card"><div class="ss-flag">{esc(note or "No strong word-level signals found.")}</div></div>'
+    rows = sorted(words, key=lambda w: -abs(w[1]))[:10]
+    mx = max(abs(w[1]) for w in rows) or 1
+    bars = []
+    for word, val in rows:
+        pct = (abs(val) / mx) * 45
+        style = (f"left:50%;width:{pct}%;background:var(--red)" if val > 0
+                 else f"right:50%;width:{pct}%;background:var(--green)")
+        bars.append(
+            f'<div class="shap-row"><div class="shap-word">{esc(word)}</div>'
+            f'<div class="shap-bc"><div style="position:absolute;height:10px;border-radius:2px;top:3px;{style}"></div></div>'
+            f'<div class="shap-val">{val:+.3f}</div></div>'
+        )
+    return f'<div class="ss-card"><div class="shap-chart">{"".join(bars)}</div></div>'
+def warn_html(result):
+    if result.get("label") != "spam":
+        return ""
+    return (
+        '<div class="ss-alert al-red"><b>⚠ Early Warning — do not act on this message.</b><br>'
+        'Do <b>NOT</b> click links or share your OTP, Aadhaar or bank details.<br>'
+        '▸ Block the sender · ▸ Report at <code>cybercrime.gov.in</code> · Helpline <code>1930</code></div>'
+    )
+def _run(message):
     result = predictor.predict(message)
+    result["_tokens"] = sorted(
+        w for w in str(message).lower().split()
+        if w.isalpha() and len(w) > 2
+    )
+    return result
+def _explain(message):
     try:
+        return explainer.explain_text(message, num_features=10)
     except Exception:
+        return {"top_spam_words": [], "top_ham_words": []}
+# ── Tab 1: text scanner ────────────────────────────────────────────────────────
+@spaces.GPU(duration=90)
+def scan(message):
+    if not message or not message.strip():
+        blank = '<div class="ss-card"><div class="ss-flag">Please enter a message to analyse.</div></div>'
+        return blank, blank, blank, blank, ""
+    result = _run(message)
+    ex = _explain(message)
+    words = list(ex.get("top_spam_words", [])) + list(ex.get("top_ham_words", []))
+    return (
+        verdict_html(result, message),
+        url_html(result),
+        signals_html(result),
+        shap_html(words),
+        warn_html(result),
+    )
+# ── Tab 2: mobile view ─────────────────────────────────────────────────────────
+@spaces.GPU
+def mobile_detail(seed_choice, custom=""):
+    idx = SEED_LABELS.index(seed_choice) if seed_choice in SEED_LABELS else 0
+    message = custom.strip() if custom.strip() else SEED_SMS[idx]["b"]
+    result = _run(message)
+    ex = _explain(message)
+    words = list(ex.get("top_spam_words", [])) + list(ex.get("top_ham_words", []))
+    body = verdict_html(result, message) + url_html(result) + signals_html(result)
+    body += shap_html(words, "Scan a message to see word-level SHAP impact.")
+    body += warn_html(result)
+    return body
+@spaces.GPU
+def mobile_scan_all(progress=gr.Progress()):
+    rows, threats, safe = [], 0, 0
+    for i, seed in enumerate(SEED_SMS):
+        progress(i / len(SEED_SMS), desc=f"Scanning {i+1}/{len(SEED_SMS)} · {seed['s']}")
+        try:
+            r = _run(seed["b"])
+            is_spam = r.get("label") == "spam"
+        except Exception:
+            r = {"label": "ham"}
+            is_spam = False
+        threats += is_spam
+        safe += (not is_spam)
+        rows.append(
+            f'<div class="p-item"><span class="p-dot" style="background:'
+            f'{"var(--red)" if is_spam else "var(--green)"}"></span>'
+            f'<div style="flex:1;min-width:0"><div class="p-sender">{esc(seed["s"])}</div>'
+            f'<div class="p-body">{esc(seed["b"][:96])}{"…" if len(seed["b"])>96 else ""}</div></div>'
+            f'<span class="p-lab" style="background:{"var(--red-soft)" if is_spam else "var(--green-soft)"};'
+            f'color:{"var(--red)" if is_spam else "var(--green)"};'
+            f'border:1px solid {"var(--red-border)" if is_spam else "var(--green-border)"}">'
+            f'{"RISK" if is_spam else "SAFE"}</span></div>'
+        )
+    progress(1, desc="done")
+    stats = (
+        '<div class="p-stats">'
+        f'<div class="p-stat"><b>{len(SEED_SMS)}</b><span>Scanned</span></div>'
+        f'<div class="p-stat"><b style="color:var(--red)">{threats}</b><span>Threats</span></div>'
+        f'<div class="p-stat"><b style="color:var(--green)">{safe}</b><span>Safe</span></div>'
+        f'</div>'
+    )
+    return stats + f'<div class="p-list">{"".join(rows)}</div>'
+# ── JSON API (used by the mobile app and any external client) ─────────────────
+@spaces.GPU(duration=60)
+def predict_api(message: str) -> dict:
+    return _run(message)
+@spaces.GPU
+def explain_api(message: str) -> dict:
+    result = _run(message)
+    ex = _explain(message)
+    return {
+        "label": result["label"],
+        "confidence": result["confidence"],
+        "top_spam_words": ex.get("top_spam_words", []),
+        "top_ham_words": ex.get("top_ham_words", []),
+    }
+def check_domain_api(domain: str) -> dict:
+    from utils.safe_browsing import check_domain_status
+    status = check_domain_status(domain)
+    return {
+        "domain": domain,
+        "status": status,
+        "is_legitimate": status == "known_safe",
+        "is_malicious": status == "known_malicious",
+    }
+EXAMPLES = [
     "URGENT: Your SBI account has been suspended. Verify KYC now at http://sbi-kyc-verify.xyz or funds frozen.",
     "HDFC Bank: Rs.25,000 credited to a/c XX4521. Avl bal: Rs.1,42,356. -HDFC Bank",
     "Aapka bijli connection aaj raat 9:30 baje band ho jayega. Turant call karein: 9876543210",
     "CBI notice: Aapke khilaf money laundering case darj. Digital arrest warrant. Call 9911000000.",
     "PhonePe: Rs.500 received from Rahul Kumar. UPI Ref: 4893721019.",
     "बधाई हो! आपको KBC लॉटरी में ₹25,00,000 का इनाम मिला। http://kbc-lottery.ml/win",
     "Mom, I landed safely. Will call from the hotel in an hour.",
 ]
+HERO = (
+    '<div class="ss-hero">'
+    '<span class="ss-tag">🛡 AI · Cybersecurity — Smishing Detection</span>'
+    '<h1>Detect <span>Scams</span> Before They Strike</h1>'
+    '<p>XLM-RoBERTa + URL fusion + SHAP · English · Hindi · Hinglish</p>'
+    "</div>"
+)
+FOOT = (
+    '<div class="ss-foot">'
+    "XLM-RoBERTa (xlm-roberta-base) · threshold 0.55 · 9 URL + 8 text signals · spam F1 0.94<br/>"
+    "Android app (.apk) runs this identical API · messages are analysed on the GPU"
+    "</div>"
+)
 with gr.Blocks(title="ScamShield — Smishing Detector", css=CSS,
+               theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"),
+               fill_height=False) as demo:
+    gr.HTML(HERO)
     with gr.Tabs():
+        with gr.TabItem("Text & Link Scanner"):
             with gr.Row():
+                with gr.Column(scale=2, elem_classes="ss-msg"):
+                    inp = gr.Textbox(label="SMS message", lines=5, max_lines=10,
+                                     placeholder="Paste the SMS message here…\nCtrl+Enter to scan.")
+                    btn = gr.Button("🔍 Run Threat Analysis", variant="primary", size="lg",
+                                    elem_classes="ss-btn")
+                    gr.Examples(examples=EXAMPLES, inputs=inp, label="Try these examples")
                 with gr.Column(scale=3):
+                    verdict = gr.HTML()
                     with gr.Tabs():
                         with gr.TabItem("URL Analysis"):
+                            url_box = gr.HTML()
                         with gr.TabItem("Text Signals"):
+                            text_box = gr.HTML()
                         with gr.TabItem("SHAP Explainability"):
+                            shap_box = gr.HTML()
+                    warn_box = gr.HTML()
+            for evt in (btn.click, inp.submit):
+                evt(fn=scan, inputs=inp,
+                    outputs=[verdict, url_box, text_box, shap_box, warn_box],
+                    api_name="scan", show_progress="hidden")
+        with gr.TabItem("Mobile App"):
+            with gr.Row():
+                with gr.Column(scale=2, elem_classes="phone"):
+                    gr.HTML('<div class="phone-notch"></div>'
+                            '<div class="phone-brand">🛡 <span>ScamShield</span></div>')
+                    m_stats = gr.HTML()
+                    m_seed = gr.Dropdown(choices=SEED_LABELS, value=SEED_LABELS[0],
+                                         label="Seeded inbox message", elem_classes="ss-sel")
+                    m_custom = gr.Textbox(label="…or paste your own", lines=2, max_lines=4,
+                                          elem_classes="ss-msg")
+                    with gr.Row():
+                        m_scan = gr.Button("🔍 Scan this", variant="primary", elem_classes="ss-btn")
+                        m_all = gr.Button("▶ Scan all 16", variant="secondary")
+                    m_out = gr.HTML()
+                with gr.Column(scale=3):
+                    gr.HTML(
+                        '<div class="ss-card"><div class="ss-lbl" style="margin-top:0">'
+                        "Live app, phone frame</div><div class=\"ss-flag\">"
+                        "Same Space, same model, same SHAP — this is the mobile UI running the "
+                        "identical analysis pipeline. The Android build adds real inbox polling "
+                        "(<code>READ_SMS</code>), AES-256-CBC encrypted requests and background "
+                        "threat notifications.</div></div>"
+                        '<div class="ss-card"><div class="ss-lbl">Why a seeded inbox?</div>'
+                        '<div class="ss-flag">Browsers and iOS cannot read an SMS inbox, so the '
+                        "web demo ships a fixed set of English, Hindi and Hinglish messages. "
+                        "<b>Scan all 16</b> walks the whole set through the model and tallies "
+                        "threats vs safe.</div></div>"
+                    )
+            m_scan.click(fn=mobile_detail, inputs=[m_seed, m_custom], outputs=m_out,
+                         show_progress="hidden")
+            m_all.click(fn=mobile_scan_all, outputs=m_stats, show_progress="minimal")
+            m_stats.click(fn=mobile_scan_all, outputs=m_stats, show_progress="minimal")
+    gr.HTML(FOOT)
 if __name__ == "__main__":
+    demo.queue(default_concurrency_limit=2)
+    demo.launch()