Add OCR, Background Removal, and PDF Editor features with tests
- Implemented OCR functionality using pytesseract for image and PDF text extraction. - Added Background Removal service using rembg for image processing. - Developed PDF Editor service for applying text annotations to PDF files. - Created corresponding API routes for OCR, Background Removal, and PDF Editor. - Added frontend components for OCR and Background Removal tools. - Integrated feature flagging for new tools, ensuring they are disabled by default. - Implemented comprehensive unit tests for OCR service, PDF editor, and background removal. - Updated documentation to reflect new features and usage instructions. - Added translations for new features in English, Arabic, and French.
This commit is contained in:
Your Name
@@ -36,6 +36,8 @@ const AddPageNumbers = lazy(() => import('@/components/tools/AddPageNumbers'));
|
||||
const PdfEditor = lazy(() => import('@/components/tools/PdfEditor'));
|
||||
const PdfFlowchart = lazy(() => import('@/components/tools/PdfFlowchart'));
|
||||
const ImageResize = lazy(() => import('@/components/tools/ImageResize'));
|
||||
const OcrTool = lazy(() => import('@/components/tools/OcrTool'));
|
||||
const RemoveBackground = lazy(() => import('@/components/tools/RemoveBackground'));
|
||||
|
||||
function LoadingFallback() {
|
||||
return (
|
||||
@@ -94,6 +96,8 @@ export default function App() {
|
||||
{/* Image Tools */}
|
||||
<Route path="/tools/image-converter" element={<ImageConverter />} />
|
||||
<Route path="/tools/image-resize" element={<ImageResize />} />
|
||||
<Route path="/tools/ocr" element={<OcrTool />} />
|
||||
<Route path="/tools/remove-background" element={<RemoveBackground />} />
|
||||
|
||||
{/* Video Tools */}
|
||||
<Route path="/tools/video-to-gif" element={<VideoToGif />} />
|
||||
|
||||
245
frontend/src/components/tools/OcrTool.tsx
Normal file
245
frontend/src/components/tools/OcrTool.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { ScanText } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
import { useFileStore } from '@/stores/fileStore';
|
||||
import { useConfig } from '@/hooks/useConfig';
|
||||
|
||||
type OcrMode = 'image' | 'pdf';
|
||||
|
||||
const LANGUAGES = [
|
||||
{ value: 'eng', label: 'English' },
|
||||
{ value: 'ara', label: 'العربية' },
|
||||
{ value: 'fra', label: 'Français' },
|
||||
];
|
||||
|
||||
export default function OcrTool() {
|
||||
const { t } = useTranslation();
|
||||
const { limits } = useConfig();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [lang, setLang] = useState('eng');
|
||||
const [mode, setMode] = useState<OcrMode>('image');
|
||||
const [extractedText, setExtractedText] = useState('');
|
||||
|
||||
const endpoint = mode === 'pdf' ? '/ocr/pdf' : '/ocr/image';
|
||||
const maxSize = mode === 'pdf' ? (limits.pdf ?? 20) : (limits.image ?? 10);
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint,
|
||||
maxSizeMB: maxSize,
|
||||
acceptedTypes: mode === 'pdf' ? ['pdf'] : ['png', 'jpg', 'jpeg', 'webp', 'tiff', 'bmp'],
|
||||
extraData: { lang },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
// Accept file from homepage smart upload
|
||||
const storeFile = useFileStore((s) => s.file);
|
||||
const clearStoreFile = useFileStore((s) => s.clearFile);
|
||||
useEffect(() => {
|
||||
if (storeFile) {
|
||||
const ext = storeFile.name.split('.').pop()?.toLowerCase() ?? '';
|
||||
if (ext === 'pdf') setMode('pdf');
|
||||
else setMode('image');
|
||||
selectFile(storeFile);
|
||||
clearStoreFile();
|
||||
}
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
useEffect(() => {
|
||||
if (result?.text) setExtractedText(result.text);
|
||||
}, [result]);
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
setExtractedText('');
|
||||
};
|
||||
|
||||
const handleCopyText = () => {
|
||||
navigator.clipboard.writeText(extractedText);
|
||||
};
|
||||
|
||||
const acceptMap: Record<string, string[]> = mode === 'pdf'
|
||||
? { 'application/pdf': ['.pdf'] }
|
||||
: {
|
||||
'image/png': ['.png'],
|
||||
'image/jpeg': ['.jpg', '.jpeg'],
|
||||
'image/webp': ['.webp'],
|
||||
'image/tiff': ['.tiff'],
|
||||
'image/bmp': ['.bmp'],
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.ocr.title'),
|
||||
description: t('tools.ocr.description'),
|
||||
url: `${window.location.origin}/tools/ocr`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.ocr.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.ocr.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/ocr`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-100">
|
||||
<ScanText className="h-8 w-8 text-amber-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.ocr.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.ocr.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
{/* Mode selector */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.ocr.sourceType')}
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{(['image', 'pdf'] as OcrMode[]).map((m) => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => { setMode(m); reset(); }}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
mode === m
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold dark:bg-primary-900/30 dark:ring-primary-700 dark:text-primary-300'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50 dark:bg-slate-800 dark:ring-slate-700 dark:text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{m === 'image' ? t('tools.ocr.modeImage') : t('tools.ocr.modePdf')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={acceptMap}
|
||||
maxSizeMB={maxSize}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel={mode === 'pdf' ? 'PDF' : 'Images (PNG, JPG, WebP, TIFF, BMP)'}
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
{/* Language selector */}
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.ocr.language')}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{LANGUAGES.map((l) => (
|
||||
<button
|
||||
key={l.value}
|
||||
onClick={() => setLang(l.value)}
|
||||
className={`rounded-xl p-3 text-center ring-1 transition-all ${
|
||||
lang === l.value
|
||||
? 'bg-primary-50 ring-primary-300 text-primary-700 font-semibold dark:bg-primary-900/30 dark:ring-primary-700 dark:text-primary-300'
|
||||
: 'bg-white ring-slate-200 text-slate-600 hover:bg-slate-50 dark:bg-slate-800 dark:ring-slate-700 dark:text-slate-400'
|
||||
}`}
|
||||
>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
className="btn-primary w-full"
|
||||
>
|
||||
{t('tools.ocr.extract')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && (
|
||||
<div className="space-y-4">
|
||||
<ProgressBar
|
||||
state={status?.state || 'PENDING'}
|
||||
message={status?.progress}
|
||||
/>
|
||||
{taskError && (
|
||||
<div className="rounded-xl bg-red-50 p-4 text-red-600 dark:bg-red-900/20 dark:text-red-400">
|
||||
{taskError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && result?.status === 'completed' && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-green-200 bg-green-50 p-6 dark:border-green-800 dark:bg-green-900/20">
|
||||
<p className="mb-2 text-sm font-medium text-green-700 dark:text-green-400">
|
||||
{t('tools.ocr.charsExtracted', { count: result.char_count ?? 0 })}
|
||||
</p>
|
||||
<textarea
|
||||
readOnly
|
||||
value={extractedText}
|
||||
rows={12}
|
||||
className="w-full rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
|
||||
/>
|
||||
<div className="mt-3 flex gap-3">
|
||||
<button onClick={handleCopyText} className="btn-secondary flex-1">
|
||||
{t('tools.ocr.copyText')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{result.download_url && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.processAnother')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && result?.status === 'failed' && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 text-red-600 dark:bg-red-900/20 dark:text-red-400">
|
||||
{result.error || t('common.genericError')}
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.tryAgain')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" format="horizontal" className="mt-6" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
150
frontend/src/components/tools/RemoveBackground.tsx
Normal file
150
frontend/src/components/tools/RemoveBackground.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Eraser } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import DownloadButton from '@/components/shared/DownloadButton';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useFileUpload } from '@/hooks/useFileUpload';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
import { useFileStore } from '@/stores/fileStore';
|
||||
import { useConfig } from '@/hooks/useConfig';
|
||||
|
||||
export default function RemoveBackground() {
|
||||
const { t } = useTranslation();
|
||||
const { limits } = useConfig();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/remove-bg',
|
||||
maxSizeMB: limits.image ?? 10,
|
||||
acceptedTypes: ['png', 'jpg', 'jpeg', 'webp'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
// Accept file from homepage smart upload
|
||||
const storeFile = useFileStore((s) => s.file);
|
||||
const clearStoreFile = useFileStore((s) => s.clearFile);
|
||||
useEffect(() => {
|
||||
if (storeFile) {
|
||||
selectFile(storeFile);
|
||||
clearStoreFile();
|
||||
}
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setPhase('upload');
|
||||
};
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.removeBg.title'),
|
||||
description: t('tools.removeBg.description'),
|
||||
url: `${window.location.origin}/tools/remove-background`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.removeBg.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.removeBg.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/remove-background`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-fuchsia-100">
|
||||
<Eraser className="h-8 w-8 text-fuchsia-600" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.removeBg.title')}</h1>
|
||||
<p className="mt-2 text-slate-500">{t('tools.removeBg.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'upload' && (
|
||||
<div className="space-y-4">
|
||||
<FileUploader
|
||||
onFileSelect={selectFile}
|
||||
file={file}
|
||||
accept={{
|
||||
'image/png': ['.png'],
|
||||
'image/jpeg': ['.jpg', '.jpeg'],
|
||||
'image/webp': ['.webp'],
|
||||
}}
|
||||
maxSizeMB={limits.image ?? 10}
|
||||
isUploading={isUploading}
|
||||
uploadProgress={uploadProgress}
|
||||
error={uploadError}
|
||||
onReset={handleReset}
|
||||
acceptLabel="Images (PNG, JPG, WebP)"
|
||||
/>
|
||||
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.removeBg.remove')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && (
|
||||
<div className="space-y-4">
|
||||
<ProgressBar
|
||||
state={status?.state || 'PENDING'}
|
||||
message={status?.progress}
|
||||
/>
|
||||
{taskError && (
|
||||
<div className="rounded-xl bg-red-50 p-4 text-red-600 dark:bg-red-900/20 dark:text-red-400">
|
||||
{taskError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && result?.status === 'completed' && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl border border-green-200 bg-green-50 p-6 text-center dark:border-green-800 dark:bg-green-900/20">
|
||||
<p className="mb-4 text-green-700 dark:text-green-400">
|
||||
{t('tools.removeBg.success')}
|
||||
</p>
|
||||
</div>
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.processAnother')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && result?.status === 'failed' && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 text-red-600 dark:bg-red-900/20 dark:text-red-400">
|
||||
{result.error || t('common.genericError')}
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">
|
||||
{t('common.tryAgain')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" format="horizontal" className="mt-6" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -110,6 +110,25 @@
|
||||
"lockAspect": "قفل نسبة العرض للارتفاع",
|
||||
"aspectHint": "أدخل بُعداً واحداً — سيتم حساب الآخر تلقائياً للحفاظ على نسبة العرض للارتفاع."
|
||||
},
|
||||
"ocr": {
|
||||
"title": "OCR — التعرف على النصوص",
|
||||
"description": "استخرج النصوص من الصور ومستندات PDF الممسوحة ضوئياً باستخدام التعرف الضوئي على الحروف.",
|
||||
"shortDesc": "استخراج نص",
|
||||
"sourceType": "نوع المصدر",
|
||||
"modeImage": "صورة",
|
||||
"modePdf": "PDF",
|
||||
"language": "لغة التعرف",
|
||||
"extract": "استخراج النص",
|
||||
"charsExtracted": "تم استخراج {{count}} حرف",
|
||||
"copyText": "نسخ النص"
|
||||
},
|
||||
"removeBg": {
|
||||
"title": "إزالة الخلفية",
|
||||
"description": "أزل خلفية الصور تلقائياً بالذكاء الاصطناعي. احصل على صورة PNG شفافة في ثوانٍ.",
|
||||
"shortDesc": "إزالة الخلفية",
|
||||
"remove": "إزالة الخلفية",
|
||||
"success": "تمت إزالة الخلفية بنجاح!"
|
||||
},
|
||||
"videoToGif": {
|
||||
"title": "فيديو إلى GIF",
|
||||
"description": "أنشئ صور GIF متحركة من مقاطع الفيديو. خصّص وقت البداية والمدة والجودة.",
|
||||
|
||||
@@ -110,6 +110,25 @@
|
||||
"lockAspect": "Lock aspect ratio",
|
||||
"aspectHint": "Enter one dimension — the other will auto-calculate to preserve aspect ratio."
|
||||
},
|
||||
"ocr": {
|
||||
"title": "OCR — Text Recognition",
|
||||
"description": "Extract text from images and scanned PDF documents using optical character recognition.",
|
||||
"shortDesc": "Extract Text",
|
||||
"sourceType": "Source Type",
|
||||
"modeImage": "Image",
|
||||
"modePdf": "PDF",
|
||||
"language": "OCR Language",
|
||||
"extract": "Extract Text",
|
||||
"charsExtracted": "{{count}} characters extracted",
|
||||
"copyText": "Copy Text"
|
||||
},
|
||||
"removeBg": {
|
||||
"title": "Remove Background",
|
||||
"description": "Remove the background from images automatically using AI. Get a transparent PNG in seconds.",
|
||||
"shortDesc": "Remove BG",
|
||||
"remove": "Remove Background",
|
||||
"success": "Background removed successfully!"
|
||||
},
|
||||
"videoToGif": {
|
||||
"title": "Video to GIF",
|
||||
"description": "Create animated GIFs from video clips. Customize start time, duration, and quality.",
|
||||
|
||||
@@ -110,6 +110,25 @@
|
||||
"lockAspect": "Verrouiller le rapport d'aspect",
|
||||
"aspectHint": "Entrez une dimension — l'autre sera calculée automatiquement pour préserver le rapport d'aspect."
|
||||
},
|
||||
"ocr": {
|
||||
"title": "OCR — Reconnaissance de texte",
|
||||
"description": "Extrayez le texte des images et des documents PDF numérisés grâce à la reconnaissance optique de caractères.",
|
||||
"shortDesc": "Extraire le texte",
|
||||
"sourceType": "Type de source",
|
||||
"modeImage": "Image",
|
||||
"modePdf": "PDF",
|
||||
"language": "Langue OCR",
|
||||
"extract": "Extraire le texte",
|
||||
"charsExtracted": "{{count}} caractères extraits",
|
||||
"copyText": "Copier le texte"
|
||||
},
|
||||
"removeBg": {
|
||||
"title": "Supprimer l'arrière-plan",
|
||||
"description": "Supprimez l'arrière-plan des images automatiquement grâce à l'IA. Obtenez un PNG transparent en quelques secondes.",
|
||||
"shortDesc": "Suppr. arrière-plan",
|
||||
"remove": "Supprimer l'arrière-plan",
|
||||
"success": "Arrière-plan supprimé avec succès !"
|
||||
},
|
||||
"videoToGif": {
|
||||
"title": "Vidéo en GIF",
|
||||
"description": "Créez des GIFs animés à partir de clips vidéo. Personnalisez le temps de début, la durée et la qualité.",
|
||||
|
||||
@@ -20,6 +20,7 @@ import {
|
||||
PenLine,
|
||||
GitBranch,
|
||||
Scaling,
|
||||
ScanText,
|
||||
} from 'lucide-react';
|
||||
import ToolCard from '@/components/shared/ToolCard';
|
||||
import HeroUploadZone from '@/components/shared/HeroUploadZone';
|
||||
@@ -52,6 +53,8 @@ const pdfTools: ToolInfo[] = [
|
||||
const otherTools: ToolInfo[] = [
|
||||
{ key: 'imageConvert', path: '/tools/image-converter', icon: <ImageIcon className="h-6 w-6 text-purple-600" />, bgColor: 'bg-purple-50' },
|
||||
{ key: 'imageResize', path: '/tools/image-resize', icon: <Scaling className="h-6 w-6 text-teal-600" />, bgColor: 'bg-teal-50' },
|
||||
{ key: 'ocr', path: '/tools/ocr', icon: <ScanText className="h-6 w-6 text-amber-600" />, bgColor: 'bg-amber-50' },
|
||||
{ key: 'removeBg', path: '/tools/remove-background', icon: <Eraser className="h-6 w-6 text-fuchsia-600" />, bgColor: 'bg-fuchsia-50' },
|
||||
{ key: 'videoToGif', path: '/tools/video-to-gif', icon: <Film className="h-6 w-6 text-emerald-600" />, bgColor: 'bg-emerald-50' },
|
||||
{ key: 'wordCounter', path: '/tools/word-counter', icon: <Hash className="h-6 w-6 text-blue-600" />, bgColor: 'bg-blue-50' },
|
||||
{ key: 'textCleaner', path: '/tools/text-cleaner', icon: <Eraser className="h-6 w-6 text-indigo-600" />, bgColor: 'bg-indigo-50' },
|
||||
|
||||
@@ -76,6 +76,9 @@ export interface TaskResult {
|
||||
pages?: Array<{ page: number; text: string }>;
|
||||
procedures_count?: number;
|
||||
total_pages?: number;
|
||||
// OCR-specific fields
|
||||
text?: string;
|
||||
char_count?: number;
|
||||
}
|
||||
|
||||
export interface AuthUser {
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
PenLine,
|
||||
GitBranch,
|
||||
Scaling,
|
||||
ScanText,
|
||||
} from 'lucide-react';
|
||||
import type { ComponentType, SVGProps } from 'react';
|
||||
|
||||
@@ -46,12 +47,15 @@ const pdfTools: ToolOption[] = [
|
||||
{ key: 'pageNumbers', path: '/tools/page-numbers', icon: ListOrdered, bgColor: 'bg-sky-100 dark:bg-sky-900/30', iconColor: 'text-sky-600 dark:text-sky-400' },
|
||||
{ key: 'pdfEditor', path: '/tools/pdf-editor', icon: PenLine, bgColor: 'bg-rose-100 dark:bg-rose-900/30', iconColor: 'text-rose-600 dark:text-rose-400' },
|
||||
{ key: 'pdfFlowchart', path: '/tools/pdf-flowchart', icon: GitBranch, bgColor: 'bg-indigo-100 dark:bg-indigo-900/30', iconColor: 'text-indigo-600 dark:text-indigo-400' },
|
||||
{ key: 'ocr', path: '/tools/ocr', icon: ScanText, bgColor: 'bg-amber-100 dark:bg-amber-900/30', iconColor: 'text-amber-600 dark:text-amber-400' },
|
||||
];
|
||||
|
||||
/** Image tools available when an image is uploaded */
|
||||
const imageTools: ToolOption[] = [
|
||||
{ key: 'imageConvert', path: '/tools/image-converter', icon: ImageIcon, bgColor: 'bg-purple-100 dark:bg-purple-900/30', iconColor: 'text-purple-600 dark:text-purple-400' },
|
||||
{ key: 'imageResize', path: '/tools/image-resize', icon: Scaling, bgColor: 'bg-teal-100 dark:bg-teal-900/30', iconColor: 'text-teal-600 dark:text-teal-400' },
|
||||
{ key: 'ocr', path: '/tools/ocr', icon: ScanText, bgColor: 'bg-amber-100 dark:bg-amber-900/30', iconColor: 'text-amber-600 dark:text-amber-400' },
|
||||
{ key: 'removeBg', path: '/tools/remove-background', icon: ImageIcon, bgColor: 'bg-fuchsia-100 dark:bg-fuchsia-900/30', iconColor: 'text-fuchsia-600 dark:text-fuchsia-400' },
|
||||
{ key: 'imagesToPdf', path: '/tools/images-to-pdf', icon: FileImage, bgColor: 'bg-lime-100 dark:bg-lime-900/30', iconColor: 'text-lime-600 dark:text-lime-400' },
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user