Upload 10 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+llma[[:space:]]quotation.pdf filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,36 @@
+FROM python:3.11-slim
+
+# System dependencies for OCR (tesseract + ghostscript) and PDF rendering
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    tesseract-ocr \
+    tesseract-ocr-eng \
+    ghostscript \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create a non-root user (Hugging Face Spaces requirement)
+RUN useradd -m -u 1000 user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR /home/user/app
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Ensure the non-root user owns the app directory
+RUN chown -R user:user /home/user/app
+
+USER user
+
+# Hugging Face Spaces expects port 7860
+EXPOSE 7860
+
+CMD ["python", "app.py", "--host", "0.0.0.0", "--port", "7860"]

HF_README.md

@@ -0,0 +1,22 @@
+---
+title: DocSearcher
+emoji: 🔍
+colorFrom: yellow
+colorTo: orange
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+short_description: Search keywords in PDFs with OCR support
+---
+
+# DocSearcher (5th Gen)
+
+Easy searching of multiple keywords in PDFs with OCR support.
+
+## Features
+
+- Upload any PDF and search for exact words across all pages
+- Optional OCR (Optical Character Recognition) for scanned documents
+- Visual highlighting of matched words on rendered page images
+- Download OCR-processed PDFs

app.py

@@ -0,0 +1,399 @@
+import io
+import os
+import time
+import uuid
+import argparse
+import tempfile
+import traceback
+from dataclasses import dataclass, field
+from typing import Dict, List, Tuple, Optional
+
+from flask import (
+    Flask, render_template, request, jsonify, send_file, abort
+)
+from PIL import Image
+import fitz  # PyMuPDF
+import ocrmypdf  # OCR engine
+
+# -----------------------------------------
+# Configuration
+# -----------------------------------------
+IMAGE_DPI_SCALE = 1.6          # Page rendering zoom (1.0 = 72dpi)
+PAGE_IMAGE_FORMAT = "PNG"
+HIGHLIGHT_COLOR = "#FFA800"
+DOC_EXPIRY_SECONDS = 60 * 60    # 1 hour inactivity
+CLEAN_INTERVAL_SECONDS = 600    # Cleanup frequency
+MAX_PAGES = 3000                # Indexing safety
+MAX_FILE_SIZE_MB = 800          # Raised size limit (adjust as desired)
+
+# OCR configuration
+OCR_DESKEW = True
+OCR_OPTIMIZE = 3
+OCR_SKIP_TEXT = True
+OCR_MAX_PAGES = 5000
+OCR_TIMEOUT_SECONDS = 1800
+OCR_ROTATE_PAGES = True
+OCR_ROTATE_PAGES_THRESHOLD = 1.0
+DEBUG_OCR_ERRORS = True
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = MAX_FILE_SIZE_MB * 1024 * 1024
+
+# -----------------------------------------
+# Data Structures
+# -----------------------------------------
+@dataclass
+class PageWord:
+    text: str
+    bbox: Tuple[float, float, float, float]  # normalized
+
+@dataclass
+class DocumentData:
+    doc_id: str
+    filename: str
+    pages: int
+    uploaded_at: float
+    last_access: float
+    original_pdf_path: str
+    ocr_pdf_path: Optional[str]
+    active_pdf_path: str
+    ocr_performed: bool
+    ocr_failed: bool
+    ocr_message: Optional[str] = None
+    ocr_time: Optional[float] = None
+    page_text: Dict[int, str] = field(default_factory=dict)
+    page_words: Dict[int, List[PageWord]] = field(default_factory=dict)
+    page_image_cache: Dict[int, bytes] = field(default_factory=dict)
+
+    def touch(self):
+        self.last_access = time.time()
+
+# -----------------------------------------
+# In-Memory Store
+# -----------------------------------------
+class DocumentStore:
+    def __init__(self):
+        self._docs: Dict[str, DocumentData] = {}
+        self._last_clean = 0.0
+
+    def add(self, doc: DocumentData):
+        self._docs[doc.doc_id] = doc
+
+    def get(self, doc_id: str) -> Optional[DocumentData]:
+        doc = self._docs.get(doc_id)
+        if doc:
+            doc.touch()
+        return doc
+
+    def cleanup(self):
+        now = time.time()
+        if now - self._last_clean < CLEAN_INTERVAL_SECONDS:
+            return
+        stale = [k for k, v in self._docs.items() if now - v.last_access > DOC_EXPIRY_SECONDS]
+        for sid in stale:
+            d = self._docs[sid]
+            try:
+                if os.path.exists(d.original_pdf_path):
+                    os.remove(d.original_pdf_path)
+            except Exception:
+                pass
+            if d.ocr_pdf_path:
+                try:
+                    if os.path.exists(d.ocr_pdf_path):
+                        os.remove(d.ocr_pdf_path)
+                except Exception:
+                    pass
+            del self._docs[sid]
+        self._last_clean = now
+
+store = DocumentStore()
+
+# -----------------------------------------
+# PDF / OCR Helpers
+# -----------------------------------------
+def extract_pdf(pdf_path: str) -> Tuple[Dict[int, str], Dict[int, List[PageWord]]]:
+    page_text: Dict[int, str] = {}
+    page_words: Dict[int, List[PageWord]] = {}
+    doc = fitz.open(pdf_path)
+    try:
+        if len(doc) > MAX_PAGES:
+            raise ValueError(f"PDF exceeds page limit ({MAX_PAGES}).")
+        for idx, page in enumerate(doc, start=1):
+            page_text[idx] = page.get_text()
+            w, h = page.rect.width, page.rect.height
+            words_raw = page.get_text("words")
+            tokens: List[PageWord] = []
+            for wr in words_raw:
+                if len(wr) >= 5:
+                    x0, y0, x1, y1, txt = wr[0], wr[1], wr[2], wr[3], wr[4]
+                    if txt.strip():
+                        tokens.append(PageWord(txt, (x0 / w, y0 / h, x1 / w, y1 / h)))
+            page_words[idx] = tokens
+    finally:
+        doc.close()
+    return page_text, page_words
+
+def render_page_image(pdf_path: str, page_number: int, zoom: float) -> bytes:
+    doc = fitz.open(pdf_path)
+    try:
+        page = doc[page_number - 1]
+        mat = fitz.Matrix(zoom, zoom)
+        pix = page.get_pixmap(matrix=mat, alpha=False)
+        img = Image.frombytes("RGB", [pix.width, pix.height], pix.samples)
+        buf = io.BytesIO()
+        img.save(buf, format=PAGE_IMAGE_FORMAT)
+        return buf.getvalue()
+    finally:
+        doc.close()
+
+def parse_query_words(raw: str) -> List[str]:
+    import re
+    tokens = re.split(r"[,\s;]+", raw.strip())
+    out = []
+    seen = set()
+    for t in tokens:
+        if not t:
+            continue
+        lt = t.lower()
+        if lt not in seen:
+            seen.add(lt)
+            out.append(lt)
+    return out
+
+def find_pages_with_words(doc_data: DocumentData, words: List[str]):
+    results = []
+    targets = set(words)
+    for pnum, toks in doc_data.page_words.items():
+        counts = {w: 0 for w in words}
+        any_match = False
+        for tok in toks:
+            low = tok.text.lower()
+            if low in targets:
+                counts[low] += 1
+                any_match = True
+        if any_match:
+            results.append({
+                "page": pnum,
+                "counts": counts,
+                "total_matches": sum(counts.values())
+            })
+    results.sort(key=lambda r: r["page"])
+    return results
+
+def perform_ocr(original_path: str, doc_id: str, lang: str):
+    try:
+        with fitz.open(original_path) as probe:
+            if len(probe) > OCR_MAX_PAGES:
+                return original_path, False, True, f"OCR aborted: exceeds {OCR_MAX_PAGES} pages.", None, 0.0
+    except Exception as e:
+        return original_path, False, True, f"OCR inspection failed: {e}", None, 0.0
+
+    out_path = os.path.join(tempfile.gettempdir(), f"{doc_id}_ocr.pdf")
+    if os.path.exists(out_path):
+        try:
+            os.remove(out_path)
+        except Exception:
+            pass
+
+    ocr_args = dict(
+        language=lang or "eng",
+        deskew=OCR_DESKEW,
+        optimize=OCR_OPTIMIZE,
+        skip_text=OCR_SKIP_TEXT,
+        tesseract_timeout=OCR_TIMEOUT_SECONDS,
+        rotate_pages=OCR_ROTATE_PAGES,
+        rotate_pages_threshold=OCR_ROTATE_PAGES_THRESHOLD,
+    )
+    start = time.time()
+    try:
+        ocrmypdf.ocr(original_path, out_path, **ocr_args)
+        elapsed = time.time() - start
+        if not os.path.exists(out_path) or os.path.getsize(out_path) == 0:
+            return original_path, True, True, "OCR produced no output.", None, elapsed
+        return out_path, True, False, f"OCR (rotate+deskew) completed in {elapsed:.1f}s.", out_path, elapsed
+    except Exception as e:
+        elapsed = time.time() - start
+        tb = traceback.format_exc()
+        msg = f"OCR failed after {elapsed:.1f}s: {e}"
+        if DEBUG_OCR_ERRORS:
+            msg += f"\n{tb}"
+        return original_path, True, True, msg, None, elapsed
+
+# -----------------------------------------
+# Routes
+# -----------------------------------------
+@app.route("/")
+def index():
+    store.cleanup()
+    return render_template("index.html", highlight_color=HIGHLIGHT_COLOR)
+
+@app.post("/api/upload")
+def api_upload():
+    store.cleanup()
+    up = request.files.get("pdf")
+    if not up:
+        return jsonify({"error": "No file uploaded"}), 400
+    if not up.filename.lower().endswith(".pdf"):
+        return jsonify({"error": "File must be a PDF"}), 400
+
+    up.seek(0, os.SEEK_END)
+    size_mb = up.tell() / (1024 * 1024)
+    up.seek(0)
+    if size_mb > MAX_FILE_SIZE_MB:
+        return jsonify({"error": f"File too large (> {MAX_FILE_SIZE_MB} MB)"}), 400
+
+    do_ocr = request.form.get("ocr", "false").lower() == "true"
+    lang = request.form.get("lang", "eng").strip() or "eng"
+
+    doc_id = uuid.uuid4().hex
+    orig_path = os.path.join(tempfile.gettempdir(), f"upload_{doc_id}.pdf")
+    up.save(orig_path)
+
+    if do_ocr:
+        active_path, ocr_performed, ocr_failed, ocr_message, ocr_pdf_path, ocr_time = perform_ocr(
+            orig_path, doc_id, lang
+        )
+    else:
+        active_path = orig_path
+        ocr_performed = False
+        ocr_failed = False
+        ocr_message = None
+        ocr_pdf_path = None
+        ocr_time = None
+
+    try:
+        page_text, page_words = extract_pdf(active_path)
+    except Exception as e:
+        try:
+            os.remove(orig_path)
+        except Exception:
+            pass
+        if ocr_pdf_path:
+            try:
+                os.remove(ocr_pdf_path)
+            except Exception:
+                pass
+        return jsonify({"error": f"Failed to process PDF: {e}"}), 500
+
+    doc_data = DocumentData(
+        doc_id=doc_id,
+        filename=up.filename,
+        pages=len(page_text),
+        uploaded_at=time.time(),
+        last_access=time.time(),
+        original_pdf_path=orig_path,
+        ocr_pdf_path=ocr_pdf_path,
+        active_pdf_path=active_path,
+        ocr_performed=ocr_performed,
+        ocr_failed=ocr_failed,
+        ocr_message=ocr_message,
+        ocr_time=ocr_time,
+        page_text=page_text,
+        page_words=page_words
+    )
+    store.add(doc_data)
+
+    return jsonify({
+        "doc_id": doc_id,
+        "filename": up.filename,
+        "pages": doc_data.pages,
+        "ocr_performed": ocr_performed,
+        "ocr_failed": ocr_failed,
+        "ocr_message": ocr_message,
+        "ocr_time_seconds": ocr_time,
+        "used_ocr_pdf": (active_path != orig_path),
+        "rotate_pages": OCR_ROTATE_PAGES if do_ocr else False,
+        "rotate_threshold": OCR_ROTATE_PAGES_THRESHOLD if do_ocr else None
+    })
+
+@app.get("/api/doc/<doc_id>/meta")
+def api_doc_meta(doc_id):
+    d = store.get(doc_id)
+    if not d:
+        return jsonify({"error": "Not found"}), 404
+    return jsonify({
+        "doc_id": d.doc_id,
+        "filename": d.filename,
+        "pages": d.pages,
+        "ocr_performed": d.ocr_performed,
+        "ocr_failed": d.ocr_failed,
+        "ocr_message": d.ocr_message,
+        "ocr_time_seconds": d.ocr_time,
+        "download_ocr_url": f"/api/doc/{doc_id}/download/ocr"
+            if d.ocr_performed and not d.ocr_failed and d.ocr_pdf_path else None
+    })
+
+@app.get("/api/doc/<doc_id>/download/ocr")
+def api_download_ocr(doc_id):
+    d = store.get(doc_id)
+    if not d:
+        return jsonify({"error": "Not found"}), 404
+    if not d.ocr_pdf_path or not os.path.exists(d.ocr_pdf_path):
+        return jsonify({"error": "No OCR PDF available"}), 404
+    return send_file(d.ocr_pdf_path, mimetype="application/pdf", as_attachment=True,
+                     download_name=f"{d.doc_id}_ocr.pdf")
+
+@app.post("/api/doc/<doc_id>/search")
+def api_search(doc_id):
+    d = store.get(doc_id)
+    if not d:
+        return jsonify({"error": "Not found"}), 404
+    payload = request.get_json(silent=True) or {}
+    words = parse_query_words(payload.get("words", ""))
+    if not words:
+        return jsonify({"words": [], "results": []})
+    results = find_pages_with_words(d, words)
+    return jsonify({"words": words, "results": results})
+
+@app.get("/api/doc/<doc_id>/page/<int:page_num>")
+def api_page(doc_id, page_num: int):
+    d = store.get(doc_id)
+    if not d:
+        return jsonify({"error": "Not found"}), 404
+    if page_num < 1 or page_num > d.pages:
+        return jsonify({"error": "Invalid page"}), 400
+
+    if page_num not in d.page_image_cache:
+        try:
+            d.page_image_cache[page_num] = render_page_image(d.active_pdf_path, page_num, IMAGE_DPI_SCALE)
+        except Exception as e:
+            return jsonify({"error": f"Failed to render page: {e}"}), 500
+
+    tokens = [{"text": w.text, "bbox": w.bbox} for w in d.page_words[page_num]]
+
+    return jsonify({
+        "page": page_num,
+        "tokens": tokens,
+        "text": d.page_text.get(page_num, ""),
+        "image_url": f"/api/doc/{doc_id}/page/{page_num}/image"
+    })
+
+@app.get("/api/doc/<doc_id>/page/<int:page_num>/image")
+def api_page_image(doc_id, page_num):
+    d = store.get(doc_id)
+    if not d:
+        abort(404)
+    if page_num < 1 or page_num > d.pages:
+        abort(400)
+    if page_num not in d.page_image_cache:
+        try:
+            d.page_image_cache[page_num] = render_page_image(d.active_pdf_path, page_num, IMAGE_DPI_SCALE)
+        except Exception:
+            abort(500)
+    return send_file(
+        io.BytesIO(d.page_image_cache[page_num]),
+        mimetype="image/png",
+        as_attachment=False,
+        download_name=f"{doc_id}_page_{page_num}.png"
+    )
+
+def main():
+    parser = argparse.ArgumentParser(description="Run PDF Word Finder with OCR (auto-rotate).")
+    parser.add_argument("--host", default="127.0.0.1")
+    parser.add_argument("--port", type=int, default=8000)
+    parser.add_argument("--debug", action="store_true")
+    args = parser.parse_args()
+    app.run(host=args.host, port=args.port, debug=args.debug)
+
+if __name__ == "__main__":
+    main()

llma quotation.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8f858dc4dc674981eb4817c470dd6036fbd60d35028d940857795f747a9fe9bc
+size 368451

requirements.txt

@@ -0,0 +1,4 @@
+flask>=3.1,<4
+pymupdf>=1.27,<2
+pillow>=12.0,<13
+ocrmypdf>=17.0,<18

static/app.js

@@ -0,0 +1,791 @@
+/* Front-end logic: full placeholder list + background image/data loading + buffered highlights */
+console.log("[app] build version:", window.APP_CONFIG?.buildVersion);
+
+/* ---------- DOM Elements ---------- */
+const pdfInput = document.getElementById('pdfInput');
+const fileInfo = document.getElementById('fileInfo');
+const wordsInput = document.getElementById('wordsInput');
+const searchBtn = document.getElementById('searchBtn');
+const resultsList = document.getElementById('resultsList');
+const pageText = document.getElementById('pageText');
+const legend = document.getElementById('legend');
+const pagesDiv = document.getElementById('pages');
+const statusMsg = document.getElementById('statusMsg');
+const zoomIn = document.getElementById('zoomIn');
+const zoomOut = document.getElementById('zoomOut');
+const zoomVal = document.getElementById('zoomVal');
+const divider = document.getElementById('divider');
+const loadAllBtn = document.getElementById('loadAllBtn');
+const ocrToggle = document.getElementById('ocrToggle');
+const ocrLang = document.getElementById('ocrLang');
+const downloadOcrLink = document.getElementById('downloadOcrLink');
+const ocrStatusNote = document.getElementById('ocrStatusNote');
+
+/* Overlay */
+const processingOverlay = document.getElementById('processingOverlay');
+const processingTitle = document.getElementById('processingTitle');
+const processingDetail = document.getElementById('processingDetail');
+const processingHint = document.getElementById('processingHint');
+const processingError = document.getElementById('processingError');
+const overlayCloseBtn = document.getElementById('overlayCloseBtn');
+const processingSpinner = document.getElementById('processingSpinner');
+
+/* ---------- Config ---------- */
+ocrToggle.checked = false;
+ocrLang.value = 'eng';
+
+const HIGHLIGHT_BUFFER_BEFORE = 2;
+const HIGHLIGHT_BUFFER_AFTER = 2;
+const PREFETCH_EXTRA_AHEAD = 1;
+let bufferedHighlightMode = true;
+
+const ALWAYS_BACKGROUND_FULL_LOAD = true;
+const BG_CONCURRENCY_BASE = 8;
+const BG_CONCURRENCY_ACCEL = 24;
+
+const LARGE_DOC_THRESHOLD = 80;
+const PREVIEW_PAGES_LARGE = 10;
+const PREVIEW_PAGES_SMALL = Infinity;
+
+let currentScale = 1.0;
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 2.5;
+const SCALE_STEP = 0.15;
+
+/* ---------- State ---------- */
+let currentDoc = null;
+let currentWords = [];
+let searchResults = [];
+let matchPageSet = new Set();
+
+let pageCache = {};                // pageNum -> { tokens, text, imageLoadedPromise, overlay }
+let pageLoadPromises = {};         // guard
+let placeholderBuilt = false;
+
+let seamlessHighlightActive = false;
+let currentCenterPage = null;
+let highlightedPages = new Set();
+let scrollDirection = 0;
+let programmaticScrollInProgress = false;
+let pageObserver = null;
+let jumpGeneration = 0;
+
+let bgActive = false;
+let bgAccelerated = false;
+let bgCompleted = false;
+let bgLoadedCount = 0;
+let bgTotalToLoad = 0;
+let bgConcurrency = BG_CONCURRENCY_BASE;
+let bgStatusTimer = null;
+
+/* ---------- Utility ---------- */
+function setStatus(msg) { statusMsg.textContent = msg; }
+function parseWords(raw) {
+  return raw.trim()
+    .split(/[,\s;]+/)
+    .filter(Boolean)
+    .map(w => w.toLowerCase())
+    .filter((v,i,a)=>a.indexOf(v)===i);
+}
+
+/* ---------- Overlay Helpers ---------- */
+function showProcessingOverlay(title, detail, showHint=true) {
+  processingTitle.textContent = title;
+  processingDetail.textContent = detail || '';
+  processingHint.style.display = showHint ? 'block' : 'none';
+  processingError.style.display = 'none';
+  overlayCloseBtn.style.display = 'none';
+  processingSpinner.style.display = 'block';
+  processingOverlay.classList.remove('hidden');
+}
+function markOverlayCompleted(msg) {
+  processingTitle.textContent = 'Completed';
+  processingDetail.textContent = msg || 'Done.';
+  processingHint.style.display = 'none';
+  processingSpinner.style.display = 'none';
+  setTimeout(()=>overlayCloseBtn.style.display = 'inline-flex', 2000);
+}
+function showOverlayError(msg) {
+  processingError.textContent = msg;
+  processingError.style.display = 'block';
+  processingSpinner.style.display = 'none';
+  processingTitle.textContent = 'Error';
+  processingHint.style.display = 'none';
+  overlayCloseBtn.style.display = 'inline-flex';
+}
+function hideProcessingOverlay() {
+  processingOverlay.classList.add('hidden');
+}
+overlayCloseBtn.addEventListener('click', hideProcessingOverlay);
+
+/* ---------- Upload Flow ---------- */
+pdfInput.addEventListener('change', async (e) => {
+  const f = e.target.files[0];
+  if (!f) return;
+  resetAll();
+
+  const wantsOCR = ocrToggle.checked;
+  showProcessingOverlay(
+    wantsOCR ? 'Performing OCR...' : 'Processing PDF...',
+    wantsOCR ? 'Running OCR (deskew + rotation). Please wait...' : 'Processing PDF text...',
+    wantsOCR
+  );
+
+  setStatus("Uploading...");
+  const fd = new FormData();
+  fd.append("pdf", f);
+  fd.append("ocr", String(wantsOCR));
+  fd.append("lang", ocrLang.value.trim() || 'eng');
+
+  let json;
+  try {
+    const res = await fetch("/api/upload", {method:"POST", body:fd});
+    json = await res.json();
+    if (!res.ok) throw new Error(json.error || "Upload failed");
+  } catch (err) {
+    console.error(err);
+    showOverlayError(err.message);
+    setStatus(err.message);
+    return;
+  }
+
+  currentDoc = json;
+  fileInfo.textContent = `${json.filename} (${json.pages} pages)`;
+  enableLoadAllIfNeeded();
+  enableZoom();
+
+  // OCR status
+  if (json.ocr_performed) {
+    ocrStatusNote.style.display = 'block';
+    ocrStatusNote.textContent = json.ocr_failed
+      ? `OCR failed: ${json.ocr_message || 'Unknown error.'}`
+      : (json.ocr_message || 'OCR completed.');
+  } else {
+    ocrStatusNote.style.display = 'none';
+  }
+
+  // Download OCR link
+  if (json.ocr_performed && !json.ocr_failed && json.used_ocr_pdf) {
+    try {
+      const metaRes = await fetch(`/api/doc/${json.doc_id}/meta`);
+      const metaJ = await metaRes.json();
+      if (metaRes.ok && metaJ.download_ocr_url) {
+        downloadOcrLink.href = metaJ.download_ocr_url;
+        downloadOcrLink.style.display = 'inline-flex';
+      }
+    } catch(e) {}
+  }
+
+  markOverlayCompleted("Preview rendering...");
+
+  try {
+    await renderPreviewPages();
+    buildAllPlaceholders();           // create placeholders for ALL pages (if not built)
+    if (ALWAYS_BACKGROUND_FULL_LOAD) {
+      startBackgroundLoading();       // load every remaining page automatically
+    }
+    setStatus("Preview ready. You can search now.");
+  } catch (e2) {
+    showOverlayError("Render error: " + e2.message);
+    setStatus("Render error: " + e2.message);
+    return;
+  } finally {
+    setTimeout(hideProcessingOverlay, 500);
+  }
+});
+
+/* ---------- Preview Pages ---------- */
+async function renderPreviewPages() {
+  if (!currentDoc) return;
+  const total = currentDoc.pages;
+  const limit = (total > LARGE_DOC_THRESHOLD) ? PREVIEW_PAGES_LARGE : PREVIEW_PAGES_SMALL;
+  const count = Math.min(limit, total);
+  for (let p = 1; p <= count; p++) {
+    await ensurePageLoaded(p);
+    if (p % 3 === 0 || p === count) {
+      setStatus(`Loaded preview pages ${p}/${count}${count < total ? '...' : ''}`);
+    }
+  }
+}
+
+/* ---------- Placeholder Construction ---------- */
+function buildAllPlaceholders() {
+  if (!currentDoc || placeholderBuilt) return;
+  const total = currentDoc.pages;
+  // We keep already loaded preview pages; build placeholders for any missing pages + also create placeholders for those already loaded? prefer consistent DOM order.
+  // Strategy: If a page DOM exists skip; else create placeholder.
+  const frag = document.createDocumentFragment();
+  for (let p = 1; p <= total; p++) {
+    if (pagesDiv.querySelector(`.page[data-page="${p}"]`)) continue;
+    const ph = document.createElement('div');
+    ph.className = 'page placeholder';
+    ph.dataset.page = p;
+    ph.innerHTML = `
+      <div class="page-inner">
+        <div class="placeholder-label">Page ${p}</div>
+        <div class="placeholder-spinner"></div>
+      </div>
+    `;
+    frag.appendChild(ph);
+  }
+  // Insert placeholders maintaining numeric order (append because existing pages are lowest numbers already)
+  pagesDiv.appendChild(frag);
+  placeholderBuilt = true;
+}
+
+/* ---------- Background Loading (All Pages) ---------- */
+async function startBackgroundLoading(accelerate = false) {
+  if (!currentDoc) return;
+  if (bgCompleted) return;
+  if (!bgActive) {
+    bgActive = true;
+    bgConcurrency = accelerate ? BG_CONCURRENCY_ACCEL : BG_CONCURRENCY_BASE;
+  } else if (accelerate) {
+    bgAccelerated = true;
+    bgConcurrency = BG_CONCURRENCY_ACCEL;
+  }
+
+  const pending = [];
+  for (let p = 1; p <= currentDoc.pages; p++) {
+    if (!pageCache[p]) pending.push(p);
+  }
+  bgTotalToLoad = pending.length;
+  bgLoadedCount = 0;
+
+  if (!pending.length) {
+    bgCompleted = true;
+    bgActive = false;
+    enableLoadAllIfNeeded();
+    setStatus("All pages already loaded.");
+    return;
+  }
+
+  if (!bgStatusTimer) {
+    bgStatusTimer = setInterval(() => {
+      if (!bgActive) return;
+      const pct = ((bgLoadedCount / bgTotalToLoad) * 100).toFixed(1);
+      setStatus(`Loading all pages (${bgLoadedCount}/${bgTotalToLoad}) ${pct}%`);
+    }, 1200);
+  }
+
+  let nextIndex = 0;
+  async function worker() {
+    while (true) {
+      if (nextIndex >= pending.length) break;
+      const i = nextIndex++;
+      const pageNum = pending[i];
+      try {
+        await ensurePageLoaded(pageNum);
+      } catch (e) {
+        console.warn("[bg] page load error", pageNum, e);
+      } finally {
+        bgLoadedCount++;
+      }
+    }
+  }
+
+  const workers = [];
+  for (let i = 0; i < bgConcurrency; i++) workers.push(worker());
+
+  await Promise.all(workers);
+
+  if (bgAccelerated && !accelerate) {
+    // If we were asked to accelerate after initial start, spawn extra workers now
+    // (Simplify: we already adjust concurrency variable; new acceleration triggers call again)
+  }
+
+  clearInterval(bgStatusTimer);
+  bgStatusTimer = null;
+  bgActive = false;
+  bgCompleted = true;
+  enableLoadAllIfNeeded();
+  setStatus("All pages loaded.");
+}
+
+/* Load All button -> accelerate */
+loadAllBtn.addEventListener('click', async () => {
+  if (!currentDoc) return;
+  if (bgCompleted) {
+    setStatus("All pages already loaded.");
+    return;
+  }
+  setStatus("Accelerating full load...");
+  await startBackgroundLoading(true);
+  // If background already active, above call only bumps concurrency.
+  if (bgActive) {
+    const wait = setInterval(() => {
+      if (bgCompleted) clearInterval(wait);
+    }, 400);
+  }
+});
+
+/* ---------- Search ---------- */
+searchBtn.addEventListener('click', runSearch);
+wordsInput.addEventListener('keydown', e => { if (e.key === 'Enter') runSearch(); });
+
+async function runSearch() {
+  if (!currentDoc) { setStatus("Upload a PDF first."); return; }
+  const raw = wordsInput.value;
+  const words = parseWords(raw);
+  currentWords = words;
+  updateLegend(words);
+  clearAllHighlights();
+  seamlessHighlightActive = false;
+  matchPageSet.clear();
+  highlightedPages.clear();
+  currentCenterPage = null;
+
+  if (!words.length) {
+    resultsList.innerHTML = '';
+    pageText.value = '';
+    setStatus("No words entered.");
+    return;
+  }
+
+  setStatus("Searching...");
+  let data;
+  try {
+    const res = await fetch(`/api/doc/${currentDoc.doc_id}/search`, {
+      method:"POST",
+      headers: {"Content-Type":"application/json"},
+      body: JSON.stringify({words: raw})
+    });
+    data = await res.json();
+    if (!res.ok) throw new Error(data.error || "Search failed");
+  } catch (e) {
+    setStatus(e.message);
+    return;
+  }
+  searchResults = data.results || [];
+  populateResults();
+  if (!searchResults.length) {
+    setStatus("No pages found.");
+    pageText.value = '';
+    return;
+  }
+  matchPageSet = new Set(searchResults.map(r=>r.page));
+
+  const first = searchResults[0].page;
+  await ensurePageLoaded(first);
+  await preloadHighlightWindow(first);
+  setCenterPage(first, {fromClick:true});
+  seamlessHighlightActive = true;
+  selectResultIndex(0, {preserveHighlights:true, skipScroll:true});
+  scrollPageIntoView(first);
+  setStatus(`Ready. Highlight window centered at page ${first}.`);
+}
+
+function updateLegend(words) {
+  legend.innerHTML = '';
+  if (!words.length) {
+    legend.innerHTML = '<span class="dim">No words</span>';
+    return;
+  }
+  const sw = document.createElement('div');
+  sw.className = 'swatch';
+  legend.appendChild(sw);
+  const txt = document.createElement('div');
+  txt.textContent = words.join(', ');
+  legend.appendChild(txt);
+}
+
+function populateResults() {
+  resultsList.innerHTML = '';
+  if (!searchResults.length) {
+    const li = document.createElement('li');
+    li.textContent = '[No pages]';
+    li.classList.add('dim');
+    resultsList.appendChild(li);
+    return;
+  }
+  searchResults.forEach((r, idx) => {
+    const li = document.createElement('li');
+    const parts = [];
+    currentWords.forEach(w => {
+      const c = r.counts[w] || 0;
+      if (c) parts.push(`${w}:${c}`);
+    });
+    li.innerHTML = `<span>Pg ${r.page}</span><span style="opacity:.7">${parts.join(', ')}</span>`;
+    li.addEventListener('click', () => jumpToResultPage(idx, r.page));
+    resultsList.appendChild(li);
+  });
+}
+
+/* ---------- Jump to Far Page ---------- */
+async function jumpToResultPage(idx, pageNum) {
+  if (!currentDoc) return;
+  jumpGeneration++;
+  const myGen = jumpGeneration;
+  setStatus(`Jumping to page ${pageNum}...`);
+  programmaticScrollInProgress = true;
+
+  await ensurePageLoaded(pageNum);
+  if (myGen !== jumpGeneration) return;
+
+  const preloadPromise = preloadHighlightWindow(pageNum);
+  setCenterPage(pageNum, {fromClick:true});
+  selectResultIndex(idx, {preserveHighlights:true, skipScroll:true});
+  scrollPageIntoView(pageNum);
+
+  let timedOut = false;
+  const timeout = new Promise(r=>setTimeout(()=>{ timedOut = true; r(); }, 2000));
+  await Promise.race([preloadPromise, timeout]);
+  setStatus(timedOut ? `Page ${pageNum} ready (loading nearby...)` : `Centered on page ${pageNum}.`);
+
+  setTimeout(()=> programmaticScrollInProgress = false, 600);
+}
+
+async function preloadHighlightWindow(center) {
+  const start = Math.max(1, center - HIGHLIGHT_BUFFER_BEFORE);
+  const end = Math.min(currentDoc.pages, center + HIGHLIGHT_BUFFER_AFTER);
+  const tasks = [];
+  for (let p = start; p <= end; p++) {
+    if (!pageCache[p]) tasks.push(ensurePageLoaded(p));
+  }
+  if (tasks.length) await Promise.all(tasks);
+}
+
+/* ---------- Selecting Result ---------- */
+async function selectResultIndex(idx, opts={}) {
+  if (idx < 0 || idx >= searchResults.length) return;
+  [...resultsList.children].forEach((li,i)=>li.classList.toggle('active', i===idx));
+  const entry = searchResults[idx];
+  currentSelectedPage = entry.page;
+  await ensurePageLoaded(entry.page);
+  showPageText(entry.page);
+
+  if (!bufferedHighlightMode) {
+    if (seamlessHighlightActive) highlightPageMatches(entry.page, {append:true});
+    else if (!opts.preserveHighlights) {
+      clearAllHighlights();
+      highlightPageMatches(entry.page);
+    }
+  }
+  if (!opts.skipScroll) scrollPageIntoView(entry.page);
+}
+
+function showPageText(pageNum) {
+  const cache = pageCache[pageNum];
+  if (!cache) return;
+  const entry = searchResults.find(r=>r.page===pageNum);
+  let summary = '';
+  if (entry) {
+    const parts = currentWords
+      .map(w => `${w}=${entry.counts[w] || 0}`)
+      .filter(x=>!x.endsWith('=0'));
+    if (parts.length) summary = 'Matches: '+parts.join(', ') + '\n' + '-'.repeat(40) + '\n';
+  }
+  pageText.value = summary + cache.text;
+}
+
+function scrollPageIntoView(pageNum) {
+  const el = pagesDiv.querySelector(`.page[data-page="${pageNum}"]`);
+  if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
+}
+
+/* ---------- Intersection Observer (Center Detection) ---------- */
+function ensurePageObserver() {
+  if (pageObserver) return;
+  pageObserver = new IntersectionObserver(handleIO, {
+    root: document.getElementById('pagesWrap'),
+    rootMargin: '0px',
+    threshold: [0.25,0.5,0.75]
+  });
+  // Observe all page elements (placeholders included)
+  pagesDiv.querySelectorAll('.page').forEach(p => pageObserver.observe(p));
+}
+function handleIO(entries) {
+  if (!bufferedHighlightMode || programmaticScrollInProgress) return;
+  let best = null;
+  for (const e of entries) {
+    if (!e.isIntersecting) continue;
+    if (!best || e.intersectionRatio > best.intersectionRatio) best = e;
+  }
+  if (!best) return;
+  const num = parseInt(best.target.dataset.page,10);
+  if (currentCenterPage !== num) {
+    if (currentCenterPage != null) scrollDirection = num > currentCenterPage ? 1 : -1;
+    setCenterPage(num);
+  }
+}
+function setCenterPage(pageNum, {fromClick=false} = {}) {
+  currentCenterPage = pageNum;
+  updateHighlightWindow();
+  if (fromClick) {
+    programmaticScrollInProgress = true;
+    setTimeout(()=> programmaticScrollInProgress = false, 800);
+  }
+}
+
+/* ---------- Highlight Window Logic ---------- */
+function updateHighlightWindow() {
+  if (!currentDoc || !bufferedHighlightMode || currentCenterPage == null) return;
+  const start = Math.max(1, currentCenterPage - HIGHLIGHT_BUFFER_BEFORE);
+  const end = Math.min(currentDoc.pages, currentCenterPage + HIGHLIGHT_BUFFER_AFTER);
+
+  for (const p of Array.from(highlightedPages)) {
+    if (p < start || p > end) {
+      clearHighlightsOnPage(p);
+      highlightedPages.delete(p);
+    }
+  }
+
+  const tasks = [];
+  for (let p = start; p <= end; p++) {
+    if (matchPageSet.has(p) && !highlightedPages.has(p)) {
+      if (pageCache[p]) {
+        highlightPageMatches(p,{append:false});
+        highlightedPages.add(p);
+      } else {
+        tasks.push(ensurePageLoaded(p).then(()=>{
+          if (matchPageSet.has(p)) {
+            highlightPageMatches(p,{append:false});
+            highlightedPages.add(p);
+          }
+        }));
+      }
+    }
+  }
+
+  if (scrollDirection !== 0) {
+    const aheadStart = scrollDirection > 0 ? end + 1 : start - PREFETCH_EXTRA_AHEAD;
+    const aheadEnd = scrollDirection > 0
+      ? Math.min(currentDoc.pages, end + PREFETCH_EXTRA_AHEAD)
+      : Math.max(1, start - 1);
+    for (let p = aheadStart; scrollDirection > 0 ? p <= aheadEnd : p >= aheadEnd; p += scrollDirection>0?1:-1) {
+      if (matchPageSet.has(p) && !pageCache[p]) {
+        tasks.push(ensurePageLoaded(p));
+      }
+    }
+  }
+
+  if (tasks.length) {
+    Promise.all(tasks).catch(e=>console.warn('[highlight-window]', e));
+  }
+}
+
+/* ---------- Page Loading ---------- */
+async function ensurePageLoaded(pageNum) {
+  if (pageCache[pageNum]) return;
+  if (pageLoadPromises[pageNum]) return pageLoadPromises[pageNum];
+
+  pageLoadPromises[pageNum] = (async () => {
+    if (!currentDoc) return;
+    // Reuse placeholder element
+    let pageEl = pagesDiv.querySelector(`.page[data-page="${pageNum}"]`);
+    if (!pageEl) {
+      // Should not happen if placeholders built, but fallback
+      pageEl = document.createElement('div');
+      pageEl.className = 'page placeholder';
+      pageEl.dataset.page = pageNum;
+      pageEl.innerHTML = `
+        <div class="page-inner">
+          <div class="placeholder-label">Page ${pageNum}</div>
+          <div class="placeholder-spinner"></div>
+        </div>
+      `;
+      // Insert in numeric order
+      let inserted = false;
+      const existing = [...pagesDiv.querySelectorAll('.page')];
+      for (const el of existing) {
+        const n = parseInt(el.dataset.page,10);
+        if (pageNum < n) {
+          pagesDiv.insertBefore(pageEl, el);
+          inserted = true;
+          break;
+        }
+      }
+      if (!inserted) pagesDiv.appendChild(pageEl);
+    }
+
+    // Fetch page meta
+    const res = await fetch(`/api/doc/${currentDoc.doc_id}/page/${pageNum}`);
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || `Failed to load page ${pageNum}`);
+
+    // Replace placeholder inner content with actual page image + overlay only if not already replaced
+    if (!pageEl.classList.contains('loaded')) {
+      pageEl.classList.remove('placeholder');
+      pageEl.classList.add('loaded');
+      pageEl.innerHTML = ''; // clear placeholder
+      const img = document.createElement('img');
+      img.src = data.image_url;
+      img.alt = `Page ${pageNum}`;
+      img.loading = 'lazy';
+      img.decoding = 'async';
+      pageEl.appendChild(img);
+
+      const label = document.createElement('div');
+      label.className = 'page-label';
+      label.textContent = `Page ${pageNum}`;
+      pageEl.appendChild(label);
+
+      const overlay = document.createElement('div');
+      overlay.className = 'overlay';
+      overlay.style.position = 'absolute';
+      overlay.style.inset = '0';
+      overlay.style.pointerEvents = 'none';
+      pageEl.appendChild(overlay);
+
+      pageCache[pageNum] = {
+        tokens: data.tokens,
+        text: data.text,
+        imageLoadedPromise: new Promise(resolve => {
+          img.onload = () => resolve();
+          img.onerror = () => resolve();
+        }),
+        overlay
+      };
+      await pageCache[pageNum].imageLoadedPromise;
+
+      ensurePageObserver();
+      if (pageObserver) pageObserver.observe(pageEl);
+
+      if (bufferedHighlightMode && matchPageSet.has(pageNum)) {
+        if (currentCenterPage != null &&
+            pageNum >= currentCenterPage - HIGHLIGHT_BUFFER_BEFORE &&
+            pageNum <= currentCenterPage + HIGHLIGHT_BUFFER_AFTER) {
+          highlightPageMatches(pageNum);
+          highlightedPages.add(pageNum);
+        }
+      } else if (seamlessHighlightActive && !bufferedHighlightMode && matchPageSet.has(pageNum)) {
+        highlightPageMatches(pageNum, {append:true});
+      }
+    } else {
+      // Already loaded (race)
+    }
+  })();
+
+  try {
+    await pageLoadPromises[pageNum];
+  } finally {
+    delete pageLoadPromises[pageNum];
+  }
+}
+
+/* ---------- Highlighting ---------- */
+function clearAllHighlights() {
+  document.querySelectorAll('.hl-box').forEach(el => el.remove());
+}
+function clearHighlightsOnPage(pageNum) {
+  const pageEl = pagesDiv.querySelector(`.page[data-page="${pageNum}"]`);
+  if (!pageEl) return;
+  pageEl.querySelectorAll('.hl-box').forEach(el=>el.remove());
+}
+function highlightPageMatches(pageNum, {append=false} = {}) {
+  const cache = pageCache[pageNum];
+  if (!cache || !currentWords.length) return;
+  if (!append) clearHighlightsOnPage(pageNum);
+  const targets = new Set(currentWords);
+  const overlay = cache.overlay;
+  const frag = document.createDocumentFragment();
+  for (const tok of cache.tokens) {
+    const lt = tok.text.toLowerCase();
+    if (targets.has(lt)) {
+      const [x0,y0,x1,y1] = tok.bbox;
+      const div = document.createElement('div');
+      div.className = 'hl-box';
+      div.style.left = (x0*100)+'%';
+      div.style.top = (y0*100)+'%';
+      div.style.width = ((x1 - x0)*100)+'%';
+      div.style.height = ((y1 - y0)*100)+'%';
+      frag.appendChild(div);
+    }
+  }
+  overlay.appendChild(frag);
+}
+
+/* ---------- Zoom / Resize ---------- */
+window.addEventListener('resize', () => { /* percentage boxes auto-scale */ });
+
+function enableZoom() {
+  zoomIn.disabled = false;
+  zoomOut.disabled = false;
+}
+function disableZoom() {
+  zoomIn.disabled = true;
+  zoomOut.disabled = true;
+  currentScale = 1.0;
+  zoomVal.textContent = '100%';
+  pagesDiv.style.transform = '';
+}
+zoomIn.addEventListener('click', () => applyZoom(currentScale + SCALE_STEP));
+zoomOut.addEventListener('click', () => applyZoom(currentScale - SCALE_STEP));
+function applyZoom(newScale) {
+  if (!currentDoc) return;
+  newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
+  if (Math.abs(newScale - currentScale) < 0.001) return;
+  currentScale = newScale;
+  zoomVal.textContent = Math.round(newScale*100) + '%';
+  pagesDiv.style.transformOrigin = 'top center';
+  pagesDiv.style.transform = `scale(${newScale})`;
+}
+
+/* ---------- Sidebar Resize ---------- */
+(function enableDivider() {
+  let dragging = false;
+  divider.addEventListener('mousedown', () => {
+    dragging = true;
+    document.body.style.userSelect = 'none';
+    document.documentElement.style.cursor = 'col-resize';
+  });
+  window.addEventListener('mouseup', () => {
+    if (dragging) {
+      dragging = false;
+      document.body.style.userSelect = '';
+      document.documentElement.style.cursor = '';
+    }
+  });
+  window.addEventListener('mousemove', e => {
+    if (!dragging) return;
+    const min = 220;
+    const max = Math.min(window.innerWidth * 0.6, 700);
+    const w = Math.max(min, Math.min(max, e.clientX));
+    document.documentElement.style.setProperty('--sidebar-width', w + 'px');
+  });
+})();
+
+/* ---------- Load All Button State ---------- */
+function enableLoadAllIfNeeded() {
+  if (!currentDoc) { loadAllBtn.disabled = true; return; }
+  loadAllBtn.disabled = bgCompleted;
+}
+
+/* ---------- Reset ---------- */
+function resetAll() {
+  currentDoc = null;
+  currentWords = [];
+  searchResults = [];
+  matchPageSet.clear();
+  pageCache = {};
+  pageLoadPromises = {};
+  placeholderBuilt = false;
+  seamlessHighlightActive = false;
+  currentCenterPage = null;
+  highlightedPages.clear();
+  scrollDirection = 0;
+  jumpGeneration = 0;
+
+  bgActive = false;
+  bgAccelerated = false;
+  bgCompleted = false;
+  if (bgStatusTimer) { clearInterval(bgStatusTimer); bgStatusTimer = null; }
+
+  fileInfo.textContent = '';
+  resultsList.innerHTML = '';
+  pageText.value = '';
+  legend.innerHTML = '<span class="dim">No words</span>';
+  pagesDiv.innerHTML = '';
+  disableZoom();
+  downloadOcrLink.style.display = 'none';
+  ocrStatusNote.style.display = 'none';
+  setStatus("Ready.");
+
+  if (pageObserver) {
+    pageObserver.disconnect();
+    pageObserver = null;
+  }
+}
+
+/* ---------- Init ---------- */
+setStatus("Ready.");

static/app2.js

@@ -0,0 +1,751 @@
+/* Front-end logic with buffered, on-demand highlight lifecycle + duplicate load guard + fast jump preloading */
+console.log("[app] build version:", window.APP_CONFIG?.buildVersion);
+
+const pdfInput = document.getElementById('pdfInput');
+const fileInfo = document.getElementById('fileInfo');
+const wordsInput = document.getElementById('wordsInput');
+const searchBtn = document.getElementById('searchBtn');
+const resultsList = document.getElementById('resultsList');
+const pageText = document.getElementById('pageText');
+const legend = document.getElementById('legend');
+const pagesDiv = document.getElementById('pages');
+const statusMsg = document.getElementById('statusMsg');
+const zoomIn = document.getElementById('zoomIn');
+const zoomOut = document.getElementById('zoomOut');
+const zoomVal = document.getElementById('zoomVal');
+const divider = document.getElementById('divider');
+const loadAllBtn = document.getElementById('loadAllBtn');
+const ocrToggle = document.getElementById('ocrToggle');
+const ocrLang = document.getElementById('ocrLang');
+const downloadOcrLink = document.getElementById('downloadOcrLink');
+const ocrStatusNote = document.getElementById('ocrStatusNote');
+
+const processingOverlay = document.getElementById('processingOverlay');
+const processingTitle = document.getElementById('processingTitle');
+const processingDetail = document.getElementById('processingDetail');
+const processingHint = document.getElementById('processingHint');
+const processingError = document.getElementById('processingError');
+const overlayCloseBtn = document.getElementById('overlayCloseBtn');
+const processingSpinner = document.getElementById('processingSpinner');
+
+ocrToggle.checked = false;
+ocrLang.value = 'eng';
+
+let currentDoc = null;
+let currentWords = [];
+let searchResults = [];
+let currentSelectedPage = null;
+let pageCache = {};
+let currentScale = 1.0;
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 2.5;
+const SCALE_STEP = 0.15;
+
+/* Track in-flight page loads to prevent duplicates */
+const pageLoadPromises = {};  // pageNum -> Promise
+
+let matchPageSet = new Set();
+let seamlessHighlightActive = false;
+
+/* Buffered Highlight Configuration */
+const HIGHLIGHT_BUFFER_BEFORE = 2;
+const HIGHLIGHT_BUFFER_AFTER  = 2;
+const PREFETCH_EXTRA_AHEAD    = 1;
+let bufferedHighlightMode = true;
+
+/* Buffered highlight state */
+let currentCenterPage = null;
+let highlightedPages = new Set();
+let scrollDirection = 0; // -1 up, +1 down
+let programmaticScrollInProgress = false;
+let pageObserver = null;
+
+/* Jump control */
+let currentJumpToken = 0;
+
+/* Loading strategy */
+const LARGE_DOC_THRESHOLD = 80;
+const AUTO_LOAD_PAGES_LARGE = 10;
+const AUTO_LOAD_PAGES_SMALL = Infinity;
+
+/* Overlay state */
+let overlayCompletedTimestamp = null;
+let overlayForceHideTimer = null;
+
+function setStatus(msg) {
+  statusMsg.textContent = msg;
+}
+
+function parseWords(raw) {
+  return raw.trim()
+    .split(/[,\s;]+/)
+    .filter(Boolean)
+    .map(w => w.toLowerCase())
+    .filter((v,i,a)=>a.indexOf(v)===i);
+}
+
+/* Overlay helpers */
+function showProcessingOverlay(title, detail, showHint=true) {
+  processingTitle.textContent = title;
+  processingDetail.textContent = detail || '';
+  processingHint.style.display = showHint ? 'block' : 'none';
+  processingError.style.display = 'none';
+  overlayCloseBtn.style.display = 'none';
+  processingSpinner.style.display = 'block';
+  processingOverlay.classList.remove('hidden');
+  overlayCompletedTimestamp = null;
+  if (overlayForceHideTimer) {
+    clearTimeout(overlayForceHideTimer);
+    overlayForceHideTimer = null;
+  }
+}
+
+function markOverlayCompleted(successMsg) {
+  processingTitle.textContent = 'Completed';
+  processingDetail.textContent = successMsg || 'Done.';
+  processingHint.style.display = 'none';
+  processingSpinner.style.display = 'none';
+  overlayCompletedTimestamp = performance.now();
+  setTimeout(() => {
+    if (!processingOverlay.classList.contains('hidden')) {
+      overlayCloseBtn.style.display = 'inline-flex';
+    }
+  }, 2500);
+}
+
+function showOverlayError(msg) {
+  processingError.textContent = msg;
+  processingError.style.display = 'block';
+  processingSpinner.style.display = 'none';
+  processingTitle.textContent = 'Error';
+  processingHint.style.display = 'none';
+  overlayCloseBtn.style.display = 'inline-flex';
+}
+
+function hideProcessingOverlay() {
+  processingOverlay.classList.add('hidden');
+  if (overlayForceHideTimer) {
+    clearTimeout(overlayForceHideTimer);
+    overlayForceHideTimer = null;
+  }
+}
+
+overlayCloseBtn.addEventListener('click', hideProcessingOverlay);
+
+/* Upload */
+pdfInput.addEventListener('change', async (e) => {
+  const f = e.target.files[0];
+  if (!f) return;
+  resetAll();
+
+  const wantsOCR = ocrToggle.checked;
+  showProcessingOverlay(
+    wantsOCR ? 'Performing OCR...' : 'Processing PDF...',
+    wantsOCR
+      ? 'Running OCR (deskew + text extraction). Please wait...'
+      : 'Indexing document text. Please wait...',
+    wantsOCR
+  );
+
+  setStatus("Uploading...");
+  const fd = new FormData();
+  fd.append("pdf", f);
+  fd.append("ocr", String(wantsOCR));
+  fd.append("lang", ocrLang.value.trim() || 'eng');
+
+  let json;
+  try {
+    const res = await fetch("/api/upload", { method: "POST", body: fd });
+    json = await res.json();
+    if (!res.ok) {
+      throw new Error(json.error || "Upload / processing failed");
+    }
+  } catch (err) {
+    console.error("[upload] error:", err, json);
+    setStatus(err.message || "Upload error");
+    showOverlayError((json && json.error) ? json.error : err.message);
+    return;
+  }
+
+  currentDoc = json;
+  fileInfo.textContent = `${json.filename} (${json.pages} pages)`;
+  enableZoom();
+  enableLoadAllIfNeeded();
+
+  if (json.ocr_performed) {
+    ocrStatusNote.style.display = 'block';
+    if (json.ocr_failed) {
+      ocrStatusNote.textContent = `OCR failed: ${json.ocr_message || 'Unknown error.'}`;
+    } else {
+      ocrStatusNote.textContent = json.ocr_message || 'OCR completed.';
+    }
+  } else {
+    ocrStatusNote.style.display = 'none';
+    ocrStatusNote.textContent = '';
+  }
+
+  if (json.ocr_performed && !json.ocr_failed && json.used_ocr_pdf) {
+    try {
+      const metaRes = await fetch(`/api/doc/${json.doc_id}/meta`);
+      const metaJ = await metaRes.json();
+      if (metaRes.ok && metaJ.download_ocr_url) {
+        downloadOcrLink.href = metaJ.download_ocr_url;
+        downloadOcrLink.style.display = 'inline-flex';
+      }
+    } catch (e) {
+      console.warn("[meta] fetch failed:", e);
+    }
+  } else {
+    downloadOcrLink.style.display = 'none';
+  }
+
+  markOverlayCompleted(
+    (json.ocr_performed && !json.ocr_failed)
+      ? `OCR finished in ${(json.ocr_time_seconds || 0).toFixed(1)}s. Rendering pages...`
+      : (json.ocr_performed && json.ocr_failed)
+        ? `Rendering original pages (OCR failed).`
+        : `Rendering pages...`
+  );
+
+  try {
+    setStatus("Rendering pages...");
+    await autoRenderInitialPages();
+    setStatus("Pages ready. Enter words & press Search.");
+  } catch (renderErr) {
+    console.error("[render] error:", renderErr);
+    setStatus("Render error: " + renderErr.message);
+    showOverlayError("Render error: " + renderErr.message);
+    return;
+  } finally {
+    setTimeout(hideProcessingOverlay, 400);
+    overlayForceHideTimer = setTimeout(() => {
+      if (!processingOverlay.classList.contains('hidden')) {
+        console.warn("[overlay] force hiding after timeout");
+        hideProcessingOverlay();
+      }
+    }, 15000);
+  }
+});
+
+/* Load All Pages */
+loadAllBtn.addEventListener('click', async () => {
+  if (!currentDoc) return;
+  loadAllBtn.disabled = true;
+  setStatus("Loading remaining pages...");
+  const start = performance.now();
+  for (let p = 1; p <= currentDoc.pages; p++) {
+    await safeEnsurePage(p);
+    if (p % 5 === 0) setStatus(`Loading remaining pages ${p}/${currentDoc.pages}...`);
+  }
+  const dur = (performance.now() - start)/1000;
+  setStatus(`All pages loaded (${dur.toFixed(1)}s).`);
+});
+
+function enableLoadAllIfNeeded() {
+  if (!currentDoc) {
+    loadAllBtn.disabled = true;
+    return;
+  }
+  loadAllBtn.disabled = currentDoc.pages <= LARGE_DOC_THRESHOLD;
+}
+
+/* Initial pages */
+async function autoRenderInitialPages() {
+  if (!currentDoc) return;
+  const total = currentDoc.pages;
+  const limit = (total > LARGE_DOC_THRESHOLD) ? AUTO_LOAD_PAGES_LARGE : AUTO_LOAD_PAGES_SMALL;
+  const toLoad = Math.min(limit, total);
+  for (let p = 1; p <= toLoad; p++) {
+    await safeEnsurePage(p);
+    if (p % 3 === 0 || p === toLoad) {
+      setStatus(`Rendering pages ${p}/${toLoad}${toLoad < total ? ' (preview)' : ''}...`);
+    }
+  }
+  if (toLoad < total) {
+    setStatus(`Preview loaded (${toLoad}/${total}). Load All Pages or search.`);
+  }
+}
+
+/* Preload surrounding buffer for fast jumps */
+async function preloadJumpWindow(centerPage) {
+  const tasks = [];
+  const start = Math.max(1, centerPage - HIGHLIGHT_BUFFER_BEFORE);
+  const end   = Math.min(currentDoc.pages, centerPage + HIGHLIGHT_BUFFER_AFTER);
+  for (let p = start; p <= end; p++) {
+    if (!pageCache[p]) {
+      tasks.push(safeEnsurePage(p));
+    }
+  }
+  if (tasks.length) {
+    await Promise.all(tasks);
+  }
+}
+
+async function safeEnsurePage(pageNum) {
+  try {
+    await ensurePageLoaded(pageNum);
+  } catch (e) {
+    console.error(`[page ${pageNum}] load error:`, e);
+    setStatus(`Page ${pageNum} load error: ${e.message}`);
+  }
+}
+
+/* Search */
+searchBtn.addEventListener('click', runSearch);
+wordsInput.addEventListener('keydown', e => {
+  if (e.key === 'Enter') runSearch();
+});
+
+async function runSearch() {
+  if (!currentDoc) {
+    setStatus("Upload a PDF first.");
+    return;
+  }
+  const raw = wordsInput.value;
+  const words = parseWords(raw);
+  currentWords = words;
+  updateLegend(words);
+
+  clearAllHighlights();
+  seamlessHighlightActive = false;
+  matchPageSet.clear();
+  highlightedPages.clear();
+  currentCenterPage = null;
+
+  if (!words.length) {
+    resultsList.innerHTML = '';
+    pageText.value = '';
+    setStatus("No words entered.");
+    return;
+  }
+
+  setStatus("Searching...");
+  let data;
+  try {
+    const res = await fetch(`/api/doc/${currentDoc.doc_id}/search`, {
+      method: "POST",
+      headers: {"Content-Type":"application/json"},
+      body: JSON.stringify({words: raw})
+    });
+    data = await res.json();
+    if (!res.ok) throw new Error(data.error || "Search failed");
+  } catch (err) {
+    console.error("[search] error:", err, data);
+    setStatus(err.message);
+    return;
+  }
+  searchResults = data.results || [];
+  populateResults();
+  if (!searchResults.length) {
+    setStatus("No pages found.");
+    pageText.value = '';
+    return;
+  }
+  matchPageSet = new Set(searchResults.map(r => r.page));
+
+  const firstPage = searchResults[0].page;
+  await safeEnsurePage(firstPage);
+  currentJumpToken++; // reset jump token context
+  await preloadJumpWindow(firstPage);
+  setCenterPage(firstPage, { fromClick:true });
+  seamlessHighlightActive = true;
+  selectResultIndex(0, {preserveHighlights:true, skipScroll:true}); // we'll scroll explicitly after window built
+  scrollPageIntoView(firstPage);
+  setStatus(`Ready. Highlight window centered at page ${firstPage}.`);
+}
+
+function updateLegend(words) {
+  legend.innerHTML = '';
+  if (!words.length) {
+    legend.innerHTML = '<span class="dim">No words</span>';
+    return;
+  }
+  const sw = document.createElement('div');
+  sw.className = 'swatch';
+  legend.appendChild(sw);
+  const txt = document.createElement('div');
+  txt.textContent = words.join(', ');
+  legend.appendChild(txt);
+}
+
+function populateResults() {
+  resultsList.innerHTML = '';
+  if (!searchResults.length) {
+    const li = document.createElement('li');
+    li.textContent = '[No pages]';
+    li.classList.add('dim');
+    resultsList.appendChild(li);
+    return;
+  }
+  searchResults.forEach((r, idx) => {
+    const li = document.createElement('li');
+    const parts = [];
+    currentWords.forEach(w => {
+      const c = r.counts[w] || 0;
+      if (c) parts.push(`${w}:${c}`);
+    });
+    li.innerHTML = `<span>Pg ${r.page}</span><span style="opacity:.75">${parts.join(', ')}</span>`;
+    li.addEventListener('click', async () => {
+      const token = ++currentJumpToken;
+      setStatus(`Jumping to page ${r.page}...`);
+      // Load target + its highlight window first to avoid layout shift AFTER scroll
+      await safeEnsurePage(r.page);
+      await preloadJumpWindow(r.page);
+      if (token !== currentJumpToken) return; // aborted by newer click
+      await selectResultIndex(idx, {preserveHighlights:true, skipScroll:true});
+      setCenterPage(r.page, { fromClick:true });
+      // highlight window already loaded; updateHighlightWindow will just highlight
+      scrollPageIntoView(r.page);
+      setStatus(`Centered on page ${r.page}.`);
+    });
+    resultsList.appendChild(li);
+  });
+}
+
+async function selectResultIndex(idx, opts = {}) {
+  if (idx < 0 || idx >= searchResults.length) return;
+  [...resultsList.children].forEach((li,i)=>li.classList.toggle('active', i===idx));
+  const r = searchResults[idx];
+  currentSelectedPage = r.page;
+  await safeEnsurePage(r.page);
+  showPageText(r.page);
+
+  if (!bufferedHighlightMode) {
+    if (seamlessHighlightActive) {
+      highlightPageMatches(r.page, {append:true});
+    } else if (!opts.preserveHighlights) {
+      clearAllHighlights();
+      highlightPageMatches(r.page);
+    }
+  }
+
+  if (!opts.skipScroll) {
+    scrollPageIntoView(r.page);
+  }
+}
+
+function showPageText(pageNum) {
+  const cache = pageCache[pageNum];
+  if (!cache) return;
+  const entry = searchResults.find(r=>r.page===pageNum);
+  let summary = '';
+  if (entry) {
+    const parts = currentWords
+      .map(w => `${w}=${entry.counts[w] || 0}`)
+      .filter(x => !x.endsWith('=0'));
+    if (parts.length) summary = 'Matches: '+parts.join(', ')+'\n'+'-'.repeat(40)+'\n';
+  }
+  pageText.value = summary + cache.text;
+}
+
+function scrollPageIntoView(pageNum) {
+  const el = document.querySelector(`.page[data-page="${pageNum}"]`);
+  if (el) {
+    el.scrollIntoView({behavior:'smooth', block:'start'});
+  }
+}
+
+/* Observer */
+function ensurePageObserver() {
+  if (pageObserver) return;
+  pageObserver = new IntersectionObserver(handlePageIntersections, {
+    root: document.getElementById('pagesWrap'),
+    rootMargin: '0px',
+    threshold: [0.25, 0.5, 0.75]
+  });
+}
+
+function handlePageIntersections(entries) {
+  if (!bufferedHighlightMode || !entries.length) return;
+  if (programmaticScrollInProgress) return;
+
+  let best = null;
+  for (const e of entries) {
+    if (!e.isIntersecting) continue;
+    if (!best || e.intersectionRatio > best.intersectionRatio) {
+      best = e;
+    }
+  }
+  if (!best) return;
+  const pageNum = parseInt(best.target.dataset.page, 10);
+  if (currentCenterPage !== pageNum) {
+    if (currentCenterPage != null) {
+      scrollDirection = pageNum > currentCenterPage ? 1 : -1;
+    }
+    setCenterPage(pageNum);
+  }
+}
+
+function setCenterPage(pageNum, { fromClick=false } = {}) {
+  currentCenterPage = pageNum;
+  updateHighlightWindow();
+  if (fromClick) {
+    programmaticScrollInProgress = true;
+    setTimeout(() => { programmaticScrollInProgress = false; }, 800);
+  }
+}
+
+function updateHighlightWindow() {
+  if (!currentDoc || !bufferedHighlightMode) return;
+  if (currentCenterPage == null) return;
+
+  const start = Math.max(1, currentCenterPage - HIGHLIGHT_BUFFER_BEFORE);
+  const end   = Math.min(currentDoc.pages, currentCenterPage + HIGHLIGHT_BUFFER_AFTER);
+
+  for (const p of Array.from(highlightedPages)) {
+    if (p < start || p > end) {
+      clearHighlightsOnPage(p);
+      highlightedPages.delete(p);
+    }
+  }
+
+  const activatePage = async (p) => {
+    if (!matchPageSet.has(p)) return;
+    await safeEnsurePage(p);
+    highlightPageMatches(p, { append:false });
+    highlightedPages.add(p);
+  };
+
+  const promises = [];
+  for (let p = start; p <= end; p++) {
+    if (matchPageSet.has(p) && !highlightedPages.has(p)) {
+      if (pageCache[p]) {
+        highlightPageMatches(p, { append:false });
+        highlightedPages.add(p);
+      } else {
+        promises.push(activatePage(p));
+      }
+    } else if (!pageCache[p] && matchPageSet.has(p)) {
+      promises.push(safeEnsurePage(p).then(()=>{
+        highlightPageMatches(p,{append:false});
+        highlightedPages.add(p);
+      }));
+    }
+  }
+
+  if (scrollDirection !== 0) {
+    const aheadStart = scrollDirection > 0 ? end + 1 : start - PREFETCH_EXTRA_AHEAD;
+    const aheadEnd = scrollDirection > 0
+      ? Math.min(currentDoc.pages, end + PREFETCH_EXTRA_AHEAD)
+      : Math.max(1, start - 1);
+    for (let p = aheadStart; scrollDirection > 0 ? p <= aheadEnd : p >= aheadEnd; p += scrollDirection > 0 ? 1 : -1) {
+      if (matchPageSet.has(p) && !pageCache[p]) {
+        promises.push(safeEnsurePage(p));
+      }
+    }
+  }
+
+  Promise.all(promises).catch(e=>console.warn('[buffer] window update error', e));
+}
+
+/* Duplicate prevention + dedupe logic */
+function dedupePageDom(pageNum) {
+  const nodes = pagesDiv.querySelectorAll(`.page[data-page="${pageNum}"]`);
+  if (nodes.length <= 1) return;
+  for (let i = 0; i < nodes.length - 1; i++) nodes[i].remove();
+}
+
+async function ensurePageLoaded(pageNum) {
+  if (pageCache[pageNum]) return;
+  if (pageLoadPromises[pageNum]) return pageLoadPromises[pageNum];
+
+  pageLoadPromises[pageNum] = (async () => {
+    if (!currentDoc) return;
+    const res = await fetch(`/api/doc/${currentDoc.doc_id}/page/${pageNum}`);
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || `Failed to load page ${pageNum}`);
+
+    const pageEl = document.createElement('div');
+    pageEl.className = 'page';
+    pageEl.dataset.page = pageNum;
+
+    const img = document.createElement('img');
+    img.src = data.image_url;
+    img.alt = `Page ${pageNum}`;
+    img.decoding = 'async';
+    img.loading = 'lazy';
+    pageEl.appendChild(img);
+
+    const label = document.createElement('div');
+    label.className = 'page-label';
+    label.textContent = `Page ${pageNum}`;
+    pageEl.appendChild(label);
+
+    const overlay = document.createElement('div');
+    overlay.className = 'overlay';
+    overlay.style.position = 'absolute';
+    overlay.style.inset = '0';
+    overlay.style.pointerEvents = 'none';
+    pageEl.appendChild(overlay);
+
+    insertPageInOrder(pageEl);
+    dedupePageDom(pageNum);
+
+    pageCache[pageNum] = {
+      tokens: data.tokens,
+      text: data.text,
+      imageLoadedPromise: new Promise(resolve => {
+        img.onload = () => resolve();
+        img.onerror = () => resolve();
+      }),
+      overlay
+    };
+    await pageCache[pageNum].imageLoadedPromise;
+
+    ensurePageObserver();
+    pageObserver.observe(pageEl);
+
+    if (bufferedHighlightMode && matchPageSet.has(pageNum)) {
+      const inWindow =
+        currentCenterPage != null &&
+        pageNum >= currentCenterPage - HIGHLIGHT_BUFFER_BEFORE &&
+        pageNum <= currentCenterPage + HIGHLIGHT_BUFFER_AFTER;
+      if (inWindow) {
+        highlightPageMatches(pageNum, { append:false });
+        highlightedPages.add(pageNum);
+      }
+    } else if (seamlessHighlightActive && !bufferedHighlightMode && matchPageSet.has(pageNum)) {
+      highlightPageMatches(pageNum, {append:true});
+    }
+  })();
+
+  try {
+    await pageLoadPromises[pageNum];
+  } finally {
+    delete pageLoadPromises[pageNum];
+  }
+}
+
+function insertPageInOrder(pageEl) {
+  const num = parseInt(pageEl.dataset.page,10);
+  const existing = [...pagesDiv.querySelectorAll('.page')];
+  if (!existing.length) {
+    pagesDiv.appendChild(pageEl);
+    return;
+  }
+  for (let el of existing) {
+    const p = parseInt(el.dataset.page,10);
+    if (num < p) {
+      pagesDiv.insertBefore(pageEl, el);
+      return;
+    }
+  }
+  pagesDiv.appendChild(pageEl);
+}
+
+/* Highlighting */
+function clearAllHighlights() {
+  document.querySelectorAll('.hl-box').forEach(el => el.remove());
+}
+function clearHighlightsOnPage(pageNum) {
+  const pageEl = document.querySelector(`.page[data-page="${pageNum}"]`);
+  if (!pageEl) return;
+  pageEl.querySelectorAll('.hl-box').forEach(el => el.remove());
+}
+function highlightPageMatches(pageNum, {append=false} = {}) {
+  const cache = pageCache[pageNum];
+  if (!cache || !currentWords.length) return;
+  if (!append) clearHighlightsOnPage(pageNum);
+  const targets = new Set(currentWords);
+  const overlay = cache.overlay;
+  const frag = document.createDocumentFragment();
+  for (const tok of cache.tokens) {
+    const lt = tok.text.toLowerCase();
+    if (targets.has(lt)) {
+      const [x0,y0,x1,y1] = tok.bbox;
+      const box = document.createElement('div');
+      box.className = 'hl-box';
+      box.style.left   = (x0 * 100) + '%';
+      box.style.top    = (y0 * 100) + '%';
+      box.style.width  = ((x1 - x0) * 100) + '%';
+      box.style.height = ((y1 - y0) * 100) + '%';
+      frag.appendChild(box);
+    }
+  }
+  overlay.appendChild(frag);
+}
+
+/* Resize (no-op) */
+window.addEventListener('resize', () => {});
+
+/* Zoom */
+function enableZoom() {
+  zoomIn.disabled = false;
+  zoomOut.disabled = false;
+}
+function disableZoom() {
+  zoomIn.disabled = true;
+  zoomOut.disabled = true;
+  currentScale = 1.0;
+  zoomVal.textContent = '100%';
+  pagesDiv.style.transform = '';
+}
+zoomIn.addEventListener('click', ()=>applyZoom(currentScale + SCALE_STEP));
+zoomOut.addEventListener('click', ()=>applyZoom(currentScale - SCALE_STEP));
+
+function applyZoom(newScale) {
+  if (!currentDoc) return;
+  newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
+  if (Math.abs(newScale - currentScale) < 0.001) return;
+  currentScale = newScale;
+  zoomVal.textContent = Math.round(currentScale * 100) + '%';
+  pagesDiv.style.transformOrigin = 'top center';
+  pagesDiv.style.transform = `scale(${currentScale})`;
+}
+
+/* Sidebar resize */
+(function enableDivider() {
+  let dragging = false;
+  divider.addEventListener('mousedown', () => {
+    dragging = true;
+    document.body.style.userSelect = 'none';
+    document.documentElement.style.cursor = 'col-resize';
+  });
+  window.addEventListener('mouseup', () => {
+    if (dragging) {
+      dragging = false;
+      document.body.style.userSelect = '';
+      document.documentElement.style.cursor = '';
+    }
+  });
+  window.addEventListener('mousemove', e => {
+    if (!dragging) return;
+    const min = 220;
+    const max = Math.min(window.innerWidth * 0.6, 700);
+    const w = Math.max(min, Math.min(max, e.clientX));
+    document.documentElement.style.setProperty('--sidebar-width', w + 'px');
+  });
+})();
+
+/* Reset */
+function resetAll() {
+  currentDoc = null;
+  currentWords = [];
+  searchResults = [];
+  currentSelectedPage = null;
+  pageCache = {};
+  matchPageSet.clear();
+  seamlessHighlightActive = false;
+  highlightedPages.clear();
+  currentCenterPage = null;
+  fileInfo.textContent = '';
+  resultsList.innerHTML = '';
+  pageText.value = '';
+  legend.innerHTML = '<span class="dim">No words</span>';
+  pagesDiv.innerHTML = '';
+  disableZoom();
+  loadAllBtn.disabled = true;
+  pagesDiv.style.transform = '';
+  downloadOcrLink.style.display = 'none';
+  ocrStatusNote.style.display = 'none';
+  setStatus("Ready.");
+  if (pageObserver) {
+    pageObserver.disconnect();
+    pageObserver = null;
+  }
+  for (const k in pageLoadPromises) {
+    // Best-effort; cannot actually cancel fetch.
+  }
+}
+
+setStatus("Ready.");

static/app3.js

@@ -0,0 +1,831 @@
+/* Front-end logic: buffered highlights + background full-page loading + robust far-page jumps */
+console.log("[app] build version:", window.APP_CONFIG?.buildVersion);
+
+/* ------------- DOM Handles ------------- */
+const pdfInput = document.getElementById('pdfInput');
+const fileInfo = document.getElementById('fileInfo');
+const wordsInput = document.getElementById('wordsInput');
+const searchBtn = document.getElementById('searchBtn');
+const resultsList = document.getElementById('resultsList');
+const pageText = document.getElementById('pageText');
+const legend = document.getElementById('legend');
+const pagesDiv = document.getElementById('pages');
+const statusMsg = document.getElementById('statusMsg');
+const zoomIn = document.getElementById('zoomIn');
+const zoomOut = document.getElementById('zoomOut');
+const zoomVal = document.getElementById('zoomVal');
+const divider = document.getElementById('divider');
+const loadAllBtn = document.getElementById('loadAllBtn');
+const ocrToggle = document.getElementById('ocrToggle');
+const ocrLang = document.getElementById('ocrLang');
+const downloadOcrLink = document.getElementById('downloadOcrLink');
+const ocrStatusNote = document.getElementById('ocrStatusNote');
+
+/* Overlay */
+const processingOverlay = document.getElementById('processingOverlay');
+const processingTitle = document.getElementById('processingTitle');
+const processingDetail = document.getElementById('processingDetail');
+const processingHint = document.getElementById('processingHint');
+const processingError = document.getElementById('processingError');
+const overlayCloseBtn = document.getElementById('overlayCloseBtn');
+const processingSpinner = document.getElementById('processingSpinner');
+
+/* ------------- Global State ------------- */
+ocrToggle.checked = false;
+ocrLang.value = 'eng';
+
+let currentDoc = null;
+let currentWords = [];
+let searchResults = [];
+let currentSelectedPage = null;
+
+let pageCache = {};            // pageNum -> { tokens, text, imageLoadedPromise, overlay }
+const pageLoadPromises = {};   // in-flight load guards
+let matchPageSet = new Set();
+let seamlessHighlightActive = false;
+
+/* Highlight buffering (optimization target) */
+const HIGHLIGHT_BUFFER_BEFORE = 2;
+const HIGHLIGHT_BUFFER_AFTER  = 2;
+const PREFETCH_EXTRA_AHEAD    = 1;
+let bufferedHighlightMode = true;
+
+/* Jump & center logic */
+let currentCenterPage = null;
+let highlightedPages = new Set();
+let scrollDirection = 0; // -1 up, +1 down
+let programmaticScrollInProgress = false;
+let pageObserver = null;
+let jumpGeneration = 0; // increments each new jump request
+
+/* Page loading strategy */
+const LARGE_DOC_THRESHOLD = 80;
+const AUTO_LOAD_PAGES_LARGE = 10;
+const AUTO_LOAD_PAGES_SMALL = Infinity;
+
+/* Background full load configuration */
+const ENABLE_BACKGROUND_FULL_LOAD = true;
+const BG_LOAD_CONCURRENCY = 6;
+const BG_LOAD_STATUS_INTERVAL_MS = 1200;
+let bgLoadActive = false;
+let bgLoadedCount = 0;
+let bgTotalToLoad = 0;
+let bgLoadAbort = false;
+
+/* Zoom */
+let currentScale = 1.0;
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 2.5;
+const SCALE_STEP = 0.15;
+
+/* Overlay timers */
+let overlayCompletedTimestamp = null;
+let overlayForceHideTimer = null;
+
+/* ------------- Utility ------------- */
+function setStatus(msg) { statusMsg.textContent = msg; }
+function parseWords(raw) {
+  return raw.trim()
+    .split(/[,\s;]+/)
+    .filter(Boolean)
+    .map(w => w.toLowerCase())
+    .filter((v,i,a)=>a.indexOf(v)===i);
+}
+
+/* ------------- Overlay Helpers ------------- */
+function showProcessingOverlay(title, detail, showHint=true) {
+  processingTitle.textContent = title;
+  processingDetail.textContent = detail || '';
+  processingHint.style.display = showHint ? 'block' : 'none';
+  processingError.style.display = 'none';
+  overlayCloseBtn.style.display = 'none';
+  processingSpinner.style.display = 'block';
+  processingOverlay.classList.remove('hidden');
+  overlayCompletedTimestamp = null;
+  if (overlayForceHideTimer) {
+    clearTimeout(overlayForceHideTimer);
+    overlayForceHideTimer = null;
+  }
+}
+
+function markOverlayCompleted(successMsg) {
+  processingTitle.textContent = 'Completed';
+  processingDetail.textContent = successMsg || 'Done.';
+  processingHint.style.display = 'none';
+  processingSpinner.style.display = 'none';
+  overlayCompletedTimestamp = performance.now();
+  setTimeout(() => {
+    if (!processingOverlay.classList.contains('hidden')) {
+      overlayCloseBtn.style.display = 'inline-flex';
+    }
+  }, 2500);
+}
+
+function showOverlayError(msg) {
+  processingError.textContent = msg;
+  processingError.style.display = 'block';
+  processingSpinner.style.display = 'none';
+  processingTitle.textContent = 'Error';
+  processingHint.style.display = 'none';
+  overlayCloseBtn.style.display = 'inline-flex';
+}
+
+function hideProcessingOverlay() {
+  processingOverlay.classList.add('hidden');
+  if (overlayForceHideTimer) {
+    clearTimeout(overlayForceHideTimer);
+    overlayForceHideTimer = null;
+  }
+}
+
+overlayCloseBtn.addEventListener('click', hideProcessingOverlay);
+
+/* ------------- Upload Flow ------------- */
+pdfInput.addEventListener('change', async (e) => {
+  const f = e.target.files[0];
+  if (!f) return;
+  resetAll();
+
+  const wantsOCR = ocrToggle.checked;
+  showProcessingOverlay(
+    wantsOCR ? 'Performing OCR...' : 'Processing PDF...',
+    wantsOCR
+      ? 'Running OCR (deskew + text extraction). Please wait...'
+      : 'Indexing document text. Please wait...',
+    wantsOCR
+  );
+
+  setStatus("Uploading...");
+  const fd = new FormData();
+  fd.append("pdf", f);
+  fd.append("ocr", String(wantsOCR));
+  fd.append("lang", ocrLang.value.trim() || 'eng');
+
+  let json;
+  try {
+    const res = await fetch("/api/upload", { method: "POST", body: fd });
+    json = await res.json();
+    if (!res.ok) throw new Error(json.error || "Upload / processing failed");
+  } catch (err) {
+    console.error("[upload] error:", err, json);
+    setStatus(err.message || "Upload error");
+    showOverlayError((json && json.error) ? json.error : err.message);
+    return;
+  }
+
+  currentDoc = json;
+  fileInfo.textContent = `${json.filename} (${json.pages} pages)`;
+  enableZoom();
+  enableLoadAllIfNeeded();
+
+  // OCR status
+  if (json.ocr_performed) {
+    ocrStatusNote.style.display = 'block';
+    ocrStatusNote.textContent = json.ocr_failed
+      ? `OCR failed: ${json.ocr_message || 'Unknown error.'}`
+      : (json.ocr_message || 'OCR completed.');
+  } else {
+    ocrStatusNote.style.display = 'none';
+    ocrStatusNote.textContent = '';
+  }
+
+  // OCR Download link
+  if (json.ocr_performed && !json.ocr_failed && json.used_ocr_pdf) {
+    try {
+      const metaRes = await fetch(`/api/doc/${json.doc_id}/meta`);
+      const metaJ = await metaRes.json();
+      if (metaRes.ok && metaJ.download_ocr_url) {
+        downloadOcrLink.href = metaJ.download_ocr_url;
+        downloadOcrLink.style.display = 'inline-flex';
+      }
+    } catch (e) {
+      console.warn("[meta] fetch failed:", e);
+    }
+  } else {
+    downloadOcrLink.style.display = 'none';
+  }
+
+  markOverlayCompleted(
+    (json.ocr_performed && !json.ocr_failed)
+      ? `OCR finished in ${(json.ocr_time_seconds || 0).toFixed(1)}s. Rendering preview...`
+      : (json.ocr_performed && json.ocr_failed)
+        ? `Rendering original pages (OCR failed).`
+        : `Rendering preview...`
+  );
+
+  try {
+    setStatus("Rendering preview pages...");
+    await autoRenderInitialPages();
+    setStatus("Preview ready. Enter words & press Search.");
+  } catch (renderErr) {
+    console.error("[render] error:", renderErr);
+    setStatus("Render error: " + renderErr.message);
+    showOverlayError("Render error: " + renderErr.message);
+    return;
+  } finally {
+    setTimeout(hideProcessingOverlay, 400);
+    overlayForceHideTimer = setTimeout(() => {
+      if (!processingOverlay.classList.contains('hidden')) {
+        console.warn("[overlay] force hiding after timeout");
+        hideProcessingOverlay();
+      }
+    }, 15000);
+  }
+
+  // Start background load of remaining pages (so every page is accessible)
+  if (ENABLE_BACKGROUND_FULL_LOAD) {
+    startBackgroundFullLoad();
+  }
+});
+
+/* ------------- Background Full Page Loading ------------- */
+async function startBackgroundFullLoad() {
+  if (!currentDoc || bgLoadActive) return;
+  const total = currentDoc.pages;
+  const already = Object.keys(pageCache).length;
+  if (already >= total) return;
+  bgLoadActive = true;
+  bgLoadAbort = false;
+
+  const toFetch = [];
+  for (let p = 1; p <= total; p++) {
+    if (!pageCache[p]) toFetch.push(p);
+  }
+  bgTotalToLoad = toFetch.length;
+  bgLoadedCount = 0;
+  const concurrency = BG_LOAD_CONCURRENCY;
+  let idx = 0;
+
+  const updateStatus = () => {
+    if (!bgLoadActive) return;
+    const pct = ((bgLoadedCount / Math.max(1,bgTotalToLoad)) * 100).toFixed(1);
+    setStatus(`Background loading pages (${bgLoadedCount}/${bgTotalToLoad}) ${pct}%`);
+  };
+  const statusTimer = setInterval(updateStatus, BG_LOAD_STATUS_INTERVAL_MS);
+
+  async function worker() {
+    while (!bgLoadAbort && idx < toFetch.length) {
+      const myIndex = idx++;
+      const pageNum = toFetch[myIndex];
+      try {
+        await safeEnsurePage(pageNum);
+      } catch (e) {
+        console.warn("[bgload] error page", pageNum, e);
+      } finally {
+        bgLoadedCount++;
+      }
+    }
+  }
+
+  const workers = [];
+  for (let i=0; i<concurrency; i++) workers.push(worker());
+  await Promise.all(workers);
+  clearInterval(statusTimer);
+  if (!bgLoadAbort) {
+    setStatus("All pages loaded in background. Ready for fast navigation.");
+  }
+  bgLoadActive = false;
+}
+
+/* ------------- Load All (Manual) ------------- */
+loadAllBtn.addEventListener('click', async () => {
+  if (!currentDoc) return;
+  // If background loader active, just raise priority by immediately awaiting it
+  if (bgLoadActive) {
+    setStatus("Completing background load...");
+    bgLoadAbort = false; // ensure not aborted
+    while (bgLoadActive) {
+      await new Promise(r=>setTimeout(r,200));
+    }
+    setStatus("All pages loaded.");
+    return;
+  }
+
+  loadAllBtn.disabled = true;
+  setStatus("Loading all pages...");
+  for (let p = 1; p <= currentDoc.pages; p++) {
+    await safeEnsurePage(p);
+    if (p % 10 === 0) setStatus(`Loading all pages ${p}/${currentDoc.pages}...`);
+  }
+  setStatus("All pages loaded.");
+});
+
+function enableLoadAllIfNeeded() {
+  if (!currentDoc) {
+    loadAllBtn.disabled = true;
+    return;
+  }
+  loadAllBtn.disabled = currentDoc.pages <= LARGE_DOC_THRESHOLD;
+}
+
+/* ------------- Preview Pages ------------- */
+async function autoRenderInitialPages() {
+  if (!currentDoc) return;
+  const total = currentDoc.pages;
+  const limit = (total > LARGE_DOC_THRESHOLD) ? AUTO_LOAD_PAGES_LARGE : AUTO_LOAD_PAGES_SMALL;
+  const toLoad = Math.min(limit, total);
+  for (let p = 1; p <= toLoad; p++) {
+    await safeEnsurePage(p);
+    if (p % 3 === 0 || p === toLoad) {
+      setStatus(`Rendering pages ${p}/${toLoad}${toLoad < total ? ' (preview)' : ''}...`);
+    }
+  }
+  if (toLoad < total) {
+    setStatus(`Preview loaded (${toLoad}/${total}). Searching will still find all pages.`);
+  }
+}
+
+/* ------------- Search ------------- */
+searchBtn.addEventListener('click', runSearch);
+wordsInput.addEventListener('keydown', e => { if (e.key === 'Enter') runSearch(); });
+
+async function runSearch() {
+  if (!currentDoc) {
+    setStatus("Upload a PDF first.");
+    return;
+  }
+  const raw = wordsInput.value;
+  const words = parseWords(raw);
+  currentWords = words;
+  updateLegend(words);
+
+  clearAllHighlights();
+  seamlessHighlightActive = false;
+  matchPageSet.clear();
+  highlightedPages.clear();
+  currentCenterPage = null;
+
+  if (!words.length) {
+    resultsList.innerHTML = '';
+    pageText.value = '';
+    setStatus("No words entered.");
+    return;
+  }
+
+  setStatus("Searching...");
+  let data;
+  try {
+    const res = await fetch(`/api/doc/${currentDoc.doc_id}/search`, {
+      method: "POST",
+      headers: {"Content-Type":"application/json"},
+      body: JSON.stringify({words: raw})
+    });
+    data = await res.json();
+    if (!res.ok) throw new Error(data.error || "Search failed");
+  } catch (err) {
+    console.error("[search] error:", err, data);
+    setStatus(err.message);
+    return;
+  }
+  searchResults = data.results || [];
+  populateResults();
+  if (!searchResults.length) {
+    setStatus("No pages found.");
+    pageText.value = '';
+    return;
+  }
+  matchPageSet = new Set(searchResults.map(r => r.page));
+
+  const firstPage = searchResults[0].page;
+  await safeEnsurePage(firstPage);
+  await preloadHighlightWindow(firstPage); // ensure buffer pages ready around first
+  setCenterPage(firstPage, { fromClick:true });
+  seamlessHighlightActive = true;
+  selectResultIndex(0, {preserveHighlights:true, skipScroll:true});
+  scrollPageIntoView(firstPage);
+  setStatus(`Ready. Highlight window centered at page ${firstPage}.`);
+}
+
+function updateLegend(words) {
+  legend.innerHTML = '';
+  if (!words.length) {
+    legend.innerHTML = '<span class="dim">No words</span>';
+    return;
+  }
+  const sw = document.createElement('div');
+  sw.className = 'swatch';
+  legend.appendChild(sw);
+  const txt = document.createElement('div');
+  txt.textContent = words.join(', ');
+  legend.appendChild(txt);
+}
+
+function populateResults() {
+  resultsList.innerHTML = '';
+  if (!searchResults.length) {
+    const li = document.createElement('li');
+    li.textContent = '[No pages]';
+    li.classList.add('dim');
+    resultsList.appendChild(li);
+    return;
+  }
+
+  searchResults.forEach((r, idx) => {
+    const li = document.createElement('li');
+    const parts = [];
+    currentWords.forEach(w => {
+      const c = r.counts[w] || 0;
+      if (c) parts.push(`${w}:${c}`);
+    });
+    li.innerHTML = `<span>Pg ${r.page}</span><span style="opacity:.75">${parts.join(', ')}</span>`;
+    li.addEventListener('click', () => jumpToResultPage(idx, r.page));
+    resultsList.appendChild(li);
+  });
+}
+
+/* Far Page Jump Logic */
+async function jumpToResultPage(resultIndex, pageNum) {
+  if (!currentDoc) return;
+  jumpGeneration++;
+  const myGen = jumpGeneration;
+  setStatus(`Jumping to page ${pageNum}...`);
+  programmaticScrollInProgress = true;
+
+  // Load target page immediately
+  await safeEnsurePage(pageNum);
+  if (myGen !== jumpGeneration) return;
+
+  // Preload its highlight window (pages within buffer) in parallel (non-blocking for scroll)
+  const preloadPromise = preloadHighlightWindow(pageNum);
+
+  // Set center first so highlight window logic knows where to highlight
+  setCenterPage(pageNum, { fromClick:true });
+
+  // Select in list (without causing new scroll)
+  selectResultIndex(resultIndex, { preserveHighlights:true, skipScroll:true });
+
+  // Scroll now (image inserted already)
+  scrollPageIntoView(pageNum);
+
+  // Wait a bit for buffer loading but don't block forever
+  let timedOut = false;
+  const timeout = new Promise(resolve => setTimeout(()=>{ timedOut = true; resolve(); }, 3000));
+  await Promise.race([preloadPromise, timeout]);
+
+  if (timedOut) {
+    setStatus(`Page ${pageNum} ready (buffer still loading)`);
+  } else {
+    setStatus(`Centered on page ${pageNum}.`);
+  }
+
+  // Safety: unset programmatic scroll mode slightly later so observer can resume
+  setTimeout(()=>{ programmaticScrollInProgress = false; }, 600);
+}
+
+async function preloadHighlightWindow(centerPage) {
+  const tasks = [];
+  const start = Math.max(1, centerPage - HIGHLIGHT_BUFFER_BEFORE);
+  const end   = Math.min(currentDoc.pages, centerPage + HIGHLIGHT_BUFFER_AFTER);
+  for (let p = start; p <= end; p++) {
+    if (!pageCache[p]) tasks.push(safeEnsurePage(p));
+  }
+  if (tasks.length) await Promise.all(tasks);
+}
+
+/* Select result entry */
+async function selectResultIndex(idx, opts = {}) {
+  if (idx < 0 || idx >= searchResults.length) return;
+  [...resultsList.children].forEach((li,i)=>li.classList.toggle('active', i===idx));
+  const r = searchResults[idx];
+  currentSelectedPage = r.page;
+  await safeEnsurePage(r.page);
+  showPageText(r.page);
+
+  if (!bufferedHighlightMode) {
+    if (seamlessHighlightActive) {
+      highlightPageMatches(r.page, {append:true});
+    } else if (!opts.preserveHighlights) {
+      clearAllHighlights();
+      highlightPageMatches(r.page);
+    }
+  }
+
+  if (!opts.skipScroll) scrollPageIntoView(r.page);
+}
+
+function showPageText(pageNum) {
+  const cache = pageCache[pageNum];
+  if (!cache) return;
+  const entry = searchResults.find(r=>r.page===pageNum);
+  let summary = '';
+  if (entry) {
+    const parts = currentWords
+      .map(w => `${w}=${entry.counts[w] || 0}`)
+      .filter(x => !x.endsWith('=0'));
+    if (parts.length) summary = 'Matches: '+parts.join(', ')+'\n'+'-'.repeat(40)+'\n';
+  }
+  pageText.value = summary + cache.text;
+}
+
+function scrollPageIntoView(pageNum) {
+  const el = document.querySelector(`.page[data-page="${pageNum}"]`);
+  if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
+}
+
+/* ------------- Intersection Observer (Center Detection) ------------- */
+function ensurePageObserver() {
+  if (pageObserver) return;
+  pageObserver = new IntersectionObserver(handlePageIntersections, {
+    root: document.getElementById('pagesWrap'),
+    rootMargin: '0px',
+    threshold: [0.25, 0.5, 0.75]
+  });
+}
+
+function handlePageIntersections(entries) {
+  if (!bufferedHighlightMode || !entries.length) return;
+  if (programmaticScrollInProgress) return;
+
+  let best = null;
+  for (const e of entries) {
+    if (!e.isIntersecting) continue;
+    if (!best || e.intersectionRatio > best.intersectionRatio) {
+      best = e;
+    }
+  }
+  if (!best) return;
+  const pageNum = parseInt(best.target.dataset.page, 10);
+  if (currentCenterPage !== pageNum) {
+    if (currentCenterPage != null) {
+      scrollDirection = pageNum > currentCenterPage ? 1 : -1;
+    }
+    setCenterPage(pageNum);
+  }
+}
+
+function setCenterPage(pageNum, { fromClick=false } = {}) {
+  currentCenterPage = pageNum;
+  updateHighlightWindow();
+  if (fromClick) {
+    programmaticScrollInProgress = true;
+    setTimeout(() => { programmaticScrollInProgress = false; }, 800);
+  }
+}
+
+/* ------------- Highlight Window Update ------------- */
+function updateHighlightWindow() {
+  if (!currentDoc || !bufferedHighlightMode) return;
+  if (currentCenterPage == null) return;
+
+  const start = Math.max(1, currentCenterPage - HIGHLIGHT_BUFFER_BEFORE);
+  const end   = Math.min(currentDoc.pages, currentCenterPage + HIGHLIGHT_BUFFER_AFTER);
+
+  // Remove outside window
+  for (const p of Array.from(highlightedPages)) {
+    if (p < start || p > end) {
+      clearHighlightsOnPage(p);
+      highlightedPages.delete(p);
+    }
+  }
+
+  const promises = [];
+  for (let p = start; p <= end; p++) {
+    if (matchPageSet.has(p) && !highlightedPages.has(p)) {
+      if (pageCache[p]) {
+        highlightPageMatches(p, { append:false });
+        highlightedPages.add(p);
+      } else {
+        promises.push(safeEnsurePage(p).then(()=>{
+          if (matchPageSet.has(p)) {
+            highlightPageMatches(p,{append:false});
+            highlightedPages.add(p);
+          }
+        }));
+      }
+    }
+  }
+
+  // Directional prefetch (no highlight yet)
+  if (scrollDirection !== 0) {
+    const aheadStart = scrollDirection > 0 ? end + 1 : start - PREFETCH_EXTRA_AHEAD;
+    const aheadEnd = scrollDirection > 0
+      ? Math.min(currentDoc.pages, end + PREFETCH_EXTRA_AHEAD)
+      : Math.max(1, start - 1);
+    for (let p = aheadStart; scrollDirection > 0 ? p <= aheadEnd : p >= aheadEnd; p += scrollDirection > 0 ? 1 : -1) {
+      if (matchPageSet.has(p) && !pageCache[p]) {
+        promises.push(safeEnsurePage(p));
+      }
+    }
+  }
+
+  Promise.all(promises).catch(e=>console.warn('[buffer] window update error', e));
+}
+
+/* ------------- Page Loading (with duplicate guard) ------------- */
+async function safeEnsurePage(pageNum) {
+  try {
+    await ensurePageLoaded(pageNum);
+  } catch (e) {
+    console.error(`[page ${pageNum}] load error:`, e);
+    setStatus(`Page ${pageNum} load error: ${e.message}`);
+    throw e;
+  }
+}
+
+function dedupePageDom(pageNum) {
+  const nodes = pagesDiv.querySelectorAll(`.page[data-page="${pageNum}"]`);
+  if (nodes.length <= 1) return;
+  // Keep last
+  for (let i = 0; i < nodes.length - 1; i++) nodes[i].remove();
+}
+
+async function ensurePageLoaded(pageNum) {
+  if (pageCache[pageNum]) return;
+  if (pageLoadPromises[pageNum]) return pageLoadPromises[pageNum];
+
+  pageLoadPromises[pageNum] = (async () => {
+    if (!currentDoc) return;
+    const res = await fetch(`/api/doc/${currentDoc.doc_id}/page/${pageNum}`);
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || `Failed to load page ${pageNum}`);
+
+    const pageEl = document.createElement('div');
+    pageEl.className = 'page';
+    pageEl.dataset.page = pageNum;
+
+    const img = document.createElement('img');
+    img.src = data.image_url;
+    img.alt = `Page ${pageNum}`;
+    img.decoding = 'async';
+    img.loading = 'lazy';
+    pageEl.appendChild(img);
+
+    const label = document.createElement('div');
+    label.className = 'page-label';
+    label.textContent = `Page ${pageNum}`;
+    pageEl.appendChild(label);
+
+    const overlay = document.createElement('div');
+    overlay.className = 'overlay';
+    overlay.style.position = 'absolute';
+    overlay.style.inset = '0';
+    overlay.style.pointerEvents = 'none';
+    pageEl.appendChild(overlay);
+
+    insertPageInOrder(pageEl);
+    dedupePageDom(pageNum);
+
+    pageCache[pageNum] = {
+      tokens: data.tokens,
+      text: data.text,
+      imageLoadedPromise: new Promise(resolve => {
+        img.onload = () => resolve();
+        img.onerror = () => resolve();
+      }),
+      overlay
+    };
+
+    await pageCache[pageNum].imageLoadedPromise;
+
+    ensurePageObserver();
+    pageObserver.observe(pageEl);
+
+    if (bufferedHighlightMode && matchPageSet.has(pageNum)) {
+      const inWindow =
+        currentCenterPage != null &&
+        pageNum >= currentCenterPage - HIGHLIGHT_BUFFER_BEFORE &&
+        pageNum <= currentCenterPage + HIGHLIGHT_BUFFER_AFTER;
+      if (inWindow) {
+        highlightPageMatches(pageNum, { append:false });
+        highlightedPages.add(pageNum);
+      }
+    } else if (seamlessHighlightActive && !bufferedHighlightMode && matchPageSet.has(pageNum)) {
+      highlightPageMatches(pageNum, {append:true});
+    }
+  })();
+
+  try {
+    await pageLoadPromises[pageNum];
+  } finally {
+    delete pageLoadPromises[pageNum];
+  }
+}
+
+function insertPageInOrder(pageEl) {
+  const num = parseInt(pageEl.dataset.page,10);
+  const existing = [...pagesDiv.querySelectorAll('.page')];
+  if (!existing.length) {
+    pagesDiv.appendChild(pageEl);
+    return;
+  }
+  for (let el of existing) {
+    const p = parseInt(el.dataset.page,10);
+    if (num < p) {
+      pagesDiv.insertBefore(pageEl, el);
+      return;
+    }
+  }
+  pagesDiv.appendChild(pageEl);
+}
+
+/* ------------- Highlighting (percentage-based) ------------- */
+function clearAllHighlights() {
+  document.querySelectorAll('.hl-box').forEach(el => el.remove());
+}
+function clearHighlightsOnPage(pageNum) {
+  const pageEl = document.querySelector(`.page[data-page="${pageNum}"]`);
+  if (!pageEl) return;
+  pageEl.querySelectorAll('.hl-box').forEach(el => el.remove());
+}
+function highlightPageMatches(pageNum, {append=false} = {}) {
+  const cache = pageCache[pageNum];
+  if (!cache || !currentWords.length) return;
+  if (!append) clearHighlightsOnPage(pageNum);
+  const targets = new Set(currentWords);
+  const overlay = cache.overlay;
+  const frag = document.createDocumentFragment();
+  for (const tok of cache.tokens) {
+    const lt = tok.text.toLowerCase();
+    if (targets.has(lt)) {
+      const [x0,y0,x1,y1] = tok.bbox;
+      const box = document.createElement('div');
+      box.className = 'hl-box';
+      box.style.left   = (x0 * 100) + '%';
+      box.style.top    = (y0 * 100) + '%';
+      box.style.width  = ((x1 - x0) * 100) + '%';
+      box.style.height = ((y1 - y0) * 100) + '%';
+      frag.appendChild(box);
+    }
+  }
+  overlay.appendChild(frag);
+}
+
+/* ------------- Resize (no-op for percentage highlights) ------------- */
+window.addEventListener('resize', () => {});
+
+/* ------------- Zoom ------------- */
+function enableZoom() { zoomIn.disabled = false; zoomOut.disabled = false; }
+function disableZoom() {
+  zoomIn.disabled = true;
+  zoomOut.disabled = true;
+  currentScale = 1.0;
+  zoomVal.textContent = '100%';
+  pagesDiv.style.transform = '';
+}
+zoomIn.addEventListener('click', ()=>applyZoom(currentScale + SCALE_STEP));
+zoomOut.addEventListener('click', ()=>applyZoom(currentScale - SCALE_STEP));
+function applyZoom(newScale) {
+  if (!currentDoc) return;
+  newScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, newScale));
+  if (Math.abs(newScale - currentScale) < 0.001) return;
+  currentScale = newScale;
+  zoomVal.textContent = Math.round(currentScale * 100) + '%';
+  pagesDiv.style.transformOrigin = 'top center';
+  pagesDiv.style.transform = `scale(${currentScale})`;
+}
+
+/* ------------- Sidebar Resize ------------- */
+(function enableDivider() {
+  let dragging = false;
+  divider.addEventListener('mousedown', () => {
+    dragging = true;
+    document.body.style.userSelect = 'none';
+    document.documentElement.style.cursor = 'col-resize';
+  });
+  window.addEventListener('mouseup', () => {
+    if (dragging) {
+      dragging = false;
+      document.body.style.userSelect = '';
+      document.documentElement.style.cursor = '';
+    }
+  });
+  window.addEventListener('mousemove', e => {
+    if (!dragging) return;
+    const min = 220;
+    const max = Math.min(window.innerWidth * 0.6, 700);
+    const w = Math.max(min, Math.min(max, e.clientX));
+    document.documentElement.style.setProperty('--sidebar-width', w + 'px');
+  });
+})();
+
+/* ------------- Reset ------------- */
+function resetAll() {
+  currentDoc = null;
+  currentWords = [];
+  searchResults = [];
+  currentSelectedPage = null;
+  pageCache = {};
+  matchPageSet.clear();
+  seamlessHighlightActive = false;
+  highlightedPages.clear();
+  currentCenterPage = null;
+  fileInfo.textContent = '';
+  resultsList.innerHTML = '';
+  pageText.value = '';
+  legend.innerHTML = '<span class="dim">No words</span>';
+  pagesDiv.innerHTML = '';
+  disableZoom();
+  loadAllBtn.disabled = true;
+  pagesDiv.style.transform = '';
+  downloadOcrLink.style.display = 'none';
+  ocrStatusNote.style.display = 'none';
+  setStatus("Ready.");
+  if (pageObserver) {
+    pageObserver.disconnect();
+    pageObserver = null;
+  }
+  bgLoadAbort = true;
+  bgLoadActive = false;
+}
+
+setStatus("Ready.");

static/style.css

@@ -0,0 +1,240 @@
+:root {
+  --accent: #ffa800;
+  --accent-alt: #ffb94d;
+  --bg: #1e1f24;
+  --bg-alt: #272a33;
+  --bg-soft: #303542;
+  --border: #3c4250;
+  --text: #e5e8ef;
+  --text-dim: #b2b8c6;
+  --radius: 8px;
+  --sidebar-width: 360px;
+  --page-aspect-w: 612;
+  --page-aspect-h: 792;
+}
+* { box-sizing: border-box; }
+html, body {
+  margin:0; height:100%;
+  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
+  background:var(--bg); color:var(--text);
+}
+body { display:flex; flex-direction:column; overflow:hidden; }
+header {
+  background:linear-gradient(90deg,var(--bg-alt),var(--bg-soft));
+  padding:10px 16px;
+  display:flex; flex-direction:column; gap:10px;
+  box-shadow:0 4px 10px -2px rgba(0,0,0,.4);
+}
+header h1 { margin:0; font-size:18px; letter-spacing:.5px; }
+.controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
+.controls .block { display:flex; align-items:center; gap:8px; }
+.controls .grow { flex:1; min-width:220px; }
+
+input[type=text] {
+  width:100%; padding:8px 10px;
+  border:1px solid var(--border); border-radius:6px;
+  background:var(--bg-soft); color:var(--text);
+  font-size:14px; outline:none;
+}
+input[type=text]:focus { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
+
+.btn,.btn-secondary,button {
+  cursor:pointer; border:none; border-radius:6px;
+  padding:8px 14px; font-size:14px;
+  display:inline-flex; align-items:center;
+  font-weight:600;
+}
+.btn,button.primary { background:var(--accent); color:#222; }
+.btn:hover,button.primary:hover { background:var(--accent-alt); }
+.btn-secondary {
+  background:#444; color:#eee; font-weight:500;
+  box-shadow:0 2px 6px -1px rgba(0,0,0,.5);
+  text-decoration:none;
+}
+.btn-secondary:hover { background:#555; }
+button {
+  background:var(--bg-soft); color:var(--text); font-weight:500;
+  border:1px solid var(--border);
+}
+button:hover { background:#3b414f; }
+button:disabled { opacity:.5; cursor:not-allowed; }
+
+#layout { flex:1; display:grid; grid-template-columns: var(--sidebar-width) 6px 1fr; min-height:0; }
+#sidebar {
+  overflow:auto; padding:14px;
+  display:flex; flex-direction:column; gap:20px;
+  background:var(--bg-alt);
+}
+#divider {
+  background:linear-gradient(180deg,var(--bg-alt),var(--bg-soft));
+  cursor:col-resize; position:relative;
+}
+#divider:after {
+  content:""; position:absolute; left:50%; top:50%;
+  width:4px; height:42px; transform:translate(-50%,-50%);
+  background:var(--border); border-radius:2px;
+}
+
+section h2 {
+  margin:0 0 6px; font-size:13px;
+  text-transform:uppercase; letter-spacing:1px;
+  font-weight:600; color:var(--text-dim);
+}
+
+.legend {
+  background:var(--bg-soft); padding:8px 10px;
+  border:1px solid var(--border); border-radius:6px;
+  min-height:42px; font-size:13px;
+  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
+}
+.swatch {
+  width:24px; height:14px; background:var(--accent);
+  border:1px solid #0006; border-radius:3px;
+  box-shadow:0 0 0 1px #0004;
+}
+
+.results {
+  list-style:none; margin:0; padding:0;
+  border:1px solid var(--border); border-radius:6px;
+  background:var(--bg-soft); max-height:250px; overflow:auto;
+}
+.results li {
+  padding:6px 10px; font-size:13px;
+  display:flex; justify-content:space-between; gap:10px;
+  border-bottom:1px solid #ffffff08;
+  cursor:pointer; transition:background .15s;
+}
+.results li:last-child { border-bottom:none; }
+.results li:hover { background:#ffffff08; }
+.results li.active { background:var(--accent); color:#222; font-weight:600; }
+
+.note { font-size:11.5px; color:var(--text-dim); margin:6px 0 0; line-height:1.4; }
+
+textarea#pageText {
+  width:100%; min-height:200px; resize:vertical;
+  background:var(--bg-soft); color:var(--text);
+  border:1px solid var(--border); border-radius:6px;
+  padding:10px 12px; font-size:12.5px;
+  line-height:1.4;
+  font-family:ui-monospace,SFMono-Regular,Consolas,"Roboto Mono",monospace;
+}
+
+#pagesWrap { overflow:auto; background:#16171b; }
+#pages {
+  padding:24px clamp(16px,4vw,60px);
+  display:flex; flex-direction:column;
+  gap:36px; align-items:center;
+}
+
+.page {
+  position:relative;
+  width:100%;
+  max-width:1200px;
+  background:#000;
+  border-radius:4px;
+  box-shadow:0 4px 24px -4px #000a,0 0 0 1px #000;
+  overflow:hidden;
+  aspect-ratio: var(--page-aspect-w) / var(--page-aspect-h);
+}
+
+.page.placeholder {
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:linear-gradient(135deg,#222 0%,#2d3038 60%);
+  color:#666;
+  font-size:12px;
+}
+
+.page.placeholder .page-inner {
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:10px;
+}
+
+.placeholder-label {
+  font-weight:600;
+  letter-spacing:.5px;
+  opacity:.85;
+}
+
+.placeholder-spinner {
+  width:42px; height:42px;
+  border:5px solid #ffffff14;
+  border-top:5px solid var(--accent);
+  border-right:5px solid var(--accent);
+  border-radius:50%;
+  animation:spin 0.9s linear infinite;
+  box-shadow:0 0 6px -1px #000;
+}
+
+.page img { display:block; width:100%; height:100%; object-fit:cover; }
+
+.page-label {
+  position:absolute; top:0; left:0;
+  padding:4px 8px; margin:6px;
+  background:rgba(0,0,0,.55);
+  color:#fff; font-size:12px;
+  letter-spacing:.5px; border-radius:4px;
+  font-weight:600; pointer-events:none;
+}
+
+.hl-box {
+  position:absolute;
+  border:2px solid var(--accent);
+  background:rgba(255,168,0,0.28);
+  border-radius:2px;
+  box-shadow:0 0 0 1px #0005;
+  pointer-events:none;
+}
+
+#statusBar {
+  position:fixed; bottom:10px; left:12px;
+  background:rgba(15,16,20,.85);
+  backdrop-filter:blur(4px);
+  color:var(--text); font-size:12.5px;
+  padding:6px 12px;
+  border-radius:32px;
+  border:1px solid var(--border);
+  box-shadow:0 4px 12px -2px rgba(0,0,0,.55);
+  z-index:100;
+}
+
+#processingOverlay {
+  position:fixed; inset:0;
+  background:rgba(12,14,18,0.94);
+  backdrop-filter:blur(6px);
+  display:flex; align-items:center; justify-content:center;
+  flex-direction:column;
+  z-index:400;
+  padding:40px 30px;
+  text-align:center;
+}
+#processingOverlay.hidden { display:none; }
+#processingOverlay .overlay-content {
+  max-width:520px;
+  display:flex; flex-direction:column;
+  align-items:center; gap:18px;
+}
+.spinner {
+  width:60px; height:60px;
+  border:6px solid #ffffff18;
+  border-top:6px solid var(--accent);
+  border-right:6px solid var(--accent);
+  border-radius:50%;
+  animation:spin 0.9s linear infinite;
+}
+@keyframes spin { to { transform:rotate(360deg);} }
+
+.detail { font-size:14px; color:var(--text-dim); margin:0; line-height:1.5; }
+.hint { font-size:12px; color:var(--text-dim); margin:0; }
+
+.dim { opacity:.6; }
+
+@media (max-width:1100px) {
+  #layout { grid-template-columns: minmax(0,1fr); grid-auto-rows:auto; }
+  #divider { display:none; }
+  #sidebar { order:1; max-height:42vh; }
+  #pagesWrap { order:2; }
+}

templates/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>PDF Exact Word Page Finder (OCR)</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="/static/style.css">
+<script>
+window.APP_CONFIG = {
+  highlightColor: "{{ highlight_color }}",
+  buildVersion: "buffered-highlights-2"
+};
+</script>
+<style>
+#processingOverlay .close-btn {
+  display:none;
+  margin-top:4px;
+  background:#444;
+  color:#eee;
+  padding:6px 14px;
+  border-radius:20px;
+  font-size:13px;
+  cursor:pointer;
+  border:1px solid #666;
+}
+#processingOverlay .close-btn:hover { background:#555; }
+#processingOverlay .error-line {
+  font-size:12px;
+  color:#ff6666;
+  margin:0;
+  display:none;
+  max-width:480px;
+  word-break:break-word;
+}
+</style>
+</head>
+<body>
+<header>
+  <h1>PDF Exact Word Page Finder</h1>
+  <div class="controls">
+    <div class="block">
+      <label class="btn">
+        <input type="file" id="pdfInput" accept="application/pdf" hidden>
+        <span>Upload PDF</span>
+      </label>
+      <span id="fileInfo" class="dim"></span>
+    </div>
+
+    <div class="block">
+      <label style="display:flex;align-items:center;gap:4px;font-size:12px;">
+        <input type="checkbox" id="ocrToggle">
+        OCR
+      </label>
+      <input type="text" id="ocrLang" placeholder="eng" style="width:80px;">
+    </div>
+
+    <div class="block grow">
+      <input type="text" id="wordsInput" placeholder="Enter words (space / comma separated)" autocomplete="off">
+    </div>
+
+    <button id="searchBtn" class="primary">Search</button>
+
+    <div class="block">
+      <button id="zoomOut" disabled>-</button>
+      <span id="zoomVal">100%</span>
+      <button id="zoomIn" disabled>+</button>
+    </div>
+
+    <div class="block">
+      <button id="loadAllBtn" disabled title="Load any remaining pages">Load All Pages</button>
+    </div>
+
+    <div class="block">
+      <a id="downloadOcrLink" class="btn btn-secondary" style="display:none;">Download OCR PDF</a>
+    </div>
+  </div>
+</header>
+
+<main id="layout">
+  <aside id="sidebar">
+    <section>
+      <h2>Legend</h2>
+      <div id="legend" class="legend"><span class="dim">No words</span></div>
+    </section>
+    <section>
+      <h2>Pages with Matches</h2>
+      <ul id="resultsList" class="results"></ul>
+      <p class="note">Case-insensitive whole-token matching.</p>
+      <p class="note" id="ocrStatusNote" style="display:none;"></p>
+    </section>
+    <section>
+      <h2>Page Text</h2>
+      <textarea id="pageText" placeholder="Select a page result"></textarea>
+    </section>
+  </aside>
+  <div id="divider" title="Drag to resize sidebar"></div>
+  <section id="pagesWrap">
+    <div id="pages"></div>
+  </section>
+</main>
+
+<div id="statusBar"><span id="statusMsg">Ready.</span></div>
+
+<div id="processingOverlay" class="hidden" aria-live="polite">
+  <div class="overlay-content">
+    <div class="spinner" id="processingSpinner"></div>
+    <h2 id="processingTitle">Processing PDF...</h2>
+    <p id="processingDetail" class="detail"></p>
+    <p class="hint" id="processingHint">
+      Do not close this tab. OCR can take time on large or scanned PDFs.
+    </p>
+    <p class="error-line" id="processingError"></p>
+    <button type="button" id="overlayCloseBtn" class="close-btn">Close</button>
+  </div>
+</div>
+
+<script src="/static/app.js?v=buffered-highlights-2"></script>
+</body>
+</html>