Update app.py

app.py

@@ -2,15 +2,20 @@ import gradio as gr
 from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import torch
 
+# --------------------------
+#  Model setup
+# --------------------------
 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 to match your label order
 
-def classify(text):
+
+def classify(text: str):
+    if not text.strip():
+        return {"fake": 0.0, "real": 0.0}
     inputs = tokenizer(
         text,
         return_tensors="pt",
@@ -23,13 +28,378 @@ def classify(text):
         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."
-)
+
+# --------------------------
+#  Shared CSS (glass design)
+# --------------------------
+custom_css = """
+body {
+    background: radial-gradient(circle at top left, #2b2c4a 0, #121320 45%, #080910 100%);
+}
+.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;
+}
+.glass-card {
+    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
+    border-radius: 18px;
+    border: 1px solid rgba(255,255,255,0.16);
+    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
+    padding: 18px 20px;
+    backdrop-filter: blur(14px);
+}
+.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;
+}
+.nav-link {
+    font-size: 13px;
+    opacity: 0.85;
+}
+.nav-link-active {
+    font-weight: 600;
+}
+.btn-primary-custom {
+    background: linear-gradient(135deg, #21c38f, #1ab07f) !important;
+    color: #041110 !important;
+    border-radius: 999px !important;
+    border: none !important;
+    padding: 8px 22px !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: 8px 18px !important;
+    font-size: 11px !important;
+}
+.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.85;
+}
+.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);
+}
+.badge-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 14px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+}
+.badge-fake {
+    background: #ff9c8b;
+    color: #3b1b19;
+}
+.badge-real {
+    background: #7fe6c2;
+    color: #07352a;
+}
+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;
+}
+@media (max-width: 900px) {
+    .two-col {
+        flex-direction: column !important;
+    }
+}
+"""
+
+
+def navbar(active: str):
+    """Small helper to render the top nav HTML with active link highlighted."""
+    def cls(name):
+        return "nav-link nav-link-active" if name == active else "nav-link"
+
+    return gr.HTML(
+        f"""
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;">
+          <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>
+          <div style="display:flex;gap:24px;">
+            <a class="{cls('Analyzer')}" href="#/analyzer">Analyzer</a>
+            <a class="{cls('How')}" href="#/how-it-works">How it works</a>
+            <a class="{cls('About')}" href="#/about">About</a>
+            <a class="{cls('Feedback')}" href="#/feedback">Feedback</a>
+          </div>
+        </div>
+        """
+    )
+
+
+# --------------------------
+#  Build multipage app
+# --------------------------
+with gr.Blocks(fill_height=True) as demo:
+
+    # ------------- Analyzer page -------------
+    with gr.Page(name="analyzer"):
+        navbar("Analyzer")
+
+        gr.HTML(
+            """
+            <section style="margin-bottom:18px;">
+              <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.
+              </div>
+            </section>
+            """
+        )
+
+        with gr.Row(elem_classes=["two-col"]):
+            # 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(
+                        "Tip: Keep inputs under 1,000 characters for faster results."
+                    )
+
+            # 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:8px;">'
+                        '<span style="font-size:26px;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(
+                        "Model: CMD‑BERT (fine‑tuned BERT‑base).  \n"
+                        "Output: Label and confidence score for the submitted text."
+                    )
+
+        # 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:8px;">'
+                f'<span style="font-size:26px;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
+
+        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])
+
+    # ------------- How it works page -------------
+    with gr.Page(name="how-it-works"):
+        navbar("How")
+        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 page -------------
+    with gr.Page(name="about"):
+        navbar("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 page -------------
+    with gr.Page(name="feedback"):
+        navbar("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.",
+                        label=""
+                    )
+                    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."
+            # For now just acknowledge; you can extend this to write to a file or database.
+            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,
+        )
+
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=custom_css, theme=gr.themes.Soft())