removed highlighting text. Added in magnifying words left side, sync scrolling, keyboard shortcuts, editing text etc
This commit is contained in:
nathan
135
prompts/OCR-Viewer.md
Normal file
135
prompts/OCR-Viewer.md
Normal file
@@ -0,0 +1,135 @@
|
||||
Here's your step-by-step guide. Give Copilot one phase at a time — do not paste them all at once.
|
||||
PHASE 1 — CLEANUP: Remove all cross-highlighting code
|
||||
|
||||
Paste this first:
|
||||
|
||||
I need to clean up p44-ocr-viewer.html by removing all cross-panel word highlighting code that was never fully working. Do not change any CSS, layout, toolbar, PDF rendering, or OCR text rendering. Only remove the highlighting infrastructure.
|
||||
|
||||
Remove the following:
|
||||
|
||||
addHoverSpansToTextNodes() — the entire function
|
||||
highlightBoxesByText() — the entire function
|
||||
clearHighlightedBoxes() — the entire function
|
||||
highlightSpansByText() — the entire function
|
||||
clearHighlightedSpans() — the entire function
|
||||
renderPlainTextWithLinks() — the entire function
|
||||
buildIdQueue() — the entire function
|
||||
dequeueId() — the entire function
|
||||
The call to addHoverSpansToTextNodes(textOutput) inside showOCRPage()
|
||||
The highlightSpansByText(title) fallback call inside makeWordBox()
|
||||
The clearHighlightedSpans() call inside makeWordBox()
|
||||
state.wordSequence if it was added
|
||||
state.useJsonOverlay if it was added
|
||||
All console.log statements added for debugging (the olmOCR word spans logs, PDF.js getTextContent logs)
|
||||
|
||||
Also remove the .word-span CSS rules from the stylesheet — the #text-output .word-span block.
|
||||
|
||||
After removal, verify:
|
||||
|
||||
showOCRPage() still renders text correctly
|
||||
makeWordBox() still builds overlay boxes (they just won't trigger any cross-panel effects)
|
||||
The #word-tip footer element can stay but its content should never be set
|
||||
Sample data / JSON sidecar path must still work
|
||||
|
||||
PHASE 2 — Synchronized scrolling
|
||||
|
||||
After Phase 1 is working, paste this:
|
||||
|
||||
Add synchronized scrolling to p44-ocr-viewer.html. When the user scrolls either panel, the other panel scrolls to the same proportional vertical position.
|
||||
|
||||
Implementation:
|
||||
|
||||
Get references to both scroll containers: document.getElementById('image-panel-body') and document.getElementById('text-panel-body')
|
||||
Add a scroll event listener to each. When one fires, calculate the scroll percentage: scrollTop / (scrollHeight - clientHeight). Apply that same percentage to the other panel's scrollTop.
|
||||
Use a isSyncing boolean flag to prevent the two listeners from triggering each other in a loop. Set it true before programmatically scrolling, then false in a requestAnimationFrame callback after.
|
||||
Add a toggle button to the toolbar labelled Sync Scroll with an active/inactive visual state (use the existing .tb-btn class). When inactive, the listeners are disconnected. Default state is active.
|
||||
|
||||
Constraints:
|
||||
|
||||
Do not change any existing scroll behaviour on page navigation
|
||||
Do not change any CSS other than adding an .active state for the sync button that gives it border-color: var(--gold); color: var(--gold);
|
||||
|
||||
PHASE 3 — Click-to-zoom on the left panel
|
||||
|
||||
After Phase 2 is working, paste this:
|
||||
|
||||
Add click-to-zoom to the left panel (the PDF scan) in p44-ocr-viewer.html.
|
||||
|
||||
Implementation:
|
||||
|
||||
When the user clicks anywhere on #pdf-canvas, calculate the click position as a percentage of the canvas width and height.
|
||||
Create a zoom overlay div with id zoom-lens that appears in the top-right corner of the left panel (position absolute, 280px × 200px, dark border, z-index 10). It contains a second canvas #zoom-canvas.
|
||||
On click, draw a 3× magnified crop of the clicked region onto #zoom-canvas. The crop region is centered on the click point and covers 1/3 of the canvas width and height.
|
||||
Clicking the same spot again, or clicking #zoom-lens itself, dismisses the zoom overlay.
|
||||
Add a small ✕ close button in the top-right corner of #zoom-lens.
|
||||
#zoom-lens styling: background: var(--surface), border: 1px solid var(--gold), border-radius: 4px. Use existing CSS variables throughout.
|
||||
|
||||
Constraints:
|
||||
|
||||
Do not affect PDF rendering or page navigation
|
||||
The zoom lens must not appear until after the first click
|
||||
|
||||
PHASE 4 — Flag/annotation system
|
||||
|
||||
After Phase 3 is working, paste this:
|
||||
|
||||
Add a per-page flag/annotation system to p44-ocr-viewer.html. Reviewers can mark pages and the results persist to disk via the existing Python server.
|
||||
|
||||
Implementation:
|
||||
|
||||
Add three buttons to the right panel header (inside .panel-header, after the existing ocr-sync-label): ✓ Verified, ⚑ Needs Review, ✗ Error Found. Use the existing .tb-btn class. Add a fourth button Clear to remove a flag.
|
||||
Store flags in a state.flags object keyed by page number: { 1: 'verified', 8: 'error', 12: 'review' }.
|
||||
On page change, update the visual state of the three buttons to reflect the current page's flag (highlight the active one with border-color: var(--gold); color: var(--gold)).
|
||||
Save flags by POSTing JSON to /save-flags on the local server. The payload is the entire state.flags object. If the POST fails silently (server doesn't support it yet), store in localStorage as a fallback with key p44-flags.
|
||||
On startup, fetch /flags.json from the server. If it returns 200, load into state.flags. If it 404s, check localStorage fallback. If neither exists, start with empty flags.
|
||||
Add a flags-summary display to the footer showing counts: e.g. ✓ 12 ⚑ 4 ✗ 2.
|
||||
In launch_viewer.py, add a /save-flags POST handler that writes the received JSON to ./flags.json in the project root. Also serve ./flags.json as a static file (it already will be via SimpleHTTPRequestHandler).
|
||||
|
||||
Constraints:
|
||||
|
||||
Do not change PDF rendering, OCR rendering, or scroll sync
|
||||
Flags must survive a browser refresh
|
||||
|
||||
PHASE 5 — Inline text editing
|
||||
|
||||
After Phase 4 is working, paste this:
|
||||
|
||||
Make the OCR text panel editable in p44-ocr-viewer.html so reviewers can correct OCR errors inline.
|
||||
|
||||
Implementation:
|
||||
|
||||
Add a toggle button to the right panel header labelled Edit using the existing .tb-btn class. When active, it shows Editing with gold styling.
|
||||
When edit mode is active, set #text-output to contenteditable="true" and add a subtle inset border: outline: 1px solid var(--gold-dim) on the element.
|
||||
When edit mode is toggled off, read the current innerHTML of #text-output, strip all HTML tags to get plain text, and save it as the corrected text for this page in state.corrections[pageNum].
|
||||
Save corrections by POSTing to /save-corrections with payload { page: N, text: "..." }. If POST fails, store in localStorage under key p44-corrections.
|
||||
On startup, fetch /corrections.json. If found, load into state.corrections. On page render, if state.corrections[pageNum] exists, display the corrected text instead of the raw olmOCR text.
|
||||
In launch_viewer.py, add a /save-corrections POST handler that maintains a corrections.json file in the project root — a dict keyed by page number.
|
||||
Add a visual indicator in the right panel header when the current page has a saved correction: a small gold dot or [edited] label next to the page number.
|
||||
|
||||
Constraints:
|
||||
|
||||
Switching pages while in edit mode should auto-save before navigating
|
||||
Do not affect flags, scroll sync, zoom, or PDF rendering
|
||||
|
||||
PHASE 6 — Keyboard navigation
|
||||
|
||||
After Phase 5 is working, paste this:
|
||||
|
||||
Add keyboard navigation to p44-ocr-viewer.html.
|
||||
|
||||
Implementation:
|
||||
|
||||
Add a keydown event listener on document.
|
||||
Map the following keys — but only when focus is NOT inside #text-output (to avoid interfering with editing) and NOT inside any input element:
|
||||
ArrowRight or l → next page (goToPage(state.currentPage + 1))
|
||||
ArrowLeft or j → previous page (goToPage(state.currentPage - 1))
|
||||
v → mark current page Verified
|
||||
r → mark current page Needs Review
|
||||
e → mark current page Error Found
|
||||
Escape → close zoom lens if open; exit edit mode if active
|
||||
Add a small keyboard shortcut hint to the footer, right-aligned, in var(--text-dim) colour: ← → navigate v/r/e flag esc close
|
||||
|
||||
Constraints:
|
||||
|
||||
No key should fire while the user is typing in the edit panel or the page number input
|
||||
Do not change any existing event listeners
|
||||
Reference in New Issue
Block a user