feat: OCR pipeline v2.1 – narrow column OCR, dewarp automation, Fabric.js editor

Proposal B: Adaptive padding, crop upscaling, PSM selection, row-strip re-OCR for narrow columns (<15% width) – expected accuracy boost 60-70% → 85-90%. Proposal A: New text-line straightness detector (Method D), quality gate (rejects counterproductive corrections), 2-pass projection refinement, higher confidence thresholds – expected manual dewarp reduction to <10%. Proposal C: Fabric.js canvas editor with drag/drop, inline editing, undo/redo, opacity slider, zoom, PDF/DOCX export endpoints. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-03 22:44:14 +01:00
parent 970ec1f548
commit ab3ecc7c08
7 changed files with 1105 additions and 128 deletions
--- a/admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx
+++ b/admin-lehrer/components/ocr-pipeline/StepReconstruction.tsx
@@ -1,10 +1,19 @@
 'use client'

 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
 import type { GridResult, GridCell, WordEntry } from '@/app/(admin)/ai/ocr-pipeline/types'

 const KLAUSUR_API = '/klausur-api'

+// Lazy-load Fabric.js canvas editor (SSR-incompatible)
+const FabricReconstructionCanvas = dynamic(
+  () => import('./FabricReconstructionCanvas').then(m => ({ default: m.FabricReconstructionCanvas })),
+  { ssr: false, loading: () => <div className="py-8 text-center text-sm text-gray-400">Editor wird geladen...</div> }
+)
+
+type EditorMode = 'simple' | 'editor'
+
 interface StepReconstructionProps {
  sessionId: string | null
  onNext: () => void
@@ -26,6 +35,8 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
  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 [editorMode, setEditorMode] = useState<EditorMode>('simple')
  const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())
  const [zoom, setZoom] = useState(100)
  const [imageNaturalH, setImageNaturalH] = useState(0)
@@ -70,8 +81,9 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
      }

      // Build editable cells from grid cells
-      const gridCells: GridCell[] = wordResult.cells || []
-      const allEditableCells: EditableCell[] = gridCells.map(c => ({
+      const rawGridCells: GridCell[] = wordResult.cells || []
+      setGridCells(rawGridCells)
+      const allEditableCells: EditableCell[] = rawGridCells.map(c => ({
        cellId: c.cell_id,
        text: c.text,
        originalText: c.text,
@@ -252,6 +264,17 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
    }
  }, [sessionId, editedTexts, cells])

+  // Handler for Fabric.js editor cell changes
+  const handleFabricCellsChanged = useCallback((updates: { cell_id: string; text: string }[]) => {
+    for (const u of updates) {
+      setEditedTexts(prev => {
+        const next = new Map(prev)
+        next.set(u.cell_id, u.text)
+        return next
+      })
+    }
+  }, [])
+
  const dewarpedUrl = sessionId
    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
    : ''
@@ -332,6 +355,29 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
            Schritt 7: Rekonstruktion
          </h3>
+          {/* Mode toggle */}
+          <div className="flex items-center ml-2 border border-gray-300 dark:border-gray-600 rounded overflow-hidden text-xs">
+            <button
+              onClick={() => setEditorMode('simple')}
+              className={`px-2 py-0.5 transition-colors ${
+                editorMode === 'simple'
+                  ? 'bg-teal-600 text-white'
+                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+              }`}
+            >
+              Einfach
+            </button>
+            <button
+              onClick={() => setEditorMode('editor')}
+              className={`px-2 py-0.5 transition-colors ${
+                editorMode === 'editor'
+                  ? 'bg-teal-600 text-white'
+                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+              }`}
+            >
+              Editor
+            </button>
+          </div>
          <span className="text-xs text-gray-400">
            {cells.length} Zellen &middot; {changedCount} geaendert
            {emptyCellIds.size > 0 && showEmptyHighlight && (
@@ -408,82 +454,90 @@ export function StepReconstruction({ sessionId, onNext }: StepReconstructionProp
        </div>
      </div>

-      {/* Reconstruction canvas */}
-      <div className="border rounded-lg overflow-auto dark:border-gray-700 bg-gray-100 dark:bg-gray-900" style={{ maxHeight: '75vh' }}>
-        <div
-          ref={containerRef}
-          className="relative inline-block"
-          style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top left' }}
-        >
-          {/* Background image at reduced opacity */}
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            ref={imageRef}
-            src={dewarpedUrl}
-            alt="Dewarped"
-            className="block"
-            style={{ opacity: 0.3 }}
-            onLoad={handleImageLoad}
-          />
+      {/* Reconstruction canvas — Simple or Editor mode */}
+      {editorMode === 'editor' && sessionId ? (
+        <FabricReconstructionCanvas
+          sessionId={sessionId}
+          cells={gridCells}
+          onCellsChanged={handleFabricCellsChanged}
+        />
+      ) : (
+        <div className="border rounded-lg overflow-auto dark:border-gray-700 bg-gray-100 dark:bg-gray-900" style={{ maxHeight: '75vh' }}>
+          <div
+            ref={containerRef}
+            className="relative inline-block"
+            style={{ transform: `scale(${zoom / 100})`, transformOrigin: 'top left' }}
+          >
+            {/* Background image at reduced opacity */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              ref={imageRef}
+              src={dewarpedUrl}
+              alt="Dewarped"
+              className="block"
+              style={{ opacity: 0.3 }}
+              onLoad={handleImageLoad}
+            />

-          {/* Empty field markers */}
-          {showEmptyHighlight && cells
-            .filter(c => emptyCellIds.has(c.cellId))
-            .map(cell => (
-              <div
-                key={`empty-${cell.cellId}`}
-                className="absolute border-2 border-dashed border-red-400/60 rounded pointer-events-none"
-                style={{
+            {/* Empty field markers */}
+            {showEmptyHighlight && cells
+              .filter(c => emptyCellIds.has(c.cellId))
+              .map(cell => (
+                <div
+                  key={`empty-${cell.cellId}`}
+                  className="absolute border-2 border-dashed border-red-400/60 rounded pointer-events-none"
+                  style={{
+                    left: `${cell.bboxPct.x}%`,
+                    top: `${cell.bboxPct.y}%`,
+                    width: `${cell.bboxPct.w}%`,
+                    height: `${cell.bboxPct.h}%`,
+                  }}
+                />
+              ))}
+
+            {/* Editable text fields at bbox positions */}
+            {cells.map((cell) => {
+              const displayText = getDisplayText(cell)
+              const edited = isEdited(cell)
+
+              return (
+                <div key={cell.cellId} className="absolute group" style={{
                  left: `${cell.bboxPct.x}%`,
                  top: `${cell.bboxPct.y}%`,
                  width: `${cell.bboxPct.w}%`,
                  height: `${cell.bboxPct.h}%`,
-                }}
-              />
-            ))}
-
-          {/* Editable text fields at bbox positions */}
-          {cells.map((cell) => {
-            const displayText = getDisplayText(cell)
-            const edited = isEdited(cell)
-
-            return (
-              <div key={cell.cellId} className="absolute group" style={{
-                left: `${cell.bboxPct.x}%`,
-                top: `${cell.bboxPct.y}%`,
-                width: `${cell.bboxPct.w}%`,
-                height: `${cell.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 text-black dark:text-white border px-0.5 outline-none transition-colors ${
-                    colTypeColor(cell.colType)
-                  } ${edited ? 'border-green-500 bg-green-50/30 dark:bg-green-900/20' : ''}`}
-                  style={{
-                    fontSize: `${getFontSize(cell.bboxPct.h)}px`,
-                    lineHeight: '1',
-                  }}
-                  title={`${cell.cellId} (${cell.colType})`}
-                />
-                {/* Per-cell reset button (X) — only shown for edited cells on hover */}
-                {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>
-            )
-          })}
+                }}>
+                  <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 text-black dark:text-white border px-0.5 outline-none transition-colors ${
+                      colTypeColor(cell.colType)
+                    } ${edited ? 'border-green-500 bg-green-50/30 dark:bg-green-900/20' : ''}`}
+                    style={{
+                      fontSize: `${getFontSize(cell.bboxPct.h)}px`,
+                      lineHeight: '1',
+                    }}
+                    title={`${cell.cellId} (${cell.colType})`}
+                  />
+                  {/* Per-cell reset button (X) — only shown for edited cells on hover */}
+                  {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>
+      )}

      {/* Bottom action */}
      <div className="flex justify-end">