diff --git a/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx b/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx index 1bb1bae..93d2473 100644 --- a/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx +++ b/admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx @@ -46,6 +46,19 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) { const leftPanelRef = useRef(null) const rightPanelRef = useRef(null) + const reconRef = useRef(null) + const [reconWidth, setReconWidth] = useState(0) + + // Track reconstruction container width for font size calculation + useEffect(() => { + const el = reconRef.current + if (!el) return + const obs = new ResizeObserver(entries => { + for (const entry of entries) setReconWidth(entry.contentRect.width) + }) + obs.observe(el) + return () => obs.disconnect() + }, [session]) // Load session data useEffect(() => { @@ -68,7 +81,9 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) { columnsUsed: wordResult.columns_used || [], imageWidth: wordResult.image_width || data.image_width || 800, imageHeight: wordResult.image_height || data.image_height || 600, - originalImageUrl: data.original_image_url || `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/original`, + originalImageUrl: data.original_image_url + ? `${KLAUSUR_API}${data.original_image_url}` + : `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/original`, }) // Load existing validation data @@ -323,6 +338,7 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
{/* Reconstruction container */}
- {/* Column background stripes */} - {session.columnsUsed.map((col, i) => { - const color = COL_TYPE_COLORS[col.type] || '#9ca3af' - return ( -
- ) - })} - {/* Row separator lines — derive from cells */} {(() => { const rowYs = new Set() @@ -364,27 +363,33 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) { style={{ top: `${y}%`, height: '1px', - backgroundColor: 'rgba(0,0,0,0.08)', + backgroundColor: 'rgba(0,0,0,0.06)', }} /> )) })()} - {/* Cell texts */} + {/* Cell texts — black on white, font size derived from cell height */} {session.cells.map(cell => { if (!cell.bbox_pct || !cell.text) return null - const color = COL_TYPE_COLORS[cell.col_type] || '#374151' + // Container height in px = reconWidth * aspect + // Cell height in px = containerHeightPx * (bbox_pct.h / 100) + // Font size ≈ 70% of cell height + const containerH = reconWidth * aspect + const cellHeightPx = containerH * (cell.bbox_pct.h / 100) + const fontSize = Math.max(6, cellHeightPx * 0.7) return (