feat: Dewarp-Korrektur als Schritt 2 in OCR Pipeline (7 Schritte)

Implementiert Buchwoelbungs-Entzerrung mit zwei Methoden:
- Methode A: Vertikale-Kanten-Analyse (Sobel + Polynom 2. Grades)
- Methode B: Textzeilen-Baseline (Tesseract + Baseline-Kruemmung)
Beste Methode wird automatisch gewaehlt, manueller Slider (-3 bis +3).

Backend: 3 neue Endpoints (auto/manual dewarp, ground truth)
Frontend: StepDewarp + DewarpControls, Pipeline von 6 auf 7 Schritte

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

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

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { PagePurpose } from '@/components/common/PagePurpose'
 import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
 import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
+import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
 import { StepColumnDetection } from '@/components/ocr-pipeline/StepColumnDetection'
 import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecognition'
 import { StepCoordinates } from '@/components/ocr-pipeline/StepCoordinates'
@@ -13,6 +14,7 @@ import { PIPELINE_STEPS, type PipelineStep } from './types'
 
 export default function OcrPipelinePage() {
   const [currentStep, setCurrentStep] = useState(0)
+  const [sessionId, setSessionId] = useState<string | null>(null)
   const [steps, setSteps] = useState<PipelineStep[]>(
     PIPELINE_STEPS.map((s, i) => ({
       ...s,
@@ -39,19 +41,26 @@ export default function OcrPipelinePage() {
     }
   }
 
+  const handleDeskewComplete = (sid: string) => {
+    setSessionId(sid)
+    handleNext()
+  }
+
   const renderStep = () => {
     switch (currentStep) {
       case 0:
-        return <StepDeskew onNext={handleNext} />
+        return <StepDeskew onNext={handleDeskewComplete} />
       case 1:
-        return <StepColumnDetection />
+        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
       case 2:
-        return <StepWordRecognition />
+        return <StepColumnDetection />
       case 3:
-        return <StepCoordinates />
+        return <StepWordRecognition />
       case 4:
-        return <StepReconstruction />
+        return <StepCoordinates />
       case 5:
+        return <StepReconstruction />
+      case 6:
         return <StepGroundTruth />
       default:
         return null

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

@@ -33,8 +33,25 @@ export interface DeskewGroundTruth {
   notes?: string
 }
 
+export interface DewarpResult {
+  session_id: string
+  method_used: 'vertical_edge' | 'text_baseline' | 'manual' | 'none'
+  curvature_px: number
+  confidence: number
+  duration_seconds: number
+  dewarped_image_url: string
+  scale_applied?: number
+}
+
+export interface DewarpGroundTruth {
+  is_correct: boolean
+  corrected_scale?: number
+  notes?: string
+}
+
 export const PIPELINE_STEPS: PipelineStep[] = [
   { id: 'deskew', name: 'Begradigung', icon: '📐', status: 'pending' },
+  { id: 'dewarp', name: 'Entzerrung', icon: '🔧', status: 'pending' },
   { id: 'columns', name: 'Spalten', icon: '📊', status: 'pending' },
   { id: 'words', name: 'Woerter', icon: '🔤', status: 'pending' },
   { id: 'coordinates', name: 'Koordinaten', icon: '📍', status: 'pending' },

admin-lehrer/components/ocr-pipeline/DewarpControls.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { useState } from 'react'
+import type { DewarpResult, DewarpGroundTruth } from '@/app/(admin)/ai/ocr-pipeline/types'
+
+interface DewarpControlsProps {
+  dewarpResult: DewarpResult | null
+  showGrid: boolean
+  onToggleGrid: () => void
+  onManualDewarp: (scale: number) => void
+  onGroundTruth: (gt: DewarpGroundTruth) => void
+  onNext: () => void
+  isApplying: boolean
+}
+
+const METHOD_LABELS: Record<string, string> = {
+  vertical_edge: 'Vertikale Kanten',
+  text_baseline: 'Textzeilen-Baseline',
+  manual: 'Manuell',
+  none: 'Keine Korrektur',
+}
+
+export function DewarpControls({
+  dewarpResult,
+  showGrid,
+  onToggleGrid,
+  onManualDewarp,
+  onGroundTruth,
+  onNext,
+  isApplying,
+}: DewarpControlsProps) {
+  const [manualScale, setManualScale] = useState(0)
+  const [gtFeedback, setGtFeedback] = useState<'correct' | 'incorrect' | null>(null)
+  const [gtNotes, setGtNotes] = useState('')
+  const [gtSaved, setGtSaved] = useState(false)
+
+  const handleGroundTruth = (isCorrect: boolean) => {
+    setGtFeedback(isCorrect ? 'correct' : 'incorrect')
+    if (isCorrect) {
+      onGroundTruth({ is_correct: true })
+      setGtSaved(true)
+    }
+  }
+
+  const handleGroundTruthIncorrect = () => {
+    onGroundTruth({
+      is_correct: false,
+      corrected_scale: manualScale !== 0 ? manualScale : undefined,
+      notes: gtNotes || undefined,
+    })
+    setGtSaved(true)
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Results */}
+      {dewarpResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="flex flex-wrap items-center gap-3 text-sm">
+            <div>
+              <span className="text-gray-500">Kruemmung:</span>{' '}
+              <span className="font-mono font-medium">{dewarpResult.curvature_px} px</span>
+            </div>
+            <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+            <div>
+              <span className="text-gray-500">Methode:</span>{' '}
+              <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300">
+                {METHOD_LABELS[dewarpResult.method_used] || dewarpResult.method_used}
+              </span>
+            </div>
+            <div className="h-4 w-px bg-gray-300 dark:bg-gray-600" />
+            <div>
+              <span className="text-gray-500">Konfidenz:</span>{' '}
+              <span className="font-mono">{Math.round(dewarpResult.confidence * 100)}%</span>
+            </div>
+          </div>
+
+          {/* Toggle */}
+          <div className="flex gap-3 mt-3">
+            <button
+              onClick={onToggleGrid}
+              className={`text-xs px-3 py-1 rounded-full border transition-colors ${
+                showGrid
+                  ? 'bg-teal-100 border-teal-300 text-teal-700 dark:bg-teal-900/40 dark:border-teal-600 dark:text-teal-300'
+                  : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'
+              }`}
+            >
+              Raster anzeigen
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Manual scale slider */}
+      {dewarpResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Manuelle Staerke</div>
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-gray-400 w-8 text-right">-3.0</span>
+            <input
+              type="range"
+              min={-3}
+              max={3}
+              step={0.1}
+              value={manualScale}
+              onChange={(e) => setManualScale(parseFloat(e.target.value))}
+              className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-teal-500"
+            />
+            <span className="text-xs text-gray-400 w-8">+3.0</span>
+            <span className="font-mono text-sm w-14 text-right">{manualScale.toFixed(1)}</span>
+            <button
+              onClick={() => onManualDewarp(manualScale)}
+              disabled={isApplying}
+              className="px-3 py-1.5 text-sm bg-teal-600 text-white rounded-md hover:bg-teal-700 disabled:opacity-50 transition-colors"
+            >
+              {isApplying ? '...' : 'Anwenden'}
+            </button>
+          </div>
+          <p className="text-xs text-gray-400 mt-1">
+            0 = keine Korrektur, positiv = nach rechts entzerren, negativ = nach links
+          </p>
+        </div>
+      )}
+
+      {/* Ground Truth */}
+      {dewarpResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Korrekt entzerrt?
+          </div>
+          {!gtSaved ? (
+            <div className="space-y-3">
+              <div className="flex gap-2">
+                <button
+                  onClick={() => handleGroundTruth(true)}
+                  className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                    gtFeedback === 'correct'
+                      ? 'bg-green-100 text-green-700 ring-2 ring-green-400'
+                      : 'bg-gray-100 text-gray-600 hover:bg-green-50 dark:bg-gray-700 dark:text-gray-300'
+                  }`}
+                >
+                  Ja
+                </button>
+                <button
+                  onClick={() => handleGroundTruth(false)}
+                  className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                    gtFeedback === 'incorrect'
+                      ? 'bg-red-100 text-red-700 ring-2 ring-red-400'
+                      : 'bg-gray-100 text-gray-600 hover:bg-red-50 dark:bg-gray-700 dark:text-gray-300'
+                  }`}
+                >
+                  Nein
+                </button>
+              </div>
+              {gtFeedback === 'incorrect' && (
+                <div className="space-y-2">
+                  <textarea
+                    value={gtNotes}
+                    onChange={(e) => setGtNotes(e.target.value)}
+                    placeholder="Notizen zur Korrektur..."
+                    className="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md p-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200"
+                    rows={2}
+                  />
+                  <button
+                    onClick={handleGroundTruthIncorrect}
+                    className="text-sm px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+                  >
+                    Feedback speichern
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-sm text-green-600 dark:text-green-400">
+              Feedback gespeichert
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Next button */}
+      {dewarpResult && (
+        <div className="flex justify-end">
+          <button
+            onClick={onNext}
+            className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium transition-colors"
+          >
+            Uebernehmen & Weiter &rarr;
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}

admin-lehrer/components/ocr-pipeline/ImageCompareView.tsx

@@ -11,6 +11,8 @@ interface ImageCompareViewProps {
   showGrid: boolean
   showBinarized: boolean
   binarizedUrl: string | null
+  leftLabel?: string
+  rightLabel?: string
 }
 
 function MmGridOverlay() {
@@ -77,6 +79,8 @@ export function ImageCompareView({
   showGrid,
   showBinarized,
   binarizedUrl,
+  leftLabel,
+  rightLabel,
 }: ImageCompareViewProps) {
   const [leftError, setLeftError] = useState(false)
   const [rightError, setRightError] = useState(false)
@@ -87,7 +91,7 @@ export function ImageCompareView({
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
       {/* Left: Original */}
       <div className="space-y-2">
-        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">Original (unbearbeitet)</h3>
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">{leftLabel || 'Original (unbearbeitet)'}</h3>
         <div className="relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700"
              style={{ aspectRatio: '210/297' }}>
           {originalUrl && !leftError ? (
@@ -108,7 +112,7 @@ export function ImageCompareView({
       {/* Right: Deskewed with Grid */}
       <div className="space-y-2">
         <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">
-          {showBinarized ? 'Binarisiert' : 'Begradigt'} {showGrid && '+ Raster (mm)'}
+          {rightLabel || `${showBinarized ? 'Binarisiert' : 'Begradigt'}${showGrid ? ' + Raster (mm)' : ''}`}
         </h3>
         <div className="relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700"
              style={{ aspectRatio: '210/297' }}>

admin-lehrer/components/ocr-pipeline/StepColumnDetection.tsx

@@ -5,7 +5,7 @@ export function StepColumnDetection() {
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="text-5xl mb-4">📊</div>
       <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
-        Schritt 2: Spaltenerkennung
+        Schritt 3: Spaltenerkennung
       </h3>
       <p className="text-gray-500 dark:text-gray-400 max-w-md">
         Erkennung unsichtbarer Spaltentrennungen in der Vokabelseite.

admin-lehrer/components/ocr-pipeline/StepCoordinates.tsx

@@ -5,7 +5,7 @@ export function StepCoordinates() {
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="text-5xl mb-4">📍</div>
       <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
-        Schritt 4: Koordinatenzuweisung
+        Schritt 5: Koordinatenzuweisung
       </h3>
       <p className="text-gray-500 dark:text-gray-400 max-w-md">
         Exakte Positionszuweisung fuer jedes Wort auf der Seite.

admin-lehrer/components/ocr-pipeline/StepDeskew.tsx

@@ -8,7 +8,7 @@ import { ImageCompareView } from './ImageCompareView'
 const KLAUSUR_API = '/klausur-api'
 
 interface StepDeskewProps {
-  onNext: () => void
+  onNext: (sessionId: string) => void
 }
 
 export function StepDeskew({ onNext }: StepDeskewProps) {
@@ -208,7 +208,7 @@ export function StepDeskew({ onNext }: StepDeskewProps) {
         onToggleGrid={() => setShowGrid((v) => !v)}
         onManualDeskew={handleManualDeskew}
         onGroundTruth={handleGroundTruth}
-        onNext={onNext}
+        onNext={() => session && onNext(session.session_id)}
         isApplying={applying}
       />
 

admin-lehrer/components/ocr-pipeline/StepDewarp.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import type { DewarpResult, DewarpGroundTruth } from '@/app/(admin)/ai/ocr-pipeline/types'
+import { DewarpControls } from './DewarpControls'
+import { ImageCompareView } from './ImageCompareView'
+
+const KLAUSUR_API = '/klausur-api'
+
+interface StepDewarpProps {
+  sessionId: string | null
+  onNext: () => void
+}
+
+export function StepDewarp({ sessionId, onNext }: StepDewarpProps) {
+  const [dewarpResult, setDewarpResult] = useState<DewarpResult | null>(null)
+  const [dewarping, setDewarping] = useState(false)
+  const [applying, setApplying] = useState(false)
+  const [showGrid, setShowGrid] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Auto-trigger dewarp when component mounts with a sessionId
+  useEffect(() => {
+    if (!sessionId || dewarpResult) return
+
+    const runDewarp = async () => {
+      setDewarping(true)
+      setError(null)
+      try {
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/dewarp`, {
+          method: 'POST',
+        })
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({ detail: res.statusText }))
+          throw new Error(err.detail || 'Entzerrung fehlgeschlagen')
+        }
+        const data: DewarpResult = await res.json()
+        data.dewarped_image_url = `${KLAUSUR_API}${data.dewarped_image_url}`
+        setDewarpResult(data)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      } finally {
+        setDewarping(false)
+      }
+    }
+
+    runDewarp()
+  }, [sessionId, dewarpResult])
+
+  const handleManualDewarp = useCallback(async (scale: number) => {
+    if (!sessionId) return
+    setApplying(true)
+    setError(null)
+
+    try {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/dewarp/manual`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ scale }),
+      })
+      if (!res.ok) throw new Error('Manuelle Entzerrung fehlgeschlagen')
+
+      const data = await res.json()
+      setDewarpResult((prev) =>
+        prev
+          ? {
+              ...prev,
+              method_used: data.method_used,
+              scale_applied: data.scale_applied,
+              dewarped_image_url: `${KLAUSUR_API}${data.dewarped_image_url}?t=${Date.now()}`,
+            }
+          : null,
+      )
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Fehler')
+    } finally {
+      setApplying(false)
+    }
+  }, [sessionId])
+
+  const handleGroundTruth = useCallback(async (gt: DewarpGroundTruth) => {
+    if (!sessionId) return
+    try {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/dewarp`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(gt),
+      })
+    } catch (e) {
+      console.error('Ground truth save failed:', e)
+    }
+  }, [sessionId])
+
+  if (!sessionId) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-center">
+        <div className="text-5xl mb-4">🔧</div>
+        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Schritt 2: Entzerrung (Dewarp)
+        </h3>
+        <p className="text-gray-500 dark:text-gray-400 max-w-md">
+          Bitte zuerst Schritt 1 (Begradigung) abschliessen.
+        </p>
+      </div>
+    )
+  }
+
+  const deskewedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/deskewed`
+  const dewarpedUrl = dewarpResult?.dewarped_image_url ?? null
+
+  return (
+    <div className="space-y-4">
+      {/* Loading indicator */}
+      {dewarping && (
+        <div className="flex items-center gap-2 text-teal-600 dark:text-teal-400 text-sm">
+          <div className="animate-spin w-4 h-4 border-2 border-teal-500 border-t-transparent rounded-full" />
+          Entzerrung laeuft (beide Methoden)...
+        </div>
+      )}
+
+      {/* Image comparison: deskewed (left) vs dewarped (right) */}
+      <ImageCompareView
+        originalUrl={deskewedUrl}
+        deskewedUrl={dewarpedUrl}
+        showGrid={showGrid}
+        showBinarized={false}
+        binarizedUrl={null}
+        leftLabel="Begradigt (nach Deskew)"
+        rightLabel={`Entzerrt${showGrid ? ' + Raster (mm)' : ''}`}
+      />
+
+      {/* Controls */}
+      <DewarpControls
+        dewarpResult={dewarpResult}
+        showGrid={showGrid}
+        onToggleGrid={() => setShowGrid((v) => !v)}
+        onManualDewarp={handleManualDewarp}
+        onGroundTruth={handleGroundTruth}
+        onNext={onNext}
+        isApplying={applying}
+      />
+
+      {error && (
+        <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
+          {error}
+        </div>
+      )}
+    </div>
+  )
+}

admin-lehrer/components/ocr-pipeline/StepGroundTruth.tsx

@@ -5,7 +5,7 @@ export function StepGroundTruth() {
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="text-5xl mb-4">✅</div>
       <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
-        Schritt 6: Ground Truth Validierung
+        Schritt 7: Ground Truth Validierung
       </h3>
       <p className="text-gray-500 dark:text-gray-400 max-w-md">
         Gesamtpruefung der rekonstruierten Seite gegen das Original.

admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx

@@ -5,7 +5,7 @@ export function StepReconstruction() {
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="text-5xl mb-4">🏗️</div>
       <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
-        Schritt 5: Seitenrekonstruktion
+        Schritt 6: Seitenrekonstruktion
       </h3>
       <p className="text-gray-500 dark:text-gray-400 max-w-md">
         Nachbau der Originalseite aus erkannten Woertern und Positionen.

admin-lehrer/components/ocr-pipeline/StepWordRecognition.tsx

@@ -5,7 +5,7 @@ export function StepWordRecognition() {
     <div className="flex flex-col items-center justify-center py-16 text-center">
       <div className="text-5xl mb-4">🔤</div>
       <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
-        Schritt 3: Worterkennung
+        Schritt 4: Worterkennung
       </h3>
       <p className="text-gray-500 dark:text-gray-400 max-w-md">
         OCR mit Bounding Boxes fuer jedes erkannte Wort.