الميزات: إضافة أدوات جديدة لمعالجة ملفات PDF، تشمل التلخيص والترجمة واستخراج الجداول.
- تفعيل مكون SummarizePdf لإنشاء ملخصات PDF باستخدام الذكاء الاصطناعي. - تفعيل مكون TranslatePdf لترجمة محتوى PDF إلى لغات متعددة. - تفعيل مكون TableExtractor لاستخراج الجداول من ملفات PDF. - تحديث الصفحة الرئيسية والتوجيه ليشمل الأدوات الجديدة. - إضافة ترجمات للأدوات الجديدة باللغات الإنجليزية والعربية والفرنسية. - توسيع أنواع واجهة برمجة التطبيقات (API) لدعم الميزات الجديدة المتعلقة بمعالجة ملفات PDF. --feat: Initialize frontend with React, Vite, and Tailwind CSS - Set up main entry point for React application. - Create About, Home, NotFound, Privacy, and Terms pages with SEO support. - Implement API service for file uploads and task management. - Add global styles using Tailwind CSS. - Create utility functions for SEO and text processing. - Configure Vite for development and production builds. - Set up Nginx configuration for serving frontend and backend. - Add scripts for cleanup of expired files and sitemap generation. - Implement deployment script for production environment.
This commit is contained in:
@@ -38,6 +38,17 @@ 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'));
|
||||
const CompressImage = lazy(() => import('@/components/tools/CompressImage'));
|
||||
const PdfToExcel = lazy(() => import('@/components/tools/PdfToExcel'));
|
||||
const RemoveWatermark = lazy(() => import('@/components/tools/RemoveWatermark'));
|
||||
const ReorderPdf = lazy(() => import('@/components/tools/ReorderPdf'));
|
||||
const ExtractPages = lazy(() => import('@/components/tools/ExtractPages'));
|
||||
const QrCodeGenerator = lazy(() => import('@/components/tools/QrCodeGenerator'));
|
||||
const HtmlToPdf = lazy(() => import('@/components/tools/HtmlToPdf'));
|
||||
const ChatPdf = lazy(() => import('@/components/tools/ChatPdf'));
|
||||
const SummarizePdf = lazy(() => import('@/components/tools/SummarizePdf'));
|
||||
const TranslatePdf = lazy(() => import('@/components/tools/TranslatePdf'));
|
||||
const TableExtractor = lazy(() => import('@/components/tools/TableExtractor'));
|
||||
|
||||
function LoadingFallback() {
|
||||
return (
|
||||
@@ -96,9 +107,28 @@ export default function App() {
|
||||
{/* Image Tools */}
|
||||
<Route path="/tools/image-converter" element={<ImageConverter />} />
|
||||
<Route path="/tools/image-resize" element={<ImageResize />} />
|
||||
<Route path="/tools/compress-image" element={<CompressImage />} />
|
||||
<Route path="/tools/ocr" element={<OcrTool />} />
|
||||
<Route path="/tools/remove-background" element={<RemoveBackground />} />
|
||||
|
||||
{/* Convert Tools */}
|
||||
<Route path="/tools/pdf-to-excel" element={<PdfToExcel />} />
|
||||
<Route path="/tools/html-to-pdf" element={<HtmlToPdf />} />
|
||||
|
||||
{/* PDF Extra Tools */}
|
||||
<Route path="/tools/remove-watermark-pdf" element={<RemoveWatermark />} />
|
||||
<Route path="/tools/reorder-pdf" element={<ReorderPdf />} />
|
||||
<Route path="/tools/extract-pages" element={<ExtractPages />} />
|
||||
|
||||
{/* AI Tools */}
|
||||
<Route path="/tools/chat-pdf" element={<ChatPdf />} />
|
||||
<Route path="/tools/summarize-pdf" element={<SummarizePdf />} />
|
||||
<Route path="/tools/translate-pdf" element={<TranslatePdf />} />
|
||||
<Route path="/tools/extract-tables" element={<TableExtractor />} />
|
||||
|
||||
{/* Other Tools */}
|
||||
<Route path="/tools/qr-code" element={<QrCodeGenerator />} />
|
||||
|
||||
{/* Video Tools */}
|
||||
<Route path="/tools/video-to-gif" element={<VideoToGif />} />
|
||||
|
||||
|
||||
140
frontend/src/components/tools/ChatPdf.tsx
Normal file
140
frontend/src/components/tools/ChatPdf.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { MessageSquare } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
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';
|
||||
|
||||
export default function ChatPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [question, setQuestion] = useState('');
|
||||
const [reply, setReply] = useState('');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-ai/chat',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { question },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: (r) => {
|
||||
setPhase('done');
|
||||
setReply((r as Record<string, unknown>).reply as string || '');
|
||||
},
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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 () => {
|
||||
if (!question.trim()) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => { reset(); setPhase('upload'); setQuestion(''); setReply(''); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.chatPdf.title'),
|
||||
description: t('tools.chatPdf.description'),
|
||||
url: `${window.location.origin}/tools/chat-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.chatPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.chatPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/chat-pdf`} />
|
||||
<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-blue-100 dark:bg-blue-900/30">
|
||||
<MessageSquare className="h-8 w-8 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.chatPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.chatPdf.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.chatPdf.questionLabel')}
|
||||
</label>
|
||||
<textarea
|
||||
value={question} onChange={(e) => setQuestion(e.target.value)}
|
||||
placeholder={t('tools.chatPdf.questionPlaceholder')}
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<button onClick={handleUpload} disabled={!question.trim()}
|
||||
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{t('tools.chatPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && reply && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl bg-white p-6 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<h3 className="mb-3 text-sm font-semibold text-slate-700 dark:text-slate-300">
|
||||
{t('tools.chatPdf.answer')}
|
||||
</h3>
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap text-slate-600 dark:text-slate-300">
|
||||
{reply}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && !reply && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
125
frontend/src/components/tools/CompressImage.tsx
Normal file
125
frontend/src/components/tools/CompressImage.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Minimize2 } 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 CompressImage() {
|
||||
const { t } = useTranslation();
|
||||
const { limits } = useConfig();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [quality, setQuality] = useState(75);
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/image/compress',
|
||||
maxSizeMB: limits.image,
|
||||
acceptedTypes: ['png', 'jpg', 'jpeg', 'webp'],
|
||||
extraData: { quality: quality.toString() },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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'); setQuality(75); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.compressImage.title'),
|
||||
description: t('tools.compressImage.description'),
|
||||
url: `${window.location.origin}/tools/compress-image`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.compressImage.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.compressImage.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/compress-image`} />
|
||||
<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-orange-100 dark:bg-orange-900/30">
|
||||
<Minimize2 className="h-8 w-8 text-orange-600 dark:text-orange-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.compressImage.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.compressImage.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} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="Images (PNG, JPG, WebP)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<label className="mb-2 flex items-center justify-between text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
<span>{t('tools.compressImage.quality')}</span>
|
||||
<span className="text-primary-600">{quality}%</span>
|
||||
</label>
|
||||
<input type="range" min="10" max="100" value={quality}
|
||||
onChange={(e) => setQuality(Number(e.target.value))}
|
||||
className="w-full accent-primary-600" />
|
||||
</div>
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.compressImage.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
130
frontend/src/components/tools/ExtractPages.tsx
Normal file
130
frontend/src/components/tools/ExtractPages.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { FileOutput } 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';
|
||||
|
||||
export default function ExtractPages() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [pages, setPages] = useState('');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/extract-pages',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { pages },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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 () => {
|
||||
if (!pages.trim()) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => { reset(); setPhase('upload'); setPages(''); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.extractPages.title'),
|
||||
description: t('tools.extractPages.description'),
|
||||
url: `${window.location.origin}/tools/extract-pages`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.extractPages.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.extractPages.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/extract-pages`} />
|
||||
<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 dark:bg-amber-900/30">
|
||||
<FileOutput className="h-8 w-8 text-amber-600 dark:text-amber-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.extractPages.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.extractPages.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.extractPages.pagesLabel')}
|
||||
</label>
|
||||
<input
|
||||
type="text" value={pages}
|
||||
onChange={(e) => setPages(e.target.value)}
|
||||
placeholder={t('tools.extractPages.pagesPlaceholder')}
|
||||
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
<p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
|
||||
{t('tools.extractPages.pagesHint')}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={handleUpload} disabled={!pages.trim()}
|
||||
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{t('tools.extractPages.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
103
frontend/src/components/tools/HtmlToPdf.tsx
Normal file
103
frontend/src/components/tools/HtmlToPdf.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Code } 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';
|
||||
|
||||
export default function HtmlToPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/convert/html-to-pdf',
|
||||
maxSizeMB: 10,
|
||||
acceptedTypes: ['html', 'htm'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => { reset(); setPhase('upload'); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.htmlToPdf.title'),
|
||||
description: t('tools.htmlToPdf.description'),
|
||||
url: `${window.location.origin}/tools/html-to-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.htmlToPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.htmlToPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/html-to-pdf`} />
|
||||
<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-sky-100 dark:bg-sky-900/30">
|
||||
<Code className="h-8 w-8 text-sky-600 dark:text-sky-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.htmlToPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.htmlToPdf.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={{ 'text/html': ['.html', '.htm'] }}
|
||||
maxSizeMB={10} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="HTML (.html, .htm)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.htmlToPdf.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
110
frontend/src/components/tools/PdfToExcel.tsx
Normal file
110
frontend/src/components/tools/PdfToExcel.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Sheet } 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';
|
||||
|
||||
export default function PdfToExcel() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/convert/pdf-to-excel',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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.pdfToExcel.title'),
|
||||
description: t('tools.pdfToExcel.description'),
|
||||
url: `${window.location.origin}/tools/pdf-to-excel`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.pdfToExcel.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.pdfToExcel.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/pdf-to-excel`} />
|
||||
<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-green-100 dark:bg-green-900/30">
|
||||
<Sheet className="h-8 w-8 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.pdfToExcel.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.pdfToExcel.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.pdfToExcel.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
135
frontend/src/components/tools/QrCodeGenerator.tsx
Normal file
135
frontend/src/components/tools/QrCodeGenerator.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { QrCode } from 'lucide-react';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
import AdSlot from '@/components/layout/AdSlot';
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling';
|
||||
import { generateToolSchema } from '@/utils/seo';
|
||||
import api, { type TaskResponse, type TaskResult } from '@/services/api';
|
||||
|
||||
export default function QrCodeGenerator() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'input' | 'processing' | 'done'>('input');
|
||||
const [data, setData] = useState('');
|
||||
const [size, setSize] = useState(300);
|
||||
const [taskId, setTaskId] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!data.trim()) return;
|
||||
setError(null);
|
||||
setPhase('processing');
|
||||
try {
|
||||
const res = await api.post<TaskResponse>('/qrcode/generate', { data: data.trim(), size });
|
||||
setTaskId(res.data.task_id);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to generate QR code.');
|
||||
setPhase('done');
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setPhase('input');
|
||||
setData('');
|
||||
setSize(300);
|
||||
setTaskId(null);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
const downloadUrl = result?.download_url ? `/api${result.download_url}` : null;
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.qrCode.title'),
|
||||
description: t('tools.qrCode.description'),
|
||||
url: `${window.location.origin}/tools/qr-code`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.qrCode.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.qrCode.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/qr-code`} />
|
||||
<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-indigo-100 dark:bg-indigo-900/30">
|
||||
<QrCode className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.qrCode.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.qrCode.description')}</p>
|
||||
</div>
|
||||
|
||||
<AdSlot slot="top-banner" format="horizontal" className="mb-6" />
|
||||
|
||||
{phase === 'input' && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700 space-y-4">
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.qrCode.dataLabel')}
|
||||
</label>
|
||||
<textarea
|
||||
value={data} onChange={(e) => setData(e.target.value)}
|
||||
placeholder={t('tools.qrCode.dataPlaceholder')}
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-2 flex items-center justify-between text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
<span>{t('tools.qrCode.sizeLabel')}</span>
|
||||
<span className="text-primary-600">{size}px</span>
|
||||
</label>
|
||||
<input type="range" min="100" max="1000" step="50" value={size}
|
||||
onChange={(e) => setSize(Number(e.target.value))}
|
||||
className="w-full accent-primary-600" />
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleGenerate} disabled={!data.trim()}
|
||||
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{t('tools.qrCode.shortDesc')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && downloadUrl && (
|
||||
<div className="space-y-6 text-center">
|
||||
<div className="rounded-2xl bg-white p-8 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<img src={downloadUrl} alt="QR Code" className="mx-auto max-w-[300px] rounded-lg" />
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<a href={downloadUrl} download={result.filename || 'qrcode.png'}
|
||||
className="btn-primary flex-1">{t('common.download')}</a>
|
||||
<button onClick={handleReset} className="btn-secondary flex-1">{t('common.startOver')}</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && (taskError || error) && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError || error}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
110
frontend/src/components/tools/RemoveWatermark.tsx
Normal file
110
frontend/src/components/tools/RemoveWatermark.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Droplets } 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';
|
||||
|
||||
export default function RemoveWatermark() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/remove-watermark',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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.removeWatermark.title'),
|
||||
description: t('tools.removeWatermark.description'),
|
||||
url: `${window.location.origin}/tools/remove-watermark-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.removeWatermark.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.removeWatermark.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/remove-watermark-pdf`} />
|
||||
<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-rose-100 dark:bg-rose-900/30">
|
||||
<Droplets className="h-8 w-8 text-rose-600 dark:text-rose-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.removeWatermark.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.removeWatermark.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.removeWatermark.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
130
frontend/src/components/tools/ReorderPdf.tsx
Normal file
130
frontend/src/components/tools/ReorderPdf.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { ArrowUpDown } 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';
|
||||
|
||||
export default function ReorderPdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [pageOrder, setPageOrder] = useState('');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-tools/reorder',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { page_order: pageOrder },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: () => setPhase('done'),
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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 () => {
|
||||
if (!pageOrder.trim()) return;
|
||||
const id = await startUpload();
|
||||
if (id) setPhase('processing');
|
||||
};
|
||||
|
||||
const handleReset = () => { reset(); setPhase('upload'); setPageOrder(''); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.reorderPdf.title'),
|
||||
description: t('tools.reorderPdf.description'),
|
||||
url: `${window.location.origin}/tools/reorder-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.reorderPdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.reorderPdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/reorder-pdf`} />
|
||||
<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-violet-100 dark:bg-violet-900/30">
|
||||
<ArrowUpDown className="h-8 w-8 text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.reorderPdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.reorderPdf.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.reorderPdf.orderLabel')}
|
||||
</label>
|
||||
<input
|
||||
type="text" value={pageOrder}
|
||||
onChange={(e) => setPageOrder(e.target.value)}
|
||||
placeholder={t('tools.reorderPdf.orderPlaceholder')}
|
||||
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
<p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
|
||||
{t('tools.reorderPdf.orderHint')}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={handleUpload} disabled={!pageOrder.trim()}
|
||||
className="btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
{t('tools.reorderPdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && result.status === 'completed' && (
|
||||
<DownloadButton result={result} onStartOver={handleReset} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
144
frontend/src/components/tools/SummarizePdf.tsx
Normal file
144
frontend/src/components/tools/SummarizePdf.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { FileText } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
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';
|
||||
|
||||
export default function SummarizePdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [length, setLength] = useState('medium');
|
||||
const [summary, setSummary] = useState('');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-ai/summarize',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { length },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: (r) => {
|
||||
setPhase('done');
|
||||
setSummary((r as Record<string, unknown>).summary as string || '');
|
||||
},
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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'); setLength('medium'); setSummary(''); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.summarizePdf.title'),
|
||||
description: t('tools.summarizePdf.description'),
|
||||
url: `${window.location.origin}/tools/summarize-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.summarizePdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.summarizePdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/summarize-pdf`} />
|
||||
<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-emerald-100 dark:bg-emerald-900/30">
|
||||
<FileText className="h-8 w-8 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.summarizePdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.summarizePdf.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.summarizePdf.lengthLabel')}
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(['short', 'medium', 'long'] as const).map((opt) => (
|
||||
<button key={opt} onClick={() => setLength(opt)}
|
||||
className={`rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
|
||||
length === opt
|
||||
? 'bg-emerald-600 text-white'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300'
|
||||
}`}>
|
||||
{t(`tools.summarizePdf.${opt}`)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.summarizePdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && summary && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl bg-white p-6 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<h3 className="mb-3 text-sm font-semibold text-slate-700 dark:text-slate-300">
|
||||
{t('tools.summarizePdf.resultTitle')}
|
||||
</h3>
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap text-slate-600 dark:text-slate-300">
|
||||
{summary}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && !summary && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
166
frontend/src/components/tools/TableExtractor.tsx
Normal file
166
frontend/src/components/tools/TableExtractor.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Table } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
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';
|
||||
|
||||
interface ExtractedTable {
|
||||
page: number;
|
||||
table_index: number;
|
||||
headers: string[];
|
||||
rows: string[][];
|
||||
}
|
||||
|
||||
export default function TableExtractor() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [tables, setTables] = useState<ExtractedTable[]>([]);
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-ai/extract-tables',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: (r) => {
|
||||
setPhase('done');
|
||||
const raw = (r as Record<string, unknown>).tables;
|
||||
if (Array.isArray(raw)) setTables(raw as ExtractedTable[]);
|
||||
},
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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'); setTables([]); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.tableExtractor.title'),
|
||||
description: t('tools.tableExtractor.description'),
|
||||
url: `${window.location.origin}/tools/extract-tables`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.tableExtractor.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.tableExtractor.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/extract-tables`} />
|
||||
<script type="application/ld+json">{JSON.stringify(schema)}</script>
|
||||
</Helmet>
|
||||
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<div className="mb-8 text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-teal-100 dark:bg-teal-900/30">
|
||||
<Table className="h-8 w-8 text-teal-600 dark:text-teal-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.tableExtractor.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.tableExtractor.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.tableExtractor.shortDesc')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && tables.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<p className="text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
{t('tools.tableExtractor.tablesFound', { count: tables.length })}
|
||||
</p>
|
||||
{tables.map((tbl, idx) => (
|
||||
<div key={idx} className="overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<div className="border-b border-slate-200 px-4 py-2 dark:border-slate-700">
|
||||
<span className="text-xs font-semibold text-slate-500 dark:text-slate-400">
|
||||
{t('tools.tableExtractor.tablePage', { page: tbl.page, index: tbl.table_index + 1 })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
{tbl.headers.length > 0 && (
|
||||
<thead className="bg-slate-50 dark:bg-slate-700">
|
||||
<tr>
|
||||
{tbl.headers.map((h, hi) => (
|
||||
<th key={hi} className="px-3 py-2 text-left font-medium text-slate-700 dark:text-slate-300">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
)}
|
||||
<tbody>
|
||||
{tbl.rows.map((row, ri) => (
|
||||
<tr key={ri} className="border-t border-slate-100 dark:border-slate-700">
|
||||
{row.map((cell, ci) => (
|
||||
<td key={ci} className="px-3 py-2 text-slate-600 dark:text-slate-300">{cell}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && result && tables.length === 0 && !taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-amber-50 p-4 ring-1 ring-amber-200 dark:bg-amber-900/20 dark:ring-amber-800">
|
||||
<p className="text-sm text-amber-700 dark:text-amber-400">{t('tools.tableExtractor.noTables')}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
153
frontend/src/components/tools/TranslatePdf.tsx
Normal file
153
frontend/src/components/tools/TranslatePdf.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { Languages } from 'lucide-react';
|
||||
import FileUploader from '@/components/shared/FileUploader';
|
||||
import ProgressBar from '@/components/shared/ProgressBar';
|
||||
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';
|
||||
|
||||
const LANGUAGES = [
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'ar', label: 'العربية' },
|
||||
{ value: 'fr', label: 'Français' },
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'de', label: 'Deutsch' },
|
||||
{ value: 'zh', label: '中文' },
|
||||
{ value: 'ja', label: '日本語' },
|
||||
{ value: 'ko', label: '한국어' },
|
||||
{ value: 'pt', label: 'Português' },
|
||||
{ value: 'ru', label: 'Русский' },
|
||||
{ value: 'tr', label: 'Türkçe' },
|
||||
{ value: 'it', label: 'Italiano' },
|
||||
];
|
||||
|
||||
export default function TranslatePdf() {
|
||||
const { t } = useTranslation();
|
||||
const [phase, setPhase] = useState<'upload' | 'processing' | 'done'>('upload');
|
||||
const [targetLang, setTargetLang] = useState('en');
|
||||
const [translation, setTranslation] = useState('');
|
||||
|
||||
const {
|
||||
file, uploadProgress, isUploading, taskId,
|
||||
error: uploadError, selectFile, startUpload, reset,
|
||||
} = useFileUpload({
|
||||
endpoint: '/pdf-ai/translate',
|
||||
maxSizeMB: 20,
|
||||
acceptedTypes: ['pdf'],
|
||||
extraData: { target_language: targetLang },
|
||||
});
|
||||
|
||||
const { status, result, error: taskError } = useTaskPolling({
|
||||
taskId,
|
||||
onComplete: (r) => {
|
||||
setPhase('done');
|
||||
setTranslation((r as Record<string, unknown>).translation as string || '');
|
||||
},
|
||||
onError: () => setPhase('done'),
|
||||
});
|
||||
|
||||
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'); setTargetLang('en'); setTranslation(''); };
|
||||
|
||||
const schema = generateToolSchema({
|
||||
name: t('tools.translatePdf.title'),
|
||||
description: t('tools.translatePdf.description'),
|
||||
url: `${window.location.origin}/tools/translate-pdf`,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{t('tools.translatePdf.title')} — {t('common.appName')}</title>
|
||||
<meta name="description" content={t('tools.translatePdf.description')} />
|
||||
<link rel="canonical" href={`${window.location.origin}/tools/translate-pdf`} />
|
||||
<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-purple-100 dark:bg-purple-900/30">
|
||||
<Languages className="h-8 w-8 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<h1 className="section-heading">{t('tools.translatePdf.title')}</h1>
|
||||
<p className="mt-2 text-slate-500 dark:text-slate-400">{t('tools.translatePdf.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={{ 'application/pdf': ['.pdf'] }}
|
||||
maxSizeMB={20} isUploading={isUploading}
|
||||
uploadProgress={uploadProgress} error={uploadError}
|
||||
onReset={handleReset} acceptLabel="PDF (.pdf)"
|
||||
/>
|
||||
{file && !isUploading && (
|
||||
<>
|
||||
<div className="rounded-2xl bg-white p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{t('tools.translatePdf.targetLang')}
|
||||
</label>
|
||||
<select value={targetLang} onChange={(e) => setTargetLang(e.target.value)}
|
||||
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200">
|
||||
{LANGUAGES.map((lang) => (
|
||||
<option key={lang.value} value={lang.value}>{lang.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button onClick={handleUpload} className="btn-primary w-full">
|
||||
{t('tools.translatePdf.shortDesc')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'processing' && !result && (
|
||||
<ProgressBar state={status?.state || 'PENDING'} message={status?.progress} />
|
||||
)}
|
||||
|
||||
{phase === 'done' && translation && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl bg-white p-6 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
|
||||
<h3 className="mb-3 text-sm font-semibold text-slate-700 dark:text-slate-300">
|
||||
{t('tools.translatePdf.resultTitle')}
|
||||
</h3>
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap text-slate-600 dark:text-slate-300">
|
||||
{translation}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{phase === 'done' && taskError && !translation && (
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-xl bg-red-50 p-4 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{taskError}</p>
|
||||
</div>
|
||||
<button onClick={handleReset} className="btn-secondary w-full">{t('common.startOver')}</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AdSlot slot="bottom-banner" className="mt-8" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -383,6 +383,84 @@
|
||||
"chatSuggestion3": "اقترح عناوين أفضل",
|
||||
"chatSuggestion4": "أضف معالجة الأخطاء",
|
||||
"sendMessage": "إرسال"
|
||||
},
|
||||
"compressImage": {
|
||||
"title": "ضغط الصورة",
|
||||
"description": "قلّل حجم الصورة مع الحفاظ على الجودة. يدعم PNG و JPG و WebP.",
|
||||
"shortDesc": "ضغط الصورة",
|
||||
"quality": "الجودة"
|
||||
},
|
||||
"pdfToExcel": {
|
||||
"title": "PDF إلى Excel",
|
||||
"description": "استخرج الجداول من ملفات PDF وحوّلها إلى جداول بيانات Excel.",
|
||||
"shortDesc": "PDF → Excel"
|
||||
},
|
||||
"removeWatermark": {
|
||||
"title": "إزالة العلامة المائية",
|
||||
"description": "أزل العلامات المائية النصية من ملفات PDF تلقائياً.",
|
||||
"shortDesc": "إزالة العلامة المائية"
|
||||
},
|
||||
"reorderPdf": {
|
||||
"title": "إعادة ترتيب صفحات PDF",
|
||||
"description": "أعد ترتيب صفحات PDF بأي ترتيب تريده.",
|
||||
"shortDesc": "إعادة الترتيب",
|
||||
"orderLabel": "ترتيب الصفحات الجديد",
|
||||
"orderPlaceholder": "مثال: 3,1,2,5,4",
|
||||
"orderHint": "أدخل أرقام الصفحات مفصولة بفواصل بالترتيب المطلوب."
|
||||
},
|
||||
"extractPages": {
|
||||
"title": "استخراج صفحات PDF",
|
||||
"description": "استخرج صفحات محددة من PDF إلى مستند جديد.",
|
||||
"shortDesc": "استخراج الصفحات",
|
||||
"pagesLabel": "الصفحات المطلوبة",
|
||||
"pagesPlaceholder": "مثال: 1,3,5-8",
|
||||
"pagesHint": "أدخل أرقام الصفحات أو نطاقات مفصولة بفواصل."
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "مولّد رمز QR",
|
||||
"description": "أنشئ رموز QR من نصوص أو روابط أو أي بيانات. خصّص الحجم وحمّل بصيغة PNG.",
|
||||
"shortDesc": "إنشاء رمز QR",
|
||||
"dataLabel": "نص أو رابط",
|
||||
"dataPlaceholder": "أدخل نصاً أو رابطاً أو أي بيانات...",
|
||||
"sizeLabel": "الحجم"
|
||||
},
|
||||
"htmlToPdf": {
|
||||
"title": "HTML إلى PDF",
|
||||
"description": "حوّل ملفات HTML إلى مستندات PDF مع دعم كامل للتنسيق.",
|
||||
"shortDesc": "HTML → PDF"
|
||||
},
|
||||
"chatPdf": {
|
||||
"title": "محادثة مع PDF",
|
||||
"description": "اطرح أسئلة حول مستند PDF واحصل على إجابات بالذكاء الاصطناعي.",
|
||||
"shortDesc": "اسأل الذكاء الاصطناعي",
|
||||
"questionLabel": "سؤالك",
|
||||
"questionPlaceholder": "ماذا تريد أن تعرف عن هذا المستند؟",
|
||||
"answer": "إجابة الذكاء الاصطناعي"
|
||||
},
|
||||
"summarizePdf": {
|
||||
"title": "تلخيص PDF",
|
||||
"description": "احصل على ملخص مولّد بالذكاء الاصطناعي لمستند PDF في ثوانٍ.",
|
||||
"shortDesc": "تلخيص PDF",
|
||||
"lengthLabel": "طول الملخص",
|
||||
"short": "قصير",
|
||||
"medium": "متوسط",
|
||||
"long": "مفصّل",
|
||||
"resultTitle": "الملخص"
|
||||
},
|
||||
"translatePdf": {
|
||||
"title": "ترجمة PDF",
|
||||
"description": "ترجم محتوى مستند PDF إلى أي لغة باستخدام الذكاء الاصطناعي.",
|
||||
"shortDesc": "ترجمة PDF",
|
||||
"targetLang": "اللغة المستهدفة",
|
||||
"resultTitle": "الترجمة"
|
||||
},
|
||||
"tableExtractor": {
|
||||
"title": "استخراج الجداول من PDF",
|
||||
"description": "اكتشف واستخرج الجداول من مستندات PDF إلى بيانات منظمة.",
|
||||
"shortDesc": "استخراج الجداول",
|
||||
"tablesFound": "تم العثور على {{count}} جدول(جداول)",
|
||||
"tablePage": "الصفحة {{page}} — الجدول {{index}}",
|
||||
"noTables": "لم يتم العثور على جداول في هذا المستند."
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
||||
@@ -383,6 +383,84 @@
|
||||
"chatSuggestion3": "Suggest better titles",
|
||||
"chatSuggestion4": "Add error handling",
|
||||
"sendMessage": "Send"
|
||||
},
|
||||
"compressImage": {
|
||||
"title": "Compress Image",
|
||||
"description": "Reduce image file size while maintaining quality. Supports PNG, JPG, and WebP.",
|
||||
"shortDesc": "Compress Image",
|
||||
"quality": "Quality"
|
||||
},
|
||||
"pdfToExcel": {
|
||||
"title": "PDF to Excel",
|
||||
"description": "Extract tables from PDF files and convert them to Excel spreadsheets.",
|
||||
"shortDesc": "PDF → Excel"
|
||||
},
|
||||
"removeWatermark": {
|
||||
"title": "Remove Watermark",
|
||||
"description": "Remove text watermarks from PDF files automatically.",
|
||||
"shortDesc": "Remove Watermark"
|
||||
},
|
||||
"reorderPdf": {
|
||||
"title": "Reorder PDF Pages",
|
||||
"description": "Rearrange the pages of your PDF in any order you want.",
|
||||
"shortDesc": "Reorder Pages",
|
||||
"orderLabel": "New Page Order",
|
||||
"orderPlaceholder": "e.g. 3,1,2,5,4",
|
||||
"orderHint": "Enter page numbers separated by commas in the desired order."
|
||||
},
|
||||
"extractPages": {
|
||||
"title": "Extract PDF Pages",
|
||||
"description": "Extract specific pages from a PDF into a new document.",
|
||||
"shortDesc": "Extract Pages",
|
||||
"pagesLabel": "Pages to Extract",
|
||||
"pagesPlaceholder": "e.g. 1,3,5-8",
|
||||
"pagesHint": "Enter page numbers or ranges separated by commas."
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "QR Code Generator",
|
||||
"description": "Generate QR codes from text, URLs, or any data. Customize size and download as PNG.",
|
||||
"shortDesc": "Generate QR Code",
|
||||
"dataLabel": "Text or URL",
|
||||
"dataPlaceholder": "Enter text, URL, or any data...",
|
||||
"sizeLabel": "Size"
|
||||
},
|
||||
"htmlToPdf": {
|
||||
"title": "HTML to PDF",
|
||||
"description": "Convert HTML files to PDF documents with full styling support.",
|
||||
"shortDesc": "HTML → PDF"
|
||||
},
|
||||
"chatPdf": {
|
||||
"title": "Chat with PDF",
|
||||
"description": "Ask questions about your PDF document and get AI-powered answers.",
|
||||
"shortDesc": "Ask AI",
|
||||
"questionLabel": "Your Question",
|
||||
"questionPlaceholder": "What would you like to know about this document?",
|
||||
"answer": "AI Answer"
|
||||
},
|
||||
"summarizePdf": {
|
||||
"title": "Summarize PDF",
|
||||
"description": "Get an AI-generated summary of your PDF document in seconds.",
|
||||
"shortDesc": "Summarize PDF",
|
||||
"lengthLabel": "Summary Length",
|
||||
"short": "Short",
|
||||
"medium": "Medium",
|
||||
"long": "Detailed",
|
||||
"resultTitle": "Summary"
|
||||
},
|
||||
"translatePdf": {
|
||||
"title": "Translate PDF",
|
||||
"description": "Translate your PDF document content to any language using AI.",
|
||||
"shortDesc": "Translate PDF",
|
||||
"targetLang": "Target Language",
|
||||
"resultTitle": "Translation"
|
||||
},
|
||||
"tableExtractor": {
|
||||
"title": "Extract Tables from PDF",
|
||||
"description": "Detect and extract tables from PDF documents into structured data.",
|
||||
"shortDesc": "Extract Tables",
|
||||
"tablesFound": "{{count}} table(s) found",
|
||||
"tablePage": "Page {{page}} — Table {{index}}",
|
||||
"noTables": "No tables were found in this document."
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
||||
@@ -383,6 +383,84 @@
|
||||
"chatSuggestion3": "Suggérer de meilleurs titres",
|
||||
"chatSuggestion4": "Ajouter la gestion des erreurs",
|
||||
"sendMessage": "Envoyer"
|
||||
},
|
||||
"compressImage": {
|
||||
"title": "Compresser une image",
|
||||
"description": "Réduisez la taille des images tout en préservant la qualité. Supporte PNG, JPG et WebP.",
|
||||
"shortDesc": "Compresser l'image",
|
||||
"quality": "Qualité"
|
||||
},
|
||||
"pdfToExcel": {
|
||||
"title": "PDF vers Excel",
|
||||
"description": "Extrayez les tableaux des fichiers PDF et convertissez-les en feuilles de calcul Excel.",
|
||||
"shortDesc": "PDF → Excel"
|
||||
},
|
||||
"removeWatermark": {
|
||||
"title": "Supprimer le filigrane",
|
||||
"description": "Supprimez automatiquement les filigranes textuels des fichiers PDF.",
|
||||
"shortDesc": "Supprimer le filigrane"
|
||||
},
|
||||
"reorderPdf": {
|
||||
"title": "Réorganiser les pages PDF",
|
||||
"description": "Réorganisez les pages de votre PDF dans l'ordre souhaité.",
|
||||
"shortDesc": "Réorganiser les pages",
|
||||
"orderLabel": "Nouvel ordre des pages",
|
||||
"orderPlaceholder": "ex. 3,1,2,5,4",
|
||||
"orderHint": "Entrez les numéros de pages séparés par des virgules dans l'ordre souhaité."
|
||||
},
|
||||
"extractPages": {
|
||||
"title": "Extraire des pages PDF",
|
||||
"description": "Extrayez des pages spécifiques d'un PDF dans un nouveau document.",
|
||||
"shortDesc": "Extraire les pages",
|
||||
"pagesLabel": "Pages à extraire",
|
||||
"pagesPlaceholder": "ex. 1,3,5-8",
|
||||
"pagesHint": "Entrez les numéros de pages ou les plages séparés par des virgules."
|
||||
},
|
||||
"qrCode": {
|
||||
"title": "Générateur de code QR",
|
||||
"description": "Générez des codes QR à partir de texte, d'URL ou de données. Personnalisez la taille et téléchargez en PNG.",
|
||||
"shortDesc": "Générer un code QR",
|
||||
"dataLabel": "Texte ou URL",
|
||||
"dataPlaceholder": "Entrez du texte, une URL ou des données...",
|
||||
"sizeLabel": "Taille"
|
||||
},
|
||||
"htmlToPdf": {
|
||||
"title": "HTML vers PDF",
|
||||
"description": "Convertissez des fichiers HTML en documents PDF avec prise en charge complète du style.",
|
||||
"shortDesc": "HTML → PDF"
|
||||
},
|
||||
"chatPdf": {
|
||||
"title": "Discuter avec un PDF",
|
||||
"description": "Posez des questions sur votre document PDF et obtenez des réponses par IA.",
|
||||
"shortDesc": "Demander à l'IA",
|
||||
"questionLabel": "Votre question",
|
||||
"questionPlaceholder": "Que souhaitez-vous savoir sur ce document ?",
|
||||
"answer": "Réponse de l'IA"
|
||||
},
|
||||
"summarizePdf": {
|
||||
"title": "Résumer un PDF",
|
||||
"description": "Obtenez un résumé généré par IA de votre document PDF en quelques secondes.",
|
||||
"shortDesc": "Résumer le PDF",
|
||||
"lengthLabel": "Longueur du résumé",
|
||||
"short": "Court",
|
||||
"medium": "Moyen",
|
||||
"long": "Détaillé",
|
||||
"resultTitle": "Résumé"
|
||||
},
|
||||
"translatePdf": {
|
||||
"title": "Traduire un PDF",
|
||||
"description": "Traduisez le contenu de votre document PDF dans n'importe quelle langue grâce à l'IA.",
|
||||
"shortDesc": "Traduire le PDF",
|
||||
"targetLang": "Langue cible",
|
||||
"resultTitle": "Traduction"
|
||||
},
|
||||
"tableExtractor": {
|
||||
"title": "Extraire les tableaux d'un PDF",
|
||||
"description": "Détectez et extrayez les tableaux des documents PDF en données structurées.",
|
||||
"shortDesc": "Extraire les tableaux",
|
||||
"tablesFound": "{{count}} tableau(x) trouvé(s)",
|
||||
"tablePage": "Page {{page}} — Tableau {{index}}",
|
||||
"noTables": "Aucun tableau n'a été trouvé dans ce document."
|
||||
}
|
||||
},
|
||||
"account": {
|
||||
|
||||
@@ -21,6 +21,13 @@ import {
|
||||
GitBranch,
|
||||
Scaling,
|
||||
ScanText,
|
||||
Sheet,
|
||||
ArrowUpDown,
|
||||
QrCode,
|
||||
Code,
|
||||
MessageSquare,
|
||||
Languages,
|
||||
Table,
|
||||
} from 'lucide-react';
|
||||
import ToolCard from '@/components/shared/ToolCard';
|
||||
import HeroUploadZone from '@/components/shared/HeroUploadZone';
|
||||
@@ -48,14 +55,25 @@ const pdfTools: ToolInfo[] = [
|
||||
{ key: 'unlockPdf', path: '/tools/unlock-pdf', icon: <Unlock className="h-6 w-6 text-green-600" />, bgColor: 'bg-green-50' },
|
||||
{ key: 'pageNumbers', path: '/tools/page-numbers', icon: <ListOrdered className="h-6 w-6 text-sky-600" />, bgColor: 'bg-sky-50' },
|
||||
{ key: 'pdfFlowchart', path: '/tools/pdf-flowchart', icon: <GitBranch className="h-6 w-6 text-indigo-600" />, bgColor: 'bg-indigo-50' },
|
||||
{ key: 'pdfToExcel', path: '/tools/pdf-to-excel', icon: <Sheet className="h-6 w-6 text-green-600" />, bgColor: 'bg-green-50' },
|
||||
{ key: 'removeWatermark', path: '/tools/remove-watermark-pdf', icon: <Droplets className="h-6 w-6 text-rose-600" />, bgColor: 'bg-rose-50' },
|
||||
{ key: 'reorderPdf', path: '/tools/reorder-pdf', icon: <ArrowUpDown className="h-6 w-6 text-violet-600" />, bgColor: 'bg-violet-50' },
|
||||
{ key: 'extractPages', path: '/tools/extract-pages', icon: <FileOutput className="h-6 w-6 text-amber-600" />, bgColor: 'bg-amber-50' },
|
||||
{ key: 'chatPdf', path: '/tools/chat-pdf', icon: <MessageSquare className="h-6 w-6 text-blue-600" />, bgColor: 'bg-blue-50' },
|
||||
{ key: 'summarizePdf', path: '/tools/summarize-pdf', icon: <FileText className="h-6 w-6 text-emerald-600" />, bgColor: 'bg-emerald-50' },
|
||||
{ key: 'translatePdf', path: '/tools/translate-pdf', icon: <Languages className="h-6 w-6 text-purple-600" />, bgColor: 'bg-purple-50' },
|
||||
{ key: 'tableExtractor', path: '/tools/extract-tables', icon: <Table className="h-6 w-6 text-teal-600" />, bgColor: 'bg-teal-50' },
|
||||
];
|
||||
|
||||
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: 'compressImage', path: '/tools/compress-image', icon: <Minimize2 className="h-6 w-6 text-orange-600" />, bgColor: 'bg-orange-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: 'qrCode', path: '/tools/qr-code', icon: <QrCode className="h-6 w-6 text-indigo-600" />, bgColor: 'bg-indigo-50' },
|
||||
{ key: 'htmlToPdf', path: '/tools/html-to-pdf', icon: <Code className="h-6 w-6 text-sky-600" />, bgColor: 'bg-sky-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' },
|
||||
];
|
||||
|
||||
@@ -79,6 +79,15 @@ export interface TaskResult {
|
||||
// OCR-specific fields
|
||||
text?: string;
|
||||
char_count?: number;
|
||||
// AI PDF fields
|
||||
reply?: string;
|
||||
summary?: string;
|
||||
translation?: string;
|
||||
target_language?: string;
|
||||
pages_analyzed?: number;
|
||||
// Table extraction fields
|
||||
tables?: Array<{ page: number; table_index: number; headers: string[]; rows: string[][] }>;
|
||||
tables_found?: number;
|
||||
}
|
||||
|
||||
export interface AuthUser {
|
||||
|
||||
@@ -17,6 +17,11 @@ import {
|
||||
GitBranch,
|
||||
Scaling,
|
||||
ScanText,
|
||||
Sheet,
|
||||
ArrowUpDown,
|
||||
MessageSquare,
|
||||
Languages,
|
||||
Table,
|
||||
} from 'lucide-react';
|
||||
import type { ComponentType, SVGProps } from 'react';
|
||||
|
||||
@@ -48,6 +53,14 @@ const pdfTools: ToolOption[] = [
|
||||
{ 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' },
|
||||
{ key: 'pdfToExcel', path: '/tools/pdf-to-excel', icon: Sheet, bgColor: 'bg-green-100 dark:bg-green-900/30', iconColor: 'text-green-600 dark:text-green-400' },
|
||||
{ key: 'removeWatermark', path: '/tools/remove-watermark-pdf', icon: Droplets, bgColor: 'bg-rose-100 dark:bg-rose-900/30', iconColor: 'text-rose-600 dark:text-rose-400' },
|
||||
{ key: 'reorderPdf', path: '/tools/reorder-pdf', icon: ArrowUpDown, bgColor: 'bg-violet-100 dark:bg-violet-900/30', iconColor: 'text-violet-600 dark:text-violet-400' },
|
||||
{ key: 'extractPages', path: '/tools/extract-pages', icon: FileOutput, bgColor: 'bg-amber-100 dark:bg-amber-900/30', iconColor: 'text-amber-600 dark:text-amber-400' },
|
||||
{ key: 'chatPdf', path: '/tools/chat-pdf', icon: MessageSquare, bgColor: 'bg-blue-100 dark:bg-blue-900/30', iconColor: 'text-blue-600 dark:text-blue-400' },
|
||||
{ key: 'summarizePdf', path: '/tools/summarize-pdf', icon: FileText, bgColor: 'bg-emerald-100 dark:bg-emerald-900/30', iconColor: 'text-emerald-600 dark:text-emerald-400' },
|
||||
{ key: 'translatePdf', path: '/tools/translate-pdf', icon: Languages, bgColor: 'bg-purple-100 dark:bg-purple-900/30', iconColor: 'text-purple-600 dark:text-purple-400' },
|
||||
{ key: 'tableExtractor', path: '/tools/extract-tables', icon: Table, bgColor: 'bg-teal-100 dark:bg-teal-900/30', iconColor: 'text-teal-600 dark:text-teal-400' },
|
||||
];
|
||||
|
||||
/** Image tools available when an image is uploaded */
|
||||
@@ -57,6 +70,7 @@ const imageTools: ToolOption[] = [
|
||||
{ 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' },
|
||||
{ key: 'compressImage', path: '/tools/compress-image', icon: Minimize2, bgColor: 'bg-orange-100 dark:bg-orange-900/30', iconColor: 'text-orange-600 dark:text-orange-400' },
|
||||
];
|
||||
|
||||
/** Video tools available when a video is uploaded */
|
||||
|
||||
Reference in New Issue
Block a user