Update PDF processing functions
This commit is contained in:
Aaron Roberts
@@ -1,4 +1,4 @@
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { useState, useCallback, useEffect, useMemo } from 'react'
|
||||
import { useSuggestions } from './hooks/useSuggestions'
|
||||
import { useModels } from './hooks/useModels'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
@@ -11,7 +11,6 @@ import ModeSelector from './components/ModeSelector'
|
||||
import ModelSelector from './components/ModelSelector'
|
||||
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'
|
||||
@@ -65,6 +64,13 @@ function App() {
|
||||
}
|
||||
}, [models, model])
|
||||
|
||||
// Blob URL for previewing an uploaded PDF in the result/review view
|
||||
const pdfUrl = useMemo(
|
||||
() => (fileType === 'pdf' && image ? URL.createObjectURL(image) : null),
|
||||
[fileType, image],
|
||||
)
|
||||
useEffect(() => () => { if (pdfUrl) URL.revokeObjectURL(pdfUrl) }, [pdfUrl])
|
||||
|
||||
// Show the full-screen result view once at least one committable mode has a result
|
||||
const showResultView = view === 'new_job' && Object.keys(modeResults).length > 0
|
||||
|
||||
@@ -101,31 +107,60 @@ function App() {
|
||||
}, [imagePreview, fileType])
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!image) { setError('Please upload an image first'); return }
|
||||
if (!image) { setError(`Please upload ${fileType === 'pdf' ? 'a PDF' : 'an image'} first`); return }
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setCommitResult(null)
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('image', image)
|
||||
if (model) formData.append('model', model)
|
||||
formData.append('mode', mode)
|
||||
formData.append('prompt', prompt)
|
||||
formData.append('grounding', mode === 'find_ref')
|
||||
formData.append('include_caption', includeCaption)
|
||||
formData.append('find_term', findTerm)
|
||||
formData.append('schema', '')
|
||||
formData.append('base_size', advancedSettings.base_size)
|
||||
formData.append('image_size', advancedSettings.image_size)
|
||||
formData.append('crop_mode', advancedSettings.crop_mode)
|
||||
formData.append('test_compress', advancedSettings.test_compress)
|
||||
let text = ''
|
||||
let responseData = null
|
||||
|
||||
const response = await axios.post(`${API_BASE}/ocr`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
setResult(response.data)
|
||||
if (fileType === 'pdf') {
|
||||
// Process the whole PDF into one plain-text blob (all pages), then feed it
|
||||
// into the same edit/review/commit flow as image OCR.
|
||||
const formData = new FormData()
|
||||
formData.append('pdf_file', image)
|
||||
if (model) formData.append('model', model)
|
||||
formData.append('mode', mode)
|
||||
formData.append('output_format', 'json')
|
||||
formData.append('extract_images', false)
|
||||
formData.append('grounding', false)
|
||||
formData.append('include_caption', includeCaption)
|
||||
formData.append('dpi', 144)
|
||||
formData.append('base_size', advancedSettings.base_size)
|
||||
formData.append('image_size', advancedSettings.image_size)
|
||||
formData.append('crop_mode', advancedSettings.crop_mode)
|
||||
|
||||
const response = await axios.post(`${API_BASE}/process-pdf`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
const pages = response.data?.pages || []
|
||||
text = pages.map(p => (p.text || '').trim()).filter(Boolean).join('\n\n')
|
||||
responseData = { text, metadata: response.data?.metadata, total_pages: response.data?.total_pages }
|
||||
} else {
|
||||
const formData = new FormData()
|
||||
formData.append('image', image)
|
||||
if (model) formData.append('model', model)
|
||||
formData.append('mode', mode)
|
||||
formData.append('prompt', prompt)
|
||||
formData.append('grounding', mode === 'find_ref')
|
||||
formData.append('include_caption', includeCaption)
|
||||
formData.append('find_term', findTerm)
|
||||
formData.append('schema', '')
|
||||
formData.append('base_size', advancedSettings.base_size)
|
||||
formData.append('image_size', advancedSettings.image_size)
|
||||
formData.append('crop_mode', advancedSettings.crop_mode)
|
||||
formData.append('test_compress', advancedSettings.test_compress)
|
||||
|
||||
const response = await axios.post(`${API_BASE}/ocr`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
responseData = response.data
|
||||
text = response.data.text || ''
|
||||
}
|
||||
|
||||
setResult(responseData)
|
||||
if (COMMITTABLE_MODES.has(mode)) {
|
||||
const text = response.data.text || ''
|
||||
setModeResults(prev => ({ ...prev, [mode]: text }))
|
||||
setEditedResults(prev => ({ ...prev, [mode]: text }))
|
||||
setActiveResultMode(mode)
|
||||
@@ -300,7 +335,15 @@ function App() {
|
||||
|
||||
{/* Image + Text */}
|
||||
<div className="grid gap-6" style={{ gridTemplateColumns: '1fr 1fr', height: '130vh' }}>
|
||||
{imagePreview && typeof imagePreview === 'string' ? (
|
||||
{fileType === 'pdf' && pdfUrl ? (
|
||||
<div className="glass rounded-2xl overflow-hidden bg-black/20 h-full">
|
||||
<object data={pdfUrl} type="application/pdf" className="w-full h-full">
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<p className="text-gray-500 text-sm">PDF preview unavailable</p>
|
||||
</div>
|
||||
</object>
|
||||
</div>
|
||||
) : imagePreview && typeof imagePreview === 'string' ? (
|
||||
<div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 h-full">
|
||||
<img
|
||||
src={imagePreview}
|
||||
@@ -509,39 +552,30 @@ function App() {
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{fileType === 'pdf' ? (
|
||||
<PDFProcessor
|
||||
pdfFile={image} mode={mode} prompt={prompt} model={model}
|
||||
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.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...</span></>
|
||||
) : (
|
||||
<><Zap className="w-5 h-5" /><span className="font-semibold">{fileType === 'pdf' ? 'Process PDF' : '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>
|
||||
|
||||
|
||||
@@ -318,12 +318,24 @@ function JobDetail({ jobId, onClose, onReviewed, onDeleted, suggestions = {} })
|
||||
{/* Image + Text */}
|
||||
<div className="grid gap-6" style={{ gridTemplateColumns: '1fr 1fr', height: '130vh' }}>
|
||||
<div className="glass rounded-2xl overflow-hidden flex items-center justify-center bg-black/20 h-full">
|
||||
<img
|
||||
src={`${API_BASE}/jobs/${job.id}/image`}
|
||||
alt="Job source"
|
||||
className="w-full h-full object-contain"
|
||||
onError={e => { e.target.style.display = 'none' }}
|
||||
/>
|
||||
{(job.original_filename || '').toLowerCase().endsWith('.pdf') ? (
|
||||
<object
|
||||
data={`${API_BASE}/jobs/${job.id}/image`}
|
||||
type="application/pdf"
|
||||
className="w-full h-full"
|
||||
>
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<p className="text-gray-500 text-sm">PDF preview unavailable</p>
|
||||
</div>
|
||||
</object>
|
||||
) : (
|
||||
<img
|
||||
src={`${API_BASE}/jobs/${job.id}/image`}
|
||||
alt="Job source"
|
||||
className="w-full h-full object-contain"
|
||||
onError={e => { e.target.style.display = 'none' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="glass rounded-2xl p-4 flex flex-col h-full">
|
||||
{/* Tabs — only show tabs that have content */}
|
||||
|
||||
@@ -1,234 +0,0 @@
|
||||
import { useState, useCallback } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import { FileText, Download, Loader2, CheckCircle2, AlertCircle } from 'lucide-react'
|
||||
import axios from 'axios'
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
||||
|
||||
function PDFProcessor({ pdfFile, mode, prompt, model, advancedSettings, includeCaption }) {
|
||||
const [processing, setProcessing] = useState(false)
|
||||
const [progress, setProgress] = useState(0)
|
||||
const [result, setResult] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
const [outputFormat, setOutputFormat] = useState('markdown')
|
||||
|
||||
const formats = [
|
||||
{ value: 'markdown', label: 'Markdown', ext: 'md', icon: '📝' },
|
||||
{ value: 'html', label: 'HTML', ext: 'html', icon: '🌐' },
|
||||
{ value: 'docx', label: 'Word', ext: 'docx', icon: '📄' },
|
||||
{ value: 'json', label: 'JSON', ext: 'json', icon: '📊' }
|
||||
]
|
||||
|
||||
const handleProcess = useCallback(async () => {
|
||||
if (!pdfFile) return
|
||||
|
||||
setProcessing(true)
|
||||
setError(null)
|
||||
setProgress(0)
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('pdf_file', pdfFile)
|
||||
if (model) formData.append('model', model)
|
||||
formData.append('mode', mode)
|
||||
formData.append('prompt', prompt)
|
||||
formData.append('output_format', outputFormat)
|
||||
formData.append('grounding', mode === 'find_ref')
|
||||
formData.append('include_caption', includeCaption)
|
||||
formData.append('extract_images', true)
|
||||
formData.append('dpi', 144)
|
||||
formData.append('base_size', advancedSettings.base_size)
|
||||
formData.append('image_size', advancedSettings.image_size)
|
||||
formData.append('crop_mode', advancedSettings.crop_mode)
|
||||
|
||||
const response = await axios.post(`${API_BASE}/process-pdf`, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
responseType: outputFormat === 'json' ? 'json' : 'blob',
|
||||
onUploadProgress: (progressEvent) => {
|
||||
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
|
||||
setProgress(percentCompleted)
|
||||
}
|
||||
})
|
||||
|
||||
if (outputFormat === 'json') {
|
||||
setResult(response.data)
|
||||
} else {
|
||||
// For file downloads (markdown, html, docx)
|
||||
const format = formats.find(f => f.value === outputFormat)
|
||||
const blob = new Blob([response.data], {
|
||||
type: response.headers['content-type']
|
||||
})
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = `ocr_result.${format.ext}`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
|
||||
setResult({
|
||||
success: true,
|
||||
message: `Document downloaded as ${format.label}`,
|
||||
format: outputFormat
|
||||
})
|
||||
}
|
||||
|
||||
setProgress(100)
|
||||
} catch (err) {
|
||||
console.error('PDF processing error:', err)
|
||||
setError(err.response?.data?.detail || err.message || 'Failed to process PDF')
|
||||
} finally {
|
||||
setProcessing(false)
|
||||
}
|
||||
}, [pdfFile, mode, prompt, model, outputFormat, includeCaption, advancedSettings])
|
||||
|
||||
const handleDownloadJSON = useCallback(() => {
|
||||
if (!result || outputFormat !== 'json') return
|
||||
|
||||
const blob = new Blob([JSON.stringify(result, null, 2)], { type: 'application/json' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'ocr_result.json'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}, [result, outputFormat])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Format Selector */}
|
||||
<div className="glass p-6 rounded-2xl space-y-3">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Output Format
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{formats.map((format) => (
|
||||
<motion.button
|
||||
key={format.value}
|
||||
onClick={() => setOutputFormat(format.value)}
|
||||
className={`p-3 rounded-xl text-sm font-medium transition-all ${
|
||||
outputFormat === format.value
|
||||
? '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 }}
|
||||
>
|
||||
<span className="mr-2">{format.icon}</span>
|
||||
{format.label}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Process Button */}
|
||||
<motion.button
|
||||
onClick={handleProcess}
|
||||
disabled={!pdfFile || processing}
|
||||
className={`w-full relative overflow-hidden rounded-2xl p-[2px] ${
|
||||
!pdfFile || processing ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
whileHover={!processing && pdfFile ? { scale: 1.02 } : {}}
|
||||
whileTap={!processing && pdfFile ? { 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">
|
||||
{processing ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span className="font-semibold">Processing PDF...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileText className="w-5 h-5" />
|
||||
<span className="font-semibold">Process PDF</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</motion.button>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<AnimatePresence>
|
||||
{processing && progress > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="glass p-4 rounded-2xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm text-gray-400">Processing...</span>
|
||||
<span className="text-sm font-medium text-purple-400">{progress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-dark-200 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
className="h-full bg-gradient-to-r from-purple-600 to-cyan-600"
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${progress}%` }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Error Display */}
|
||||
<AnimatePresence>
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="glass p-4 rounded-2xl border-red-500/50 bg-red-500/10 flex items-start gap-3"
|
||||
>
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-red-400">Processing Failed</p>
|
||||
<p className="text-xs text-red-300 mt-1">{error}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Success Display */}
|
||||
<AnimatePresence>
|
||||
{result && !error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="glass p-6 rounded-2xl border-green-500/50 bg-green-500/10"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-green-400">
|
||||
{result.message || 'PDF processed successfully!'}
|
||||
</p>
|
||||
{outputFormat === 'json' && result.pages && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<p className="text-xs text-gray-400">
|
||||
Processed {result.total_pages} page{result.total_pages > 1 ? 's' : ''}
|
||||
</p>
|
||||
<motion.button
|
||||
onClick={handleDownloadJSON}
|
||||
className="glass px-4 py-2 rounded-xl text-sm font-medium hover:bg-white/5 transition-colors flex items-center gap-2"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Download JSON
|
||||
</motion.button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PDFProcessor
|
||||
Reference in New Issue
Block a user