Update PDF processing functions

README.md

@@ -96,36 +96,29 @@ Export your OCR results in the format you need:
 5. View results with bounding boxes (if enabled)
 6. Copy or download the extracted text
 
-### Processing PDFs (Multi-Page Documents) - NEW!
+### Processing PDFs (Multi-Page Documents)
 
-1. Select **"PDF Processing"** mode in the toggle
+Processing a PDF is just another way to create an OCR Job — it produces plain,
+editable text exactly like single-image OCR, so it flows into the same review and
+commit workflow.
+
+1. Select **"PDF Processing"** in the file-type toggle
 2. Upload a PDF file (up to 100MB)
-3. Choose your OCR mode (same as above)
+3. Pick a **Model** and **Mode** (same as image OCR)
-4. Select **output format**:
+4. Click **"Process PDF"**
-   - 📝 **Markdown** - For documentation, wikis, GitHub
+5. All pages are OCR'd and concatenated into one plain-text result
-   - 🌐 **HTML** - For web publishing, styled viewing
+6. Edit the text, fill in metadata, and **Commit Job** — the PDF is stored as the
-   - 📄 **DOCX** - For Word editing, professional documents
+   job's source document (shown alongside the text in Browse Jobs)
-   - 📊 **JSON** - For programmatic access, data extraction
+
-5. Click **"Process PDF"**
+> The `/api/process-pdf` endpoint still supports Markdown / HTML / DOCX / JSON
-6. Watch the progress bar as pages are processed
+> exports for programmatic use (see the API reference below); the UI uses the
-7. Your file downloads automatically when complete!
+> plain-text (JSON) path to drive the job workflow.
 
 ### Tips for Best Results
 
 - **For scanned documents**: Use higher DPI (144-300) in advanced settings
 - **For tables**: The model excels at extracting structured data
 - **For formulas**: Mathematical notation is preserved in output
-- **For images in PDFs**: Enable "Extract Images" to include them in output
-- **For large PDFs**: JSON format is fastest, DOCX takes longer due to formatting
-
-### Output Format Comparison
-
-| Format | Best For | Features | File Size |
-|--------|----------|----------|-----------|
-| **Markdown** | Documentation, GitHub, wikis | Clean text, tables, code blocks | Smallest |
-| **HTML** | Web viewing, sharing | Styled output, embedded images, tables | Medium |
-| **DOCX** | Editing, professional docs | Full formatting, images, tables | Largest |
-| **JSON** | Data processing, APIs | Structured data, metadata, page info | Small |
 
 ## Features
 

frontend/src/App.jsx

@@ -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()
+      let text = ''
-      formData.append('image', image)
+      let responseData = null
-      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, {
+      if (fileType === 'pdf') {
-        headers: { 'Content-Type': 'multipart/form-data' },
+        // Process the whole PDF into one plain-text blob (all pages), then feed it
-      })
+        // into the same edit/review/commit flow as image OCR.
-      setResult(response.data)
+        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' ? (
+                  <motion.button
-                    <PDFProcessor
+                    onClick={handleSubmit}
-                      pdfFile={image} mode={mode} prompt={prompt} model={model}
+                    disabled={!image || loading}
-                      advancedSettings={advancedSettings} includeCaption={includeCaption}
+                    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 } : {}}
-                    <>
+                  >
-                      <motion.button
+                    <div className="absolute inset-0 bg-gradient-to-r from-purple-600 via-pink-600 to-cyan-600 animate-gradient" />
-                        onClick={handleSubmit}
+                    <div className="relative bg-dark-100 px-8 py-4 rounded-2xl flex items-center justify-center gap-3">
-                        disabled={!image || loading}
+                      {loading ? (
-                        className={`w-full relative overflow-hidden rounded-2xl p-[2px] ${!image || loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                        <><Loader2 className="w-5 h-5 animate-spin" /><span className="font-semibold">Processing...</span></>
-                        whileHover={!loading && image ? { scale: 1.02 } : {}}
+                      ) : (
-                        whileTap={!loading && image ? { scale: 0.98 } : {}}
+                        <><Zap className="w-5 h-5" /><span className="font-semibold">{fileType === 'pdf' ? 'Process PDF' : 'Analyze Image'}</span></>
-                      >
-                        <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>
                       )}
-                    </>
+                    </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>
 

frontend/src/components/JobsPanel.jsx

@@ -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
+              {(job.original_filename || '').toLowerCase().endsWith('.pdf') ? (
-                src={`${API_BASE}/jobs/${job.id}/image`}
+                <object
-                alt="Job source"
+                  data={`${API_BASE}/jobs/${job.id}/image`}
-                className="w-full h-full object-contain"
+                  type="application/pdf"
-                onError={e => { e.target.style.display = 'none' }}
+                  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 */}

frontend/src/components/PDFProcessor.jsx

@@ -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