War diaries available for transcription
-
-' + - escH(originalText) + ''; - - ocrOverlayPanel.style.display = 'block'; - pdfContainer.style.display = 'none'; - imagePlaceholder.style.display = 'none'; -} - -function hideOCROverlay() { - ocrOverlayPanel.style.display = 'none'; - if (state.mode === 'pdf') { - pdfContainer.style.display = 'block'; - } else { - imagePlaceholder.style.display = 'flex'; - } -} - -function toggleOCROverlay() { - state.ocrOverlay = !state.ocrOverlay; - btnOcrToggle.classList.toggle('active', state.ocrOverlay); - - if (state.ocrOverlay) { - showOCROverlay(state.currentPage); - } else { - hideOCROverlay(); - } -} - -btnOcrToggle.addEventListener('click', toggleOCROverlay); - -// ── Render the OCR panel for a single page ──────────────────────────────── -function showOCRPage(pageNum) { - textEditor.dataset.page = pageNum; - - if (!Object.keys(state.ocrPages).length) { - textEditor.value = ''; - ocrSyncLabel.textContent = ''; - return; - } - - const content = state.ocrPages[pageNum]; - if (!content) { - textEditor.value = 'No OCR text for page ' + pageNum + '.'; - ocrSyncLabel.textContent = 'page ' + pageNum + ' — no data'; - updateLineNumbers(); - return; - } - - const corr = state.corrections && state.corrections[pageNum]; - const editText = corr - ? (currentRole === 'pass2' - ? (corr.pass2 || corr.pass1 || corr.original || content) - : (corr.pass1 || corr.original || content)) - : content; - - textEditor.value = editText; - textEditor.scrollTop = 0; - ocrSyncLabel.textContent = 'page ' + pageNum; - - updateLineNumbers(); - updateFlagButtons(pageNum); - updateCorrectionIndicator(pageNum); - - // Snapshot original on first visit - if (!state.corrections[pageNum] || !state.corrections[pageNum].original) { - if (!state.corrections[pageNum]) state.corrections[pageNum] = {}; - state.corrections[pageNum].original = content.trim(); - } - - // Pass 1 done-page lock - const doneBanner = document.getElementById('done-banner'); - const isDonePage = currentRole === 'pass1' && state.flags[pageNum] === 'done'; - if (isDonePage) { - textEditor.readOnly = true; - textEditor.style.opacity = '0.55'; - doneBanner.innerHTML = '✓ Done — submitted to Pass 2 queue. This page is locked.'; - doneBanner.style.display = 'flex'; - } else { - textEditor.readOnly = false; - textEditor.style.opacity = ''; - doneBanner.style.display = 'none'; - } - - if (currentRole === 'pass2') { - updatePass2NavButtons(); - if (state.ocrOverlay) showOCROverlay(pageNum); - showPass2RevertBar(pageNum); - showPass2ChangeSummary(pageNum); - } -} - -// ───────────────────────────────────────────────────────────────── -// WORD DATA (JSON SIDECAR) -// ───────────────────────────────────────────────────────────────── -function loadWordDataJSON(data) { - state.wordData = data; - - // PDF mode: re-render so buildPDFWordOverlay picks up the new boxes - if (state.mode === 'pdf' && state.pdfDoc) { - renderCurrentPage(); - return; - } - - // Image mode: re-render overlay & re-link text spans (unchanged behaviour) - if (state.mode === 'image' && pdfCanvas.width) { - const sx = pdfCanvas.width / state.imageNaturalW; - const sy = pdfCanvas.height / state.imageNaturalH; - overlay.innerHTML = ''; - overlay.style.width = pdfCanvas.width + 'px'; - overlay.style.height = pdfCanvas.height + 'px'; - data.forEach(e => overlay.appendChild( - makeWordBox(e.id, e.bbox.x*sx, e.bbox.y*sy, e.bbox.w*sx, e.bbox.h*sy, e.word) - )); - } -} - -// ───────────────────────────────────────────────────────────────── -// HELPERS -// ───────────────────────────────────────────────────────────────── -function escH(s) { return s.replace(/&/g,'&').replace(//g,'>'); } -function showImgSpinner(on) { - imgSpinner.style.display = on ? 'inline-block' : 'none'; - imgPhText.style.display = on ? 'none' : 'block'; - imagePlaceholder.style.display = 'flex'; - if (on) pdfContainer.style.display = 'none'; -} -function showTxtSpinner(on) { - txtSpinner.style.display = on ? 'inline-block' : 'none'; - txtPhText.style.display = on ? 'none' : 'block'; - textPlaceholder.style.display = 'flex'; -} -function showImgPlaceholder(html) { - imgPhText.innerHTML = html; - imagePlaceholder.style.display = 'flex'; - pdfContainer.style.display = 'none'; -} -function showTxtPlaceholder(html) { - txtPhText.innerHTML = html; - textPlaceholder.style.display = 'flex'; -} -function setStatus(msg, warn) { - statusMsg.textContent = msg; - statusMsg.style.color = warn ? '#e07070' : 'var(--text-dim)'; -} - -// ───────────────────────────────────────────────────────────────── -// PHASE 3 — SCROLL ZOOM ON LEFT PANEL -// ───────────────────────────────────────────────────────────────── -const ZOOM_SCALE_MIN = 0.5; -const ZOOM_SCALE_MAX = 4.0; -const ZOOM_SCALE_STEP = 0.1; - -// Zoom state — separate "last rendered" zoom from "desired" zoom so we can -// use CSS transform for instant feedback without triggering a PDF re-render -// on every wheel tick. -let _lastRenderedZoom = 1.0; -let _zoomSettleTimer = null; -let _zoomAnchorFracX = 0.5; -let _zoomAnchorFracY = 0.5; -let _zoomAnchorClientX = 0; -let _zoomAnchorClientY = 0; - -function updateZoomLabel() { - const pct = Math.round(state.zoomScale * 100); - zoomLabel.textContent = pct + '%'; - btnZoomReset.style.opacity = state.zoomScale === 1.0 ? '0.4' : '1'; -} - -imagePanelBody.addEventListener('wheel', e => { - if (state.mode === 'none') return; - if (state.ocrOverlay) return; // overlay is showing — let scroll pass through normally - e.preventDefault(); - - const delta = e.deltaY < 0 ? ZOOM_SCALE_STEP : -ZOOM_SCALE_STEP; - const newZoom = Math.round( - Math.max(ZOOM_SCALE_MIN, Math.min(ZOOM_SCALE_MAX, state.zoomScale + delta)) * 10 - ) / 10; - - if (newZoom === state.zoomScale) return; - - // Capture cursor anchor once at the start of each new gesture (when timer isn't running) - if (_zoomSettleTimer === null) { - const rect = imagePanelBody.getBoundingClientRect(); - const cssW = parseFloat(pdfCanvas.style.width) || pdfCanvas.clientWidth || 700; - const cssH = parseFloat(pdfCanvas.style.height) || pdfCanvas.clientHeight || 900; - _zoomAnchorClientX = e.clientX - rect.left; - _zoomAnchorClientY = e.clientY - rect.top; - _zoomAnchorFracX = (_zoomAnchorClientX + imagePanelBody.scrollLeft) / cssW; - _zoomAnchorFracY = (_zoomAnchorClientY + imagePanelBody.scrollTop) / cssH; - } - - state.zoomScale = newZoom; - updateZoomLabel(); - - // Instant visual feedback via CSS transform — GPU-composited, zero layout impact, - // zero flicker. Scale relative to the last full render so the factor is exact. - const sf = state.zoomScale / _lastRenderedZoom; - const ox = _zoomAnchorFracX * 100; - const oy = _zoomAnchorFracY * 100; - pdfCanvas.style.transformOrigin = `${ox}% ${oy}%`; - pdfCanvas.style.transform = `scale(${sf})`; - overlay.style.transformOrigin = `${ox}% ${oy}%`; - overlay.style.transform = `scale(${sf})`; - - // After the scroll gesture settles, do ONE proper HiDPI re-render - clearTimeout(_zoomSettleTimer); - _zoomSettleTimer = setTimeout(async () => { - _zoomSettleTimer = null; - - // Clear the transform before re-render to avoid double-scaling - pdfCanvas.style.transform = ''; - pdfCanvas.style.transformOrigin = ''; - overlay.style.transform = ''; - overlay.style.transformOrigin = ''; - - state.lastRenderTime = 0; - - if (state.pdfDoc) { - await renderCurrentPage(); - } - - _lastRenderedZoom = state.zoomScale; - - // Scroll so the anchor point stays under the cursor - const newCSSW = parseFloat(pdfCanvas.style.width) || pdfCanvas.clientWidth; - const newCSSH = parseFloat(pdfCanvas.style.height) || pdfCanvas.clientHeight; - imagePanelBody.scrollLeft = _zoomAnchorFracX * newCSSW - _zoomAnchorClientX; - imagePanelBody.scrollTop = _zoomAnchorFracY * newCSSH - _zoomAnchorClientY; - }, 150); -}, { passive: false }); - -btnZoomReset.addEventListener('click', async () => { - if (state.zoomScale === 1.0) return; - // Cancel any pending settle timer - clearTimeout(_zoomSettleTimer); - _zoomSettleTimer = null; - // Clear any in-progress CSS transform - pdfCanvas.style.transform = ''; - pdfCanvas.style.transformOrigin = ''; - overlay.style.transform = ''; - overlay.style.transformOrigin = ''; - state.zoomScale = 1.0; - updateZoomLabel(); - state.lastRenderTime = 0; - await renderCurrentPage(); - _lastRenderedZoom = 1.0; - imagePanelBody.scrollLeft = 0; - imagePanelBody.scrollTop = 0; -}); - -// ───────────────────────────────────────────────────────────────── -// ROLE SWITCHER — PASS 1 / PASS 2 -// ───────────────────────────────────────────────────────────────── -const roleSelect = document.getElementById('role-select'); -const pass2Banner = document.getElementById('pass2-banner'); -const pass2BannerText = document.getElementById('pass2-banner-text'); - -let currentRole = 'pass1'; -let pass2Flags = {}; - -const PASS2_BTN_LABELS = { done: '✓ Pass 2 approved', problem: '⚠ Needs work' }; -const PASS1_BTN_LABELS = { done: '✓ Done', problem: '⚠ Problem' }; - -function getVerifiedPages() { - return Object.keys(state.flags) - .filter(k => state.flags[k] === 'done') - .map(Number) - .sort((a, b) => a - b); -} - -function updatePass2NavButtons() { - const verified = getVerifiedPages(); - // If Pass 1 queue has no done pages yet, fall back to sequential navigation - if (!verified.length) { - btnPrev.disabled = !state.pdfDoc || state.currentPage <= 1; - btnNext.disabled = !state.pdfDoc || state.currentPage >= state.totalPages; - return; - } - if (!state.pdfDoc) { btnPrev.disabled = true; btnNext.disabled = true; return; } - btnPrev.disabled = !verified.some(p => p < state.currentPage); - btnNext.disabled = !verified.some(p => p > state.currentPage); -} - -function updatePass2Banner() { - const count = getVerifiedPages().length; - pass2BannerText.textContent = count === 0 - ? 'Pass 2 mode · No pages in queue' - : 'Pass 2 mode · ' + count + ' page' + (count === 1 ? '' : 's') + ' ready for review'; - updatePass2NavButtons(); -} - -function applyRole(role) { - currentRole = role; - localStorage.setItem('p44-role', role); - roleSelect.value = role; - if (role === 'pass2') { - pass2Banner.style.display = 'flex'; - btnOcrToggle.style.display = 'inline-block'; - btnFlagDone.textContent = PASS2_BTN_LABELS.done; - btnFlagProblem.textContent = PASS2_BTN_LABELS.problem; - updatePass2Banner(); - } else { - pass2Banner.style.display = 'none'; - btnOcrToggle.style.display = 'none'; - state.ocrOverlay = false; - btnOcrToggle.classList.remove('active'); - hideOCROverlay(); - btnFlagDone.textContent = PASS1_BTN_LABELS.done; - btnFlagProblem.textContent = PASS1_BTN_LABELS.problem; - if (state.pdfDoc) { - btnPrev.disabled = state.currentPage <= 1; - btnNext.disabled = state.currentPage >= state.totalPages; - } - } - updateFlagButtons(state.currentPage); -} - -function savePass2Flags() { - try { localStorage.setItem(LS_PASS2_FLAGS_KEY, JSON.stringify(pass2Flags)); } catch (_) {} - fetch(SERVER_PASS2_ENDPOINT, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(pass2Flags), - }).catch(() => {}); -} - -function loadPass2FlagsOnStartup() { - fetch('/' + SERVER_PASS2_FLAGS_FILE) - .then(r => r.ok ? r.json() : Promise.reject()) - .then(data => { pass2Flags = data; }) - .catch(() => { - try { - const stored = localStorage.getItem(LS_PASS2_FLAGS_KEY); - if (stored) pass2Flags = JSON.parse(stored); - } catch (_) {} - }); -} - -function resetPass2() { - if (!confirm( - 'Reset Pass 2?\n\n' + - 'This will clear:\n' + - ' • All Pass 2 approved / needs-work / rejected flags\n' + - ' • All saved text corrections\n\n' + - 'Pass 1 done flags are NOT affected.\n\n' + - 'This cannot be undone.' - )) return; - - // Wipe Pass 2 flags - pass2Flags = {}; - try { localStorage.removeItem(LS_PASS2_FLAGS_KEY); } catch (_) {} - - // Wipe corrections (these are shared with Pass 1 editor but the contamination - // source was Pass 2 auto-edit; clearing gives a clean slate) - state.corrections = {}; - try { localStorage.removeItem(LS_CORRECTIONS_KEY); } catch (_) {} - try { fetch(SERVER_CORRECTIONS_END, { method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({}) }); } catch (_) {} - - // Refresh UI - updateFlagButtons(state.currentPage); - updateCorrectionIndicator(state.currentPage); - updatePass2Banner(); - if (state.pdfDoc) showOCRPage(state.currentPage); - setStatus('Pass 2 queue reset — all Pass 2 flags and corrections cleared.'); -} - -document.getElementById('btn-pass2-reset').addEventListener('click', resetPass2); - -// ───────────────────────────────────────────────────────────────── -// PASS 2 — CHANGE SUMMARY PANEL (Step 9) -// ───────────────────────────────────────────────────────────────── - -// Walk both word arrays simultaneously and produce a list of changes. -// Simple sequential diff — fast, good enough for plain-text corrections. -function buildChangeSummary(originalText, pass1Text) { - const orig = (originalText || '').trim().split(/\s+/).filter(Boolean); - const edit = (pass1Text || '').trim().split(/\s+/).filter(Boolean); - if (orig.join(' ') === edit.join(' ')) return []; - - const changes = []; - let i = 0, j = 0; - while (i < orig.length || j < edit.length) { - if (changes.length >= 50) { changes.push({ type: 'truncated' }); break; } - if (i >= orig.length) { changes.push({ type: 'added', word: edit[j++] }); } - else if (j >= edit.length) { changes.push({ type: 'deleted', word: orig[i++] }); } - else if (orig[i] === edit[j]) { i++; j++; } - else { changes.push({ type: 'changed', from: orig[i++], to: edit[j++] }); } - } - return changes; -} - -function showPass2ChangeSummary(pageNum) { - const panel = document.getElementById('pass2-change-summary'); - if (!panel) return; - - const corr = state.corrections && state.corrections[pageNum]; - if (!corr || !corr.pass1 || currentRole !== 'pass2') { - panel.style.display = 'none'; - return; - } - - const changes = buildChangeSummary(corr.original || state.ocrPages[pageNum] || '', corr.pass1); - if (!changes.length) { panel.style.display = 'none'; return; } - - const truncated = changes.find(c => c.type === 'truncated'); - const realChanges = changes.filter(c => c.type !== 'truncated'); - const count = truncated ? '50+' : realChanges.length; - - const listHtml = realChanges.map(c => { - if (c.type === 'changed') return `~ "${escH(c.from)}" → "${escH(c.to)}"`; - if (c.type === 'added') return `+ "${escH(c.word)}"`; - if (c.type === 'deleted') return `− "${escH(c.word)}"`; - return ''; - }).join('