From 9b16e2ed7536b114a47699decf41a36ec311348b Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Wed, 30 Jul 2025 14:02:56 +0100 Subject: [PATCH] remove OCR language picker from settings code to make it a little easier to read. Added the link to docs on using different languages with OCR and more --- .../public/locales/en-GB/translation.json | 32 +++++++++++++++++- .../shared/LanguageSelector.module.css | 6 ++-- .../components/shared/LanguageSelector.tsx | 7 ++-- .../components/tools/ocr/LanguagePicker.tsx | 4 +-- .../src/components/tools/ocr/OCRSettings.tsx | 33 +++++++++---------- 5 files changed, 56 insertions(+), 26 deletions(-) diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index eedcb7885..1022b971d 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -833,7 +833,37 @@ }, "help": "Please read this documentation on how to use this for other languages and/or use not in docker", "credit": "This service uses qpdf and Tesseract for OCR.", - "submit": "Process PDF with OCR" + "submit": "Process PDF with OCR", + "settings": { + "title": "OCR Configuration", + "ocrMode": { + "label": "OCR Mode", + "auto": "Auto (skip text layers)", + "force": "Force (re-OCR all, replace text)", + "strict": "Strict (abort if text found)" + }, + "languages": { + "label": "Languages", + "placeholder": "Select primary language for OCR" + }, + "output": { + "label": "Output", + "searchablePdf": "Searchable PDF (sandwich)", + "sandwich": "Sandwich" + }, + "additionalOptions": { + "label": "Additional Options", + "placeholder": "Select Options", + "sidecar": "Create sidecar text file", + "deskew": "Deskew pages", + "clean": "Clean input file", + "cleanFinal": "Clean final output" + } + }, + "languagePicker": { + "additionalLanguages": "Looking for additional languages?", + "viewSetupGuide": "View setup guide →" + } }, "extractImages": { "tags": "picture,photo,save,archive,zip,capture,grab", diff --git a/frontend/src/components/shared/LanguageSelector.module.css b/frontend/src/components/shared/LanguageSelector.module.css index 09010dc4a..431f43806 100644 --- a/frontend/src/components/shared/LanguageSelector.module.css +++ b/frontend/src/components/shared/LanguageSelector.module.css @@ -44,7 +44,7 @@ /* Dark theme support */ [data-mantine-color-scheme="dark"] .languageItem { - border-right-color: var(--mantine-color-dark-4); + border-right-color: var(--mantine-color-dark-3); } [data-mantine-color-scheme="dark"] .languageItem:nth-child(4n) { @@ -52,11 +52,11 @@ } [data-mantine-color-scheme="dark"] .languageItem:nth-child(2n) { - border-right-color: var(--mantine-color-dark-4); + border-right-color: var(--mantine-color-dark-3); } [data-mantine-color-scheme="dark"] .languageItem:nth-child(3n) { - border-right-color: var(--mantine-color-dark-4); + border-right-color: var(--mantine-color-dark-3); } /* Responsive text visibility */ diff --git a/frontend/src/components/shared/LanguageSelector.tsx b/frontend/src/components/shared/LanguageSelector.tsx index 83cecc6b0..9da9d75c1 100644 --- a/frontend/src/components/shared/LanguageSelector.tsx +++ b/frontend/src/components/shared/LanguageSelector.tsx @@ -102,7 +102,7 @@ const LanguageSelector = () => { styles={{ root: { border: 'none', - color: colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7], + color: colorScheme === 'dark' ? theme.colors.gray[1] : theme.colors.gray[7], transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', '&:hover': { backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], @@ -125,6 +125,7 @@ const LanguageSelector = () => { padding: '12px', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)', + backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.white, border: colorScheme === 'dark' ? `1px solid ${theme.colors.dark[4]}` : `1px solid ${theme.colors.gray[3]}`, }} > @@ -157,9 +158,9 @@ const LanguageSelector = () => { colorScheme === 'dark' ? theme.colors.blue[8] : theme.colors.blue[1] ) : 'transparent', color: option.value === i18n.language ? ( - colorScheme === 'dark' ? theme.colors.blue[2] : theme.colors.blue[7] + colorScheme === 'dark' ? theme.white : theme.colors.blue[9] ) : ( - colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7] + colorScheme === 'dark' ? theme.white : theme.colors.gray[7] ), transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)', '&:hover': { diff --git a/frontend/src/components/tools/ocr/LanguagePicker.tsx b/frontend/src/components/tools/ocr/LanguagePicker.tsx index 91b8114ad..baf684089 100644 --- a/frontend/src/components/tools/ocr/LanguagePicker.tsx +++ b/frontend/src/components/tools/ocr/LanguagePicker.tsx @@ -200,7 +200,7 @@ const LanguagePicker: React.FC = ({ fontSize: '12px' }}> - Looking for additional languages? + {t('ocr.languagePicker.additionalLanguages', 'Looking for additional languages?')} = ({ style={{ textDecoration: 'underline', cursor: 'pointer' }} onClick={() => window.open('https://docs.stirlingpdf.com/Advanced%20Configuration/OCR', '_blank')} > - View setup guide → + {t('ocr.languagePicker.viewSetupGuide', 'View setup guide →')} diff --git a/frontend/src/components/tools/ocr/OCRSettings.tsx b/frontend/src/components/tools/ocr/OCRSettings.tsx index be981bdb0..b554ba400 100644 --- a/frontend/src/components/tools/ocr/OCRSettings.tsx +++ b/frontend/src/components/tools/ocr/OCRSettings.tsx @@ -25,24 +25,24 @@ const OCRSettings: React.FC = ({ // Define the additional options available const additionalOptionsData = [ - { value: 'sidecar', label: 'Create sidecar text file' }, - { value: 'deskew', label: 'Deskew pages' }, - { value: 'clean', label: 'Clean input file' }, - { value: 'cleanFinal', label: 'Clean final output' }, + { value: 'sidecar', label: t('ocr.settings.additionalOptions.sidecar', 'Create sidecar text file') }, + { value: 'deskew', label: t('ocr.settings.additionalOptions.deskew', 'Deskew pages') }, + { value: 'clean', label: t('ocr.settings.additionalOptions.clean', 'Clean input file') }, + { value: 'cleanFinal', label: t('ocr.settings.additionalOptions.cleanFinal', 'Clean final output') }, ]; return ( - OCR Configuration + {t('ocr.settings.title', 'OCR Configuration')} onParameterChange('ocrRenderType', value || 'hocr')} data={[ - { value: 'hocr', label: 'Searchable PDF (sandwich)' }, - { value: 'sandwich', label: 'Sandwich' }, + { value: 'hocr', label: t('ocr.settings.output.searchablePdf', 'Searchable PDF (sandwich)') }, + { value: 'sandwich', label: t('ocr.settings.output.sandwich', 'Sandwich') }, ]} disabled={disabled} /> @@ -73,15 +73,14 @@ const OCRSettings: React.FC = ({ onParameterChange('additionalOptions', value)} data={additionalOptionsData} disabled={disabled} clearable comboboxProps={{ position: 'top', middlewares: { flip: false, shift: false } }} - /> );