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>
|
||||
|
||||
Reference in New Issue
Block a user