Update app.py

app.py

@@ -2,6 +2,9 @@ import gradio as gr
 from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import torch
 
+# --------------------------
+#  Model setup
+# --------------------------
 MODEL_ID = "roncc13/trainCMDBERT-sample"
 
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
@@ -26,90 +29,157 @@ def classify(text: str):
     return {label_names[i]: float(probs[i]) for i in range(len(label_names))}
 
 
+# --------------------------
+#  CSS matching the mockup
+# --------------------------
 custom_css = """
 body {
-    background: radial-gradient(circle at top left, #262845 0, #10111e 45%, #060712 100%);
+    /* Tailwind: bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-900 */
+    background: linear-gradient(135deg, #020617 0%, #1e0b45 50%, #020617 100%);
 }
 .gradio-container {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Segoe UI", sans-serif;
     max-width: 1120px !important;
     margin: 0 auto !important;
-    padding: 32px 16px 40px 16px !important;
-    color: #f5f6ff;
+    padding: 32px 24px 40px 24px !important;
+    color: #f9fafb;
 }
+
+/* Main cards */
 .glass-card {
-    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
-    border-radius: 20px;
-    border: 1px solid rgba(255,255,255,0.16);
-    box-shadow: 0 18px 45px rgba(0,0,0,0.7);
+    background: rgba(15, 23, 42, 0.96); /* near indigo-950 */
+    border-radius: 24px;
+    border: 1px solid rgba(148, 163, 184, 0.30); /* slate-400 */
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
     padding: 20px 22px;
-    backdrop-filter: blur(20px);
 }
+
+/* Header bar: CMD-BERT left, About CMD-BERT right */
+.cmd-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+}
+.cmd-header-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.cmd-logo {
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    background: radial-gradient(circle at 30% 30%, #a5b4fc, #6366f1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #020617;
+    font-weight: 700;
+    font-size: 16px;
+}
+.cmd-title {
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #e5e7eb;
+}
+.cmd-subtitle {
+    font-size: 11px;
+    color: #9ca3af;
+}
+.cmd-header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #e5e7eb;
+    opacity: 0.9;
+}
+.cmd-header-pill {
+    width: 24px;
+    height: 24px;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.35);
+}
+
+/* Hero text */
 .hero-title {
-    font-size: 30px;
+    font-size: 34px;
     font-weight: 700;
     letter-spacing: 0.02em;
     line-height: 1.2;
-    margin-bottom: 6px;
+    color: #e5e7eb;
+    margin-bottom: 8px;
 }
 .hero-subtitle {
-    font-size: 13px;
-    max-width: 560px;
-    opacity: 0.85;
+    font-size: 14px;
+    max-width: 640px;
+    opacity: 0.9;
+    color: #cbd5f5;
 }
+
+/* Buttons */
 .btn-primary-custom {
-    background: linear-gradient(135deg, #1fd39a, #19b984) !important;
-    color: #041110 !important;
+    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
+    color: #020617 !important;
     border-radius: 999px !important;
     border: none !important;
     padding: 10px 26px !important;
     font-weight: 600 !important;
-    box-shadow: 0 14px 30px rgba(11, 176, 123, 0.6);
+    box-shadow: 0 18px 40px rgba(22, 163, 74, 0.7);
 }
 .btn-secondary-custom {
-    background: rgba(255,255,255,0.02) !important;
-    color: rgba(245,246,255,0.90) !important;
+    background: transparent !important;
+    color: #e5e7eb !important;
     border-radius: 999px !important;
-    border: 1px solid rgba(255,255,255,0.25) !important;
+    border: 1px solid rgba(148, 163, 184, 0.6) !important;
     padding: 10px 22px !important;
     font-size: 11px !important;
 }
+
+/* Confidence bar + label pill */
 .conf-bar-bg {
-    margin-top: 12px;
+    margin-top: 14px;
     width: 100%;
     height: 8px;
     border-radius: 999px;
-    background: rgba(255,255,255,0.1);
+    background: rgba(148, 163, 184, 0.35);
 }
 .conf-bar-fill {
     height: 100%;
     border-radius: inherit;
-    background: linear-gradient(90deg, #ff9c8b, #ff6e87);
+    background: linear-gradient(90deg, #f97316, #fb923c);
 }
 .badge-pill {
     display: inline-flex;
     align-items: center;
     padding: 4px 14px;
     border-radius: 999px;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 600;
 }
 .badge-fake {
-    background: #ff9c8b;
-    color: #3b1b19;
+    background: #f97316;
+    color: #111827;
 }
 .badge-real {
-    background: #7fe6c2;
-    color: #07352a;
+    background: #22c55e;
+    color: #022c22;
 }
+
+/* Textbox styling */
 textarea {
-    background: #050515 !important;
-    border-radius: 12px !important;
-    border: 1px solid rgba(255,255,255,0.12) !important;
-    color: #f5f6ff !important;
+    background: #020617 !important;
+    border-radius: 18px !important;
+    border: 1px solid rgba(148, 163, 184, 0.35) !important;
+    color: #f9fafb !important;
     font-size: 13px !important;
 }
+
+/* Two-column responsiveness */
 @media (max-width: 900px) {
     .two-col {
         flex-direction: column !important;
@@ -118,228 +188,132 @@ textarea {
 """
 
 
+# --------------------------
+#  UI
+# --------------------------
 with gr.Blocks(fill_height=True) as demo:
-    # top padding so content is not glued to the tabs
-    gr.HTML("<div style='height: 10px;'></div>")
-
-    with gr.Tab("Analyzer"):
-        with gr.Row():
-            with gr.Column():
-                gr.HTML(
-                    """
-                    <section style="margin-bottom:22px;">
-                      <div class="hero-title">
-                        Check Cebuano text for a misleading writing style.
-                      </div>
-                      <div class="hero-subtitle">
-                        Paste a headline, post, or short article. CMD‑BERT returns a label
-                        (Fake or Legit) and a confidence score based on writing patterns.
-                        It does not verify factual correctness.
-                      </div>
-                    </section>
-                    """
-                )
+    # Header bar
+    gr.HTML(
+        """
+        <header class="cmd-header">
+          <div class="cmd-header-left">
+            <div class="cmd-logo">C</div>
+            <div>
+              <div class="cmd-title">CMD‑BERT</div>
+              <div class="cmd-subtitle">Cebuano Misinformation Detector</div>
+            </div>
+          </div>
+          <div class="cmd-header-right">
+            <span>About CMD‑BERT</span>
+            <div class="cmd-header-pill"></div>
+          </div>
+        </header>
+        """
+    )
 
-        with gr.Row(elem_classes=["two-col"], equal_height=True):
-            # Left: input card
-            with gr.Column(scale=3):
-                with gr.Group(elem_classes=["glass-card"]):
-                    gr.Markdown(
-                        "#### Text input\n"
-                        "Cebuano only. This tool checks linguistic patterns; it does not verify facts."
-                    )
-                    gr.Markdown(
-                        "> **Example**  \n"
-                        "> “Nakadisubre og milagro nga tambal sa COVID‑19 ang usa ka local doktor, "
-                        "giingon nga walay side effects ug dili kinahanglan og bakuna.”"
-                    )
-                    news_text = gr.Textbox(
-                        lines=7,
-                        label="",
-                        placeholder="Paste Cebuano news text here..."
-                    )
-                    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(
-                        "<span style='font-size:11px;opacity:0.8;'>"
-                        "Tip: Keep inputs under 1,000 characters for faster results."
-                        "</span>"
-                    )
+    # Hero section
+    gr.HTML(
+        """
+        <section style="margin-bottom:22px;">
+          <div class="hero-title">
+            Check Cebuano text for a misleading writing style.
+          </div>
+          <div class="hero-subtitle">
+            This tool analyzes linguistic patterns and writing style in Cebuano text to detect potential
+            misinformation. It does not verify factual correctness. The model returns a classification
+            (Fake/Legit) and a confidence score based on writing patterns.
+          </div>
+        </section>
+        """
+    )
 
-            # Right: result card
-            with gr.Column(scale=2):
-                with gr.Group(elem_classes=["glass-card"]):
-                    gr.Markdown("#### Result")
-                    result_label_html = gr.HTML(
-                        '<span class="badge-pill badge-fake">FAKE</span>'
-                    )
-                    conf_text = gr.HTML(
-                        '<div style="display:flex;align-items:flex-end;gap:6px;margin-top:10px;">'
-                        '<span style="font-size:28px;font-weight:600;" id="conf-val">0.00</span>'
-                        '<span style="font-size:12px;opacity:0.8;">confidence</span>'
-                        '</div>'
-                    )
-                    conf_bar = gr.HTML(
-                        '<div class="conf-bar-bg">'
-                        '<div class="conf-bar-fill" style="width:0%;"></div>'
-                        '</div>'
-                    )
-                    gr.Markdown(
-                        "<span style='font-size:11px;opacity:0.85;'>"
-                        "Model: CMD‑BERT (fine‑tuned BERT‑base). "
-                        "Output: Label and confidence score for the submitted text."
-                        "</span>"
-                    )
+    # Main two-column layout
+    with gr.Row(elem_classes=["two-col"], equal_height=True):
+        # Left: input card
+        with gr.Column(scale=3):
+            with gr.Group(elem_classes=["glass-card"]):
+                gr.Markdown(
+                    "#### Text input\n"
+                    "Cebuano only. This tool checks linguistic patterns; it does not verify facts."
+                )
+                gr.Markdown(
+                    "> **Example**  \n"
+                    "> “Nakadisubre og milagro nga tambal sa COVID‑19 ang usa ka local doktor, "
+                    "giingon nga walay side effects ug dili kinahanglan og bakuna.”"
+                )
+                news_text = gr.Textbox(
+                    lines=7,
+                    label="",
+                    placeholder="Paste Cebuano news text here..."
+                )
+                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(
+                    "<span style='font-size:11px;opacity:0.8;'>"
+                    "Tip: Keep inputs under 1,000 characters for faster results."
+                    "</span>"
+                )
 
-        def analyze_ui(text):
-            probs = classify(text)
-            fake_p = probs.get("fake", 0.0)
-            real_p = probs.get("real", 0.0)
-            if fake_p >= real_p:
-                label = "FAKE"
-                css_class = "badge-pill badge-fake"
-                conf = fake_p
-            else:
-                label = "LEGIT"
-                css_class = "badge-pill badge-real"
-                conf = real_p
-            conf_pct = int(conf * 100)
-            label_html = f'<span class="{css_class}">{label}</span>'
-            conf_html = (
-                '<div style="display:flex;align-items:flex-end;gap:6px;margin-top:10px;">'
-                f'<span style="font-size:28px;font-weight:600;" id="conf-val">{conf:.2f}</span>'
-                '<span style="font-size:12px;opacity:0.8;">confidence</span>'
-                '</div>'
-            )
-            bar_html = (
-                '<div class="conf-bar-bg">'
-                f'<div class="conf-bar-fill" style="width:{conf_pct}%;"></div>'
-                '</div>'
-            )
-            return label_html, conf_html, bar_html
+        # Right: result card
+        with gr.Column(scale=2):
+            with gr.Group(elem_classes=["glass-card"]):
+                gr.Markdown("#### Result")
+                result_label_html = gr.HTML(
+                    '<span class="badge-pill badge-fake">FAKE</span>'
+                )
+                conf_text = gr.HTML(
+                    '<div style="display:flex;align-items:flex-end;gap:6px;margin-top:10px;">'
+                    '<span style="font-size:28px;font-weight:600;" id="conf-val">0.00</span>'
+                    '<span style="font-size:12px;opacity:0.8;">confidence</span>'
+                    '</div>'
+                )
+                conf_bar = gr.HTML(
+                    '<div class="conf-bar-bg">'
+                    '<div class="conf-bar-fill" style="width:0%;"></div>'
+                    '</div>'
+                )
+                gr.Markdown(
+                    "<span style='font-size:11px;opacity:0.85;'>"
+                    "Model: CMD‑BERT (fine‑tuned BERT‑base). "
+                    "Output: Label and confidence score for the submitted text."
+                    "</span>"
+                )
 
-        analyze_btn.click(
-            fn=analyze_ui,
-            inputs=news_text,
-            outputs=[result_label_html, conf_text, conf_bar],
+    # Backend → UI glue
+    def analyze_ui(text):
+        probs = classify(text)
+        fake_p = probs.get("fake", 0.0)
+        real_p = probs.get("real", 0.0)
+        if fake_p >= real_p:
+            label = "FAKE"
+            css_class = "badge-pill badge-fake"
+            conf = fake_p
+        else:
+            label = "LEGIT"
+            css_class = "badge-pill badge-real"
+            conf = real_p
+        conf_pct = int(conf * 100)
+        label_html = f'<span class="{css_class}">{label}</span>'
+        conf_html = (
+            '<div style="display:flex;align-items:flex-end;gap:6px;margin-top:10px;">'
+            f'<span style="font-size:28px;font-weight:600;" id="conf-val">{conf:.2f}</span>'
+            '<span style="font-size:12px;opacity:0.8;">confidence</span>'
+            '</div>'
         )
-        clear_btn.click(fn=lambda: "", inputs=None, outputs=[news_text])
-
-    # --- How it works tab ---
-    with gr.Tab("How it works"):
-        with gr.Group(elem_classes=["glass-card"]):
-            gr.Markdown(
-                "## How CMD‑BERT works\n"
-                "CMD‑BERT is an AI‑augmented linguistic model that focuses on writing style, "
-                "not literal truth. It looks for patterns such as exaggerated wording, "
-                "over‑confident claims, and framing that often appear in misleading content."
-            )
-        with gr.Row():
-            with gr.Column():
-                with gr.Group(elem_classes=["glass-card"]):
-                    gr.Markdown(
-                        "### 1. Input and preprocessing\n"
-                        "- User pastes a Cebuano headline, post, or short article.\n"
-                        "- The text is tokenized and trimmed to a safe maximum length.\n"
-                        "- Inputs are processed in memory and not stored permanently."
-                    )
-            with gr.Column():
-                with gr.Group(elem_classes=["glass-card"]):
-                    gr.Markdown(
-                        "### 2. CMD‑BERT analysis\n"
-                        "- CMD‑BERT is a fine‑tuned BERT‑base model trained on Cebuano news.\n"
-                        "- It computes probabilities for two classes: **Fake** and **Legit**.\n"
-                        "- The highest‑probability class becomes the predicted label."
-                    )
-        with gr.Group(elem_classes=["glass-card"]):
-            gr.Markdown(
-                "### 3. Result and interpretation\n"
-                "- The interface shows the predicted label and confidence bar.\n"
-                "- Users are reminded that this is a screening tool only.\n"
-                "- Final judgment should always involve human critical thinking."
-            )
-
-    # --- About tab ---
-    with gr.Tab("About"):
-        with gr.Group(elem_classes=["glass-card"]):
-            gr.Markdown(
-                "## About CMD‑BERT\n"
-                "**CMD‑BERT: An AI Augmented Linguistic Recognition Model for Cebuano Fake News Detection**\n\n"
-                "CMD‑BERT is a thesis project in the Department of Computer Engineering at "
-                "Cebu Technological University–Main Campus. The tool aims to support Cebuano readers "
-                "by highlighting potentially misleading writing patterns in online news and posts."
-            )
-        with gr.Group(elem_classes=["glass-card"]):
-            gr.Markdown(
-                "### Thesis information\n"
-                "_A Thesis Project presented to the Faculty of the Department of Computer Engineering_\n\n"
-                "Cebu Technological University–Main Campus  \n"
-                "Cebu City, Philippines  \n\n"
-                "_In partial fulfillment of the requirements for the degree_  \n"
-                "**Bachelor of Science in Computer Engineering**\n\n"
-                "**By:**  \n"
-                "- Cabag, Ronilo Jose Jr. S.  \n"
-                "- Libron, Andio Mart  \n"
-                "- Omega, Noel  \n\n"
-                "**Adviser:** Engr. Jueco, M.Eng.  \n"
-                "January 2026"
-            )
-
-    # --- Feedback tab ---
-    with gr.Tab("Feedback"):
-        with gr.Group(elem_classes=["glass-card"]):
-            gr.Markdown(
-                "## Feedback and model improvement\n"
-                "CMD‑BERT is experimental and continuously improving. Your feedback can help "
-                "identify model mistakes, usability issues, and opportunities to refine the dataset."
-            )
-
-        with gr.Row():
-            with gr.Column():
-                with gr.Group(elem_classes=["glass-card"]):
-                    fb_type = gr.Dropdown(
-                        ["Bug / technical issue", "Model mistake", "UI suggestion", "Other"],
-                        label="Feedback type"
-                    )
-                    fb_text = gr.Textbox(
-                        lines=6,
-                        label="Your message or example text",
-                        placeholder="Describe the issue or paste an example of text the model misclassified."
-                    )
-                    fb_email = gr.Textbox(
-                        label="Email (optional, for follow‑up)",
-                        placeholder="you@example.com"
-                    )
-                    fb_checkbox = gr.Checkbox(
-                        label="Allow us to use this text anonymously for future model improvements.",
-                        value=True
-                    )
-                    fb_submit = gr.Button("Submit feedback", elem_classes=["btn-primary-custom"])
-
-            with gr.Column():
-                with gr.Group(elem_classes=["glass-card"]):
-                    fb_status = gr.Markdown("No feedback submitted yet.")
-                    gr.Markdown(
-                        "### FAQ\n"
-                        "**What happens to my feedback?**  \n"
-                        "It is stored securely and reviewed by the CMD‑BERT thesis team.\n\n"
-                        "**Will CMD‑BERT replace human fact‑checkers?**  \n"
-                        "No. It is a support tool to encourage critical reading.\n\n"
-                        "**Who maintains this tool?**  \n"
-                        "The CMD‑BERT thesis team at Cebu Technological University–Main Campus."
-                    )
-
-        def save_feedback(ftype, text, email, consent):
-            if not text.strip():
-                return "Please enter a message before submitting."
-            return "Thank you for your feedback! It has been recorded."
-
-        fb_submit.click(
-            fn=save_feedback,
-            inputs=[fb_type, fb_text, fb_email, fb_checkbox],
-            outputs=fb_status,
+        bar_html = (
+            '<div class="conf-bar-bg">'
+            f'<div class="conf-bar-fill" style="width:{conf_pct}%;"></div>'
+            '</div>'
         )
+        return label_html, conf_html, bar_html
+
+    analyze_btn.click(
+        fn=analyze_ui,
+        inputs=news_text,
+        outputs=[result_label_html, conf_text, conf_bar],
+    )
+    clear_btn.click(fn=lambda: "", inputs=None, outputs=[news_text])
 
 
 if __name__ == "__main__":