Benjamin_Boenisch/breakpilot-lehrer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Pixel-Overlay fuer alle Zellen + Auto-Schriftgroesse + kein contentEditable
Some checks failed
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-school (push) Successful in 31s
Details
CI / test-go-edu-search (push) Successful in 31s
Details
CI / test-python-klausur (push) Failing after 2m4s
Details
CI / test-python-agent-core (push) Successful in 19s
Details
CI / test-nodejs-website (push) Successful in 27s
Details

Browse Source 
- Auch Single-Group-Zellen (z.B. Ueberschriften) per Pixel positionieren
- Auto font-size per canvas measureText (Text fuellt Cluster-Breite aus)
- contentEditable entfernt (pointer-events-none), Tabelle zum Editieren
- overflow:visible statt hidden verhindert Klick-Shift-Bug

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-10 13:25:16 +01:00
parent ad28f9420a
commit 2055597ba4
1 changed files with 75 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
admin-lehrer/components/ocr-pipeline/StepLlmReview.tsx
View File

@@ -92,8 +92,8 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
const reconRef = useRef<HTMLDivElement>(null)
const [reconWidth, setReconWidth] = useState(0)
// Pixel-analysed word positions: cell_id → [{xPct, wPct, text}]
const [cellWordPositions, setCellWordPositions] = useState<Map<string, { xPct: number; wPct: number; text: string }[]>>(new Map())
// Pixel-analysed word positions: cell_id → [{xPct, wPct, text, fontRatio}]
const [cellWordPositions, setCellWordPositions] = useState<Map<string, { xPct: number; wPct: number; text: string; fontRatio: number }[]>>(new Map())
const tableRef = useRef<HTMLDivElement>(null)
const activeRowRef = useRef<HTMLTableRowElement>(null)
@@ -124,14 +124,17 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
if (!ctx) return
ctx.drawImage(img, 0, 0)
const positions = new Map<string, { xPct: number; wPct: number; text: string }[]>()
const refFontSize = 40
const fontFam = "'Liberation Sans', Arial, sans-serif"
ctx.font = `${refFontSize}px ${fontFam}`
const positions = new Map<string, { xPct: number; wPct: number; text: string; fontRatio: number }[]>()
for (const cell of cells) {
if (!cell.bbox_pct || !cell.text) continue
// Split by 3+ whitespace — only analyse cells with multiple word-groups
// Split by 3+ whitespace into word-groups
const groups = cell.text.split(/\s{3,}/).map(s => s.trim()).filter(Boolean)
if (groups.length <= 1) continue
// Pixel region for this cell
const imgW = img.naturalWidth
@@ -177,19 +180,44 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
}
if (inCluster) clusters.push({ start: clStart, end: cw - 1 - gap })
// Need enough clusters for all word groups
if (clusters.length < groups.length) continue
if (clusters.length === 0) continue
// Match word-groups to clusters left-to-right
const wordPos: { xPct: number; wPct: number; text: string }[] = []
for (let i = 0; i < groups.length; i++) {
const cl = clusters[i]
const wordPos: { xPct: number; wPct: number; text: string; fontRatio: number }[] = []
if (groups.length <= 1) {
// Single group: position at first cluster, merge all clusters for width
const firstCl = clusters[0]
const lastCl = clusters[clusters.length - 1]
const clusterW = lastCl.end - firstCl.start + 1
// Auto font-size: fit text width to cluster width
const measured = ctx.measureText(cell.text.trim())
const autoFontPx = refFontSize * (clusterW / measured.width)
const fontRatio = Math.min(autoFontPx / ch, 1.0) // ratio of cell height
wordPos.push({
xPct: cell.bbox_pct.x + (cl.start / cw) * cell.bbox_pct.w,
wPct: ((cl.end - cl.start + 1) / cw) * cell.bbox_pct.w,
text: groups[i],
xPct: cell.bbox_pct.x + (firstCl.start / cw) * cell.bbox_pct.w,
wPct: ((lastCl.end - firstCl.start + 1) / cw) * cell.bbox_pct.w,
text: cell.text.trim(),
fontRatio,
})
} else if (clusters.length >= groups.length) {
// Multiple groups: match to clusters left-to-right
for (let i = 0; i < groups.length; i++) {
const cl = clusters[i]
const clusterW = cl.end - cl.start + 1
const measured = ctx.measureText(groups[i])
const autoFontPx = refFontSize * (clusterW / measured.width)
const fontRatio = Math.min(autoFontPx / ch, 1.0)
wordPos.push({
xPct: cell.bbox_pct.x + (cl.start / cw) * cell.bbox_pct.w,
wPct: ((cl.end - cl.start + 1) / cw) * cell.bbox_pct.w,
text: groups[i],
fontRatio,
})
}
} else {
continue // fewer clusters than groups — skip
}
positions.set(cell.cell_id, wordPos)
}
@@ -792,45 +820,46 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
const aspect = imageNaturalSize ? imageNaturalSize.h / imageNaturalSize.w : 4 / 3
const containerH = reconWidth * aspect
const cellHeightPx = containerH * (cell.bbox_pct.h / 100)
const fontSize = Math.max(6, cellHeightPx * fontScale)
const wordPos = cellWordPositions.get(cell.cell_id)
// Pixel-analysed: render each word-group at its detected position
if (wordPos && wordPos.length > 1) {
return wordPos.map((wp, i) => (
<span
key={`${cell.cell_id}_${i}`}
className="absolute leading-none overflow-hidden"
contentEditable
suppressContentEditableWarning
style={{
left: `${wp.xPct}%`,
top: `${cell.bbox_pct.y}%`,
width: `${wp.wPct}%`,
height: `${cell.bbox_pct.h}%`,
fontSize: `${fontSize}px`,
fontWeight: globalBold ? 'bold' : (cell.is_bold ? 'bold' : 'normal'),
fontFamily: "'Liberation Sans', Arial, sans-serif",
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
color: '#1a1a1a',
}}
onBlur={(e) => handleCellEdit(cell.cell_id, cell.row_index, e.currentTarget.textContent)}
>
{wp.text}
</span>
))
// Pixel-analysed: render word-groups at detected positions
if (wordPos) {
return wordPos.map((wp, i) => {
// Auto font-size from pixel analysis, scaled by user slider
const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
const fs = Math.max(6, autoFontPx)
return (
<span
key={`${cell.cell_id}_${i}`}
className="absolute leading-none pointer-events-none select-none"
style={{
left: `${wp.xPct}%`,
top: `${cell.bbox_pct.y}%`,
width: `${wp.wPct}%`,
height: `${cell.bbox_pct.h}%`,
fontSize: `${fs}px`,
fontWeight: globalBold ? 'bold' : (cell.is_bold ? 'bold' : 'normal'),
fontFamily: "'Liberation Sans', Arial, sans-serif",
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
overflow: 'visible',
color: '#1a1a1a',
}}
>
{wp.text}
</span>
)
})
}
// Fallback: single span for entire cell
// Fallback: no pixel data — single span for entire cell
const fontSize = Math.max(6, cellHeightPx * fontScale)
return (
<span
key={cell.cell_id}
className="absolute leading-none overflow-hidden"
contentEditable
suppressContentEditableWarning
className="absolute leading-none pointer-events-none select-none"
style={{
left: `${cellX}%`,
top: `${cell.bbox_pct.y}%`,
@@ -843,9 +872,9 @@ export function StepLlmReview({ sessionId, onNext }: StepLlmReviewProps) {
display: 'flex',
alignItems: 'center',
whiteSpace: 'pre',
overflow: 'visible',
color: '#1a1a1a',
}}
onBlur={(e) => handleCellEdit(cell.cell_id, cell.row_index, e.currentTarget.textContent)}
>
{cell.text}
</span>