comarison and word unverified remove

app.py

@@ -16,7 +16,8 @@ PROJECT_ROOT = os.path.dirname(__file__)
 if PROJECT_ROOT not in sys.path:
     sys.path.insert(0, PROJECT_ROOT)
 from gnn.gnn_predict import predict_spread
-print("✅ VERIMED GNN MODULE LOADED SUCCESSFULLY — v2")
+from gnn.visualization_graph import generate_visualization_graph
+from comparison import compute_method_comparison
 
 app = Flask(__name__)
 app.secret_key = os.environ.get("FLASK_SECRET_KEY", "dev-only-change-me")
@@ -205,6 +206,17 @@ def api_verify():
     if language != "en":
         explanation_for_display = translate_utils.translate_from_english(explanation_for_display, language)
 
+    # Compute the GNN spread-risk prediction and the 3-method comparison.
+    # This reuses the verdict/confidence/entities already computed above --
+    # no second LLM call, just fast local scoring.
+    spread_result = predict_spread(
+        claim_text=claim_text,
+        verdict=result.get("verdict", "Unverified"),
+        confidence=result.get("confidence", 0),
+        entities=result.get("entities", []),
+    )
+    method_comparison = compute_method_comparison(claim_text, result, spread_result)
+
     response = {
         "verdict": result.get("verdict"),
         "confidence": result.get("confidence"),
@@ -213,11 +225,50 @@ def api_verify():
         "sources": result.get("sources", []),
         "language_processed": language,
         "ocr_used": ocr_used,
-        "claim_text_used": original_claim_text if (ocr_used or language != "en") else None,
+        "raw_text_detected": original_claim_text,
+        "claim_text_used": claim_text,
+        "spread_prediction": spread_result,
+        "method_comparison": method_comparison,
     }
     return jsonify(response)
 
 
+@app.route('/api/tts', methods=['POST'])
+def api_tts():
+    """
+    Server-side text-to-speech fallback using gTTS.
+
+    The browser's built-in speech synthesis depends on voices installed on
+    the user's device -- many devices don't have Hindi/Marathi voices
+    installed, which silently falls back to English. This endpoint
+    generates real audio in the requested language regardless of what's
+    installed locally.
+    """
+    from gtts import gTTS
+    import io
+
+    data = request.get_json(force=True) or {}
+    text = data.get('text', '').strip()
+    lang = data.get('lang', 'en')
+
+    if not text:
+        return jsonify({"error": "No text provided."}), 400
+
+    # gTTS language codes -- Marathi isn't supported by gTTS, so we fall
+    # back to Hindi audio for Marathi text (closer than English, and this
+    # is only reached when no local Marathi voice exists anyway).
+    gtts_lang = {"en": "en", "hi": "hi", "mr": "hi"}.get(lang, "en")
+
+    try:
+        tts = gTTS(text=text, lang=gtts_lang)
+        buf = io.BytesIO()
+        tts.write_to_fp(buf)
+        buf.seek(0)
+        return Response(buf.read(), mimetype='audio/mpeg')
+    except Exception as e:
+        return jsonify({"error": f"TTS generation failed: {e}"}), 500
+
+
 @app.route('/api/history', methods=['GET'])
 def api_history():
     limit = request.args.get('limit', default=20, type=int)
@@ -256,6 +307,22 @@ def api_predict_spread():
         confidence=verification.get("confidence", 0),
         entities=verification.get("entities", []),
     )
+
+    # Node-by-node visualization -- a smaller, legible graph with the SAME
+    # epidemic simulation logic used to train the model, run live on this
+    # claim's actual risk profile. Wrapped defensively so a visualization
+    # bug never breaks the numeric prediction above.
+    try:
+        graph_data["visualization"] = generate_visualization_graph(
+            claim_text=claim,
+            verdict=verification.get("verdict", "Unverified"),
+            confidence=verification.get("confidence", 0),
+            entities=verification.get("entities", []),
+        )
+    except Exception as e:
+        print(f"[api_predict_spread] Visualization graph failed: {e}")
+        graph_data["visualization"] = None
+
     return jsonify(graph_data)
 
 
@@ -377,4 +444,4 @@ def api_passport_pdf():
 
 
 if __name__ == '__main__':
-    app.run(debug=True, port=5000, use_reloader=False)
+    app.run(debug=True, port=5000, use_reloader=False)

comparison.py

@@ -0,0 +1,120 @@
+"""
+Method comparison module.
+
+Computes a fair, honest side-by-side comparison of three detection layers
+used in this project, all scored on the same 0-100 "misinformation danger"
+scale so they can be charted together:
+
+  1. BERT (NER) only    -- a naive baseline using ONLY entity/keyword
+                            patterns extracted by the BERT-based NER model.
+                            No evidence, no reasoning.
+  2. RAG + LLM           -- the real verdict pipeline: evidence retrieved
+                            from WHO/CDC/NIH, reasoned over by an LLM.
+                            Accurate on truth, but static -- it doesn't say
+                            how urgent or dangerous a false claim is.
+  3. GNN-Enhanced        -- takes the RAG verdict and adds the trained
+                            Graph Attention Network's spread-risk
+                            prediction on top. This is the only method
+                            that answers "how much should I worry about
+                            this, right now" -- not just true/false.
+
+IMPORTANT: this does NOT run three independent LLM calls. Methods 2 and 3
+reuse the verify_claim() result and predict_spread() result that the
+/api/verify endpoint already computed -- so this comparison is free (no
+extra API calls, no extra latency) beyond a couple of arithmetic formulas.
+"""
+
+import sys
+import os
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), "gnn"))
+from claim_features import VERDICT_RISK, sensational_score
+
+
+def _risk_label(score: int) -> str:
+    if score >= 60:
+        return "High Risk"
+    if score >= 30:
+        return "Medium Risk"
+    return "Low Risk"
+
+
+def compute_method_comparison(claim_text: str, verify_result: dict, spread_result: dict) -> dict:
+    """
+    claim_text: the original claim text
+    verify_result: the dict returned by verify_claim() (verdict, confidence, entities, ...)
+    spread_result: the dict returned by predict_spread() (virality_score, risk_level, ...)
+    """
+    entities = verify_result.get("entities", []) or []
+    verdict = verify_result.get("verdict", "Unverified")
+    confidence = verify_result.get("confidence", 0) or 0
+
+    # ---- Method 1: BERT (NER) only -- naive baseline ----
+    entity_density = min(len(entities) / 5, 1.0)
+    sensational = sensational_score(claim_text)
+    risk_bert = round(100 * min(1.0, 0.5 * sensational + 0.5 * entity_density))
+
+    # ---- Method 2: RAG + LLM -- evidence-grounded verdict ----
+    verdict_risk = VERDICT_RISK.get(verdict, 0.3)
+    risk_rag = round(verdict_risk * confidence)
+
+    # ---- Method 3: GNN-Enhanced -- RAG verdict + spread-risk modeling ----
+    virality_score = spread_result.get("virality_score", 0) or 0
+    risk_gnn = round(0.4 * risk_rag + 0.6 * virality_score)
+
+    methods = [
+        {
+            "key": "bert",
+            "name": "BERT (NER) Only",
+            "score": risk_bert,
+            "label": _risk_label(risk_bert),
+            "description": "Uses only medical entities and sensational-language patterns extracted by the BERT-based NER model. No evidence, no source-checking -- a naive baseline.",
+            "is_winner": False,
+        },
+        {
+            "key": "rag",
+            "name": "RAG + LLM",
+            "score": risk_rag,
+            "label": verdict,
+            "description": "Grounds the claim in real evidence retrieved from WHO/CDC/NIH, then an LLM reasons over that evidence. Accurate on truth, but doesn't assess urgency or real-world danger.",
+            "is_winner": False,
+        },
+        {
+            "key": "gnn",
+            "name": "GNN-Enhanced (Full Pipeline)",
+            "score": risk_gnn,
+            "label": spread_result.get("risk_level", _risk_label(risk_gnn)),
+            "description": "Builds on the RAG-grounded verdict and adds a trained Graph Attention Network's spread-risk prediction. The only method that answers not just 'is this false' but 'how urgently does this need attention'.",
+            "is_winner": True,
+        },
+    ]
+
+    conclusion = (
+        f"NER-only pattern matching rates this claim {risk_bert}/100 using surface signals alone, with no "
+        f"evidence behind it. The evidence-grounded RAG+LLM verdict is more trustworthy on truth "
+        f"(\"{verdict}\", {confidence}% confidence) but stops there. The GNN-enhanced score of {risk_gnn}/100 "
+        f"is the most complete: it keeps that evidence-grounded verdict and adds real spread-risk modeling on top, "
+        f"so it's the only method that tells you both whether this is false AND how much it deserves urgent attention."
+    )
+
+    return {
+        "methods": methods,
+        "conclusion": conclusion,
+        "winner": "gnn",
+    }
+
+
+if __name__ == "__main__":
+    # Quick manual test -- run: python comparison.py
+    fake_verify_result = {
+        "verdict": "False", "confidence": 92,
+        "entities": [{"text": "garlic"}, {"text": "COVID-19"}],
+    }
+    fake_spread_result = {"virality_score": 95, "risk_level": "High Risk"}
+
+    result = compute_method_comparison(
+        "Garlic cures COVID-19 instantly, doctors hate this secret!",
+        fake_verify_result, fake_spread_result,
+    )
+    for m in result["methods"]:
+        print(f"{m['name']}: {m['score']}/100 ({m['label']}) {'<-- WINNER' if m['is_winner'] else ''}")
+    print(f"\nConclusion: {result['conclusion']}")

gnn/simulate_spread.py

@@ -25,12 +25,17 @@ def simulate_epidemic_spread(
     seed_node: int,
     max_steps: int = 20,
     rng: random.Random | None = None,
-) -> tuple[int, int, list[int]]:
+    return_set: bool = False,
+):
     """
     Simulates how a claim spreads through the network starting from seed_node.
 
     claim_risk_score: 0-1, higher = spreads more aggressively (false/sensational claims)
-    Returns: (total_nodes_reached, step_of_peak_growth, step_by_step_infected_counts)
+    return_set: if True, returns the actual set of infected node IDs as a 4th
+                value (used by the visualization graph to color nodes) --
+                default False keeps this backward-compatible with existing
+                callers like train_gnn.py.
+    Returns: (total_nodes_reached, step_of_peak_growth, step_by_step_infected_counts[, infected_set])
     """
     rng = rng or random.Random()
 
@@ -57,6 +62,8 @@ def simulate_epidemic_spread(
     total_reached = len(infected)
     peak_step = (history.index(max(history)) + 1) if history else 1
 
+    if return_set:
+        return total_reached, peak_step, history, infected
     return total_reached, peak_step, history
 
 
@@ -69,4 +76,4 @@ if __name__ == "__main__":
 
     for risk_label, risk_score in [("Low-risk (true claim)", 0.05), ("High-risk (false+sensational)", 0.95)]:
         total, peak_step, history = simulate_epidemic_spread(G, risk_score, seed_node, rng=random.Random(7))
-        print(f"{risk_label}: reached {total}/{G.number_of_nodes()} nodes, peaked at step {peak_step}")
+        print(f"{risk_label}: reached {total}/{G.number_of_nodes()} nodes, peaked at step {peak_step}")

gnn/visualization_graph.py

@@ -0,0 +1,117 @@
+"""
+Visualization graph generator.
+
+The 150-node graph used for the GNN's actual inference (in gnn_predict.py)
+is too dense to render legibly in a browser widget. This module builds a
+SMALLER graph (default 32 nodes) purely for visualization, runs the SAME
+epidemic simulation logic used to train the GNN on it, and outputs 2D layout
+coordinates -- so the frontend can draw real nodes and edges, colored by
+whether the simulated claim "reached" them, with the hub/seed node marked.
+
+This is not a separate model -- it's the same simulate_epidemic_spread()
+function used during training (gnn/simulate_spread.py), run live on a
+claim's actual risk score, so what judges see on screen is a real,
+claim-specific simulation, not a canned animation.
+"""
+
+import random
+import networkx as nx
+
+try:
+    from .graph_utils import generate_social_graph, top_hub_nodes
+    from .simulate_spread import simulate_epidemic_spread
+    from .claim_features import VERDICT_RISK, sensational_score
+except ImportError:  # pragma: no cover - allows running as a plain script
+    from graph_utils import generate_social_graph, top_hub_nodes
+    from simulate_spread import simulate_epidemic_spread
+    from claim_features import VERDICT_RISK, sensational_score
+
+VIZ_NUM_NODES = 32
+VIZ_M = 2
+VIZ_SEED = 7  # fixed layout so the graph shape looks the same across requests
+
+
+def _compute_risk_score(claim_text: str, verdict: str, confidence: float, entities: list[dict]) -> float:
+    """Same risk-scoring logic used elsewhere -- false/sensational claims spread further."""
+    verdict_risk = VERDICT_RISK.get(verdict, 0.3)
+    sensational = sensational_score(claim_text)
+    entity_density = min(len(entities or []) / 5, 1.0)
+    risk_score = 0.55 * verdict_risk + 0.25 * sensational + 0.20 * entity_density
+    return min(risk_score, 1.0)
+
+
+def generate_visualization_graph(claim_text: str, verdict: str, confidence: float, entities: list[dict]) -> dict:
+    """
+    Returns a JSON-serializable structure:
+    {
+        "nodes": [{"id": 0, "x": 0.42, "y": 0.71, "infected": true, "is_hub": false, "is_seed": true}, ...],
+        "edges": [{"source": 0, "target": 4}, ...],
+        "infected_count": 14,
+        "total_count": 32,
+    }
+    x/y are normalized to [0, 1] so the frontend can scale them to any SVG viewBox.
+    """
+    G = generate_social_graph(num_nodes=VIZ_NUM_NODES, m=VIZ_M, seed=VIZ_SEED)
+
+    seed_node = top_hub_nodes(G, k=1)[0]
+    hub_nodes = set(top_hub_nodes(G, k=3))
+
+    risk_score = _compute_risk_score(claim_text, verdict, confidence, entities)
+    # Use a seeded RNG so re-running the same claim gives a stable, reproducible
+    # visualization instead of a different random result every request.
+    rng_seed = abs(hash(claim_text)) % (2**31)
+    rng = random.Random(rng_seed)
+
+    _total_reached, _peak_step, _history, infected_set = simulate_epidemic_spread(
+        G, risk_score, seed_node, max_steps=15, rng=rng, return_set=True
+    )
+
+    # Spring layout gives a natural "social network" look -- connected nodes
+    # cluster together, hubs end up visually central.
+    positions = nx.spring_layout(G, seed=VIZ_SEED, k=0.6)
+
+    # Normalize all coordinates to [0, 1] for easy frontend scaling
+    xs = [p[0] for p in positions.values()]
+    ys = [p[1] for p in positions.values()]
+    x_min, x_max = min(xs), max(xs)
+    y_min, y_max = min(ys), max(ys)
+    x_range = (x_max - x_min) or 1
+    y_range = (y_max - y_min) or 1
+
+    nodes = []
+    for node_id in G.nodes():
+        x, y = positions[node_id]
+        nodes.append({
+            "id": int(node_id),
+            "x": round(float((x - x_min) / x_range), 4),
+            "y": round(float((y - y_min) / y_range), 4),
+            "infected": node_id in infected_set,
+            "is_hub": node_id in hub_nodes,
+            "is_seed": node_id == seed_node,
+        })
+
+    edges = [{"source": int(u), "target": int(v)} for u, v in G.edges()]
+
+    return {
+        "nodes": nodes,
+        "edges": edges,
+        "infected_count": len(infected_set),
+        "total_count": G.number_of_nodes(),
+    }
+
+
+if __name__ == "__main__":
+    # Quick manual test -- run: python gnn/visualization_graph.py
+    result = generate_visualization_graph(
+        "Garlic cures COVID-19 instantly, doctors hate this secret!",
+        "False", 92, [{"text": "garlic"}, {"text": "COVID-19"}],
+    )
+    print(f"Nodes: {len(result['nodes'])}, Edges: {len(result['edges'])}")
+    print(f"Infected: {result['infected_count']}/{result['total_count']}")
+    print(f"Sample node: {result['nodes'][0]}")
+
+    result2 = generate_visualization_graph(
+        "Regular exercise is good for your heart",
+        "True", 88, [{"text": "exercise"}, {"text": "heart"}],
+    )
+    print(f"\nTrue/neutral claim infected: {result2['infected_count']}/{result2['total_count']}")

static/js/main.js

@@ -16,6 +16,14 @@ function verdictColorClasses(verdict) {
     }
 }
 
+// The backend/LLM still uses "Unverified" internally (verdict logic, DB
+// storage, colors above all key off it) -- this only relabels the TEXT
+// shown to the user, since "Unverified" reads poorly in a results card.
+function displayVerdictLabel(verdict) {
+    if ((verdict || "").toLowerCase() === "unverified") return "Not Reliable";
+    return verdict || "Not Reliable";
+}
+
 // ---------- Emergency Help page ----------
 
 const useGpsBtn = document.getElementById("useGpsBtn");
@@ -211,59 +219,81 @@ if (checkerForm) {
     const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;
 
     function mapSpeechLanguage(code) {
-        const langMap = { en: "en-US", hi: "hi-IN", mr: "mr-IN", es: "es-ES" };
+        const langMap = { en: "en-US", hi: "hi-IN", mr: "mr-IN" };
         return langMap[code] || "en-US";
     }
 
     if (voiceBtn && SpeechRecognitionAPI) {
-        const recognition = new SpeechRecognitionAPI();
-        recognition.continuous = false;
-        recognition.interimResults = false;
-        recognition.maxAlternatives = 1;
+        let recognition = null;
         let isListening = false;
 
         const setListeningState = (listening) => {
             isListening = listening;
             voiceBtn.classList.toggle("text-red-600", listening);
-            voiceLabel.textContent = listening ? "Listening..." : "Speak";
+            voiceLabel.textContent = listening ? "Listening... (tap to stop)" : "Speak";
         };
 
+        function createRecognition() {
+            // IMPORTANT: create a NEW instance every time instead of reusing
+            // one long-lived object. Reusing the same SpeechRecognition
+            // instance across multiple start/stop cycles is a known source
+            // of silent failures in Chrome (later attempts stop firing
+            // 'result' events even though the mic is active) -- this was
+            // the root cause of "mic keeps stopping and not writing text".
+            const instance = new SpeechRecognitionAPI();
+
+            // continuous=true so it keeps listening through natural pauses
+            // in speech instead of auto-stopping after 1-2 seconds of
+            // silence (which is what continuous=false was doing, and is
+            // why it felt like it kept cutting out).
+            instance.continuous = true;
+            instance.interimResults = false;
+            instance.maxAlternatives = 1;
+
+            const langSelect = checkerForm.querySelector("select[name='language']");
+            instance.lang = mapSpeechLanguage(langSelect ? langSelect.value : "en");
+
+            instance.addEventListener("result", (event) => {
+                // With interimResults=false, every result here is final.
+                // Only append the LATEST result, not the whole history,
+                // to avoid duplicating text on each new phrase.
+                const latest = event.results[event.results.length - 1];
+                const transcript = latest[0]?.transcript?.trim();
+                if (transcript) {
+                    claimTextarea.value = (claimTextarea.value ? `${claimTextarea.value} ${transcript}`.trim() : transcript);
+                }
+            });
+
+            instance.addEventListener("end", () => {
+                setListeningState(false);
+            });
+
+            instance.addEventListener("error", (event) => {
+                console.warn("Speech recognition error:", event.error);
+                setListeningState(false);
+                if (event.error === "not-allowed" || event.error === "service-not-allowed") {
+                    alert("Microphone access was blocked. Please allow microphone permission for this site and try again.");
+                }
+            });
+
+            return instance;
+        }
+
         voiceBtn.addEventListener("click", () => {
-            if (isListening) {
+            if (isListening && recognition) {
                 recognition.stop();
                 return;
             }
 
-            const langSelect = checkerForm.querySelector("select[name='language']");
-            recognition.lang = mapSpeechLanguage(langSelect ? langSelect.value : "en");
-
+            recognition = createRecognition();
             try {
                 recognition.start();
                 setListeningState(true);
             } catch (err) {
+                console.warn("Could not start speech recognition:", err);
                 setListeningState(false);
             }
         });
-
-        recognition.addEventListener("result", (event) => {
-            const transcript = Array.from(event.results)
-                .map((result) => result[0]?.transcript || "")
-                .join(" ")
-                .trim();
-
-            if (transcript) {
-                claimTextarea.value = (claimTextarea.value ? `${claimTextarea.value} ${transcript}`.trim() : transcript);
-            }
-        });
-
-        recognition.addEventListener("end", () => {
-            setListeningState(false);
-        });
-
-        recognition.addEventListener("error", (event) => {
-            console.warn("Speech recognition error:", event.error);
-            setListeningState(false);
-        });
     } else if (voiceBtn) {
         // Browser doesn't support Speech Recognition (e.g. Firefox) -- hide gracefully
         voiceBtn.style.display = "none";
@@ -314,18 +344,29 @@ function renderCheckerResult(data) {
 
     // If the claim came from an uploaded screenshot, show the OCR'd text so
     // the user can confirm it was read correctly before trusting the verdict.
-    let ocrNote = "";
-    const existingOcrNote = document.getElementById("ocrExtractedNote");
-    if (existingOcrNote) existingOcrNote.remove();
-    if (data.ocr_used && data.claim_text_used) {
-        ocrNote = document.createElement("div");
-        ocrNote.id = "ocrExtractedNote";
-        ocrNote.className = "text-[11px] font-semibold text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 mb-1";
-        ocrNote.innerHTML = `<i class="fa-solid fa-text-height mr-1"></i> Text read from image: "${escapeHtml(data.claim_text_used)}"`;
-        verdictBadge.parentElement.insertBefore(ocrNote, verdictBadge);
+    // If it was translated, show that too -- this is the fastest way to
+    // spot whether an "Unverified" result is due to bad OCR/translation,
+    // vs. the claim genuinely not being covered by the evidence base.
+    let existingDebugNote = document.getElementById("ocrExtractedNote");
+    if (existingDebugNote) existingDebugNote.remove();
+
+    if (data.ocr_used || (data.raw_text_detected && data.raw_text_detected !== data.claim_text_used)) {
+        const debugNote = document.createElement("div");
+        debugNote.id = "ocrExtractedNote";
+        debugNote.className = "text-[11px] font-semibold text-slate-500 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 mb-1 space-y-1";
+
+        let html = "";
+        if (data.ocr_used) {
+            html += `<div><i class="fa-solid fa-text-height mr-1"></i>Text read from image: "${escapeHtml(data.raw_text_detected)}"</div>`;
+        }
+        if (data.raw_text_detected !== data.claim_text_used) {
+            html += `<div><i class="fa-solid fa-language mr-1"></i>Text used for verification (translated to English): "${escapeHtml(data.claim_text_used)}"</div>`;
+        }
+        debugNote.innerHTML = html;
+        verdictBadge.parentElement.insertBefore(debugNote, verdictBadge);
     }
 
-    document.getElementById("verdictLabel").textContent = data.verdict || "Unverified";
+    document.getElementById("verdictLabel").textContent = displayVerdictLabel(data.verdict);
     document.getElementById("explanationText").textContent = data.explanation || "";
 
     const confidence = Number(data.confidence) || 0;
@@ -357,19 +398,17 @@ function renderCheckerResult(data) {
         sourceContainer.innerHTML = `<span class="text-xs text-slate-400">No sources returned.</span>`;
     }
 
-    document.getElementById("shareVerdict").textContent = `Verdict: ${data.verdict || "Unverified"}`;
+    // ---- Method Comparison: BERT vs RAG vs GNN ----
+    renderMethodComparison(data.method_comparison);
+
+    document.getElementById("shareVerdict").textContent = `Verdict: ${displayVerdictLabel(data.verdict)}`;
     document.getElementById("shareExplanation").textContent = data.explanation || "";
 
     // ---- Text-to-speech: read the verdict + explanation aloud ----
     const speakBtn = document.getElementById("speakResultBtn");
     const speakLabel = document.getElementById("speakResultLabel");
     if (speakBtn && "speechSynthesis" in window) {
-        const SPEECH_LANG_MAP = {
-            en: "en-US",
-            hi: "hi-IN",
-            mr: "mr-IN",
-            es: "es-ES",
-        };
+        const SPEECH_LANG_MAP = { en: "en-US", hi: "hi-IN", mr: "mr-IN" };
 
         let speakNote = document.getElementById("speakVoiceNote");
         if (!speakNote && speakBtn.parentElement) {
@@ -379,10 +418,6 @@ function renderCheckerResult(data) {
             speakBtn.parentElement.appendChild(speakNote);
         }
 
-        // Chrome loads its voice list asynchronously. Calling
-        // getVoices() too early (e.g. the first time it's ever called on
-        // a page) can return an empty array even though voices exist --
-        // this waits for the real list instead of assuming it's ready.
         function loadVoicesOnce() {
             return new Promise((resolve) => {
                 const existing = window.speechSynthesis.getVoices();
@@ -393,51 +428,86 @@ function renderCheckerResult(data) {
                 window.speechSynthesis.onvoiceschanged = () => {
                     resolve(window.speechSynthesis.getVoices());
                 };
-                // Safety timeout in case the event never fires on some browsers
                 setTimeout(() => resolve(window.speechSynthesis.getVoices()), 1000);
             });
         }
 
+        let ttsAudio = null; // tracks a playing server-side TTS <audio>, if any
+
+        async function speakViaServerFallback(text, langCode) {
+            // Used when the browser has no matching voice installed for the
+            // selected language -- this guarantees correct-language audio
+            // (via gTTS server-side) instead of silently reading in English.
+            if (speakNote) {
+                speakNote.textContent = "No local voice found for this language -- generating audio online...";
+                speakNote.classList.remove("hidden");
+            }
+            speakLabel.textContent = "Loading...";
+
+            try {
+                const res = await fetch("/api/tts", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ text, lang: langCode }),
+                });
+                if (!res.ok) throw new Error("Server TTS failed.");
+
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                ttsAudio = new Audio(url);
+                ttsAudio.onplay = () => { speakLabel.textContent = "Stop"; };
+                ttsAudio.onended = () => { speakLabel.textContent = "Listen"; };
+                ttsAudio.onerror = () => { speakLabel.textContent = "Listen"; };
+                await ttsAudio.play();
+            } catch (err) {
+                console.warn("Server-side TTS fallback failed:", err);
+                speakLabel.textContent = "Listen";
+                if (speakNote) {
+                    speakNote.textContent = "Couldn't generate audio for this language right now.";
+                }
+            }
+        }
+
         speakBtn.onclick = async () => {
+            // Stop whichever playback mode is currently active
             if (window.speechSynthesis.speaking || window.speechSynthesis.pending) {
                 window.speechSynthesis.cancel();
                 speakLabel.textContent = "Listen";
                 return;
             }
+            if (ttsAudio && !ttsAudio.paused) {
+                ttsAudio.pause();
+                speakLabel.textContent = "Listen";
+                return;
+            }
 
-            const availableVoices = await loadVoicesOnce();
-
-            const utterance = new SpeechSynthesisUtterance(
-                `Verdict: ${data.verdict}. ${data.explanation || ""}`
-            );
-            utterance.rate = 0.95;
+            const textToSpeak = `Verdict: ${data.verdict}. ${data.explanation || ""}`;
+            const langCode = data.language_processed || "en";
+            const targetLangCode = SPEECH_LANG_MAP[langCode] || "en-US";
 
-            const targetLangCode = SPEECH_LANG_MAP[data.language_processed] || "en-US";
+            const availableVoices = await loadVoicesOnce();
             let chosenVoice = availableVoices.find(v => v.lang === targetLangCode);
-
-            if (!chosenVoice && data.language_processed === "mr") {
+            if (!chosenVoice && langCode === "mr") {
                 chosenVoice = availableVoices.find(v => v.lang === "hi-IN");
             }
 
+            if (!chosenVoice && langCode !== "en") {
+                // No matching voice on this device -- use the server-side
+                // fallback instead of silently defaulting to English.
+                await speakViaServerFallback(textToSpeak, langCode);
+                return;
+            }
+
+            const utterance = new SpeechSynthesisUtterance(textToSpeak);
+            utterance.rate = 0.95;
             if (chosenVoice) {
                 utterance.voice = chosenVoice;
                 utterance.lang = chosenVoice.lang;
+                if (speakNote) speakNote.classList.add("hidden");
             } else {
                 utterance.lang = "en-US";
             }
 
-            if (speakNote) {
-                if (!chosenVoice) {
-                    speakNote.textContent = `No voice available for this language on your device -- using default.`;
-                    speakNote.classList.remove("hidden");
-                } else if (chosenVoice.lang !== targetLangCode) {
-                    speakNote.textContent = `No Marathi voice found on this device -- using the closest available (Hindi) voice instead.`;
-                    speakNote.classList.remove("hidden");
-                } else {
-                    speakNote.classList.add("hidden");
-                }
-            }
-
             utterance.onstart = () => { speakLabel.textContent = "Stop"; };
             utterance.onend = () => { speakLabel.textContent = "Listen"; };
             utterance.onerror = () => { speakLabel.textContent = "Listen"; };
@@ -478,15 +548,19 @@ async function runPredictionPipeline() {
         if (!res.ok) throw new Error(data.error || "Prediction failed.");
 
         const riskColor = data.risk_level === "High Risk" ? "text-red-400" : (data.risk_level === "Medium Risk" ? "text-amber-400" : "text-emerald-400");
-        const breakdown = data.signal_breakdown || {};
+
+        const engineLabel = data.is_simulated
+            ? `<i class="fa-solid fa-triangle-exclamation"></i> Fallback heuristic -- trained model unavailable`
+            : `<i class="fa-solid fa-circle-check"></i> Real trained Graph Attention Network (GAT)`;
+        const engineColor = data.is_simulated ? "text-amber-400" : "text-emerald-400";
 
         panel.innerHTML = `
-            <div class="text-[10px] uppercase tracking-wider font-bold text-blue-400 mb-1 flex items-center gap-1.5">
-                <i class="fa-solid fa-diagram-project"></i> Heuristic graph + language analysis -- not a trained model
+            <div class="text-[10px] uppercase tracking-wider font-bold ${engineColor} mb-1 flex items-center gap-1.5">
+                ${engineLabel}
             </div>
             <div class="grid grid-cols-2 gap-4">
                 <div class="bg-slate-800/60 rounded-xl p-4">
-                    <span class="text-[10px] uppercase font-bold text-slate-400">Risk Score</span>
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Virality Score</span>
                     <div class="text-3xl font-black mt-1">${escapeHtml(data.virality_score)}<span class="text-sm text-slate-500">/100</span></div>
                 </div>
                 <div class="bg-slate-800/60 rounded-xl p-4">
@@ -494,8 +568,8 @@ async function runPredictionPipeline() {
                     <div class="text-xl font-black mt-1 ${riskColor}">${escapeHtml(data.risk_level)}</div>
                 </div>
                 <div class="bg-slate-800/60 rounded-xl p-4">
-                    <span class="text-[10px] uppercase font-bold text-slate-400">Estimated Reach (order of magnitude)</span>
-                    <div class="text-xl font-black mt-1">${escapeHtml(data.reach_estimate_bucket)}</div>
+                    <span class="text-[10px] uppercase font-bold text-slate-400">Predicted Nodes Reached</span>
+                    <div class="text-xl font-black mt-1">${escapeHtml(data.predicted_nodes_reached)}</div>
                 </div>
                 <div class="bg-slate-800/60 rounded-xl p-4">
                     <span class="text-[10px] uppercase font-bold text-slate-400">Est. Time To Peak</span>
@@ -503,22 +577,78 @@ async function runPredictionPipeline() {
                 </div>
             </div>
             <div class="bg-slate-800/60 rounded-xl p-4">
-                <span class="text-[10px] uppercase font-bold text-slate-400 block mb-2">Signal Breakdown</span>
-                <div class="flex flex-col gap-2 text-xs">
-                    <div class="flex justify-between"><span class="text-slate-300">Matches known misinformation pattern</span><span class="font-bold">${escapeHtml(breakdown.misinformation_pattern_match ?? "-")}</span></div>
-                    <div class="flex justify-between"><span class="text-slate-300">Sensational language score</span><span class="font-bold">${escapeHtml(breakdown.sensational_language_score ?? "-")}</span></div>
-                    <div class="flex justify-between"><span class="text-slate-300">Entity graph embeddedness</span><span class="font-bold">${escapeHtml(breakdown.entity_embeddedness_score ?? "-")}</span></div>
+                <span class="text-[10px] uppercase font-bold text-slate-400 block mb-2">Vulnerable Network Hubs</span>
+                <div class="flex flex-wrap gap-2">
+                    ${(data.network_hubs_vulnerable || []).map(h => `<span class="text-[11px] bg-slate-700/70 px-2.5 py-1 rounded-full">${escapeHtml(h)}</span>`).join("")}
                 </div>
             </div>
+
+            <div class="bg-slate-800/60 rounded-xl p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <span class="text-[10px] uppercase font-bold text-slate-400"><i class="fa-solid fa-circle-nodes mr-1"></i>Simulated Network Spread (node-by-node)</span>
+                    <span class="text-[10px] text-slate-400">${data.visualization ? `${escapeHtml(data.visualization.infected_count)}/${escapeHtml(data.visualization.total_count)} nodes reached` : ""}</span>
+                </div>
+                <div id="spreadGraphContainer" class="w-full flex justify-center"></div>
+                <div class="flex items-center gap-4 mt-3 text-[10px] text-slate-400">
+                    <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-red-500 inline-block"></span>Reached by claim</span>
+                    <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-slate-500 inline-block"></span>Not reached</span>
+                    <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-amber-400 inline-block"></span>Hub account</span>
+                    <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full border-2 border-white inline-block"></span>Origin node</span>
+                </div>
+            </div>
+
             <div class="text-[10px] text-slate-500 leading-relaxed px-1">
-                ${escapeHtml(data.methodology || "")}
+                This graph is a smaller, legible network built for visualization, but it runs the SAME epidemic simulation logic used to train the GAT -- so what you see is a real, claim-specific simulation, not a canned animation.
             </div>
         `;
+
+        if (data.visualization) {
+            renderSpreadGraph(data.visualization);
+        }
     } catch (err) {
         panel.innerHTML = `<div class="m-auto text-center text-red-400 font-bold text-xs">${escapeHtml(err.message)}</div>`;
     }
 }
 
+function renderSpreadGraph(viz) {
+    const container = document.getElementById("spreadGraphContainer");
+    if (!container) return;
+
+    const width = 480;
+    const height = 320;
+    const padding = 24;
+
+    const scaleX = (x) => padding + x * (width - 2 * padding);
+    const scaleY = (y) => padding + y * (height - 2 * padding);
+
+    const nodeById = {};
+    viz.nodes.forEach((n) => { nodeById[n.id] = n; });
+
+    const edgeLines = viz.edges.map((e) => {
+        const a = nodeById[e.source];
+        const b = nodeById[e.target];
+        if (!a || !b) return "";
+        return `<line x1="${scaleX(a.x)}" y1="${scaleY(a.y)}" x2="${scaleX(b.x)}" y2="${scaleY(b.y)}" stroke="#334155" stroke-width="1" opacity="0.5" />`;
+    }).join("");
+
+    const nodeCircles = viz.nodes.map((n) => {
+        let fill = n.infected ? "#EF4444" : "#64748B";
+        if (n.is_hub) fill = n.infected ? "#F59E0B" : "#78716C";
+        const radius = n.is_seed ? 8 : (n.is_hub ? 6 : 4);
+        const stroke = n.is_seed ? `stroke="white" stroke-width="2"` : "";
+        return `<circle cx="${scaleX(n.x)}" cy="${scaleY(n.y)}" r="${radius}" fill="${fill}" ${stroke}>
+            <title>Node ${n.id}${n.is_seed ? " (origin)" : ""}${n.is_hub ? " (hub)" : ""} -- ${n.infected ? "reached" : "not reached"}</title>
+        </circle>`;
+    }).join("");
+
+    container.innerHTML = `
+        <svg viewBox="0 0 ${width} ${height}" class="w-full max-w-lg" style="background:transparent;">
+            ${edgeLines}
+            ${nodeCircles}
+        </svg>
+    `;
+}
+
 // ---------- Passport page ----------
 
 const passportForm = document.getElementById("passportForm");
@@ -778,7 +908,7 @@ if (trendingContainer) {
                 return `
                     <div class="bg-white p-4 rounded-xl border ${colors.badge} flex items-center justify-between gap-4">
                         <div class="flex items-center gap-3 min-w-0">
-                            <span class="text-[10px] font-black uppercase px-2 py-1 rounded-full ${colors.badge} shrink-0">${escapeHtml(t.verdict || "Unverified")}</span>
+                            <span class="text-[10px] font-black uppercase px-2 py-1 rounded-full ${colors.badge} shrink-0">${escapeHtml(displayVerdictLabel(t.verdict))}</span>
                             <p class="text-sm font-semibold text-slate-700 truncate">"${escapeHtml(t.claim_text || "")}"</p>
                         </div>
                         <span class="text-xs font-bold text-slate-400 shrink-0">${escapeHtml(t.check_count)}x checked</span>
@@ -809,7 +939,7 @@ if (latestAlertsContainer) {
                 const colors = verdictColorClasses(h.verdict);
                 return `
                     <div class="bg-white p-5 border rounded-2xl shadow-sm ${colors.badge}">
-                        <span class="text-xs font-black uppercase tracking-wide">${escapeHtml(h.verdict || "Unverified")}</span>
+                        <span class="text-xs font-black uppercase tracking-wide">${escapeHtml(displayVerdictLabel(h.verdict))}</span>
                         <p class="text-sm font-bold text-slate-800 mt-2 leading-snug">"${escapeHtml((h.claim_text || "").slice(0, 90))}${(h.claim_text || "").length > 90 ? "..." : ""}"</p>
                         <p class="text-xs text-slate-400 mt-2">${escapeHtml(h.timestamp || "")}</p>
                     </div>`;
@@ -820,6 +950,47 @@ if (latestAlertsContainer) {
         });
 }
 
+function renderMethodComparison(comparison) {
+    const barsContainer = document.getElementById("methodBarsContainer");
+    const conclusionBox = document.getElementById("methodConclusion");
+    if (!barsContainer || !conclusionBox) return;
+
+    if (!comparison || !comparison.methods) {
+        barsContainer.innerHTML = `<p class="text-xs text-slate-400">Comparison data unavailable for this result.</p>`;
+        conclusionBox.innerHTML = "";
+        return;
+    }
+
+    const colorForMethod = {
+        bert: { bar: "bg-slate-400", text: "text-slate-600" },
+        rag: { bar: "bg-blue-500", text: "text-blue-700" },
+        gnn: { bar: "bg-emerald-500", text: "text-emerald-700" },
+    };
+
+    barsContainer.innerHTML = comparison.methods
+        .map((m) => {
+            const colors = colorForMethod[m.key] || colorForMethod.bert;
+            const displayLabel = m.key === "rag" ? displayVerdictLabel(m.label) : m.label;
+            const winnerBadge = m.is_winner
+                ? `<span class="ml-2 text-[10px] font-black uppercase bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full">Most Reliable</span>`
+                : "";
+            return `
+            <div>
+                <div class="flex items-center justify-between mb-1">
+                    <span class="text-xs font-bold ${colors.text}">${escapeHtml(m.name)}${winnerBadge}</span>
+                    <span class="text-xs font-bold ${colors.text}">${escapeHtml(m.score)}/100 &middot; ${escapeHtml(displayLabel)}</span>
+                </div>
+                <div class="w-full bg-slate-100 h-3 rounded-full overflow-hidden">
+                    <div class="h-full ${colors.bar} transition-all duration-700 rounded-full" style="width: ${Math.max(m.score, 3)}%"></div>
+                </div>
+                <p class="text-[11px] text-slate-400 mt-1">${escapeHtml(m.description)}</p>
+            </div>`;
+        })
+        .join("");
+
+    conclusionBox.innerHTML = `<i class="fa-solid fa-circle-check text-purple-500 mr-1"></i><b>Conclusion:</b> ${escapeHtml(comparison.conclusion)}`;
+}
+
 function escapeHtml(str) {
     if (str === null || str === undefined) return "";
     return String(str)

templates/checker.html

@@ -16,7 +16,6 @@
                     <option value="en">English (Global Default)</option>
                     <option value="hi">Hindi (हिन्दी)</option>
                     <option value="mr">Marathi (मराठी)</option>
-                    <option value="es">Spanish (Español)</option>
                 </select>
             </div>
 
@@ -87,6 +86,16 @@
                 </div>
             </div>
 
+            <!-- Method Comparison: BERT vs RAG vs GNN -->
+            <div id="methodComparisonSection" class="bg-white p-6 rounded-2xl border border-slate-200/80">
+                <h5 class="text-sm font-bold text-slate-700 mb-1"><i class="fa-solid fa-scale-balanced text-purple-500 mr-1"></i> Detection Method Comparison</h5>
+                <p class="text-xs text-slate-400 mb-5">How each layer of the pipeline scores this claim, on a 0-100 misinformation-danger scale.</p>
+
+                <div id="methodBarsContainer" class="flex flex-col gap-4 mb-5"></div>
+
+                <div id="methodConclusion" class="bg-purple-50 border border-purple-100 rounded-xl p-4 text-xs text-slate-700 leading-relaxed"></div>
+            </div>
+
             <!-- Shareable Graphic Card Block -->
             <div class="p-6 rounded-2xl bg-gradient-to-br from-slate-900 to-blue-950 text-white shadow-xl flex flex-col gap-4 relative overflow-hidden" id="shareCardGraphic">
                 <div class="absolute right-[-20px] bottom-[-20px] opacity-10 text-9xl"><i class="fa-solid fa-user-shield"></i></div>