import axios from 'axios'; import React, { useCallback, useEffect, useState } from 'react'; import { FaSpinner } from 'react-icons/fa'; import { Document, DocumentSuggestion } from './DocumentProcessor'; const ExperimentalOCR: React.FC = () => { const refreshInterval = 1000; // Refresh interval in milliseconds const [documentId, setDocumentId] = useState(0); const [jobId, setJobId] = useState(''); const [ocrResult, setOcrResult] = useState(''); const [status, setStatus] = useState(''); const [error, setError] = useState(''); const [pagesDone, setPagesDone] = useState(0); // New state for pages done const [saving, setSaving] = useState(false); // New state for saving const [documentDetails, setDocumentDetails] = useState(null); // New state for document details const fetchDocumentDetails = useCallback(async () => { if (!documentId) return; try { const response = await axios.get(`/api/documents/${documentId}`); setDocumentDetails(response.data); } catch (err) { console.error("Error fetching document details:", err); setError("Failed to fetch document details."); } }, [documentId]); const submitOCRJob = async () => { setStatus(''); setError(''); setJobId(''); setOcrResult(''); setPagesDone(0); // Reset pages done try { setStatus('Fetching document details...'); await fetchDocumentDetails(); // Fetch document details before submitting the job setStatus('Submitting OCR job...'); const response = await axios.post(`/api/documents/${documentId}/ocr`); setJobId(response.data.job_id); setStatus('Job submitted. Processing...'); } catch (err) { console.error(err); setError('Failed to submit OCR job.'); } }; const checkJobStatus = async () => { if (!jobId) return; try { const response = await axios.get(`/api/jobs/ocr/${jobId}`); const jobStatus = response.data.status; setPagesDone(response.data.pages_done); // Update pages done if (jobStatus === 'completed') { setOcrResult(response.data.result); setStatus('OCR completed successfully.'); } else if (jobStatus === 'failed') { setError(response.data.error); setStatus('OCR failed.'); } else { setStatus(`Job status: ${jobStatus}. This may take a few minutes.`); // Automatically check again after a delay setTimeout(checkJobStatus, refreshInterval); } } catch (err) { console.error(err); setError('Failed to check job status.'); } }; const handleSaveContent = async () => { setSaving(true); setError(null); try { if (!documentDetails) { setError('Document details not fetched.'); throw new Error('Document details not fetched.'); } const requestPayload: DocumentSuggestion = { id: documentId, original_document: documentDetails, // Use fetched document details suggested_content: ocrResult, }; await axios.patch("/api/update-documents", [requestPayload]); setStatus('Content saved successfully.'); } catch (err) { console.error("Error saving content:", err); setError("Failed to save content."); } finally { setSaving(false); } }; // Start checking job status when jobId is set useEffect(() => { if (jobId) { checkJobStatus(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [jobId]); return (

OCR via LLMs (Experimental)

This is an experimental feature. Results may vary, and processing may take some time.

setDocumentId(Number(e.target.value))} className="border border-gray-300 dark:border-gray-700 rounded w-full p-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter the document ID" />
{status && (
{status.includes('in_progress') && ( {status} )} {!status.includes('in_progress') && status} {pagesDone > 0 && (
Pages processed: {pagesDone}
)}
)} {error && (
{error}
)} {ocrResult && (

OCR Result:

{ocrResult}
)}
); }; export default ExperimentalOCR;