[split-required] Split 58 monoliths across Python, Go, TypeScript (Phases 1-3)
Phase 1 — Python (klausur-service): 5 monoliths → 36 files - dsfa_corpus_ingestion.py (1,828 LOC → 5 files) - cv_ocr_engines.py (2,102 LOC → 7 files) - cv_layout.py (3,653 LOC → 10 files) - vocab_worksheet_api.py (2,783 LOC → 8 files) - grid_build_core.py (1,958 LOC → 6 files) Phase 2 — Go (edu-search-service, school-service): 8 monoliths → 19 files - staff_crawler.go (1,402 → 4), policy/store.go (1,168 → 3) - policy_handlers.go (700 → 2), repository.go (684 → 2) - search.go (592 → 2), ai_extraction_handlers.go (554 → 2) - seed_data.go (591 → 2), grade_service.go (646 → 2) Phase 3 — TypeScript (admin-lehrer): 45 monoliths → 220+ files - sdk/types.ts (2,108 → 16 domain files) - ai/rag/page.tsx (2,686 → 14 files) - 22 page.tsx files split into _components/ + _hooks/ - 11 component files split into sub-components - 10 SDK data catalogs added to loc-exceptions - Deleted dead backup index_original.ts (4,899 LOC) All original public APIs preserved via re-export facades. Zero new errors: Python imports verified, Go builds clean, TypeScript tsc --noEmit shows only pre-existing errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
302
admin-lehrer/components/ocr-pipeline/ReconstructionOverlay.tsx
Normal file
302
admin-lehrer/components/ocr-pipeline/ReconstructionOverlay.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import type { StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'
|
||||
import type { WordPosition } from './usePixelWordPositions'
|
||||
import type { EditableCell, PageRegion, RowItem, PageZone } from './StepReconstructionTypes'
|
||||
import { adjustCellForBoxZones } from './StepReconstructionTypes'
|
||||
import { StructureLayer } from './StructureLayer'
|
||||
|
||||
interface ReconstructionOverlayProps {
|
||||
cells: EditableCell[]
|
||||
dewarpedUrl: string
|
||||
imageNaturalSize: { w: number; h: number } | null
|
||||
parentColumns: PageRegion[]
|
||||
parentRows: RowItem[]
|
||||
parentZones: PageZone[]
|
||||
structureBoxes: StructureBox[]
|
||||
structureGraphics: StructureGraphic[]
|
||||
showStructure: boolean
|
||||
fontScale: number
|
||||
globalBold: boolean
|
||||
boxZonesPct: { topPct: number; bottomPct: number }[]
|
||||
cellWordPositions: Map<string, WordPosition[]>
|
||||
onTextChange: (cellId: string, newText: string) => void
|
||||
onKeyDown: (e: React.KeyboardEvent, cellId: string) => void
|
||||
onResetCell: (cellId: string) => void
|
||||
onImageNaturalSize: (size: { w: number; h: number }) => void
|
||||
getDisplayText: (cell: EditableCell) => string
|
||||
isEdited: (cell: EditableCell) => boolean
|
||||
}
|
||||
|
||||
export function ReconstructionOverlay({
|
||||
cells,
|
||||
dewarpedUrl,
|
||||
imageNaturalSize,
|
||||
parentColumns,
|
||||
parentRows,
|
||||
parentZones,
|
||||
structureBoxes,
|
||||
structureGraphics,
|
||||
showStructure,
|
||||
fontScale,
|
||||
globalBold,
|
||||
boxZonesPct,
|
||||
cellWordPositions,
|
||||
onTextChange,
|
||||
onKeyDown,
|
||||
onResetCell,
|
||||
onImageNaturalSize,
|
||||
getDisplayText,
|
||||
isEdited,
|
||||
}: ReconstructionOverlayProps) {
|
||||
const reconRef = useRef<HTMLDivElement>(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()
|
||||
}, [])
|
||||
|
||||
const imgW = imageNaturalSize?.w || 1
|
||||
const imgH = imageNaturalSize?.h || 1
|
||||
const aspect = imgH / imgW
|
||||
const containerH = reconWidth * aspect
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* Left: Original image */}
|
||||
<div>
|
||||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||||
Originalbild
|
||||
</div>
|
||||
<div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 sticky top-4">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={dewarpedUrl}
|
||||
alt="Original"
|
||||
className="w-full h-auto"
|
||||
onLoad={(e) => {
|
||||
const img = e.target as HTMLImageElement
|
||||
onImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Reconstructed table overlay */}
|
||||
<div>
|
||||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||||
Rekonstruktion ({cells.length} Zellen)
|
||||
</div>
|
||||
<div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white">
|
||||
<div
|
||||
ref={reconRef}
|
||||
className="relative"
|
||||
style={{ aspectRatio: `${imgW} / ${imgH}` }}
|
||||
>
|
||||
{/* Column lines */}
|
||||
{parentColumns
|
||||
.filter(c => !['header', 'footer'].includes(c.type))
|
||||
.map((col, i) => (
|
||||
<div
|
||||
key={`col-${i}`}
|
||||
className="absolute top-0 bottom-0 border-l border-gray-300/50"
|
||||
style={{ left: `${(col.x / imgW) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Row lines */}
|
||||
{parentRows.map((row, i) => (
|
||||
<div
|
||||
key={`row-${i}`}
|
||||
className="absolute left-0 right-0 border-t border-gray-300/50"
|
||||
style={{ top: `${(row.y / imgH) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Box zone highlight */}
|
||||
{parentZones
|
||||
.filter(z => z.zone_type === 'box' && z.box)
|
||||
.map((z, i) => {
|
||||
const box = z.box!
|
||||
return (
|
||||
<div
|
||||
key={`box-${i}`}
|
||||
className="absolute border-2 border-blue-400/30 bg-blue-50/10 pointer-events-none"
|
||||
style={{
|
||||
left: `${(box.x / imgW) * 100}%`,
|
||||
top: `${(box.y / imgH) * 100}%`,
|
||||
width: `${(box.width / imgW) * 100}%`,
|
||||
height: `${(box.height / imgH) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Structure elements (boxes, graphics) */}
|
||||
<StructureLayer
|
||||
boxes={structureBoxes}
|
||||
graphics={structureGraphics}
|
||||
imgW={imgW}
|
||||
imgH={imgH}
|
||||
show={showStructure}
|
||||
/>
|
||||
|
||||
{/* Pixel-positioned words / editable inputs */}
|
||||
{cells.map((cell) => renderOverlayCell(
|
||||
cell,
|
||||
getDisplayText(cell),
|
||||
isEdited(cell),
|
||||
cellWordPositions.get(cell.cellId),
|
||||
adjustCellForBoxZones(cell.bboxPct, cell.cellId, boxZonesPct),
|
||||
containerH,
|
||||
fontScale,
|
||||
globalBold,
|
||||
onTextChange,
|
||||
onKeyDown,
|
||||
onResetCell,
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Cell rendering for overlay mode ---
|
||||
|
||||
function renderOverlayCell(
|
||||
cell: EditableCell,
|
||||
displayText: string,
|
||||
edited: boolean,
|
||||
wordPos: WordPosition[] | undefined,
|
||||
adjBbox: { x: number; y: number; w: number; h: number },
|
||||
containerH: number,
|
||||
fontScale: number,
|
||||
globalBold: boolean,
|
||||
onTextChange: (cellId: string, text: string) => void,
|
||||
onKeyDown: (e: React.KeyboardEvent, cellId: string) => void,
|
||||
onResetCell: (cellId: string) => void,
|
||||
): React.ReactNode {
|
||||
const cellHeightPx = containerH * (adjBbox.h / 100)
|
||||
|
||||
// Pixel-analysed: render word-groups at detected positions as inputs
|
||||
if (wordPos && wordPos.length > 0) {
|
||||
return wordPos.map((wp, i) => {
|
||||
const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
|
||||
const fs = Math.max(6, autoFontPx)
|
||||
|
||||
// For multi-group cells, render as span (read-only positioned)
|
||||
if (wordPos.length > 1) {
|
||||
return (
|
||||
<span
|
||||
key={`${cell.cellId}_wp_${i}`}
|
||||
className="absolute leading-none pointer-events-none select-none"
|
||||
style={{
|
||||
left: `${wp.xPct}%`,
|
||||
top: `${adjBbox.y}%`,
|
||||
width: `${wp.wPct}%`,
|
||||
height: `${adjBbox.h}%`,
|
||||
fontSize: `${fs}px`,
|
||||
fontWeight: globalBold ? 'bold' : (cell.colType === 'column_en' ? 'bold' : 'normal'),
|
||||
fontFamily: "'Liberation Sans', Arial, sans-serif",
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'visible',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
>
|
||||
{wp.text}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
// Single group: render as editable input at pixel position
|
||||
return (
|
||||
<div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
|
||||
left: `${wp.xPct}%`,
|
||||
top: `${adjBbox.y}%`,
|
||||
width: `${wp.wPct}%`,
|
||||
height: `${adjBbox.h}%`,
|
||||
}}>
|
||||
<input
|
||||
id={`cell-${cell.cellId}`}
|
||||
type="text"
|
||||
value={displayText}
|
||||
onChange={(e) => onTextChange(cell.cellId, e.target.value)}
|
||||
onKeyDown={(e) => onKeyDown(e, cell.cellId)}
|
||||
className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
|
||||
edited ? 'bg-green-50/30' : ''
|
||||
}`}
|
||||
style={{
|
||||
fontSize: `${fs}px`,
|
||||
fontWeight: globalBold ? 'bold' : (cell.colType === 'column_en' ? 'bold' : 'normal'),
|
||||
fontFamily: "'Liberation Sans', Arial, sans-serif",
|
||||
lineHeight: '1',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
title={`${cell.cellId} (${cell.colType})`}
|
||||
/>
|
||||
{edited && (
|
||||
<button
|
||||
onClick={() => onResetCell(cell.cellId)}
|
||||
className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
||||
title="Zuruecksetzen"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// Fallback: no pixel data — single input at cell bbox
|
||||
if (!cell.text) return null
|
||||
|
||||
const fontSize = Math.max(6, cellHeightPx * fontScale)
|
||||
return (
|
||||
<div key={cell.cellId} className="absolute group" style={{
|
||||
left: `${adjBbox.x}%`,
|
||||
top: `${adjBbox.y}%`,
|
||||
width: `${adjBbox.w}%`,
|
||||
height: `${adjBbox.h}%`,
|
||||
}}>
|
||||
<input
|
||||
id={`cell-${cell.cellId}`}
|
||||
type="text"
|
||||
value={displayText}
|
||||
onChange={(e) => onTextChange(cell.cellId, e.target.value)}
|
||||
onKeyDown={(e) => onKeyDown(e, cell.cellId)}
|
||||
className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
|
||||
edited ? 'bg-green-50/30' : ''
|
||||
}`}
|
||||
style={{
|
||||
fontSize: `${fontSize}px`,
|
||||
fontWeight: globalBold ? 'bold' : 'normal',
|
||||
fontFamily: "'Liberation Sans', Arial, sans-serif",
|
||||
lineHeight: '1',
|
||||
color: '#1a1a1a',
|
||||
}}
|
||||
title={`${cell.cellId} (${cell.colType})`}
|
||||
/>
|
||||
{edited && (
|
||||
<button
|
||||
onClick={() => onResetCell(cell.cellId)}
|
||||
className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
|
||||
title="Zuruecksetzen"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user