133 lines
6.0 KiB
HTML
133 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>P44 OCR Viewer</title>
|
|
<!-- PDF.js (CDN — needs internet access; served via launch_viewer.py) -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
|
<link rel="stylesheet" href="p44-ocr-viewer.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- ── Toolbar ─────────────────────────────────────────────── -->
|
|
<div id="toolbar">
|
|
<a id="btn-back" href="p44-landing.html" class="tb-btn" title="Back to diary list">← Diaries</a>
|
|
<div class="divider"></div>
|
|
<h1>⚜ P44 OCR VIEWER</h1>
|
|
<span id="diary-label" style="font-size:10px;color:var(--gold-dim);letter-spacing:.06em;margin-left:6px;"></span>
|
|
<div class="divider"></div>
|
|
|
|
<!-- Single override dropdown — wraps all three hidden file inputs -->
|
|
<div id="override-wrap">
|
|
<button id="btn-override" class="tb-btn" type="button">Override ▾</button>
|
|
<div id="override-menu">
|
|
<label class="override-item">📄 Load PDF <input type="file" id="input-pdf" accept=".pdf,application/pdf" /></label>
|
|
<label class="override-item">📝 Load OCR text<input type="file" id="input-text" accept=".txt,.md" /></label>
|
|
<label class="override-item">🔲 Load JSON <input type="file" id="input-json" accept=".json" /></label>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<button id="btn-clear-p1-queue" class="tb-btn" title="Clear all Pass 1 done flags — empties the Pass 2 queue">↺ Clear P1 queue</button>
|
|
<div style="flex:1;min-width:0;"></div>
|
|
<div class="divider"></div>
|
|
<div class="toolbar-group">
|
|
<span class="lbl">ROLE</span>
|
|
<select id="role-select" title="Switch review pass">
|
|
<option value="pass1">Pass 1 — Volunteer</option>
|
|
<option value="pass2">Pass 2 — Senior Editor</option>
|
|
</select>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<button id="btn-clear-all" class="tb-btn" title="Wipe all saved flags, corrections and role — cannot be undone"
|
|
style="border-color:#d05050;color:#d05050;">⚠ Clear all data</button>
|
|
</div>
|
|
|
|
<!-- ── Pass 2 review banner ──────────────────────────────── -->
|
|
<div id="pass2-banner">
|
|
<span id="pass2-banner-text">Pass 2 mode · 0 pages ready for review</span>
|
|
<span style="flex:1;"></span>
|
|
<button id="btn-pass2-reset" title="Wipe all Pass 2 flags and corrections — start fresh"
|
|
style="background:transparent;border:1px solid #c08020;border-radius:3px;color:#e8b848;
|
|
font-size:10px;font-family:inherit;padding:2px 9px;cursor:pointer;letter-spacing:.04em;">
|
|
↺ Reset Pass 2
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ── Panels ──────────────────────────────────────────────── -->
|
|
<div id="panels">
|
|
|
|
<!-- Left: PDF / image -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="ph-title">Source Document — Page Scan</span>
|
|
<span id="zoom-label">100%</span>
|
|
<button id="btn-zoom-reset" title="Reset zoom to 100%">1:1</button>
|
|
<button id="btn-ocr-toggle" class="tb-btn" title="Toggle between page scan and original OCR text" style="display:none;">📄 OCR</button>
|
|
<div class="page-nav">
|
|
<button id="btn-prev" disabled>◀</button>
|
|
<input type="number" id="page-input" value="1" min="1" aria-label="Page number" />
|
|
<button id="btn-next" disabled>▶</button>
|
|
<span id="page-label">/ —</span>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body" id="image-panel-body">
|
|
<div class="panel-placeholder" id="image-placeholder">
|
|
<div class="spinner" id="img-spinner" style="display:none;"></div>
|
|
<div id="img-ph-text">
|
|
War diary scan loads automatically.
|
|
</div>
|
|
</div>
|
|
<div id="pdf-container" style="display:none;">
|
|
<canvas id="pdf-canvas"></canvas>
|
|
<div id="overlay"></div>
|
|
</div>
|
|
<div id="ocr-overlay-panel" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: OCR text -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<span class="ph-title">OCR Text Output</span>
|
|
<span id="ocr-sync-label" style="font-size:9px;color:var(--gold-dim);"></span>
|
|
<button id="btn-flag-done" class="tb-btn flag-btn" title="Mark page as done — sends to Pass 2 queue. Cannot be undone.">✓ Done</button>
|
|
<button id="btn-flag-problem" class="tb-btn flag-btn" title="Flag page as a problem — OCR too bad to fix. Still goes to Pass 2.">⚠ Problem</button>
|
|
</div>
|
|
<div class="panel-body" id="text-panel-body">
|
|
<div class="panel-placeholder" id="text-placeholder">
|
|
<div class="spinner" id="txt-spinner" style="display:none;"></div>
|
|
<div id="txt-ph-text">
|
|
OCR transcript loads automatically.
|
|
</div>
|
|
</div>
|
|
<div id="done-banner" style="display:none;"></div>
|
|
<div id="pass2-revert-bar" style="display:none;"></div>
|
|
<div id="pass2-change-summary" style="display:none;"></div>
|
|
<div id="editor-wrap">
|
|
<div id="line-numbers"></div>
|
|
<textarea id="text-editor" aria-label="OCR text editor" wrap="soft"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Footer ──────────────────────────────────────────────── -->
|
|
<div id="footer">
|
|
<span id="status-msg">Ready — run launch_viewer.py to auto-load Calgary Highlanders data.</span>
|
|
<span id="flags-summary"></span>
|
|
<span id="kbd-hint">← → navigate v done p problem esc close</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="p44-ocr-viewer.js"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|