mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-03-04 02:20:19 +01:00
Tools/ocr/v2 (#4055)
# Description of Changes - Added the OCR tool - Added language mappings file to map selected browser language -> OCR language and OCR language codes -> english display values. TODO: Use the translation function to translate the languages rather than mapping them to english be default - Added chevron icons to tool step to show expand and collapsed state more visibly - Added a re-usable dropdown picker with a footer component --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
This commit is contained in:
EthanHealy01
GitHub
215
frontend/src/tools/OCR.tsx
Normal file
215
frontend/src/tools/OCR.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { Button, Stack, Text, Box } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { useToolFileSelection } from "../contexts/FileSelectionContext";
|
||||
|
||||
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
|
||||
import OperationButton from "../components/tools/shared/OperationButton";
|
||||
import ErrorNotification from "../components/tools/shared/ErrorNotification";
|
||||
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
|
||||
import ResultsPreview from "../components/tools/shared/ResultsPreview";
|
||||
|
||||
import OCRSettings from "../components/tools/ocr/OCRSettings";
|
||||
import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
|
||||
|
||||
import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
|
||||
import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
|
||||
const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { setCurrentMode } = useFileContext();
|
||||
const { selectedFiles } = useToolFileSelection();
|
||||
|
||||
const ocrParams = useOCRParameters();
|
||||
const ocrOperation = useOCROperation();
|
||||
|
||||
// Step expansion state management
|
||||
const [expandedStep, setExpandedStep] = useState<'files' | 'settings' | 'advanced' | null>('files');
|
||||
|
||||
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("ocr-pdf");
|
||||
|
||||
const hasFiles = selectedFiles.length > 0;
|
||||
const hasResults = ocrOperation.files.length > 0 || ocrOperation.downloadUrl !== null;
|
||||
const hasValidSettings = ocrParams.validateParameters();
|
||||
|
||||
useEffect(() => {
|
||||
ocrOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
}, [ocrParams.parameters, selectedFiles]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFiles.length > 0 && expandedStep === 'files') {
|
||||
setExpandedStep('settings');
|
||||
}
|
||||
}, [selectedFiles.length, expandedStep]);
|
||||
|
||||
// Collapse all steps when results appear
|
||||
useEffect(() => {
|
||||
if (hasResults) {
|
||||
setExpandedStep(null);
|
||||
}
|
||||
}, [hasResults]);
|
||||
|
||||
const handleOCR = async () => {
|
||||
try {
|
||||
await ocrOperation.executeOperation(
|
||||
ocrParams.parameters,
|
||||
selectedFiles
|
||||
);
|
||||
if (ocrOperation.files && onComplete) {
|
||||
onComplete(ocrOperation.files);
|
||||
}
|
||||
} catch (error) {
|
||||
if (onError) {
|
||||
onError(error instanceof Error ? error.message : 'OCR operation failed');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleThumbnailClick = (file: File) => {
|
||||
onPreviewFile?.(file);
|
||||
sessionStorage.setItem('previousMode', 'ocr');
|
||||
setCurrentMode('viewer');
|
||||
};
|
||||
|
||||
|
||||
// Step visibility and collapse logic
|
||||
const filesVisible = true;
|
||||
const settingsVisible = true;
|
||||
const resultsVisible = hasResults;
|
||||
|
||||
const filesCollapsed = expandedStep !== 'files';
|
||||
const settingsCollapsed = expandedStep !== 'settings';
|
||||
|
||||
const previewResults = useMemo(() =>
|
||||
ocrOperation.files?.map((file: File, index: number) => ({
|
||||
file,
|
||||
thumbnail: ocrOperation.thumbnails[index]
|
||||
})) || [],
|
||||
[ocrOperation.files, ocrOperation.thumbnails]
|
||||
);
|
||||
|
||||
return (
|
||||
<ToolStepContainer>
|
||||
<Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
|
||||
{/* Files Step */}
|
||||
<ToolStep
|
||||
title="Files"
|
||||
isVisible={filesVisible}
|
||||
isCollapsed={hasFiles ? filesCollapsed : false}
|
||||
isCompleted={hasFiles}
|
||||
onCollapsedClick={undefined}
|
||||
completedMessage={hasFiles && filesCollapsed ?
|
||||
selectedFiles.length === 1
|
||||
? `Selected: ${selectedFiles[0].name}`
|
||||
: `Selected: ${selectedFiles.length} files`
|
||||
: undefined}
|
||||
>
|
||||
<FileStatusIndicator
|
||||
selectedFiles={selectedFiles}
|
||||
placeholder="Select a PDF file in the main view to get started"
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
{/* Settings Step */}
|
||||
<ToolStep
|
||||
title="Settings"
|
||||
isVisible={settingsVisible}
|
||||
isCollapsed={settingsCollapsed}
|
||||
isCompleted={hasFiles && hasValidSettings}
|
||||
onCollapsedClick={() => {
|
||||
if (!hasFiles) return; // Only allow if files are selected
|
||||
setExpandedStep(expandedStep === 'settings' ? null : 'settings');
|
||||
}}
|
||||
completedMessage={hasFiles && hasValidSettings && settingsCollapsed ? "Basic settings configured" : undefined}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<OCRSettings
|
||||
parameters={ocrParams.parameters}
|
||||
onParameterChange={ocrParams.updateParameter}
|
||||
disabled={endpointLoading}
|
||||
/>
|
||||
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
|
||||
{/* Advanced Step */}
|
||||
<ToolStep
|
||||
title="Advanced"
|
||||
isVisible={true}
|
||||
isCollapsed={expandedStep !== 'advanced'}
|
||||
isCompleted={hasFiles && hasResults}
|
||||
onCollapsedClick={() => {
|
||||
if (!hasFiles) return; // Only allow if files are selected
|
||||
setExpandedStep(expandedStep === 'advanced' ? null : 'advanced');
|
||||
}}
|
||||
completedMessage={hasFiles && hasResults && expandedStep !== 'advanced' ? "OCR processing completed" : undefined}
|
||||
>
|
||||
<AdvancedOCRSettings
|
||||
advancedOptions={ocrParams.parameters.additionalOptions}
|
||||
ocrRenderType={ocrParams.parameters.ocrRenderType}
|
||||
onParameterChange={ocrParams.updateParameter}
|
||||
disabled={endpointLoading}
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
{/* Process Button - Available after all configuration */}
|
||||
{hasValidSettings && !hasResults && (
|
||||
<Box mt="md">
|
||||
<OperationButton
|
||||
onClick={handleOCR}
|
||||
isLoading={ocrOperation.isLoading}
|
||||
disabled={!ocrParams.validateParameters() || !hasFiles || !endpointEnabled}
|
||||
loadingText={t("loading")}
|
||||
submitText="Process OCR and Review"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Results Step */}
|
||||
<ToolStep
|
||||
title="Results"
|
||||
isVisible={resultsVisible}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
{ocrOperation.status && (
|
||||
<Text size="sm" c="dimmed">{ocrOperation.status}</Text>
|
||||
)}
|
||||
|
||||
<ErrorNotification
|
||||
error={ocrOperation.errorMessage}
|
||||
onClose={ocrOperation.clearError}
|
||||
/>
|
||||
|
||||
{ocrOperation.downloadUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
href={ocrOperation.downloadUrl}
|
||||
download={ocrOperation.downloadFilename}
|
||||
leftSection={<DownloadIcon />}
|
||||
color="green"
|
||||
fullWidth
|
||||
mb="md"
|
||||
>
|
||||
{t("download", "Download")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<ResultsPreview
|
||||
files={previewResults}
|
||||
onFileClick={handleThumbnailClick}
|
||||
isGeneratingThumbnails={ocrOperation.isGeneratingThumbnails}
|
||||
title="OCR Results"
|
||||
/>
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
</Stack>
|
||||
</ToolStepContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default OCR;
|
||||
Reference in New Issue
Block a user