Full-screen side-by-side layout for New Job and Browse Jobs
New Job (plain_ocr): - After OCR completes, the entire main area becomes a flex-column view pinned to viewport height: image and editable textarea side by side at top (filling available space), metadata fields in a compact row below, Commit Job button at the bottom - "New Analysis" button in the header returns to the upload view - ResultPanel reverted to simple rendered-output only (no commit logic) Browse Jobs: - Selecting a job replaces the search list with a full-screen detail view using the same layout: image | editable textarea on top, all metadata fields + Reviewer name + action button in a single row below - "Back to results" button returns to the search/list grid - Search results now display as a responsive card grid Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aaron Roberts
@@ -1,6 +1,9 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText, Layers } from 'lucide-react'
|
||||
import {
|
||||
Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText,
|
||||
Layers, ChevronLeft, CheckCircle2, Database,
|
||||
} from 'lucide-react'
|
||||
import ImageUpload from './components/ImageUpload'
|
||||
import ModeSelector from './components/ModeSelector'
|
||||
import ResultPanel from './components/ResultPanel'
|
||||
@@ -12,12 +15,16 @@ import axios from 'axios'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
||||
|
||||
const INPUT_CLASS =
|
||||
'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
|
||||
'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
|
||||
|
||||
function App() {
|
||||
const [view, setView] = useState('new_job') // 'new_job' | 'jobs'
|
||||
const [view, setView] = useState('new_job')
|
||||
|
||||
// OCR state
|
||||
const [mode, setMode] = useState('plain_ocr')
|
||||
const [fileType, setFileType] = useState('image') // 'image' or 'pdf'
|
||||
const [fileType, setFileType] = useState('image')
|
||||
const [image, setImage] = useState(null)
|
||||
const [imagePreview, setImagePreview] = useState(null)
|
||||
const [result, setResult] = useState(null)
|
||||
@@ -26,26 +33,20 @@ function App() {
|
||||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||||
const [includeCaption, setIncludeCaption] = useState(false)
|
||||
|
||||
// Form state
|
||||
const [prompt, setPrompt] = useState('')
|
||||
const [findTerm, setFindTerm] = useState('')
|
||||
const [advancedSettings, setAdvancedSettings] = useState({
|
||||
base_size: 1024,
|
||||
image_size: 640,
|
||||
crop_mode: true,
|
||||
test_compress: false
|
||||
base_size: 1024, image_size: 640, crop_mode: true, test_compress: false,
|
||||
})
|
||||
|
||||
// Job metadata
|
||||
const [metadata, setMetadata] = useState({ author: '', book: '', chapter: '', page: '' })
|
||||
|
||||
// Editable OCR text (for plain_ocr mode, editable before commit)
|
||||
const [editedOcrText, setEditedOcrText] = useState('')
|
||||
|
||||
// Job commit state
|
||||
const [commitLoading, setCommitLoading] = useState(false)
|
||||
const [commitResult, setCommitResult] = useState(null)
|
||||
|
||||
// Whether to show the full-screen result view
|
||||
const showResultView = view === 'new_job' && mode === 'plain_ocr' && !!result
|
||||
|
||||
const handleFileTypeChange = useCallback((newType) => {
|
||||
setImage(null)
|
||||
if (imagePreview) URL.revokeObjectURL(imagePreview)
|
||||
@@ -62,6 +63,8 @@ function App() {
|
||||
setImagePreview(null)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
setEditedOcrText('')
|
||||
setCommitResult(null)
|
||||
} else {
|
||||
setImage(file)
|
||||
setImagePreview(fileType === 'image' ? URL.createObjectURL(file) : file)
|
||||
@@ -73,14 +76,10 @@ function App() {
|
||||
}, [imagePreview, fileType])
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!image) {
|
||||
setError('Please upload an image first')
|
||||
return
|
||||
}
|
||||
if (!image) { setError('Please upload an image first'); return }
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setCommitResult(null)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('image', image)
|
||||
@@ -108,6 +107,12 @@ function App() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleNewAnalysis = () => {
|
||||
setResult(null)
|
||||
setEditedOcrText('')
|
||||
setCommitResult(null)
|
||||
}
|
||||
|
||||
const handleCommitJob = useCallback(async () => {
|
||||
if (!image) return
|
||||
setCommitLoading(true)
|
||||
@@ -149,7 +154,9 @@ function App() {
|
||||
a.download = `deepseek-ocr-result.${ext}`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}, [result, mode])
|
||||
}, [editedOcrText, result, mode])
|
||||
|
||||
const metaField = (key) => (e) => setMetadata(m => ({ ...m, [key]: e.target.value }))
|
||||
|
||||
return (
|
||||
<div className="min-h-screen relative overflow-hidden">
|
||||
@@ -160,12 +167,12 @@ function App() {
|
||||
<motion.div
|
||||
className="absolute top-20 left-20 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"
|
||||
animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-20 right-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl"
|
||||
animate={{ scale: [1.2, 1, 1.2], opacity: [0.5, 0.3, 0.5] }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -173,11 +180,7 @@ function App() {
|
||||
<header className="sticky top-0 z-50 glass border-b border-white/10">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<motion.div
|
||||
className="flex items-center gap-3"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
>
|
||||
<motion.div className="flex items-center gap-3" initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 rounded-xl blur-lg opacity-75" />
|
||||
<div className="relative bg-gradient-to-br from-purple-600 to-cyan-500 p-2 rounded-xl">
|
||||
@@ -190,30 +193,29 @@ function App() {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex gap-2">
|
||||
{showResultView && (
|
||||
<motion.button
|
||||
onClick={handleNewAnalysis}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium glass text-gray-400 hover:bg-white/5 transition-all"
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
New Analysis
|
||||
</motion.button>
|
||||
)}
|
||||
<motion.button
|
||||
onClick={() => setView('new_job')}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all ${
|
||||
view === 'new_job'
|
||||
? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
|
||||
: 'glass text-gray-400 hover:bg-white/5'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all ${view === 'new_job' ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white' : 'glass text-gray-400 hover:bg-white/5'}`}
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Zap className="w-4 h-4" />
|
||||
New Job
|
||||
</motion.button>
|
||||
<motion.button
|
||||
onClick={() => setView('jobs')}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all ${
|
||||
view === 'jobs'
|
||||
? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
|
||||
: 'glass text-gray-400 hover:bg-white/5'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all ${view === 'jobs' ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white' : 'glass text-gray-400 hover:bg-white/5'}`}
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
Browse Jobs
|
||||
@@ -224,9 +226,115 @@ function App() {
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
<main className="max-w-7xl mx-auto px-6 py-6">
|
||||
<AnimatePresence mode="wait">
|
||||
{view === 'jobs' ? (
|
||||
|
||||
{/* ── Full-screen OCR result view (plain_ocr + result) ── */}
|
||||
{showResultView ? (
|
||||
<motion.div
|
||||
key="ocr_result"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="flex flex-col gap-4"
|
||||
style={{ height: 'calc(100vh - 9.5rem)' }}
|
||||
>
|
||||
{/* Image + Text */}
|
||||
<div className="grid grid-cols-2 gap-6 flex-1 min-h-0">
|
||||
{imagePreview && typeof imagePreview === 'string' ? (
|
||||
<div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 min-h-0">
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Source"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="glass rounded-2xl flex items-center justify-center">
|
||||
<p className="text-gray-500 text-sm">No preview</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="glass rounded-2xl p-4 flex flex-col min-h-0">
|
||||
<p className="text-xs text-gray-400 mb-2 flex-shrink-0">
|
||||
OCR Text <span className="text-purple-400">(edit before committing)</span>
|
||||
</p>
|
||||
<textarea
|
||||
value={editedOcrText}
|
||||
onChange={e => setEditedOcrText(e.target.value)}
|
||||
className="flex-1 w-full bg-transparent text-sm text-gray-200 font-mono resize-none focus:outline-none min-h-0"
|
||||
placeholder="OCR text appears here..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata row */}
|
||||
<div className="glass p-4 rounded-2xl flex-shrink-0">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[
|
||||
{ key: 'author', label: 'Author', placeholder: 'Author name' },
|
||||
{ key: 'book', label: 'Book', placeholder: 'Book title' },
|
||||
{ key: 'chapter', label: 'Chapter', placeholder: 'Chapter' },
|
||||
{ key: 'page', label: 'Page', placeholder: 'Page number' },
|
||||
].map(({ key, label, placeholder }) => (
|
||||
<div key={key}>
|
||||
<label className="text-xs text-gray-400 mb-1 block">{label}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={metadata[key]}
|
||||
onChange={metaField(key)}
|
||||
placeholder={placeholder}
|
||||
className={INPUT_CLASS}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Commit row */}
|
||||
<div className="flex items-center gap-4 flex-shrink-0">
|
||||
<AnimatePresence>
|
||||
{commitResult?.success && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }}
|
||||
className="flex-1 glass p-3 rounded-xl bg-green-500/10 border border-green-500/20"
|
||||
>
|
||||
<p className="text-xs text-green-400">
|
||||
Job saved — ID: <span className="font-mono">{commitResult.job?.id}</span>
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
{commitResult && !commitResult.success && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0 }}
|
||||
className="flex-1 glass p-3 rounded-xl bg-red-500/10 border border-red-500/20"
|
||||
>
|
||||
<p className="text-xs text-red-400">{commitResult.error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<motion.button
|
||||
onClick={handleCommitJob}
|
||||
disabled={commitLoading || commitResult?.success}
|
||||
className={`flex items-center gap-2 px-6 py-3 rounded-xl font-medium text-sm transition-all flex-shrink-0 ${
|
||||
commitLoading || commitResult?.success
|
||||
? 'opacity-50 cursor-not-allowed bg-white/5'
|
||||
: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
|
||||
}`}
|
||||
whileHover={!commitLoading && !commitResult?.success ? { scale: 1.02 } : {}}
|
||||
whileTap={!commitLoading && !commitResult?.success ? { scale: 0.98 } : {}}
|
||||
>
|
||||
{commitLoading ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin" /> Committing...</>
|
||||
) : commitResult?.success ? (
|
||||
<><CheckCircle2 className="w-4 h-4" /> Committed</>
|
||||
) : (
|
||||
<><Database className="w-4 h-4" /> Commit Job</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
) : view === 'jobs' ? (
|
||||
<motion.div
|
||||
key="jobs"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -235,7 +343,9 @@ function App() {
|
||||
>
|
||||
<JobsPanel />
|
||||
</motion.div>
|
||||
|
||||
) : (
|
||||
/* ── Upload / Controls layout ── */
|
||||
<motion.div
|
||||
key="new_job"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -243,7 +353,7 @@ function App() {
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
>
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Left Panel - Upload & Controls */}
|
||||
{/* Left Panel */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@@ -255,126 +365,83 @@ function App() {
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<motion.button
|
||||
onClick={() => handleFileTypeChange('image')}
|
||||
className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
|
||||
fileType === 'image'
|
||||
? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
|
||||
: 'glass text-gray-400 hover:bg-white/5'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${fileType === 'image' ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white' : 'glass text-gray-400 hover:bg-white/5'}`}
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ImageIcon className="w-4 h-4" />
|
||||
Image OCR
|
||||
<ImageIcon className="w-4 h-4" /> Image OCR
|
||||
</motion.button>
|
||||
<motion.button
|
||||
onClick={() => handleFileTypeChange('pdf')}
|
||||
className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${
|
||||
fileType === 'pdf'
|
||||
? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white'
|
||||
: 'glass text-gray-400 hover:bg-white/5'
|
||||
}`}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className={`p-3 rounded-xl text-sm font-medium transition-all flex items-center justify-center gap-2 ${fileType === 'pdf' ? 'bg-gradient-to-r from-purple-600 to-cyan-600 text-white' : 'glass text-gray-400 hover:bg-white/5'}`}
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
PDF Processing
|
||||
<FileText className="w-4 h-4" /> PDF Processing
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Job Metadata */}
|
||||
<MetadataForm metadata={metadata} onChange={setMetadata} />
|
||||
|
||||
{/* Mode Selector with integrated inputs */}
|
||||
<ModeSelector
|
||||
mode={mode}
|
||||
onModeChange={setMode}
|
||||
prompt={prompt}
|
||||
onPromptChange={setPrompt}
|
||||
findTerm={findTerm}
|
||||
onFindTermChange={setFindTerm}
|
||||
mode={mode} onModeChange={setMode}
|
||||
prompt={prompt} onPromptChange={setPrompt}
|
||||
findTerm={findTerm} onFindTermChange={setFindTerm}
|
||||
/>
|
||||
|
||||
{/* Image/PDF Upload */}
|
||||
<ImageUpload
|
||||
onImageSelect={handleImageSelect}
|
||||
preview={imagePreview}
|
||||
fileType={fileType}
|
||||
/>
|
||||
<ImageUpload onImageSelect={handleImageSelect} preview={imagePreview} fileType={fileType} />
|
||||
|
||||
{/* Advanced Settings Toggle */}
|
||||
<motion.button
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
className="w-full glass px-4 py-3 rounded-2xl flex items-center justify-between hover:bg-white/5 transition-colors"
|
||||
whileHover={{ scale: 1.01 }}
|
||||
whileTap={{ scale: 0.99 }}
|
||||
whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Settings className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-sm font-medium text-gray-300">Advanced Settings</span>
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ rotate: showAdvanced ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<motion.div animate={{ rotate: showAdvanced ? 180 : 0 }} transition={{ duration: 0.3 }}>
|
||||
<svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</motion.div>
|
||||
</motion.button>
|
||||
|
||||
{/* Advanced Settings Panel */}
|
||||
<AnimatePresence>
|
||||
{showAdvanced && (
|
||||
<AdvancedSettings
|
||||
settings={advancedSettings}
|
||||
onSettingsChange={setAdvancedSettings}
|
||||
includeCaption={includeCaption}
|
||||
onIncludeCaptionChange={setIncludeCaption}
|
||||
settings={advancedSettings} onSettingsChange={setAdvancedSettings}
|
||||
includeCaption={includeCaption} onIncludeCaptionChange={setIncludeCaption}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Action Button / PDF Processor */}
|
||||
{fileType === 'pdf' ? (
|
||||
<PDFProcessor
|
||||
pdfFile={image}
|
||||
mode={mode}
|
||||
prompt={prompt}
|
||||
advancedSettings={advancedSettings}
|
||||
includeCaption={includeCaption}
|
||||
pdfFile={image} mode={mode} prompt={prompt}
|
||||
advancedSettings={advancedSettings} includeCaption={includeCaption}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<motion.button
|
||||
onClick={handleSubmit}
|
||||
disabled={!image || loading}
|
||||
className={`w-full relative overflow-hidden rounded-2xl p-[2px] ${
|
||||
!image || loading ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
className={`w-full relative overflow-hidden rounded-2xl p-[2px] ${!image || loading ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
whileHover={!loading && image ? { scale: 1.02 } : {}}
|
||||
whileTap={!loading && image ? { scale: 0.98 } : {}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600 via-pink-600 to-cyan-600 animate-gradient" />
|
||||
<div className="relative bg-dark-100 px-8 py-4 rounded-2xl flex items-center justify-center gap-3">
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span className="font-semibold">Processing Magic...</span>
|
||||
</>
|
||||
<><Loader2 className="w-5 h-5 animate-spin" /><span className="font-semibold">Processing Magic...</span></>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="w-5 h-5" />
|
||||
<span className="font-semibold">Analyze Image</span>
|
||||
</>
|
||||
<><Zap className="w-5 h-5" /><span className="font-semibold">Analyze Image</span></>
|
||||
)}
|
||||
</div>
|
||||
</motion.button>
|
||||
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}
|
||||
className="glass p-4 rounded-2xl border-red-500/50 bg-red-500/10"
|
||||
>
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
@@ -384,7 +451,7 @@ function App() {
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Right Panel - Results */}
|
||||
{/* Right Panel - Results (non-plain_ocr modes or loading) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@@ -396,11 +463,6 @@ function App() {
|
||||
imagePreview={imagePreview}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
onCommitJob={mode === 'plain_ocr' && result ? handleCommitJob : null}
|
||||
commitLoading={commitLoading}
|
||||
commitResult={commitResult}
|
||||
editedOcrText={editedOcrText}
|
||||
onOcrTextChange={setEditedOcrText}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -2,25 +2,23 @@ import { useState, useEffect, useCallback } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
Search, ChevronLeft, ChevronRight, CheckCircle2, Clock,
|
||||
User, BookOpen, FileText, Calendar, Hash, Loader2, X, Save,
|
||||
RefreshCw, Image as ImageIcon,
|
||||
FileText, Loader2, Save, RefreshCw,
|
||||
} from 'lucide-react'
|
||||
import axios from 'axios'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
||||
|
||||
const INPUT_CLASS =
|
||||
'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
|
||||
'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
|
||||
|
||||
const STATUS_COLORS = {
|
||||
unreviewed: 'text-amber-400 bg-amber-400/10 border-amber-400/30',
|
||||
reviewed: 'text-green-400 bg-green-400/10 border-green-400/30',
|
||||
}
|
||||
|
||||
const STATUS_ICONS = {
|
||||
unreviewed: Clock,
|
||||
reviewed: CheckCircle2,
|
||||
reviewed: 'text-green-400 bg-green-400/10 border-green-400/30',
|
||||
}
|
||||
|
||||
function StatusBadge({ status }) {
|
||||
const Icon = STATUS_ICONS[status] || Clock
|
||||
const Icon = status === 'reviewed' ? CheckCircle2 : Clock
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${STATUS_COLORS[status] || 'text-gray-400'}`}>
|
||||
<Icon className="w-3 h-3" />
|
||||
@@ -29,17 +27,19 @@ function StatusBadge({ status }) {
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Full-screen Job Detail
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
function JobDetail({ jobId, onClose, onReviewed }) {
|
||||
const [job, setJob] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
// Editable fields
|
||||
const [editedText, setEditedText] = useState('')
|
||||
const [editAuthor, setEditAuthor] = useState('')
|
||||
const [editBook, setEditBook] = useState('')
|
||||
const [editedText, setEditedText] = useState('')
|
||||
const [editAuthor, setEditAuthor] = useState('')
|
||||
const [editBook, setEditBook] = useState('')
|
||||
const [editChapter, setEditChapter] = useState('')
|
||||
const [editPage, setEditPage] = useState('')
|
||||
const [editPage, setEditPage] = useState('')
|
||||
const [reviewerName, setReviewerName] = useState('')
|
||||
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
@@ -67,9 +67,7 @@ function JobDetail({ jobId, onClose, onReviewed }) {
|
||||
.catch(err => {
|
||||
if (!cancelled) setError(err.response?.data?.detail || err.message)
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false)
|
||||
})
|
||||
.finally(() => { if (!cancelled) setLoading(false) })
|
||||
|
||||
return () => { cancelled = true }
|
||||
}, [jobId])
|
||||
@@ -100,193 +98,163 @@ function JobDetail({ jobId, onClose, onReviewed }) {
|
||||
}
|
||||
}
|
||||
|
||||
const inputClass =
|
||||
'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
|
||||
'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
|
||||
|
||||
const isReviewed = job?.status === 'reviewed'
|
||||
|
||||
return (
|
||||
<div className="glass rounded-2xl flex flex-col overflow-hidden" style={{ minHeight: '600px' }}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-white/10 flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
{job && <StatusBadge status={job.status} />}
|
||||
<h3 className="font-semibold text-gray-200">Job Detail</h3>
|
||||
</div>
|
||||
<button onClick={onClose} className="glass glass-hover p-1.5 rounded-lg">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
<motion.div
|
||||
key={jobId}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="flex flex-col gap-4"
|
||||
style={{ height: 'calc(100vh - 9.5rem)' }}
|
||||
>
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center gap-4 flex-shrink-0">
|
||||
<motion.button
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-2 glass glass-hover px-4 py-2 rounded-xl text-sm text-gray-300"
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
Back to results
|
||||
</motion.button>
|
||||
{job && (
|
||||
<>
|
||||
<StatusBadge status={job.status} />
|
||||
<span className="text-xs text-gray-500 font-mono hidden sm:block">{job.id}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="flex justify-center py-16">
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-purple-400" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="m-5 glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
|
||||
<div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10 flex-shrink-0">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job && !loading && (
|
||||
<div className="grid grid-cols-2 divide-x divide-white/10 flex-1 min-h-0">
|
||||
|
||||
{/* ── Left column: image + read-only info ── */}
|
||||
<div className="overflow-y-auto p-5 space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-2 flex items-center gap-1">
|
||||
<ImageIcon className="w-3.5 h-3.5" /> Source Image
|
||||
</p>
|
||||
<>
|
||||
{/* Image + Text */}
|
||||
<div className="grid grid-cols-2 gap-6 flex-1 min-h-0">
|
||||
<div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 min-h-0">
|
||||
<img
|
||||
src={`${API_BASE}/jobs/${job.id}/image`}
|
||||
alt="Job source"
|
||||
className="w-full rounded-xl border border-white/10 bg-black/30"
|
||||
className="w-full h-full object-contain"
|
||||
onError={e => { e.target.style.display = 'none' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Read-only job info */}
|
||||
<div className="space-y-1.5 text-xs text-gray-500">
|
||||
<p className="font-mono break-all">{job.id}</p>
|
||||
<p>Submitted: {new Date(job.submitted_at).toLocaleString()}</p>
|
||||
{job.mode && <p>Mode: {job.mode}</p>}
|
||||
{isReviewed && job.reviewed_at && (
|
||||
<p>Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Original OCR text (collapsed, for reviewed jobs) */}
|
||||
{isReviewed && job.ocr_text && (
|
||||
<details className="glass rounded-xl overflow-hidden">
|
||||
<summary className="px-3 py-2 cursor-pointer text-xs text-gray-500 hover:bg-white/5 transition-colors">
|
||||
Original OCR Text
|
||||
</summary>
|
||||
<div className="px-3 py-3 border-t border-white/10">
|
||||
<pre className="text-xs text-gray-500 whitespace-pre-wrap font-mono">{job.ocr_text}</pre>
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Right column: all editable fields ── */}
|
||||
<div className="overflow-y-auto p-5 space-y-5">
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Metadata</p>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Author</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editAuthor}
|
||||
onChange={e => setEditAuthor(e.target.value)}
|
||||
placeholder="Author name"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Book</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editBook}
|
||||
onChange={e => setEditBook(e.target.value)}
|
||||
placeholder="Book title"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Chapter</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editChapter}
|
||||
onChange={e => setEditChapter(e.target.value)}
|
||||
placeholder="Chapter"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Page</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editPage}
|
||||
onChange={e => setEditPage(e.target.value)}
|
||||
placeholder="Page"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OCR / reviewed text */}
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs text-gray-400 block">
|
||||
<div className="glass rounded-2xl p-4 flex flex-col min-h-0">
|
||||
<p className="text-xs text-gray-400 mb-2 flex-shrink-0">
|
||||
{isReviewed ? 'Reviewed Text' : 'OCR Text'}
|
||||
<span className="text-purple-400 ml-1">(editable)</span>
|
||||
</label>
|
||||
</p>
|
||||
<textarea
|
||||
value={editedText}
|
||||
onChange={e => setEditedText(e.target.value)}
|
||||
rows={12}
|
||||
className={`${inputClass} resize-y font-mono`}
|
||||
className="flex-1 w-full bg-transparent text-sm text-gray-200 font-mono resize-none focus:outline-none min-h-0"
|
||||
placeholder="Text content..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Reviewer + save */}
|
||||
<div className="space-y-3 pt-3 border-t border-white/10">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Reviewer Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={reviewerName}
|
||||
onChange={e => setReviewerName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{saveResult && (
|
||||
<div className={`p-3 rounded-lg text-sm ${saveResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
|
||||
{saveResult.success
|
||||
? (isReviewed ? 'Changes saved!' : 'Job marked as reviewed!')
|
||||
: saveResult.error}
|
||||
</div>
|
||||
{/* Original OCR text collapsed for reviewed jobs */}
|
||||
{isReviewed && job.ocr_text && (
|
||||
<details className="flex-shrink-0 mt-2 border-t border-white/10 pt-2">
|
||||
<summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-400 transition-colors">
|
||||
Original OCR Text
|
||||
</summary>
|
||||
<pre className="text-xs text-gray-600 whitespace-pre-wrap font-mono mt-1 max-h-28 overflow-y-auto">
|
||||
{job.ocr_text}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
|
||||
<motion.button
|
||||
onClick={handleSave}
|
||||
disabled={submitting || !reviewerName.trim()}
|
||||
className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
|
||||
submitting || !reviewerName.trim()
|
||||
? 'opacity-50 cursor-not-allowed bg-white/5'
|
||||
: isReviewed
|
||||
? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
|
||||
: 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500'
|
||||
}`}
|
||||
whileHover={!submitting && reviewerName.trim() ? { scale: 1.02 } : {}}
|
||||
whileTap={!submitting && reviewerName.trim() ? { scale: 0.98 } : {}}
|
||||
>
|
||||
{submitting ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
|
||||
) : isReviewed ? (
|
||||
<><Save className="w-4 h-4" /> Save Changes</>
|
||||
) : (
|
||||
<><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Metadata + reviewer row */}
|
||||
<div className="glass p-4 rounded-2xl flex-shrink-0">
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Author</label>
|
||||
<input type="text" value={editAuthor} onChange={e => setEditAuthor(e.target.value)} placeholder="Author" className={INPUT_CLASS} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Book</label>
|
||||
<input type="text" value={editBook} onChange={e => setEditBook(e.target.value)} placeholder="Book title" className={INPUT_CLASS} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Chapter</label>
|
||||
<input type="text" value={editChapter} onChange={e => setEditChapter(e.target.value)} placeholder="Chapter" className={INPUT_CLASS} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Page</label>
|
||||
<input type="text" value={editPage} onChange={e => setEditPage(e.target.value)} placeholder="Page" className={INPUT_CLASS} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Reviewer</label>
|
||||
<input type="text" value={reviewerName} onChange={e => setReviewerName(e.target.value)} placeholder="Your name" className={INPUT_CLASS} />
|
||||
</div>
|
||||
<div className="flex flex-col justify-end">
|
||||
<motion.button
|
||||
onClick={handleSave}
|
||||
disabled={submitting || !reviewerName.trim()}
|
||||
className={`w-full flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-sm transition-all ${
|
||||
submitting || !reviewerName.trim()
|
||||
? 'opacity-50 cursor-not-allowed bg-white/5'
|
||||
: isReviewed
|
||||
? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
|
||||
: 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500'
|
||||
}`}
|
||||
whileHover={!submitting && reviewerName.trim() ? { scale: 1.02 } : {}}
|
||||
whileTap={!submitting && reviewerName.trim() ? { scale: 0.98 } : {}}
|
||||
>
|
||||
{submitting ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
|
||||
) : isReviewed ? (
|
||||
<><Save className="w-4 h-4" /> Save Changes</>
|
||||
) : (
|
||||
<><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{saveResult && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }}
|
||||
className={`mt-3 p-2 rounded-lg text-xs ${saveResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}
|
||||
>
|
||||
{saveResult.success
|
||||
? (isReviewed ? 'Changes saved!' : 'Job marked as reviewed!')
|
||||
: saveResult.error}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Read-only info row */}
|
||||
<div className="flex gap-6 mt-3 pt-3 border-t border-white/10">
|
||||
{job.submitted_at && (
|
||||
<span className="text-xs text-gray-500">Submitted: {new Date(job.submitted_at).toLocaleString()}</span>
|
||||
)}
|
||||
{isReviewed && job.reviewed_at && (
|
||||
<span className="text-xs text-gray-500">Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</span>
|
||||
)}
|
||||
{job.mode && <span className="text-xs text-gray-500">Mode: {job.mode}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// Search / List view
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
export default function JobsPanel() {
|
||||
const [search, setSearch] = useState('')
|
||||
const [filterStatus, setFilterStatus] = useState('')
|
||||
@@ -324,14 +292,7 @@ export default function JobsPanel() {
|
||||
}
|
||||
}, [search, filterStatus, filterAuthor, filterBook])
|
||||
|
||||
useEffect(() => {
|
||||
fetchJobs(0)
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault()
|
||||
fetchJobs(0)
|
||||
}
|
||||
useEffect(() => { fetchJobs(0) }, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const handleReviewed = (updatedJob) => {
|
||||
setJobs(prev => prev.map(j => j.id === updatedJob.id ? { ...j, ...updatedJob } : j))
|
||||
@@ -339,196 +300,122 @@ export default function JobsPanel() {
|
||||
|
||||
const totalPages = Math.ceil(total / LIMIT)
|
||||
|
||||
const inputClass =
|
||||
'bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
|
||||
'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
|
||||
// When a job is selected show full-screen detail
|
||||
if (selectedJobId) {
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
<JobDetail
|
||||
key={selectedJobId}
|
||||
jobId={selectedJobId}
|
||||
onClose={() => setSelectedJobId(null)}
|
||||
onReviewed={handleReviewed}
|
||||
/>
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
// 1/3 list — 2/3 detail on large screens
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<motion.div
|
||||
key="job_list"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* Search form */}
|
||||
<div className="glass p-4 rounded-2xl space-y-3">
|
||||
<form onSubmit={e => { e.preventDefault(); fetchJobs(0) }} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Search all fields..."
|
||||
className={`${INPUT_CLASS} flex-1`}
|
||||
/>
|
||||
<motion.button
|
||||
type="submit"
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-sm font-medium"
|
||||
whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Search className="w-4 h-4" /> Search
|
||||
</motion.button>
|
||||
</form>
|
||||
|
||||
{/* ── Left: Search + List ── */}
|
||||
<div className="lg:col-span-1 space-y-4">
|
||||
<div className="glass p-4 rounded-2xl space-y-3">
|
||||
<form onSubmit={handleSearch} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
placeholder="Search all fields..."
|
||||
className={`${inputClass} flex-1`}
|
||||
/>
|
||||
<motion.button
|
||||
type="submit"
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-sm font-medium"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Search className="w-4 h-4" />
|
||||
Search
|
||||
</motion.button>
|
||||
</form>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={e => setFilterStatus(e.target.value)}
|
||||
className={inputClass}
|
||||
>
|
||||
<option value="">All statuses</option>
|
||||
<option value="unreviewed">Unreviewed</option>
|
||||
<option value="reviewed">Reviewed</option>
|
||||
</select>
|
||||
<input
|
||||
type="text"
|
||||
value={filterAuthor}
|
||||
onChange={e => setFilterAuthor(e.target.value)}
|
||||
placeholder="Author..."
|
||||
className={inputClass}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={filterBook}
|
||||
onChange={e => setFilterBook(e.target.value)}
|
||||
placeholder="Book..."
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500">
|
||||
{total} job{total !== 1 ? 's' : ''} found
|
||||
</span>
|
||||
<button
|
||||
onClick={() => fetchJobs(page)}
|
||||
className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} className={INPUT_CLASS}>
|
||||
<option value="">All statuses</option>
|
||||
<option value="unreviewed">Unreviewed</option>
|
||||
<option value="reviewed">Reviewed</option>
|
||||
</select>
|
||||
<input type="text" value={filterAuthor} onChange={e => setFilterAuthor(e.target.value)} placeholder="Author..." className={INPUT_CLASS} />
|
||||
<input type="text" value={filterBook} onChange={e => setFilterBook(e.target.value)} placeholder="Book..." className={INPUT_CLASS} />
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-purple-400" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && jobs.length === 0 && (
|
||||
<div className="glass p-8 rounded-2xl text-center">
|
||||
<FileText className="w-10 h-10 mx-auto mb-3 text-gray-600" />
|
||||
<p className="text-gray-400">No jobs found</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Commit your first OCR job from the New Job tab</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<AnimatePresence>
|
||||
{jobs.map(job => (
|
||||
<motion.button
|
||||
key={job.id}
|
||||
onClick={() => setSelectedJobId(job.id === selectedJobId ? null : job.id)}
|
||||
className={`w-full text-left glass p-4 rounded-xl transition-all border ${
|
||||
selectedJobId === job.id
|
||||
? 'border-purple-500/50 bg-purple-500/5'
|
||||
: 'border-white/5 hover:border-white/20 hover:bg-white/5'
|
||||
}`}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0 }}
|
||||
layout
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
{job.book && (
|
||||
<span className="text-sm font-medium text-gray-200 truncate">{job.book}</span>
|
||||
)}
|
||||
{job.chapter && (
|
||||
<span className="text-xs text-gray-500">Ch. {job.chapter}</span>
|
||||
)}
|
||||
{job.page && (
|
||||
<span className="text-xs text-gray-500">p. {job.page}</span>
|
||||
)}
|
||||
</div>
|
||||
{job.author && (
|
||||
<p className="text-xs text-gray-400">{job.author}</p>
|
||||
)}
|
||||
<p className="text-xs text-gray-600 mt-1 font-mono">
|
||||
{new Date(job.submitted_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<StatusBadge status={job.status} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500">{total} job{total !== 1 ? 's' : ''} found</span>
|
||||
<button onClick={() => fetchJobs(page)} className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 transition-colors">
|
||||
<RefreshCw className="w-3 h-3" /> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<button
|
||||
onClick={() => fetchJobs(page - 1)}
|
||||
disabled={page === 0}
|
||||
className="glass glass-hover p-2 rounded-lg disabled:opacity-30"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="text-sm text-gray-400">
|
||||
Page {page + 1} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => fetchJobs(page + 1)}
|
||||
disabled={page >= totalPages - 1}
|
||||
className="glass glass-hover p-2 rounded-lg disabled:opacity-30"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Right: Detail panel ── */}
|
||||
<div className="lg:col-span-2">
|
||||
<AnimatePresence mode="wait">
|
||||
{selectedJobId ? (
|
||||
<motion.div
|
||||
key={selectedJobId}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
>
|
||||
<JobDetail
|
||||
jobId={selectedJobId}
|
||||
onClose={() => setSelectedJobId(null)}
|
||||
onReviewed={handleReviewed}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="empty"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
{loading && <div className="flex justify-center py-8"><Loader2 className="w-6 h-6 animate-spin text-purple-400" /></div>}
|
||||
|
||||
{error && (
|
||||
<div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && jobs.length === 0 && (
|
||||
<div className="glass p-8 rounded-2xl text-center">
|
||||
<FileText className="w-10 h-10 mx-auto mb-3 text-gray-600" />
|
||||
<p className="text-gray-400">No jobs found</p>
|
||||
<p className="text-xs text-gray-500 mt-1">Commit your first OCR job from the New Job tab</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
<AnimatePresence>
|
||||
{jobs.map(job => (
|
||||
<motion.button
|
||||
key={job.id}
|
||||
onClick={() => setSelectedJobId(job.id)}
|
||||
className="text-left glass p-4 rounded-xl border border-white/5 hover:border-white/20 hover:bg-white/5 transition-all"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
style={{ minHeight: '300px' }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
layout
|
||||
>
|
||||
<Search className="w-10 h-10 mb-3 text-gray-600" />
|
||||
<p className="text-gray-400">Select a job to view and edit details</p>
|
||||
</motion.div>
|
||||
)}
|
||||
<div className="flex items-start justify-between gap-2 mb-2">
|
||||
<StatusBadge status={job.status} />
|
||||
</div>
|
||||
{job.book && <p className="text-sm font-medium text-gray-200 truncate">{job.book}</p>}
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
{job.chapter && <span className="text-xs text-gray-500">Ch. {job.chapter}</span>}
|
||||
{job.page && <span className="text-xs text-gray-500">p. {job.page}</span>}
|
||||
</div>
|
||||
{job.author && <p className="text-xs text-gray-400 mt-1">{job.author}</p>}
|
||||
<p className="text-xs text-gray-600 mt-2 font-mono">{new Date(job.submitted_at).toLocaleDateString()}</p>
|
||||
</motion.button>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<button onClick={() => fetchJobs(page - 1)} disabled={page === 0} className="glass glass-hover p-2 rounded-lg disabled:opacity-30">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="text-sm text-gray-400">Page {page + 1} of {totalPages}</span>
|
||||
<button onClick={() => fetchJobs(page + 1)} disabled={page >= totalPages - 1} className="glass glass-hover p-2 rounded-lg disabled:opacity-30">
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useEffect, useRef, useState, useCallback } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Copy, Download, Sparkles, Loader2, CheckCircle2, ChevronDown, Database } from 'lucide-react'
|
||||
import { Copy, Download, Sparkles, Loader2, CheckCircle2, ChevronDown } from 'lucide-react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import DOMPurify from 'dompurify'
|
||||
|
||||
export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload, onCommitJob, commitLoading, commitResult, editedOcrText, onOcrTextChange }) {
|
||||
export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload }) {
|
||||
const canvasRef = useRef(null)
|
||||
const imgRef = useRef(null)
|
||||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||||
@@ -205,78 +205,46 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
{/* plain_ocr commit mode: image + editable textarea side by side */}
|
||||
{onCommitJob ? (
|
||||
<div className="grid grid-cols-2 gap-4 items-start">
|
||||
{imagePreview && typeof imagePreview === 'string' ? (
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs text-gray-400">Source Image</p>
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Source"
|
||||
className="w-full rounded-xl border border-white/10 bg-black/30"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
<div className={`space-y-1 ${(!imagePreview || typeof imagePreview !== 'string') ? 'col-span-2' : ''}`}>
|
||||
<p className="text-xs text-gray-400">
|
||||
OCR Text <span className="text-purple-400">(edit before committing)</span>
|
||||
</p>
|
||||
<textarea
|
||||
value={editedOcrText}
|
||||
onChange={e => onOcrTextChange(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-gray-200 font-mono resize-y focus:outline-none focus:border-purple-500/50 transition-colors"
|
||||
style={{ minHeight: '240px' }}
|
||||
placeholder="OCR text will appear here..."
|
||||
/>
|
||||
</div>
|
||||
{/* Preview with boxes (grounding modes) */}
|
||||
{imagePreview && result.boxes && result.boxes.length > 0 && (
|
||||
<div className="relative rounded-xl overflow-hidden border border-white/10 bg-black">
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={imagePreview}
|
||||
alt="Result"
|
||||
className="w-full block"
|
||||
onLoad={() => {
|
||||
console.log('🖼️ Image loaded, triggering draw')
|
||||
setImageLoaded(true)
|
||||
}}
|
||||
/>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute top-0 left-0 w-full h-full pointer-events-none"
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Preview with boxes (grounding modes) */}
|
||||
{imagePreview && result.boxes && result.boxes.length > 0 && (
|
||||
<div className="relative rounded-xl overflow-hidden border border-white/10 bg-black">
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={imagePreview}
|
||||
alt="Result"
|
||||
className="w-full block"
|
||||
onLoad={() => {
|
||||
console.log('🖼️ Image loaded, triggering draw')
|
||||
setImageLoaded(true)
|
||||
}}
|
||||
/>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute top-0 left-0 w-full h-full pointer-events-none"
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rendered text result */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-96 overflow-y-auto">
|
||||
{isHTML ? (
|
||||
<div
|
||||
className="prose prose-invert prose-sm max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(result.text) }}
|
||||
style={{ color: '#e5e7eb' }}
|
||||
/>
|
||||
) : isMarkdown ? (
|
||||
<div className="prose prose-invert prose-sm max-w-none">
|
||||
<ReactMarkdown>{result.text}</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
|
||||
{result.text}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Rendered text result */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-96 overflow-y-auto">
|
||||
{isHTML ? (
|
||||
<div
|
||||
className="prose prose-invert prose-sm max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(result.text) }}
|
||||
style={{ color: '#e5e7eb' }}
|
||||
/>
|
||||
) : isMarkdown ? (
|
||||
<div className="prose prose-invert prose-sm max-w-none">
|
||||
<ReactMarkdown>{result.text}</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
|
||||
{result.text}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Raw Response Viewer */}
|
||||
{result.raw_text && (
|
||||
<details className="glass rounded-xl overflow-hidden">
|
||||
@@ -343,44 +311,6 @@ export default function ResultPanel({ result, loading, imagePreview, onCopy, onD
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* Commit Job button (plain_ocr only) */}
|
||||
{onCommitJob && (
|
||||
<div className="space-y-2">
|
||||
<motion.button
|
||||
onClick={onCommitJob}
|
||||
disabled={commitLoading || commitResult?.success}
|
||||
className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
|
||||
commitLoading || commitResult?.success
|
||||
? 'opacity-50 cursor-not-allowed bg-white/5'
|
||||
: 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
|
||||
}`}
|
||||
whileHover={!commitLoading && !commitResult?.success ? { scale: 1.02 } : {}}
|
||||
whileTap={!commitLoading && !commitResult?.success ? { scale: 0.98 } : {}}
|
||||
>
|
||||
{commitLoading ? (
|
||||
<><Loader2 className="w-4 h-4 animate-spin" /> Committing Job...</>
|
||||
) : commitResult?.success ? (
|
||||
<><CheckCircle2 className="w-4 h-4" /> Job Committed</>
|
||||
) : (
|
||||
<><Database className="w-4 h-4" /> Commit Job</>
|
||||
)}
|
||||
</motion.button>
|
||||
|
||||
{commitResult?.success && (
|
||||
<div className="glass p-3 rounded-xl bg-green-500/10 border border-green-500/20">
|
||||
<p className="text-xs text-green-400">
|
||||
Job saved — ID: <span className="font-mono">{commitResult.job?.id}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{commitResult && !commitResult.success && (
|
||||
<div className="glass p-3 rounded-xl bg-red-500/10 border border-red-500/20">
|
||||
<p className="text-xs text-red-400">{commitResult.error}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success indicator */}
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
|
||||
Reference in New Issue
Block a user