Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 3, 2025

Commit

fdbe166

verified ·

1 Parent(s): d0d3666

Update ocr.html

Browse files

Files changed (1) hide show

ocr.html +504 -416

ocr.html CHANGED Viewed

@@ -1,514 +1,602 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <title>UFastPro OCR Technology</title>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
-  <!-- PDF.js library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
   <style>
-    :root {
-      --primary: #4361ee;
-      --primary-hover: #3a56d4;
-      --secondary: #4cc9f0;
-      --secondary-hover: #3db8dd;
-    }
     body {
       background-color: #f8f9fa;
     }
-    .container {
-      max-width: 900px;
-    }
-    header {
-      margin-bottom: 2rem;
-      padding: 1rem 0;
-      background: linear-gradient(135deg, var(--primary), var(--secondary));
       color: white;
-      border-radius: 0 0 10px 10px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    header h1 {
-      margin: 0;
-      font-weight: bold;
     }
-    header p {
-      margin: 0.5rem 0 0 0;
-      opacity: 0.9;
     }
-    article {
-      margin: 2rem 0;
-      padding: 2rem;
       background-color: white;
       border-radius: 10px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     }
-    .progress-container {
-      width: 100%;
-      margin: 20px 0;
     }
-    .progress-bar {
-      height: 20px;
-      background: linear-gradient(to right, var(--primary), var(--secondary));
-      width: 0%;
       border-radius: 5px;
-      transition: width 0.3s;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    .page-result {
-      margin-bottom: 20px;
-      border: 1px solid #e9ecef;
-      padding: 20px;
-      border-radius: 8px;
-      background-color: white;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-      transition: transform 0.2s;
     }
-    .page-result:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
-    .page-result h4 {
-      margin-top: 0;
-      color: var(--primary);
-      border-bottom: 2px solid #f1f3f5;
-      padding-bottom: 0.5rem;
     }
-    #resultsContainer {
-      max-height: 600px;
-      overflow-y: auto;
-      margin-top: 20px;
-      padding-right: 10px;
     }
-    .status-text {
       text-align: center;
-      margin: 10px 0;
-      font-weight: 500;
-      color: #495057;
-    }
-    button {
-      background-color: var(--primary);
-      transition: all 0.2s;
     }
-    button:hover {
-      background-color: var(--primary-hover);
-      transform: translateY(-2px);
-    }
-    #cancelProcessingBtn {
-      background-color: #e63946;
     }
-    #cancelProcessingBtn:hover {
-      background-color: #d62828;
     }
-    pre {
-      background-color: #f8f9fa;
-      border-radius: 5px;
       padding: 10px;
-      font-size: 0.9rem;
     }
-    details summary {
-      cursor: pointer;
-      color: var(--primary);
-      font-weight: 500;
     }
-    footer {
-      text-align: center;
-      margin-top: 2rem;
-      padding: 1rem 0;
-      color: #6c757d;
-      font-size: 0.9rem;
-    }
     .logo {
       font-weight: bold;
-      font-size: 1.2rem;
-      color: white;
-      text-decoration: none;
     }
     .logo span {
-      color: var(--secondary);
-    }
-    .upload-container {
-      border: 2px dashed #ced4da;
-      border-radius: 8px;
-      padding: 2rem;
-      text-align: center;
-      transition: all 0.2s;
-      cursor: pointer;
-      margin-bottom: 1rem;
-    }
-    .upload-container:hover {
-      border-color: var(--primary);
-      background-color: rgba(67, 97, 238, 0.05);
-    }
-    .upload-icon {
-      font-size: 2rem;
-      color: var(--primary);
-      margin-bottom: 1rem;
-    }
-    .export-button {
-      display: none;
-      margin-top: 20px;
-    }
-    @media (max-width: 768px) {
-      article {
-        padding: 1rem;
-      }
     }
   </style>
 </head>
 <body>
-  <header class="container">
-    <div style="text-align: center;">
-      <a href="#" class="logo">UFast<span>Pro</span> OCR Technology</a>
-      <p>Advanced PDF Text Recognition System</p>
     </div>
-  </header>
-  <main class="container">
-    <article>
-      <h3 style="text-align: center; margin-top: 0;">PDF Text Extraction</h3>
-      <p style="text-align: center;">Upload any PDF document to extract text from all pages using our advanced OCR technology.</p>
-      <div class="upload-container" id="uploadContainer">
-        <div class="upload-icon">📄</div>
-        <p>Drag & drop your PDF here or click to browse</p>
-        <input type="file" id="pdfFile" name="pdfFile" accept=".pdf" style="display: none;">
       </div>
-      <div class="progress-container" id="progressContainer" hidden>
-        <div class="progress-bar" id="progressBar"></div>
-        <p class="status-text" id="statusText">Ready to process</p>
       </div>
-      <div style="display: flex; gap: 10px; justify-content: center;">
-        <button id="startProcessingBtn" disabled>Start Processing</button>
-        <button id="cancelProcessingBtn" hidden>Cancel Processing</button>
       </div>
-      <button id="exportAllTextBtn" class="export-button">Export All Text</button>
-    </article>
-    <div id="resultsContainer"></div>
-  </main>
-  <footer class="container">
-    <p>&copy; 2025 UFastPro OCR Technology. All rights reserved.</p>
-  </footer>
   <script>
-    // Set up PDF.js worker
     pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
-    // API keys pool
-    const API_KEYS = [
-      '32769fb369mshfdf6f5e28e26674p1f3764jsn2a31085a1fc7',
-      '091dbfbf0emsh6606eb2165cfd97p191257jsnd017aa229e09',
-      '2175cafd75msh4465ea00b022145p1e062ajsn05e78cebc495',
-      'eb11693cddmshb8bd157e05b74acp1f6aa4jsn4369fa546e55',
-      'e9c1cd0db3mshb54648cf3400243p1d0a2bjsnf0d54e43fca2',
-      'fdb95540bamsh786e3ec8083bb22p1b4c1ajsn44fecbb812bb'
-    ];
-    // Get random API key from the pool
-    function getRandomApiKey() {
-      const randomIndex = Math.floor(Math.random() * API_KEYS.length);
-      return API_KEYS[randomIndex];
-    }
-    const RAPIDAPI_HOST = 'ocr43.p.rapidapi.com';
-    const API_URL = 'https://ocr43.p.rapidapi.com/v1/results';
     document.addEventListener('DOMContentLoaded', function() {
-      const pdfFileInput = document.getElementById('pdfFile');
-      const uploadContainer = document.getElementById('uploadContainer');
-      const startProcessingBtn = document.getElementById('startProcessingBtn');
-      const cancelProcessingBtn = document.getElementById('cancelProcessingBtn');
-      const progressContainer = document.getElementById('progressContainer');
-      const progressBar = document.getElementById('progressBar');
-      const statusText = document.getElementById('statusText');
-      const resultsContainer = document.getElementById('resultsContainer');
-      const exportAllTextBtn = document.getElementById('exportAllTextBtn');
-      let pdfDocument = null;
-      let isProcessing = false;
-      let shouldCancel = false;
-      let allExtractedText = [];
-      // Event listeners
-      pdfFileInput.addEventListener('change', handlePdfSelection);
-      uploadContainer.addEventListener('click', () => pdfFileInput.click());
-      uploadContainer.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        uploadContainer.style.borderColor = 'var(--primary)';
-        uploadContainer.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
-      });
-      uploadContainer.addEventListener('dragleave', (e) => {
-        e.preventDefault();
-        uploadContainer.style.borderColor = '#ced4da';
-        uploadContainer.style.backgroundColor = '';
-      });
-      uploadContainer.addEventListener('drop', (e) => {
-        e.preventDefault();
-        uploadContainer.style.borderColor = '#ced4da';
-        uploadContainer.style.backgroundColor = '';
-        if (e.dataTransfer.files.length) {
-          pdfFileInput.files = e.dataTransfer.files;
-          handlePdfSelection({ target: { files: e.dataTransfer.files } });
         }
-      });
-      startProcessingBtn.addEventListener('click', startProcessing);
-      cancelProcessingBtn.addEventListener('click', cancelProcessing);
-      exportAllTextBtn.addEventListener('click', exportAllText);
-      // Handle PDF file selection
-      async function handlePdfSelection(event) {
-        const file = event.target.files[0];
-        if (!file || file.type !== 'application/pdf') {
-          alert('Please select a valid PDF file.');
-          return;
         }
-        try {
-          // Update UI to show loading
-          statusText.textContent = 'Loading PDF...';
-          progressContainer.hidden = false;
-          progressBar.style.width = '10%';
-          // Load the PDF file
-          const arrayBuffer = await file.arrayBuffer();
-          pdfDocument = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-          // Enable the start button and update status
-          startProcessingBtn.disabled = false;
-          statusText.textContent = `PDF loaded with ${pdfDocument.numPages} pages. Click "Start Processing" to begin.`;
-          progressBar.style.width = '20%';
-        } catch (error) {
-          console.error('Error loading PDF:', error);
-          alert('Error loading PDF file. Please try again.');
-          progressContainer.hidden = true;
         }
       }
-      // Start processing the PDF
-      async function startProcessing() {
-        if (!pdfDocument || isProcessing) return;
-        isProcessing = true;
-        shouldCancel = false;
-        startProcessingBtn.hidden = true;
-        cancelProcessingBtn.hidden = false;
-        resultsContainer.innerHTML = '';
-        allExtractedText = [];
-        exportAllTextBtn.style.display = 'none';
-        const totalPages = pdfDocument.numPages;
-        for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
-          if (shouldCancel) {
-            statusText.textContent = 'Processing cancelled.';
-            break;
           }
-          // Update progress
-          updateProgress(pageNum, totalPages);
-          try {
-            // Process the current page
-            await processPage(pageNum, totalPages);
-          } catch (error) {
-            console.error(`Error processing page ${pageNum}:`, error);
-            addPageResult(pageNum, `Error: ${error.message}`, null);
-            allExtractedText.push(`[PAGE ${pageNum}]\nError: ${error.message}\n`);
           }
         }
-        // Reset UI after processing
-        if (!shouldCancel) {
-          statusText.textContent = 'Processing complete!';
-          progressBar.style.width = '100%';
-          exportAllTextBtn.style.display = 'block';
         }
-        isProcessing = false;
-        startProcessingBtn.hidden = false;
-        cancelProcessingBtn.hidden = true;
       }
-      // Cancel the processing
-      function cancelProcessing() {
-        shouldCancel = true;
-        statusText.textContent = 'Cancelling...';
-      }
-      // Update progress bar and status text
-      function updateProgress(current, total) {
-        const percentage = 20 + ((current / total) * 80); // Start at 20% (after loading)
-        progressBar.style.width = `${percentage}%`;
-        statusText.textContent = `Processing page ${current} of ${total}`;
       }
-      // Export all extracted text
-      function exportAllText() {
-        if (allExtractedText.length === 0) return;
-        const combinedText = allExtractedText.join('\n\n');
-        const blob = new Blob([combinedText], { type: 'text/plain' });
-        const url = URL.createObjectURL(blob);
         const a = document.createElement('a');
-        a.href = url;
-        a.download = 'extracted_text.txt';
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
-        URL.revokeObjectURL(url);
       }
-      // Process a single page
-      async function processPage(pageNum, totalPages) {
-        // Get the page
-        const page = await pdfDocument.getPage(pageNum);
-        // Create a canvas for the page (not displayed but needed for processing)
-        const viewport = page.getViewport({ scale: 1.5 });
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        canvas.height = viewport.height;
-        canvas.width = viewport.width;
-        // Render the page to the canvas
-        await page.render({
-          canvasContext: context,
-          viewport: viewport
-        }).promise;
-        // Convert canvas to blob
-        const blob = await new Promise(resolve => {
-          canvas.toBlob(resolve, 'image/png');
-        });
-        // Get a random API key for this request
-        const randomApiKey = getRandomApiKey();
-        // Send the image to OCR API
         const formData = new FormData();
-        formData.append('image', blob, `page-${pageNum}.png`);
-        const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
-            'X-RapidAPI-Key': randomApiKey,
-            'X-RapidAPI-Host': RAPIDAPI_HOST
           },
           body: formData
         });
-        const data = await response.json();
-        // Extract text from the response
-        let extractedText = '';
-        try {
-          extractedText = data.results[0].entities[0].objects[0].entities[0].text;
-        } catch (error) {
-          extractedText = 'No text could be extracted from this page.';
         }
-        // Store the extracted text
-        allExtractedText.push(`[PAGE ${pageNum}]\n${extractedText}`);
-        // Add the result to the UI
-        addPageResult(pageNum, extractedText, data);
       }
-      // Add a page result to the UI
-      function addPageResult(pageNum, text, rawData) {
-        const pageResult = document.createElement('div');
-        pageResult.className = 'page-result';
-        // Add page header
-        const header = document.createElement('h4');
-        header.textContent = `Page ${pageNum}`;
-        pageResult.appendChild(header);
-        // Add extracted text
-        const textHeader = document.createElement('h5');
-        textHeader.textContent = 'Extracted Text:';
-        pageResult.appendChild(textHeader);
-        const textContent = document.createElement('pre');
-        textContent.style.whiteSpace = 'pre-wrap';
-        textContent.textContent = text || 'No text extracted';
-        pageResult.appendChild(textContent);
-        // Add copy button
-        const copyButton = document.createElement('button');
-        copyButton.textContent = 'Copy Text';
-        copyButton.setAttribute('aria-label', 'Copy text to clipboard');
-        copyButton.style.marginBottom = '10px';
-        copyButton.addEventListener('click', () => {
-          navigator.clipboard.writeText(text || '')
-            .then(() => {
-              const originalText = copyButton.textContent;
-              copyButton.textContent = 'Copied!';
-              setTimeout(() => {
-                copyButton.textContent = originalText;
-              }, 2000);
-            })
-            .catch(err => console.error('Failed to copy text:', err));
-        });
-        pageResult.appendChild(copyButton);
-        // Add raw data toggle (optional, can be removed if not needed)
-        if (rawData) {
-          const rawToggle = document.createElement('details');
-          const rawSummary = document.createElement('summary');
-          rawSummary.textContent = 'Show Raw API Response';
-          rawToggle.appendChild(rawSummary);
-          const rawContent = document.createElement('pre');
-          rawContent.style.maxHeight = '200px';
-          rawContent.style.overflow = 'auto';
-          rawContent.textContent = JSON.stringify(rawData, null, 2);
-          rawToggle.appendChild(rawContent);
-          pageResult.appendChild(rawToggle);
-        }
-        // Add to results container
-        resultsContainer.appendChild(pageResult);
-        // Scroll to the new result
-        pageResult.scrollIntoView({ behavior: 'smooth', block: 'end' });
       }
-    });
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="ar" dir="rtl">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>موندو لينجوا - نظام OCR</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
   <style>
     body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
       background-color: #f8f9fa;
     }
+    .header {
+      background-color: #3b82f6;
       color: white;
+      padding: 15px;
+      border-radius: 10px;
+      margin-bottom: 20px;
+      text-align: center;
     }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
     }
+    .card {
       background-color: white;
       border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      padding: 20px;
+      margin-bottom: 20px;
     }
+    .pdf-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+      gap: 10px;
+      margin-top: 15px;
     }
+    .pdf-page {
+      border: 1px solid #ddd;
       border-radius: 5px;
+      padding: 5px;
+      position: relative;
+      cursor: pointer;
+      transition: all 0.2s;
     }
+    .pdf-page:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
     }
+    .pdf-page.selected {
+      border: 2px solid #3b82f6;
     }
+    .pdf-page img {
+      width: 100%;
+      height: auto;
+      border-radius: 3px;
     }
+    .page-number {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(0,0,0,0.6);
+      color: white;
       text-align: center;
+      font-size: 12px;
+      padding: 2px;
     }
+    .btn-primary {
+      background-color: #3b82f6;
+      border-color: #3b82f6;
     }
+    .btn-success {
+      background-color: #10b981;
+      border-color: #10b981;
     }
+    .result-text {
+      max-height: 300px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      direction: rtl;
+      border: 1px solid #ddd;
       padding: 10px;
+      border-radius: 5px;
+      background-color: #f8f9fa;
     }
+    .spinner-border {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0.5rem;
     }
     .logo {
       font-weight: bold;
+      font-size: 24px;
+      display: inline-block;
+      margin-bottom: 5px;
     }
     .logo span {
+      color: #bfdbfe;
     }
   </style>
 </head>
 <body>
+  <div class="container">
+    <div class="header">
+      <div class="logo">مـوندو <span>لينجـوا</span></div>
+      <h1>نظام التعرف الضوئي على النصوص</h1>
+      <p class="mb-0">استخراج النصوص من الصور والملفات متعددة الصفحات</p>
     </div>
+    <!-- بطاقة تحميل الملف -->
+    <div class="card">
+      <h3>تحميل الملف</h3>
+      <div class="mb-3">
+        <input type="file" class="form-control" id="fileInput" accept=".pdf,.jpg,.jpeg,.png">
+        <div class="form-text">يمكنك تحميل ملف PDF (حتى 30 صفحة) أو صورة</div>
       </div>
+      <button id="processBtn" class="btn btn-primary">معالجة الملف</button>
+    </div>
+    <!-- عرض حالة المعالجة -->
+    <div id="processingStatus" class="card d-none">
+      <h3>حالة المعالجة</h3>
+      <div class="alert alert-info">
+        <div class="d-flex align-items-center">
+          <div class="spinner-border text-primary" role="status"></div>
+          <span id="statusText" class="ms-2">جاري معالجة الملف...</span>
+        </div>
+      </div>
+      <div class="progress mt-2">
+        <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
       </div>
+    </div>
+    <!-- عرض صفحات PDF -->
+    <div id="pdfPagesCard" class="card d-none">
+      <h3>صفحات الملف</h3>
+      <p>اختر الصفحات التي تريد معالجتها (انقر للتحديد)</p>
+      <div class="mb-3">
+        <button id="selectAllBtn" class="btn btn-sm btn-outline-primary me-2">تحديد الكل</button>
+        <button id="deselectAllBtn" class="btn btn-sm btn-outline-secondary">إلغاء تحديد الكل</button>
       </div>
+      <div id="pdfPagesContainer" class="pdf-grid"></div>
+      <div class="mt-3">
+        <button id="extractImagesBtn" class="btn btn-success me-2">تحويل إلى صور</button>
+        <button id="extractTextBtn" class="btn btn-primary">استخراج النص</button>
+      </div>
+    </div>
+    <!-- عرض النتائج -->
+    <div id="resultsCard" class="card d-none">
+      <h3>النص المستخرج</h3>
+      <div id="resultText" class="result-text mt-3">
+        لم يتم استخراج نص بعد.
+      </div>
+      <div class="mt-3">
+        <button id="copyTextBtn" class="btn btn-outline-primary me-2">نسخ النص</button>
+        <button id="downloadTextBtn" class="btn btn-success">تنزيل النص</button>
+      </div>
+    </div>
+  </div>
   <script>
+    // تهيئة PDF.js
     pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
+    // إعدادات API4AI OCR
+    const RAPIDAPI_KEY = 'eb11693cddmshb8bd157e05b74acp1f6aa4jsn4369fa546e55';
+    const OCR_API_URL = 'https://ocr43.p.rapidapi.com/v1/results';
+    // متغيرات عامة
+    let documentPages = [];
+    let selectedPages = [];
+    let extractedTexts = [];
+    // عناصر DOM
+    const fileInput = document.getElementById('fileInput');
+    const processBtn = document.getElementById('processBtn');
+    const processingStatus = document.getElementById('processingStatus');
+    const statusText = document.getElementById('statusText');
+    const progressBar = document.getElementById('progressBar');
+    const pdfPagesCard = document.getElementById('pdfPagesCard');
+    const pdfPagesContainer = document.getElementById('pdfPagesContainer');
+    const selectAllBtn = document.getElementById('selectAllBtn');
+    const deselectAllBtn = document.getElementById('deselectAllBtn');
+    const extractImagesBtn = document.getElementById('extractImagesBtn');
+    const extractTextBtn = document.getElementById('extractTextBtn');
+    const resultsCard = document.getElementById('resultsCard');
+    const resultText = document.getElementById('resultText');
+    const copyTextBtn = document.getElementById('copyTextBtn');
+    const downloadTextBtn = document.getElementById('downloadTextBtn');
+    // إضافة مستمعات الأحداث
     document.addEventListener('DOMContentLoaded', function() {
+      processBtn.addEventListener('click', processFile);
+      selectAllBtn.addEventListener('click', selectAllPages);
+      deselectAllBtn.addEventListener('click', deselectAllPages);
+      extractImagesBtn.addEventListener('click', extractImages);
+      extractTextBtn.addEventListener('click', extractText);
+      copyTextBtn.addEventListener('click', copyText);
+      downloadTextBtn.addEventListener('click', downloadText);
+    });
+    // معالجة الملف
+    async function processFile() {
+      if (!fileInput.files || fileInput.files.length === 0) {
+        alert('الرجاء اختيار ملف أولاً');
+        return;
+      }
+      const file = fileInput.files[0];
+      // إظهار حالة المعالجة
+      processingStatus.classList.remove('d-none');
+      statusText.textContent = 'جاري معالجة الملف...';
+      progressBar.style.width = '0%';
+      // إخفاء بطاقات أخرى
+      pdfPagesCard.classList.add('d-none');
+      resultsCard.classList.add('d-none');
+      // إفراغ مصفوفات الصفحا��
+      documentPages = [];
+      selectedPages = [];
+      extractedTexts = [];
+      try {
+        const fileType = file.name.split('.').pop().toLowerCase();
+        if (fileType === 'pdf') {
+          await processPdf(file);
+        } else if (['jpg', 'jpeg', 'png'].includes(fileType)) {
+          await processImage(file);
+        } else {
+          throw new Error('نوع الملف غير مدعوم. يرجى اختيار ملف PDF أو صورة.');
         }
+        // إظهار بطاقة صفحات PDF
+        pdfPagesCard.classList.remove('d-none');
+        // إخفاء حالة المعالجة
+        processingStatus.classList.add('d-none');
+      } catch (error) {
+        console.error('Error processing file:', error);
+        statusText.textContent = `خطأ: ${error.message}`;
+        // لا نخفي حالة المعالجة لإظهار الخطأ
+      }
+    }
+    // معالجة ملف PDF
+    async function processPdf(file) {
+      try {
+        // تحميل ملف PDF
+        const arrayBuffer = await file.arrayBuffer();
+        const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        // التحقق من عدد الصفحات
+        const numPages = pdfDoc.numPages;
+        if (numPages > 30) {
+          alert('هذا الملف يحتوي على أكثر من 30 صفحة. سيتم معالجة أول 30 صفحة فقط.');
         }
+        // مسح حاوية الصفحات
+        pdfPagesContainer.innerHTML = '';
+        // عرض أول 30 صفحة كصور مصغرة
+        const maxPages = Math.min(numPages, 30);
+        for (let i = 1; i <= maxPages; i++) {
+          // تحديث شريط التقدم
+          progressBar.style.width = `${(i / maxPages) * 100}%`;
+          statusText.textContent = `جاري معالجة الصفحة ${i} من ${maxPages}...`;
+          // تحويل الصفحة إلى صورة
+          const pageImage = await convertPdfPageToImage(pdfDoc, i);
+          // إضافة الصفحة إلى المصفوفة
+          documentPages.push({
+            pageNumber: i,
+            imageData: pageImage.imageData,
+            width: pageImage.width,
+            height: pageImage.height
+          });
+          // إنشاء عنصر للصفحة في واجهة المستخدم
+          createPageElement(pageImage.imageData, i);
         }
+      } catch (error) {
+        console.error('Error processing PDF:', error);
+        throw error;
       }
+    }
+    // معالجة ملف صورة
+    async function processImage(file) {
+      try {
+        // قراءة الصورة كـ Data URL
+        const imageData = await readFileAsDataURL(file);
+        // إنشاء صورة لقياس أبعادها
+        const img = new Image();
+        await new Promise((resolve, reject) => {
+          img.onload = resolve;
+          img.onerror = reject;
+          img.src = imageData;
+        });
+        // مسح حاوية الصفحات
+        pdfPagesContainer.innerHTML = '';
+        // إضافة الصورة إلى المصفوفة
+        documentPages = [{
+          pageNumber: 1,
+          imageData: imageData,
+          width: img.width,
+          height: img.height
+        }];
+        // إنشاء عنصر للصورة في واجهة المستخدم
+        createPageElement(imageData, 1);
+        // تحديث شريط التقدم
+        progressBar.style.width = '100%';
+        statusText.textContent = 'تمت معالجة الصورة بنجاح';
+      } catch (error) {
+        console.error('Error processing image:', error);
+        throw error;
+      }
+    }
+    // تحويل صفحة PDF إلى صورة
+    async function convertPdfPageToImage(pdfDoc, pageNumber, scale = 1.5) {
+      try {
+        // الحصول على الصفحة من مستند PDF
+        const page = await pdfDoc.getPage(pageNumber);
+        // إنشاء عنصر canvas لرسم الصفحة
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        // ضبط حجم الـ canvas بناءً على حجم الصفحة ومقياس التكبير
+        const viewport = page.getViewport({ scale });
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        // رسم الصفحة على الـ canvas
+        await page.render({
+          canvasContext: context,
+          viewport: viewport
+        }).promise;
+        // تحويل الـ canvas إلى صورة بصيغة PNG
+        return {
+          imageData: canvas.toDataURL('image/png'),
+          width: viewport.width,
+          height: viewport.height,
+          pageNumber: pageNumber
+        };
+      } catch (error) {
+        console.error(`Error converting PDF page ${pageNumber} to image:`, error);
+        throw error;
+      }
+    }
+    // إنشاء عنصر للصفحة في واجهة المستخدم
+    function createPageElement(imageData, pageNumber) {
+      const pageDiv = document.createElement('div');
+      pageDiv.className = 'pdf-page';
+      pageDiv.dataset.page = pageNumber;
+      const img = document.createElement('img');
+      img.src = imageData;
+      img.alt = `صفحة ${pageNumber}`;
+      const pageNumberDiv = document.createElement('div');
+      pageNumberDiv.className = 'page-number';
+      pageNumberDiv.textContent = `صفحة ${pageNumber}`;
+      pageDiv.appendChild(img);
+      pageDiv.appendChild(pageNumberDiv);
+      // إضافة حدث النقر للتحديد
+      pageDiv.addEventListener('click', function() {
+        this.classList.toggle('selected');
+        // تحديث مصفوفة الصفحات المحددة
+        const page = parseInt(this.dataset.page);
+        if (this.classList.contains('selected')) {
+          if (!selectedPages.includes(page)) {
+            selectedPages.push(page);
           }
+        } else {
+          const index = selectedPages.indexOf(page);
+          if (index > -1) {
+            selectedPages.splice(index, 1);
           }
         }
+      });
+      pdfPagesContainer.appendChild(pageDiv);
+    }
+    // قراءة ملف كـ Data URL
+    function readFileAsDataURL(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = e => resolve(e.target.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    }
+    // تحديد كل الصفحات
+    function selectAllPages() {
+      document.querySelectorAll('.pdf-page').forEach(page => {
+        page.classList.add('selected');
+        const pageNumber = parseInt(page.dataset.page);
+        if (!selectedPages.includes(pageNumber)) {
+          selectedPages.push(pageNumber);
         }
+      });
+    }
+    // إلغاء تحديد كل الصفحات
+    function deselectAllPages() {
+      document.querySelectorAll('.pdf-page').forEach(page => {
+        page.classList.remove('selected');
+      });
+      selectedPages = [];
+    }
+    // استخراج الصور
+    function extractImages() {
+      if (documentPages.length === 0) {
+        alert('لا توجد صفحات للمعالجة');
+        return;
       }
+      // اختيار الصفحات المحددة فقط أو كل الصفحات إذا لم يتم تحديد أي صفحة
+      const pagesToExtract = selectedPages.length > 0
+        ? documentPages.filter(page => selectedPages.includes(page.pageNumber))
+        : documentPages;
+      if (pagesToExtract.length === 0) {
+        alert('الرجاء تحديد صفحة واحدة على الأقل');
+        return;
       }
+      // إنشاء وتنزيل كل صورة
+      pagesToExtract.forEach(page => {
         const a = document.createElement('a');
+        a.href = page.imageData;
+        a.download = `mondo_lingua_page_${page.pageNumber}.png`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
+      });
+      // إظهار رسالة نجاح
+      alert(`تم استخراج ${pagesToExtract.length} صورة بنجاح`);
+    }
+    // استخراج النص
+    async function extractText() {
+      if (documentPages.length === 0) {
+        alert('لا توجد صفحات للمعالجة');
+        return;
+      }
+      // اختيار الصفحات المحددة فقط أو كل الصفحات إذا لم يتم تحديد أي صفحة
+      const pagesToProcess = selectedPages.length > 0
+        ? documentPages.filter(page => selectedPages.includes(page.pageNumber))
+        : documentPages;
+      if (pagesToProcess.length === 0) {
+        alert('الرجاء تحديد صفحة واحدة على الأقل');
+        return;
       }
+      // إظهار حالة المعالجة
+      processingStatus.classList.remove('d-none');
+      statusText.textContent = 'جاري استخراج النص...';
+      progressBar.style.width = '0%';
+      try {
+        extractedTexts = [];
+        // معالجة كل صفحة
+        for (let i = 0; i < pagesToProcess.length; i++) {
+          const page = pagesToProcess[i];
+          // تحديث التقدم
+          progressBar.style.width = `${((i + 1) / pagesToProcess.length) * 100}%`;
+          statusText.textContent = `جاري معالجة الصفحة ${i + 1} من ${pagesToProcess.length}...`;
+          // استخراج النص من الصورة باستخدام OCR API
+          const pageText = await extractTextFromImage(page.imageData, page.pageNumber);
+          extractedTexts.push(pageText);
+        }
+        // جمع النصوص المستخرجة
+        const combinedText = extractedTexts.join('\n\n');
+        // عرض النص المستخرج
+        resultText.textContent = combinedText;
+        resultsCard.classList.remove('d-none');
+        // إخفاء حالة المعالجة
+        processingStatus.classList.add('d-none');
+        // التمرير إلى النتائج
+        resultsCard.scrollIntoView({ behavior: 'smooth' });
+      } catch (error) {
+        console.error('Error extracting text:', error);
+        statusText.textContent = `خطأ: ${error.message}`;
+      }
+    }
+    // استخراج النص من صورة باستخدام API4AI OCR
+    async function extractTextFromImage(imageData, pageNumber) {
+      try {
+        // تحويل Data URL إلى Blob
+        const response = await fetch(imageData);
+        const blob = await response.blob();
+        // إنشاء FormData وإضافة الصورة
         const formData = new FormData();
+        formData.append('image', blob, `page_${pageNumber}.png`);
+        // طلب OCR
+        const ocrResponse = await fetch(OCR_API_URL, {
           method: 'POST',
           headers: {
+            'X-RapidAPI-Key': RAPIDAPI_KEY,
+            'X-RapidAPI-Host': 'ocr43.p.rapidapi.com'
           },
           body: formData
         });
+        if (!ocrResponse.ok) {
+          throw new Error(`فشل في طلب OCR: ${ocrResponse.status}`);
         }
+        const data = await ocrResponse.json();
+        try {
+          // استخراج النص من الاستجابة
+          const text = data.results[0].entities[0].objects[0].entities[0].text;
+          return `=== صفحة ${pageNumber} ===\n${text}`;
+        } catch (e) {
+          console.error('Error parsing OCR response:', e);
+          return `=== صفحة ${pageNumber} ===\n[خطأ في معالجة النص]`;
+        }
+      } catch (error) {
+        console.error(`Error in OCR for page ${pageNumber}:`, error);
+        throw error;
+      }
+    }
+    // نسخ النص
+    function copyText() {
+      const text = resultText.textContent;
+      if (!text || text === 'لم يتم استخراج نص بعد.') {
+        alert('لا يوجد نص للنسخ');
+        return;
       }
+      navigator.clipboard.writeText(text)
+        .then(() => alert('تم نسخ النص بنجاح'))
+        .catch(err => alert('حدث خطأ أثناء نسخ النص: ' + err));
+    }
+    // تنزيل النص
+    function downloadText() {
+      const text = resultText.textContent;
+      if (!text || text === 'لم يتم استخراج نص بعد.') {
+        alert('لا يوجد نص للتنزيل');
+        return;
       }
+      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'mondo_lingua_ocr_text.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
   </script>
 </body>
 </html>