dea3349b23
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 26s
CI / test-go-edu-search (push) Successful in 26s
CI / test-python-klausur (push) Failing after 1m51s
CI / test-python-agent-core (push) Successful in 16s
CI / test-nodejs-website (push) Successful in 16s
Three fixes for sub-columns disappearing at end of streaming: 1. Backend: add column_marker mapping in _cells_to_vocab_entries() so marker text is included in vocab entries (not silently dropped) 2. Frontend types: add source_page and bbox_ref to WordEntry interface 3. Frontend table: show page_ref column (Seite) in vocab table when entries have source_page data, instead of only EN/DE/Example Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1081 lines
46 KiB
TypeScript
1081 lines
46 KiB
TypeScript
'use client'
|
||
|
||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||
import type { GridResult, GridCell, WordEntry, WordGroundTruth } from '@/app/(admin)/ai/ocr-pipeline/types'
|
||
|
||
const KLAUSUR_API = '/klausur-api'
|
||
|
||
/** Render text with \n as line breaks */
|
||
function MultilineText({ text }: { text: string }) {
|
||
if (!text) return <span className="text-gray-300 dark:text-gray-600">—</span>
|
||
const lines = text.split('\n')
|
||
if (lines.length === 1) return <>{text}</>
|
||
return <>{lines.map((line, i) => (
|
||
<span key={i}>{line}{i < lines.length - 1 && <br />}</span>
|
||
))}</>
|
||
}
|
||
|
||
/** Column type → human-readable header */
|
||
function colTypeLabel(colType: string): string {
|
||
const labels: Record<string, string> = {
|
||
column_en: 'English',
|
||
column_de: 'Deutsch',
|
||
column_example: 'Example',
|
||
column_text: 'Text',
|
||
column_marker: 'Marker',
|
||
page_ref: 'Seite',
|
||
}
|
||
return labels[colType] || colType.replace('column_', '')
|
||
}
|
||
|
||
/** Column type → color class */
|
||
function colTypeColor(colType: string): string {
|
||
const colors: Record<string, string> = {
|
||
column_en: 'text-blue-600 dark:text-blue-400',
|
||
column_de: 'text-green-600 dark:text-green-400',
|
||
column_example: 'text-orange-600 dark:text-orange-400',
|
||
column_text: 'text-purple-600 dark:text-purple-400',
|
||
column_marker: 'text-gray-500 dark:text-gray-400',
|
||
}
|
||
return colors[colType] || 'text-gray-600 dark:text-gray-400'
|
||
}
|
||
|
||
interface StepWordRecognitionProps {
|
||
sessionId: string | null
|
||
onNext: () => void
|
||
goToStep: (step: number) => void
|
||
}
|
||
|
||
export function StepWordRecognition({ sessionId, onNext, goToStep }: StepWordRecognitionProps) {
|
||
const [gridResult, setGridResult] = useState<GridResult | null>(null)
|
||
const [detecting, setDetecting] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [gtNotes, setGtNotes] = useState('')
|
||
const [gtSaved, setGtSaved] = useState(false)
|
||
|
||
// Step-through labeling state
|
||
const [activeIndex, setActiveIndex] = useState(0)
|
||
const [editedEntries, setEditedEntries] = useState<WordEntry[]>([])
|
||
const [editedCells, setEditedCells] = useState<GridCell[]>([])
|
||
const [mode, setMode] = useState<'overview' | 'labeling'>('overview')
|
||
const [ocrEngine, setOcrEngine] = useState<'auto' | 'tesseract' | 'rapid'>('auto')
|
||
const [usedEngine, setUsedEngine] = useState<string>('')
|
||
const [pronunciation, setPronunciation] = useState<'british' | 'american'>('british')
|
||
|
||
// Streaming progress state
|
||
const [streamProgress, setStreamProgress] = useState<{ current: number; total: number } | null>(null)
|
||
|
||
const enRef = useRef<HTMLInputElement>(null)
|
||
const tableEndRef = useRef<HTMLDivElement>(null)
|
||
|
||
const isVocab = gridResult?.layout === 'vocab'
|
||
|
||
useEffect(() => {
|
||
if (!sessionId) return
|
||
// Always run fresh detection — word-lookup is fast (~0.03s)
|
||
// and avoids stale cached results from previous pipeline versions.
|
||
runAutoDetection()
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [sessionId])
|
||
|
||
const applyGridResult = (data: GridResult) => {
|
||
setGridResult(data)
|
||
setUsedEngine(data.ocr_engine || '')
|
||
if (data.layout === 'vocab' && data.entries) {
|
||
initEntries(data.entries)
|
||
}
|
||
if (data.cells) {
|
||
setEditedCells(data.cells.map(c => ({ ...c, status: c.status || 'pending' })))
|
||
}
|
||
}
|
||
|
||
const initEntries = (entries: WordEntry[]) => {
|
||
setEditedEntries(entries.map(e => ({ ...e, status: e.status || 'pending' })))
|
||
setActiveIndex(0)
|
||
}
|
||
|
||
const runAutoDetection = useCallback(async (engine?: string) => {
|
||
if (!sessionId) return
|
||
const eng = engine || ocrEngine
|
||
setDetecting(true)
|
||
setError(null)
|
||
setStreamProgress(null)
|
||
setEditedCells([])
|
||
setEditedEntries([])
|
||
setGridResult(null)
|
||
|
||
try {
|
||
const res = await fetch(
|
||
`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/words?stream=true&engine=${eng}&pronunciation=${pronunciation}`,
|
||
{ method: 'POST' },
|
||
)
|
||
if (!res.ok) {
|
||
const err = await res.json().catch(() => ({ detail: res.statusText }))
|
||
throw new Error(err.detail || 'Worterkennung fehlgeschlagen')
|
||
}
|
||
|
||
const reader = res.body!.getReader()
|
||
const decoder = new TextDecoder()
|
||
let buffer = ''
|
||
let streamLayout: string | null = null
|
||
let streamColumnsUsed: GridResult['columns_used'] = []
|
||
let streamGridShape: GridResult['grid_shape'] | null = null
|
||
let streamCells: GridCell[] = []
|
||
|
||
while (true) {
|
||
const { done, value } = await reader.read()
|
||
if (done) break
|
||
buffer += decoder.decode(value, { stream: true })
|
||
|
||
// Parse SSE events (separated by \n\n)
|
||
while (buffer.includes('\n\n')) {
|
||
const idx = buffer.indexOf('\n\n')
|
||
const chunk = buffer.slice(0, idx).trim()
|
||
buffer = buffer.slice(idx + 2)
|
||
|
||
if (!chunk.startsWith('data: ')) continue
|
||
const dataStr = chunk.slice(6) // strip "data: "
|
||
|
||
let event: any
|
||
try {
|
||
event = JSON.parse(dataStr)
|
||
} catch {
|
||
continue
|
||
}
|
||
|
||
if (event.type === 'meta') {
|
||
streamLayout = event.layout || 'generic'
|
||
streamGridShape = event.grid_shape || null
|
||
// Show partial grid result so UI renders structure
|
||
setGridResult(prev => ({
|
||
...prev,
|
||
layout: event.layout || 'generic',
|
||
grid_shape: event.grid_shape,
|
||
columns_used: [],
|
||
cells: [],
|
||
summary: { total_cells: event.grid_shape?.total_cells || 0, non_empty_cells: 0, low_confidence: 0 },
|
||
duration_seconds: 0,
|
||
ocr_engine: '',
|
||
} as GridResult))
|
||
}
|
||
|
||
if (event.type === 'columns') {
|
||
streamColumnsUsed = event.columns_used || []
|
||
setGridResult(prev => prev ? { ...prev, columns_used: streamColumnsUsed } : prev)
|
||
}
|
||
|
||
if (event.type === 'cell') {
|
||
const cell: GridCell = { ...event.cell, status: 'pending' }
|
||
streamCells = [...streamCells, cell]
|
||
setEditedCells(streamCells)
|
||
setStreamProgress(event.progress)
|
||
// Auto-scroll table to bottom
|
||
setTimeout(() => tableEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 16)
|
||
}
|
||
|
||
if (event.type === 'complete') {
|
||
// Build final GridResult
|
||
const finalResult: GridResult = {
|
||
cells: streamCells,
|
||
grid_shape: streamGridShape || { rows: 0, cols: 0, total_cells: streamCells.length },
|
||
columns_used: streamColumnsUsed,
|
||
layout: streamLayout || 'generic',
|
||
image_width: 0,
|
||
image_height: 0,
|
||
duration_seconds: event.duration_seconds || 0,
|
||
ocr_engine: event.ocr_engine || '',
|
||
summary: event.summary || {},
|
||
}
|
||
|
||
// If vocab: apply post-processed entries from complete event
|
||
if (event.vocab_entries) {
|
||
finalResult.entries = event.vocab_entries
|
||
finalResult.vocab_entries = event.vocab_entries
|
||
finalResult.entry_count = event.vocab_entries.length
|
||
}
|
||
|
||
applyGridResult(finalResult)
|
||
setUsedEngine(event.ocr_engine || '')
|
||
setStreamProgress(null)
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
||
} finally {
|
||
setDetecting(false)
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [sessionId, ocrEngine, pronunciation])
|
||
|
||
const handleGroundTruth = useCallback(async (isCorrect: boolean) => {
|
||
if (!sessionId) return
|
||
const gt: WordGroundTruth = {
|
||
is_correct: isCorrect,
|
||
corrected_entries: isCorrect ? undefined : (isVocab ? editedEntries : undefined),
|
||
notes: gtNotes || undefined,
|
||
}
|
||
try {
|
||
await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/words`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(gt),
|
||
})
|
||
setGtSaved(true)
|
||
} catch (e) {
|
||
console.error('Ground truth save failed:', e)
|
||
}
|
||
}, [sessionId, gtNotes, editedEntries, isVocab])
|
||
|
||
// Vocab mode: update entry field
|
||
const updateEntry = (index: number, field: 'english' | 'german' | 'example', value: string) => {
|
||
setEditedEntries(prev => prev.map((e, i) =>
|
||
i === index ? { ...e, [field]: value, status: 'edited' as const } : e
|
||
))
|
||
}
|
||
|
||
// Generic mode: update cell text
|
||
const updateCell = (cellId: string, value: string) => {
|
||
setEditedCells(prev => prev.map(c =>
|
||
c.cell_id === cellId ? { ...c, text: value, status: 'edited' as const } : c
|
||
))
|
||
}
|
||
|
||
// Step-through: confirm current entry
|
||
const confirmEntry = () => {
|
||
if (isVocab) {
|
||
setEditedEntries(prev => prev.map((e, i) =>
|
||
i === activeIndex ? { ...e, status: e.status === 'edited' ? 'edited' : 'confirmed' } : e
|
||
))
|
||
} else {
|
||
// Generic: confirm all cells in this row
|
||
const rowCells = getRowCells(activeIndex)
|
||
const cellIds = new Set(rowCells.map(c => c.cell_id))
|
||
setEditedCells(prev => prev.map(c =>
|
||
cellIds.has(c.cell_id) ? { ...c, status: c.status === 'edited' ? 'edited' : 'confirmed' } : c
|
||
))
|
||
}
|
||
const maxIdx = isVocab ? editedEntries.length - 1 : getUniqueRowCount() - 1
|
||
if (activeIndex < maxIdx) {
|
||
setActiveIndex(activeIndex + 1)
|
||
}
|
||
}
|
||
|
||
// Step-through: skip current entry
|
||
const skipEntry = () => {
|
||
if (isVocab) {
|
||
setEditedEntries(prev => prev.map((e, i) =>
|
||
i === activeIndex ? { ...e, status: 'skipped' as const } : e
|
||
))
|
||
}
|
||
const maxIdx = isVocab ? editedEntries.length - 1 : getUniqueRowCount() - 1
|
||
if (activeIndex < maxIdx) {
|
||
setActiveIndex(activeIndex + 1)
|
||
}
|
||
}
|
||
|
||
// Helper: get unique row indices from cells
|
||
const getUniqueRowCount = () => {
|
||
if (!editedCells.length) return 0
|
||
return new Set(editedCells.map(c => c.row_index)).size
|
||
}
|
||
|
||
// Helper: get cells for a given row index (by position in sorted unique rows)
|
||
const getRowCells = (rowPosition: number) => {
|
||
const uniqueRows = [...new Set(editedCells.map(c => c.row_index))].sort((a, b) => a - b)
|
||
const rowIdx = uniqueRows[rowPosition]
|
||
return editedCells.filter(c => c.row_index === rowIdx)
|
||
}
|
||
|
||
// Focus english input when active entry changes in labeling mode
|
||
useEffect(() => {
|
||
if (mode === 'labeling' && enRef.current) {
|
||
enRef.current.focus()
|
||
}
|
||
}, [activeIndex, mode])
|
||
|
||
// Keyboard shortcuts in labeling mode
|
||
useEffect(() => {
|
||
if (mode !== 'labeling') return
|
||
const handler = (e: KeyboardEvent) => {
|
||
if (e.key === 'Enter' && !e.shiftKey) {
|
||
e.preventDefault()
|
||
confirmEntry()
|
||
} else if (e.key === 'ArrowDown' && e.ctrlKey) {
|
||
e.preventDefault()
|
||
skipEntry()
|
||
} else if (e.key === 'ArrowUp' && e.ctrlKey) {
|
||
e.preventDefault()
|
||
if (activeIndex > 0) setActiveIndex(activeIndex - 1)
|
||
}
|
||
}
|
||
window.addEventListener('keydown', handler)
|
||
return () => window.removeEventListener('keydown', handler)
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [mode, activeIndex, editedEntries, editedCells])
|
||
|
||
if (!sessionId) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-16 text-center">
|
||
<div className="text-5xl mb-4">🔤</div>
|
||
<h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||
Schritt 5: Worterkennung
|
||
</h3>
|
||
<p className="text-gray-500 dark:text-gray-400 max-w-md">
|
||
Bitte zuerst Schritte 1-4 abschliessen.
|
||
</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`
|
||
const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
|
||
|
||
const confColor = (conf: number) => {
|
||
if (conf >= 70) return 'text-green-600 dark:text-green-400'
|
||
if (conf >= 50) return 'text-yellow-600 dark:text-yellow-400'
|
||
return 'text-red-600 dark:text-red-400'
|
||
}
|
||
|
||
const statusBadge = (status?: string) => {
|
||
const map: Record<string, string> = {
|
||
pending: 'bg-gray-100 dark:bg-gray-700 text-gray-500',
|
||
confirmed: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
|
||
edited: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
|
||
skipped: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400',
|
||
}
|
||
return map[status || 'pending'] || map.pending
|
||
}
|
||
|
||
const summary = gridResult?.summary
|
||
const columnsUsed = gridResult?.columns_used || []
|
||
const gridShape = gridResult?.grid_shape
|
||
|
||
// Counts for labeling progress
|
||
const confirmedCount = isVocab
|
||
? editedEntries.filter(e => e.status === 'confirmed' || e.status === 'edited').length
|
||
: editedCells.filter(c => c.status === 'confirmed' || c.status === 'edited').length
|
||
const totalCount = isVocab ? editedEntries.length : getUniqueRowCount()
|
||
|
||
// Group cells by row for generic table display
|
||
const cellsByRow: Map<number, GridCell[]> = new Map()
|
||
for (const cell of editedCells) {
|
||
const existing = cellsByRow.get(cell.row_index) || []
|
||
existing.push(cell)
|
||
cellsByRow.set(cell.row_index, existing)
|
||
}
|
||
const sortedRowIndices = [...cellsByRow.keys()].sort((a, b) => a - b)
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Loading with streaming progress */}
|
||
{detecting && (
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-2 text-teal-600 dark:text-teal-400 text-sm">
|
||
<div className="animate-spin w-4 h-4 border-2 border-teal-500 border-t-transparent rounded-full" />
|
||
{streamProgress
|
||
? `Zelle ${streamProgress.current}/${streamProgress.total} erkannt...`
|
||
: 'Worterkennung startet...'}
|
||
</div>
|
||
{streamProgress && streamProgress.total > 0 && (
|
||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
|
||
<div
|
||
className="bg-teal-500 h-1.5 rounded-full transition-all duration-150"
|
||
style={{ width: `${(streamProgress.current / streamProgress.total) * 100}%` }}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Layout badge + Mode toggle */}
|
||
{gridResult && (
|
||
<div className="flex items-center gap-2">
|
||
{/* Layout badge */}
|
||
<span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${
|
||
isVocab
|
||
? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
|
||
}`}>
|
||
{isVocab ? 'Vokabel-Layout' : 'Generisch'}
|
||
</span>
|
||
|
||
{gridShape && (
|
||
<span className="text-[10px] text-gray-400">
|
||
{gridShape.rows}×{gridShape.cols} = {gridShape.total_cells} Zellen
|
||
</span>
|
||
)}
|
||
|
||
<div className="flex-1" />
|
||
|
||
<button
|
||
onClick={() => setMode('overview')}
|
||
className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-colors ${
|
||
mode === 'overview'
|
||
? 'bg-teal-600 text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
Uebersicht
|
||
</button>
|
||
<button
|
||
onClick={() => setMode('labeling')}
|
||
className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-colors ${
|
||
mode === 'labeling'
|
||
? 'bg-teal-600 text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
Labeling ({confirmedCount}/{totalCount})
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Overview mode */}
|
||
{mode === 'overview' && (
|
||
<>
|
||
{/* Images: overlay vs clean */}
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||
Mit Grid-Overlay
|
||
</div>
|
||
<div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
||
{gridResult ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={`${overlayUrl}?t=${Date.now()}`}
|
||
alt="Wort-Overlay"
|
||
className="w-full h-auto"
|
||
/>
|
||
) : (
|
||
<div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
|
||
{detecting ? 'Erkenne Woerter...' : 'Keine Daten'}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||
Entzerrtes Bild
|
||
</div>
|
||
<div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={dewarpedUrl}
|
||
alt="Entzerrt"
|
||
className="w-full h-auto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Result summary (only after streaming completes) */}
|
||
{gridResult && summary && !detecting && (
|
||
<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="flex items-center justify-between">
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
{isVocab
|
||
? `Ergebnis: ${summary.total_entries ?? 0} Vokabel-Eintraege erkannt`
|
||
: `Ergebnis: ${summary.non_empty_cells}/${summary.total_cells} Zellen mit Text`
|
||
}
|
||
</h4>
|
||
<span className="text-xs text-gray-400">
|
||
{gridResult.duration_seconds}s
|
||
</span>
|
||
</div>
|
||
|
||
{/* Summary badges */}
|
||
<div className="flex gap-2 flex-wrap">
|
||
{isVocab ? (
|
||
<>
|
||
<span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
|
||
EN: {summary.with_english ?? 0}
|
||
</span>
|
||
<span className="px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300">
|
||
DE: {summary.with_german ?? 0}
|
||
</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
|
||
Zellen: {summary.non_empty_cells}/{summary.total_cells}
|
||
</span>
|
||
{columnsUsed.map((col, i) => (
|
||
<span key={i} className={`px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 ${colTypeColor(col.type)}`}>
|
||
C{col.index}: {colTypeLabel(col.type)}
|
||
</span>
|
||
))}
|
||
</>
|
||
)}
|
||
{summary.low_confidence > 0 && (
|
||
<span className="px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
|
||
Unsicher: {summary.low_confidence}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Entry/Cell table */}
|
||
<div className="max-h-80 overflow-y-auto">
|
||
{isVocab ? (
|
||
/* Vocab table: EN/DE/Example columns + optional page_ref */
|
||
(() => {
|
||
const hasPageRef = editedEntries.some(e => e.source_page)
|
||
return (
|
||
<table className="w-full text-xs">
|
||
<thead className="sticky top-0 bg-white dark:bg-gray-800">
|
||
<tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
|
||
<th className="py-1 pr-2 w-8">#</th>
|
||
{hasPageRef && <th className="py-1 pr-2 w-12 text-gray-400">Seite</th>}
|
||
<th className="py-1 pr-2">English</th>
|
||
<th className="py-1 pr-2">Deutsch</th>
|
||
<th className="py-1 pr-2">Example</th>
|
||
<th className="py-1 w-12 text-right">Conf</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{editedEntries.map((entry, idx) => (
|
||
<tr
|
||
key={idx}
|
||
className={`border-b dark:border-gray-700/50 ${
|
||
idx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
|
||
}`}
|
||
onClick={() => { setActiveIndex(idx); setMode('labeling') }}
|
||
>
|
||
<td className="py-1 pr-2 text-gray-400">{idx + 1}</td>
|
||
{hasPageRef && (
|
||
<td className="py-1 pr-2 font-mono text-gray-400 dark:text-gray-500">
|
||
{entry.source_page || ''}
|
||
</td>
|
||
)}
|
||
<td className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
|
||
<MultilineText text={entry.english} />
|
||
</td>
|
||
<td className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
|
||
<MultilineText text={entry.german} />
|
||
</td>
|
||
<td className="py-1 pr-2 font-mono text-gray-500 dark:text-gray-400 cursor-pointer max-w-[200px]">
|
||
<MultilineText text={entry.example} />
|
||
</td>
|
||
<td className={`py-1 text-right font-mono ${confColor(entry.confidence)}`}>
|
||
{entry.confidence}%
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)
|
||
})()
|
||
) : (
|
||
/* Generic table: dynamic columns from columns_used */
|
||
<table className="w-full text-xs">
|
||
<thead className="sticky top-0 bg-white dark:bg-gray-800">
|
||
<tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
|
||
<th className="py-1 pr-2 w-12">Zeile</th>
|
||
{columnsUsed.map((col, i) => (
|
||
<th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
|
||
{colTypeLabel(col.type)}
|
||
</th>
|
||
))}
|
||
<th className="py-1 w-12 text-right">Conf</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{sortedRowIndices.map((rowIdx, posIdx) => {
|
||
const rowCells = cellsByRow.get(rowIdx) || []
|
||
const avgConf = rowCells.length
|
||
? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
|
||
: 0
|
||
return (
|
||
<tr
|
||
key={rowIdx}
|
||
className={`border-b dark:border-gray-700/50 ${
|
||
posIdx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
|
||
}`}
|
||
onClick={() => { setActiveIndex(posIdx); setMode('labeling') }}
|
||
>
|
||
<td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
|
||
R{String(rowIdx).padStart(2, '0')}
|
||
</td>
|
||
{columnsUsed.map((col) => {
|
||
const cell = rowCells.find(c => c.col_index === col.index)
|
||
return (
|
||
<td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
|
||
<MultilineText text={cell?.text || ''} />
|
||
</td>
|
||
)
|
||
})}
|
||
<td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
|
||
{avgConf}%
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
<div ref={tableEndRef} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Streaming cell table (shown while detecting, before complete) */}
|
||
{detecting && editedCells.length > 0 && !gridResult?.summary?.non_empty_cells && (
|
||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
|
||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||
Live: {editedCells.length} Zellen erkannt...
|
||
</h4>
|
||
<div className="max-h-80 overflow-y-auto">
|
||
<table className="w-full text-xs">
|
||
<thead className="sticky top-0 bg-white dark:bg-gray-800">
|
||
<tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
|
||
<th className="py-1 pr-2 w-12">Zelle</th>
|
||
{columnsUsed.map((col, i) => (
|
||
<th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
|
||
{colTypeLabel(col.type)}
|
||
</th>
|
||
))}
|
||
<th className="py-1 w-12 text-right">Conf</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{(() => {
|
||
const liveByRow: Map<number, GridCell[]> = new Map()
|
||
for (const cell of editedCells) {
|
||
const existing = liveByRow.get(cell.row_index) || []
|
||
existing.push(cell)
|
||
liveByRow.set(cell.row_index, existing)
|
||
}
|
||
const liveSorted = [...liveByRow.keys()].sort((a, b) => a - b)
|
||
return liveSorted.map(rowIdx => {
|
||
const rowCells = liveByRow.get(rowIdx) || []
|
||
const avgConf = rowCells.length
|
||
? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
|
||
: 0
|
||
return (
|
||
<tr key={rowIdx} className="border-b dark:border-gray-700/50 animate-fade-in">
|
||
<td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
|
||
R{String(rowIdx).padStart(2, '0')}
|
||
</td>
|
||
{columnsUsed.map((col) => {
|
||
const cell = rowCells.find(c => c.col_index === col.index)
|
||
return (
|
||
<td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300">
|
||
<MultilineText text={cell?.text || ''} />
|
||
</td>
|
||
)
|
||
})}
|
||
<td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
|
||
{avgConf}%
|
||
</td>
|
||
</tr>
|
||
)
|
||
})
|
||
})()}
|
||
</tbody>
|
||
</table>
|
||
<div ref={tableEndRef} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Labeling mode */}
|
||
{mode === 'labeling' && (isVocab ? editedEntries.length > 0 : editedCells.length > 0) && (
|
||
<div className="grid grid-cols-3 gap-4">
|
||
{/* Left 2/3: Image with highlighted active row */}
|
||
<div className="col-span-2">
|
||
<div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||
{isVocab
|
||
? `Eintrag ${activeIndex + 1} von ${editedEntries.length}`
|
||
: `Zeile ${activeIndex + 1} von ${getUniqueRowCount()}`
|
||
}
|
||
</div>
|
||
<div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900 relative">
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={`${overlayUrl}?t=${Date.now()}`}
|
||
alt="Wort-Overlay"
|
||
className="w-full h-auto"
|
||
/>
|
||
{/* Highlight overlay for active row/entry */}
|
||
{isVocab && editedEntries[activeIndex]?.bbox && (
|
||
<div
|
||
className="absolute border-2 border-yellow-400 bg-yellow-400/10 pointer-events-none"
|
||
style={{
|
||
left: `${editedEntries[activeIndex].bbox.x}%`,
|
||
top: `${editedEntries[activeIndex].bbox.y}%`,
|
||
width: `${editedEntries[activeIndex].bbox.w}%`,
|
||
height: `${editedEntries[activeIndex].bbox.h}%`,
|
||
}}
|
||
/>
|
||
)}
|
||
{!isVocab && (() => {
|
||
const rowCells = getRowCells(activeIndex)
|
||
return rowCells.map(cell => (
|
||
<div
|
||
key={cell.cell_id}
|
||
className="absolute border-2 border-yellow-400 bg-yellow-400/10 pointer-events-none"
|
||
style={{
|
||
left: `${cell.bbox_pct.x}%`,
|
||
top: `${cell.bbox_pct.y}%`,
|
||
width: `${cell.bbox_pct.w}%`,
|
||
height: `${cell.bbox_pct.h}%`,
|
||
}}
|
||
/>
|
||
))
|
||
})()}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right 1/3: Editable fields */}
|
||
<div className="space-y-3">
|
||
{/* Navigation */}
|
||
<div className="flex items-center justify-between">
|
||
<button
|
||
onClick={() => setActiveIndex(Math.max(0, activeIndex - 1))}
|
||
disabled={activeIndex === 0}
|
||
className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
|
||
>
|
||
Zurueck
|
||
</button>
|
||
<span className="text-xs text-gray-500">
|
||
{activeIndex + 1} / {isVocab ? editedEntries.length : getUniqueRowCount()}
|
||
</span>
|
||
<button
|
||
onClick={() => setActiveIndex(Math.min(
|
||
(isVocab ? editedEntries.length : getUniqueRowCount()) - 1,
|
||
activeIndex + 1
|
||
))}
|
||
disabled={activeIndex >= (isVocab ? editedEntries.length : getUniqueRowCount()) - 1}
|
||
className="px-2 py-1 text-xs border rounded hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-30"
|
||
>
|
||
Weiter
|
||
</button>
|
||
</div>
|
||
|
||
{/* Status badge */}
|
||
<div className="flex items-center gap-2">
|
||
{isVocab && (
|
||
<>
|
||
<span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${statusBadge(editedEntries[activeIndex]?.status)}`}>
|
||
{editedEntries[activeIndex]?.status || 'pending'}
|
||
</span>
|
||
<span className={`text-xs font-mono ${confColor(editedEntries[activeIndex]?.confidence || 0)}`}>
|
||
{editedEntries[activeIndex]?.confidence}% Konfidenz
|
||
</span>
|
||
</>
|
||
)}
|
||
{!isVocab && (() => {
|
||
const rowCells = getRowCells(activeIndex)
|
||
const avgConf = rowCells.length
|
||
? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
|
||
: 0
|
||
return (
|
||
<span className={`text-xs font-mono ${confColor(avgConf)}`}>
|
||
{avgConf}% Konfidenz
|
||
</span>
|
||
)
|
||
})()}
|
||
</div>
|
||
|
||
{/* Cell crops (vocab mode) */}
|
||
{isVocab && editedEntries[activeIndex]?.bbox_en && (
|
||
<div>
|
||
<div className="text-[10px] font-medium text-blue-500 mb-0.5">EN-Zelle</div>
|
||
<div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative">
|
||
<CellCrop
|
||
imageUrl={dewarpedUrl}
|
||
bbox={editedEntries[activeIndex].bbox_en!}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{isVocab && editedEntries[activeIndex]?.bbox_de && (
|
||
<div>
|
||
<div className="text-[10px] font-medium text-green-500 mb-0.5">DE-Zelle</div>
|
||
<div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative">
|
||
<CellCrop
|
||
imageUrl={dewarpedUrl}
|
||
bbox={editedEntries[activeIndex].bbox_de!}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Editable fields */}
|
||
<div className="space-y-2">
|
||
{isVocab ? (
|
||
/* Vocab mode: EN/DE/Example fields */
|
||
<>
|
||
<div>
|
||
<label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">English</label>
|
||
<textarea
|
||
ref={enRef as any}
|
||
rows={Math.max(1, (editedEntries[activeIndex]?.english || '').split('\n').length)}
|
||
value={editedEntries[activeIndex]?.english || ''}
|
||
onChange={(e) => updateEntry(activeIndex, 'english', e.target.value)}
|
||
className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">Deutsch</label>
|
||
<textarea
|
||
rows={Math.max(1, (editedEntries[activeIndex]?.german || '').split('\n').length)}
|
||
value={editedEntries[activeIndex]?.german || ''}
|
||
onChange={(e) => updateEntry(activeIndex, 'german', e.target.value)}
|
||
className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">Example</label>
|
||
<textarea
|
||
rows={Math.max(1, (editedEntries[activeIndex]?.example || '').split('\n').length)}
|
||
value={editedEntries[activeIndex]?.example || ''}
|
||
onChange={(e) => updateEntry(activeIndex, 'example', e.target.value)}
|
||
className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
|
||
/>
|
||
</div>
|
||
</>
|
||
) : (
|
||
/* Generic mode: one field per column */
|
||
<>
|
||
{(() => {
|
||
const rowCells = getRowCells(activeIndex)
|
||
return columnsUsed.map((col) => {
|
||
const cell = rowCells.find(c => c.col_index === col.index)
|
||
if (!cell) return null
|
||
return (
|
||
<div key={col.index}>
|
||
<div className="flex items-center gap-1 mb-0.5">
|
||
<label className={`text-[10px] font-medium ${colTypeColor(col.type)}`}>
|
||
{colTypeLabel(col.type)}
|
||
</label>
|
||
<span className="text-[9px] text-gray-400">{cell.cell_id}</span>
|
||
</div>
|
||
{/* Cell crop */}
|
||
<div className="border rounded dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900 h-10 relative mb-1">
|
||
<CellCrop imageUrl={dewarpedUrl} bbox={cell.bbox_pct} />
|
||
</div>
|
||
<textarea
|
||
rows={Math.max(1, (cell.text || '').split('\n').length)}
|
||
value={cell.text || ''}
|
||
onChange={(e) => updateCell(cell.cell_id, e.target.value)}
|
||
className="w-full px-2 py-1.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 font-mono resize-none"
|
||
/>
|
||
</div>
|
||
)
|
||
})
|
||
})()}
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={confirmEntry}
|
||
className="flex-1 px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium"
|
||
>
|
||
Bestaetigen (Enter)
|
||
</button>
|
||
<button
|
||
onClick={skipEntry}
|
||
className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600"
|
||
>
|
||
Skip
|
||
</button>
|
||
</div>
|
||
|
||
{/* Shortcuts hint */}
|
||
<div className="text-[10px] text-gray-400 space-y-0.5">
|
||
<div>Enter = Bestaetigen & weiter</div>
|
||
<div>Ctrl+Down = Ueberspringen</div>
|
||
<div>Ctrl+Up = Zurueck</div>
|
||
</div>
|
||
|
||
{/* Entry/Row list (compact) */}
|
||
<div className="border-t dark:border-gray-700 pt-2 mt-2">
|
||
<div className="text-[10px] font-medium text-gray-500 dark:text-gray-400 mb-1">
|
||
{isVocab ? 'Alle Eintraege' : 'Alle Zeilen'}
|
||
</div>
|
||
<div className="max-h-48 overflow-y-auto space-y-0.5">
|
||
{isVocab ? (
|
||
editedEntries.map((entry, idx) => (
|
||
<div
|
||
key={idx}
|
||
onClick={() => setActiveIndex(idx)}
|
||
className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer transition-colors ${
|
||
idx === activeIndex
|
||
? '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'
|
||
}`}
|
||
>
|
||
<span className="w-4 text-right text-gray-400">{idx + 1}</span>
|
||
<span className={`w-2 h-2 rounded-full ${
|
||
entry.status === 'confirmed' ? 'bg-green-500' :
|
||
entry.status === 'edited' ? 'bg-blue-500' :
|
||
entry.status === 'skipped' ? 'bg-orange-400' :
|
||
'bg-gray-300 dark:bg-gray-600'
|
||
}`} />
|
||
<span className="truncate text-gray-600 dark:text-gray-400 font-mono">
|
||
{(entry.english || '\u2014').replace(/\n/g, ' ')} → {(entry.german || '\u2014').replace(/\n/g, ' ')}
|
||
</span>
|
||
</div>
|
||
))
|
||
) : (
|
||
sortedRowIndices.map((rowIdx, posIdx) => {
|
||
const rowCells = cellsByRow.get(rowIdx) || []
|
||
const firstText = rowCells.find(c => c.text)?.text || ''
|
||
return (
|
||
<div
|
||
key={rowIdx}
|
||
onClick={() => setActiveIndex(posIdx)}
|
||
className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] cursor-pointer transition-colors ${
|
||
posIdx === activeIndex
|
||
? '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'
|
||
}`}
|
||
>
|
||
<span className="w-6 text-right text-gray-400 font-mono">R{String(rowIdx).padStart(2, '0')}</span>
|
||
<span className="truncate text-gray-600 dark:text-gray-400 font-mono">
|
||
{firstText.replace(/\n/g, ' ').substring(0, 60) || '\u2014'}
|
||
</span>
|
||
</div>
|
||
)
|
||
})
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Controls */}
|
||
{gridResult && (
|
||
<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="flex items-center gap-3 flex-wrap">
|
||
{/* OCR Engine selector */}
|
||
<select
|
||
value={ocrEngine}
|
||
onChange={(e) => setOcrEngine(e.target.value as 'auto' | 'tesseract' | 'rapid')}
|
||
className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
||
>
|
||
<option value="auto">Auto (RapidOCR wenn verfuegbar)</option>
|
||
<option value="rapid">RapidOCR (ONNX)</option>
|
||
<option value="tesseract">Tesseract</option>
|
||
</select>
|
||
|
||
{/* Pronunciation selector (only for vocab) */}
|
||
{isVocab && (
|
||
<select
|
||
value={pronunciation}
|
||
onChange={(e) => setPronunciation(e.target.value as 'british' | 'american')}
|
||
className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
||
>
|
||
<option value="british">Britisch (RP)</option>
|
||
<option value="american">Amerikanisch</option>
|
||
</select>
|
||
)}
|
||
|
||
<button
|
||
onClick={() => runAutoDetection()}
|
||
disabled={detecting}
|
||
className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-50"
|
||
>
|
||
Erneut erkennen
|
||
</button>
|
||
|
||
{/* Show which engine was used */}
|
||
{usedEngine && (
|
||
<span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${
|
||
usedEngine === 'rapid'
|
||
? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
|
||
}`}>
|
||
{usedEngine}
|
||
</span>
|
||
)}
|
||
|
||
<button
|
||
onClick={() => goToStep(3)}
|
||
className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700"
|
||
>
|
||
Zeilen korrigieren (Step 4)
|
||
</button>
|
||
|
||
<div className="flex-1" />
|
||
|
||
{/* Ground truth */}
|
||
{!gtSaved ? (
|
||
<>
|
||
<input
|
||
type="text"
|
||
placeholder="Notizen (optional)"
|
||
value={gtNotes}
|
||
onChange={(e) => setGtNotes(e.target.value)}
|
||
className="px-2 py-1 text-xs border rounded dark:bg-gray-700 dark:border-gray-600 w-48"
|
||
/>
|
||
<button
|
||
onClick={() => handleGroundTruth(true)}
|
||
className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700"
|
||
>
|
||
Korrekt
|
||
</button>
|
||
<button
|
||
onClick={() => handleGroundTruth(false)}
|
||
className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700"
|
||
>
|
||
Fehlerhaft
|
||
</button>
|
||
</>
|
||
) : (
|
||
<span className="text-xs text-green-600 dark:text-green-400">
|
||
Ground Truth gespeichert
|
||
</span>
|
||
)}
|
||
|
||
<button
|
||
onClick={onNext}
|
||
className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium"
|
||
>
|
||
Weiter
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
|
||
{error}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
|
||
/**
|
||
* CellCrop: Shows a cropped portion of the dewarped image based on percent bbox.
|
||
* Uses CSS background-image + background-position for efficient cropping.
|
||
*/
|
||
function CellCrop({ imageUrl, bbox }: { imageUrl: string; bbox: { x: number; y: number; w: number; h: number } }) {
|
||
// Scale factor: how much to zoom into the cell
|
||
const scaleX = 100 / bbox.w
|
||
const scaleY = 100 / bbox.h
|
||
const scale = Math.min(scaleX, scaleY, 8) // Cap zoom at 8x
|
||
|
||
return (
|
||
<div
|
||
className="w-full h-full"
|
||
style={{
|
||
backgroundImage: `url(${imageUrl})`,
|
||
backgroundSize: `${scale * 100}%`,
|
||
backgroundPosition: `${-bbox.x * scale}% ${-bbox.y * scale}%`,
|
||
backgroundRepeat: 'no-repeat',
|
||
}}
|
||
/>
|
||
)
|
||
}
|