From 40cfc1acddb716e1c52e9cbe40e25bbe2086df9f Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBookPro.fritz.box>
Date: Thu, 5 Mar 2026 11:40:24 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20validation=20step=20=E2=80=94=20original?=
 =?UTF-8?q?=20image=20URL,=20white=20background,=20dynamic=20font=20size?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Prepend /klausur-api prefix to original image URL (nginx proxy)
- Remove colored column background stripes, use white background
- Change cell text color to black instead of per-column-type colors
- Calculate font size dynamically from cell bbox height via ResizeObserver

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../ocr-pipeline/StepGroundTruth.tsx          | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

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<HTMLDivElement>(null)
   const rightPanelRef = useRef<HTMLDivElement>(null)
+  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()
+  }, [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) {
             <div style={{ width: `${zoom}%`, minWidth: '100%' }}>
               {/* Reconstruction container */}
               <div
+                ref={reconRef}
                 className="relative bg-white"
                 style={{
                   paddingBottom: `${aspect * 100}%`,
@@ -332,23 +348,6 @@ export function StepGroundTruth({ sessionId, onNext }: StepGroundTruthProps) {
                 onMouseMove={handleReconMouseMove}
                 onMouseUp={handleReconMouseUp}
               >
-                {/* Column background stripes */}
-                {session.columnsUsed.map((col, i) => {
-                  const color = COL_TYPE_COLORS[col.type] || '#9ca3af'
-                  return (
-                    <div
-                      key={`col-${i}`}
-                      className="absolute top-0 bottom-0"
-                      style={{
-                        left: `${(col.x / session.imageWidth) * 100}%`,
-                        width: `${(col.width / session.imageWidth) * 100}%`,
-                        backgroundColor: color,
-                        opacity: 0.06,
-                      }}
-                    />
-                  )
-                })}
-
                 {/* Row separator lines — derive from cells */}
                 {(() => {
                   const rowYs = new Set<number>()
@@ -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 (
                     <span
                       key={cell.cell_id}
-                      className="absolute text-[0.6em] leading-tight overflow-hidden"
+                      className="absolute leading-none overflow-hidden whitespace-nowrap"
                       style={{
                         left: `${cell.bbox_pct.x}%`,
                         top: `${cell.bbox_pct.y}%`,
                         width: `${cell.bbox_pct.w}%`,
                         height: `${cell.bbox_pct.h}%`,
-                        color,
-                        fontFamily: "'Liberation Sans', 'DejaVu Sans', sans-serif",
+                        color: '#1a1a1a',
+                        fontSize: `${fontSize}px`,
+                        fontFamily: "'Liberation Sans', 'DejaVu Sans', Arial, sans-serif",
                         display: 'flex',
                         alignItems: 'center',
                         padding: '0 1px',