Add semantic agreement mode to NLI analysis UI

Introduces a semantic agreement mode alongside strict NLI mode for comparing texts. Updates backend to provide both modes, refactors score aggregation and labeling logic, and enhances frontend with mode switching and improved result display.

main.py

@@ -1,5 +1,4 @@
-from typing import Dict, List
-
+from typing import Dict
 from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
@@ -7,10 +6,9 @@ from fastapi.templating import Jinja2Templates
 from pydantic import BaseModel
 from transformers import pipeline
 
-# ---------------- FastAPI setup ----------------
+# ---------------- FastAPI Setup ----------------
 
 app = FastAPI()
-
 app.mount("/static", StaticFiles(directory="static"), name="static")
 templates = Jinja2Templates(directory="templates")
 
@@ -25,7 +23,7 @@ async def home(request: Request):
     return templates.TemplateResponse("index.html", {"request": request})
 
 
-# ---------------- NLI model setup ----------------
+# ---------------- NLI Model ----------------
 
 nli_pipeline = pipeline(
     "text-classification",
@@ -34,19 +32,17 @@ nli_pipeline = pipeline(
 )
 
 
-def get_direction_scores(premise: str, hypothesis: str) -> Dict[str, float]:
+def nli_scores(premise: str, hypothesis: str) -> Dict[str, float]:
     """
-    Run NLI in one direction: premise -> hypothesis.
-    Returns normalized scores for ENTAILMENT, CONTRADICTION, NEUTRAL.
+    Compute NLI scores in one direction.
     """
     outputs = nli_pipeline(
         {"text": premise, "text_pair": hypothesis},
-        return_all_scores=True,
+        return_all_scores=True
     )[0]
 
     scores = {o["label"].upper(): float(o["score"]) for o in outputs}
 
-    # Normalize keys to standard names
     return {
         "ENTAILMENT": scores.get("ENTAILMENT", scores.get("LABEL_2", 0.0)),
         "CONTRADICTION": scores.get("CONTRADICTION", scores.get("LABEL_0", 0.0)),
@@ -54,45 +50,48 @@ def get_direction_scores(premise: str, hypothesis: str) -> Dict[str, float]:
     }
 
 
-def aggregate_nli(text_a: str, text_b: str) -> Dict:
-    """
-    Compute NLI in both directions A->B and B->A and aggregate scores.
-    """
-    scores_ab = get_direction_scores(text_a, text_b)
-    scores_ba = get_direction_scores(text_b, text_a)
-
-    agg = {
-        "ENTAILMENT": (scores_ab["ENTAILMENT"] + scores_ba["ENTAILMENT"]) / 2.0,
-        "CONTRADICTION": (scores_ab["CONTRADICTION"] + scores_ba["CONTRADICTION"]) / 2.0,
-        "NEUTRAL": (scores_ab["NEUTRAL"] + scores_ba["NEUTRAL"]) / 2.0,
+def aggregate_scores(a: Dict[str, float], b: Dict[str, float]) -> Dict[str, float]:
+    """Average A->B and B->A scores"""
+    return {
+        "ENTAILMENT": (a["ENTAILMENT"] + b["ENTAILMENT"]) / 2,
+        "CONTRADICTION": (a["CONTRADICTION"] + b["CONTRADICTION"]) / 2,
+        "NEUTRAL": (a["NEUTRAL"] + b["NEUTRAL"]) / 2,
     }
 
-    # Decide label
+
+def strict_nli_label(agg: Dict[str, float]):
+    """Traditional MNLI label"""
     label = max(agg, key=agg.get)
     confidence = agg[label]
 
-    # Simple interpretation
-    if label == "ENTAILMENT":
-        explanation = "The two texts are largely consistent / in agreement."
-    elif label == "CONTRADICTION":
-        explanation = "The two texts appear to contradict each other."
-    else:
-        explanation = "The relationship is mostly neutral or only partially related."
-
-    return {
-        "overall_label": label,
-        "overall_confidence": confidence,
-        "explanation": explanation,
-        "aggregated_scores": agg,
-        "directional": {
-            "A_to_B": scores_ab,
-            "B_to_A": scores_ba,
-        },
+    explanations = {
+        "ENTAILMENT": "The statements logically agree.",
+        "CONTRADICTION": "The statements logically contradict each other.",
+        "NEUTRAL": "The statements are neither supporting nor contradicting.",
     }
 
+    return label, confidence, explanations[label]
+
+
+def semantic_mode_label(agg: Dict[str, float]):
+    """More human-friendly mode"""
+
+    ent, con, neu = agg["ENTAILMENT"], agg["CONTRADICTION"], agg["NEUTRAL"]
+
+    if ent > 0.60 and con < 0.25:
+        return "Strong Agreement", "The statements strongly support the same meaning."
+
+    if ent > 0.40 and neu > 0.30:
+        return "Partial Agreement", "They share overlap but are not exact entailments."
+
+    if con > 0.50:
+        return "Likely Contradiction", "The statements conflict in their meaning."
+
+    return "Mixed / Unclear", "No strong relationship detected, or model is uncertain."
+
 
 @app.post("/analyze")
-async def analyze_nli(payload: NLIRequest):
+async def analyze(payload: NLIRequest):
     text_a = payload.text_a.strip()
     text_b = payload.text_b.strip()
 
@@ -103,8 +102,34 @@ async def analyze_nli(payload: NLIRequest):
         )
 
     try:
-        result = aggregate_nli(text_a, text_b)
-        return result
+        # Compute directional scores
+        a_to_b = nli_scores(text_a, text_b)
+        b_to_a = nli_scores(text_b, text_a)
+
+        # Aggregate
+        agg = aggregate_scores(a_to_b, b_to_a)
+
+        # Strict NLI mode
+        strict_label, strict_conf, strict_expl = strict_nli_label(agg)
+
+        # Semantic mode
+        semantic_label, semantic_expl = semantic_mode_label(agg)
+
+        return {
+            "strict_mode": {
+                "label": strict_label,
+                "confidence": strict_conf,
+                "explanation": strict_expl,
+                "scores": agg,
+                "directional": {"A_to_B": a_to_b, "B_to_A": b_to_a},
+            },
+            "semantic_mode": {
+                "label": semantic_label,
+                "explanation": semantic_expl,
+                "scores": agg,
+            }
+        }
+
     except Exception as e:
         return JSONResponse(
             {"error": f"Error running NLI model: {e}"},

static/app.js

@@ -1,95 +1,107 @@
 const textAEl = document.getElementById("textA");
 const textBEl = document.getElementById("textB");
 const analyzeBtn = document.getElementById("analyzeBtn");
+
 const statusEl = document.getElementById("status");
-const overallLabelEl = document.getElementById("overallLabel");
-const overallExplanationEl = document.getElementById("overallExplanation");
+const resultLabelEl = document.getElementById("resultLabel");
+const resultExplanationEl = document.getElementById("resultExplanation");
 const scoreBoxEl = document.getElementById("scoreBox");
 
-function formatPercentage(x) {
+const strictTab = document.getElementById("strictTab");
+const semanticTab = document.getElementById("semanticTab");
+
+let lastResult = null;
+let activeMode = "strict";
+
+function switchMode(mode) {
+  activeMode = mode;
+
+  strictTab.classList.toggle("active", mode === "strict");
+  semanticTab.classList.toggle("active", mode === "semantic");
+
+  if (lastResult) updateUI();
+}
+
+strictTab.onclick = () => switchMode("strict");
+semanticTab.onclick = () => switchMode("semantic");
+
+function formatPct(x) {
   return (x * 100).toFixed(1) + "%";
 }
 
-async function analyzeRelationship() {
-  const textA = textAEl.value.trim();
-  const textB = textBEl.value.trim();
+function updateUI() {
+  if (!lastResult) return;
+
+  if (activeMode === "strict") {
+    const d = lastResult.strict_mode;
+    resultLabelEl.textContent = `${d.label} (${formatPct(d.confidence)})`;
+    resultExplanationEl.textContent = d.explanation;
+
+    const s = d.scores;
+    scoreBoxEl.innerHTML = `
+      <div>Entailment: ${formatPct(s.ENTAILMENT)}</div>
+      <div>Contradiction: ${formatPct(s.CONTRADICTION)}</div>
+      <div>Neutral: ${formatPct(s.NEUTRAL)}</div>
+    `;
+  }
+
+  if (activeMode === "semantic") {
+    const d = lastResult.semantic_mode;
+
+    resultLabelEl.textContent = d.label;
+    resultExplanationEl.textContent = d.explanation;
+
+    const s = d.scores;
+    scoreBoxEl.innerHTML = `
+      <div>Agreement strength (semantic summary)</div>
+      <div>Entailment: ${formatPct(s.ENTAILMENT)}</div>
+      <div>Contradiction: ${formatPct(s.CONTRADICTION)}</div>
+      <div>Neutral: ${formatPct(s.NEUTRAL)}</div>
+    `;
+  }
+}
+
+async function analyzeTexts() {
+  const text_a = textAEl.value.trim();
+  const text_b = textBEl.value.trim();
 
-  if (!textA || !textB) {
-    statusEl.textContent = "Please fill in both Text A and Text B.";
+  if (!text_a || !text_b) {
+    statusEl.textContent = "Enter both texts.";
     statusEl.className = "status status-warn";
     return;
   }
 
-  statusEl.textContent = "Analyzing relationship...";
+  statusEl.textContent = "Analyzing...";
   statusEl.className = "status status-info";
 
-  overallLabelEl.textContent = "Computing...";
-  overallLabelEl.className = "overall-label";
-  overallExplanationEl.textContent = "";
-  scoreBoxEl.textContent = "Waiting for scores...";
-  scoreBoxEl.className = "score-box";
+  resultLabelEl.textContent = "Computing...";
+  scoreBoxEl.textContent = "";
 
   try {
     const res = await fetch("/analyze", {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text_a: textA, text_b: textB })
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({ text_a, text_b })
     });
 
     const data = await res.json();
 
     if (!res.ok) {
-      const msg = data.error || "Something went wrong.";
-      statusEl.textContent = msg;
+      statusEl.textContent = data.error;
       statusEl.className = "status status-error";
-      overallLabelEl.textContent = "";
-      overallExplanationEl.textContent = "";
-      scoreBoxEl.textContent = "";
       return;
     }
 
     statusEl.textContent = "Done!";
     statusEl.className = "status status-ok";
+    lastResult = data;
 
-    const label = data.overall_label || "UNKNOWN";
-    const confidence = data.overall_confidence || 0;
-    const explanation = data.explanation || "";
-
-    let emoji = "";
-    if (label === "ENTAILMENT") emoji = "✅";
-    else if (label === "CONTRADICTION") emoji = "⚠️";
-    else if (label === "NEUTRAL") emoji = "🔍";
-
-    overallLabelEl.textContent =
-      `${emoji} ${label} (confidence: ${formatPercentage(confidence)})`;
-    overallLabelEl.className = "overall-label";
-    overallExplanationEl.textContent = explanation;
+    updateUI();
 
-    const agg = data.aggregated_scores || {};
-    const ent = agg.ENTAILMENT ?? 0;
-    const con = agg.CONTRADICTION ?? 0;
-    const neu = agg.NEUTRAL ?? 0;
-
-    scoreBoxEl.className = "score-box";
-    scoreBoxEl.innerHTML = `
-      <div class="score-row">
-        <span class="score-label">Entailment</span>
-        <span class="score-value">${formatPercentage(ent)}</span>
-      </div>
-      <div class="score-row">
-        <span class="score-label">Contradiction</span>
-        <span class="score-value">${formatPercentage(con)}</span>
-      </div>
-      <div class="score-row">
-        <span class="score-label">Neutral</span>
-        <span class="score-value">${formatPercentage(neu)}</span>
-      </div>
-    `;
   } catch (err) {
-    console.error(err);
-    statusEl.textContent = "Error contacting the server.";
+    statusEl.textContent = "Error contacting server.";
     statusEl.className = "status status-error";
   }
 }
 
-analyzeBtn.addEventListener("click", analyzeRelationship);
+analyzeBtn.addEventListener("click", analyzeTexts);

templates/index.html

@@ -7,52 +7,53 @@
   </head>
   <body>
     <div class="container">
+
       <h1>Contradiction & Entailment Demo</h1>
       <p class="subtitle">
-        Compare two sentences or paragraphs to see if they are in agreement, contradict each other, or are mostly neutral.
+        Compare two texts to determine if they agree, contradict, or are neutral.
       </p>
 
+      <!-- Inputs -->
       <div class="input-section">
         <div class="input-card">
           <h2>Text A</h2>
-          <textarea
-            id="textA"
-            rows="6"
-            placeholder="Enter the first sentence or paragraph..."
-          ></textarea>
+          <textarea id="textA" rows="6"></textarea>
         </div>
 
         <div class="input-card">
           <h2>Text B</h2>
-          <textarea
-            id="textB"
-            rows="6"
-            placeholder="Enter the second sentence or paragraph..."
-          ></textarea>
+          <textarea id="textB" rows="6"></textarea>
         </div>
       </div>
 
       <div class="controls">
-        <button id="analyzeBtn">Analyze Relationship</button>
+        <button id="analyzeBtn">Analyze</button>
       </div>
 
       <div id="status" class="status"></div>
 
+      <!-- MODE SWITCH -->
+      <div class="mode-switch">
+        <button id="strictTab" class="active">Strict NLI Mode</button>
+        <button id="semanticTab">Semantic Agreement Mode</button>
+      </div>
+
+      <!-- Results -->
       <div class="results">
+
         <div class="result-card">
-          <h2>Overall Relationship</h2>
-          <p id="overallLabel" class="overall-label placeholder">
-            Run an analysis to see the result.
-          </p>
-          <p id="overallExplanation" class="overall-explanation"></p>
+          <h2>Result</h2>
+          <p id="resultLabel" class="overall-label placeholder">Run an analysis.</p>
+          <p id="resultExplanation" class="overall-explanation"></p>
         </div>
 
         <div class="result-card">
           <h2>Score Breakdown</h2>
           <div id="scoreBox" class="score-box placeholder">
-            Entailment, contradiction, and neutral scores will appear here.
+            Scores will appear here.
           </div>
         </div>
+
       </div>
     </div>