From 4949863bd7bbaf917d77478315ab32397d008538 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Wed, 11 Mar 2026 19:15:52 +0100 Subject: [PATCH] revert: Zurueck zum Einzelwort-Slide mit fontRatio=1.0 Fix Gruppen-Sliding schob nicht weit genug nach rechts. Zurueck zum Original-Einzelwort-Slide, aber mit den Fixes: - fontRatio=1.0 (konsistente Schriftgroesse wie Fallback) - Token-Breiten aus medianCh * 0.7 / refFontSize (statt totalInk) Co-Authored-By: Claude Opus 4.6 --- .../ocr-overlay/useSlideWordPositions.ts | 129 +++++------------- 1 file changed, 37 insertions(+), 92 deletions(-) diff --git a/admin-lehrer/components/ocr-overlay/useSlideWordPositions.ts b/admin-lehrer/components/ocr-overlay/useSlideWordPositions.ts index 76d1798..ec3159b 100644 --- a/admin-lehrer/components/ocr-overlay/useSlideWordPositions.ts +++ b/admin-lehrer/components/ocr-overlay/useSlideWordPositions.ts @@ -11,17 +11,14 @@ export interface WordPosition { /** * "Slide from left" positioning algorithm. * - * Groups (separated by 3+ spaces in the OCR text) are slid left-to-right - * across the dark-pixel projection until each group locks onto its ink. - * Each group becomes one WordPosition — no words are dropped. + * Takes ALL recognised words per cell and slides them left-to-right across + * the row's dark-pixel projection until each word "locks" onto its ink. * - * The key difference from the cluster algorithm: instead of matching groups - * to detected clusters (which can fail when cluster count != group count), - * we slide each group sequentially and let it find its own ink. + * Font size: fontRatio = 1.0 for all tokens (matches fallback rendering). + * Token widths: derived from canvas measureText scaled to the rendered font + * size (medianCh * 0.7), ensuring visually correct proportions. * - * Font size: fontRatio = 1.0 for all (same as fallback rendering). - * Width: each group's wPct is measured from canvas measureText, scaled to - * match the rendered font size, so text fills its container exactly. + * Guarantees: no words dropped, no complex matching rules needed. */ export function useSlideWordPositions( imageUrl: string, @@ -59,7 +56,7 @@ export function useSlideWordPositions( const fontFam = "'Liberation Sans', Arial, sans-serif" ctx.font = `${refFontSize}px ${fontFam}` - // --- Median cell height for consistent font sizing --- + // --- Global font scale from median cell height --- const cellHeights = cells .filter(c => c.bbox_pct && c.bbox_pct.h > 0) .map(c => Math.round(c.bbox_pct.h / 100 * imgH)) @@ -68,10 +65,10 @@ export function useSlideWordPositions( ? cellHeights[Math.floor(cellHeights.length / 2)] : 30 - // Scale: measureText (at refFontSize=40) → image pixels at rendered font. - // Rendered font in image-pixel units ≈ medianCh * fontScale(0.7). + // measureScale maps measureText pixels → image pixels at rendered font const renderedFontImgPx = medianCh * 0.7 const measureScale = renderedFontImgPx / refFontSize + const spaceWidthPx = Math.max(2, Math.round(ctx.measureText(' ').width * measureScale)) const positions = new Map() @@ -114,111 +111,59 @@ export function useSlideWordPositions( ink.reverse() } - // --- Split into GROUPS by 3+ spaces (preserving column structure) --- - // Then fall back to the full text as a single group. - let groups = cell.text.split(/\s{3,}/).map(s => s.trim()).filter(Boolean) - if (groups.length === 0) groups = [cell.text.trim()] - if (groups.length === 0 || !groups[0]) continue + // --- Split into individual tokens --- + const tokens = cell.text.split(/\s+/).filter(Boolean) + if (tokens.length === 0) continue - // Measure each group's width in image pixels - const groupWidthsPx = groups.map(g => - Math.max(4, Math.round(ctx.measureText(g).width * measureScale)) + // Token widths in image pixels (at rendered font size) + const tokenWidthsPx = tokens.map(t => + Math.max(4, Math.round(ctx.measureText(t).width * measureScale)) ) - // --- Find dark-pixel clusters (contiguous inked regions) --- - // Used to determine the ACTUAL ink width for each group (for wPct). - const minGap = Math.max(5, Math.round(cw * 0.02)) - const clusters: { start: number; end: number }[] = [] - let inCluster = false - let clStart = 0 - let gap = 0 - - for (let x = 0; x < cw; x++) { - if (ink[x]) { - if (!inCluster) { clStart = x; inCluster = true } - gap = 0 - } else if (inCluster) { - gap++ - if (gap > minGap) { - clusters.push({ start: clStart, end: x - gap }) - inCluster = false - gap = 0 - } - } - } - if (inCluster) clusters.push({ start: clStart, end: cw - 1 - gap }) - - // Filter narrow clusters (box borders / noise) - const minClusterW = Math.max(3, Math.round(cw * 0.005)) - const filteredClusters = clusters.filter(c => (c.end - c.start + 1) > minClusterW) - - // --- Slide each group left-to-right to find its ink --- + // --- Slide each token left-to-right --- const wordPos: WordPosition[] = [] let cursor = 0 - for (let gi = 0; gi < groups.length; gi++) { - const groupW = groupWidthsPx[gi] + for (let ti = 0; ti < tokens.length; ti++) { + const tokenW = tokenWidthsPx[ti] - // Find the first cluster (from cursor) that has substantial ink - // coverage under this group's expected width. - const coverageNeeded = Math.max(1, Math.round(groupW * 0.15)) + // Find first x from cursor where ≥15% of span has ink + const coverageNeeded = Math.max(1, Math.round(tokenW * 0.15)) let bestX = cursor - let foundInk = false - for (let x = cursor; x <= cw - Math.min(groupW, cw); x++) { + const searchLimit = Math.max(cursor, cw - tokenW) + + for (let x = cursor; x <= searchLimit; x++) { let inkCount = 0 - const spanEnd = Math.min(x + groupW, cw) + const spanEnd = Math.min(x + tokenW, cw) for (let dx = 0; dx < spanEnd - x; dx++) { inkCount += ink[x + dx] } if (inkCount >= coverageNeeded) { bestX = x - foundInk = true + break + } + // Safety: don't scan more than 30% of cell width past cursor + if (x > cursor + cw * 0.3 && ti > 0) { + bestX = cursor break } } - // If no ink found, try placing at the matching cluster position - if (!foundInk && filteredClusters.length > gi) { - bestX = filteredClusters[gi].start - } else if (!foundInk) { - bestX = cursor + // Clamp to cell bounds + if (bestX + tokenW > cw) { + bestX = Math.max(0, cw - tokenW) } - // Determine width: use the ink span from bestX to the next gap, - // but at least the measured text width. - let inkEnd = bestX + groupW - // Extend to cover the actual ink region starting at bestX - for (let x = bestX; x < cw; x++) { - if (!ink[x]) { - gap = 0 - for (let gx = x; gx < Math.min(x + minGap + 1, cw); gx++) { - if (!ink[gx]) gap++ - else break - } - if (gap > minGap) { - inkEnd = x - break - } - } - inkEnd = x + 1 - } - // Use the larger of: measured text width or actual ink span - const actualW = Math.max(groupW, inkEnd - bestX) - - // Clamp - const clampedX = Math.min(bestX, cw - 1) - const clampedW = Math.min(actualW, cw - clampedX) - wordPos.push({ - xPct: cell.bbox_pct.x + (clampedX / cw) * cell.bbox_pct.w, - wPct: (clampedW / cw) * cell.bbox_pct.w, - text: groups[gi], + xPct: cell.bbox_pct.x + (bestX / cw) * cell.bbox_pct.w, + wPct: (tokenW / cw) * cell.bbox_pct.w, + text: tokens[ti], fontRatio: 1.0, }) - // Advance cursor past this group's ink region + gap - cursor = clampedX + clampedW + minGap + // Advance cursor: past this token + space + cursor = bestX + tokenW + spaceWidthPx } if (wordPos.length > 0) {