feat: OCR Overlay — ganzseitige Rekonstruktion ohne Spaltenerkennung

Neue Route /ai/ocr-overlay mit vereinfachter 7-Schritt-Pipeline
(Orientierung, Begradigung, Entzerrung, Zuschnitt, Zeilen, Woerter, Overlay).
Nutzt bestehende Step-Komponenten, ueberspringt Spalten/LLM-Review/Ground-Truth.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx

@@ -0,0 +1,423 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { PagePurpose } from '@/components/common/PagePurpose'
+import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
+import { StepOrientation } from '@/components/ocr-pipeline/StepOrientation'
+import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
+import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
+import { StepCrop } from '@/components/ocr-pipeline/StepCrop'
+import { StepRowDetection } from '@/components/ocr-pipeline/StepRowDetection'
+import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecognition'
+import { OverlayReconstruction } from '@/components/ocr-overlay/OverlayReconstruction'
+import { OVERLAY_PIPELINE_STEPS, DOCUMENT_CATEGORIES, dbStepToOverlayUi, type PipelineStep, type SessionListItem, type DocumentCategory } from './types'
+
+const KLAUSUR_API = '/klausur-api'
+
+export default function OcrOverlayPage() {
+  const [currentStep, setCurrentStep] = useState(0)
+  const [sessionId, setSessionId] = useState<string | null>(null)
+  const [sessionName, setSessionName] = useState<string>('')
+  const [sessions, setSessions] = useState<SessionListItem[]>([])
+  const [loadingSessions, setLoadingSessions] = useState(true)
+  const [editingName, setEditingName] = useState<string | null>(null)
+  const [editNameValue, setEditNameValue] = useState('')
+  const [editingCategory, setEditingCategory] = useState<string | null>(null)
+  const [activeCategory, setActiveCategory] = useState<DocumentCategory | undefined>(undefined)
+  const [steps, setSteps] = useState<PipelineStep[]>(
+    OVERLAY_PIPELINE_STEPS.map((s, i) => ({
+      ...s,
+      status: i === 0 ? 'active' : 'pending',
+    })),
+  )
+
+  useEffect(() => {
+    loadSessions()
+  }, [])
+
+  const loadSessions = async () => {
+    setLoadingSessions(true)
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`)
+      if (res.ok) {
+        const data = await res.json()
+        // Filter to only show top-level sessions (no sub-sessions)
+        setSessions((data.sessions || []).filter((s: SessionListItem) => !s.parent_session_id))
+      }
+    } catch (e) {
+      console.error('Failed to load sessions:', e)
+    } finally {
+      setLoadingSessions(false)
+    }
+  }
+
+  const openSession = useCallback(async (sid: string) => {
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`)
+      if (!res.ok) return
+      const data = await res.json()
+
+      setSessionId(sid)
+      setSessionName(data.name || data.filename || '')
+      setActiveCategory(data.document_category || undefined)
+
+      // Map DB step to overlay UI step
+      const dbStep = data.current_step || 1
+      const uiStep = dbStepToOverlayUi(dbStep)
+
+      setSteps(
+        OVERLAY_PIPELINE_STEPS.map((s, i) => ({
+          ...s,
+          status: i < uiStep ? 'completed' : i === uiStep ? 'active' : 'pending',
+        })),
+      )
+      setCurrentStep(uiStep)
+    } catch (e) {
+      console.error('Failed to open session:', e)
+    }
+  }, [])
+
+  const deleteSession = useCallback(async (sid: string) => {
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, { method: 'DELETE' })
+      setSessions((prev) => prev.filter((s) => s.id !== sid))
+      if (sessionId === sid) {
+        setSessionId(null)
+        setCurrentStep(0)
+        setSteps(OVERLAY_PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
+      }
+    } catch (e) {
+      console.error('Failed to delete session:', e)
+    }
+  }, [sessionId])
+
+  const renameSession = useCallback(async (sid: string, newName: string) => {
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newName }),
+      })
+      setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, name: newName } : s)))
+      if (sessionId === sid) setSessionName(newName)
+    } catch (e) {
+      console.error('Failed to rename session:', e)
+    }
+    setEditingName(null)
+  }, [sessionId])
+
+  const updateCategory = useCallback(async (sid: string, category: DocumentCategory) => {
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ document_category: category }),
+      })
+      setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, document_category: category } : s)))
+      if (sessionId === sid) setActiveCategory(category)
+    } catch (e) {
+      console.error('Failed to update category:', e)
+    }
+    setEditingCategory(null)
+  }, [sessionId])
+
+  const handleStepClick = (index: number) => {
+    if (index <= currentStep || steps[index].status === 'completed') {
+      setCurrentStep(index)
+    }
+  }
+
+  const goToStep = (step: number) => {
+    setCurrentStep(step)
+    setSteps((prev) =>
+      prev.map((s, i) => ({
+        ...s,
+        status: i < step ? 'completed' : i === step ? 'active' : 'pending',
+      })),
+    )
+  }
+
+  const handleNext = () => {
+    if (currentStep >= steps.length - 1) {
+      // Last step completed — return to session list
+      setSteps(OVERLAY_PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
+      setCurrentStep(0)
+      setSessionId(null)
+      loadSessions()
+      return
+    }
+
+    const nextStep = currentStep + 1
+    setSteps((prev) =>
+      prev.map((s, i) => {
+        if (i === currentStep) return { ...s, status: 'completed' }
+        if (i === nextStep) return { ...s, status: 'active' }
+        return s
+      }),
+    )
+    setCurrentStep(nextStep)
+  }
+
+  const handleOrientationComplete = (sid: string) => {
+    setSessionId(sid)
+    loadSessions()
+    handleNext()
+  }
+
+  const handleNewSession = () => {
+    setSessionId(null)
+    setSessionName('')
+    setCurrentStep(0)
+    setSteps(OVERLAY_PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
+  }
+
+  const stepNames: Record<number, string> = {
+    1: 'Orientierung',
+    2: 'Begradigung',
+    3: 'Entzerrung',
+    4: 'Zuschneiden',
+    5: 'Zeilen',
+    6: 'Woerter',
+    7: 'Overlay',
+  }
+
+  const reprocessFromStep = useCallback(async (uiStep: number) => {
+    if (!sessionId) return
+    // Map overlay UI step to DB step
+    const dbStepMap: Record<number, number> = { 0: 2, 1: 3, 2: 4, 3: 5, 4: 7, 5: 8, 6: 9 }
+    const dbStep = dbStepMap[uiStep] || uiStep + 1
+    if (!confirm(`Ab Schritt ${uiStep + 1} (${stepNames[uiStep + 1] || '?'}) neu verarbeiten?`)) return
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reprocess`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ from_step: dbStep }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        console.error('Reprocess failed:', data.detail || res.status)
+        return
+      }
+      goToStep(uiStep)
+    } catch (e) {
+      console.error('Reprocess error:', e)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId, goToStep])
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 0:
+        return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} />
+      case 1:
+        return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+      case 2:
+        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+      case 3:
+        return <StepCrop sessionId={sessionId} onNext={handleNext} />
+      case 4:
+        return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
+      case 5:
+        return <StepWordRecognition sessionId={sessionId} onNext={handleNext} goToStep={goToStep} />
+      case 6:
+        return <OverlayReconstruction sessionId={sessionId} onNext={handleNext} />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <PagePurpose
+        title="OCR Overlay"
+        purpose="Ganzseitige Overlay-Rekonstruktion: Scan begradigen, Zeilen und Woerter erkennen, dann pixelgenau ueber das Bild legen. Ohne Spaltenerkennung — ideal fuer Arbeitsblaetter."
+        audience={['Entwickler']}
+        architecture={{
+          services: ['klausur-service (FastAPI)', 'OpenCV', 'Tesseract'],
+          databases: ['PostgreSQL Sessions'],
+        }}
+        relatedPages={[
+          { name: 'OCR Pipeline', href: '/ai/ocr-pipeline', description: 'Volle Pipeline mit Spalten' },
+          { name: 'OCR Vergleich', href: '/ai/ocr-compare', description: 'Methoden-Vergleich' },
+        ]}
+        defaultCollapsed
+      />
+
+      {/* Session List */}
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Sessions ({sessions.length})
+          </h3>
+          <button
+            onClick={handleNewSession}
+            className="text-xs px-3 py-1.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
+          >
+            + Neue Session
+          </button>
+        </div>
+
+        {loadingSessions ? (
+          <div className="text-sm text-gray-400 py-2">Lade Sessions...</div>
+        ) : sessions.length === 0 ? (
+          <div className="text-sm text-gray-400 py-2">Noch keine Sessions vorhanden.</div>
+        ) : (
+          <div className="space-y-1.5 max-h-[320px] overflow-y-auto">
+            {sessions.map((s) => {
+              const catInfo = DOCUMENT_CATEGORIES.find(c => c.value === s.document_category)
+              return (
+                <div
+                  key={s.id}
+                  className={`relative flex items-start gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors cursor-pointer ${
+                    sessionId === s.id
+                      ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  {/* Thumbnail */}
+                  <div
+                    className="flex-shrink-0 w-12 h-12 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700"
+                    onClick={() => openSession(s.id)}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${s.id}/thumbnail?size=96`}
+                      alt=""
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+                    />
+                  </div>
+
+                  {/* Info */}
+                  <div className="flex-1 min-w-0" onClick={() => openSession(s.id)}>
+                    {editingName === s.id ? (
+                      <input
+                        autoFocus
+                        value={editNameValue}
+                        onChange={(e) => setEditNameValue(e.target.value)}
+                        onBlur={() => renameSession(s.id, editNameValue)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') renameSession(s.id, editNameValue)
+                          if (e.key === 'Escape') setEditingName(null)
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                        className="w-full px-1 py-0.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600"
+                      />
+                    ) : (
+                      <div className="truncate font-medium text-gray-700 dark:text-gray-300">
+                        {s.name || s.filename}
+                      </div>
+                    )}
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        navigator.clipboard.writeText(s.id)
+                        const btn = e.currentTarget
+                        btn.textContent = 'Kopiert!'
+                        setTimeout(() => { btn.textContent = `ID: ${s.id.slice(0, 8)}` }, 1500)
+                      }}
+                      className="text-[10px] font-mono text-gray-400 hover:text-teal-500 transition-colors"
+                      title={`Volle ID: ${s.id} — Klick zum Kopieren`}
+                    >
+                      ID: {s.id.slice(0, 8)}
+                    </button>
+                    <div className="text-xs text-gray-400 flex gap-2 mt-0.5">
+                      <span>{new Date(s.created_at).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
+                    </div>
+                  </div>
+
+                  {/* Category Badge */}
+                  <div className="flex flex-col gap-1 items-end flex-shrink-0" onClick={(e) => e.stopPropagation()}>
+                    <button
+                      onClick={() => setEditingCategory(editingCategory === s.id ? null : s.id)}
+                      className={`text-[10px] px-1.5 py-0.5 rounded-full border transition-colors ${
+                        catInfo
+                          ? 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300'
+                          : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
+                      }`}
+                      title="Kategorie setzen"
+                    >
+                      {catInfo ? `${catInfo.icon} ${catInfo.label}` : '+ Kategorie'}
+                    </button>
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex flex-col gap-0.5 flex-shrink-0">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setEditNameValue(s.name || s.filename)
+                        setEditingName(s.id)
+                      }}
+                      className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                      title="Umbenennen"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (confirm('Session loeschen?')) deleteSession(s.id)
+                      }}
+                      className="p-1 text-gray-400 hover:text-red-500"
+                      title="Loeschen"
+                    >
+                      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {/* Category dropdown */}
+                  {editingCategory === s.id && (
+                    <div
+                      className="absolute right-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2 grid grid-cols-2 gap-1 w-64"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {DOCUMENT_CATEGORIES.map((cat) => (
+                        <button
+                          key={cat.value}
+                          onClick={() => updateCategory(s.id, cat.value)}
+                          className={`text-xs px-2 py-1.5 rounded-md text-left transition-colors ${
+                            s.document_category === cat.value
+                              ? 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300'
+                              : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+                          }`}
+                        >
+                          {cat.icon} {cat.label}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Active session info */}
+      {sessionId && sessionName && (
+        <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
+          <span>Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span></span>
+          {activeCategory && (() => {
+            const cat = DOCUMENT_CATEGORIES.find(c => c.value === activeCategory)
+            return cat ? <span className="text-xs px-2 py-0.5 rounded-full bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300">{cat.icon} {cat.label}</span> : null
+          })()}
+        </div>
+      )}
+
+      <PipelineStepper
+        steps={steps}
+        currentStep={currentStep}
+        onStepClick={handleStepClick}
+        onReprocess={sessionId ? reprocessFromStep : undefined}
+      />
+
+      <div className="min-h-[400px]">{renderStep()}</div>
+    </div>
+  )
+}

admin-lehrer/app/(admin)/ai/ocr-overlay/types.ts

@@ -0,0 +1,60 @@
+import type { PipelineStep } from '../ocr-pipeline/types'
+
+// Re-export types used by overlay components
+export type {
+  PipelineStep,
+  PipelineStepStatus,
+  SessionListItem,
+  SessionInfo,
+  DocumentCategory,
+  DocumentTypeResult,
+  OrientationResult,
+  CropResult,
+  DeskewResult,
+  DewarpResult,
+  RowResult,
+  RowItem,
+  GridResult,
+  GridCell,
+  WordBbox,
+  ColumnMeta,
+} from '../ocr-pipeline/types'
+
+export { DOCUMENT_CATEGORIES } from '../ocr-pipeline/types'
+
+/**
+ * 7-step pipeline for full-page overlay reconstruction.
+ * Skips: Spalten (columns), LLM-Review (Korrektur), Ground-Truth (Validierung)
+ */
+export const OVERLAY_PIPELINE_STEPS: PipelineStep[] = [
+  { id: 'orientation', name: 'Orientierung', icon: '🔄', status: 'pending' },
+  { id: 'deskew', name: 'Begradigung', icon: '📐', status: 'pending' },
+  { id: 'dewarp', name: 'Entzerrung', icon: '🔧', status: 'pending' },
+  { id: 'crop', name: 'Zuschneiden', icon: '✂️', status: 'pending' },
+  { id: 'rows', name: 'Zeilen', icon: '📏', status: 'pending' },
+  { id: 'words', name: 'Woerter', icon: '🔤', status: 'pending' },
+  { id: 'reconstruction', name: 'Overlay', icon: '🏗️', status: 'pending' },
+]
+
+/** Map from overlay UI step index to DB step number (1-indexed) */
+export const OVERLAY_UI_TO_DB: Record<number, number> = {
+  0: 2,  // orientation
+  1: 3,  // deskew
+  2: 4,  // dewarp
+  3: 5,  // crop
+  4: 6,  // rows (skip columns=6 in DB, rows=7 — but we reuse DB step numbering)
+  5: 7,  // words
+  6: 9,  // reconstruction
+}
+
+/** Map from DB step to overlay UI step index */
+export function dbStepToOverlayUi(dbStep: number): number {
+  // DB: 1=start, 2=orient, 3=deskew, 4=dewarp, 5=crop, 6=columns, 7=rows, 8=words, 9=recon, 10=gt
+  if (dbStep <= 2) return 0  // orientation
+  if (dbStep === 3) return 1 // deskew
+  if (dbStep === 4) return 2 // dewarp
+  if (dbStep === 5) return 3 // crop
+  if (dbStep <= 7) return 4  // rows (skip columns)
+  if (dbStep === 8) return 5 // words
+  return 6                   // reconstruction
+}

admin-lehrer/components/ocr-overlay/OverlayReconstruction.tsx

@@ -0,0 +1,576 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { GridResult, GridCell, RowResult, RowItem } from '@/app/(admin)/ai/ocr-overlay/types'
+import { usePixelWordPositions } from './usePixelWordPositions'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface OverlayReconstructionProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+interface EditableCell {
+  cellId: string
+  text: string
+  originalText: string
+  bboxPct: { x: number; y: number; w: number; h: number }
+  colType: string
+  rowIndex: number
+  colIndex: number
+}
+
+type UndoAction = { cellId: string; oldText: string; newText: string }
+
+export function OverlayReconstruction({ sessionId, onNext }: OverlayReconstructionProps) {
+  const [status, setStatus] = useState<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading')
+  const [error, setError] = useState('')
+  const [cells, setCells] = useState<EditableCell[]>([])
+  const [gridCells, setGridCells] = useState<GridCell[]>([])
+  const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())
+
+  // Undo/Redo
+  const [undoStack, setUndoStack] = useState<UndoAction[]>([])
+  const [redoStack, setRedoStack] = useState<UndoAction[]>([])
+
+  // Overlay state
+  const [rows, setRows] = useState<RowItem[]>([])
+  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
+  const [fontScale, setFontScale] = useState(0.7)
+  const [globalBold, setGlobalBold] = useState(false)
+  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
+  const reconRef = useRef<HTMLDivElement>(null)
+  const [reconWidth, setReconWidth] = useState(0)
+
+  // Pixel-based word positions
+  const overlayImageUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+    : ''
+  const cellWordPositions = usePixelWordPositions(
+    overlayImageUrl,
+    gridCells,
+    status === 'ready',
+    imageRotation,
+  )
+
+  // Track container width
+  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()
+  }, [status])
+
+  // Load session data
+  useEffect(() => {
+    if (!sessionId) return
+    loadSessionData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const loadSessionData = async () => {
+    if (!sessionId) return
+    setStatus('loading')
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json()
+
+      const wordResult: GridResult | undefined = data.word_result
+      if (!wordResult) {
+        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst den Woerter-Schritt abschliessen.')
+        setStatus('error')
+        return
+      }
+
+      const rawGridCells: GridCell[] = wordResult.cells || []
+      setGridCells(rawGridCells)
+
+      const editableCells: EditableCell[] = rawGridCells.map(c => ({
+        cellId: c.cell_id,
+        text: c.text,
+        originalText: c.text,
+        bboxPct: c.bbox_pct,
+        colType: c.col_type,
+        rowIndex: c.row_index,
+        colIndex: c.col_index,
+      }))
+      setCells(editableCells)
+      setEditedTexts(new Map())
+      setUndoStack([])
+      setRedoStack([])
+
+      // Load rows
+      const rowResult: RowResult | undefined = data.row_result
+      if (rowResult?.rows) setRows(rowResult.rows)
+
+      // Store image dimensions
+      if (wordResult.image_width && wordResult.image_height) {
+        setImageNaturalSize({ w: wordResult.image_width, h: wordResult.image_height })
+      }
+
+      setStatus('ready')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }
+
+  const handleTextChange = useCallback((cellId: string, newText: string) => {
+    setEditedTexts(prev => {
+      const oldText = prev.get(cellId)
+      const cell = cells.find(c => c.cellId === cellId)
+      const prevText = oldText ?? cell?.text ?? ''
+
+      setUndoStack(stack => [...stack, { cellId, oldText: prevText, newText }])
+      setRedoStack([])
+
+      const next = new Map(prev)
+      next.set(cellId, newText)
+      return next
+    })
+  }, [cells])
+
+  const undo = useCallback(() => {
+    setUndoStack(stack => {
+      if (stack.length === 0) return stack
+      const action = stack[stack.length - 1]
+      const newStack = stack.slice(0, -1)
+      setRedoStack(rs => [...rs, action])
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(action.cellId, action.oldText)
+        return next
+      })
+      return newStack
+    })
+  }, [])
+
+  const redo = useCallback(() => {
+    setRedoStack(stack => {
+      if (stack.length === 0) return stack
+      const action = stack[stack.length - 1]
+      const newStack = stack.slice(0, -1)
+      setUndoStack(us => [...us, action])
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(action.cellId, action.newText)
+        return next
+      })
+      return newStack
+    })
+  }, [])
+
+  const resetCell = useCallback((cellId: string) => {
+    setEditedTexts(prev => {
+      const next = new Map(prev)
+      next.delete(cellId)
+      return next
+    })
+  }, [])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault()
+        if (e.shiftKey) redo()
+        else undo()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [undo, redo])
+
+  const getDisplayText = useCallback((cell: EditableCell): string => {
+    return editedTexts.get(cell.cellId) ?? cell.text
+  }, [editedTexts])
+
+  const isEdited = useCallback((cell: EditableCell): boolean => {
+    const edited = editedTexts.get(cell.cellId)
+    return edited !== undefined && edited !== cell.originalText
+  }, [editedTexts])
+
+  const changedCount = useMemo(() => {
+    let count = 0
+    for (const cell of cells) {
+      if (isEdited(cell)) count++
+    }
+    return count
+  }, [cells, isEdited])
+
+  // Tab navigation
+  const sortedCellIds = useMemo(() => {
+    return [...cells]
+      .sort((a, b) => a.rowIndex !== b.rowIndex ? a.rowIndex - b.rowIndex : a.colIndex - b.colIndex)
+      .map(c => c.cellId)
+  }, [cells])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, cellId: string) => {
+    if (e.key === 'Tab') {
+      e.preventDefault()
+      const idx = sortedCellIds.indexOf(cellId)
+      const nextIdx = e.shiftKey ? idx - 1 : idx + 1
+      if (nextIdx >= 0 && nextIdx < sortedCellIds.length) {
+        const nextId = sortedCellIds[nextIdx]
+        const el = document.getElementById(`cell-${nextId}`)
+        el?.focus()
+      }
+    }
+  }, [sortedCellIds])
+
+  const saveReconstruction = useCallback(async () => {
+    if (!sessionId) return
+    setStatus('saving')
+    try {
+      const cellUpdates = Array.from(editedTexts.entries())
+        .filter(([cellId, text]) => {
+          const cell = cells.find(c => c.cellId === cellId)
+          return cell && text !== cell.originalText
+        })
+        .map(([cellId, text]) => ({ cell_id: cellId, text }))
+
+      if (cellUpdates.length === 0) {
+        setStatus('saved')
+        return
+      }
+
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ cells: cellUpdates }),
+      })
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || `HTTP ${res.status}`)
+      }
+
+      setStatus('saved')
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e))
+      setStatus('error')
+    }
+  }, [sessionId, editedTexts, cells])
+
+  const dewarpedUrl = sessionId
+    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
+    : ''
+
+  if (!sessionId) {
+    return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
+  }
+
+  if (status === 'loading') {
+    return (
+      <div className="flex items-center gap-3 justify-center py-12">
+        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
+        <span className="text-gray-500">Overlay-Daten werden geladen...</span>
+      </div>
+    )
+  }
+
+  if (status === 'error') {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="text-5xl mb-4">&#x26A0;&#xFE0F;</div>
+        <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
+        <div className="flex gap-3">
+          <button onClick={() => { setError(''); loadSessionData() }}
+            className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
+            Erneut versuchen
+          </button>
+          <button onClick={onNext}
+            className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
+            Ueberspringen &rarr;
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (status === 'saved') {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <div className="text-5xl mb-4">&#x2705;</div>
+        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Overlay gespeichert</h3>
+        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+          {changedCount > 0 ? `${changedCount} Zellen wurden aktualisiert.` : 'Keine Aenderungen vorgenommen.'}
+        </p>
+        <button onClick={onNext}
+          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
+          Fertig
+        </button>
+      </div>
+    )
+  }
+
+  const imgW = imageNaturalSize?.w || 1
+  const imgH = imageNaturalSize?.h || 1
+  const containerH = reconWidth * (imgH / imgW)
+
+  return (
+    <div className="space-y-3">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            Overlay-Rekonstruktion
+          </h3>
+          <span className="text-xs text-gray-400">
+            {cells.length} Zellen &middot; {changedCount} geaendert
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Undo/Redo */}
+          <button
+            onClick={undo}
+            disabled={undoStack.length === 0}
+            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
+            title="Rueckgaengig (Ctrl+Z)"
+          >
+            &#x21A9;
+          </button>
+          <button
+            onClick={redo}
+            disabled={redoStack.length === 0}
+            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
+            title="Wiederholen (Ctrl+Shift+Z)"
+          >
+            &#x21AA;
+          </button>
+
+          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+          {/* Font scale */}
+          <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+            Schrift
+            <input
+              type="range" min={30} max={120} value={Math.round(fontScale * 100)}
+              onChange={e => setFontScale(Number(e.target.value) / 100)}
+              className="w-20 h-1 accent-teal-600"
+            />
+            <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
+          </label>
+          <button
+            onClick={() => setGlobalBold(b => !b)}
+            className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
+              globalBold
+                ? 'bg-teal-600 text-white border-teal-600'
+                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+            }`}
+          >
+            B
+          </button>
+          <button
+            onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
+            className={`px-2 py-1 text-xs rounded border transition-colors ${
+              imageRotation === 180
+                ? 'bg-teal-600 text-white border-teal-600'
+                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
+            }`}
+            title="Bild 180° drehen"
+          >
+            180°
+          </button>
+
+          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
+
+          <button
+            onClick={saveReconstruction}
+            disabled={status === 'saving'}
+            className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
+          >
+            Speichern
+          </button>
+        </div>
+      </div>
+
+      {/* Side-by-side: Original + Overlay */}
+      <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
+                setImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Right: Reconstructed 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}` }}
+            >
+              {/* Row lines */}
+              {rows.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}%` }}
+                />
+              ))}
+
+              {/* Pixel-positioned words / editable inputs */}
+              {cells.map((cell) => {
+                const displayText = getDisplayText(cell)
+                const edited = isEdited(cell)
+                const wordPos = cellWordPositions.get(cell.cellId)
+                const bboxPct = cell.bboxPct
+                const cellHeightPx = containerH * (bboxPct.h / 100)
+
+                // Pixel-analysed: render word-groups at detected positions
+                if (wordPos && wordPos.length > 0) {
+                  return wordPos.map((wp, i) => {
+                    const autoFontPx = cellHeightPx * wp.fontRatio * fontScale
+                    const fs = Math.max(6, autoFontPx)
+
+                    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: `${bboxPct.y}%`,
+                            width: `${wp.wPct}%`,
+                            height: `${bboxPct.h}%`,
+                            fontSize: `${fs}px`,
+                            fontWeight: globalBold ? 'bold' : 'normal',
+                            fontFamily: "'Liberation Sans', Arial, sans-serif",
+                            display: 'flex',
+                            alignItems: 'center',
+                            whiteSpace: 'nowrap',
+                            overflow: 'visible',
+                            color: '#1a1a1a',
+                          }}
+                        >
+                          {wp.text}
+                        </span>
+                      )
+                    }
+
+                    return (
+                      <div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
+                        left: `${wp.xPct}%`,
+                        top: `${bboxPct.y}%`,
+                        width: `${wp.wPct}%`,
+                        height: `${bboxPct.h}%`,
+                      }}>
+                        <input
+                          id={`cell-${cell.cellId}`}
+                          type="text"
+                          value={displayText}
+                          onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
+                          onKeyDown={(e) => handleKeyDown(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' : 'normal',
+                            fontFamily: "'Liberation Sans', Arial, sans-serif",
+                            lineHeight: '1',
+                            color: '#1a1a1a',
+                          }}
+                          title={`${cell.cellId} (${cell.colType})`}
+                        />
+                        {edited && (
+                          <button
+                            onClick={() => resetCell(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"
+                          >
+                            &times;
+                          </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: `${bboxPct.x}%`,
+                    top: `${bboxPct.y}%`,
+                    width: `${bboxPct.w}%`,
+                    height: `${bboxPct.h}%`,
+                  }}>
+                    <input
+                      id={`cell-${cell.cellId}`}
+                      type="text"
+                      value={displayText}
+                      onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
+                      onKeyDown={(e) => handleKeyDown(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={() => resetCell(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"
+                      >
+                        &times;
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom action */}
+      <div className="flex justify-end">
+        <button
+          onClick={() => {
+            if (changedCount > 0) {
+              saveReconstruction()
+            } else {
+              onNext()
+            }
+          }}
+          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium text-sm"
+        >
+          {changedCount > 0 ? 'Speichern & Fertig' : 'Fertig'}
+        </button>
+      </div>
+    </div>
+  )
+}

admin-lehrer/components/ocr-overlay/usePixelWordPositions.ts

@@ -0,0 +1,185 @@
+import { useEffect, useState } from 'react'
+import type { GridCell } from '@/app/(admin)/ai/ocr-overlay/types'
+
+export interface WordPosition {
+  xPct: number
+  wPct: number
+  text: string
+  fontRatio: number
+}
+
+/**
+ * Analyse dark-pixel clusters on an image to determine
+ * the exact horizontal position & auto-font-size of word groups in each cell.
+ *
+ * When rotation=180, the image is rotated 180° before pixel analysis.
+ * Cell coordinates are transformed to the rotated space for reading,
+ * and cluster positions are mirrored back to the original coordinate system.
+ *
+ * Returns a Map<cell_id, WordPosition[]>.
+ */
+export function usePixelWordPositions(
+  imageUrl: string,
+  cells: GridCell[],
+  active: boolean,
+  rotation: 0 | 180 = 0,
+): Map<string, WordPosition[]> {
+  const [cellWordPositions, setCellWordPositions] = useState<Map<string, WordPosition[]>>(new Map())
+
+  useEffect(() => {
+    if (!active || cells.length === 0 || !imageUrl) return
+
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.onload = () => {
+      const imgW = img.naturalWidth
+      const imgH = img.naturalHeight
+
+      const canvas = document.createElement('canvas')
+      canvas.width = imgW
+      canvas.height = imgH
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return
+
+      if (rotation === 180) {
+        ctx.translate(imgW, imgH)
+        ctx.rotate(Math.PI)
+        ctx.drawImage(img, 0, 0)
+        ctx.setTransform(1, 0, 0, 1, 0, 0)
+      } else {
+        ctx.drawImage(img, 0, 0)
+      }
+
+      const refFontSize = 40
+      const fontFam = "'Liberation Sans', Arial, sans-serif"
+      ctx.font = `${refFontSize}px ${fontFam}`
+
+      const positions = new Map<string, WordPosition[]>()
+
+      for (const cell of cells) {
+        if (!cell.bbox_pct || !cell.text) continue
+
+        const groups = cell.text.split(/\s{3,}/).map(s => s.trim()).filter(Boolean)
+
+        let cx: number, cy: number
+        const cw = Math.round(cell.bbox_pct.w / 100 * imgW)
+        const ch = Math.round(cell.bbox_pct.h / 100 * imgH)
+
+        if (rotation === 180) {
+          cx = Math.round((100 - cell.bbox_pct.x - cell.bbox_pct.w) / 100 * imgW)
+          cy = Math.round((100 - cell.bbox_pct.y - cell.bbox_pct.h) / 100 * imgH)
+        } else {
+          cx = Math.round(cell.bbox_pct.x / 100 * imgW)
+          cy = Math.round(cell.bbox_pct.y / 100 * imgH)
+        }
+        if (cw <= 0 || ch <= 0) continue
+        if (cx < 0) cx = 0
+        if (cy < 0) cy = 0
+        if (cx + cw > imgW || cy + ch > imgH) continue
+
+        const imageData = ctx.getImageData(cx, cy, cw, ch)
+
+        const proj = new Float32Array(cw)
+        for (let y = 0; y < ch; y++) {
+          for (let x = 0; x < cw; x++) {
+            const idx = (y * cw + x) * 4
+            const lum = 0.299 * imageData.data[idx] + 0.587 * imageData.data[idx + 1] + 0.114 * imageData.data[idx + 2]
+            if (lum < 128) proj[x]++
+          }
+        }
+
+        const threshold = Math.max(1, ch * 0.03)
+        const minGap = Math.max(5, Math.round(cw * 0.02))
+        let clusters: { start: number; end: number }[] = []
+        let inCluster = false
+        let clStart = 0
+        let gap = 0
+
+        for (let x = 0; x < cw; x++) {
+          if (proj[x] >= threshold) {
+            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 })
+
+        if (clusters.length === 0) continue
+
+        if (rotation === 180) {
+          clusters = clusters.map(c => ({
+            start: cw - 1 - c.end,
+            end: cw - 1 - c.start,
+          })).reverse()
+        }
+
+        const wordPos: WordPosition[] = []
+
+        if (groups.length <= 1) {
+          const firstCl = clusters[0]
+          const lastCl = clusters[clusters.length - 1]
+          const clusterW = lastCl.end - firstCl.start + 1
+          const measured = ctx.measureText(cell.text.trim())
+          const autoFontPx = refFontSize * (clusterW / measured.width)
+          const fontRatio = Math.min(autoFontPx / ch, 1.0)
+          wordPos.push({
+            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) {
+          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
+        }
+
+        positions.set(cell.cell_id, wordPos)
+      }
+
+      // Normalise: find the most common fontRatio (mode) and apply it to all
+      const allRatios: number[] = []
+      for (const wps of positions.values()) {
+        for (const wp of wps) allRatios.push(wp.fontRatio)
+      }
+      if (allRatios.length > 0) {
+        const buckets = new Map<number, number>()
+        for (const r of allRatios) {
+          const key = Math.round(r * 50) / 50
+          buckets.set(key, (buckets.get(key) || 0) + 1)
+        }
+        let modeRatio = allRatios[0]
+        let modeCount = 0
+        for (const [ratio, count] of buckets) {
+          if (count > modeCount) { modeRatio = ratio; modeCount = count }
+        }
+        for (const wps of positions.values()) {
+          for (const wp of wps) wp.fontRatio = modeRatio
+        }
+      }
+
+      setCellWordPositions(positions)
+    }
+    img.src = imageUrl
+  }, [active, cells, imageUrl, rotation])
+
+  return cellWordPositions
+}

admin-lehrer/lib/navigation.ts

@@ -150,6 +150,15 @@ export const navigation: NavCategory[] = [
         audience: ['Entwickler', 'Data Scientists'],
         subgroup: 'KI-Werkzeuge',
       },
+      {
+        id: 'ocr-overlay',
+        name: 'OCR Overlay',
+        href: '/ai/ocr-overlay',
+        description: 'Ganzseitige Overlay-Rekonstruktion',
+        purpose: 'Arbeitsblatt ohne Spaltenerkennung direkt als Overlay rekonstruieren. Vereinfachte 7-Schritt-Pipeline.',
+        audience: ['Entwickler'],
+        subgroup: 'KI-Werkzeuge',
+      },
       {
         id: 'test-quality',
         name: 'Test Quality (BQAS)',