From fd39d13d062bc5609b60d303ca3ba6fb675341bc Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Mon, 13 Apr 2026 23:26:54 +0200
Subject: [PATCH] StepAnsicht: use server-rendered OCR overlay image

Replace manual word_box positioning (wild/unsnapped) with the
server-rendered words-overlay image from the OCR step endpoint.
This shows the same cleanly snapped red letters as the OCR step.

Endpoint: /sessions/{id}/image/words-overlay

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/ocr-kombi/StepAnsicht.tsx      | 27 +++----------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/admin-lehrer/components/ocr-kombi/StepAnsicht.tsx b/admin-lehrer/components/ocr-kombi/StepAnsicht.tsx
index f9a4036..8d7c427 100644
--- a/admin-lehrer/components/ocr-kombi/StepAnsicht.tsx
+++ b/admin-lehrer/components/ocr-kombi/StepAnsicht.tsx
@@ -74,11 +74,6 @@ export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
   const avgRowH = (grid as any).layout_metrics?.avg_row_height_px || 31
   const scaledFont = Math.max(7, baseFontPx * scale)
 
-  // Collect all word boxes for OCR overlay
-  const allWordBoxes = grid.zones.flatMap((z) =>
-    z.cells.flatMap((c) => (c.word_boxes || []).map((wb) => ({ ...wb, zone: z })))
-  )
-
   return (
     <div className="space-y-3">
       {/* Header */}
@@ -124,32 +119,16 @@ export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
             Original + OCR
           </div>
 
-          {/* Scan image */}
+          {/* Server-rendered OCR overlay image (scan + red snapped letters) */}
           {sessionId && (
             <img
-              src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`}
-              alt="Original"
+              src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`}
+              alt="Original + OCR Overlay"
               className="absolute inset-0 w-full h-auto"
               style={{ height: `${panelHeight}px`, objectFit: 'contain' }}
             />
           )}
 
-          {/* OCR word overlay (red text) */}
-          {allWordBoxes.map((wb, i) => (
-            <div
-              key={i}
-              className="absolute text-red-500 font-mono leading-none pointer-events-none"
-              style={{
-                left: `${wb.left * scale}px`,
-                top: `${wb.top * scale}px`,
-                fontSize: `${Math.max(6, wb.height * scale * 0.75)}px`,
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {wb.text}
-            </div>
-          ))}
-
           {/* Coordinate grid */}
           {showGrid && <CoordinateGrid imgW={imgW} imgH={imgH} scale={scale} spacing={gridSpacing} />}
         </div>