Update app.py

app.py

@@ -3,14 +3,17 @@ from transformers import AutoTokenizer, AutoModelForSequenceClassification
 import torch
 from theme import custom_css, header
 
+
 # --------------------------
 #  Model setup
 # --------------------------
 MODEL_ID = "roncc13/autotrain-ixzm9-t6dbc"
 
+
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForSequenceClassification.from_pretrained(MODEL_ID)
 
+
 label_names = ["fake", "real"]
 
 
@@ -30,11 +33,41 @@ def classify(text: str):
     return {label_names[i]: float(probs[i]) for i in range(len(label_names))}
 
 
+# --------------------------
+#  Helpers for rendering result HTML
+# --------------------------
+def _result_label_html(label: str, css_class: str) -> str:
+    return f'<span class="{css_class}">{label}</span>'
+
+
+def _confidence_text_html(conf_pct: int) -> str:
+    return (
+        "<div class='conf-text-row'>"
+        f"<span class='conf-val'>{conf_pct}%</span>"
+        "<span class='conf-caption'>confidence</span>"
+        "</div>"
+    )
+
+
+def _confidence_bar_html(conf_pct: int) -> str:
+    return (
+        "<div class='conf-bar-bg'>"
+        f"<div class='conf-bar-fill' style='width:{conf_pct}%;'></div>"
+        "</div>"
+    )
+
+
+# Initial (empty) state values for the result card
+INITIAL_LABEL_HTML = _result_label_html("—", "badge-pill badge-neutral")
+INITIAL_CONF_HTML = _confidence_text_html(0)
+INITIAL_BAR_HTML = _confidence_bar_html(0)
+
+
 # --------------------------
 #  UI with Tabs
 # --------------------------
 with gr.Blocks(fill_height=True) as demo:
-    gr.HTML("<div style='height:8px;'></div>")
+    gr.HTML("<div style='height:12px;'></div>")
 
     # ===== Analyzer tab =====
     with gr.Tab("Analyzer"):
@@ -42,7 +75,7 @@ with gr.Blocks(fill_height=True) as demo:
 
         gr.HTML(
             """
-            <section style="margin:0 auto 22px auto; max-width:1120px;">
+            <section class="hero-section">
               <div class="hero-title">
                 Check Cebuano text for a misleading writing style.
               </div>
@@ -74,11 +107,11 @@ with gr.Blocks(fill_height=True) as demo:
                         placeholder="Paste Cebuano news text here...",
                         elem_id="news-textbox",
                     )
-                    with gr.Row():
+                    with gr.Row(elem_classes=["btn-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;'>"
+                        "<span class='helper-text'>"
                         "Tip: Keep inputs under 1,000 characters for faster results."
                         "</span>",
                         container=False,
@@ -88,26 +121,11 @@ with gr.Blocks(fill_height=True) as demo:
             with gr.Column(scale=2):
                 with gr.Group(elem_classes=["glass-card"], elem_id="result-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>
-                        """
-                    )
+                    result_label_html = gr.HTML(INITIAL_LABEL_HTML)
+                    conf_text = gr.HTML(INITIAL_CONF_HTML)
+                    conf_bar = gr.HTML(INITIAL_BAR_HTML)
                     gr.Markdown(
-                        "<span style='font-size:11px;opacity:0.85;'>"
+                        "<span class='helper-text'>"
                         "Model: CMD\u2011BERT (fine\u2011tuned BERT\u2011base). "
                         "Output: Label and confidence score for the submitted text."
                         "</span>",
@@ -115,6 +133,9 @@ with gr.Blocks(fill_height=True) as demo:
                     )
 
         def analyze_ui(text):
+            if not text or not text.strip():
+                return INITIAL_LABEL_HTML, INITIAL_CONF_HTML, INITIAL_BAR_HTML
+
             probs = classify(text)
             fake_p = probs.get("fake", 0.0)
             real_p = probs.get("real", 0.0)
@@ -122,23 +143,29 @@ with gr.Blocks(fill_height=True) as demo:
                 label, css_class, conf = "FAKE", "badge-pill badge-fake", fake_p
             else:
                 label, css_class, conf = "LEGIT", "badge-pill badge-real", 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>"
+
+            # Clamp and convert to integer percentage 0–100
+            conf_pct = max(0, min(100, int(round(conf * 100))))
+
+            return (
+                _result_label_html(label, css_class),
+                _confidence_text_html(conf_pct),
+                _confidence_bar_html(conf_pct),
             )
-            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])
+        def clear_ui():
+            return "", INITIAL_LABEL_HTML, INITIAL_CONF_HTML, INITIAL_BAR_HTML
+
+        analyze_btn.click(
+            fn=analyze_ui,
+            inputs=news_text,
+            outputs=[result_label_html, conf_text, conf_bar],
+        )
+        clear_btn.click(
+            fn=clear_ui,
+            inputs=None,
+            outputs=[news_text, result_label_html, conf_text, conf_bar],
+        )
 
     # ===== How it works tab =====
     with gr.Tab("How it works"):
@@ -150,7 +177,7 @@ with gr.Blocks(fill_height=True) as demo:
                 "not literal truth. It looks for patterns such as exaggerated wording, "
                 "over\u2011confident claims, and framing that often appear in misleading content."
             )
-        with gr.Row():
+        with gr.Row(elem_classes=["card-row"]):
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"], elem_id="hiw-step1-card"):
                     gr.Markdown(
@@ -211,7 +238,7 @@ with gr.Blocks(fill_height=True) as demo:
                 "CMD\u2011BERT 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.Row(elem_classes=["card-row"]):
             with gr.Column():
                 with gr.Group(elem_classes=["glass-card"], elem_id="fb-form-card"):
                     fb_type = gr.Dropdown(
@@ -258,5 +285,6 @@ with gr.Blocks(fill_height=True) as demo:
             outputs=fb_status,
         )
 
+
 if __name__ == "__main__":
     demo.launch(css=custom_css, theme=gr.themes.Soft())