Update app.py

app.py

@@ -30,7 +30,7 @@ def classify(text: str):
 
 
 # --------------------------
-#  Shared CSS (glass design)
+#  Shared CSS
 # --------------------------
 custom_css = """
 body {
@@ -67,13 +67,6 @@ body {
     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;
@@ -146,13 +139,10 @@ textarea {
 """
 
 
-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"
-
+def navbar():
+    """Top bar shared by all tabs."""
     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>
@@ -161,11 +151,11 @@ def navbar(active: str):
               <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 style="display:flex;gap:24px;font-size:13px;opacity:0.85;">
+            <span>Analyzer</span>
+            <span>How it works</span>
+            <span>About</span>
+            <span>Feedback</span>
           </div>
         </div>
         """
@@ -173,14 +163,12 @@ def navbar(active: str):
 
 
 # --------------------------
-#  Build multipage app
+#  Single Blocks app with Tabs
 # --------------------------
 with gr.Blocks(fill_height=True) as demo:
+    navbar()
 
-    # ------------- Analyzer page -------------
-    with gr.Page(name="analyzer"):
-        navbar("Analyzer")
-
+    with gr.Tab("Analyzer"):
         gr.HTML(
             """
             <section style="margin-bottom:18px;">
@@ -243,7 +231,6 @@ with gr.Blocks(fill_height=True) as demo:
                         "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)
@@ -278,9 +265,8 @@ with gr.Blocks(fill_height=True) as demo:
         )
         clear_btn.click(fn=lambda: "", inputs=None, outputs=[news_text])
 
-    # ------------- How it works page -------------
-    with gr.Page(name="how-it-works"):
-        navbar("How")
+    # -------- How it works tab --------
+    with gr.Tab("How it works"):
         with gr.Group(elem_classes=["glass-card"]):
             gr.Markdown(
                 "## How CMD‑BERT works\n"
@@ -313,9 +299,8 @@ with gr.Blocks(fill_height=True) as demo:
                 "- Final judgment should always involve human critical thinking."
             )
 
-    # ------------- About page -------------
-    with gr.Page(name="about"):
-        navbar("About")
+    # -------- About tab --------
+    with gr.Tab("About"):
         with gr.Group(elem_classes=["glass-card"]):
             gr.Markdown(
                 "## About CMD‑BERT\n"
@@ -340,9 +325,8 @@ with gr.Blocks(fill_height=True) as demo:
                 "January 2026"
             )
 
-    # ------------- Feedback page -------------
-    with gr.Page(name="feedback"):
-        navbar("Feedback")
+    # -------- Feedback tab --------
+    with gr.Tab("Feedback"):
         with gr.Group(elem_classes=["glass-card"]):
             gr.Markdown(
                 "## Feedback and model improvement\n"
@@ -374,10 +358,7 @@ with gr.Blocks(fill_height=True) as demo:
 
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"]):
-                    fb_status = gr.Markdown(
-                        "No feedback submitted yet.",
-                        label=""
-                    )
+                    fb_status = gr.Markdown("No feedback submitted yet.")
                     gr.Markdown(
                         "### FAQ\n"
                         "**What happens to my feedback?**  \n"
@@ -391,7 +372,6 @@ with gr.Blocks(fill_height=True) as demo:
         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(
@@ -402,4 +382,4 @@ with gr.Blocks(fill_height=True) as demo:
 
 
 if __name__ == "__main__":
-    demo.launch(css=custom_css, theme=gr.themes.Soft())
+    demo.launch(css=custom_css, theme=gr.themes.Soft())