d26a9f60ab
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 29s
CI / test-go-edu-search (push) Successful in 28s
CI / test-python-klausur (push) Failing after 2m24s
CI / test-python-agent-core (push) Successful in 22s
CI / test-nodejs-website (push) Successful in 20s
Phase 1 of the clean architecture refactor: Replaces the 751-line ocr-overlay monolith with a modular pipeline. Each step gets its own component file. Frontend: /ai/ocr-kombi route with 11 steps (Upload, Orientation, PageSplit, Deskew, Dewarp, ContentCrop, OCR, Structure, GridBuild, GridReview, GroundTruth). Session list supports document grouping for multi-page uploads. Backend: New ocr_kombi/ module with multi-page PDF upload (splits PDF into N sessions with shared document_group_id). DB migration adds document_group_id and page_number columns. Old /ai/ocr-overlay remains fully functional for A/B testing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
60 lines
2.5 KiB
TypeScript
60 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import type { PipelineStep } from '@/app/(admin)/ai/ocr-pipeline/types'
|
|
|
|
interface KombiStepperProps {
|
|
steps: PipelineStep[]
|
|
currentStep: number
|
|
onStepClick: (index: number) => void
|
|
}
|
|
|
|
export function KombiStepper({ steps, currentStep, onStepClick }: KombiStepperProps) {
|
|
return (
|
|
<div className="flex items-center gap-0.5 px-3 py-2.5 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-x-auto">
|
|
{steps.map((step, index) => {
|
|
const isActive = index === currentStep
|
|
const isCompleted = step.status === 'completed'
|
|
const isFailed = step.status === 'failed'
|
|
const isSkipped = step.status === 'skipped'
|
|
const isClickable = (index <= currentStep || isCompleted) && !isSkipped
|
|
|
|
return (
|
|
<div key={step.id} className="flex items-center flex-shrink-0">
|
|
{index > 0 && (
|
|
<div
|
|
className={`h-0.5 w-4 mx-0.5 ${
|
|
isSkipped
|
|
? 'bg-gray-200 dark:bg-gray-700 border-t border-dashed border-gray-400'
|
|
: index <= currentStep ? 'bg-teal-400' : 'bg-gray-300 dark:bg-gray-600'
|
|
}`}
|
|
/>
|
|
)}
|
|
<button
|
|
onClick={() => isClickable && onStepClick(index)}
|
|
disabled={!isClickable}
|
|
className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-all whitespace-nowrap ${
|
|
isSkipped
|
|
? 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-600 line-through'
|
|
: isActive
|
|
? 'bg-teal-100 text-teal-700 dark:bg-teal-900/40 dark:text-teal-300 ring-2 ring-teal-400'
|
|
: isCompleted
|
|
? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
|
|
: isFailed
|
|
? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
|
|
: 'text-gray-400 dark:text-gray-500'
|
|
} ${isClickable ? 'cursor-pointer hover:opacity-80' : 'cursor-default'}`}
|
|
title={step.name}
|
|
>
|
|
<span className="text-sm">
|
|
{isSkipped ? '-' : isCompleted ? '\u2713' : isFailed ? '\u2717' : step.icon}
|
|
</span>
|
|
<span className="hidden lg:inline">{step.name}</span>
|
|
<span className="lg:hidden">{index + 1}</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|