early version of OCR viewer now integrated
This commit is contained in:
nathan
162
prompts/ocr-viewer-redeisgn4.md
Normal file
162
prompts/ocr-viewer-redeisgn4.md
Normal file
@@ -0,0 +1,162 @@
|
||||
P44 OCR Viewer — Move original OCR toggle to left panel, replace raster with plain text
|
||||
Scope: p44-ocr-viewer.js, p44-ocr-viewer.css, p44-ocr-viewer.html. Remove horizontal split pane entirely, replace with left panel toggle.
|
||||
|
||||
PART 1 — HTML (p44-ocr-viewer.html)
|
||||
Remove the split button from the right panel header:
|
||||
html<button id="btn-split" class="tb-btn" title="Toggle split view — shows original OCR above for reference (Pass 2 only)" style="display:none;">⊟ Split</button>
|
||||
Add a toggle button to the left panel header, immediately after the zoom controls and before the page nav:
|
||||
html<button id="btn-ocr-toggle" class="tb-btn" title="Toggle between page scan and original OCR text" style="display:none;">📄 OCR</button>
|
||||
Remove these elements from #text-panel-body entirely:
|
||||
html<div id="split-pane" style="display:none;">
|
||||
<div id="split-pane-header">ORIGINAL OCR</div>
|
||||
<div id="split-ocr-wrap">
|
||||
<div id="split-line-numbers"></div>
|
||||
<div id="split-ocr-output"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="split-divider" style="display:none;"></div>
|
||||
Add a new OCR text overlay div inside #image-panel-body, immediately after the pdf-container div:
|
||||
html<div id="ocr-overlay-panel" style="display:none;"></div>
|
||||
|
||||
PART 2 — CSS (p44-ocr-viewer.css)
|
||||
Remove all rules for:
|
||||
|
||||
#split-pane
|
||||
#split-pane-header
|
||||
#split-ocr-wrap
|
||||
#split-line-numbers
|
||||
#split-ocr-output
|
||||
#split-divider
|
||||
#text-panel-body.split-active
|
||||
.split-active
|
||||
|
||||
Add at the end of the file:
|
||||
css/* ── OCR overlay panel (replaces raster in left panel) ───────── */
|
||||
#ocr-overlay-panel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
background: var(--surface);
|
||||
padding: 20px 24px;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: var(--text);
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
z-index: 10;
|
||||
}
|
||||
Also ensure #image-panel-body has position: relative — add it to the existing rule if not already present:
|
||||
css#image-panel-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
PART 3 — JS (p44-ocr-viewer.js)
|
||||
3a — Remove all split pane code
|
||||
Remove these DOM refs:
|
||||
javascriptconst btnSplit = document.getElementById('btn-split');
|
||||
const splitPane = document.getElementById('split-pane');
|
||||
const splitDivider = document.getElementById('split-divider');
|
||||
const splitOcrOutput = document.getElementById('split-ocr-output');
|
||||
const splitLineNums = document.getElementById('split-line-numbers');
|
||||
Remove state.splitMode and state.splitRatio from the state object.
|
||||
Remove these functions entirely:
|
||||
|
||||
buildSplitLineNumbers()
|
||||
updateSplitLineNumbers()
|
||||
applySplitRatio()
|
||||
resetSplitSizing()
|
||||
startSplitResize()
|
||||
showSplitPane()
|
||||
hideSplitPane()
|
||||
toggleSplit()
|
||||
getWrapMeasureEl()
|
||||
buildWrappedLineNumbers()
|
||||
parseLineHeightPx()
|
||||
|
||||
Remove these event listeners:
|
||||
javascriptbtnSplit.addEventListener('click', toggleSplit);
|
||||
splitDivider.addEventListener('mousedown', startSplitResize);
|
||||
Remove from the resize event listener the split mode block:
|
||||
javascriptif (state.splitMode) {
|
||||
applySplitRatio(state.splitRatio || 0.5);
|
||||
const pageNum = state.currentPage;
|
||||
const corr = state.corrections && state.corrections[pageNum];
|
||||
const originalText = (corr && corr.original) || state.ocrPages[pageNum] || '';
|
||||
updateSplitLineNumbers(originalText);
|
||||
}
|
||||
Remove from goToPage():
|
||||
javascriptif (state.splitMode) showSplitPane(n);
|
||||
Remove from showOCRPage():
|
||||
javascriptif (state.splitMode) showSplitPane(pageNum);
|
||||
Remove from applyRole() all references to btnSplit, state.splitMode, hideSplitPane().
|
||||
3b — New DOM refs
|
||||
Add:
|
||||
javascriptconst btnOcrToggle = document.getElementById('btn-ocr-toggle');
|
||||
const ocrOverlayPanel = document.getElementById('ocr-overlay-panel');
|
||||
Add to state object:
|
||||
javascriptocrOverlay: false,
|
||||
3c — showOCROverlay(pageNum)
|
||||
Add this new function:
|
||||
javascriptfunction showOCROverlay(pageNum) {
|
||||
const corr = state.corrections && state.corrections[pageNum];
|
||||
const originalText = (corr && corr.original) || state.ocrPages[pageNum] || '';
|
||||
|
||||
ocrOverlayPanel.innerHTML =
|
||||
'<pre style="white-space:pre-wrap;font-family:inherit;font-size:13px;' +
|
||||
'line-height:1.8;color:var(--text);margin:0;">' +
|
||||
escH(originalText) + '</pre>';
|
||||
|
||||
ocrOverlayPanel.style.display = 'block';
|
||||
pdfContainer.style.display = 'none';
|
||||
imagePlaceholder.style.display = 'none';
|
||||
}
|
||||
3d — hideOCROverlay()
|
||||
Add this new function:
|
||||
javascriptfunction hideOCROverlay() {
|
||||
ocrOverlayPanel.style.display = 'none';
|
||||
if (state.mode === 'pdf') {
|
||||
pdfContainer.style.display = 'inline-block';
|
||||
} else {
|
||||
imagePlaceholder.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
3e — toggleOCROverlay()
|
||||
Add this new function:
|
||||
javascriptfunction toggleOCROverlay() {
|
||||
state.ocrOverlay = !state.ocrOverlay;
|
||||
btnOcrToggle.classList.toggle('active', state.ocrOverlay);
|
||||
|
||||
if (state.ocrOverlay) {
|
||||
showOCROverlay(state.currentPage);
|
||||
} else {
|
||||
hideOCROverlay();
|
||||
}
|
||||
}
|
||||
Add event listener:
|
||||
javascriptbtnOcrToggle.addEventListener('click', toggleOCROverlay);
|
||||
3f — goToPage()
|
||||
Add after if (state.editMode) exitEditMode();:
|
||||
javascript if (state.ocrOverlay) showOCROverlay(n);
|
||||
3g — showOCRPage()
|
||||
Add after updateCorrectionIndicator(pageNum):
|
||||
javascript if (state.ocrOverlay) showOCROverlay(pageNum);
|
||||
3h — applyRole()
|
||||
In the pass2 branch add:
|
||||
javascript btnOcrToggle.style.display = 'inline-block';
|
||||
In the pass1 branch add:
|
||||
javascript btnOcrToggle.style.display = 'none';
|
||||
state.ocrOverlay = false;
|
||||
hideOCROverlay();
|
||||
|
||||
VERIFICATION CHECKLIST:
|
||||
|
||||
Pass 1 role: OCR toggle button not visible in left panel header
|
||||
Pass 2 role: OCR toggle button visible in left panel header
|
||||
Clicking OCR toggle: raster scan disappears, plain text original OCR fills the left panel, button highlights active
|
||||
Clicking OCR toggle again: plain text disappears, raster scan returns
|
||||
Navigating to a new page while OCR overlay is on: overlay updates to new page's original OCR, stays visible
|
||||
Switching from Pass 2 to Pass 1 while overlay is on: overlay closes, scan returns
|
||||
No horizontal split pane anywhere in the UI
|
||||
Editor (right panel) unchanged — line numbers, textarea, all flags working as before
|
||||
Reference in New Issue
Block a user