954103cdf2
Backend: build_word_grid() intersects column regions with content rows, OCRs each cell with language-specific Tesseract, and returns vocabulary entries with percent-based bounding boxes. New endpoints: POST /words, GET /image/words-overlay, ground-truth save/retrieve for words. Frontend: StepWordRecognition with overview + step-through labeling modes, goToStep callback for row correction feedback loop. MkDocs: OCR Pipeline documentation added. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
300 lines
11 KiB
TypeScript
300 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
|
|
import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
|
|
import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
|
|
import { StepColumnDetection } from '@/components/ocr-pipeline/StepColumnDetection'
|
|
import { StepRowDetection } from '@/components/ocr-pipeline/StepRowDetection'
|
|
import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecognition'
|
|
import { StepCoordinates } from '@/components/ocr-pipeline/StepCoordinates'
|
|
import { StepReconstruction } from '@/components/ocr-pipeline/StepReconstruction'
|
|
import { StepGroundTruth } from '@/components/ocr-pipeline/StepGroundTruth'
|
|
import { PIPELINE_STEPS, type PipelineStep, type SessionListItem } from './types'
|
|
|
|
const KLAUSUR_API = '/klausur-api'
|
|
|
|
export default function OcrPipelinePage() {
|
|
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 [steps, setSteps] = useState<PipelineStep[]>(
|
|
PIPELINE_STEPS.map((s, i) => ({
|
|
...s,
|
|
status: i === 0 ? 'active' : 'pending',
|
|
})),
|
|
)
|
|
|
|
// Load session list on mount
|
|
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()
|
|
setSessions(data.sessions || [])
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load sessions:', e)
|
|
} finally {
|
|
setLoadingSessions(false)
|
|
}
|
|
}
|
|
|
|
const openSession = useCallback(async (sid: string) => {
|
|
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 || '')
|
|
|
|
// Determine which step to jump to based on current_step
|
|
const dbStep = data.current_step || 1
|
|
// Steps: 1=deskew, 2=dewarp, 3=columns, ...
|
|
// UI steps are 0-indexed: 0=deskew, 1=dewarp, 2=columns, ...
|
|
const uiStep = Math.max(0, dbStep - 1)
|
|
|
|
setSteps(
|
|
PIPELINE_STEPS.map((s, i) => ({
|
|
...s,
|
|
status: i < uiStep ? 'completed' : i === uiStep ? 'active' : 'pending',
|
|
})),
|
|
)
|
|
setCurrentStep(uiStep)
|
|
} catch (e) {
|
|
console.error('Failed to open session:', e)
|
|
}
|
|
}, [])
|
|
|
|
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)
|
|
setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to delete session:', e)
|
|
}
|
|
}, [sessionId])
|
|
|
|
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 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) {
|
|
setSteps((prev) =>
|
|
prev.map((s, i) => {
|
|
if (i === currentStep) return { ...s, status: 'completed' }
|
|
if (i === currentStep + 1) return { ...s, status: 'active' }
|
|
return s
|
|
}),
|
|
)
|
|
setCurrentStep((prev) => prev + 1)
|
|
}
|
|
}
|
|
|
|
const handleDeskewComplete = (sid: string) => {
|
|
setSessionId(sid)
|
|
// Reload session list to show the new session
|
|
loadSessions()
|
|
handleNext()
|
|
}
|
|
|
|
const handleNewSession = () => {
|
|
setSessionId(null)
|
|
setSessionName('')
|
|
setCurrentStep(0)
|
|
setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
|
|
}
|
|
|
|
const stepNames: Record<number, string> = {
|
|
1: 'Begradigung',
|
|
2: 'Entzerrung',
|
|
3: 'Spalten',
|
|
4: 'Zeilen',
|
|
5: 'Woerter',
|
|
6: 'Koordinaten',
|
|
7: 'Rekonstruktion',
|
|
8: 'Validierung',
|
|
}
|
|
|
|
const renderStep = () => {
|
|
switch (currentStep) {
|
|
case 0:
|
|
return <StepDeskew sessionId={sessionId} onNext={handleDeskewComplete} />
|
|
case 1:
|
|
return <StepDewarp sessionId={sessionId} onNext={handleNext} />
|
|
case 2:
|
|
return <StepColumnDetection sessionId={sessionId} onNext={handleNext} />
|
|
case 3:
|
|
return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
|
|
case 4:
|
|
return <StepWordRecognition sessionId={sessionId} onNext={handleNext} goToStep={goToStep} />
|
|
case 5:
|
|
return <StepCoordinates />
|
|
case 6:
|
|
return <StepReconstruction />
|
|
case 7:
|
|
return <StepGroundTruth />
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PagePurpose
|
|
title="OCR Pipeline"
|
|
purpose="Schrittweise Seitenrekonstruktion: Scan begradigen, Spalten erkennen, Woerter lokalisieren und die Seite Wort fuer Wort nachbauen. Ziel: 10 Vokabelseiten fehlerfrei rekonstruieren."
|
|
audience={['Entwickler', 'Data Scientists']}
|
|
architecture={{
|
|
services: ['klausur-service (FastAPI)', 'OpenCV', 'Tesseract'],
|
|
databases: ['PostgreSQL Sessions'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'OCR Vergleich', href: '/ai/ocr-compare', description: 'Methoden-Vergleich' },
|
|
{ name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Trainingsdaten' },
|
|
]}
|
|
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
|
|
</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 max-h-48 overflow-y-auto">
|
|
{sessions.map((s) => (
|
|
<div
|
|
key={s.id}
|
|
className={`flex items-center gap-2 px-3 py-2 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'
|
|
}`}
|
|
>
|
|
<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>
|
|
)}
|
|
<div className="text-xs text-gray-400 flex gap-2">
|
|
<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>
|
|
<span>Schritt {s.current_step}: {stepNames[s.current_step] || '?'}</span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Active session name */}
|
|
{sessionId && sessionName && (
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
|
Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span>
|
|
</div>
|
|
)}
|
|
|
|
<PipelineStepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
|
|
|
|
<div className="min-h-[400px]">{renderStep()}</div>
|
|
</div>
|
|
)
|
|
}
|