الميزات: إضافة أدوات جديدة لمعالجة ملفات 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.

frontend/src/components/tools/ChatPdf.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/CompressImage.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/ExtractPages.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/HtmlToPdf.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/PdfToExcel.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/QrCodeGenerator.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/RemoveWatermark.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/ReorderPdf.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/SummarizePdf.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/TableExtractor.tsx

@@ -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>
+    </>
+  );
+}

frontend/src/components/tools/TranslatePdf.tsx

@@ -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>
+    </>
+  );
+}