Update app.py

app.py

@@ -7,12 +7,10 @@ MODEL_ID = "roncc13/trainCMDBERT-sample"
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
 model = AutoModelForSequenceClassification.from_pretrained(MODEL_ID)
 
-label_names = ["fake", "real"]  # adjust if your order is different
+# Adjust these to match your label order
+label_names = ["fake", "real"]
 
 def classify(text):
-    if not text.strip():
-        return "—", 0.0, "", [], "Please enter some text."
-
     inputs = tokenizer(
         text,
         return_tensors="pt",
@@ -23,442 +21,15 @@ def classify(text):
     with torch.no_grad():
         outputs = model(**inputs)
         probs = torch.softmax(outputs.logits, dim=-1)[0].tolist()
+    return {label_names[i]: float(probs[i]) for i in range(len(label_names))}
 
-    best_idx = int(torch.argmax(torch.tensor(probs)))
-    best_label = label_names[best_idx].upper()
-    best_score = float(probs[best_idx])
-
-    # For now, mock some highlighted phrases & tags.
-    # Later you can replace this with real explanation logic.
-    phrases = ["walay side effects", "dili kinahanglan og bakuna"]
-    tags = ["Sensational claim", "Absolute wording", "Authority framing"]
-
-    explanation = (
-        "Highlighted phrases are examples of strong cues the model may rely on "
-        "when estimating whether the text is misleading."
-    )
-
-    return best_label, best_score, text, phrases, explanation, tags
-
-custom_css = """
-body {
-    background: radial-gradient(circle at top left, #2b2c4a 0, #121320 45%, #080910 100%);
-}
-
-/* overall container */
-.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;
-}
-
-/* hide default borders */
-.gradio-container .block {
-    border: none;
-    box-shadow: none;
-}
-
-/* top nav bar */
-#top-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 18px;
-}
-
-#top-nav-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.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;
-}
-
-#top-nav-right {
-    display: flex;
-    gap: 24px;
-    font-size: 13px;
-    opacity: 0.8;
-}
-
-/* big hero text */
-#hero {
-    margin: 16px 0 18px 0;
-}
-
-.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.8;
-}
-
-/* 2-column main layout */
-#main-row {
-    display: grid;
-    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.3fr);
-    gap: 20px;
-}
-
-/* glass panels */
-.glass-card {
-    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
-    border-radius: 18px;
-    border: 1px solid rgba(255,255,255,0.12);
-    box-shadow: 0 18px 45px rgba(0,0,0,0.6);
-    padding: 18px 20px;
-    backdrop-filter: blur(14px);
-}
-
-/* left column inner layout */
-#left-column {
-    display: grid;
-    grid-template-rows: auto auto;
-    gap: 14px;
-}
-
-/* text input card */
-.card-title {
-    font-size: 15px;
-    font-weight: 600;
-    margin-bottom: 6px;
-}
-
-.card-subtitle {
-    font-size: 11px;
-    opacity: 0.75;
-    margin-bottom: 8px;
-}
-
-#example-box {
-    background: #050515;
-    border-radius: 10px;
-    padding: 10px 12px;
-    font-size: 11px;
-    line-height: 1.4;
-    color: rgba(245,246,255,0.86);
-    margin-bottom: 10px;
-}
-
-/* gradio textbox */
-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;
-}
-
-/* buttons row */
-#input-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 10px;
-    font-size: 11px;
-}
-
-.btn-primary-custom {
-    background: linear-gradient(135deg, #21c38f, #1ab07f) !important;
-    color: #041110 !important;
-    border-radius: 999px !important;
-    border: none !important;
-    padding: 6px 20px !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: 6px 18px !important;
-    font-size: 11px !important;
-}
+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."
+)
 
-/* result + why flagged stack */
-#right-column {
-    display: grid;
-    grid-template-rows: auto auto;
-    gap: 14px;
-}
-
-/* Result panel */
-.result-label {
-    display: inline-flex;
-    align-items: center;
-    padding: 4px 14px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-    background: #ff9c8b;
-    color: #3b1b19;
-    margin-bottom: 4px;
-}
-
-.result-meta {
-    font-size: 11px;
-    opacity: 0.75;
-}
-
-.result-confidence {
-    font-size: 26px;
-    font-weight: 600;
-}
-
-/* bar */
-.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);
-}
-
-/* Why flagged */
-.badge-phrase {
-    background: #050515;
-    padding: 6px 10px;
-    border-radius: 10px;
-    font-size: 11px;
-    margin: 4px 6px 4px 0;
-    display: inline-block;
-}
-
-.badge-tag {
-    display: inline-block;
-    padding: 4px 10px;
-    border-radius: 999px;
-    font-size: 11px;
-    margin-right: 6px;
-    margin-top: 6px;
-    background: rgba(255,255,255,0.08);
-}
-
-/* Mobile tweaks */
-@media (max-width: 900px) {
-    #main-row {
-        grid-template-columns: minmax(0, 1fr);
-    }
-}
-"""
-
-with gr.Blocks(fill_height=True) as demo:
-    # Top bar
-    with gr.Row(elem_id="top-nav"):
-        with gr.Column(scale=3, elem_id="top-nav-left"):
-            gr.HTML(
-                """
-                <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>
-                """
-            )
-        with gr.Column(scale=2, elem_id="top-nav-right"):
-            gr.HTML(
-                """
-                <div id="top-nav-right">
-                    <span>Analyzer</span>
-                    <span>How it works</span>
-                    <span>About</span>
-                    <span>Feedback</span>
-                </div>
-                """
-            )
-
-    # Hero
-    gr.HTML(
-        """
-        <section id="hero">
-          <div class="hero-title">
-            Check Cebuano text for<br>a misleading writing style.
-          </div>
-          <div class="hero-subtitle">
-            Paste a headline, post, or short article. CMD‑BERT returns a label
-            (Fake or Legit), confidence score, and key text cues to support the result.
-          </div>
-        </section>
-        """
-    )
-
-    # Main content
-    with gr.Row(elem_id="main-row"):
-        # Left: text input
-        with gr.Column(elem_id="left-column"):
-            with gr.Group(elem_classes=["glass-card"]):
-                gr.HTML(
-                    """
-                    <div class="card-title">Text input</div>
-                    <div class="card-subtitle">
-                      Cebuano only. This tool checks linguistic patterns; it does not verify facts.
-                    </div>
-                    <div id="example-box">
-                      <b>Example:</b><br>
-                      “Nakadisubre og milagro nga tambal sa COVID‑19 ang usa ka local doktor,
-                      giingon nga walay side effects ug dili kinahanglan og bakuna.”
-                    </div>
-                    """
-                )
-                input_text = gr.Textbox(
-                    lines=6,
-                    label="",
-                    placeholder="Paste Cebuano news here..."
-                )
-                with gr.Row(elem_id="input-buttons"):
-                    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 + explanation
-        with gr.Column(elem_id="right-column"):
-            # Result card
-            with gr.Group(elem_classes=["glass-card"]):
-                gr.HTML('<div class="card-title">Result</div>')
-                result_label = gr.HTML("<div class='result-label'>FAKE</div>")
-                result_conf_html = gr.HTML(
-                    """
-                    <div style="display:flex;align-items:flex-end;gap:6px;margin-top:2px;">
-                        <span class="result-confidence" id="conf-val">0.87</span>
-                        <span style="font-size:11px;opacity:0.8;">confidence</span>
-                    </div>
-                    """
-                )
-                bar_bg = gr.HTML(
-                    """
-                    <div class="conf-bar-bg">
-                        <div id="conf-bar-fill" class="conf-bar-fill" style="width:87%;"></div>
-                    </div>
-                    """
-                )
-                result_meta = gr.Markdown(
-                    "Model: CMD‑BERT (fine‑tuned BERT‑base).\n\n"
-                    "Output: Label + confidence score for this text."
-                )
-
-            # Why flagged card
-            with gr.Group(elem_classes=["glass-card"]):
-                gr.HTML('<div class="card-title">Why this was flagged</div>')
-                gr.Markdown(
-                    "Highlighted phrases are shown as the strongest signals used by the model."
-                )
-                highlighted_text = gr.HTML(
-                    "<div class='badge-phrase'>walay side effects</div>"
-                )
-                tags_md = gr.HTML(
-                    """
-                    <div>
-                        <span class="badge-tag">Sensational claim</span>
-                        <span class="badge-tag">Absolute wording</span>
-                        <span class="badge-tag">Authority framing</span>
-                    </div>
-                    """
-                )
-                explanation_md = gr.Markdown(
-                    "Use this as a screening tool. Always verify with trusted sources."
-                )
-
-    # Wiring function to UI (update label, confidence, bars, explanations)
-    def update_ui(text):
-        label, score, _, phrases, explanation, tags = classify(text)
-        score_pct = int(score * 100)
-
-        # Result label (FAKE / REAL)
-        label_html = f"<div class='result-label'>{label}</div>"
-
-        # Confidence text
-        conf_html = (
-            '<div style="display:flex;align-items:flex-end;gap:6px;margin-top:2px;">'
-            f'<span class="result-confidence">{score:.2f}</span>'
-            '<span style="font-size:11px;opacity:0.8;"> confidence</span>'
-            "</div>"
-        )
-
-        # Confidence bar
-        bar_html = (
-            '<div class="conf-bar-bg">'
-            f'<div id="conf-bar-fill" class="conf-bar-fill" style="width:{score_pct}%;"></div>'
-            "</div>"
-        )
-
-        # Highlighted phrases
-        phrase_html = "".join(
-            [f"<span class='badge-phrase'>{p}</span>" for p in phrases]
-        )
-
-        # Tags
-        tags_html = "".join(
-            [f"<span class='badge-tag'>{t}</span>" for t in tags]
-        )
-
-        return (
-            label_html,
-            conf_html,
-            bar_html,
-            phrase_html,
-            explanation,
-            tags_html,
-        )
-
-    analyze_btn.click(
-        fn=update_ui,
-        inputs=input_text,
-        outputs=[
-            result_label,
-            result_conf_html,
-            bar_bg,
-            highlighted_text,
-            explanation_md,
-            tags_md,
-        ],
-    )
-
-    clear_btn.click(
-        fn=lambda: "",
-        inputs=None,
-        outputs=input_text,
-    )
-    
 if __name__ == "__main__":
-    demo.launch(
-        css=custom_css,
-        theme=gr.themes.Soft()
-    )
-
+    demo.launch()