feat: add preprocessing UI components and integration

Frontend implementation for add-layout-preprocessing proposal:
- Add PreprocessingSettings component with mode selection (auto/manual/disabled)
- Add manual config panel (contrast, sharpen, binarize options)
- Add zh-TW translations for preprocessing UI
- Integrate with ProcessingPage task start flow
- Add preprocessing types to apiV2.ts (PreprocessingMode, PreprocessingConfig)
- Pass preprocessing options to task start API

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
egg
2025-11-27 15:21:58 +08:00
parent ea0dd7456c
commit 01d56f84cd
4 changed files with 310 additions and 8 deletions

View File

@@ -10,9 +10,10 @@ import { useToast } from '@/components/ui/toast'
import { apiClientV2 } from '@/services/apiV2'
import { Play, CheckCircle, FileText, AlertCircle, Clock, Activity, Loader2 } from 'lucide-react'
import LayoutModelSelector from '@/components/LayoutModelSelector'
import PreprocessingSettings from '@/components/PreprocessingSettings'
import TaskNotFound from '@/components/TaskNotFound'
import { useTaskValidation } from '@/hooks/useTaskValidation'
import type { LayoutModel, ProcessingOptions } from '@/types/apiV2'
import type { LayoutModel, ProcessingOptions, PreprocessingMode, PreprocessingConfig } from '@/types/apiV2'
export default function ProcessingPage() {
const { t } = useTranslation()
@@ -34,6 +35,14 @@ export default function ProcessingPage() {
// Layout model state (default to 'chinese' for best Chinese document support)
const [layoutModel, setLayoutModel] = useState<LayoutModel>('chinese')
// Preprocessing state
const [preprocessingMode, setPreprocessingMode] = useState<PreprocessingMode>('auto')
const [preprocessingConfig, setPreprocessingConfig] = useState<PreprocessingConfig>({
contrast: 'clahe',
sharpen: true,
binarize: false,
})
// Start OCR processing
const processOCRMutation = useMutation({
mutationFn: () => {
@@ -41,6 +50,8 @@ export default function ProcessingPage() {
use_dual_track: true,
language: 'ch',
layout_model: layoutModel,
preprocessing_mode: preprocessingMode,
preprocessing_config: preprocessingMode === 'manual' ? preprocessingConfig : undefined,
}
return apiClientV2.startTask(taskId!, options)
@@ -342,13 +353,25 @@ export default function ProcessingPage() {
</Card>
)}
{/* Layout Model Selection (only show when task is pending) */}
{/* Processing Options (only show when task is pending) */}
{isPending && (
<LayoutModelSelector
value={layoutModel}
onChange={setLayoutModel}
disabled={processOCRMutation.isPending}
/>
<div className="space-y-6">
{/* Layout Model Selection */}
<LayoutModelSelector
value={layoutModel}
onChange={setLayoutModel}
disabled={processOCRMutation.isPending}
/>
{/* Preprocessing Settings */}
<PreprocessingSettings
mode={preprocessingMode}
config={preprocessingConfig}
onModeChange={setPreprocessingMode}
onConfigChange={setPreprocessingConfig}
disabled={processOCRMutation.isPending}
/>
</div>
)}
</div>
)