Add job tracking with PostgreSQL, image storage, and review workflow
- Add PostgreSQL service to docker-compose with health check and postgres_data volume
- Mount ./ocr_images as bind volume for persistent image storage
- Add backend/database.py with schema init and get_db() context manager
- Add 5 new API endpoints: POST /api/jobs, GET /api/jobs (search), GET /api/jobs/{id},
GET /api/jobs/{id}/image, PUT /api/jobs/{id}/review
- Jobs are saved with author/book/chapter/page metadata, auto UUID, and submitted_at timestamp
- Jobs start as 'unreviewed'; review captures edited text, reviewer name, and reviewed_at
- Add MetadataForm.jsx (author/book/chapter/page inputs) to the New Job panel
- Add JobsPanel.jsx with search/filter, paginated list, and detail pane with review form
- Add "Commit Job" button to ResultPanel (plain_ocr mode only) with success/error feedback
- Add "New Job" / "Browse Jobs" navigation to the app header
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Aaron Roberts
@@ -1,16 +1,21 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText } from 'lucide-react'
|
||||
import { Sparkles, Zap, Loader2, Settings, Image as ImageIcon, FileText, Layers } from 'lucide-react'
|
||||
import ImageUpload from './components/ImageUpload'
|
||||
import ModeSelector from './components/ModeSelector'
|
||||
import ResultPanel from './components/ResultPanel'
|
||||
import AdvancedSettings from './components/AdvancedSettings'
|
||||
import PDFProcessor from './components/PDFProcessor'
|
||||
import MetadataForm from './components/MetadataForm'
|
||||
import JobsPanel from './components/JobsPanel'
|
||||
import axios from 'axios'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
||||
|
||||
function App() {
|
||||
const [view, setView] = useState('new_job') // 'new_job' | 'jobs'
|
||||
|
||||
// OCR state
|
||||
const [mode, setMode] = useState('plain_ocr')
|
||||
const [fileType, setFileType] = useState('image') // 'image' or 'pdf'
|
||||
const [image, setImage] = useState(null)
|
||||
@@ -20,7 +25,7 @@ function App() {
|
||||
const [error, setError] = useState(null)
|
||||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||||
const [includeCaption, setIncludeCaption] = useState(false)
|
||||
|
||||
|
||||
// Form state
|
||||
const [prompt, setPrompt] = useState('')
|
||||
const [findTerm, setFindTerm] = useState('')
|
||||
@@ -31,12 +36,16 @@ function App() {
|
||||
test_compress: false
|
||||
})
|
||||
|
||||
// Job metadata
|
||||
const [metadata, setMetadata] = useState({ author: '', book: '', chapter: '', page: '' })
|
||||
|
||||
// Job commit state
|
||||
const [commitLoading, setCommitLoading] = useState(false)
|
||||
const [commitResult, setCommitResult] = useState(null)
|
||||
|
||||
const handleFileTypeChange = useCallback((newType) => {
|
||||
// Clear current file when switching types
|
||||
setImage(null)
|
||||
if (imagePreview) {
|
||||
URL.revokeObjectURL(imagePreview)
|
||||
}
|
||||
if (imagePreview) URL.revokeObjectURL(imagePreview)
|
||||
setImagePreview(null)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
@@ -45,24 +54,17 @@ function App() {
|
||||
|
||||
const handleImageSelect = useCallback((file) => {
|
||||
if (file === null) {
|
||||
// Clear everything when removing image
|
||||
setImage(null)
|
||||
if (imagePreview && fileType === 'image') {
|
||||
URL.revokeObjectURL(imagePreview)
|
||||
}
|
||||
if (imagePreview && fileType === 'image') URL.revokeObjectURL(imagePreview)
|
||||
setImagePreview(null)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
} else {
|
||||
setImage(file)
|
||||
// Only create preview URL for images, not PDFs
|
||||
if (fileType === 'image') {
|
||||
setImagePreview(URL.createObjectURL(file))
|
||||
} else {
|
||||
setImagePreview(file) // Just store the file for PDFs
|
||||
}
|
||||
setImagePreview(fileType === 'image' ? URL.createObjectURL(file) : file)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
setCommitResult(null)
|
||||
}
|
||||
}, [imagePreview, fileType])
|
||||
|
||||
@@ -71,16 +73,15 @@ function App() {
|
||||
setError('Please upload an image first')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setCommitResult(null)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('image', image)
|
||||
formData.append('mode', mode)
|
||||
formData.append('prompt', prompt)
|
||||
// Enable grounding only for find mode
|
||||
formData.append('grounding', mode === 'find_ref')
|
||||
formData.append('include_caption', includeCaption)
|
||||
formData.append('find_term', findTerm)
|
||||
@@ -91,11 +92,8 @@ function App() {
|
||||
formData.append('test_compress', advancedSettings.test_compress)
|
||||
|
||||
const response = await axios.post(`${API_BASE}/ocr`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
|
||||
setResult(response.data)
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.detail || err.message || 'An error occurred')
|
||||
@@ -104,23 +102,38 @@ function App() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
if (result?.text) {
|
||||
navigator.clipboard.writeText(result.text)
|
||||
const handleCommitJob = useCallback(async () => {
|
||||
if (!image || !result?.text) return
|
||||
setCommitLoading(true)
|
||||
setCommitResult(null)
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('image', image)
|
||||
formData.append('author', metadata.author)
|
||||
formData.append('book', metadata.book)
|
||||
formData.append('chapter', metadata.chapter)
|
||||
formData.append('page', metadata.page)
|
||||
formData.append('ocr_text', result.text)
|
||||
formData.append('mode', mode)
|
||||
|
||||
const response = await axios.post(`${API_BASE}/jobs`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
setCommitResult({ success: true, job: response.data })
|
||||
} catch (err) {
|
||||
setCommitResult({ success: false, error: err.response?.data?.detail || err.message })
|
||||
} finally {
|
||||
setCommitLoading(false)
|
||||
}
|
||||
}, [image, result, metadata, mode])
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
if (result?.text) navigator.clipboard.writeText(result.text)
|
||||
}, [result])
|
||||
|
||||
const handleDownload = useCallback(() => {
|
||||
if (!result?.text) return
|
||||
|
||||
const extensions = {
|
||||
plain_ocr: 'txt',
|
||||
describe: 'txt',
|
||||
find_ref: 'txt',
|
||||
freeform: 'txt',
|
||||
}
|
||||
|
||||
const ext = extensions[mode] || 'txt'
|
||||
const ext = { plain_ocr: 'txt', describe: 'txt', find_ref: 'txt', freeform: 'txt' }[mode] || 'txt'
|
||||
const blob = new Blob([result.text], { type: 'text/plain' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
@@ -138,27 +151,13 @@ function App() {
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxIDAgNiAyLjY5IDYgNnMtMi42OSA2LTYgNi02LTIuNjktNi02IDIuNjktNiA2LTZ6TTI0IDZjMy4zMSAwIDYgMi42OSA2IDZzLTIuNjkgNi02IDYtNi0yLjY5LTYtNiAyLjY5LTYgNi02ek00OCAzNmMzLjMxIDAgNiAyLjY5IDYgNnMtMi42OSA2LTYgNi02LTIuNjktNi02IDIuNjktNiA2LTZ6IiBzdHJva2U9InJnYmEoMTQ3LCA1MSwgMjM0LCAwLjEpIiBzdHJva2Utd2lkdGg9IjIiLz48L2c+PC9zdmc+')] opacity-30" />
|
||||
<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"
|
||||
}}
|
||||
animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
|
||||
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"
|
||||
}}
|
||||
animate={{ scale: [1.2, 1, 1.2], opacity: [0.5, 0.3, 0.5] }}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -166,7 +165,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
|
||||
<motion.div
|
||||
className="flex items-center gap-3"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
@@ -182,173 +181,229 @@ function App() {
|
||||
<p className="text-xs text-gray-400">Next-Gen Vision AI</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex gap-2">
|
||||
<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 }}
|
||||
>
|
||||
<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 }}
|
||||
>
|
||||
<Layers className="w-4 h-4" />
|
||||
Browse Jobs
|
||||
</motion.button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Left Panel - Upload & Controls */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* File Type Toggle */}
|
||||
<div className="glass p-4 rounded-2xl">
|
||||
<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 }}
|
||||
>
|
||||
<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 }}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
PDF Processing
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mode Selector with integrated inputs */}
|
||||
<ModeSelector
|
||||
mode={mode}
|
||||
onModeChange={setMode}
|
||||
prompt={prompt}
|
||||
onPromptChange={setPrompt}
|
||||
findTerm={findTerm}
|
||||
onFindTermChange={setFindTerm}
|
||||
/>
|
||||
|
||||
{/* Image/PDF Upload */}
|
||||
<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 }}
|
||||
<AnimatePresence mode="wait">
|
||||
{view === 'jobs' ? (
|
||||
<motion.div
|
||||
key="jobs"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
>
|
||||
<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 }}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Action Button / PDF Processor */}
|
||||
{fileType === 'pdf' ? (
|
||||
<PDFProcessor
|
||||
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' : ''
|
||||
}`}
|
||||
whileHover={!loading && image ? { scale: 1.02 } : {}}
|
||||
whileTap={!loading && image ? { scale: 0.98 } : {}}
|
||||
<JobsPanel />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="new_job"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
>
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{/* Left Panel - Upload & Controls */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="w-5 h-5" />
|
||||
<span className="font-semibold">Analyze Image</span>
|
||||
</>
|
||||
)}
|
||||
{/* File Type Toggle */}
|
||||
<div className="glass p-4 rounded-2xl">
|
||||
<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 }}
|
||||
>
|
||||
<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 }}
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
PDF Processing
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.button>
|
||||
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="glass p-4 rounded-2xl border-red-500/50 bg-red-500/10"
|
||||
{/* 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}
|
||||
/>
|
||||
|
||||
{/* Image/PDF Upload */}
|
||||
<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 }}
|
||||
>
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
<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 }}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Right Panel - Results */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<ResultPanel
|
||||
result={result}
|
||||
loading={loading}
|
||||
imagePreview={imagePreview}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
{/* Advanced Settings Panel */}
|
||||
<AnimatePresence>
|
||||
{showAdvanced && (
|
||||
<AdvancedSettings
|
||||
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}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<motion.button
|
||||
onClick={handleSubmit}
|
||||
disabled={!image || loading}
|
||||
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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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 }}
|
||||
className="glass p-4 rounded-2xl border-red-500/50 bg-red-500/10"
|
||||
>
|
||||
<p className="text-sm text-red-400">{error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Right Panel - Results */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<ResultPanel
|
||||
result={result}
|
||||
loading={loading}
|
||||
imagePreview={imagePreview}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
onCommitJob={mode === 'plain_ocr' && result ? handleCommitJob : null}
|
||||
commitLoading={commitLoading}
|
||||
commitResult={commitResult}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="mt-20 border-t border-white/10 glass">
|
||||
<div className="max-w-7xl mx-auto px-6 py-8 text-center space-y-2">
|
||||
<p className="text-sm text-gray-400">
|
||||
Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span> •
|
||||
Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span> •
|
||||
Built with <span className="text-pink-400">♥</span> using React + FastAPI
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
|
||||
492
frontend/src/components/JobsPanel.jsx
Normal file
492
frontend/src/components/JobsPanel.jsx
Normal file
@@ -0,0 +1,492 @@
|
||||
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,
|
||||
} from 'lucide-react'
|
||||
import axios from 'axios'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
||||
|
||||
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,
|
||||
}
|
||||
|
||||
function StatusBadge({ status }) {
|
||||
const Icon = STATUS_ICONS[status] || 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" />
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
function MetaRow({ icon: Icon, label, value }) {
|
||||
if (!value) return null
|
||||
return (
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<Icon className="w-4 h-4 text-purple-400 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-400 flex-shrink-0">{label}:</span>
|
||||
<span className="text-gray-200">{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function JobDetail({ jobId, onClose, onReviewed }) {
|
||||
const [job, setJob] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
const [editedText, setEditedText] = useState('')
|
||||
const [reviewerName, setReviewerName] = useState('')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [reviewResult, setReviewResult] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setReviewResult(null)
|
||||
|
||||
axios.get(`${API_BASE}/jobs/${jobId}`)
|
||||
.then(res => {
|
||||
if (!cancelled) {
|
||||
setJob(res.data)
|
||||
setEditedText(res.data.reviewed_text ?? res.data.ocr_text ?? '')
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
if (!cancelled) setError(err.response?.data?.detail || err.message)
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false)
|
||||
})
|
||||
|
||||
return () => { cancelled = true }
|
||||
}, [jobId])
|
||||
|
||||
const handleMarkReviewed = async () => {
|
||||
if (!reviewerName.trim()) {
|
||||
setReviewResult({ success: false, error: 'Reviewer name is required.' })
|
||||
return
|
||||
}
|
||||
setSubmitting(true)
|
||||
setReviewResult(null)
|
||||
try {
|
||||
const res = await axios.put(`${API_BASE}/jobs/${jobId}/review`, {
|
||||
reviewed_text: editedText,
|
||||
reviewer_name: reviewerName.trim(),
|
||||
})
|
||||
setJob(res.data)
|
||||
setReviewResult({ success: true })
|
||||
onReviewed(res.data)
|
||||
} catch (err) {
|
||||
setReviewResult({ success: false, error: err.response?.data?.detail || err.message })
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
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'
|
||||
|
||||
return (
|
||||
<div className="glass rounded-2xl flex flex-col h-full overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-white/10 flex-shrink-0">
|
||||
<h3 className="font-semibold text-gray-200">Job Detail</h3>
|
||||
<button onClick={onClose} className="glass glass-hover p-1.5 rounded-lg">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5 space-y-5">
|
||||
{loading && (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 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>
|
||||
)}
|
||||
|
||||
{job && !loading && (
|
||||
<>
|
||||
{/* Status + IDs */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<StatusBadge status={job.status} />
|
||||
<span className="text-xs text-gray-500 font-mono">{job.id}</span>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="glass p-4 rounded-xl space-y-2">
|
||||
<MetaRow icon={User} label="Author" value={job.author} />
|
||||
<MetaRow icon={BookOpen} label="Book" value={job.book} />
|
||||
<MetaRow icon={Hash} label="Chapter" value={job.chapter} />
|
||||
<MetaRow icon={FileText} label="Page" value={job.page} />
|
||||
<MetaRow icon={Calendar} label="Submitted" value={job.submitted_at ? new Date(job.submitted_at).toLocaleString() : null} />
|
||||
{job.mode && <MetaRow icon={FileText} label="Mode" value={job.mode} />}
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
<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>
|
||||
<img
|
||||
src={`${API_BASE}/jobs/${job.id}/image`}
|
||||
alt="Job source"
|
||||
className="w-full rounded-xl border border-white/10 bg-black/30"
|
||||
onError={e => { e.target.style.display = 'none' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* OCR / Reviewed text */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 mb-2">
|
||||
{job.status === 'reviewed' ? 'Reviewed Text' : 'OCR Text (editable)'}
|
||||
</p>
|
||||
{job.status === 'reviewed' ? (
|
||||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-60 overflow-y-auto">
|
||||
<pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
|
||||
{job.reviewed_text}
|
||||
</pre>
|
||||
</div>
|
||||
) : (
|
||||
<textarea
|
||||
value={editedText}
|
||||
onChange={e => setEditedText(e.target.value)}
|
||||
rows={8}
|
||||
className={`${inputClass} resize-y font-mono`}
|
||||
placeholder="OCR text will appear here for editing..."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Original OCR text (collapsed) for reviewed jobs */}
|
||||
{job.status === 'reviewed' && job.ocr_text && (
|
||||
<details className="glass rounded-xl overflow-hidden">
|
||||
<summary className="px-4 py-3 cursor-pointer text-sm text-gray-400 hover:bg-white/5 transition-colors">
|
||||
Original OCR Text
|
||||
</summary>
|
||||
<div className="px-4 py-3 border-t border-white/10">
|
||||
<pre className="text-sm text-gray-500 whitespace-pre-wrap font-mono">
|
||||
{job.ocr_text}
|
||||
</pre>
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
|
||||
{/* Review info for reviewed jobs */}
|
||||
{job.status === 'reviewed' && (
|
||||
<div className="glass p-4 rounded-xl space-y-2">
|
||||
<MetaRow icon={User} label="Reviewer" value={job.reviewer_name} />
|
||||
<MetaRow icon={Calendar} label="Reviewed" value={job.reviewed_at ? new Date(job.reviewed_at).toLocaleString() : null} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mark Reviewed form */}
|
||||
{job.status === 'unreviewed' && (
|
||||
<div className="glass p-4 rounded-xl space-y-3 border border-purple-500/20">
|
||||
<p className="text-sm font-medium text-gray-300">Mark as Reviewed</p>
|
||||
<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>
|
||||
|
||||
{reviewResult && (
|
||||
<div className={`p-3 rounded-lg text-sm ${reviewResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
|
||||
{reviewResult.success ? 'Job marked as reviewed!' : reviewResult.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<motion.button
|
||||
onClick={handleMarkReviewed}
|
||||
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'
|
||||
: '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...</>
|
||||
) : (
|
||||
<><Save className="w-4 h-4" /> Mark Reviewed</>
|
||||
)}
|
||||
</motion.button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function JobsPanel() {
|
||||
const [search, setSearch] = useState('')
|
||||
const [filterStatus, setFilterStatus] = useState('')
|
||||
const [filterAuthor, setFilterAuthor] = useState('')
|
||||
const [filterBook, setFilterBook] = useState('')
|
||||
const [jobs, setJobs] = useState([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [page, setPage] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const [selectedJobId, setSelectedJobId] = useState(null)
|
||||
|
||||
const LIMIT = 20
|
||||
|
||||
const fetchJobs = useCallback(async (pageNum = 0) => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const params = new URLSearchParams()
|
||||
if (search.trim()) params.set('search', search.trim())
|
||||
if (filterStatus) params.set('status', filterStatus)
|
||||
if (filterAuthor.trim()) params.set('author', filterAuthor.trim())
|
||||
if (filterBook.trim()) params.set('book', filterBook.trim())
|
||||
params.set('limit', LIMIT)
|
||||
params.set('offset', pageNum * LIMIT)
|
||||
|
||||
const res = await axios.get(`${API_BASE}/jobs?${params}`)
|
||||
setJobs(res.data.jobs)
|
||||
setTotal(res.data.total)
|
||||
setPage(pageNum)
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.detail || err.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [search, filterStatus, filterAuthor, filterBook])
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
fetchJobs(0)
|
||||
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault()
|
||||
fetchJobs(0)
|
||||
}
|
||||
|
||||
const handleReviewed = (updatedJob) => {
|
||||
setJobs(prev => prev.map(j => j.id === updatedJob.id ? { ...j, ...updatedJob } : j))
|
||||
}
|
||||
|
||||
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'
|
||||
|
||||
return (
|
||||
<div className="grid lg:grid-cols-2 gap-6 h-full">
|
||||
{/* Left: Search + List */}
|
||||
<div className="space-y-4">
|
||||
{/* Search form */}
|
||||
<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>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={e => setFilterStatus(e.target.value)}
|
||||
className={`${inputClass} col-span-1`}
|
||||
>
|
||||
<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} col-span-1`}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={filterBook}
|
||||
onChange={e => setFilterBook(e.target.value)}
|
||||
placeholder="Book..."
|
||||
className={`${inputClass} col-span-1`}
|
||||
/>
|
||||
</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>
|
||||
|
||||
{/* Results */}
|
||||
<div className="space-y-2">
|
||||
{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>
|
||||
)}
|
||||
|
||||
<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>
|
||||
|
||||
{/* Pagination */}
|
||||
{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>
|
||||
<AnimatePresence mode="wait">
|
||||
{selectedJobId ? (
|
||||
<motion.div
|
||||
key={selectedJobId}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
className="h-full"
|
||||
>
|
||||
<JobDetail
|
||||
jobId={selectedJobId}
|
||||
onClose={() => setSelectedJobId(null)}
|
||||
onReviewed={handleReviewed}
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="empty"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center h-full min-h-64"
|
||||
>
|
||||
<Search className="w-10 h-10 mb-3 text-gray-600" />
|
||||
<p className="text-gray-400">Select a job to view details</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
63
frontend/src/components/MetadataForm.jsx
Normal file
63
frontend/src/components/MetadataForm.jsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import { BookOpen } from 'lucide-react'
|
||||
|
||||
export default function MetadataForm({ metadata, onChange }) {
|
||||
const { author, book, chapter, page } = metadata
|
||||
|
||||
const field = (key) => (e) => onChange({ ...metadata, [key]: e.target.value })
|
||||
|
||||
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'
|
||||
|
||||
return (
|
||||
<div className="glass p-4 rounded-2xl space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<BookOpen className="w-4 h-4 text-purple-400" />
|
||||
<h3 className="text-sm font-medium text-gray-300">Job Metadata</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Author</label>
|
||||
<input
|
||||
type="text"
|
||||
value={author}
|
||||
onChange={field('author')}
|
||||
placeholder="Author name"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Book</label>
|
||||
<input
|
||||
type="text"
|
||||
value={book}
|
||||
onChange={field('book')}
|
||||
placeholder="Book title"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Chapter</label>
|
||||
<input
|
||||
type="text"
|
||||
value={chapter}
|
||||
onChange={field('chapter')}
|
||||
placeholder="Chapter"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Page</label>
|
||||
<input
|
||||
type="text"
|
||||
value={page}
|
||||
onChange={field('page')}
|
||||
placeholder="Page number"
|
||||
className={inputClass}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</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 } from 'lucide-react'
|
||||
import { Copy, Download, Sparkles, Loader2, CheckCircle2, ChevronDown, Database } from 'lucide-react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import DOMPurify from 'dompurify'
|
||||
|
||||
export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload }) {
|
||||
export default function ResultPanel({ result, loading, imagePreview, onCopy, onDownload, onCommitJob, commitLoading, commitResult }) {
|
||||
const canvasRef = useRef(null)
|
||||
const imgRef = useRef(null)
|
||||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||||
@@ -313,6 +313,44 @@ 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