3.6 KiB
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 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 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.