testing out OCR viewer of OCR'd text

notes/ocr-viewer-prompt.md

@@ -0,0 +1,46 @@
+# P44 OCR Viewer — Copilot Build Prompt
+
+## Context
+A desktop OCR review tool for verifying war diary OCR output page by page.
+Single HTML file, no build step, runs by double-clicking.
+
+## If Copilot times out — build in this order:
+
+### Step 1: Shell + layout
+> Build the shell of the P44 OCR Viewer. Two panels side by side using CSS Grid.
+> Dark background (#1a1a2e), gold accent (#c8a84b). Left panel: image display with
+> scroll. Right panel: scrollable text area. Top toolbar with three file inputs:
+> (1) page image, (2) OCR text file, (3) word-position JSON sidecar. No interactivity
+> yet — just layout and file loading that populates each panel.
+
+### Step 2: Word overlay on image
+> Add a word bounding box overlay layer to the left panel. The JSON sidecar format is:
+> [{ "word": "string", "id": "w001", "bbox": { "x": 0, "y": 0, "w": 50, "h": 20 } }]
+> Render transparent absolutely-positioned divs over the image for each word,
+> using the bbox coordinates scaled to the rendered image dimensions.
+> Each div gets a data-word-id attribute matching the JSON id.
+
+### Step 3: Word spans in text panel
+> Parse the OCR text in the right panel and wrap each whitespace-delimited token
+> in a <span> with a data-word-id attribute. IDs are assigned sequentially (w001,
+> w002...) matching the order in the JSON sidecar.
+
+### Step 4: Bidirectional hover highlight
+> On hover over any word span (right) or bounding box div (left), highlight the
+> matching element on the other side with a yellow background/border. Use the
+> data-word-id to find the match. Clear highlight on mouseout.
+
+### Step 5: Load example button
+> Add a "Load example" button to the toolbar that pre-populates all three panels
+> with bundled inline sample data (a small image placeholder, 2-3 lines of sample
+> OCR text, and a matching JSON sidecar with ~10 words). Tool should be fully
+> demonstrable without real files.
+
+## Full one-shot prompt (use if Copilot has capacity)
+Build a desktop OCR review tool called P44 OCR Viewer for reviewing war diary OCR output. The interface has two panels side by side:
+Left panel — the source document image. Load a JPEG or PNG page scan. Render it at full panel height, scrollable. Each word in the image should be represented by a transparent, hoverable bounding box overlay (coordinates come from a JSON sidecar file, format: [{ "word": "string", "id": "w001", "bbox": { "x": 0, "y": 0, "w": 50, "h": 20 } }]).
+Right panel — the OCR text output. Load the corresponding plain text or Markdown file. Each word in the text should be individually wrapped in a <span> with a matching data-word-id attribute that maps to the same ID in the JSON sidecar.
+Hover behaviour: Hovering over a word on either side highlights the corresponding word on the other side — a yellow highlight on the image bounding box overlay, and a yellow background on the text span. Bidirectional. Highlight clears on mouse-out.
+File loading: A toolbar at the top has three file inputs: (1) Page image, (2) OCR text file, (3) Word-position JSON sidecar. Files are loaded locally, no server required. A "Load example" button pre-populates with bundled sample data so the tool works without real data.
+Stack: Single HTML file, vanilla JS, no build step required. Designed to run by double-clicking — no localhost server, no npm. All layout via CSS Grid. Colour scheme: dark background (#1a1a2e), muted gold accent (#c8a84b) consistent with a WWII archival aesthetic.
+The word-alignment JSON sidecar format is designed to be produced by olmOCR (Allen Institute), which outputs bounding box data alongside transcribed text. The viewer is the QA interface a historian uses to verify OCR accuracy page by page.