Upload 2 files

app.py

@@ -0,0 +1,710 @@
+"""
+PII Reveal - Document Privacy Explorer
+=======================================
+A Gradio Server app powered by OpenAI Privacy Filter (Apache 2.0)
+for detecting and visualizing PII in PDF/DOC/DOCX documents.
+
+- Backend: gr.Server (Gradio + FastAPI)
+- Frontend: Custom HTML/CSS/JS
+- Model: openai/openai-privacy-filter (1.5B params, 50M active, 128k context)
+"""
+
+import os
+import re
+import json
+import tempfile
+from pathlib import Path
+
+import torch
+import gradio as gr
+from fastapi import UploadFile, File
+from fastapi.responses import HTMLResponse, JSONResponse
+
+# ── Configuration ────────────────────────────────────────────────
+MODEL_ID = os.getenv("MODEL_ID", "openai/openai-privacy-filter")
+
+CATEGORIES = {
+    "private_person":  {"color": "#ef4444", "bg": "rgba(239,68,68,0.15)",  "label": "Person"},
+    "private_address": {"color": "#06b6d4", "bg": "rgba(6,182,212,0.15)",  "label": "Address"},
+    "private_email":   {"color": "#3b82f6", "bg": "rgba(59,130,246,0.15)", "label": "Email"},
+    "private_phone":   {"color": "#22c55e", "bg": "rgba(34,197,94,0.15)",  "label": "Phone"},
+    "private_url":     {"color": "#eab308", "bg": "rgba(234,179,8,0.15)",  "label": "URL"},
+    "private_date":    {"color": "#a855f7", "bg": "rgba(168,85,247,0.15)", "label": "Date"},
+    "account_number":  {"color": "#f97316", "bg": "rgba(249,115,22,0.15)", "label": "Account"},
+    "secret":          {"color": "#dc2626", "bg": "rgba(220,38,38,0.15)",  "label": "Secret"},
+}
+
+# ── Model Loading ────────────────────────────────────────────────
+print(f"[PII Reveal] Loading model: {MODEL_ID}")
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+from transformers import AutoTokenizer, AutoModelForTokenClassification  # noqa: E402
+
+tokenizer = AutoTokenizer.from_pretrained(MODEL_ID, trust_remote_code=True)
+model = AutoModelForTokenClassification.from_pretrained(
+    MODEL_ID, trust_remote_code=True, torch_dtype=torch.float16 if device.type == "cuda" else torch.float32
+)
+model.eval().to(device)
+
+id2label = model.config.id2label
+print(f"[PII Reveal] Model loaded on {device} | Labels: {len(id2label)}")
+
+
+# ── Text Extraction ──────────────────────────────────────────────
+def extract_text(file_path: str) -> str:
+    suffix = Path(file_path).suffix.lower()
+    if suffix == ".pdf":
+        import fitz
+        doc = fitz.open(file_path)
+        pages = [page.get_text() for page in doc]
+        doc.close()
+        return "\n\n".join(pages)
+    elif suffix in (".docx", ".doc"):
+        from docx import Document
+        doc = Document(file_path)
+        return "\n\n".join(p.text for p in doc.paragraphs if p.text.strip())
+    raise ValueError(f"Unsupported file type: {suffix}")
+
+
+# ── PII Detection ────────────────────────────────────────────────
+def detect_pii(text: str) -> list[dict]:
+    """Run Privacy Filter on text, return list of {label, start, end, text}."""
+    encodings = tokenizer(
+        text,
+        return_tensors="pt",
+        return_offsets_mapping=True,
+        truncation=True,
+        max_length=128000,
+    )
+    offset_mapping = encodings.pop("offset_mapping")[0].tolist()
+    inputs = {k: v.to(device) for k, v in encodings.items()}
+
+    with torch.no_grad():
+        logits = model(**inputs).logits
+
+    preds = torch.argmax(logits, dim=-1)[0].tolist()
+
+    spans, current = [], None
+    for i, pred_id in enumerate(preds):
+        label = id2label.get(pred_id, "O")
+        char_start, char_end = offset_mapping[i]
+
+        if char_start == char_end or label == "O" or "-" not in label:
+            if current:
+                spans.append(current)
+                current = None
+            continue
+
+        tag, category = label.split("-", 1)
+
+        if tag == "S":
+            if current:
+                spans.append(current)
+            spans.append({"label": category, "start": char_start, "end": char_end,
+                          "text": text[char_start:char_end]})
+            current = None
+        elif tag == "B":
+            if current:
+                spans.append(current)
+            current = {"label": category, "start": char_start, "end": char_end,
+                       "text": text[char_start:char_end]}
+        elif tag == "I" and current and current["label"] == category:
+            current["end"] = char_end
+            current["text"] = text[current["start"]:char_end]
+        elif tag == "E" and current and current["label"] == category:
+            current["end"] = char_end
+            current["text"] = text[current["start"]:char_end]
+            spans.append(current)
+            current = None
+        else:
+            if current:
+                spans.append(current)
+                current = None
+
+    if current:
+        spans.append(current)
+    return spans
+
+
+# ── Statistics ───────────────────────────────────────────────────
+def compute_stats(text: str, spans: list[dict]) -> dict:
+    total = len(text)
+    pii_chars = sum(s["end"] - s["start"] for s in spans)
+    by_cat: dict[str, dict] = {}
+    for s in spans:
+        c = s["label"]
+        by_cat.setdefault(c, {"count": 0, "chars": 0})
+        by_cat[c]["count"] += 1
+        by_cat[c]["chars"] += s["end"] - s["start"]
+    return {
+        "total_chars": total,
+        "pii_chars": pii_chars,
+        "pii_percentage": round(pii_chars / total * 100, 1) if total else 0,
+        "total_spans": len(spans),
+        "categories": by_cat,
+        "num_categories": len(by_cat),
+    }
+
+
+def detect_speakers(text: str, spans: list[dict]) -> dict:
+    """Simple speaker detection for transcripts."""
+    patterns = [
+        r"^([A-Z][a-zA-Z ]{1,30}):\s",
+        r"^\[([^\]]{1,30})\]\s",
+        r"^(Speaker\s*\d+):\s",
+    ]
+    line_speakers = []
+    pos, cur_speaker = 0, None
+    for line in text.split("\n"):
+        for pat in patterns:
+            m = re.match(pat, line)
+            if m:
+                cur_speaker = m.group(1).strip()
+                break
+        line_speakers.append((pos, pos + len(line), cur_speaker))
+        pos += len(line) + 1
+
+    result: dict[str, int] = {}
+    for span in spans:
+        mid = (span["start"] + span["end"]) // 2
+        speaker = "Document"
+        for ls, le, sp in line_speakers:
+            if ls <= mid <= le and sp:
+                speaker = sp
+                break
+        result[speaker] = result.get(speaker, 0) + 1
+
+    if len(result) <= 1 and "Document" in result:
+        return {}
+    return result
+
+
+# ── Gradio Server ────────────────────────────────────────────────
+app = gr.Server()
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    return FRONTEND_HTML
+
+
+@app.post("/api/analyze")
+async def analyze_document(file: UploadFile = File(...)):
+    suffix = Path(file.filename).suffix.lower()
+    if suffix not in (".pdf", ".doc", ".docx"):
+        return JSONResponse({"error": f"Unsupported: {suffix}. Use PDF, DOC, or DOCX."}, 400)
+
+    with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as tmp:
+        tmp.write(await file.read())
+        tmp_path = tmp.name
+
+    try:
+        text = extract_text(tmp_path)
+        if not text.strip():
+            return JSONResponse({"error": "No text content found."}, 400)
+        spans = detect_pii(text)
+        stats = compute_stats(text, spans)
+        speakers = detect_speakers(text, spans)
+        return JSONResponse({
+            "filename": file.filename,
+            "text": text,
+            "spans": spans,
+            "stats": stats,
+            "speakers": speakers,
+            "categories_meta": {k: {"color": v["color"], "bg": v["bg"], "label": v["label"]}
+                                for k, v in CATEGORIES.items()},
+        })
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, 500)
+    finally:
+        if os.path.exists(tmp_path):
+            os.unlink(tmp_path)
+
+
+@app.api(name="analyze_text")
+def analyze_text_api(text: str) -> str:
+    """Gradio API: analyze raw text for PII (for programmatic access)."""
+    spans = detect_pii(text)
+    stats = compute_stats(text, spans)
+    return json.dumps({"spans": spans, "stats": stats}, ensure_ascii=False)
+
+
+# ── Frontend ─────────────────────────────────────────────────────
+FRONTEND_HTML = r"""<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>PII Reveal - Document Privacy Explorer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#f0f2f5;--surface:#fff;--surface2:#f8f9fb;--border:#e2e5ea;
+  --text:#1a1d23;--text2:#6b7280;--text3:#9ca3af;
+  --primary:#6366f1;--primary-light:#e0e7ff;
+  --radius:12px;--radius-sm:8px;--shadow:0 1px 3px rgba(0,0,0,.08);
+  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
+  --person:#ef4444;--address:#06b6d4;--email:#3b82f6;--phone:#22c55e;
+  --url:#eab308;--date:#a855f7;--account:#f97316;--secret:#dc2626;
+}
+body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
+a{color:var(--primary)}
+
+/* ─ Upload View ─ */
+#upload-view{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
+.upload-card{background:var(--surface);border-radius:20px;padding:3rem;max-width:640px;width:100%;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
+.upload-card::before{content:'';position:absolute;inset:-2px;border-radius:22px;background:linear-gradient(135deg,var(--primary),#ec4899,var(--primary));z-index:-1;opacity:0;transition:opacity .3s}
+.upload-card:hover::before{opacity:1}
+.upload-card::after{content:'';position:absolute;inset:0;border-radius:20px;background:var(--surface);z-index:-1}
+.brand{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.5rem}
+.brand h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,var(--primary),#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.brand-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--primary),#ec4899);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem}
+.subtitle{color:var(--text2);margin-bottom:2rem;font-size:1.05rem}
+.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:3rem 2rem;cursor:pointer;transition:all .2s;position:relative}
+.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:var(--primary-light)}
+.dropzone-icon{font-size:3rem;margin-bottom:1rem}
+.dropzone-text{font-weight:600;font-size:1.1rem;margin-bottom:.25rem}
+.dropzone-hint{color:var(--text3);font-size:.875rem}
+.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}
+.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;text-align:left}
+.feature{background:var(--surface2);padding:1rem;border-radius:var(--radius-sm)}
+.feature-title{font-weight:600;font-size:.8rem;margin-bottom:.25rem}
+.feature-desc{color:var(--text2);font-size:.75rem;line-height:1.4}
+.powered-by{margin-top:1.5rem;font-size:.8rem;color:var(--text3)}
+
+/* ─ Results View ─ */
+#results-view{display:none;min-height:100vh}
+.top-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
+.top-bar .brand{margin:0}
+.top-bar .brand h1{font-size:1.25rem}
+.top-bar .brand-icon{width:32px;height:32px;font-size:1rem}
+.file-info{font-size:.85rem;color:var(--text2);margin-left:.5rem;flex:1}
+.btn{padding:.5rem 1rem;border-radius:var(--radius-sm);border:none;cursor:pointer;font-weight:600;font-size:.85rem;transition:all .15s}
+.btn-primary{background:var(--primary);color:#fff}
+.btn-primary:hover{background:#4f46e5}
+.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
+.btn-ghost:hover{background:var(--surface2)}
+
+/* ─ Summary Strip ─ */
+.summary-strip{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
+.stat-big{text-align:center;min-width:80px}
+.stat-big .num{font-size:1.75rem;font-weight:800;color:var(--primary)}
+.stat-big .lbl{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
+.stat-divider{width:1px;height:40px;background:var(--border)}
+.stat-bar{flex:1;min-width:200px}
+.stat-bar-track{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;display:flex;margin-bottom:.5rem}
+.stat-bar-fill{height:100%;transition:width .6s ease}
+.category-chips{display:flex;flex-wrap:wrap;gap:.35rem}
+.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:600;border:1.5px solid}
+
+/* ─ Main Layout ─ */
+.main-layout{display:flex;height:calc(100vh - 130px)}
+.doc-panel{flex:1;overflow-y:auto;padding:2rem;background:var(--bg)}
+.doc-content{background:var(--surface);border-radius:var(--radius);padding:2rem 2.5rem;max-width:900px;margin:0 auto;box-shadow:var(--shadow);font-size:.95rem;line-height:1.8;white-space:pre-wrap;word-wrap:break-word}
+
+/* ─ PII Highlights ─ */
+.pii{border-radius:3px;padding:1px 2px;cursor:pointer;transition:all .15s;position:relative;border-bottom:2px solid}
+.pii:hover{filter:brightness(.92)}
+.pii.dimmed{opacity:.15;border-bottom-color:transparent!important}
+.pii-private_person{background:rgba(239,68,68,.15);border-bottom-color:var(--person);color:#991b1b}
+.pii-private_address{background:rgba(6,182,212,.15);border-bottom-color:var(--address);color:#155e75}
+.pii-private_email{background:rgba(59,130,246,.15);border-bottom-color:var(--email);color:#1e40af}
+.pii-private_phone{background:rgba(34,197,94,.15);border-bottom-color:var(--phone);color:#166534}
+.pii-private_url{background:rgba(234,179,8,.15);border-bottom-color:var(--url);color:#854d0e}
+.pii-private_date{background:rgba(168,85,247,.15);border-bottom-color:var(--date);color:#6b21a8}
+.pii-account_number{background:rgba(249,115,22,.15);border-bottom-color:var(--account);color:#9a3412}
+.pii-secret{background:rgba(220,38,38,.15);border-bottom-color:var(--secret);color:#991b1b}
+
+/* ─ Tooltip ─ */
+.pii-tooltip{position:fixed;background:#1e293b;color:#fff;padding:.4rem .7rem;border-radius:6px;font-size:.75rem;font-weight:500;pointer-events:none;z-index:999;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2)}
+
+/* ─ Sidebar ─ */
+.sidebar{width:300px;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:1.25rem;flex-shrink:0}
+.sidebar h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);margin-bottom:.75rem;font-weight:700}
+.filter-group{margin-bottom:1.5rem}
+.filter-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;user-select:none}
+.filter-item:hover{background:var(--surface2)}
+.filter-item input{display:none}
+.filter-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
+.filter-item input:checked~.filter-check{border-color:currentColor;background:currentColor}
+.filter-item input:checked~.filter-check::after{content:'';display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
+.filter-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+.filter-label{flex:1;font-size:.85rem;font-weight:500}
+.filter-count{font-size:.75rem;color:var(--text3);font-weight:600;background:var(--surface2);padding:.1rem .45rem;border-radius:10px}
+
+/* ─ Loading ─ */
+#loading{position:fixed;inset:0;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
+.spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+#loading p{margin-top:1rem;font-weight:600;color:var(--text2)}
+.progress-text{font-size:.85rem;color:var(--text3);margin-top:.5rem}
+
+/* ─ Error ─ */
+.error-banner{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:1rem 1.5rem;border-radius:var(--radius-sm);margin:1rem;font-size:.9rem;display:none;align-items:center;gap:.5rem}
+
+/* ─ Responsive ─ */
+@media(max-width:768px){
+  .main-layout{flex-direction:column-reverse;height:auto}
+  .sidebar{width:100%;border-left:none;border-top:1px solid var(--border)}
+  .features{grid-template-columns:1fr}
+  .summary-strip{flex-direction:column;align-items:stretch}
+  .stat-divider{width:100%;height:1px}
+}
+</style>
+</head>
+<body>
+
+<!-- ─── Upload View ─── -->
+<div id="upload-view">
+  <div class="upload-card">
+    <div class="brand">
+      <div class="brand-icon">&#x1f50d;</div>
+      <h1>PII Reveal</h1>
+    </div>
+    <p class="subtitle">Document Privacy Explorer</p>
+    <div class="dropzone" id="dropzone">
+      <div class="dropzone-icon">&#x1f4c4;</div>
+      <div class="dropzone-text">Drop your document here</div>
+      <div class="dropzone-hint">PDF, DOC, or DOCX &middot; Up to 128k tokens</div>
+      <input type="file" id="file-input" accept=".pdf,.doc,.docx">
+    </div>
+    <div class="features">
+      <div class="feature">
+        <div class="feature-title">8 PII Categories</div>
+        <div class="feature-desc">Names, addresses, emails, phones, URLs, dates, accounts, secrets</div>
+      </div>
+      <div class="feature">
+        <div class="feature-title">128k Context</div>
+        <div class="feature-desc">Full documents in one pass &mdash; no chunking artifacts</div>
+      </div>
+      <div class="feature">
+        <div class="feature-title">Context-Aware</div>
+        <div class="feature-desc">Understands when "May" is a name vs. a month</div>
+      </div>
+    </div>
+    <div class="powered-by">Powered by <strong>OpenAI Privacy Filter</strong> &middot; Apache 2.0</div>
+  </div>
+</div>
+
+<!-- ─── Results View ─── -->
+<div id="results-view">
+  <div class="top-bar">
+    <div class="brand">
+      <div class="brand-icon">&#x1f50d;</div>
+      <h1>PII Reveal</h1>
+    </div>
+    <div class="file-info" id="file-info"></div>
+    <button class="btn btn-ghost" onclick="resetView()">New File</button>
+  </div>
+
+  <div class="error-banner" id="error-banner"></div>
+
+  <div class="summary-strip" id="summary-strip">
+    <div class="stat-big"><div class="num" id="stat-pct">0%</div><div class="lbl">PII Content</div></div>
+    <div class="stat-divider"></div>
+    <div class="stat-big"><div class="num" id="stat-spans">0</div><div class="lbl">PII Spans</div></div>
+    <div class="stat-divider"></div>
+    <div class="stat-big"><div class="num" id="stat-cats">0</div><div class="lbl">Categories</div></div>
+    <div class="stat-divider"></div>
+    <div class="stat-bar">
+      <div class="stat-bar-track" id="stat-bar-track"></div>
+      <div class="category-chips" id="category-chips"></div>
+    </div>
+  </div>
+
+  <div class="main-layout">
+    <div class="doc-panel">
+      <div class="doc-content" id="doc-content"></div>
+    </div>
+    <div class="sidebar">
+      <div class="filter-group">
+        <h3>PII Categories</h3>
+        <div id="category-filters"></div>
+      </div>
+      <div class="filter-group" id="speaker-group" style="display:none">
+        <h3>Speakers</h3>
+        <div id="speaker-filters"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ─── Loading Overlay ─── -->
+<div id="loading">
+  <div class="spinner"></div>
+  <p>Analyzing document for PII&hellip;</p>
+  <div class="progress-text">Running OpenAI Privacy Filter (128k context)</div>
+</div>
+
+<!-- ─── Tooltip ─── -->
+<div class="pii-tooltip" id="tooltip" style="display:none"></div>
+
+<script>
+// ── State ──
+let STATE = { text: '', spans: [], stats: {}, speakers: {}, activeCategories: new Set(), activeSpeakers: new Set(), categoriesMeta: {} };
+
+const CATEGORY_LABELS = {
+  private_person: 'Person', private_address: 'Address', private_email: 'Email',
+  private_phone: 'Phone', private_url: 'URL', private_date: 'Date',
+  account_number: 'Account', secret: 'Secret'
+};
+const CATEGORY_COLORS = {
+  private_person:'#ef4444', private_address:'#06b6d4', private_email:'#3b82f6',
+  private_phone:'#22c55e', private_url:'#eab308', private_date:'#a855f7',
+  account_number:'#f97316', secret:'#dc2626'
+};
+
+// ── Upload Handling ──
+const dropzone = document.getElementById('dropzone');
+const fileInput = document.getElementById('file-input');
+
+['dragenter','dragover'].forEach(e => dropzone.addEventListener(e, ev => { ev.preventDefault(); dropzone.classList.add('dragover'); }));
+['dragleave','drop'].forEach(e => dropzone.addEventListener(e, ev => { ev.preventDefault(); dropzone.classList.remove('dragover'); }));
+
+dropzone.addEventListener('drop', ev => {
+  const file = ev.dataTransfer.files[0];
+  if (file) uploadFile(file);
+});
+fileInput.addEventListener('change', ev => {
+  const file = ev.target.files[0];
+  if (file) uploadFile(file);
+});
+
+async function uploadFile(file) {
+  const ext = file.name.split('.').pop().toLowerCase();
+  if (!['pdf','doc','docx'].includes(ext)) {
+    showError('Unsupported file type. Please use PDF, DOC, or DOCX.');
+    return;
+  }
+
+  document.getElementById('loading').style.display = 'flex';
+  document.getElementById('upload-view').style.display = 'none';
+
+  const form = new FormData();
+  form.append('file', file);
+
+  try {
+    const resp = await fetch('/api/analyze', { method: 'POST', body: form });
+    const data = await resp.json();
+
+    if (data.error) {
+      showError(data.error);
+      return;
+    }
+
+    STATE.text = data.text;
+    STATE.spans = data.spans;
+    STATE.stats = data.stats;
+    STATE.speakers = data.speakers || {};
+    STATE.categoriesMeta = data.categories_meta || {};
+    STATE.activeCategories = new Set(Object.keys(data.stats.categories));
+    STATE.activeSpeakers = new Set(Object.keys(data.speakers));
+
+    renderResults(data.filename);
+  } catch (err) {
+    showError('Analysis failed: ' + err.message);
+  } finally {
+    document.getElementById('loading').style.display = 'none';
+  }
+}
+
+function showError(msg) {
+  document.getElementById('loading').style.display = 'none';
+  document.getElementById('results-view').style.display = 'block';
+  const banner = document.getElementById('error-banner');
+  banner.textContent = msg;
+  banner.style.display = 'flex';
+}
+
+function resetView() {
+  document.getElementById('results-view').style.display = 'none';
+  document.getElementById('upload-view').style.display = 'flex';
+  document.getElementById('error-banner').style.display = 'none';
+  fileInput.value = '';
+}
+
+// ── Render Results ──
+function renderResults(filename) {
+  document.getElementById('results-view').style.display = 'block';
+  document.getElementById('error-banner').style.display = 'none';
+
+  // File info
+  document.getElementById('file-info').textContent = filename;
+
+  // Summary stats
+  renderSummary();
+
+  // Filters
+  renderCategoryFilters();
+  renderSpeakerFilters();
+
+  // Document
+  renderDocument();
+}
+
+function renderSummary() {
+  const s = STATE.stats;
+  document.getElementById('stat-pct').textContent = s.pii_percentage + '%';
+  document.getElementById('stat-spans').textContent = s.total_spans;
+  document.getElementById('stat-cats').textContent = s.num_categories;
+
+  // Bar
+  const track = document.getElementById('stat-bar-track');
+  track.innerHTML = '';
+  const cats = s.categories;
+  const total = s.pii_chars || 1;
+  for (const [cat, info] of Object.entries(cats)) {
+    const pct = (info.chars / s.total_chars * 100);
+    const seg = document.createElement('div');
+    seg.className = 'stat-bar-fill';
+    seg.style.width = pct + '%';
+    seg.style.background = CATEGORY_COLORS[cat] || '#888';
+    track.appendChild(seg);
+  }
+
+  // Chips
+  const chips = document.getElementById('category-chips');
+  chips.innerHTML = '';
+  for (const [cat, info] of Object.entries(cats)) {
+    const color = CATEGORY_COLORS[cat] || '#888';
+    const label = CATEGORY_LABELS[cat] || cat;
+    const chip = document.createElement('span');
+    chip.className = 'chip';
+    chip.style.color = color;
+    chip.style.borderColor = color;
+    chip.style.background = color + '15';
+    chip.textContent = label + ' ' + info.count;
+    chips.appendChild(chip);
+  }
+}
+
+function renderCategoryFilters() {
+  const container = document.getElementById('category-filters');
+  container.innerHTML = '';
+  const cats = STATE.stats.categories;
+
+  for (const cat of Object.keys(CATEGORY_LABELS)) {
+    const info = cats[cat];
+    if (!info) continue;
+    const color = CATEGORY_COLORS[cat];
+    const label = CATEGORY_LABELS[cat];
+
+    const item = document.createElement('label');
+    item.className = 'filter-item';
+    item.style.color = color;
+    item.innerHTML = `
+      <input type="checkbox" data-cat="${cat}" ${STATE.activeCategories.has(cat)?'checked':''}>
+      <span class="filter-check"></span>
+      <span class="filter-dot" style="background:${color}"></span>
+      <span class="filter-label" style="color:var(--text)">${label}</span>
+      <span class="filter-count">${info.count}</span>
+    `;
+    item.querySelector('input').addEventListener('change', ev => {
+      if (ev.target.checked) STATE.activeCategories.add(cat);
+      else STATE.activeCategories.delete(cat);
+      renderDocument();
+    });
+    container.appendChild(item);
+  }
+}
+
+function renderSpeakerFilters() {
+  const speakers = STATE.speakers;
+  const group = document.getElementById('speaker-group');
+  const container = document.getElementById('speaker-filters');
+
+  if (!speakers || Object.keys(speakers).length === 0) {
+    group.style.display = 'none';
+    return;
+  }
+  group.style.display = 'block';
+  container.innerHTML = '';
+
+  for (const [speaker, count] of Object.entries(speakers)) {
+    const item = document.createElement('label');
+    item.className = 'filter-item';
+    item.innerHTML = `
+      <input type="checkbox" data-speaker="${speaker}" ${STATE.activeSpeakers.has(speaker)?'checked':''}>
+      <span class="filter-check" style="color:var(--primary)"></span>
+      <span class="filter-label">${speaker}</span>
+      <span class="filter-count">${count}</span>
+    `;
+    item.querySelector('input').addEventListener('change', ev => {
+      if (ev.target.checked) STATE.activeSpeakers.add(speaker);
+      else STATE.activeSpeakers.delete(speaker);
+      renderDocument();
+    });
+    container.appendChild(item);
+  }
+}
+
+// ── Document Rendering ──
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function renderDocument() {
+  const { text, spans } = STATE;
+  const active = STATE.activeCategories;
+
+  // Sort spans by start position
+  const sorted = [...spans].sort((a, b) => a.start - b.start);
+
+  let html = '';
+  let pos = 0;
+
+  for (const span of sorted) {
+    if (span.start < pos) continue; // skip overlapping
+
+    // Text before span
+    if (span.start > pos) {
+      html += escapeHtml(text.substring(pos, span.start));
+    }
+
+    const isActive = active.has(span.label);
+    const cls = isActive ? `pii pii-${span.label}` : `pii pii-${span.label} dimmed`;
+    const spanText = escapeHtml(text.substring(span.start, span.end));
+    html += `<span class="${cls}" data-label="${span.label}" data-text="${escapeHtml(span.text)}">${spanText}</span>`;
+    pos = span.end;
+  }
+
+  // Remaining text
+  if (pos < text.length) {
+    html += escapeHtml(text.substring(pos));
+  }
+
+  document.getElementById('doc-content').innerHTML = html;
+  attachTooltips();
+}
+
+// ── Tooltips ──
+function attachTooltips() {
+  const tooltip = document.getElementById('tooltip');
+  document.querySelectorAll('.pii').forEach(el => {
+    el.addEventListener('mouseenter', ev => {
+      const label = CATEGORY_LABELS[el.dataset.label] || el.dataset.label;
+      tooltip.textContent = label + ': ' + el.dataset.text;
+      tooltip.style.display = 'block';
+      positionTooltip(ev);
+    });
+    el.addEventListener('mousemove', positionTooltip);
+    el.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; });
+  });
+}
+
+function positionTooltip(ev) {
+  const tt = document.getElementById('tooltip');
+  tt.style.left = ev.clientX + 12 + 'px';
+  tt.style.top = ev.clientY - 36 + 'px';
+}
+</script>
+</body>
+</html>"""
+
+# ── Launch ───────────────────────────────────────────────────────
+if __name__ == "__main__":
+    app.launch(server_name="0.0.0.0", server_port=7860)

requirements.txt

@@ -0,0 +1,7 @@
+gradio>=5.0
+transformers
+torch
+accelerate
+PyMuPDF
+python-docx
+python-multipart