63dfb4d06f
The reset useEffects in StepOrientation/Deskew/Dewarp/Crop were clearing
orientationResult when sessionId changed (e.g. during handleOrientationComplete),
causing the right side of ImageCompareView to show nothing. Using key={sessionId}
on the step components instead forces React to remount with fresh state when
switching sessions, without interfering with the upload/orientation flow.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
751 lines
31 KiB
TypeScript
751 lines
31 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useState, useRef } from 'react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
|
|
import { StepOrientation } from '@/components/ocr-pipeline/StepOrientation'
|
|
import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
|
|
import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
|
|
import { StepCrop } from '@/components/ocr-pipeline/StepCrop'
|
|
import { StepStructureDetection } from '@/components/ocr-pipeline/StepStructureDetection'
|
|
import { StepRowDetection } from '@/components/ocr-pipeline/StepRowDetection'
|
|
import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecognition'
|
|
import { OverlayReconstruction } from '@/components/ocr-overlay/OverlayReconstruction'
|
|
import { PaddleDirectStep } from '@/components/ocr-overlay/PaddleDirectStep'
|
|
import { GridEditor } from '@/components/grid-editor/GridEditor'
|
|
import { StepGridReview } from '@/components/ocr-pipeline/StepGridReview'
|
|
import { BoxSessionTabs } from '@/components/ocr-pipeline/BoxSessionTabs'
|
|
import { OVERLAY_PIPELINE_STEPS, PADDLE_DIRECT_STEPS, KOMBI_STEPS, DOCUMENT_CATEGORIES, dbStepToOverlayUi, type PipelineStep, type SessionListItem, type DocumentCategory } from './types'
|
|
import type { SubSession } from '../ocr-pipeline/types'
|
|
|
|
const KLAUSUR_API = '/klausur-api'
|
|
|
|
export default function OcrOverlayPage() {
|
|
const [mode, setMode] = useState<'pipeline' | 'paddle-direct' | 'kombi'>('pipeline')
|
|
const [currentStep, setCurrentStep] = useState(0)
|
|
const [sessionId, setSessionId] = useState<string | null>(null)
|
|
const [sessionName, setSessionName] = useState<string>('')
|
|
const [sessions, setSessions] = useState<SessionListItem[]>([])
|
|
const [loadingSessions, setLoadingSessions] = useState(true)
|
|
const [editingName, setEditingName] = useState<string | null>(null)
|
|
const [editNameValue, setEditNameValue] = useState('')
|
|
const [editingCategory, setEditingCategory] = useState<string | null>(null)
|
|
const [activeCategory, setActiveCategory] = useState<DocumentCategory | undefined>(undefined)
|
|
const [editingActiveCategory, setEditingActiveCategory] = useState(false)
|
|
const [subSessions, setSubSessions] = useState<SubSession[]>([])
|
|
const [parentSessionId, setParentSessionId] = useState<string | null>(null)
|
|
const [isGroundTruth, setIsGroundTruth] = useState(false)
|
|
const [gtSaving, setGtSaving] = useState(false)
|
|
const [gtMessage, setGtMessage] = useState('')
|
|
const [steps, setSteps] = useState<PipelineStep[]>(
|
|
OVERLAY_PIPELINE_STEPS.map((s, i) => ({
|
|
...s,
|
|
status: i === 0 ? 'active' : 'pending',
|
|
})),
|
|
)
|
|
|
|
const searchParams = useSearchParams()
|
|
const deepLinkHandled = useRef(false)
|
|
const gridSaveRef = useRef<(() => Promise<void>) | null>(null)
|
|
|
|
useEffect(() => {
|
|
loadSessions()
|
|
}, [])
|
|
|
|
const loadSessions = async () => {
|
|
setLoadingSessions(true)
|
|
try {
|
|
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`)
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
// Filter to only show top-level sessions (no sub-sessions)
|
|
setSessions((data.sessions || []).filter((s: SessionListItem) => !s.parent_session_id))
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load sessions:', e)
|
|
} finally {
|
|
setLoadingSessions(false)
|
|
}
|
|
}
|
|
|
|
const openSession = useCallback(async (sid: string, keepSubSessions?: boolean) => {
|
|
try {
|
|
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`)
|
|
if (!res.ok) return
|
|
const data = await res.json()
|
|
|
|
setSessionId(sid)
|
|
setSessionName(data.name || data.filename || '')
|
|
setActiveCategory(data.document_category || undefined)
|
|
setIsGroundTruth(!!data.ground_truth?.build_grid_reference)
|
|
setGtMessage('')
|
|
|
|
// Sub-session handling
|
|
if (data.sub_sessions && data.sub_sessions.length > 0) {
|
|
setSubSessions(data.sub_sessions)
|
|
setParentSessionId(sid)
|
|
} else if (data.parent_session_id) {
|
|
setParentSessionId(data.parent_session_id)
|
|
} else if (!keepSubSessions) {
|
|
setSubSessions([])
|
|
setParentSessionId(null)
|
|
}
|
|
|
|
const isSubSession = !!data.parent_session_id
|
|
|
|
// Mode detection for root sessions with word_result
|
|
const ocrEngine = data.word_result?.ocr_engine
|
|
const isPaddleDirect = ocrEngine === 'paddle_direct'
|
|
const isKombi = ocrEngine === 'kombi' || ocrEngine === 'rapid_kombi'
|
|
|
|
let activeMode = mode // keep current mode for sub-sessions
|
|
if (!isSubSession && (isPaddleDirect || isKombi)) {
|
|
activeMode = isKombi ? 'kombi' : 'paddle-direct'
|
|
setMode(activeMode)
|
|
} else if (!isSubSession && !ocrEngine) {
|
|
// Unprocessed root session: keep the user's selected mode
|
|
activeMode = mode
|
|
}
|
|
|
|
const baseSteps = activeMode === 'kombi' ? KOMBI_STEPS
|
|
: activeMode === 'paddle-direct' ? PADDLE_DIRECT_STEPS
|
|
: OVERLAY_PIPELINE_STEPS
|
|
|
|
// Determine UI step
|
|
let uiStep: number
|
|
const skipIds: string[] = []
|
|
|
|
if (!isSubSession && (isPaddleDirect || isKombi)) {
|
|
const hasGrid = isKombi && data.grid_editor_result
|
|
const hasStructure = isKombi && data.structure_result
|
|
uiStep = hasGrid ? 6 : hasStructure ? 6 : data.word_result ? 5 : 4
|
|
if (isPaddleDirect) uiStep = data.word_result ? 4 : 4
|
|
} else {
|
|
const dbStep = data.current_step || 1
|
|
if (dbStep <= 2) uiStep = 0
|
|
else if (dbStep === 3) uiStep = 1
|
|
else if (dbStep === 4) uiStep = 2
|
|
else if (dbStep === 5) uiStep = 3
|
|
else uiStep = 4
|
|
|
|
// Sub-session skip logic
|
|
if (isSubSession) {
|
|
if (dbStep >= 5) {
|
|
skipIds.push('orientation', 'deskew', 'dewarp', 'crop')
|
|
if (uiStep < 4) uiStep = 4
|
|
} else if (dbStep >= 2) {
|
|
skipIds.push('orientation')
|
|
}
|
|
}
|
|
}
|
|
|
|
setSteps(
|
|
baseSteps.map((s, i) => ({
|
|
...s,
|
|
status: skipIds.includes(s.id)
|
|
? 'skipped'
|
|
: i < uiStep ? 'completed' : i === uiStep ? 'active' : 'pending',
|
|
})),
|
|
)
|
|
setCurrentStep(uiStep)
|
|
} catch (e) {
|
|
console.error('Failed to open session:', e)
|
|
}
|
|
}, [mode])
|
|
|
|
// Handle deep-link: ?session=xxx&mode=kombi (from GT Queue page)
|
|
useEffect(() => {
|
|
if (deepLinkHandled.current) return
|
|
const urlSession = searchParams.get('session')
|
|
const urlMode = searchParams.get('mode')
|
|
if (urlSession) {
|
|
deepLinkHandled.current = true
|
|
if (urlMode === 'kombi' || urlMode === 'paddle-direct') {
|
|
setMode(urlMode)
|
|
const baseSteps = urlMode === 'kombi' ? KOMBI_STEPS : PADDLE_DIRECT_STEPS
|
|
setSteps(baseSteps.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}
|
|
openSession(urlSession)
|
|
}
|
|
}, [searchParams, openSession])
|
|
|
|
const deleteSession = useCallback(async (sid: string) => {
|
|
try {
|
|
await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, { method: 'DELETE' })
|
|
setSessions((prev) => prev.filter((s) => s.id !== sid))
|
|
if (sessionId === sid) {
|
|
setSessionId(null)
|
|
setCurrentStep(0)
|
|
setSubSessions([])
|
|
setParentSessionId(null)
|
|
const baseSteps = mode === 'kombi' ? KOMBI_STEPS : mode === 'paddle-direct' ? PADDLE_DIRECT_STEPS : OVERLAY_PIPELINE_STEPS
|
|
setSteps(baseSteps.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to delete session:', e)
|
|
}
|
|
}, [sessionId, mode])
|
|
|
|
const renameSession = useCallback(async (sid: string, newName: string) => {
|
|
try {
|
|
await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: newName }),
|
|
})
|
|
setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, name: newName } : s)))
|
|
if (sessionId === sid) setSessionName(newName)
|
|
} catch (e) {
|
|
console.error('Failed to rename session:', e)
|
|
}
|
|
setEditingName(null)
|
|
}, [sessionId])
|
|
|
|
const updateCategory = useCallback(async (sid: string, category: DocumentCategory) => {
|
|
try {
|
|
await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ document_category: category }),
|
|
})
|
|
setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, document_category: category } : s)))
|
|
if (sessionId === sid) setActiveCategory(category)
|
|
} catch (e) {
|
|
console.error('Failed to update category:', e)
|
|
}
|
|
setEditingCategory(null)
|
|
}, [sessionId])
|
|
|
|
const handleStepClick = (index: number) => {
|
|
if (index <= currentStep || steps[index].status === 'completed') {
|
|
setCurrentStep(index)
|
|
}
|
|
}
|
|
|
|
const goToStep = (step: number) => {
|
|
setCurrentStep(step)
|
|
setSteps((prev) =>
|
|
prev.map((s, i) => ({
|
|
...s,
|
|
status: i < step ? 'completed' : i === step ? 'active' : 'pending',
|
|
})),
|
|
)
|
|
}
|
|
|
|
const handleNext = () => {
|
|
if (currentStep >= steps.length - 1) {
|
|
// Sub-session completed — switch back to parent
|
|
if (parentSessionId && sessionId !== parentSessionId) {
|
|
setSubSessions((prev) =>
|
|
prev.map((s) => s.id === sessionId ? { ...s, status: 'completed', current_step: 10 } : s)
|
|
)
|
|
handleSessionChange(parentSessionId)
|
|
return
|
|
}
|
|
// Last step completed — return to session list
|
|
const baseSteps = mode === 'kombi' ? KOMBI_STEPS : mode === 'paddle-direct' ? PADDLE_DIRECT_STEPS : OVERLAY_PIPELINE_STEPS
|
|
setSteps(baseSteps.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
setCurrentStep(0)
|
|
setSessionId(null)
|
|
setSubSessions([])
|
|
setParentSessionId(null)
|
|
loadSessions()
|
|
return
|
|
}
|
|
|
|
const nextStep = currentStep + 1
|
|
setSteps((prev) =>
|
|
prev.map((s, i) => {
|
|
if (i === currentStep) return { ...s, status: 'completed' }
|
|
if (i === nextStep) return { ...s, status: 'active' }
|
|
return s
|
|
}),
|
|
)
|
|
setCurrentStep(nextStep)
|
|
}
|
|
|
|
const handleOrientationComplete = async (sid: string) => {
|
|
setSessionId(sid)
|
|
loadSessions()
|
|
|
|
// Check for page-split sub-sessions directly from API
|
|
try {
|
|
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`)
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
if (data.sub_sessions?.length > 0) {
|
|
const subs: SubSession[] = data.sub_sessions.map((s: SubSession) => ({
|
|
id: s.id,
|
|
name: s.name,
|
|
box_index: s.box_index,
|
|
current_step: s.current_step,
|
|
}))
|
|
setSubSessions(subs)
|
|
setParentSessionId(sid)
|
|
openSession(subs[0].id, true)
|
|
return
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to check for sub-sessions:', e)
|
|
}
|
|
|
|
handleNext()
|
|
}
|
|
|
|
const handleBoxSessionsCreated = useCallback((subs: SubSession[]) => {
|
|
setSubSessions(subs)
|
|
if (sessionId) setParentSessionId(sessionId)
|
|
}, [sessionId])
|
|
|
|
const handleSessionChange = useCallback((newSessionId: string) => {
|
|
openSession(newSessionId, true)
|
|
}, [openSession])
|
|
|
|
const handleNewSession = () => {
|
|
setSessionId(null)
|
|
setSessionName('')
|
|
setCurrentStep(0)
|
|
setSubSessions([])
|
|
setParentSessionId(null)
|
|
const baseSteps = mode === 'kombi' ? KOMBI_STEPS : mode === 'paddle-direct' ? PADDLE_DIRECT_STEPS : OVERLAY_PIPELINE_STEPS
|
|
setSteps(baseSteps.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}
|
|
|
|
const stepNames: Record<number, string> = {
|
|
1: 'Orientierung',
|
|
2: 'Begradigung',
|
|
3: 'Entzerrung',
|
|
4: 'Zuschneiden',
|
|
5: 'Zeilen',
|
|
6: 'Woerter',
|
|
7: 'Overlay',
|
|
}
|
|
|
|
const reprocessFromStep = useCallback(async (uiStep: number) => {
|
|
if (!sessionId) return
|
|
// Map overlay UI step to DB step
|
|
const dbStepMap: Record<number, number> = { 0: 2, 1: 3, 2: 4, 3: 5, 4: 7, 5: 8, 6: 9 }
|
|
const dbStep = dbStepMap[uiStep] || uiStep + 1
|
|
if (!confirm(`Ab Schritt ${uiStep + 1} (${stepNames[uiStep + 1] || '?'}) neu verarbeiten?`)) return
|
|
try {
|
|
const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reprocess`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ from_step: dbStep }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}))
|
|
console.error('Reprocess failed:', data.detail || res.status)
|
|
return
|
|
}
|
|
goToStep(uiStep)
|
|
} catch (e) {
|
|
console.error('Reprocess error:', e)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [sessionId, goToStep])
|
|
|
|
const handleMarkGroundTruth = async () => {
|
|
if (!sessionId) return
|
|
setGtSaving(true)
|
|
setGtMessage('')
|
|
try {
|
|
// Auto-save grid editor before marking GT (so DB has latest edits)
|
|
if (gridSaveRef.current) {
|
|
await gridSaveRef.current()
|
|
}
|
|
const resp = await fetch(
|
|
`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/mark-ground-truth?pipeline=${mode}`,
|
|
{ method: 'POST' }
|
|
)
|
|
if (!resp.ok) {
|
|
const body = await resp.text().catch(() => '')
|
|
throw new Error(`Ground Truth fehlgeschlagen (${resp.status}): ${body}`)
|
|
}
|
|
const data = await resp.json()
|
|
setIsGroundTruth(true)
|
|
setGtMessage(`Ground Truth gespeichert (${data.cells_saved} Zellen)`)
|
|
setTimeout(() => setGtMessage(''), 5000)
|
|
} catch (e) {
|
|
setGtMessage(e instanceof Error ? e.message : String(e))
|
|
} finally {
|
|
setGtSaving(false)
|
|
}
|
|
}
|
|
|
|
const isLastStep = currentStep === steps.length - 1
|
|
const showGtButton = isLastStep && sessionId != null
|
|
|
|
const renderStep = () => {
|
|
if (mode === 'paddle-direct' || mode === 'kombi') {
|
|
switch (currentStep) {
|
|
case 0:
|
|
return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
|
|
case 1:
|
|
return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
|
|
case 2:
|
|
return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
|
|
case 3:
|
|
return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
|
|
case 4:
|
|
if (mode === 'kombi') {
|
|
return (
|
|
<PaddleDirectStep
|
|
sessionId={sessionId}
|
|
onNext={handleNext}
|
|
endpoint="paddle-kombi"
|
|
title="Kombi-Modus"
|
|
description="PP-OCRv5 und Tesseract laufen parallel. Koordinaten werden gewichtet gemittelt fuer optimale Positionierung."
|
|
icon="🔀"
|
|
buttonLabel="PP-OCRv5 + Tesseract starten"
|
|
runningLabel="PP-OCRv5 + Tesseract laufen..."
|
|
engineKey="kombi"
|
|
/>
|
|
)
|
|
}
|
|
return <PaddleDirectStep sessionId={sessionId} onNext={handleNext} />
|
|
case 5:
|
|
return mode === 'kombi' ? (
|
|
<StepStructureDetection sessionId={sessionId} onNext={handleNext} />
|
|
) : null
|
|
case 6:
|
|
return mode === 'kombi' ? (
|
|
<StepGridReview sessionId={sessionId} onNext={handleNext} saveRef={gridSaveRef} />
|
|
) : null
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
switch (currentStep) {
|
|
case 0:
|
|
return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
|
|
case 1:
|
|
return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
|
|
case 2:
|
|
return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
|
|
case 3:
|
|
return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
|
|
case 4:
|
|
return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
|
|
case 5:
|
|
return <StepWordRecognition sessionId={sessionId} onNext={handleNext} goToStep={goToStep} skipHealGaps />
|
|
case 6:
|
|
return <OverlayReconstruction sessionId={sessionId} onNext={handleNext} />
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PagePurpose
|
|
title="OCR Overlay"
|
|
purpose="Ganzseitige Overlay-Rekonstruktion: Scan begradigen, Zeilen und Woerter erkennen, dann pixelgenau ueber das Bild legen. Ohne Spaltenerkennung — ideal fuer Arbeitsblaetter."
|
|
audience={['Entwickler']}
|
|
architecture={{
|
|
services: ['klausur-service (FastAPI)', 'OpenCV', 'Tesseract'],
|
|
databases: ['PostgreSQL Sessions'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'OCR Pipeline', href: '/ai/ocr-pipeline', description: 'Volle Pipeline mit Spalten' },
|
|
{ name: 'OCR Vergleich', href: '/ai/ocr-compare', description: 'Methoden-Vergleich' },
|
|
]}
|
|
defaultCollapsed
|
|
/>
|
|
|
|
{/* Session List */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Sessions ({sessions.length})
|
|
</h3>
|
|
<button
|
|
onClick={handleNewSession}
|
|
className="text-xs px-3 py-1.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
|
|
>
|
|
+ Neue Session
|
|
</button>
|
|
</div>
|
|
|
|
{loadingSessions ? (
|
|
<div className="text-sm text-gray-400 py-2">Lade Sessions...</div>
|
|
) : sessions.length === 0 ? (
|
|
<div className="text-sm text-gray-400 py-2">Noch keine Sessions vorhanden.</div>
|
|
) : (
|
|
<div className="space-y-1.5 max-h-[320px] overflow-y-auto">
|
|
{sessions.map((s) => {
|
|
const catInfo = DOCUMENT_CATEGORIES.find(c => c.value === s.document_category)
|
|
return (
|
|
<div
|
|
key={s.id}
|
|
className={`relative flex items-start gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors cursor-pointer ${
|
|
sessionId === s.id
|
|
? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
|
|
: 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
|
|
}`}
|
|
>
|
|
{/* Thumbnail */}
|
|
<div
|
|
className="flex-shrink-0 w-12 h-12 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700"
|
|
onClick={() => openSession(s.id)}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${s.id}/thumbnail?size=96`}
|
|
alt=""
|
|
className="w-full h-full object-cover"
|
|
loading="lazy"
|
|
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 min-w-0" onClick={() => openSession(s.id)}>
|
|
{editingName === s.id ? (
|
|
<input
|
|
autoFocus
|
|
value={editNameValue}
|
|
onChange={(e) => setEditNameValue(e.target.value)}
|
|
onBlur={() => renameSession(s.id, editNameValue)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') renameSession(s.id, editNameValue)
|
|
if (e.key === 'Escape') setEditingName(null)
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="w-full px-1 py-0.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600"
|
|
/>
|
|
) : (
|
|
<div className="truncate font-medium text-gray-700 dark:text-gray-300">
|
|
{s.name || s.filename}
|
|
</div>
|
|
)}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
navigator.clipboard.writeText(s.id)
|
|
const btn = e.currentTarget
|
|
btn.textContent = 'Kopiert!'
|
|
setTimeout(() => { btn.textContent = `ID: ${s.id.slice(0, 8)}` }, 1500)
|
|
}}
|
|
className="text-[10px] font-mono text-gray-400 hover:text-teal-500 transition-colors"
|
|
title={`Volle ID: ${s.id} — Klick zum Kopieren`}
|
|
>
|
|
ID: {s.id.slice(0, 8)}
|
|
</button>
|
|
<div className="text-xs text-gray-400 flex gap-2 mt-0.5">
|
|
<span>{new Date(s.created_at).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Category Badge */}
|
|
<div className="flex flex-col gap-1 items-end flex-shrink-0" onClick={(e) => e.stopPropagation()}>
|
|
<button
|
|
onClick={() => setEditingCategory(editingCategory === s.id ? null : s.id)}
|
|
className={`text-[10px] px-1.5 py-0.5 rounded-full border transition-colors ${
|
|
catInfo
|
|
? 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300'
|
|
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
|
|
}`}
|
|
title="Kategorie setzen"
|
|
>
|
|
{catInfo ? `${catInfo.icon} ${catInfo.label}` : '+ Kategorie'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-col gap-0.5 flex-shrink-0">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setEditNameValue(s.name || s.filename)
|
|
setEditingName(s.id)
|
|
}}
|
|
className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
title="Umbenennen"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
if (confirm('Session loeschen?')) deleteSession(s.id)
|
|
}}
|
|
className="p-1 text-gray-400 hover:text-red-500"
|
|
title="Loeschen"
|
|
>
|
|
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Category dropdown */}
|
|
{editingCategory === s.id && (
|
|
<div
|
|
className="absolute right-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2 grid grid-cols-2 gap-1 w-64"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{DOCUMENT_CATEGORIES.map((cat) => (
|
|
<button
|
|
key={cat.value}
|
|
onClick={() => updateCategory(s.id, cat.value)}
|
|
className={`text-xs px-2 py-1.5 rounded-md text-left transition-colors ${
|
|
s.document_category === cat.value
|
|
? 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300'
|
|
: 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
|
|
}`}
|
|
>
|
|
{cat.icon} {cat.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Active session info + category picker */}
|
|
{sessionId && sessionName && (
|
|
<div className="relative flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
|
|
<span>Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span></span>
|
|
<button
|
|
onClick={() => setEditingActiveCategory(!editingActiveCategory)}
|
|
className={`text-xs px-2.5 py-1 rounded-full border transition-colors ${
|
|
activeCategory
|
|
? 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300 hover:bg-teal-100 dark:hover:bg-teal-900/50'
|
|
: 'bg-amber-50 dark:bg-amber-900/20 border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/40 animate-pulse'
|
|
}`}
|
|
>
|
|
{activeCategory ? (() => {
|
|
const cat = DOCUMENT_CATEGORIES.find(c => c.value === activeCategory)
|
|
return cat ? `${cat.icon} ${cat.label}` : activeCategory
|
|
})() : 'Kategorie setzen'}
|
|
</button>
|
|
{isGroundTruth && (
|
|
<span className="text-xs px-2 py-0.5 rounded-full bg-amber-50 dark:bg-amber-900/20 border border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-300">
|
|
GT
|
|
</span>
|
|
)}
|
|
{editingActiveCategory && (
|
|
<div className="absolute left-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2 grid grid-cols-2 gap-1 w-64">
|
|
{DOCUMENT_CATEGORIES.map((cat) => (
|
|
<button
|
|
key={cat.value}
|
|
onClick={() => {
|
|
updateCategory(sessionId, cat.value)
|
|
setEditingActiveCategory(false)
|
|
}}
|
|
className={`text-xs px-2 py-1.5 rounded-md text-left transition-colors ${
|
|
activeCategory === cat.value
|
|
? 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300'
|
|
: 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
|
|
}`}
|
|
>
|
|
{cat.icon} {cat.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Mode Toggle */}
|
|
<div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-1 w-fit">
|
|
<button
|
|
onClick={() => {
|
|
if (mode === 'pipeline') return
|
|
setMode('pipeline')
|
|
setCurrentStep(0)
|
|
setSessionId(null)
|
|
setSteps(OVERLAY_PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}}
|
|
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
|
mode === 'pipeline'
|
|
? 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-sm'
|
|
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
Pipeline (7 Schritte)
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
if (mode === 'paddle-direct') return
|
|
setMode('paddle-direct')
|
|
setCurrentStep(0)
|
|
setSessionId(null)
|
|
setSteps(PADDLE_DIRECT_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}}
|
|
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
|
mode === 'paddle-direct'
|
|
? 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-sm'
|
|
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
PP-OCRv5 Direct (5 Schritte)
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
if (mode === 'kombi') return
|
|
setMode('kombi')
|
|
setCurrentStep(0)
|
|
setSessionId(null)
|
|
setSteps(KOMBI_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}}
|
|
className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
|
|
mode === 'kombi'
|
|
? 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-sm'
|
|
: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
|
|
}`}
|
|
>
|
|
Kombi (7 Schritte)
|
|
</button>
|
|
</div>
|
|
|
|
<PipelineStepper
|
|
steps={steps}
|
|
currentStep={currentStep}
|
|
onStepClick={handleStepClick}
|
|
onReprocess={mode === 'pipeline' && sessionId != null ? reprocessFromStep : undefined}
|
|
/>
|
|
|
|
{subSessions.length > 0 && parentSessionId && sessionId && (
|
|
<BoxSessionTabs
|
|
parentSessionId={parentSessionId}
|
|
subSessions={subSessions}
|
|
activeSessionId={sessionId}
|
|
onSessionChange={handleSessionChange}
|
|
/>
|
|
)}
|
|
|
|
<div className="min-h-[400px]">{renderStep()}</div>
|
|
|
|
{/* Ground Truth button bar — visible on last step */}
|
|
{showGtButton && (
|
|
<div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t dark:border-gray-700 py-3 px-4 -mx-1 flex items-center justify-between rounded-b-xl">
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
|
{gtMessage && (
|
|
<span className={gtMessage.includes('fehlgeschlagen') ? 'text-red-500' : 'text-amber-600 dark:text-amber-400'}>
|
|
{gtMessage}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={handleMarkGroundTruth}
|
|
disabled={gtSaving}
|
|
className="px-4 py-2 text-sm bg-amber-600 text-white rounded hover:bg-amber-700 disabled:opacity-50"
|
|
>
|
|
{gtSaving ? 'Speichere...' : isGroundTruth ? 'Ground Truth aktualisieren' : 'Als Ground Truth markieren'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|