feat: Orientierung + Zuschneiden als Schritte 1-2 in OCR-Pipeline

Zwei neue Wizard-Schritte vor Begradigung:
- Step 1: Orientierungserkennung (0/90/180/270° via Tesseract OSD)
- Step 2: Seitenrand-Erkennung und Zuschnitt (Scannerraender entfernen)

Backend:
- orientation_crop_api.py: POST /orientation, POST /crop, POST /crop/skip
- page_crop.py: detect_and_crop_page() mit Format-Erkennung (A4/A5/Letter)
- Session-Store: orientation_result, crop_result Felder
- Pipeline nutzt zugeschnittenes Bild fuer Deskew/Dewarp

Frontend:
- StepOrientation.tsx: Upload + Auto-Orientierung + Vorher/Nachher
- StepCrop.tsx: Auto-Crop + Format-Badge + Ueberspringen-Option
- Pipeline-Stepper: 10 Schritte (war 8)

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

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

@@ -8,29 +8,27 @@ import { ImageCompareView } from './ImageCompareView'
 const KLAUSUR_API = '/klausur-api'
 
 interface StepDeskewProps {
-  sessionId?: string | null
-  onNext: (sessionId: string) => void
+  sessionId: string | null
+  onNext: () => void
 }
 
-export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewProps) {
+export function StepDeskew({ sessionId, onNext }: StepDeskewProps) {
   const [session, setSession] = useState<SessionInfo | null>(null)
   const [deskewResult, setDeskewResult] = useState<DeskewResult | null>(null)
-  const [uploading, setUploading] = useState(false)
   const [deskewing, setDeskewing] = useState(false)
   const [applying, setApplying] = useState(false)
   const [showBinarized, setShowBinarized] = useState(false)
   const [showGrid, setShowGrid] = useState(true)
   const [error, setError] = useState<string | null>(null)
-  const [dragOver, setDragOver] = useState(false)
-  const [sessionName, setSessionName] = useState('')
+  const [hasAutoRun, setHasAutoRun] = useState(false)
 
-  // Reload session data when navigating back from a later step
+  // Load session and auto-trigger deskew
   useEffect(() => {
-    if (!existingSessionId || session) return
+    if (!sessionId || session) return
 
-    const loadSession = async () => {
+    const loadAndDeskew = async () => {
       try {
-        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}`)
+        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
         if (!res.ok) return
         const data = await res.json()
 
@@ -39,83 +37,56 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
           filename: data.filename,
           image_width: data.image_width,
           image_height: data.image_height,
-          original_image_url: `${KLAUSUR_API}${data.original_image_url}`,
+          // Use cropped image as "before" view
+          original_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`,
         }
         setSession(sessionInfo)
 
-        // Reconstruct deskew result from session data
+        // If deskew result already exists, use it
         if (data.deskew_result) {
           const dr: DeskewResult = {
             ...data.deskew_result,
-            deskewed_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}/image/deskewed`,
-            binarized_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${existingSessionId}/image/binarized`,
+            deskewed_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/deskewed`,
+            binarized_image_url: `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/binarized`,
           }
           setDeskewResult(dr)
+          return
+        }
+
+        // Auto-trigger deskew if not already done
+        if (!hasAutoRun) {
+          setHasAutoRun(true)
+          setDeskewing(true)
+          const deskewRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/deskew`, {
+            method: 'POST',
+          })
+
+          if (!deskewRes.ok) {
+            throw new Error('Begradigung fehlgeschlagen')
+          }
+
+          const deskewData: DeskewResult = await deskewRes.json()
+          deskewData.deskewed_image_url = `${KLAUSUR_API}${deskewData.deskewed_image_url}`
+          deskewData.binarized_image_url = `${KLAUSUR_API}${deskewData.binarized_image_url}`
+          setDeskewResult(deskewData)
         }
       } catch (e) {
-        console.error('Failed to reload session:', e)
+        setError(e instanceof Error ? e.message : 'Fehler beim Laden')
+      } finally {
+        setDeskewing(false)
       }
     }
 
-    loadSession()
-  }, [existingSessionId, session])
-
-  const handleUpload = useCallback(async (file: File) => {
-    setUploading(true)
-    setError(null)
-    setDeskewResult(null)
-
-    try {
-      const formData = new FormData()
-      formData.append('file', file)
-      if (sessionName.trim()) {
-        formData.append('name', sessionName.trim())
-      }
-
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`, {
-        method: 'POST',
-        body: formData,
-      })
-
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ detail: res.statusText }))
-        throw new Error(err.detail || 'Upload fehlgeschlagen')
-      }
-
-      const data: SessionInfo = await res.json()
-      // Prepend API prefix to relative URLs
-      data.original_image_url = `${KLAUSUR_API}${data.original_image_url}`
-      setSession(data)
-
-      // Auto-trigger deskew
-      setDeskewing(true)
-      const deskewRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${data.session_id}/deskew`, {
-        method: 'POST',
-      })
-
-      if (!deskewRes.ok) {
-        throw new Error('Begradigung fehlgeschlagen')
-      }
-
-      const deskewData: DeskewResult = await deskewRes.json()
-      deskewData.deskewed_image_url = `${KLAUSUR_API}${deskewData.deskewed_image_url}`
-      deskewData.binarized_image_url = `${KLAUSUR_API}${deskewData.binarized_image_url}`
-      setDeskewResult(deskewData)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
-    } finally {
-      setUploading(false)
-      setDeskewing(false)
-    }
-  }, [])
+    loadAndDeskew()
+  }, [sessionId, session, hasAutoRun])
 
   const handleManualDeskew = useCallback(async (angle: number) => {
-    if (!session) return
+    if (!sessionId) return
     setApplying(true)
     setError(null)
 
     try {
-      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${session.session_id}/deskew/manual`, {
+      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/deskew/manual`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ angle }),
@@ -130,7 +101,6 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
               ...prev,
               angle_applied: data.angle_applied,
               method_used: data.method_used,
-              // Force reload by appending timestamp
               deskewed_image_url: `${KLAUSUR_API}${data.deskewed_image_url}?t=${Date.now()}`,
             }
           : null,
@@ -140,12 +110,12 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
     } finally {
       setApplying(false)
     }
-  }, [session])
+  }, [sessionId])
 
   const handleGroundTruth = useCallback(async (gt: DeskewGroundTruth) => {
-    if (!session) return
+    if (!sessionId) return
     try {
-      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${session.session_id}/ground-truth/deskew`, {
+      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/deskew`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(gt),
@@ -153,89 +123,21 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
     } catch (e) {
       console.error('Ground truth save failed:', e)
     }
-  }, [session])
+  }, [sessionId])
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    setDragOver(false)
-    const file = e.dataTransfer.files[0]
-    if (file) handleUpload(file)
-  }, [handleUpload])
-
-  const handleFileInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) handleUpload(file)
-  }, [handleUpload])
-
-  // Upload area (no session yet)
-  if (!session) {
-    return (
-      <div className="space-y-4">
-        {/* Session name input */}
-        <div>
-          <label className="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">
-            Session-Name (optional)
-          </label>
-          <input
-            type="text"
-            value={sessionName}
-            onChange={(e) => setSessionName(e.target.value)}
-            placeholder="z.B. Unit 3 Seite 42"
-            className="w-full max-w-sm px-3 py-2 text-sm border rounded-lg dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-teal-500"
-          />
-        </div>
-
-        <div
-          onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
-          onDragLeave={() => setDragOver(false)}
-          onDrop={handleDrop}
-          className={`border-2 border-dashed rounded-xl p-12 text-center transition-colors ${
-            dragOver
-              ? 'border-teal-400 bg-teal-50 dark:bg-teal-900/20'
-              : 'border-gray-300 dark:border-gray-600 hover:border-teal-400'
-          }`}
-        >
-          {uploading ? (
-            <div className="text-gray-500">
-              <div className="animate-spin inline-block w-8 h-8 border-2 border-teal-500 border-t-transparent rounded-full mb-3" />
-              <p>Wird hochgeladen...</p>
-            </div>
-          ) : (
-            <>
-              <div className="text-4xl mb-3">📄</div>
-              <p className="text-gray-600 dark:text-gray-400 mb-2">
-                PDF oder Bild hierher ziehen
-              </p>
-              <p className="text-sm text-gray-400 mb-4">oder</p>
-              <label className="inline-block px-4 py-2 bg-teal-600 text-white rounded-lg cursor-pointer hover:bg-teal-700 transition-colors">
-                Datei auswaehlen
-                <input
-                  type="file"
-                  accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif"
-                  onChange={handleFileInput}
-                  className="hidden"
-                />
-              </label>
-            </>
-          )}
-        </div>
-        {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>
-    )
+  if (!sessionId) {
+    return <div className="text-sm text-gray-400">Keine Session ausgewaehlt.</div>
   }
 
-  // Session active: show comparison + controls
   return (
     <div className="space-y-4">
       {/* Filename */}
-      <div className="text-sm text-gray-500 dark:text-gray-400">
-        Datei: <span className="font-medium text-gray-700 dark:text-gray-300">{session.filename}</span>
-        {' '}({session.image_width} x {session.image_height} px)
-      </div>
+      {session && (
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Datei: <span className="font-medium text-gray-700 dark:text-gray-300">{session.filename}</span>
+          {' '}({session.image_width} x {session.image_height} px)
+        </div>
+      )}
 
       {/* Loading indicator */}
       {deskewing && (
@@ -246,13 +148,17 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
       )}
 
       {/* Image comparison */}
-      <ImageCompareView
-        originalUrl={session.original_image_url}
-        deskewedUrl={deskewResult?.deskewed_image_url ?? null}
-        showGrid={showGrid}
-        showBinarized={showBinarized}
-        binarizedUrl={deskewResult?.binarized_image_url ?? null}
-      />
+      {session && (
+        <ImageCompareView
+          originalUrl={session.original_image_url}
+          deskewedUrl={deskewResult?.deskewed_image_url ?? null}
+          showGrid={showGrid}
+          showBinarized={showBinarized}
+          binarizedUrl={deskewResult?.binarized_image_url ?? null}
+          leftLabel="Zugeschnitten"
+          rightLabel="Begradigt"
+        />
+      )}
 
       {/* Controls */}
       <DeskewControls
@@ -263,7 +169,7 @@ export function StepDeskew({ sessionId: existingSessionId, onNext }: StepDeskewP
         onToggleGrid={() => setShowGrid((v) => !v)}
         onManualDeskew={handleManualDeskew}
         onGroundTruth={handleGroundTruth}
-        onNext={() => session && onNext(session.session_id)}
+        onNext={onNext}
         isApplying={applying}
       />