# 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.