Update app.py

app.py

@@ -7,10 +7,12 @@ MODEL_ID = "roncc13/trainCMDBERT-sample"
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForSequenceClassification.from_pretrained(MODEL_ID)
 
-# Adjust these to match your label order
-label_names = ["fake", "real"]
+label_names = ["fake", "real"]  # adjust if your order is different
 
 def classify(text):
+    if not text.strip():
+        return "—", 0.0, "", [], "Please enter some text."
+
     inputs = tokenizer(
         text,
         return_tensors="pt",
@@ -21,15 +23,425 @@ def classify(text):
     with torch.no_grad():
         outputs = model(**inputs)
         probs = torch.softmax(outputs.logits, dim=-1)[0].tolist()
-    return {label_names[i]: float(probs[i]) for i in range(len(label_names))}
-
-demo = gr.Interface(
-    fn=classify,
-    inputs=gr.Textbox(lines=4, label="Enter Cebuano news text"),
-    outputs=gr.Label(num_top_classes=2, label="Prediction"),
-    title="CMD-BERT Cebuano Fake News Detector",
-    description="Paste Cebuano news text to check if it is likely fake or real."
-)
+
+    best_idx = int(torch.argmax(torch.tensor(probs)))
+    best_label = label_names[best_idx].upper()
+    best_score = float(probs[best_idx])
+
+    # For now, mock some highlighted phrases & tags.
+    # Later you can replace this with real explanation logic.
+    phrases = ["walay side effects", "dili kinahanglan og bakuna"]
+    tags = ["Sensational claim", "Absolute wording", "Authority framing"]
+
+    explanation = (
+        "Highlighted phrases are examples of strong cues the model may rely on "
+        "when estimating whether the text is misleading."
+    )
+
+    return best_label, best_score, text, phrases, explanation, tags
+
+custom_css = """
+body {
+    background: radial-gradient(circle at top left, #2b2c4a 0, #121320 45%, #080910 100%);
+}
+
+/* overall container */
+.gradio-container {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
+                 "Segoe UI", sans-serif;
+    max-width: 1100px !important;
+    margin: 0 auto !important;
+    padding: 20px 10px 40px 10px !important;
+    color: #f5f6ff;
+}
+
+/* hide default borders */
+.gradio-container .block {
+    border: none;
+    box-shadow: none;
+}
+
+/* top nav bar */
+#top-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 18px;
+}
+
+#top-nav-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.nav-logo {
+    width: 24px;
+    height: 24px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #ffffff, #c1c5ff);
+}
+
+.nav-title {
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    font-size: 14px;
+}
+
+.nav-subtitle {
+    font-size: 11px;
+    opacity: 0.7;
+}
+
+#top-nav-right {
+    display: flex;
+    gap: 24px;
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+/* big hero text */
+#hero {
+    margin: 16px 0 18px 0;
+}
+
+.hero-title {
+    font-size: 30px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    line-height: 1.15;
+}
+
+.hero-subtitle {
+    margin-top: 8px;
+    font-size: 13px;
+    max-width: 520px;
+    opacity: 0.8;
+}
+
+/* 2-column main layout */
+#main-row {
+    display: grid;
+    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.3fr);
+    gap: 20px;
+}
+
+/* glass panels */
+.glass-card {
+    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
+    border-radius: 18px;
+    border: 1px solid rgba(255,255,255,0.12);
+    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
+    padding: 18px 20px;
+    backdrop-filter: blur(14px);
+}
+
+/* left column inner layout */
+#left-column {
+    display: grid;
+    grid-template-rows: auto auto;
+    gap: 14px;
+}
+
+/* text input card */
+.card-title {
+    font-size: 15px;
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
+.card-subtitle {
+    font-size: 11px;
+    opacity: 0.75;
+    margin-bottom: 8px;
+}
+
+#example-box {
+    background: #050515;
+    border-radius: 10px;
+    padding: 10px 12px;
+    font-size: 11px;
+    line-height: 1.4;
+    color: rgba(245,246,255,0.86);
+    margin-bottom: 10px;
+}
+
+/* gradio textbox */
+textarea {
+    background: #050515 !important;
+    border-radius: 10px !important;
+    border: 1px solid rgba(255,255,255,0.08) !important;
+    color: #f5f6ff !important;
+    font-size: 13px !important;
+}
+
+/* buttons row */
+#input-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+    font-size: 11px;
+}
+
+.btn-primary-custom {
+    background: linear-gradient(135deg, #21c38f, #1ab07f) !important;
+    color: #041110 !important;
+    border-radius: 999px !important;
+    border: none !important;
+    padding: 6px 20px !important;
+    font-weight: 600 !important;
+    box-shadow: 0 12px 25px rgba(8, 160, 110, 0.55);
+}
+
+.btn-secondary-custom {
+    background: transparent !important;
+    color: rgba(245,246,255,0.85) !important;
+    border-radius: 999px !important;
+    border: 1px solid rgba(255,255,255,0.2) !important;
+    padding: 6px 18px !important;
+    font-size: 11px !important;
+}
+
+/* result + why flagged stack */
+#right-column {
+    display: grid;
+    grid-template-rows: auto auto;
+    gap: 14px;
+}
+
+/* Result panel */
+.result-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 14px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    background: #ff9c8b;
+    color: #3b1b19;
+    margin-bottom: 4px;
+}
+
+.result-meta {
+    font-size: 11px;
+    opacity: 0.75;
+}
+
+.result-confidence {
+    font-size: 26px;
+    font-weight: 600;
+}
+
+/* bar */
+.conf-bar-bg {
+    margin-top: 10px;
+    width: 100%;
+    height: 8px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.1);
+}
+
+.conf-bar-fill {
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, #ff9c8b, #ff6e87);
+}
+
+/* Why flagged */
+.badge-phrase {
+    background: #050515;
+    padding: 6px 10px;
+    border-radius: 10px;
+    font-size: 11px;
+    margin: 4px 6px 4px 0;
+    display: inline-block;
+}
+
+.badge-tag {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    margin-right: 6px;
+    margin-top: 6px;
+    background: rgba(255,255,255,0.08);
+}
+
+/* Mobile tweaks */
+@media (max-width: 900px) {
+    #main-row {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+"""
+
+with gr.Blocks(css=custom_css, fill_height=True, theme=gr.themes.Soft()) as demo:
+    # Top bar
+    with gr.Row(elem_id="top-nav"):
+        with gr.Column(scale=3, elem_id="top-nav-left"):
+            gr.HTML(
+                """
+                <div style="display:flex;align-items:center;gap:10px;">
+                    <div class="nav-logo"></div>
+                    <div>
+                        <div class="nav-title">CMD‑BERT</div>
+                        <div class="nav-subtitle">Cebuano Misinformation Detector</div>
+                    </div>
+                </div>
+                """
+            )
+        with gr.Column(scale=2, elem_id="top-nav-right"):
+            gr.HTML(
+                """
+                <div id="top-nav-right">
+                    <span>Analyzer</span>
+                    <span>How it works</span>
+                    <span>About</span>
+                    <span>Feedback</span>
+                </div>
+                """
+            )
+
+    # Hero
+    gr.HTML(
+        """
+        <section id="hero">
+          <div class="hero-title">
+            Check Cebuano text for<br>a misleading writing style.
+          </div>
+          <div class="hero-subtitle">
+            Paste a headline, post, or short article. CMD‑BERT returns a label
+            (Fake or Legit), confidence score, and key text cues to support the result.
+          </div>
+        </section>
+        """
+    )
+
+    # Main content
+    with gr.Row(elem_id="main-row"):
+        # Left: text input
+        with gr.Column(elem_id="left-column"):
+            with gr.Group(elem_classes=["glass-card"]):
+                gr.HTML(
+                    """
+                    <div class="card-title">Text input</div>
+                    <div class="card-subtitle">
+                      Cebuano only. This tool checks linguistic patterns; it does not verify facts.
+                    </div>
+                    <div id="example-box">
+                      <b>Example:</b><br>
+                      “Nakadisubre og milagro nga tambal sa COVID‑19 ang usa ka local doktor,
+                      giingon nga walay side effects ug dili kinahanglan og bakuna.”
+                    </div>
+                    """
+                )
+                input_text = gr.Textbox(
+                    lines=6,
+                    label="",
+                    placeholder="Paste Cebuano news here..."
+                )
+                with gr.Row(elem_id="input-buttons"):
+                    with gr.Row():
+                        analyze_btn = gr.Button("Analyze", elem_classes=["btn-primary-custom"])
+                        clear_btn = gr.Button("Clear", elem_classes=["btn-secondary-custom"])
+                    gr.Markdown("Tip: Keep inputs under 1,000 characters for faster results.")
+
+        # Right: result + explanation
+        with gr.Column(elem_id="right-column"):
+            # Result card
+            with gr.Group(elem_classes=["glass-card"]):
+                gr.HTML('<div class="card-title">Result</div>')
+                result_label = gr.HTML("<div class='result-label'>FAKE</div>")
+                result_conf_html = gr.HTML(
+                    """
+                    <div style="display:flex;align-items:flex-end;gap:6px;margin-top:2px;">
+                        <span class="result-confidence" id="conf-val">0.87</span>
+                        <span style="font-size:11px;opacity:0.8;">confidence</span>
+                    </div>
+                    """
+                )
+                bar_bg = gr.HTML(
+                    """
+                    <div class="conf-bar-bg">
+                        <div id="conf-bar-fill" class="conf-bar-fill" style="width:87%;"></div>
+                    </div>
+                    """
+                )
+                result_meta = gr.Markdown(
+                    "Model: CMD‑BERT (fine‑tuned BERT‑base).\n\n"
+                    "Output: Label + confidence score for this text."
+                )
+
+            # Why flagged card
+            with gr.Group(elem_classes=["glass-card"]):
+                gr.HTML('<div class="card-title">Why this was flagged</div>')
+                gr.Markdown(
+                    "Highlighted phrases are shown as the strongest signals used by the model."
+                )
+                highlighted_text = gr.HTML(
+                    "<div class='badge-phrase'>walay side effects</div>"
+                )
+                tags_md = gr.HTML(
+                    """
+                    <div>
+                        <span class="badge-tag">Sensational claim</span>
+                        <span class="badge-tag">Absolute wording</span>
+                        <span class="badge-tag">Authority framing</span>
+                    </div>
+                    """
+                )
+                explanation_md = gr.Markdown(
+                    "Use this as a screening tool. Always verify with trusted sources."
+                )
+
+    # Wiring function to UI (update label, confidence, bars, explanations)
+    def update_ui(text):
+        label, score, _, phrases, explanation, tags = classify(text)
+        score_pct = int(score * 100)
+
+        label_html = f"<div class='result-label'>{label}</div>"
+        conf_html = (
+            f\"\"\"\n<div style="display:flex;align-items:flex-end;gap:6px;margin-top:2px;">
+                <span class="result-confidence">{score:.2f}</span>
+                <span style="font-size:11px;opacity:0.8;">confidence</span>
+            </div>\n\"\"\"
+        )
+        bar_html = (
+            f\"\"\"<div class="conf-bar-bg">
+                    <div id="conf-bar-fill" class="conf-bar-fill" style="width:{score_pct}%;"></div>
+                  </div>\"\"\"
+        )
+
+        phrase_html = "".join(
+            [f"<span class='badge-phrase'>{p}</span>" for p in phrases]
+        )
+        tags_html = "".join(
+            [f"<span class='badge-tag'>{t}</span>" for t in tags]
+        )
+
+        return (
+            label_html,
+            conf_html,
+            bar_html,
+            phrase_html,
+            explanation,
+            tags_html,
+        )
+
+    analyze_btn.click(
+        fn=update_ui,
+        inputs=input_text,
+        outputs=[
+            result_label,
+            result_conf_html,
+            bar_bg,
+            highlighted_text,
+            explanation_md,
+            tags_md,
+        ],
+    )
+    clear_btn.click(None, [], [input_text], _js="() => ''")
 
 if __name__ == "__main__":
     demo.launch()