Update app.py

app.py

@@ -30,7 +30,7 @@ def classify(text: str):
 
 
 # --------------------------
-#  CSS matching the mockup
+#  CSS
 # --------------------------
 custom_css = """
 body {
@@ -42,10 +42,17 @@ body {
                  "Segoe UI", sans-serif;
     max-width: 1120px !important;
     margin: 0 auto !important;
-    padding: 32px 24px 40px 24px !important;
+    padding: 24px 24px 40px 24px !important;
     color: #f9fafb;
 }
 
+/* Remove default white cards so our glass style shows */
+.gradio-container .block {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
 /* Main cards */
 .glass-card {
     background: rgba(15, 23, 42, 0.96); /* near indigo-950 */
@@ -188,12 +195,8 @@ textarea {
 """
 
 
-# --------------------------
-#  UI
-# --------------------------
-with gr.Blocks(fill_height=True) as demo:
-    # Header bar
-    gr.HTML(
+def header_html():
+    return gr.HTML(
         """
         <header class="cmd-header">
           <div class="cmd-header-left">
@@ -211,109 +214,234 @@ with gr.Blocks(fill_height=True) as demo:
         """
     )
 
-    # 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>
-        """
-    )
 
-    # 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>"
-                )
-
-        # 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>"
-                )
-
-    # 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>'
+# --------------------------
+#  UI with Tabs
+# --------------------------
+with gr.Blocks(fill_height=True) as demo:
+    # small spacer so tabs are not glued to the top
+    gr.HTML("<div style='height:8px;'></div>")
+
+    with gr.Tab("Analyzer"):
+        header_html()
+        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>
+            """
         )
-        bar_html = (
-            '<div class="conf-bar-bg">'
-            f'<div class="conf-bar-fill" style="width:{conf_pct}%;"></div>'
-            '</div>'
+
+        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>"
+                    )
+
+            # 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>"
+                    )
+
+        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
+
+        analyze_btn.click(
+            fn=analyze_ui,
+            inputs=news_text,
+            outputs=[result_label_html, conf_text, conf_bar],
         )
-        return label_html, conf_html, bar_html
+        clear_btn.click(fn=lambda: "", inputs=None, outputs=[news_text])
 
-    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 tab --------
+    with gr.Tab("How it works"):
+        header_html()
+        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"):
+        header_html()
+        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"):
+        header_html()
+        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,
+        )
 
 
 if __name__ == "__main__":