Upload 10 files

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+frontend/dist/
+__pycache__/
+*.pyc
+.env
+*.egg-info/
+dist/
+.DS_Store

Dockerfile

@@ -0,0 +1,46 @@
+FROM node:20-slim AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package.json frontend/package.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+FROM python:3.11-slim
+WORKDIR /app
+
+# Install Python deps
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy backend
+COPY backend/ ./backend/
+
+# Copy built React frontend into backend static folder
+COPY --from=frontend-builder /app/frontend/dist ./backend/static
+
+# Patch main.py to serve React static files
+RUN python -c "
+content = open('backend/main.py').read()
+patch = '''
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+import os
+
+static_dir = os.path.join(os.path.dirname(__file__), 'static')
+if os.path.exists(static_dir):
+    app.mount('/assets', StaticFiles(directory=os.path.join(static_dir,'assets')), name='assets')
+
+    @app.get('/{full_path:path}')
+    async def serve_spa(full_path: str):
+        index = os.path.join(static_dir, 'index.html')
+        return FileResponse(index)
+'''
+# Insert after CORS middleware setup
+insert_after = 'allow_headers=[\"*\"],\n)'
+content = content.replace(insert_after, insert_after + '\n' + patch)
+open('backend/main.py','w').write(content)
+"
+
+EXPOSE 7860
+
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +1,33 @@
----
-title: Protocol Detector
-emoji: 📈
-colorFrom: red
-colorTo: pink
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Protocol Contradiction Detector
+emoji: 🔬
+colorFrom: purple
+colorTo: indigo
+sdk: docker
+app_port: 7860
+pinned: false
+---
+
+# Protocol Contradiction Detector
+
+Detect methodological contradictions across experimental research papers using GenAI.
+
+## How to use
+
+1. Upload 2 or more research paper PDFs
+2. Click **Detect Contradictions**
+3. Review the ranked contradictions, side-by-side table, and optimal protocol recommendation
+4. Download the full HTML report
+
+## Setup
+
+Add your Groq API key as a **Space Secret**:
+- Go to your Space → Settings → Repository secrets
+- Add a secret named `GROQ_API_KEY` with your key from [console.groq.com](https://console.groq.com)
+
+## Stack
+
+- **Frontend**: React + Vite
+- **Backend**: FastAPI + Python
+- **AI**: Groq API (LLaMA 3.3 70B)
+- **PDF parsing**: pdfplumber

backend/main.py

@@ -0,0 +1,415 @@
+import os
+import re
+import json
+import tempfile
+from pathlib import Path
+from typing import List
+
+import pdfplumber
+from groq import Groq
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, HTMLResponse
+from pydantic import BaseModel
+
+app = FastAPI(title="Protocol Contradiction Detector")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── Config ────────────────────────────────────────────────────────────────────
+GROQ_MODEL   = "llama-3.3-70b-versatile"
+GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "")
+
+# ── Prompts ───────────────────────────────────────────────────────────────────
+EXTRACTION_SYSTEM = """Extract protocol parameters from this research paper. Return ONLY valid JSON:
+{
+  "title": "paper title",
+  "authors": "first author et al.",
+  "year": "year",
+  "protocol_type": "e.g. Western blot / ELISA / PCR",
+  "parameters": {
+    "reagents": [{"name": "...", "concentration": "...", "vendor": "..."}],
+    "cell_lines": [{"name": "...", "culture_conditions": "...", "serum": "..."}],
+    "temperatures": [{"step": "...", "value": "...", "unit": "C"}],
+    "timings": [{"step": "...", "duration": "..."}],
+    "equipment": [{"name": "...", "settings": "..."}],
+    "buffers": [{"name": "...", "composition": "...", "pH": "..."}],
+    "antibodies": [{"target": "...", "dilution": "...", "vendor": "..."}],
+    "other": [{"parameter": "...", "value": "..."}]
+  }
+}"""
+
+COMPARISON_SYSTEM = """You are an expert in bioengineering reproducibility and experimental methodology.
+Compare protocols from multiple research papers and identify ALL methodological contradictions.
+Return ONLY valid JSON (no markdown fences, no extra text) using this schema:
+{
+  "protocol_type": "detected protocol type",
+  "contradictions": [
+    {
+      "parameter": "parameter name",
+      "category": "reagents|cell_lines|temperatures|timings|equipment|buffers|antibodies|other",
+      "severity": "high|medium|low",
+      "values": {"paper_0": "value from paper 1", "paper_1": "value from paper 2"},
+      "explanation": "why this is a contradiction and its likely impact on reproducibility"
+    }
+  ],
+  "ranked_issues": [
+    {"rank": 1, "parameter": "...", "severity": "high|medium|low", "brief": "one-sentence impact"}
+  ],
+  "optimal_protocol": {
+    "rationale": "overall recommendation rationale",
+    "parameters": [
+      {"label": "parameter name", "value": "recommended value", "reason": "why this is optimal"}
+    ]
+  },
+  "summary": {"total_contradictions": 0, "high": 0, "medium": 0, "low": 0}
+}"""
+
+# ── Core helpers ──────────────────────────────────────────────────────────────
+
+def extract_text_from_pdf(pdf_path: str) -> str:
+    text = ""
+    with pdfplumber.open(pdf_path) as pdf:
+        for page in pdf.pages:
+            page_text = page.extract_text()
+            if page_text:
+                text += page_text + "\n"
+
+    if not text.strip() or len(text.strip()) < 500:
+        raise ValueError(
+            "Could not extract text — this may be a scanned/image-based PDF. "
+            "Please use a text-based PDF."
+        )
+
+    # Try to isolate Methods section
+    methods_match = re.search(
+        r'(?:^\s*(?:\d+\.?\d*\.?\s+)?'
+        r'(?:materials?\s+and\s+methods?|experimental\s+procedures?'
+        r'|methods?\s+and\s+materials?|methods?)\s*$)'
+        r'(.*?)'
+        r'(?=^\s*(?:\d+\.?\d*\.?\s+)?'
+        r'(?:results?|discussion|conclusion|references|acknowledgements?))',
+        text, re.IGNORECASE | re.DOTALL | re.MULTILINE
+    )
+
+    if methods_match and len(methods_match.group(1).strip()) > 200:
+        text = methods_match.group(1)
+    else:
+        chars = len(text)
+        text  = text[chars // 10: chars // 10 + 15000]
+
+    words = text.split()
+    if len(words) > 2500:
+        text = " ".join(words[:2500])
+
+    return text
+
+
+def parse_json_response(raw: str) -> dict:
+    cleaned = re.sub(r"```(?:json)?", "", raw).strip()
+    cleaned = re.sub(r"```", "", cleaned).strip()
+    brace_start = cleaned.find("{")
+    if brace_start > 0:
+        cleaned = cleaned[brace_start:]
+
+    try:
+        return json.loads(cleaned)
+    except json.JSONDecodeError:
+        pass
+
+    try:
+        open_braces   = cleaned.count("{") - cleaned.count("}")
+        open_brackets = cleaned.count("[") - cleaned.count("]")
+        repaired      = cleaned.rstrip(",\n ")
+        repaired     += "]" * max(open_brackets, 0)
+        repaired     += "}" * max(open_braces, 0)
+        return json.loads(repaired)
+    except json.JSONDecodeError:
+        pass
+
+    match = re.search(r"\{.*\}", cleaned, re.DOTALL)
+    if match:
+        try:
+            return json.loads(match.group())
+        except json.JSONDecodeError:
+            pass
+
+    raise ValueError("No valid JSON found in response.\n" + raw[:500])
+
+
+def call_groq_with_backoff(client: Groq, messages: list) -> str:
+    word_limits = [2500, 2000, 1500, 1000]
+    attempt     = 0
+    while attempt < len(word_limits):
+        try:
+            response = client.chat.completions.create(
+                model=GROQ_MODEL,
+                messages=messages,
+                temperature=0.1,
+                max_tokens=4000,
+            )
+            return response.choices[0].message.content
+        except Exception as e:
+            err = str(e)
+            if "413" in err or "too large" in err.lower() or "rate_limit_exceeded" in err.lower():
+                attempt += 1
+                if attempt >= len(word_limits):
+                    raise ValueError("Request too large even after maximum reductions.")
+                new_limit = word_limits[attempt]
+                for msg in messages:
+                    if msg["role"] == "user":
+                        words          = msg["content"].split()
+                        msg["content"] = " ".join(words[:new_limit])
+            else:
+                raise
+
+
+def extract_protocol(client: Groq, pdf_path: str, filename: str) -> dict:
+    paper_text = extract_text_from_pdf(pdf_path)
+    messages = [
+        {"role": "system", "content": EXTRACTION_SYSTEM},
+        {"role": "user", "content":
+            "Extract the complete experimental protocol from this research paper. "
+            "Be thorough - capture all concentrations, timings, temperatures, cell lines, "
+            "reagents, antibodies, and equipment settings.\n\nPAPER TEXT:\n" + paper_text
+        }
+    ]
+    raw    = call_groq_with_backoff(client, messages)
+    result = parse_json_response(raw)
+    result["_filename"] = filename
+    return result
+
+
+def compare_protocols(client: Groq, extracted: list, paper_names: list) -> dict:
+    sections = []
+    for i, (e, name) in enumerate(zip(extracted, paper_names)):
+        sections.append(
+            f"=== Paper {i+1}: {e.get('title', name)} ===\n"
+            f"{json.dumps(e.get('parameters', {}), indent=2)}"
+        )
+    prompt   = (
+        f"Compare these {len(extracted)} research paper protocols "
+        f"and identify ALL methodological contradictions:\n\n"
+        + "\n\n".join(sections)
+    )
+    messages = [
+        {"role": "system", "content": COMPARISON_SYSTEM},
+        {"role": "user",   "content": prompt},
+    ]
+    raw    = call_groq_with_backoff(client, messages)
+    return parse_json_response(raw)
+
+
+def generate_html_report(extracted: list, comparison: dict, paper_names: list) -> str:
+    summary  = comparison.get("summary", {})
+    contras  = comparison.get("contradictions", [])
+    ranked   = comparison.get("ranked_issues", [])
+    optimal  = comparison.get("optimal_protocol", {})
+
+    sev_color = {"high": "#ff4d6d", "medium": "#ff9f1c", "low": "#2ec4b6"}
+    sev_bg    = {"high": "#fff0f3", "medium": "#fff8ee", "low": "#f0fafa"}
+
+    def badge(sev):
+        col = sev_color.get(sev, "#888")
+        return (f'<span style="background:{col}20;color:{col};border-radius:4px;'
+                f'padding:2px 8px;font-size:11px;font-weight:600;text-transform:uppercase;">{sev}</span>')
+
+    extraction_rows = ""
+    for i, e in enumerate(extracted):
+        cats  = e.get("parameters", {})
+        total = sum(len(v) for v in cats.values() if isinstance(v, list))
+        extraction_rows += f"""
+        <tr>
+          <td><b>Paper {i+1}</b><br><span style="color:#888;font-size:12px;">{e.get('_filename','')}</span></td>
+          <td>{e.get('title','—')}</td>
+          <td>{e.get('authors','—')}</td>
+          <td>{e.get('year','—')}</td>
+          <td>{e.get('protocol_type','—')}</td>
+          <td style="color:#7b2d8b;font-weight:600;">{total}</td>
+        </tr>"""
+
+    contra_rows = ""
+    for c in contras:
+        sev  = c.get("severity", "low")
+        col  = sev_color.get(sev, "#888")
+        vals = c.get("values", {})
+        paper_cols = "".join(
+            f'<td style="font-family:monospace;font-size:12px;">{vals.get(f"paper_{i}","-")}</td>'
+            for i in range(len(paper_names))
+        )
+        contra_rows += f"""
+        <tr>
+          <td><b>{c.get('parameter','')}</b></td>
+          <td style="color:#888;font-size:12px;">{c.get('category','')}</td>
+          <td>{badge(sev)}</td>
+          {paper_cols}
+          <td style="font-size:12px;color:#444;line-height:1.5;">{c.get('explanation','')}</td>
+        </tr>"""
+
+    ranked_html = ""
+    for item in ranked:
+        sev = item.get("severity", "low")
+        col = sev_color.get(sev, "#888")
+        bg  = sev_bg.get(sev, "#fafafa")
+        ranked_html += f"""
+        <div style="display:flex;gap:14px;background:{bg};border:1px solid {col}30;
+                    border-radius:8px;padding:14px 16px;margin-bottom:8px;">
+          <div style="font-size:24px;font-weight:800;color:{col};min-width:34px;">#{item.get('rank','?')}</div>
+          <div>
+            <div style="font-size:14px;font-weight:600;">{item.get('parameter','')} {badge(sev)}</div>
+            <div style="font-size:12px;color:#555;margin-top:4px;line-height:1.5;">{item.get('brief','')}</div>
+          </div>
+        </div>"""
+
+    optimal_html = ""
+    for p in optimal.get("parameters", []):
+        optimal_html += f"""
+        <div style="border-left:3px solid #2ec4b6;padding-left:12px;margin-bottom:14px;">
+          <div style="font-size:11px;text-transform:uppercase;color:#aaa;">{p.get('label','')}</div>
+          <div style="font-size:14px;font-weight:600;color:#1a1a2e;margin:3px 0;">{p.get('value','')}</div>
+          <div style="font-size:12px;color:#666;line-height:1.5;">{p.get('reason','')}</div>
+        </div>"""
+
+    paper_th = "".join(
+        f'<th>Paper {i+1}<br><span style="font-weight:400;font-size:11px;">{n}</span></th>'
+        for i, n in enumerate(paper_names)
+    )
+
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Protocol Contradiction Report</title>
+  <style>
+    *{{box-sizing:border-box;margin:0;padding:0}}
+    body{{font-family:'Segoe UI',sans-serif;background:#f7f7fa;color:#1a1a2e;padding:40px 24px}}
+    .container{{max-width:1100px;margin:0 auto}}
+    .header{{background:#1a1a2e;color:white;border-radius:12px;padding:32px 36px;margin-bottom:28px}}
+    .header h1{{font-size:28px;font-weight:800;margin-bottom:6px}}
+    .header p{{color:#aab;font-size:13px}}
+    .section{{background:white;border-radius:12px;padding:24px 28px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.07)}}
+    .section-title{{font-size:16px;font-weight:700;border-left:4px solid #7b2d8b;padding-left:12px;margin-bottom:18px}}
+    .stats{{display:flex;gap:14px;flex-wrap:wrap}}
+    .stat{{border-radius:10px;padding:16px 22px;min-width:120px}}
+    table{{width:100%;border-collapse:collapse;font-size:13px}}
+    th{{background:#f5f0ff;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;text-align:left}}
+    td{{padding:10px 14px;border-bottom:1px solid #f0f0f5;vertical-align:top}}
+    tr:hover td{{background:#fafafa}}
+    .optimal-grid{{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}}
+    .footer{{text-align:center;font-size:12px;color:#aaa;margin-top:32px}}
+  </style>
+</head>
+<body><div class="container">
+  <div class="header">
+    <h1>Protocol Contradiction Report</h1>
+    <p>{len(paper_names)} papers compared &nbsp;|&nbsp; Protocol: {comparison.get('protocol_type','Unknown')}</p>
+  </div>
+  <div class="section">
+    <div class="section-title">Summary</div>
+    <div class="stats">
+      <div class="stat" style="background:#f5f0ff;border-left:4px solid #7b2d8b">
+        <div style="font-size:36px;font-weight:800;color:#7b2d8b">{summary.get('total_contradictions',0)}</div>
+        <div style="font-size:11px;color:#888;text-transform:uppercase">Total</div>
+      </div>
+      <div class="stat" style="background:#fff0f3;border-left:4px solid #ff4d6d">
+        <div style="font-size:36px;font-weight:800;color:#ff4d6d">{summary.get('high',0)}</div>
+        <div style="font-size:11px;color:#888;text-transform:uppercase">High</div>
+      </div>
+      <div class="stat" style="background:#fff8ee;border-left:4px solid #ff9f1c">
+        <div style="font-size:36px;font-weight:800;color:#ff9f1c">{summary.get('medium',0)}</div>
+        <div style="font-size:11px;color:#888;text-transform:uppercase">Medium</div>
+      </div>
+      <div class="stat" style="background:#f0fafa;border-left:4px solid #2ec4b6">
+        <div style="font-size:36px;font-weight:800;color:#2ec4b6">{summary.get('low',0)}</div>
+        <div style="font-size:11px;color:#888;text-transform:uppercase">Low</div>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <div class="section-title">Extracted Parameters</div>
+    <table><thead><tr><th>Paper</th><th>Title</th><th>Authors</th><th>Year</th><th>Protocol Type</th><th>Parameters</th></tr></thead>
+    <tbody>{extraction_rows}</tbody></table>
+  </div>
+  <div class="section">
+    <div class="section-title">Ranked by Severity</div>
+    {ranked_html}
+  </div>
+  <div class="section">
+    <div class="section-title">Side-by-side Comparison</div>
+    <div style="overflow-x:auto">
+      <table><thead><tr><th>Parameter</th><th>Category</th><th>Severity</th>{paper_th}<th>Impact on Reproducibility</th></tr></thead>
+      <tbody>{contra_rows}</tbody></table>
+    </div>
+  </div>
+  <div class="section">
+    <div class="section-title">Recommended Optimal Protocol</div>
+    <p style="font-size:13px;color:#444;line-height:1.6">{optimal.get('rationale','')}</p>
+    <div class="optimal-grid">{optimal_html}</div>
+  </div>
+  <div class="footer">Protocol Contradiction Detector &nbsp;·&nbsp; Powered by Groq + LLaMA 3.3 70B</div>
+</div></body></html>"""
+
+
+# ── API Routes ────────────────────────────────────────────────────────────────
+
+@app.get("/health")
+def health():
+    return {"status": "ok", "model": GROQ_MODEL}
+
+
+@app.post("/analyze")
+async def analyze(files: List[UploadFile] = File(...)):
+    if len(files) < 2:
+        raise HTTPException(status_code=400, detail="Please upload at least 2 PDF files.")
+
+    api_key = GROQ_API_KEY
+    if not api_key:
+        raise HTTPException(status_code=500, detail="GROQ_API_KEY not set in environment.")
+
+    client = Groq(api_key=api_key)
+
+    extracted   = []
+    paper_names = []
+    tmp_paths   = []
+
+    try:
+        # Save uploads to temp files
+        for f in files:
+            if not f.filename.lower().endswith(".pdf"):
+                raise HTTPException(status_code=400, detail=f"{f.filename} is not a PDF.")
+            tmp = tempfile.NamedTemporaryFile(delete=False, suffix=".pdf")
+            tmp.write(await f.read())
+            tmp.close()
+            tmp_paths.append(tmp.name)
+            paper_names.append(f.filename)
+
+        # Extract each paper
+        for path, name in zip(tmp_paths, paper_names):
+            result = extract_protocol(client, path, name)
+            extracted.append(result)
+
+        # Compare
+        comparison = compare_protocols(client, extracted, paper_names)
+
+        # Build HTML report
+        html_report = generate_html_report(extracted, comparison, paper_names)
+
+        return JSONResponse({
+            "extracted":   extracted,
+            "comparison":  comparison,
+            "html_report": html_report,
+            "paper_names": paper_names,
+        })
+
+    finally:
+        for p in tmp_paths:
+            try:
+                os.unlink(p)
+            except Exception:
+                pass

backend/requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.111.0
+uvicorn==0.30.1
+python-multipart==0.0.9
+groq==0.9.0
+pdfplumber==0.11.1
+pydantic==2.7.1

frontend/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Protocol Contradiction Detector</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      body { background: #f7f7fa; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "protocol-detector-frontend",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.1"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,399 @@
+import { useState, useRef, useCallback } from "react";
+
+const API_BASE = "/api";
+
+const SEV_COLOR = { high: "#ff4d6d", medium: "#ff9f1c", low: "#2ec4b6" };
+const SEV_BG    = { high: "#fff0f3", medium: "#fff8ee", low: "#f0fafa" };
+
+function Badge({ sev }) {
+  const col = SEV_COLOR[sev] || "#888";
+  return (
+    <span style={{
+      background: `${col}20`, color: col, borderRadius: 4,
+      padding: "2px 8px", fontSize: 11, fontWeight: 600,
+      textTransform: "uppercase", marginLeft: 6,
+    }}>{sev}</span>
+  );
+}
+
+function StatCard({ value, label, color, bg }) {
+  return (
+    <div style={{
+      background: bg, borderLeft: `4px solid ${color}`,
+      borderRadius: 10, padding: "16px 22px", minWidth: 110,
+    }}>
+      <div style={{ fontSize: 36, fontWeight: 800, color }}>{value}</div>
+      <div style={{ fontSize: 11, color: "#888", textTransform: "uppercase", letterSpacing: ".06em" }}>{label}</div>
+    </div>
+  );
+}
+
+export default function App() {
+  const [files, setFiles]         = useState([]);
+  const [dragging, setDragging]   = useState(false);
+  const [loading, setLoading]     = useState(false);
+  const [progress, setProgress]   = useState(0);
+  const [statusMsg, setStatusMsg] = useState("");
+  const [results, setResults]     = useState(null);
+  const [error, setError]         = useState(null);
+  const [activeTab, setActiveTab] = useState("ranked");
+  const fileRef = useRef();
+
+  const addFiles = useCallback((incoming) => {
+    const pdfs = Array.from(incoming).filter(f => f.type === "application/pdf");
+    if (pdfs.length < incoming.length) {
+      setError("Only PDF files are supported.");
+    }
+    setFiles(prev => {
+      const existing = new Set(prev.map(f => f.name));
+      return [...prev, ...pdfs.filter(f => !existing.has(f.name))];
+    });
+  }, []);
+
+  const removeFile = (name) => setFiles(f => f.filter(x => x.name !== name));
+
+  const reset = () => {
+    setFiles([]); setResults(null); setError(null);
+    setProgress(0); setStatusMsg(""); setActiveTab("ranked");
+  };
+
+  const analyze = async () => {
+    if (files.length < 2) { setError("Please upload at least 2 PDF files."); return; }
+    setError(null); setLoading(true); setProgress(10); setResults(null);
+
+    // Fake progress while waiting
+    const ticker = setInterval(() => {
+      setProgress(p => p < 85 ? p + 3 : p);
+    }, 1200);
+
+    const msgs = [
+      "Extracting text from PDFs...",
+      "Sending to Groq for protocol extraction...",
+      "Comparing protocols across papers...",
+      "Generating contradiction report...",
+    ];
+    let mi = 0;
+    setStatusMsg(msgs[mi]);
+    const msgTicker = setInterval(() => {
+      mi = Math.min(mi + 1, msgs.length - 1);
+      setStatusMsg(msgs[mi]);
+    }, 6000);
+
+    try {
+      const form = new FormData();
+      files.forEach(f => form.append("files", f));
+
+      const resp = await fetch(`${API_BASE}/analyze`, { method: "POST", body: form });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}));
+        throw new Error(err.detail || `Server error ${resp.status}`);
+      }
+      const data = await resp.json();
+      setProgress(100);
+      setStatusMsg("Analysis complete!");
+      setResults(data);
+      setActiveTab("ranked");
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      clearInterval(ticker);
+      clearInterval(msgTicker);
+      setLoading(false);
+    }
+  };
+
+  const downloadReport = () => {
+    if (!results?.html_report) return;
+    const blob = new Blob([results.html_report], { type: "text/html" });
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement("a");
+    a.href     = url;
+    a.download = "protocol_report.html";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const comp        = results?.comparison || {};
+  const summary     = comp.summary || {};
+  const contras     = comp.contradictions || [];
+  const ranked      = comp.ranked_issues || [];
+  const optimal     = comp.optimal_protocol || {};
+  const paperNames  = results?.paper_names || [];
+  const extracted   = results?.extracted || [];
+
+  return (
+    <div style={{ fontFamily: "'Segoe UI', sans-serif", background: "#f7f7fa", minHeight: "100vh", padding: "40px 24px" }}>
+      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
+
+        {/* ── Header ── */}
+        <div style={{ background: "#1a1a2e", borderRadius: 12, padding: "32px 36px", marginBottom: 28, color: "white" }}>
+          <div style={{ fontSize: 11, letterSpacing: ".15em", textTransform: "uppercase", color: "#a78bfa", marginBottom: 8 }}>
+            Bioengineering · Reproducibility · GenAI
+          </div>
+          <h1 style={{ fontSize: 28, fontWeight: 800, margin: "0 0 8px" }}>Protocol Contradiction Detector</h1>
+          <p style={{ color: "#aab", fontSize: 13, lineHeight: 1.6, maxWidth: 620 }}>
+            Upload 2 or more research papers and detect methodological contradictions across experimental protocols —
+            reagents, temperatures, cell lines, antibodies, timing and more.
+            Powered by <b style={{ color: "#a78bfa" }}>Groq + LLaMA 3.3 70B</b>.
+          </p>
+        </div>
+
+        {/* ── Upload section ── */}
+        {!results && (
+          <div style={{ background: "white", borderRadius: 12, padding: "24px 28px", marginBottom: 20, boxShadow: "0 1px 4px rgba(0,0,0,.07)" }}>
+            <div style={{ fontSize: 16, fontWeight: 700, borderLeft: "4px solid #7b2d8b", paddingLeft: 12, marginBottom: 18 }}>
+              Upload Research Papers
+            </div>
+
+            {/* Drop zone */}
+            <div
+              onClick={() => fileRef.current?.click()}
+              onDragOver={e => { e.preventDefault(); setDragging(true); }}
+              onDragLeave={() => setDragging(false)}
+              onDrop={e => { e.preventDefault(); setDragging(false); addFiles(e.dataTransfer.files); }}
+              style={{
+                border: `2px dashed ${dragging ? "#7b2d8b" : "#ddd"}`,
+                borderRadius: 10, padding: "36px 24px", textAlign: "center",
+                cursor: "pointer", background: dragging ? "#f5f0ff" : "#fafafa",
+                transition: "all .2s", marginBottom: 16,
+              }}
+            >
+              <input ref={fileRef} type="file" multiple accept=".pdf"
+                style={{ display: "none" }} onChange={e => addFiles(e.target.files)} />
+              <div style={{ fontSize: 32, marginBottom: 10 }}>📄</div>
+              <div style={{ fontWeight: 600, color: "#1a1a2e", marginBottom: 4 }}>
+                Drag and drop PDFs here
+              </div>
+              <div style={{ fontSize: 12, color: "#aaa" }}>or click to browse · multiple files supported</div>
+            </div>
+
+            {/* File list */}
+            {files.length > 0 && (
+              <div style={{ marginBottom: 20 }}>
+                {files.map(f => (
+                  <div key={f.name} style={{
+                    display: "flex", alignItems: "center", gap: 12,
+                    background: "#f5f0ff", borderRadius: 6, padding: "8px 14px", marginBottom: 6,
+                  }}>
+                    <span style={{ fontSize: 16 }}>📄</span>
+                    <span style={{ flex: 1, fontSize: 13, color: "#1a1a2e" }}>{f.name}</span>
+                    <span style={{ fontSize: 11, color: "#aaa" }}>{(f.size / 1024).toFixed(0)} KB</span>
+                    <button onClick={() => removeFile(f.name)}
+                      style={{ background: "none", border: "none", cursor: "pointer", color: "#aaa", fontSize: 18, lineHeight: 1 }}>×</button>
+                  </div>
+                ))}
+                <div style={{ fontSize: 12, color: "#aaa", marginTop: 4 }}>{files.length} file(s) ready</div>
+              </div>
+            )}
+
+            {/* Error */}
+            {error && (
+              <div style={{ background: "#fff0f3", border: "1px solid #ff4d6d40", borderRadius: 8, padding: "12px 16px", color: "#ff4d6d", fontSize: 13, marginBottom: 16 }}>
+                ⚠ {error}
+              </div>
+            )}
+
+            {/* Progress */}
+            {loading && (
+              <div style={{ marginBottom: 20 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#888", marginBottom: 6 }}>
+                  <span>{statusMsg}</span>
+                  <span>{progress}%</span>
+                </div>
+                <div style={{ height: 6, background: "#eee", borderRadius: 3, overflow: "hidden" }}>
+                  <div style={{
+                    height: "100%", borderRadius: 3,
+                    background: "linear-gradient(90deg,#7b2d8b,#2ec4b6)",
+                    width: `${progress}%`, transition: "width .4s ease",
+                  }} />
+                </div>
+              </div>
+            )}
+
+            {/* Analyze button */}
+            <button
+              onClick={analyze}
+              disabled={loading || files.length < 2}
+              style={{
+                padding: "13px 32px", background: files.length >= 2 && !loading ? "#7b2d8b" : "#ddd",
+                color: files.length >= 2 && !loading ? "white" : "#aaa",
+                border: "none", borderRadius: 8, fontWeight: 700, fontSize: 14,
+                cursor: files.length >= 2 && !loading ? "pointer" : "not-allowed",
+                transition: "all .2s",
+              }}
+            >
+              {loading ? "Analyzing..." : `Detect Contradictions →`}
+            </button>
+            {files.length < 2 && !loading && (
+              <span style={{ marginLeft: 14, fontSize: 12, color: "#aaa" }}>
+                Add {2 - files.length} more paper{files.length === 1 ? "" : "s"} to start
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* ── Results ── */}
+        {results && (
+          <>
+            {/* Results header */}
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20, flexWrap: "wrap", gap: 12 }}>
+              <div>
+                <div style={{ fontSize: 22, fontWeight: 800, color: "#1a1a2e" }}>Analysis Results</div>
+                <div style={{ fontSize: 13, color: "#888", marginTop: 3 }}>
+                  {paperNames.length} papers · {comp.protocol_type || "Protocol"}
+                </div>
+              </div>
+              <div style={{ display: "flex", gap: 10 }}>
+                <button onClick={downloadReport} style={{
+                  padding: "10px 20px", background: "#2ec4b6", color: "white",
+                  border: "none", borderRadius: 8, fontWeight: 600, fontSize: 13, cursor: "pointer",
+                }}>⬇ Download Report</button>
+                <button onClick={reset} style={{
+                  padding: "10px 20px", background: "white", color: "#1a1a2e",
+                  border: "1px solid #ddd", borderRadius: 8, fontWeight: 600, fontSize: 13, cursor: "pointer",
+                }}>← New Analysis</button>
+              </div>
+            </div>
+
+            {/* Summary stats */}
+            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 20 }}>
+              <StatCard value={summary.total_contradictions ?? 0} label="Total"  color="#7b2d8b" bg="#f5f0ff" />
+              <StatCard value={summary.high   ?? 0}              label="High"   color="#ff4d6d" bg="#fff0f3" />
+              <StatCard value={summary.medium ?? 0}              label="Medium" color="#ff9f1c" bg="#fff8ee" />
+              <StatCard value={summary.low    ?? 0}              label="Low"    color="#2ec4b6" bg="#f0fafa" />
+            </div>
+
+            {/* Tab nav */}
+            <div style={{ display: "flex", gap: 0, borderBottom: "1px solid #eee", marginBottom: 20 }}>
+              {[
+                { id: "ranked",     label: "Ranked Issues" },
+                { id: "table",      label: "Comparison Table" },
+                { id: "optimal",    label: "Optimal Protocol" },
+                { id: "extraction", label: "Extraction Summary" },
+              ].map(t => (
+                <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
+                  padding: "10px 20px", background: "none", border: "none",
+                  borderBottom: activeTab === t.id ? "2px solid #7b2d8b" : "2px solid transparent",
+                  color: activeTab === t.id ? "#7b2d8b" : "#888",
+                  fontWeight: activeTab === t.id ? 600 : 400,
+                  fontSize: 13, cursor: "pointer", marginBottom: -1,
+                }}>{t.label}</button>
+              ))}
+            </div>
+
+            {/* Tab: Ranked */}
+            {activeTab === "ranked" && (
+              <div style={{ background: "white", borderRadius: 12, padding: "24px 28px", boxShadow: "0 1px 4px rgba(0,0,0,.07)" }}>
+                {ranked.length === 0
+                  ? <p style={{ color: "#aaa" }}>No ranked issues found.</p>
+                  : ranked.map((item, i) => {
+                    const sev = item.severity || "low";
+                    const col = SEV_COLOR[sev] || "#888";
+                    const bg  = SEV_BG[sev] || "#fafafa";
+                    return (
+                      <div key={i} style={{
+                        display: "flex", gap: 14, background: bg,
+                        border: `1px solid ${col}30`, borderRadius: 8,
+                        padding: "14px 16px", marginBottom: 10,
+                      }}>
+                        <div style={{ fontSize: 24, fontWeight: 800, color: col, minWidth: 34 }}>#{item.rank}</div>
+                        <div>
+                          <div style={{ fontSize: 14, fontWeight: 600, color: "#1a1a2e" }}>
+                            {item.parameter}<Badge sev={sev} />
+                          </div>
+                          <div style={{ fontSize: 12, color: "#555", marginTop: 4, lineHeight: 1.5 }}>{item.brief}</div>
+                        </div>
+                      </div>
+                    );
+                  })
+                }
+              </div>
+            )}
+
+            {/* Tab: Comparison Table */}
+            {activeTab === "table" && (
+              <div style={{ background: "white", borderRadius: 12, padding: "24px 28px", boxShadow: "0 1px 4px rgba(0,0,0,.07)", overflowX: "auto" }}>
+                {contras.length === 0
+                  ? <p style={{ color: "#aaa" }}>No contradictions found.</p>
+                  : (
+                    <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
+                      <thead>
+                        <tr>
+                          {["Parameter", "Category", "Severity",
+                            ...paperNames.map((n, i) => `Paper ${i + 1}`),
+                            "Impact on Reproducibility"
+                          ].map(h => (
+                            <th key={h} style={{
+                              background: "#f5f0ff", fontSize: 11, textTransform: "uppercase",
+                              letterSpacing: ".06em", padding: "10px 14px", textAlign: "left",
+                            }}>{h}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {contras.map((c, i) => {
+                          const sev = c.severity || "low";
+                          const col = SEV_COLOR[sev] || "#888";
+                          return (
+                            <tr key={i}>
+                              <td style={{ padding: "10px 14px", borderBottom: "1px solid #f0f0f5", fontWeight: 600 }}>{c.parameter}</td>
+                              <td style={{ padding: "10px 14px", borderBottom: "1px solid #f0f0f5", color: "#888", fontSize: 12 }}>{c.category}</td>
+                              <td style={{ padding: "10px 14px", borderBottom: "1px solid #f0f0f5" }}><Badge sev={sev} /></td>
+                              {paperNames.map((_, j) => (
+                                <td key={j} style={{ padding: "10px 14px", borderBottom: "1px solid #f0f0f5", fontFamily: "monospace", fontSize: 12 }}>
+                                  {c.values?.[`paper_${j}`] || "—"}
+                                </td>
+                              ))}
+                              <td style={{ padding: "10px 14px", borderBottom: "1px solid #f0f0f5", fontSize: 12, color: "#444", lineHeight: 1.5, maxWidth: 260 }}>{c.explanation}</td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  )
+                }
+              </div>
+            )}
+
+            {/* Tab: Optimal Protocol */}
+            {activeTab === "optimal" && (
+              <div style={{ background: "white", borderRadius: 12, padding: "24px 28px", boxShadow: "0 1px 4px rgba(0,0,0,.07)" }}>
+                <p style={{ fontSize: 13, color: "#444", lineHeight: 1.6, marginBottom: 20 }}>{optimal.rationale}</p>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))", gap: 14 }}>
+                  {(optimal.parameters || []).map((p, i) => (
+                    <div key={i} style={{ borderLeft: "3px solid #2ec4b6", paddingLeft: 12 }}>
+                      <div style={{ fontSize: 11, textTransform: "uppercase", color: "#aaa", letterSpacing: ".08em" }}>{p.label}</div>
+                      <div style={{ fontSize: 14, fontWeight: 600, color: "#1a1a2e", margin: "3px 0" }}>{p.value}</div>
+                      <div style={{ fontSize: 12, color: "#666", lineHeight: 1.5 }}>{p.reason}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Tab: Extraction Summary */}
+            {activeTab === "extraction" && (
+              <div style={{ background: "white", borderRadius: 12, padding: "24px 28px", boxShadow: "0 1px 4px rgba(0,0,0,.07)" }}>
+                {extracted.map((e, i) => {
+                  const cats  = e.parameters || {};
+                  const total = Object.values(cats).reduce((s, v) => s + (Array.isArray(v) ? v.length : 0), 0);
+                  return (
+                    <div key={i} style={{ background: "#fafafa", border: "1px solid #eee", borderRadius: 8, padding: "14px 16px", marginBottom: 12 }}>
+                      <div style={{ fontWeight: 600, color: "#1a1a2e", marginBottom: 4 }}>Paper {i + 1}: {e.title || e._filename}</div>
+                      <div style={{ fontSize: 12, color: "#888", marginBottom: 6 }}>
+                        {e.authors} &nbsp;|&nbsp; {e.year} &nbsp;|&nbsp; {e.protocol_type}
+                      </div>
+                      <div style={{ fontSize: 12, color: "#7b2d8b", fontWeight: 600 }}>
+                        {total} parameters extracted across {Object.keys(cats).length} categories
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

frontend/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:7860",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+});