bd4b956e3c
klausur-service (11 files): - cv_gutter_repair, ocr_pipeline_regression, upload_api - ocr_pipeline_sessions, smart_spell, nru_worksheet_generator - ocr_pipeline_overlays, mail/aggregator, zeugnis_api - cv_syllable_detect, self_rag backend-lehrer (17 files): - classroom_engine/suggestions, generators/quiz_generator - worksheets_api, llm_gateway/comparison, state_engine_api - classroom/models (→ 4 submodules), services/file_processor - alerts_agent/api/wizard+digests+routes, content_generators/pdf - classroom/routes/sessions, llm_gateway/inference - classroom_engine/analytics, auth/keycloak_auth - alerts_agent/processing/rule_engine, ai_processor/print_versions agent-core (5 files): - brain/memory_store, brain/knowledge_graph, brain/context_manager - orchestrator/supervisor, sessions/session_manager admin-lehrer (5 components): - GridOverlay, StepGridReview, DevOpsPipelineSidebar - DataFlowDiagram, sbom/wizard/page website (2 files): - DependencyMap, lehrer/abitur-archiv Other: nibis_ingestion, grid_detection_service, export-doclayout-onnx Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
460 lines
15 KiB
TypeScript
460 lines
15 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* StepGridReview — Last step of the Kombi Pipeline
|
|
*
|
|
* Split view: original scan on the left, GridEditor on the right.
|
|
* Adds confidence stats, row-accept buttons, and integrates with
|
|
* the GT marking flow in the parent page.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react'
|
|
import { useGridEditor } from '@/components/grid-editor/useGridEditor'
|
|
import type { GridZone, LayoutDividers } from '@/components/grid-editor/types'
|
|
import { GridToolbar } from '@/components/grid-editor/GridToolbar'
|
|
import { GridTable } from '@/components/grid-editor/GridTable'
|
|
import { ImageLayoutEditor } from '@/components/grid-editor/ImageLayoutEditor'
|
|
import { ReviewStatsBar } from './StepGridReviewStats'
|
|
|
|
const KLAUSUR_API = '/klausur-api'
|
|
|
|
interface StepGridReviewProps {
|
|
sessionId: string | null
|
|
onNext?: () => void
|
|
saveRef?: MutableRefObject<(() => Promise<void>) | null>
|
|
}
|
|
|
|
export function StepGridReview({ sessionId, onNext, saveRef }: StepGridReviewProps) {
|
|
const {
|
|
grid,
|
|
loading,
|
|
saving,
|
|
error,
|
|
dirty,
|
|
selectedCell,
|
|
selectedCells,
|
|
setSelectedCell,
|
|
buildGrid,
|
|
loadGrid,
|
|
saveGrid,
|
|
updateCellText,
|
|
toggleColumnBold,
|
|
toggleRowHeader,
|
|
undo,
|
|
redo,
|
|
canUndo,
|
|
canRedo,
|
|
getAdjacentCell,
|
|
deleteColumn,
|
|
addColumn,
|
|
deleteRow,
|
|
addRow,
|
|
commitUndoPoint,
|
|
updateColumnDivider,
|
|
updateLayoutHorizontals,
|
|
splitColumnAt,
|
|
toggleCellSelection,
|
|
clearCellSelection,
|
|
toggleSelectedBold,
|
|
autoCorrectColumnPatterns,
|
|
setCellColor,
|
|
ipaMode,
|
|
setIpaMode,
|
|
syllableMode,
|
|
setSyllableMode,
|
|
ocrEnhance,
|
|
setOcrEnhance,
|
|
ocrMaxCols,
|
|
setOcrMaxCols,
|
|
ocrMinConf,
|
|
setOcrMinConf,
|
|
visionFusion,
|
|
setVisionFusion,
|
|
documentCategory,
|
|
setDocumentCategory,
|
|
rerunOcr,
|
|
} = useGridEditor(sessionId)
|
|
|
|
const [showImage, setShowImage] = useState(true)
|
|
const [zoom, setZoom] = useState(100)
|
|
const [acceptedRows, setAcceptedRows] = useState<Set<string>>(new Set())
|
|
|
|
// Expose save function to parent via ref (for GT marking auto-save)
|
|
useEffect(() => {
|
|
if (saveRef) {
|
|
saveRef.current = async () => {
|
|
if (dirty) await saveGrid()
|
|
}
|
|
return () => { saveRef.current = null }
|
|
}
|
|
}, [saveRef, dirty, saveGrid])
|
|
|
|
// Load grid on mount
|
|
useEffect(() => {
|
|
if (sessionId) loadGrid()
|
|
}, [sessionId, loadGrid])
|
|
|
|
// Reset accepted rows when session changes
|
|
useEffect(() => {
|
|
setAcceptedRows(new Set())
|
|
}, [sessionId])
|
|
|
|
// Keyboard shortcuts
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
|
|
e.preventDefault()
|
|
undo()
|
|
} else if ((e.metaKey || e.ctrlKey) && e.key === 'z' && e.shiftKey) {
|
|
e.preventDefault()
|
|
redo()
|
|
} else if ((e.metaKey || e.ctrlKey) && e.key === 's') {
|
|
e.preventDefault()
|
|
saveGrid()
|
|
} else if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
|
|
e.preventDefault()
|
|
if (selectedCells.size > 0) {
|
|
toggleSelectedBold()
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
clearCellSelection()
|
|
}
|
|
}
|
|
window.addEventListener('keydown', handler)
|
|
return () => window.removeEventListener('keydown', handler)
|
|
}, [undo, redo, saveGrid, selectedCells, toggleSelectedBold, clearCellSelection])
|
|
|
|
const handleNavigate = useCallback(
|
|
(cellId: string, direction: 'up' | 'down' | 'left' | 'right') => {
|
|
const target = getAdjacentCell(cellId, direction)
|
|
if (target) {
|
|
setSelectedCell(target)
|
|
setTimeout(() => {
|
|
const el = document.getElementById(`cell-${target}`)
|
|
if (el) {
|
|
el.focus()
|
|
if (el instanceof HTMLInputElement) el.select()
|
|
}
|
|
}, 0)
|
|
}
|
|
},
|
|
[getAdjacentCell, setSelectedCell],
|
|
)
|
|
|
|
const acceptRow = (zoneIdx: number, rowIdx: number) => {
|
|
setAcceptedRows((prev) => {
|
|
const next = new Set(prev)
|
|
const key = `${zoneIdx}-${rowIdx}`
|
|
if (next.has(key)) next.delete(key)
|
|
else next.add(key)
|
|
return next
|
|
})
|
|
}
|
|
|
|
const acceptAllRows = () => {
|
|
if (!grid) return
|
|
const all = new Set<string>()
|
|
for (const zone of grid.zones) {
|
|
for (const row of zone.rows) {
|
|
all.add(`${zone.zone_index}-${row.index}`)
|
|
}
|
|
}
|
|
setAcceptedRows(all)
|
|
}
|
|
|
|
// Confidence stats
|
|
const allCells = grid?.zones?.flatMap((z) => z.cells) || []
|
|
const lowConfCells = allCells.filter(
|
|
(c) => c.confidence > 0 && c.confidence < 60,
|
|
)
|
|
const totalRows = grid?.zones?.reduce((sum, z) => sum + z.rows.length, 0) ?? 0
|
|
|
|
if (!sessionId) {
|
|
return (
|
|
<div className="text-center py-12 text-gray-400">
|
|
Keine Session ausgewaehlt.
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-16">
|
|
<div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
|
|
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
/>
|
|
</svg>
|
|
Grid wird geladen...
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
|
<p className="text-sm text-red-700 dark:text-red-300">
|
|
Fehler: {error}
|
|
</p>
|
|
<button
|
|
onClick={buildGrid}
|
|
className="mt-2 text-xs px-3 py-1.5 bg-red-600 text-white rounded hover:bg-red-700"
|
|
>
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!grid || !grid.zones.length) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-400 mb-4">Kein Grid vorhanden.</p>
|
|
<button
|
|
onClick={buildGrid}
|
|
className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 text-sm"
|
|
>
|
|
Grid aus OCR-Ergebnissen erstellen
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const imageUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{/* Review Stats Bar */}
|
|
<ReviewStatsBar
|
|
summary={grid.summary}
|
|
dictionaryDetection={grid.dictionary_detection}
|
|
pageNumber={grid.page_number}
|
|
lowConfCount={lowConfCells.length}
|
|
acceptedCount={acceptedRows.size}
|
|
totalRows={totalRows}
|
|
ocrEnhance={ocrEnhance}
|
|
ocrMaxCols={ocrMaxCols}
|
|
ocrMinConf={ocrMinConf}
|
|
visionFusion={visionFusion}
|
|
documentCategory={documentCategory}
|
|
durationSeconds={grid.duration_seconds}
|
|
showImage={showImage}
|
|
onOcrEnhanceChange={setOcrEnhance}
|
|
onOcrMaxColsChange={setOcrMaxCols}
|
|
onOcrMinConfChange={setOcrMinConf}
|
|
onVisionFusionChange={setVisionFusion}
|
|
onDocumentCategoryChange={setDocumentCategory}
|
|
onAcceptAll={acceptAllRows}
|
|
onAutoCorrect={autoCorrectColumnPatterns}
|
|
onToggleImage={() => setShowImage(!showImage)}
|
|
/>
|
|
|
|
{/* Toolbar */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
|
|
<GridToolbar
|
|
dirty={dirty}
|
|
saving={saving}
|
|
canUndo={canUndo}
|
|
canRedo={canRedo}
|
|
showOverlay={false}
|
|
ipaMode={ipaMode}
|
|
syllableMode={syllableMode}
|
|
onSave={saveGrid}
|
|
onUndo={undo}
|
|
onRedo={redo}
|
|
onRebuild={buildGrid}
|
|
onToggleOverlay={() => setShowImage(!showImage)}
|
|
onIpaModeChange={setIpaMode}
|
|
onSyllableModeChange={setSyllableMode}
|
|
/>
|
|
<button
|
|
onClick={rerunOcr}
|
|
disabled={loading}
|
|
className="ml-2 px-3 py-1.5 text-xs font-medium rounded border border-orange-300 dark:border-orange-700 bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-orange-900/40 transition-colors disabled:opacity-50"
|
|
title="OCR komplett neu ausfuehren mit aktuellen Quality-Step-Einstellungen (CLAHE, MinConf), dann Grid neu bauen"
|
|
>
|
|
{loading ? 'OCR laeuft...' : 'OCR neu + Grid'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Split View: Image left + Grid right */}
|
|
<div
|
|
className={showImage ? 'grid grid-cols-2 gap-3' : ''}
|
|
style={{ minHeight: '55vh' }}
|
|
>
|
|
{/* Left: Original Image with Layout Editor */}
|
|
{showImage && (
|
|
<ImageLayoutEditor
|
|
imageUrl={imageUrl}
|
|
zones={grid.zones}
|
|
imageWidth={grid.image_width}
|
|
layoutDividers={grid.layout_dividers}
|
|
zoom={zoom}
|
|
onZoomChange={setZoom}
|
|
onColumnDividerMove={updateColumnDivider}
|
|
onHorizontalsChange={updateLayoutHorizontals}
|
|
onCommitUndo={commitUndoPoint}
|
|
onSplitColumnAt={splitColumnAt}
|
|
onDeleteColumn={deleteColumn}
|
|
/>
|
|
)}
|
|
|
|
{/* Right: Grid with row-accept buttons */}
|
|
<div className="space-y-3">
|
|
|
|
{/* Zone tables with row-accept buttons */}
|
|
{(() => {
|
|
// Group consecutive zones with same vsplit_group
|
|
const groups: GridZone[][] = []
|
|
for (const zone of grid.zones) {
|
|
const prev = groups[groups.length - 1]
|
|
if (
|
|
prev &&
|
|
zone.vsplit_group != null &&
|
|
prev[0].vsplit_group === zone.vsplit_group
|
|
) {
|
|
prev.push(zone)
|
|
} else {
|
|
groups.push([zone])
|
|
}
|
|
}
|
|
return groups.map((group) => (
|
|
<div key={group[0].vsplit_group ?? group[0].zone_index}>
|
|
{/* Row-accept sidebar wraps each zone group */}
|
|
<div className="flex gap-1">
|
|
{/* Accept buttons column */}
|
|
<div className="flex-shrink-0 pt-[52px]">
|
|
{group[0].rows.map((row) => {
|
|
const key = `${group[0].zone_index}-${row.index}`
|
|
const isAccepted = acceptedRows.has(key)
|
|
return (
|
|
<button
|
|
key={row.index}
|
|
onClick={() =>
|
|
acceptRow(group[0].zone_index, row.index)
|
|
}
|
|
className={`w-6 h-6 mb-px rounded flex items-center justify-center transition-colors ${
|
|
isAccepted
|
|
? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400'
|
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-300 dark:text-gray-600 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 hover:text-emerald-500'
|
|
}`}
|
|
title={
|
|
isAccepted
|
|
? 'Klick zum Entfernen'
|
|
: 'Zeile als korrekt markieren'
|
|
}
|
|
>
|
|
<svg
|
|
className="w-3.5 h-3.5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2.5}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Grid table(s) */}
|
|
<div
|
|
className={`flex-1 min-w-0 ${group.length > 1 ? 'flex gap-2' : ''}`}
|
|
>
|
|
{group.map((zone) => (
|
|
<div
|
|
key={zone.zone_index}
|
|
className={`${group.length > 1 ? 'flex-1 min-w-0' : ''} bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700`}
|
|
>
|
|
<GridTable
|
|
zone={zone}
|
|
layoutMetrics={grid.layout_metrics}
|
|
selectedCell={selectedCell}
|
|
selectedCells={selectedCells}
|
|
onSelectCell={setSelectedCell}
|
|
onToggleCellSelection={toggleCellSelection}
|
|
onCellTextChange={updateCellText}
|
|
onToggleColumnBold={toggleColumnBold}
|
|
onToggleRowHeader={toggleRowHeader}
|
|
onNavigate={handleNavigate}
|
|
onDeleteColumn={deleteColumn}
|
|
onAddColumn={addColumn}
|
|
onDeleteRow={deleteRow}
|
|
onAddRow={addRow}
|
|
onSetCellColor={setCellColor}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
})()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Multi-select toolbar */}
|
|
{selectedCells.size > 0 && (
|
|
<div className="flex items-center gap-3 px-3 py-2 bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-800 rounded-lg text-xs">
|
|
<span className="text-teal-700 dark:text-teal-300 font-medium">
|
|
{selectedCells.size} Zellen markiert
|
|
</span>
|
|
<button
|
|
onClick={toggleSelectedBold}
|
|
className="px-2.5 py-1 bg-teal-600 text-white rounded hover:bg-teal-700 transition-colors font-medium"
|
|
>
|
|
B Fett umschalten
|
|
</button>
|
|
<button
|
|
onClick={clearCellSelection}
|
|
className="px-2 py-1 text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-colors"
|
|
>
|
|
Auswahl aufheben (Esc)
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tips + Next */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-[11px] text-gray-400 dark:text-gray-500 flex items-center gap-4">
|
|
<span>Tab: naechste Zelle</span>
|
|
<span>Pfeiltasten: Navigation</span>
|
|
<span>Ctrl+Klick: Mehrfachauswahl</span>
|
|
<span>Ctrl+B: Fett</span>
|
|
<span>Rechtsklick: Farbe</span>
|
|
<span>Ctrl+Z/Y: Undo/Redo</span>
|
|
<span>Ctrl+S: Speichern</span>
|
|
</div>
|
|
{onNext && (
|
|
<button
|
|
onClick={async () => {
|
|
if (dirty) await saveGrid()
|
|
onNext()
|
|
}}
|
|
className="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 transition-colors"
|
|
>
|
|
Fertig
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|