Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 25

Commit

f9a3e7b

verified ·

1 Parent(s): 1e2fa4c

Update ocrpro.html

Browse files

Files changed (1) hide show

ocrpro.html +248 -7

ocrpro.html CHANGED Viewed

@@ -101,6 +101,31 @@
     .logo span {
       color: #bfdbfe;
     }
   </style>
 </head>
 <body>
@@ -111,6 +136,19 @@
       <p class="mb-0">استخراج النصوص من الصور والملفات متعددة الصفحات</p>
     </div>
     <!-- بطاقة تحميل الملف -->
     <div class="card">
       <h3>تحميل الملف</h3>
@@ -156,6 +194,7 @@
     <!-- عرض النتائج -->
     <div id="resultsCard" class="card d-none">
       <h3>النص المستخرج</h3>
       <div id="resultText" class="result-text mt-3">
         لم يتم استخراج نص بعد.
       </div>
@@ -179,6 +218,23 @@
     let documentPages = [];
     let selectedPages = [];
     let extractedTexts = [];
     // عناصر DOM
     const fileInput = document.getElementById('fileInput');
@@ -194,9 +250,12 @@
     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');
     const downloadWordBtn = document.getElementById('downloadWordBtn');
     // إضافة مستمعات الأحداث
     document.addEventListener('DOMContentLoaded', function() {
@@ -210,6 +269,22 @@
       downloadWordBtn.addEventListener('click', downloadWord);
     });
     // معالجة الملف
     async function processFile() {
       if (!fileInput.files || fileInput.files.length === 0) {
@@ -232,6 +307,7 @@
       documentPages = [];
       selectedPages = [];
       extractedTexts = [];
       try {
         const fileType = file.name.split('.').pop().toLowerCase();
@@ -494,6 +570,7 @@
       try {
         extractedTexts = [];
         // معالجة كل صفحة
         for (let i = 0; i < pagesToProcess.length; i++) {
@@ -506,13 +583,21 @@
           // استخراج النص من الصورة باستخدام 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');
         // إخفاء حالة المعالجة
@@ -527,6 +612,49 @@
       }
     }
     // استخراج النص من صورة باستخدام API4AI OCR
     async function extractTextFromImage(imageData, pageNumber) {
       try {
@@ -600,18 +728,131 @@
       URL.revokeObjectURL(url);
     }
-    // تنزيل النص إلى Word
     function downloadWord() {
       const text = resultText.textContent;
       if (!text || text === 'لم يتم استخراج نص بعد.') {
         alert('لا يوجد نص للتنزيل');
         return;
       }
-      // تغليف النص ببنية HTML بسيطة لتكون قابلة للعرض في Word
-      const header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Document</title></head><body>";
-      const footer = "</body></html>";
-      const sourceHTML = header + text + footer;
-      const blob = new Blob(['\ufeff', sourceHTML], { type: 'application/msword' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
@@ -623,4 +864,4 @@
     }
   </script>
 </body>
-</html>

     .logo span {
       color: #bfdbfe;
     }
+    .stats-badge {
+      background-color: #3b82f6;
+      color: white;
+      font-size: 14px;
+      padding: 5px 10px;
+      border-radius: 20px;
+      margin-right: 10px;
+    }
+    .stats-container {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+    }
+    .page-preview {
+      margin-bottom: 10px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      padding: 10px;
+    }
+    .page-preview h4 {
+      background-color: #f0f8ff;
+      padding: 5px;
+      border-radius: 3px;
+      margin-bottom: 10px;
+    }
   </style>
 </head>
 <body>
       <p class="mb-0">استخراج النصوص من الصور والملفات متعددة الصفحات</p>
     </div>
+    <!-- بطاقة الإحصائيات -->
+    <div class="card" id="statsCard">
+      <h3>إحصائيات النظام</h3>
+      <div class="stats-container">
+        <div class="stats-badge">
+          عدد الصفحات المعالجة: <span id="ocrCounter">0</span>
+        </div>
+        <div class="stats-badge">
+          تاريخ آخر معالجة: <span id="lastOcrDate">-</span>
+        </div>
+      </div>
+    </div>
     <!-- بطاقة تحميل الملف -->
     <div class="card">
       <h3>تحميل الملف</h3>
     <!-- عرض النتائج -->
     <div id="resultsCard" class="card d-none">
       <h3>النص المستخرج</h3>
+      <div id="resultPreview"></div>
       <div id="resultText" class="result-text mt-3">
         لم يتم استخراج نص بعد.
       </div>
     let documentPages = [];
     let selectedPages = [];
     let extractedTexts = [];
+    let extractedPageNumbers = [];
+    let ocrPagesCount = 0; // عداد لعدد الصفحات المعالجة
+    // استرداد العداد من localStorage عند تحميل الصفحة
+    document.addEventListener('DOMContentLoaded', function() {
+      const savedCount = localStorage.getItem('ocrPagesCount');
+      const lastDate = localStorage.getItem('lastOcrDate');
+      if (savedCount) {
+        ocrPagesCount = parseInt(savedCount);
+        document.getElementById('ocrCounter').textContent = ocrPagesCount;
+      }
+      if (lastDate) {
+        document.getElementById('lastOcrDate').textContent = lastDate;
+      }
+    });
     // عناصر DOM
     const fileInput = document.getElementById('fileInput');
     const extractTextBtn = document.getElementById('extractTextBtn');
     const resultsCard = document.getElementById('resultsCard');
     const resultText = document.getElementById('resultText');
+    const resultPreview = document.getElementById('resultPreview');
     const copyTextBtn = document.getElementById('copyTextBtn');
     const downloadTextBtn = document.getElementById('downloadTextBtn');
     const downloadWordBtn = document.getElementById('downloadWordBtn');
+    const ocrCounter = document.getElementById('ocrCounter');
+    const lastOcrDate = document.getElementById('lastOcrDate');
     // إضافة مستمعات الأحداث
     document.addEventListener('DOMContentLoaded', function() {
       downloadWordBtn.addEventListener('click', downloadWord);
     });
+    // تحديث عداد OCR
+    function updateOcrCounter(count) {
+      ocrPagesCount += count;
+      ocrCounter.textContent = ocrPagesCount;
+      // حفظ العداد في localStorage
+      localStorage.setItem('ocrPagesCount', ocrPagesCount);
+      // تحديث تاريخ آخر معالجة
+      const now = new Date();
+      const formattedDate = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+      lastOcrDate.textContent = formattedDate;
+      localStorage.setItem('lastOcrDate', formattedDate);
+    }
     // معالجة الملف
     async function processFile() {
       if (!fileInput.files || fileInput.files.length === 0) {
       documentPages = [];
       selectedPages = [];
       extractedTexts = [];
+      extractedPageNumbers = [];
       try {
         const fileType = file.name.split('.').pop().toLowerCase();
       try {
         extractedTexts = [];
+        extractedPageNumbers = [];
         // معالجة كل صفحة
         for (let i = 0; i < pagesToProcess.length; i++) {
           // استخراج النص من الصورة باستخدام OCR API
           const pageText = await extractTextFromImage(page.imageData, page.pageNumber);
           extractedTexts.push(pageText);
+          extractedPageNumbers.push(page.pageNumber);
         }
+        // تحديث عداد OCR
+        updateOcrCounter(pagesToProcess.length);
         // جمع النصوص المستخرجة
         const combinedText = extractedTexts.join('\n\n');
         // عرض النص المستخرج
         resultText.textContent = combinedText;
+        // عرض معاينة مرئية منظمة للصفحات
+        generateResultPreview();
         resultsCard.classList.remove('d-none');
         // إخفاء حالة المعالجة
       }
     }
+    // إنشاء معاينة منظمة للنتائج
+    function generateResultPreview() {
+      resultPreview.innerHTML = '';
+      if (extractedTexts.length === 0) {
+        return;
+      }
+      // عرض أول ثلاث صفحات كمعاينة
+      const previewPages = Math.min(extractedTexts.length, 3);
+      for (let i = 0; i < previewPages; i++) {
+        const pageText = extractedTexts[i];
+        const pageNumber = extractedPageNumbers[i];
+        // إنشاء معاينة للصفحة
+        const previewDiv = document.createElement('div');
+        previewDiv.className = 'page-preview';
+        const pageTitle = document.createElement('h4');
+        pageTitle.textContent = `صفحة ${pageNumber}`;
+        const textPreview = document.createElement('p');
+        // عرض أول 100 حرف من كل صفحة
+        const textContent = pageText.replace(`=== صفحة ${pageNumber} ===\n`, '');
+        textPreview.textContent = textContent.length > 100 ?
+          textContent.substring(0, 100) + '...' :
+          textContent;
+        previewDiv.appendChild(pageTitle);
+        previewDiv.appendChild(textPreview);
+        resultPreview.appendChild(previewDiv);
+      }
+      // إضافة رسالة إذا كان هناك المزيد من الصفحات
+      if (extractedTexts.length > 3) {
+        const morePages = document.createElement('p');
+        morePages.className = 'text-muted';
+        morePages.textContent = `+ ${extractedTexts.length - 3} صفحات أخرى...`;
+        resultPreview.appendChild(morePages);
+      }
+    }
     // استخراج النص من صورة باستخدام API4AI OCR
     async function extractTextFromImage(imageData, pageNumber) {
       try {
       URL.revokeObjectURL(url);
     }
+    // تنزيل النص إلى Word بصورة منظمة ومقسمة
     function downloadWord() {
       const text = resultText.textContent;
       if (!text || text === 'لم يتم استخراج نص بعد.') {
         alert('لا يوجد نص للتنزيل');
         return;
       }
+      // تقسيم النص إلى صفحات بناءً على علامات الصفحات
+      const pageTexts = [];
+      let currentPageText = '';
+      const lines = text.split('\n');
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // إذا كان السطر يشير إلى بداية صفحة جديدة
+        if (line.startsWith('=== صفحة ') && line.endsWith(' ===')) {
+          // إذا كان هناك نص تم استخراجه بالفعل، قم بإضافته إلى المصفوفة
+          if (currentPageText) {
+            pageTexts.push(currentPageText);
+            currentPageText = '';
+          }
+          // ابدأ النص الجديد بعنوان الصفحة
+          currentPageText = line + '\n';
+        } else {
+          // إضافة السطر إلى النص الحالي
+          currentPageText += line + '\n';
+        }
+      }
+      // إضافة آخر صفحة
+      if (currentPageText) {
+        pageTexts.push(currentPageText);
+      }
+      // إنشاء مستند Word
+      let wordContent = `
+<!DOCTYPE html>
+<html xmlns:o='urn:schemas-microsoft-com:office:office'
+      xmlns:w='urn:schemas-microsoft-com:office:word'
+      xmlns='http://www.w3.org/TR/REC-html40'>
+<head>
+  <meta charset='utf-8'>
+  <title>موندو لينجوا - نص OCR</title>
+  <style>
+    @page {
+      size: 21cm 29.7cm;
+      margin: 2cm;
+    }
+    body {
+      font-family: 'Arial', sans-serif;
+      direction: rtl;
+      text-align: right;
+    }
+    .page-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #3b82f6;
+      margin-bottom: 15px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #ccc;
+    }
+    .page-content {
+      margin-bottom: 15px;
+      line-height: 1.5;
+      page-break-after: always;
+    }
+    .footer {
+      font-size: 10px;
+      text-align: center;
+      color: #666;
+      margin-top: 20px;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .header h1 {
+      color: #3b82f6;
+      margin-bottom: 5px;
+    }
+    .date {
+      font-size: 12px;
+      color: #666;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>موندو لينجوا - نص مستخرج بتقنية OCR</h1>
+    <div class="date">تاريخ الاستخراج: ${new Date().toLocaleDateString('ar-EG')}</div>
+  </div>
+`;
+      // إضافة كل صفحة إلى المستند
+      pageTexts.forEach((pageText, index) => {
+        // استخراج رقم الصفحة من العنوان
+        const titleMatch = pageText.match(/=== صفحة (\d+) ===/);
+        const pageNumber = titleMatch ? titleMatch[1] : (index + 1);
+        // استبدال عنوان الصفحة بتنسيق أفضل
+        const formattedPageText = pageText.replace(/=== صفحة \d+ ===\n/, '');
+        // إضافة صفحة جديدة إلى المستند
+        wordContent += `
+  <div class="page-content">
+    <div class="page-title">صفحة ${pageNumber}</div>
+    <div>${formattedPageText.replace(/\n/g, '<br>')}</div>
+  </div>
+`;
+      });
+      // إضافة تذييل المستند
+      wordContent += `
+  <div class="footer">
+    تم إنشاء هذا المستند بواسطة نظام موندو لينجوا للتعرف الضوئي على النصوص
+  </div>
+</body>
+</html>
+`;
+      // تنزيل المستند
+      const blob = new Blob(['\ufeff', wordContent], { type: 'application/msword' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
     }
   </script>
 </body>
+</html>