Update app.py

app.py

@@ -1,6 +1,8 @@
 import gradio as gr
 from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import torch
+from theme import custom_css, header, card_start, card_end
+
 
 # --------------------------
 #  Model setup
@@ -10,7 +12,8 @@ MODEL_ID = "roncc13/trainCMDBERT-sample"
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForSequenceClassification.from_pretrained(MODEL_ID)
 
-label_names = ["fake", "real"]  # adjust to match your label order
+# Adjust if your label order is different
+label_names = ["fake", "real"]
 
 
 def classify(text: str):
@@ -21,7 +24,7 @@ def classify(text: str):
         return_tensors="pt",
         truncation=True,
         padding=True,
-        max_length=256
+        max_length=256,
     )
     with torch.no_grad():
         outputs = model(**inputs)
@@ -29,210 +32,18 @@ def classify(text: str):
     return {label_names[i]: float(probs[i]) for i in range(len(label_names))}
 
 
-# --------------------------
-#  CSS
-# --------------------------
-custom_css = """
-body {
-    /* 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: 1200px !important;
-    margin: 0 auto !important;
-    padding: 32px 32px 40px 32px !important;
-    color: #f9fafb;
-}
-
-/* make default blocks transparent so our glass style shows */
-.gradio-container .block {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-/* optional: constrain generic rows a bit */
-.gradio-container .row {
-    max-width: 1120px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-/* Main cards */
-.glass-card {
-    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: 18px 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: 34px;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-    line-height: 1.2;
-    color: #e5e7eb;
-    margin-bottom: 8px;
-}
-.hero-subtitle {
-    font-size: 14px;
-    max-width: 640px;
-    opacity: 0.9;
-    color: #cbd5f5;
-}
-
-/* Buttons */
-.btn-primary-custom {
-    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 18px 40px rgba(22, 163, 74, 0.7);
-}
-.btn-secondary-custom {
-    background: transparent !important;
-    color: #e5e7eb !important;
-    border-radius: 999px !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: 14px;
-    width: 100%;
-    height: 8px;
-    border-radius: 999px;
-    background: rgba(148, 163, 184, 0.35);
-}
-.conf-bar-fill {
-    height: 100%;
-    border-radius: inherit;
-    background: linear-gradient(90deg, #f97316, #fb923c);
-}
-.badge-pill {
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 14px;
-    border-radius: 999px;
-    font-size: 11px;
-    font-weight: 600;
-}
-.badge-fake {
-    background: #f97316;
-    color: #111827;
-}
-.badge-real {
-    background: #22c55e;
-    color: #022c22;
-}
-
-/* Textbox styling */
-textarea {
-    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;
-    }
-}
-"""
-
-
-def header_html():
-    return gr.HTML(
-        """
-        <div style="max-width:1120px;margin:0 auto;">
-          <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>
-        </div>
-        """
-    )
-
-
 # --------------------------
 #  UI with Tabs
 # --------------------------
 with gr.Blocks(fill_height=True) as demo:
-    # small spacer so tabs are not glued to the top
+    # small spacer so tabs are not glued to the very top
     gr.HTML("<div style='height:8px;'></div>")
 
+    # ===== Analyzer tab =====
     with gr.Tab("Analyzer"):
-        header_html()
+        header()
+
+        # Hero section
         gr.HTML(
             """
             <section style="margin:0 auto 22px auto; max-width:1120px;">
@@ -248,11 +59,13 @@ with gr.Blocks(fill_height=True) as demo:
             """
         )
 
+        # Main two-column layout
         gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         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"]):
+                    card_start()
                     gr.Markdown(
                         "#### Text input\n"
                         "Cebuano only. This tool checks linguistic patterns; it does not verify facts."
@@ -265,43 +78,57 @@ with gr.Blocks(fill_height=True) as demo:
                     news_text = gr.Textbox(
                         lines=7,
                         label="",
-                        placeholder="Paste Cebuano news text here..."
+                        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"])
+                        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>"
+                        "</span>",
+                        container=False,
                     )
+                    card_end()
 
             # Right: result card
             with gr.Column(scale=2):
                 with gr.Group(elem_classes=["glass-card"]):
+                    card_start()
                     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>'
+                        """
+                        <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>'
+                        """
+                        <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>"
+                        "</span>",
+                        container=False,
                     )
+                    card_end()
         gr.HTML("</div>")
 
+        # backend → UI glue
         def analyze_ui(text):
             probs = classify(text)
             fake_p = probs.get("fake", 0.0)
@@ -317,15 +144,15 @@ with gr.Blocks(fill_height=True) as demo:
             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>'
+                "<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>'
+                "<div class='conf-bar-bg'>"
+                f"<div class='conf-bar-fill' style='width:{conf_pct}%;'></div>"
+                "</div>"
             )
             return label_html, conf_html, bar_html
 
@@ -336,48 +163,57 @@ with gr.Blocks(fill_height=True) as demo:
         )
         clear_btn.click(fn=lambda: "", inputs=None, outputs=[news_text])
 
-    # -------- How it works tab --------
+    # ===== How it works tab =====
     with gr.Tab("How it works"):
-        header_html()
+        header()
         gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Group(elem_classes=["glass-card"]):
+            card_start()
             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."
             )
+            card_end()
         with gr.Row():
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"]):
+                    card_start()
                     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."
                     )
+                    card_end()
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"]):
+                    card_start()
                     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."
                     )
+                    card_end()
         with gr.Group(elem_classes=["glass-card"]):
+            card_start()
             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."
             )
+            card_end()
         gr.HTML("</div>")
 
-    # -------- About tab --------
+    # ===== About tab =====
     with gr.Tab("About"):
-        header_html()
+        header()
         gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Group(elem_classes=["glass-card"]):
+            card_start()
             gr.Markdown(
                 "## About CMD‑BERT\n"
                 "**CMD‑BERT: An AI Augmented Linguistic Recognition Model for Cebuano Fake News Detection**\n\n"
@@ -385,7 +221,9 @@ with gr.Blocks(fill_height=True) as demo:
                 "Cebu Technological University–Main Campus. The tool aims to support Cebuano readers "
                 "by highlighting potentially misleading writing patterns in online news and posts."
             )
+            card_end()
         with gr.Group(elem_classes=["glass-card"]):
+            card_start()
             gr.Markdown(
                 "### Thesis information\n"
                 "_A Thesis Project presented to the Faculty of the Department of Computer Engineering_\n\n"
@@ -400,43 +238,53 @@ with gr.Blocks(fill_height=True) as demo:
                 "**Adviser:** Engr. Jueco, M.Eng.  \n"
                 "January 2026"
             )
+            card_end()
         gr.HTML("</div>")
 
-    # -------- Feedback tab --------
+    # ===== Feedback tab =====
     with gr.Tab("Feedback"):
-        header_html()
+        header()
         gr.HTML("<div style='max-width:1120px;margin:0 auto;'>")
         with gr.Group(elem_classes=["glass-card"]):
+            card_start()
             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."
             )
+            card_end()
 
         with gr.Row():
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"]):
+                    card_start()
                     fb_type = gr.Dropdown(
                         ["Bug / technical issue", "Model mistake", "UI suggestion", "Other"],
-                        label="Feedback type"
+                        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."
+                        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"
+                        placeholder="you@example.com",
                     )
                     fb_checkbox = gr.Checkbox(
-                        label="Allow us to use this text anonymously for future model improvements.",
-                        value=True
+                        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"])
-
+                    fb_submit = gr.Button(
+                        "Submit feedback", elem_classes=["btn-primary-custom"]
+                    )
+                    card_end()
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"]):
+                    card_start()
                     fb_status = gr.Markdown("No feedback submitted yet.")
                     gr.Markdown(
                         "### FAQ\n"
@@ -447,6 +295,7 @@ with gr.Blocks(fill_height=True) as demo:
                         "**Who maintains this tool?**  \n"
                         "The CMD‑BERT thesis team at Cebu Technological University–Main Campus."
                     )
+                    card_end()
 
         def save_feedback(ftype, text, email, consent):
             if not text.strip():