fix(ocr-pipeline): manual editor layout + no re-detection on cached result
- ManualColumnEditor now uses grid-cols-2 layout (image left, controls right) matching the normal view size so the image doesn't zoom in - StepColumnDetection only runs auto-detection when no cached result exists; revisiting step 3 loads cached columns without re-running detection Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -184,141 +184,158 @@ export function ManualColumnEditor({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center justify-between">
|
{/* Two-column layout: image (left) + controls (right) */}
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
Klicken Sie auf das Bild, um vertikale Trennlinien zu setzen.
|
{/* Left: Interactive image */}
|
||||||
{dividers.length > 0 && (
|
<div>
|
||||||
<span className="ml-2 font-medium text-gray-800 dark:text-gray-200">
|
<div className="flex items-center justify-between mb-1">
|
||||||
{dividers.length} Linien = {dividers.length + 1} Spalten
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400">
|
||||||
</span>
|
Klicken um Trennlinien zu setzen
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onCancel}
|
||||||
|
className="text-xs px-2 py-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="relative border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 cursor-crosshair select-none"
|
||||||
|
onClick={handleImageClick}
|
||||||
|
>
|
||||||
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
|
<img
|
||||||
|
src={imageUrl}
|
||||||
|
alt="Entzerrtes Bild"
|
||||||
|
className="w-full h-auto block"
|
||||||
|
draggable={false}
|
||||||
|
onLoad={() => setImageLoaded(true)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{imageLoaded && (
|
||||||
|
<>
|
||||||
|
{/* Column overlays */}
|
||||||
|
{columnRegions.map((region, i) => (
|
||||||
|
<div
|
||||||
|
key={`col-${i}`}
|
||||||
|
className="absolute top-0 bottom-0 pointer-events-none"
|
||||||
|
style={{
|
||||||
|
left: `${region.leftPct}%`,
|
||||||
|
width: `${region.rightPct - region.leftPct}%`,
|
||||||
|
backgroundColor: TYPE_OVERLAY_COLORS[region.type] || 'rgba(128,128,128,0.08)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="absolute top-1 left-1/2 -translate-x-1/2 text-[10px] font-medium text-gray-600 dark:text-gray-300 bg-white/80 dark:bg-gray-800/80 px-1 rounded">
|
||||||
|
{i + 1}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Divider lines */}
|
||||||
|
{sorted.map((xPct, i) => (
|
||||||
|
<div
|
||||||
|
key={`div-${i}`}
|
||||||
|
data-divider="true"
|
||||||
|
className="absolute top-0 bottom-0 group"
|
||||||
|
style={{
|
||||||
|
left: `${xPct}%`,
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
width: '12px',
|
||||||
|
cursor: 'col-resize',
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
onMouseDown={(e) => handleDividerMouseDown(e, i)}
|
||||||
|
>
|
||||||
|
{/* Visible line */}
|
||||||
|
<div
|
||||||
|
data-divider="true"
|
||||||
|
className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-0.5 border-l-2 border-dashed border-red-500"
|
||||||
|
/>
|
||||||
|
{/* Delete button */}
|
||||||
|
<button
|
||||||
|
data-divider="true"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
removeDivider(i)
|
||||||
|
}}
|
||||||
|
className="absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-red-500 text-white rounded-full text-[10px] leading-none flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-20"
|
||||||
|
title="Linie entfernen"
|
||||||
|
>
|
||||||
|
x
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right: Column type assignment + actions */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||||||
|
Spaltentypen
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{dividers.length === 0 ? (
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
|
||||||
|
<div className="text-3xl mb-2">👆</div>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Klicken Sie auf das Bild links, um vertikale Trennlinien zwischen den Spalten zu setzen.
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-2">
|
||||||
|
Linien koennen per Drag verschoben und per Hover geloescht werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<span className="font-medium text-gray-800 dark:text-gray-200">
|
||||||
|
{dividers.length} Linien = {dividers.length + 1} Spalten
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
{columnRegions.map((region, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-3">
|
||||||
|
<span className={`w-16 text-center px-2 py-0.5 rounded text-xs font-medium ${TYPE_BADGE_COLORS[region.type] || 'bg-gray-100 text-gray-600'}`}>
|
||||||
|
Spalte {i + 1}
|
||||||
|
</span>
|
||||||
|
<select
|
||||||
|
value={columnTypes[i] || 'column_text'}
|
||||||
|
onChange={(e) => updateColumnType(i, e.target.value as ColumnTypeKey)}
|
||||||
|
className="text-sm border border-gray-200 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200"
|
||||||
|
>
|
||||||
|
{COLUMN_TYPES.map(t => (
|
||||||
|
<option key={t.value} value={t.value}>{t.label}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<span className="text-xs text-gray-400 font-mono">
|
||||||
|
{Math.round(region.rightPct - region.leftPct)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={onCancel}
|
|
||||||
className="text-xs px-2 py-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
|
||||||
>
|
|
||||||
Abbrechen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Interactive image area */}
|
{/* Action buttons */}
|
||||||
<div
|
<div className="flex flex-col gap-2">
|
||||||
ref={containerRef}
|
<button
|
||||||
className="relative border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 cursor-crosshair select-none"
|
onClick={handleApply}
|
||||||
onClick={handleImageClick}
|
disabled={dividers.length === 0 || applying}
|
||||||
>
|
className="w-full px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
>
|
||||||
<img
|
{applying ? 'Wird gespeichert...' : `${dividers.length + 1} Spalten uebernehmen`}
|
||||||
src={imageUrl}
|
</button>
|
||||||
alt="Entzerrtes Bild"
|
<button
|
||||||
className="w-full h-auto block"
|
onClick={() => setDividers([])}
|
||||||
draggable={false}
|
disabled={dividers.length === 0}
|
||||||
onLoad={() => setImageLoaded(true)}
|
className="text-xs px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
|
||||||
/>
|
>
|
||||||
|
Alle Linien entfernen
|
||||||
{imageLoaded && (
|
</button>
|
||||||
<>
|
|
||||||
{/* Column overlays */}
|
|
||||||
{columnRegions.map((region, i) => (
|
|
||||||
<div
|
|
||||||
key={`col-${i}`}
|
|
||||||
className="absolute top-0 bottom-0 pointer-events-none"
|
|
||||||
style={{
|
|
||||||
left: `${region.leftPct}%`,
|
|
||||||
width: `${region.rightPct - region.leftPct}%`,
|
|
||||||
backgroundColor: TYPE_OVERLAY_COLORS[region.type] || 'rgba(128,128,128,0.08)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="absolute top-1 left-1/2 -translate-x-1/2 text-[10px] font-medium text-gray-600 dark:text-gray-300 bg-white/80 dark:bg-gray-800/80 px-1 rounded">
|
|
||||||
{i + 1}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Divider lines */}
|
|
||||||
{sorted.map((xPct, i) => (
|
|
||||||
<div
|
|
||||||
key={`div-${i}`}
|
|
||||||
data-divider="true"
|
|
||||||
className="absolute top-0 bottom-0 group"
|
|
||||||
style={{
|
|
||||||
left: `${xPct}%`,
|
|
||||||
transform: 'translateX(-50%)',
|
|
||||||
width: '12px',
|
|
||||||
cursor: 'col-resize',
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
onMouseDown={(e) => handleDividerMouseDown(e, i)}
|
|
||||||
>
|
|
||||||
{/* Visible line */}
|
|
||||||
<div
|
|
||||||
data-divider="true"
|
|
||||||
className="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-0.5 border-l-2 border-dashed border-red-500"
|
|
||||||
/>
|
|
||||||
{/* Delete button */}
|
|
||||||
<button
|
|
||||||
data-divider="true"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
removeDivider(i)
|
|
||||||
}}
|
|
||||||
className="absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-red-500 text-white rounded-full text-[10px] leading-none flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-20"
|
|
||||||
title="Linie entfernen"
|
|
||||||
>
|
|
||||||
x
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Column type assignment */}
|
|
||||||
{dividers.length > 0 && (
|
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
|
|
||||||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
|
|
||||||
Spaltentypen zuweisen
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
{columnRegions.map((region, i) => (
|
|
||||||
<div key={i} className="flex items-center gap-3">
|
|
||||||
<span className={`w-16 text-center px-2 py-0.5 rounded text-xs font-medium ${TYPE_BADGE_COLORS[region.type] || 'bg-gray-100 text-gray-600'}`}>
|
|
||||||
Spalte {i + 1}
|
|
||||||
</span>
|
|
||||||
<select
|
|
||||||
value={columnTypes[i] || 'column_text'}
|
|
||||||
onChange={(e) => updateColumnType(i, e.target.value as ColumnTypeKey)}
|
|
||||||
className="text-sm border border-gray-200 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200"
|
|
||||||
>
|
|
||||||
{COLUMN_TYPES.map(t => (
|
|
||||||
<option key={t.value} value={t.value}>{t.label}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<span className="text-xs text-gray-400 font-mono">
|
|
||||||
{Math.round(region.rightPct - region.leftPct)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Action buttons */}
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<button
|
|
||||||
onClick={handleApply}
|
|
||||||
disabled={dividers.length === 0 || applying}
|
|
||||||
className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
|
||||||
>
|
|
||||||
{applying ? 'Wird gespeichert...' : `${dividers.length + 1} Spalten uebernehmen`}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setDividers([])}
|
|
||||||
disabled={dividers.length === 0}
|
|
||||||
className="text-xs px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
Alle Linien entfernen
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -20,15 +20,12 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
|
|||||||
const [applying, setApplying] = useState(false)
|
const [applying, setApplying] = useState(false)
|
||||||
const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null)
|
const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null)
|
||||||
|
|
||||||
// Auto-trigger column detection on mount
|
// Fetch session info (image dimensions) + check for cached column result
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!sessionId || columnResult) return
|
if (!sessionId || imageDimensions) return
|
||||||
|
|
||||||
const runDetection = async () => {
|
const fetchSessionInfo = async () => {
|
||||||
setDetecting(true)
|
|
||||||
setError(null)
|
|
||||||
try {
|
try {
|
||||||
// First check if columns already detected (reload case)
|
|
||||||
const infoRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
|
const infoRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
|
||||||
if (infoRes.ok) {
|
if (infoRes.ok) {
|
||||||
const info = await infoRes.json()
|
const info = await infoRes.json()
|
||||||
@@ -37,32 +34,22 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
|
|||||||
}
|
}
|
||||||
if (info.column_result) {
|
if (info.column_result) {
|
||||||
setColumnResult(info.column_result)
|
setColumnResult(info.column_result)
|
||||||
setDetecting(false)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Run detection
|
|
||||||
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
|
|
||||||
method: 'POST',
|
|
||||||
})
|
|
||||||
if (!res.ok) {
|
|
||||||
const err = await res.json().catch(() => ({ detail: res.statusText }))
|
|
||||||
throw new Error(err.detail || 'Spaltenerkennung fehlgeschlagen')
|
|
||||||
}
|
|
||||||
const data: ColumnResult = await res.json()
|
|
||||||
setColumnResult(data)
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
console.error('Failed to fetch session info:', e)
|
||||||
} finally {
|
|
||||||
setDetecting(false)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// No cached result - run auto-detection
|
||||||
|
runAutoDetection()
|
||||||
}
|
}
|
||||||
|
|
||||||
runDetection()
|
fetchSessionInfo()
|
||||||
}, [sessionId, columnResult])
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [sessionId])
|
||||||
|
|
||||||
const handleRerun = useCallback(async () => {
|
const runAutoDetection = useCallback(async () => {
|
||||||
if (!sessionId) return
|
if (!sessionId) return
|
||||||
setDetecting(true)
|
setDetecting(true)
|
||||||
setError(null)
|
setError(null)
|
||||||
@@ -70,16 +57,23 @@ export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionPr
|
|||||||
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
|
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
})
|
})
|
||||||
if (!res.ok) throw new Error('Spaltenerkennung fehlgeschlagen')
|
if (!res.ok) {
|
||||||
|
const err = await res.json().catch(() => ({ detail: res.statusText }))
|
||||||
|
throw new Error(err.detail || 'Spaltenerkennung fehlgeschlagen')
|
||||||
|
}
|
||||||
const data: ColumnResult = await res.json()
|
const data: ColumnResult = await res.json()
|
||||||
setColumnResult(data)
|
setColumnResult(data)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
setError(e instanceof Error ? e.message : 'Fehler')
|
setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||||||
} finally {
|
} finally {
|
||||||
setDetecting(false)
|
setDetecting(false)
|
||||||
}
|
}
|
||||||
}, [sessionId])
|
}, [sessionId])
|
||||||
|
|
||||||
|
const handleRerun = useCallback(() => {
|
||||||
|
runAutoDetection()
|
||||||
|
}, [runAutoDetection])
|
||||||
|
|
||||||
const handleGroundTruth = useCallback(async (gt: ColumnGroundTruth) => {
|
const handleGroundTruth = useCallback(async (gt: ColumnGroundTruth) => {
|
||||||
if (!sessionId) return
|
if (!sessionId) return
|
||||||
try {
|
try {
|
||||||
|
|||||||
Reference in New Issue
Block a user