Upload folder using huggingface_hub

.dockerignore

@@ -0,0 +1,6 @@
+__pycache__
+*.pyc
+.ruff_cache
+.git
+*.png
+*.cast

.ruff_cache/.gitignore

@@ -0,0 +1,2 @@
+# Automatically created by ruff.
+*

.ruff_cache/CACHEDIR.TAG

@@ -0,0 +1 @@
+Signature: 8a477f597d28d172789f06886806bc55

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.11-slim
+
+# Install uv from official image
+COPY --from=ghcr.io/astral-sh/uv:0.9.30 /uv /bin/uv
+
+ENV HF_HUB_ENABLE_HF_TRANSFER=1
+
+# Install dependencies — CPU-only torch via extra index
+COPY requirements.in /tmp/requirements.in
+RUN --mount=type=cache,target=/root/.cache/uv \
+    uv pip install --system \
+    --extra-index-url https://download.pytorch.org/whl/cpu \
+    -r /tmp/requirements.in
+
+# Create non-root user (HF Spaces runs as user ID 1000)
+RUN useradd -m -u 1000 user
+USER user
+
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+# Copy application
+COPY --chown=user . .
+
+# HF Spaces expects port 7860
+EXPOSE 7860
+
+CMD ["python", "app.py", "--from-hub", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,30 @@
 ---
-title: Bpl Card Catalog
-emoji: 😻
+title: BPL Card Catalog Search
+emoji: 🗃️
 colorFrom: gray
-colorTo: gray
+colorTo: yellow
 sdk: docker
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# BPL Card Catalog Search
+
+Search and browse ~453,000 digitized catalog cards from the Boston Public Library's Rare Books & Manuscripts Department.
+
+Uses AI-powered OCR (small vision-language models) to make handwritten and typewritten catalog cards searchable for the first time.
+
+## Features
+
+- **Semantic search** — find cards by meaning, not just keywords
+- **Keyword search** — full-text search across OCR transcriptions
+- **Compare OCR** — see old Tesseract vs new VLM OCR results side by side
+- **Browse by drawer** — navigate the physical organization of the catalog
+- **Image lightbox** — click any card image to view full-size
+
+## Stack
+
+- FastAPI + HTMX + Jinja2
+- LanceDB (vector + full-text search)
+- sentence-transformers (BAAI/bge-base-en-v1.5)
+- Dataset: Lance format on HF Hub

app.py

@@ -0,0 +1,496 @@
+# /// script
+# requires-python = ">=3.11"
+# dependencies = [
+#     "lancedb>=0.17",
+#     "fastapi>=0.115",
+#     "uvicorn[standard]>=0.32",
+#     "jinja2>=3.1",
+#     "sentence-transformers",
+#     "pillow",
+#     "huggingface-hub",
+# ]
+# ///
+"""
+BPL Card Catalog — OCR Search Comparison
+
+FastAPI + HTMX app comparing old (Tesseract) and new (GLM-OCR) search
+results side by side. Clean, Tufte-inspired design.
+
+Usage (local dev):
+    uv run app.py --db-path ../bpl-lance-db
+
+Usage (HF Spaces / Hub dataset):
+    uv run app.py --from-hub davanstrien/bpl-card-catalog-lance
+"""
+
+from __future__ import annotations
+
+import argparse
+import io
+import os
+import random
+from pathlib import Path
+
+import lancedb
+import uvicorn
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from huggingface_hub import snapshot_download
+from PIL import Image
+from sentence_transformers import SentenceTransformer
+
+DEFAULT_HUB_REPO = "davanstrien/bpl-card-catalog-lance"
+DB_PATH = "../bpl-lance-db"
+TABLE_NAME = "cards"
+EMBEDDING_MODEL = "BAAI/bge-base-en-v1.5"
+SPOTLIGHT_COUNT = 3
+
+OLD_OCR_LABEL = "Tesseract"
+NEW_OCR_LABEL = "VLM OCR"
+
+APP_DIR = Path(__file__).parent
+TEMPLATES_DIR = APP_DIR / "templates"
+STATIC_DIR = APP_DIR / "static"
+
+EXAMPLE_QUERIES = [
+    "abolitionism",
+    "Civil War letters",
+    "Shakespeare plays",
+    "Boston history",
+    "illuminated manuscripts",
+    "African American history",
+    "French literature",
+    "music composition",
+    "botanical illustrations",
+    "theater history",
+]
+
+SELECT_COLS = [
+    "drawer_id",
+    "card_number",
+    "text",
+    "markdown",
+    "source_url",
+    "image",
+]
+
+
+def truncate(text: str, n: int = 800) -> str:
+    if not text:
+        return "(empty)"
+    return text[:n] + ("\u2026" if len(text) > n else "")
+
+
+def parse_drawer_id(drawer_id: str) -> tuple[str, str]:
+    """'145-great-britain-acts' -> ('145', 'Great Britain Acts')"""
+    parts = drawer_id.split("-", 1)
+    num = parts[0]
+    label = (
+        parts[1].replace("-", " ").replace(".", " ").strip().title()
+        if len(parts) > 1
+        else ""
+    )
+    return num, label
+
+
+def create_app(db_path: str = DB_PATH) -> FastAPI:
+    app = FastAPI(title="BPL Card Catalog — OCR Search Comparison")
+    app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+    templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
+
+    db = lancedb.connect(db_path)
+    table = db.open_table(TABLE_NAME)
+    model = SentenceTransformer(EMBEDDING_MODEL)
+    total_cards = table.count_rows()
+
+    # -- Build drawer index at startup --
+    all_rows = table.search().select(["drawer_id"]).limit(total_cards).to_list()
+    drawer_counts: dict[str, int] = {}
+    for row in all_rows:
+        did = row["drawer_id"]
+        drawer_counts[did] = drawer_counts.get(did, 0) + 1
+
+    drawer_list: list[dict] = []
+    for did, count in drawer_counts.items():
+        num, label = parse_drawer_id(did)
+        drawer_list.append(
+            {"drawer_id": did, "drawer_num": num, "drawer_label": label, "count": count}
+        )
+    drawer_list.sort(
+        key=lambda d: (
+            int(d["drawer_num"]) if d["drawer_num"].isdigit() else 9999,
+            d["drawer_id"],
+        )
+    )
+    known_drawer_ids = {d["drawer_id"] for d in drawer_list}
+
+    # -- Image cache (row_idx -> JPEG bytes) --
+    image_cache: dict[int, bytes] = {}
+
+    def _get_image_bytes(row_idx: int) -> bytes | None:
+        if row_idx in image_cache:
+            return image_cache[row_idx]
+        rows = (
+            table.search()
+            .where(f"_rowid = {row_idx}")
+            .select(["image"])
+            .limit(1)
+            .to_list()
+        )
+        if not rows:
+            return None
+        image_cache[row_idx] = rows[0]["image"]
+        return rows[0]["image"]
+
+    # -- Search functions --
+
+    def search_old_vector(query: str, limit: int) -> list[dict]:
+        q_vec = model.encode(query, normalize_embeddings=True).tolist()
+        return (
+            table.search(q_vec, vector_column_name="old_ocr_embedding")
+            .select(SELECT_COLS)
+            .limit(limit)
+            .to_list()
+        )
+
+    def search_new_vector(query: str, limit: int) -> list[dict]:
+        q_vec = model.encode(query, normalize_embeddings=True).tolist()
+        return (
+            table.search(q_vec, vector_column_name="new_ocr_embedding")
+            .select(SELECT_COLS)
+            .limit(limit)
+            .to_list()
+        )
+
+    def search_old_fts(query: str, limit: int) -> list[dict]:
+        return (
+            table.search(query, query_type="fts", fts_columns="text")
+            .select(SELECT_COLS)
+            .limit(limit)
+            .to_list()
+        )
+
+    def search_new_fts(query: str, limit: int) -> list[dict]:
+        return (
+            table.search(query, query_type="fts", fts_columns="markdown")
+            .select(SELECT_COLS)
+            .limit(limit)
+            .to_list()
+        )
+
+    def format_results(
+        results: list[dict],
+        ocr_field: str,
+        other_field: str,
+        ocr_label: str,
+        compare_label: str,
+    ) -> list[dict]:
+        formatted = []
+        for i, row in enumerate(results):
+            score = (
+                row.get("_distance") or row.get("_score") or row.get("_relevance_score")
+            )
+            # Cache image bytes using a simple incrementing key
+            row_idx = len(image_cache)
+            if isinstance(row.get("image"), bytes):
+                image_cache[row_idx] = row["image"]
+
+            drawer_id = row.get("drawer_id", "?")
+            drawer_num, drawer_label = parse_drawer_id(drawer_id)
+
+            formatted.append(
+                {
+                    "rank": i + 1,
+                    "row_idx": row_idx,
+                    "drawer_id": drawer_id,
+                    "drawer_num": drawer_num,
+                    "drawer_label": drawer_label,
+                    "card_number": row.get("card_number", "?"),
+                    "ocr_text": truncate(row.get(ocr_field, ""), 800),
+                    "other_ocr": truncate(row.get(other_field, ""), 800),
+                    "ocr_label": ocr_label,
+                    "compare_label": compare_label,
+                    "score": f"{score:.4f}" if score is not None else "",
+                    "source_url": row.get("source_url", ""),
+                }
+            )
+        return formatted
+
+    # -- Routes --
+
+    @app.get("/", response_class=HTMLResponse)
+    async def index(request: Request):
+        return templates.TemplateResponse(
+            request,
+            "index.html",
+            {
+                "total_cards": f"{total_cards:,}",
+                "examples": EXAMPLE_QUERIES,
+                "query": "",
+                "mode": "vector",
+                "limit": 10,
+                "old_ocr_label": OLD_OCR_LABEL,
+                "new_ocr_label": NEW_OCR_LABEL,
+            },
+        )
+
+    @app.get("/search", response_class=HTMLResponse)
+    async def search(
+        request: Request,
+        query: str = "",
+        mode: str = "vector",
+        limit: int = 5,
+    ):
+        limit = max(1, min(20, limit))
+
+        if not query.strip():
+            return templates.TemplateResponse(
+                request,
+                "results.html",
+                {"query": "", "total_cards": f"{total_cards:,}"},
+            )
+
+        if mode == "fts":
+            old_raw = search_old_fts(query, limit)
+            new_raw = search_new_fts(query, limit)
+        else:
+            old_raw = search_old_vector(query, limit)
+            new_raw = search_new_vector(query, limit)
+
+        old_label = f"Old OCR ({OLD_OCR_LABEL})"
+        new_label = f"New OCR ({NEW_OCR_LABEL})"
+
+        old_results = format_results(
+            old_raw,
+            "text",
+            "markdown",
+            old_label,
+            new_label,
+        )
+        new_results = format_results(
+            new_raw,
+            "markdown",
+            "text",
+            new_label,
+            old_label,
+        )
+
+        return templates.TemplateResponse(
+            request,
+            "results.html",
+            {
+                "query": query,
+                "mode": mode,
+                "old_results": old_results,
+                "new_results": new_results,
+                "total_cards": f"{total_cards:,}",
+                "old_ocr_label": OLD_OCR_LABEL,
+                "new_ocr_label": NEW_OCR_LABEL,
+            },
+        )
+
+    @app.get("/search-single", response_class=HTMLResponse)
+    async def search_single(
+        request: Request,
+        query: str = "",
+        mode: str = "vector",
+        limit: int = 10,
+    ):
+        limit = max(1, min(20, limit))
+
+        if not query.strip():
+            return templates.TemplateResponse(
+                request,
+                "results-search.html",
+                {"query": "", "total_cards": f"{total_cards:,}"},
+            )
+
+        if mode == "fts":
+            raw = search_new_fts(query, limit)
+        else:
+            raw = search_new_vector(query, limit)
+
+        new_label = f"New OCR ({NEW_OCR_LABEL})"
+        old_label = f"Old OCR ({OLD_OCR_LABEL})"
+        results = format_results(raw, "markdown", "text", new_label, old_label)
+
+        return templates.TemplateResponse(
+            request,
+            "results-search.html",
+            {
+                "query": query,
+                "mode": mode,
+                "results": results,
+                "total_cards": f"{total_cards:,}",
+            },
+        )
+
+    @app.get("/random-cards", response_class=HTMLResponse)
+    async def random_cards(request: Request):
+        indices = random.sample(
+            range(total_cards), min(SPOTLIGHT_COUNT, total_cards)
+        )
+        cards = []
+        for idx in indices:
+            rows = (
+                table.search().select(SELECT_COLS).limit(1).offset(idx).to_list()
+            )
+            if not rows:
+                continue
+            row = rows[0]
+            row_idx = len(image_cache)
+            if isinstance(row.get("image"), bytes):
+                image_cache[row_idx] = row["image"]
+            drawer_id = row.get("drawer_id", "?")
+            drawer_num, drawer_label = parse_drawer_id(drawer_id)
+            cards.append(
+                {
+                    "row_idx": row_idx,
+                    "drawer_id": drawer_id,
+                    "drawer_num": drawer_num,
+                    "drawer_label": drawer_label,
+                    "card_number": row.get("card_number", "?"),
+                    "ocr_text": truncate(row.get("markdown", ""), 200),
+                    "source_url": row.get("source_url", ""),
+                }
+            )
+        return templates.TemplateResponse(
+            request, "spotlight.html", {"cards": cards}
+        )
+
+    @app.get("/drawers", response_class=HTMLResponse)
+    async def drawers_index(request: Request):
+        return templates.TemplateResponse(
+            request,
+            "drawers.html",
+            {
+                "drawers": drawer_list,
+                "total_drawers": len(drawer_list),
+                "total_cards": f"{total_cards:,}",
+            },
+        )
+
+    @app.get("/drawer/{drawer_id}", response_class=HTMLResponse)
+    async def drawer_detail(request: Request, drawer_id: str):
+        # Validate against known drawer IDs to prevent injection
+        if drawer_id not in known_drawer_ids:
+            return HTMLResponse("Drawer not found", status_code=404)
+
+        rows = (
+            table.search()
+            .where(f"drawer_id = '{drawer_id}'", prefilter=True)
+            .select(SELECT_COLS)
+            .limit(2000)
+            .to_list()
+        )
+        rows.sort(key=lambda r: r.get("card_number", 0))
+
+        cards = []
+        for i, row in enumerate(rows):
+            row_idx = len(image_cache)
+            if isinstance(row.get("image"), bytes):
+                image_cache[row_idx] = row["image"]
+            cards.append(
+                {
+                    "card_number": row.get("card_number", i),
+                    "row_idx": row_idx,
+                    "ocr_text": truncate(row.get("markdown", ""), 800),
+                    "source_url": row.get("source_url", ""),
+                }
+            )
+
+        # Prev/next drawer navigation
+        idx = next(
+            (i for i, d in enumerate(drawer_list) if d["drawer_id"] == drawer_id), -1
+        )
+        prev_drawer = drawer_list[idx - 1] if idx > 0 else None
+        next_drawer = drawer_list[idx + 1] if idx < len(drawer_list) - 1 else None
+        drawer_num, drawer_label = parse_drawer_id(drawer_id)
+
+        return templates.TemplateResponse(
+            request,
+            "drawer.html",
+            {
+                "drawer_id": drawer_id,
+                "drawer_num": drawer_num,
+                "drawer_label": drawer_label,
+                "cards": cards,
+                "card_count": len(cards),
+                "prev_drawer": prev_drawer,
+                "next_drawer": next_drawer,
+            },
+        )
+
+    @app.get("/image/{row_idx}")
+    async def image(row_idx: int):
+        img_bytes = image_cache.get(row_idx)
+        if img_bytes is None:
+            return HTMLResponse("Image not found", status_code=404)
+        buf = io.BytesIO()
+        img = Image.open(io.BytesIO(img_bytes))
+        img.save(buf, format="JPEG", quality=85)
+        buf.seek(0)
+        return StreamingResponse(buf, media_type="image/jpeg")
+
+    return app
+
+
+def resolve_db_path(args) -> str:
+    """Resolve database path from CLI args, env var, or HF Hub download."""
+    # Explicit local path takes priority
+    if args.db_path:
+        db_path = Path(args.db_path)
+        if not db_path.exists():
+            print(f"Database not found at {db_path}")
+            print("Run 'uv run bpl-lance-poc.py build' first.")
+            raise SystemExit(1)
+        return str(db_path)
+
+    # Download from HF Hub
+    repo_id = args.from_hub or os.environ.get("BPL_HUB_REPO", DEFAULT_HUB_REPO)
+    cache_base = os.environ.get("HF_HOME", "/tmp/hf_cache")
+    local_dir = f"{cache_base}/bpl-lance"
+    print(f"Downloading dataset from {repo_id} to {local_dir}...")
+    snapshot_download(repo_id, repo_type="dataset", local_dir=local_dir)
+    print("Download complete.")
+    return local_dir
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="BPL OCR search comparison (FastAPI + HTMX)"
+    )
+    source = parser.add_mutually_exclusive_group()
+    source.add_argument(
+        "--db-path",
+        default=None,
+        help="Path to local LanceDB directory (for local dev)",
+    )
+    source.add_argument(
+        "--from-hub",
+        nargs="?",
+        const=DEFAULT_HUB_REPO,
+        default=None,
+        help=f"Download Lance DB from HF Hub (default: {DEFAULT_HUB_REPO})",
+    )
+    parser.add_argument("--host", default="127.0.0.1")
+    parser.add_argument("--port", type=int, default=8000)
+    args = parser.parse_args()
+
+    # If neither --db-path nor --from-hub, try default local path
+    if args.db_path is None and args.from_hub is None:
+        default = Path(DB_PATH)
+        if default.exists():
+            args.db_path = DB_PATH
+        else:
+            args.from_hub = DEFAULT_HUB_REPO
+
+    db_path = resolve_db_path(args)
+    app = create_app(db_path)
+    uvicorn.run(app, host=args.host, port=args.port)
+
+
+if __name__ == "__main__":
+    main()

requirements.in

@@ -0,0 +1,7 @@
+lancedb>=0.17
+fastapi>=0.115
+uvicorn[standard]>=0.32
+jinja2>=3.1
+sentence-transformers
+pillow
+huggingface-hub

static/style.css

@@ -0,0 +1,679 @@
+/* BPL Card Catalog OCR Comparison — Tufte-inspired minimal styles */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #333;
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem 3rem;
+}
+
+/* Header */
+header {
+  border-bottom: 1px solid #ddd;
+  padding: 0.75rem 0;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: baseline;
+  gap: 2rem;
+}
+
+header .brand {
+  font-weight: 600;
+  color: #333;
+  font-size: 0.9rem;
+  letter-spacing: 0.02em;
+}
+
+header .brand {
+  text-decoration: none;
+  color: inherit;
+}
+
+header .subtitle {
+  font-size: 0.8rem;
+  color: #999;
+}
+
+header .header-link {
+  font-size: 0.8rem;
+  color: #999;
+  text-decoration: none;
+  margin-left: auto;
+}
+
+header .header-link:hover {
+  color: #333;
+}
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  gap: 0;
+  margin-bottom: 0.75rem;
+  border-bottom: 1px solid #ddd;
+}
+
+.tab {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #999;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.6rem 1.2rem;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.tab:hover {
+  color: #666;
+}
+
+.tab.active {
+  color: #333;
+  border-bottom-color: #333;
+}
+
+/* Page heading */
+.page-intro {
+  margin-bottom: 0.75rem;
+}
+
+.page-intro h1 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 0 0 0.25rem;
+  color: #333;
+}
+
+.page-intro p {
+  font-size: 0.85rem;
+  color: #666;
+  margin: 0;
+  max-width: 720px;
+  line-height: 1.5;
+}
+
+.page-intro .card-count {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  color: #333;
+}
+
+/* Search form */
+.search-form {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.search-form .field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.search-form .field.query-field {
+  flex: 1;
+  min-width: 200px;
+}
+
+.search-form label {
+  font-size: 0.75rem;
+  color: #999;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.search-form input[type="text"] {
+  font-size: 0.9rem;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  color: #333;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.search-form input[type="text"]:focus {
+  border-color: #999;
+}
+
+.search-form select {
+  font-size: 0.85rem;
+  padding: 0.45rem 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  color: #333;
+}
+
+.search-form input[type="number"] {
+  font-size: 0.85rem;
+  padding: 0.45rem 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  width: 4rem;
+  text-align: center;
+}
+
+.search-form button {
+  font-size: 0.85rem;
+  padding: 0.45rem 1.2rem;
+  border: 1px solid #333;
+  border-radius: 4px;
+  background: #333;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+
+.search-form button:hover {
+  background: #555;
+}
+
+/* Example queries */
+.examples {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+
+.examples .examples-label {
+  font-size: 0.75rem;
+  color: #999;
+  margin-right: 0.25rem;
+}
+
+.examples a {
+  font-size: 0.8rem;
+  color: #666;
+  text-decoration: none;
+  padding: 0.2rem 0.6rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 3px;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.examples a:hover {
+  color: #333;
+  border-color: #999;
+}
+
+/* Results header */
+.results-header {
+  padding: 0.5rem 0;
+  border-bottom: 2px solid #333;
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.results-header .query-display {
+  font-size: 0.95rem;
+  color: #666;
+}
+
+.results-header .query-text {
+  color: #333;
+  font-weight: 600;
+}
+
+.results-header .results-meta {
+  font-size: 0.8rem;
+  color: #999;
+}
+
+/* Two-column grid (Compare tab) */
+.results-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2.5rem;
+}
+
+/* Single-column list (Search tab) */
+.results-list {
+}
+
+/* Column headers */
+.column-header {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #666;
+  margin: 0 0 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #ddd;
+  letter-spacing: 0.02em;
+}
+
+.column-header .model-name {
+  font-weight: 400;
+  color: #999;
+}
+
+.old-header { color: #8b6914; border-bottom-color: #d4b86a; }
+.new-header { color: #2d6a4f; border-bottom-color: #74c69d; }
+
+/* Result cards */
+.result-card {
+  margin-bottom: 1rem;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  overflow: hidden;
+  transition: box-shadow 0.15s ease;
+}
+
+.result-card:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+/* Search card: side-by-side image + text */
+.search-card-layout {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+}
+
+.search-card .card-image {
+  max-height: 300px;
+}
+
+.card-rank-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.35rem 0.75rem;
+  background: #f8f8f8;
+  border-bottom: 1px solid #eee;
+  font-size: 0.75rem;
+  color: #bbb;
+}
+
+.card-rank {
+  font-weight: 600;
+  color: #999;
+}
+
+.card-score {
+  font-variant-numeric: tabular-nums;
+}
+
+.card-image-wrap {
+  position: relative;
+  background: #f5f5f5;
+  overflow: hidden;
+}
+
+.card-image {
+  width: 100%;
+  display: block;
+  object-fit: contain;
+  background: #f5f5f5;
+  max-height: 360px;
+  transition: transform 0.3s ease;
+}
+
+.rotate-btn {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+  width: 1.6rem;
+  height: 1.6rem;
+  border: none;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  font-size: 0.9rem;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-image-wrap:hover .rotate-btn {
+  opacity: 1;
+}
+
+.card-body {
+  padding: 0.75rem 1rem;
+}
+
+.card-meta {
+  font-size: 0.75rem;
+  color: #bbb;
+  margin-bottom: 0.5rem;
+}
+
+.card-meta a {
+  color: #999;
+  text-decoration: none;
+}
+
+.card-meta a:hover {
+  color: #333;
+  text-decoration: underline;
+}
+
+.drawer-label {
+  font-weight: 500;
+  color: #999;
+  text-decoration: none;
+}
+
+a.drawer-label:hover {
+  color: #333;
+  text-decoration: underline;
+}
+
+.drawer-subject {
+  color: #bbb;
+}
+
+/* OCR text blocks */
+.ocr-label {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #bbb;
+  margin-bottom: 0.2rem;
+}
+
+.ocr-text {
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 12rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+  color: #444;
+}
+
+/* Collapsible comparison */
+details {
+  margin-top: 0.5rem;
+}
+
+details summary {
+  font-size: 0.75rem;
+  color: #bbb;
+  cursor: pointer;
+  user-select: none;
+}
+
+details summary:hover {
+  color: #666;
+}
+
+details .ocr-text {
+  margin-top: 0.35rem;
+  padding: 0.5rem;
+  background: #f8faf8;
+  border-radius: 3px;
+}
+
+/* No results */
+.no-results {
+  text-align: center;
+  color: #999;
+  padding: 3rem 0;
+  font-size: 0.9rem;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.empty-state p {
+  color: #999;
+  margin: 0.25rem 0;
+}
+
+.empty-state .prompt {
+  font-size: 1.1rem;
+  color: #666;
+}
+
+/* HTMX loading indicator */
+.htmx-indicator {
+  opacity: 0;
+  transition: opacity 200ms ease-in;
+}
+
+.htmx-request .htmx-indicator,
+.htmx-request.htmx-indicator {
+  opacity: 1;
+}
+
+.loading-indicator {
+  color: #999;
+  font-size: 0.8rem;
+  margin-left: 0.5rem;
+}
+
+/* Footer */
+.site-footer {
+  border-top: 1px solid #ddd;
+  margin-top: 3rem;
+  padding: 1.5rem 0;
+  background: #fafafa;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.footer-about,
+.footer-note {
+  flex: 1;
+  min-width: 280px;
+}
+
+.footer-content p {
+  font-size: 0.78rem;
+  color: #999;
+  line-height: 1.6;
+  margin: 0 0 0.5rem;
+}
+
+.footer-content a {
+  color: #888;
+  text-decoration: none;
+}
+
+.footer-content a:hover {
+  color: #333;
+  text-decoration: underline;
+}
+
+.footer-note p {
+  font-style: italic;
+  color: #aaa;
+}
+
+/* Spotlight (random cards on landing) */
+.spotlight { padding: 2rem 0; }
+.spotlight-header {
+  font-size: 0.8rem; color: #999; text-transform: uppercase;
+  letter-spacing: 0.04em; margin-bottom: 1rem;
+}
+.spotlight-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
+}
+.spotlight-card {
+  border: 1px solid #e8e8e8; border-radius: 4px; overflow: hidden;
+}
+.spotlight-image { width: 100%; display: block; max-height: 240px; object-fit: contain; background: #f5f5f5; }
+.spotlight-meta { font-size: 0.72rem; color: #bbb; padding: 0.5rem 0.75rem 0.25rem; }
+.spotlight-text {
+  font-family: "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.75rem; color: #666; padding: 0.25rem 0.75rem 0.75rem;
+  line-height: 1.5; max-height: 4.5rem; overflow: hidden;
+}
+
+/* Drawer table */
+.drawer-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+
+.drawer-table th {
+  text-align: left;
+  font-size: 0.75rem;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 2px solid #ddd;
+}
+
+.drawer-table td {
+  padding: 0.45rem 0.75rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.drawer-table tbody tr:hover {
+  background: #f8f8f8;
+}
+
+.drawer-table a {
+  color: #333;
+  text-decoration: none;
+}
+
+.drawer-table a:hover {
+  text-decoration: underline;
+}
+
+.dt-num { width: 5rem; font-variant-numeric: tabular-nums; }
+.dt-count { width: 5rem; text-align: right; font-variant-numeric: tabular-nums; color: #999; }
+.dt-count:first-child { text-align: right; }
+
+/* Drawer navigation */
+.drawer-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.drawer-nav a {
+  color: #666;
+  text-decoration: none;
+}
+
+.drawer-nav a:hover {
+  color: #333;
+}
+
+.drawer-nav-center {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.drawer-nav .drawer-nav-index {
+  font-weight: 500;
+}
+
+.drawer-nav .drawer-nav-back {
+  font-size: 0.8rem;
+}
+
+.drawer-nav .disabled {
+  color: #ddd;
+}
+
+/* Lightbox */
+.lightbox {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.85);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+
+.lightbox.active {
+  display: flex;
+}
+
+.lightbox img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
+}
+
+.card-image, .spotlight-image {
+  cursor: zoom-in;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .results-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .search-card-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .container {
+    padding: 0 1rem 2rem;
+  }
+
+  .search-form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-form .field.query-field {
+    min-width: auto;
+  }
+
+  .spotlight-grid { grid-template-columns: 1fr; }
+
+  .footer-content {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}

templates/base.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block title %}BPL Card Catalog Search{% endblock %}</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+  <script>
+    function rotateImage(btn) {
+      var img = btn.previousElementSibling;
+      var cur = parseInt(img.dataset.rotation || "0", 10);
+      cur = (cur + 90) % 360;
+      img.dataset.rotation = cur;
+      img.style.transform = "rotate(" + cur + "deg)";
+    }
+  </script>
+</head>
+<body>
+  <div class="lightbox" id="lightbox" onclick="closeLightbox()">
+    <img id="lightbox-img" src="" alt="">
+  </div>
+  <script>
+    function openLightbox(src, rotation) {
+      var lb = document.getElementById('lightbox');
+      var img = document.getElementById('lightbox-img');
+      img.src = src;
+      img.style.transform = rotation ? 'rotate(' + rotation + 'deg)' : '';
+      lb.classList.add('active');
+    }
+    function closeLightbox() {
+      document.getElementById('lightbox').classList.remove('active');
+    }
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') closeLightbox();
+    });
+    // Make all card images clickable — works for dynamically loaded HTMX content too
+    document.addEventListener('click', function(e) {
+      var img = e.target.closest('.card-image, .spotlight-image');
+      if (img) {
+        e.preventDefault();
+        openLightbox(img.src, img.dataset.rotation || 0);
+      }
+    });
+  </script>
+  <div class="container">
+    <header>
+      <a href="/" class="brand">BPL Card Catalog</a>
+      <span class="subtitle">Rare Books &amp; Manuscripts</span>
+      <a href="/drawers" class="header-link">Browse</a>
+    </header>
+    {% block content %}{% endblock %}
+  </div>
+  <footer class="site-footer">
+    <div class="footer-content">
+      <div class="footer-about">
+        <p>Cards from the <a href="https://guides.bpl.org/rarebooks">Rare Books &amp; Manuscripts Department</a>,
+        Boston Public Library, 700 Boylston St, Boston.</p>
+        <p>Reading Room: Wed&ndash;Fri 9:30&ndash;4:30 · <a href="mailto:specialcollections@bpl.org">specialcollections@bpl.org</a></p>
+      </div>
+      <div class="footer-note">
+        <p>These catalog records describe historical materials and may contain
+        outdated or harmful language reflecting the time periods in which they were created.
+        <a href="https://guides.bpl.org/rarebooks/book-search">Read more</a></p>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>

templates/card.html

@@ -0,0 +1,23 @@
+<div class="result-card">
+  <div class="card-rank-bar">
+    <span class="card-rank">#{{ r.rank }}</span>
+    {% if r.score %}<span class="card-score">{{ r.score }}</span>{% endif %}
+  </div>
+  <div class="card-image-wrap">
+    <img class="card-image" src="/image/{{ r.row_idx }}" alt="Catalog card #{{ r.rank }}" loading="lazy">
+    <button class="rotate-btn" onclick="rotateImage(this)" title="Rotate image 90°">&#x21bb;</button>
+  </div>
+  <div class="card-body">
+    <div class="card-meta">
+      <a href="/drawer/{{ r.drawer_id }}" class="drawer-label">Drawer {{ r.drawer_num }}</a>{% if r.drawer_label %} <span class="drawer-subject">· {{ r.drawer_label }}</span>{% endif %}
+      · card {{ r.card_number }}
+      {% if r.source_url %}· <a href="{{ r.source_url }}" target="_blank" rel="noopener">View on Internet Archive</a>{% endif %}
+    </div>
+    <div class="ocr-label">{{ r.ocr_label }}</div>
+    <div class="ocr-text">{{ r.ocr_text }}</div>
+    <details>
+      <summary>Compare with {{ r.compare_label }}</summary>
+      <div class="ocr-text">{{ r.other_ocr }}</div>
+    </details>
+  </div>
+</div>

templates/drawer.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+{% block title %}Drawer {{ drawer_num }} · {{ drawer_label }} — BPL Card Catalog{% endblock %}
+{% block content %}
+<div class="drawer-nav">
+  {% if prev_drawer %}
+  <a href="/drawer/{{ prev_drawer.drawer_id }}">&larr; Drawer {{ prev_drawer.drawer_num }}</a>
+  {% else %}
+  <span class="disabled">&larr;</span>
+  {% endif %}
+  <span class="drawer-nav-center">
+    <a href="/drawers" class="drawer-nav-index">All Drawers</a>
+    <a href="/" id="back-to-search" class="drawer-nav-back" style="display:none">&larr; Back to search</a>
+  </span>
+  {% if next_drawer %}
+  <a href="/drawer/{{ next_drawer.drawer_id }}">Drawer {{ next_drawer.drawer_num }} &rarr;</a>
+  {% else %}
+  <span class="disabled">&rarr;</span>
+  {% endif %}
+</div>
+<script>
+(function() {
+  var ref = document.referrer;
+  if (ref && new URL(ref).pathname === '/' && new URL(ref).search) {
+    var link = document.getElementById('back-to-search');
+    link.href = ref;
+    link.style.display = '';
+  }
+})();
+</script>
+
+<div class="page-intro">
+  <h1>Drawer {{ drawer_num }}{% if drawer_label %} · {{ drawer_label }}{% endif %}</h1>
+  <p>{{ card_count }} card{{ 's' if card_count != 1 else '' }} in this drawer.</p>
+</div>
+
+<div class="results-list">
+  {% for card in cards %}
+  <div class="result-card search-card">
+    <div class="card-rank-bar">
+      <span class="card-rank">Card {{ card.card_number }}</span>
+    </div>
+    <div class="search-card-layout">
+      <div class="card-image-wrap">
+        <img class="card-image" src="/image/{{ card.row_idx }}" alt="Card {{ card.card_number }}" loading="lazy">
+        <button class="rotate-btn" onclick="rotateImage(this)" title="Rotate image 90°">&#x21bb;</button>
+      </div>
+      <div class="card-body">
+        <div class="card-meta">
+          <span class="drawer-label">Drawer {{ drawer_num }}</span>{% if drawer_label %} <span class="drawer-subject">· {{ drawer_label }}</span>{% endif %}
+          · card {{ card.card_number }}
+          {% if card.source_url %}· <a href="{{ card.source_url }}" target="_blank" rel="noopener">View on Internet Archive</a>{% endif %}
+        </div>
+        <div class="ocr-text">{{ card.ocr_text }}</div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+  {% if not cards %}
+  <div class="no-results">No cards found in this drawer.</div>
+  {% endif %}
+</div>
+{% endblock %}

templates/drawers.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+{% block title %}Browse Drawers — BPL Card Catalog{% endblock %}
+{% block content %}
+<div class="page-intro">
+  <h1>Browse by Drawer</h1>
+  <p>
+    {{ total_drawers }} drawers containing <span class="card-count">{{ total_cards }}</span> catalog cards.
+    Each drawer groups cards by subject, author, or title range.
+  </p>
+</div>
+
+<table class="drawer-table">
+  <thead>
+    <tr>
+      <th class="dt-num">Drawer</th>
+      <th class="dt-label">Label</th>
+      <th class="dt-count">Cards</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for d in drawers %}
+    <tr onclick="location.href='/drawer/{{ d.drawer_id }}'" style="cursor:pointer">
+      <td class="dt-num">{{ d.drawer_num }}</td>
+      <td class="dt-label"><a href="/drawer/{{ d.drawer_id }}">{{ d.drawer_label or '—' }}</a></td>
+      <td class="dt-count">{{ d.count }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+{% endblock %}

templates/index.html

@@ -0,0 +1,157 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="tab-bar">
+  <button class="tab active" data-tab="search" onclick="switchTab('search')">Search</button>
+  <button class="tab" data-tab="compare" onclick="switchTab('compare')">Compare OCR</button>
+</div>
+
+<div class="page-intro" id="intro-search">
+  <h1>Search the BPL Card Catalog</h1>
+  <p>
+    Search <span class="card-count">{{ total_cards }}</span> digitized catalog cards
+    from the Boston Public Library's Rare Books &amp; Manuscripts Department.
+    The BPL's card catalogs &mdash; over 410,000 cards across 385 drawers &mdash;
+    remain the most complete index of the department's holdings.
+    This tool uses AI-powered OCR to make them searchable.
+  </p>
+</div>
+
+<div class="page-intro" id="intro-compare" style="display:none">
+  <h1>Compare OCR Search Quality</h1>
+  <p>
+    Same query runs against old {{ old_ocr_label }} OCR and new {{ new_ocr_label }}
+    transcriptions. See how better OCR improves search results side by side.
+  </p>
+</div>
+
+<form class="search-form"
+      id="search-form"
+      hx-get="/search-single"
+      hx-target="#results"
+      hx-indicator=".loading-indicator">
+  <input type="hidden" id="tab-field" name="tab" value="search">
+  <div class="field query-field">
+    <label for="query">Query</label>
+    <input type="text" id="query" name="query" value="{{ query or '' }}"
+           placeholder="abolitionism, Civil War letters, Shakespeare…"
+           autocomplete="off">
+  </div>
+  <div class="field">
+    <label for="mode">Mode</label>
+    <select id="mode" name="mode">
+      <option value="vector" {% if mode != "fts" %}selected{% endif %}>Semantic</option>
+      <option value="fts" {% if mode == "fts" %}selected{% endif %}>Keyword</option>
+    </select>
+  </div>
+  <div class="field">
+    <label for="limit">Results</label>
+    <input type="number" id="limit" name="limit" value="{{ limit or 10 }}" min="1" max="20">
+  </div>
+  <button type="submit" id="submit-btn">Search</button>
+  <span class="loading-indicator htmx-indicator">searching…</span>
+</form>
+
+<div class="examples" id="examples">
+  <span class="examples-label">Try:</span>
+  {% for q in examples %}
+  <a href="#" class="example-link"
+     hx-get="/search-single?query={{ q | urlencode }}&mode={{ mode or 'vector' }}&limit={{ limit or 10 }}"
+     hx-target="#results"
+     hx-indicator=".loading-indicator"
+     onclick="document.getElementById('query').value='{{ q }}'">{{ q }}</a>
+  {% endfor %}
+</div>
+
+<div id="results">
+  <div id="spotlight" hx-get="/random-cards" hx-trigger="load" hx-swap="innerHTML"></div>
+</div>
+
+<script>
+function switchTab(tab) {
+  // Update tab buttons
+  document.querySelectorAll('.tab').forEach(function(btn) {
+    btn.classList.toggle('active', btn.dataset.tab === tab);
+  });
+
+  // Swap intro text
+  document.getElementById('intro-search').style.display = tab === 'search' ? '' : 'none';
+  document.getElementById('intro-compare').style.display = tab === 'compare' ? '' : 'none';
+
+  // Update hidden field
+  document.getElementById('tab-field').value = tab;
+
+  // Update form endpoint + button text + default limit
+  var form = document.getElementById('search-form');
+  var btn = document.getElementById('submit-btn');
+  var limitInput = document.getElementById('limit');
+  if (tab === 'search') {
+    form.setAttribute('hx-get', '/search-single');
+    btn.textContent = 'Search';
+    if (limitInput.value === '5') limitInput.value = '10';
+  } else {
+    form.setAttribute('hx-get', '/search');
+    btn.textContent = 'Compare';
+    if (limitInput.value === '10') limitInput.value = '5';
+  }
+
+  // Update example links
+  var endpoint = tab === 'search' ? '/search-single' : '/search';
+  var limit = limitInput.value;
+  var mode = document.getElementById('mode').value;
+  document.querySelectorAll('.example-link').forEach(function(link) {
+    var query = link.textContent;
+    link.setAttribute('hx-get', endpoint + '?query=' + encodeURIComponent(query) + '&mode=' + mode + '&limit=' + limit);
+  });
+
+  // Re-process HTMX attributes after dynamic changes
+  htmx.process(form);
+  htmx.process(document.getElementById('examples'));
+
+  // Re-run query if results already showing and query is non-empty
+  var queryInput = document.getElementById('query');
+  if (queryInput.value.trim()) {
+    htmx.trigger(form, 'submit');
+  }
+}
+
+// After HTMX swaps results, update URL with current search state
+document.addEventListener('htmx:afterSwap', function(e) {
+  if (e.detail.target.id === 'results') {
+    var q = document.getElementById('query').value;
+    var mode = document.getElementById('mode').value;
+    var limit = document.getElementById('limit').value;
+    var tab = document.getElementById('tab-field').value;
+    var params = new URLSearchParams();
+    if (q) params.set('q', q);
+    if (mode !== 'vector') params.set('mode', mode);
+    if (tab !== 'search') params.set('tab', tab);
+    if ((tab === 'search' && limit !== '10') || (tab === 'compare' && limit !== '5'))
+      params.set('limit', limit);
+    var url = params.toString() ? '/?' + params.toString() : '/';
+    history.replaceState(null, '', url);
+  }
+});
+
+// On page load, read URL params and auto-search
+(function() {
+  var params = new URLSearchParams(window.location.search);
+  var q = params.get('q');
+  if (!q) return;
+
+  var mode = params.get('mode') || 'vector';
+  var tab = params.get('tab') || 'search';
+  var limit = params.get('limit') || (tab === 'search' ? '10' : '5');
+
+  document.getElementById('query').value = q;
+  document.getElementById('mode').value = mode;
+  document.getElementById('limit').value = limit;
+
+  if (tab !== 'search') switchTab(tab);
+
+  // Trigger search after a short delay to let HTMX initialize
+  setTimeout(function() {
+    htmx.trigger(document.getElementById('search-form'), 'submit');
+  }, 100);
+})();
+</script>
+{% endblock %}

templates/results-search.html

@@ -0,0 +1,45 @@
+{% if query %}
+<div class="results-header">
+  <div class="query-display">
+    Results for <span class="query-text">"{{ query }}"</span>
+  </div>
+  <div class="results-meta">
+    {{ "Semantic" if mode != "fts" else "Keyword" }}
+    · {{ results | length }} results
+  </div>
+</div>
+
+<div class="results-list">
+  {% for r in results %}
+  <div class="result-card search-card">
+    <div class="card-rank-bar">
+      <span class="card-rank">#{{ r.rank }}</span>
+      {% if r.score %}<span class="card-score">{{ r.score }}</span>{% endif %}
+    </div>
+    <div class="search-card-layout">
+      <div class="card-image-wrap">
+        <img class="card-image" src="/image/{{ r.row_idx }}" alt="Catalog card #{{ r.rank }}" loading="lazy">
+        <button class="rotate-btn" onclick="rotateImage(this)" title="Rotate image 90°">&#x21bb;</button>
+      </div>
+      <div class="card-body">
+        <div class="card-meta">
+          <a href="/drawer/{{ r.drawer_id }}" class="drawer-label">Drawer {{ r.drawer_num }}</a>{% if r.drawer_label %} <span class="drawer-subject">· {{ r.drawer_label }}</span>{% endif %}
+          · card {{ r.card_number }}
+          {% if r.source_url %}· <a href="{{ r.source_url }}" target="_blank" rel="noopener">View on Internet Archive</a>{% endif %}
+        </div>
+        <div class="ocr-text">{{ r.ocr_text }}</div>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+  {% if not results %}
+  <div class="no-results">No results found</div>
+  {% endif %}
+</div>
+
+{% else %}
+<div class="empty-state">
+  <p class="prompt">Search {{ total_cards }} digitized catalog cards</p>
+  <p>Enter a query to search the card catalog.</p>
+</div>
+{% endif %}

templates/results.html

@@ -0,0 +1,40 @@
+{% if query %}
+<div class="results-header">
+  <div class="query-display">
+    Results for <span class="query-text">"{{ query }}"</span>
+  </div>
+  <div class="results-meta">
+    {{ "Semantic" if mode != "fts" else "Keyword" }}
+    · {{ old_ocr_label or "Tesseract" }}: {{ old_results | length }}
+    · {{ new_ocr_label or "VLM OCR" }}: {{ new_results | length }}
+  </div>
+</div>
+
+<div class="results-grid">
+  <div class="results-column">
+    <h3 class="column-header old-header">Old OCR <span class="model-name">({{ old_ocr_label or "Tesseract" }})</span></h3>
+    {% for r in old_results %}
+    {% include "card.html" %}
+    {% endfor %}
+    {% if not old_results %}
+    <div class="no-results">No results found</div>
+    {% endif %}
+  </div>
+
+  <div class="results-column">
+    <h3 class="column-header new-header">New OCR <span class="model-name">({{ new_ocr_label or "VLM OCR" }})</span></h3>
+    {% for r in new_results %}
+    {% include "card.html" %}
+    {% endfor %}
+    {% if not new_results %}
+    <div class="no-results">No results found</div>
+    {% endif %}
+  </div>
+</div>
+
+{% else %}
+<div class="empty-state">
+  <p class="prompt">Search {{ total_cards }} digitized catalog cards</p>
+  <p>Enter a query above to compare old and new OCR search results side by side.</p>
+</div>
+{% endif %}

templates/spotlight.html

@@ -0,0 +1,17 @@
+<div class="spotlight">
+  <div class="spotlight-header">From the collection</div>
+  <div class="spotlight-grid">
+    {% for card in cards %}
+    <div class="spotlight-card">
+      <div class="spotlight-image-wrap">
+        <img class="spotlight-image" src="/image/{{ card.row_idx }}" alt="Catalog card" loading="lazy">
+      </div>
+      <div class="spotlight-meta">
+        <a href="/drawer/{{ card.drawer_id }}" class="drawer-label">Drawer {{ card.drawer_num }}</a>{% if card.drawer_label %} · {{ card.drawer_label }}{% endif %}
+        · card {{ card.card_number }}
+      </div>
+      <div class="spotlight-text">{{ card.ocr_text }}</div>
+    </div>
+    {% endfor %}
+  </div>
+</div>