Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 4

Commit

5a6ee0d

verified ·

1 Parent(s): 7929297

Update ocr.html

Browse files

Files changed (1) hide show

ocr.html +439 -526

ocr.html CHANGED Viewed

@@ -3,600 +3,513 @@
 <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>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>نظام المقارنة والترجمة الخاص بشركة موندو لينجوا</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
+    @keyframes gradient {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
     }
+    .animate-gradient {
+      background-size: 200% 200%;
+      animation: gradient 15s ease infinite;
     }
+    .transition-all { transition: all 0.3s ease-in-out; }
+    .animate-scale { transition: transform 0.2s ease-in-out; }
+    .animate-scale:hover { transform: scale(1.02); }
+    .file-drop-active { border-color: #3B82F6; background-color: rgba(59,130,246,0.1); }
+    .text-comparison { line-height: 1.8; white-space: pre-wrap; }
+    /* تمييز اختلاف الأرقام */
+    .highlight-number {
+      background-color: #FDE68A;
+      padding: 0 2px;
+      border-radius: 2px;
     }
+    /* تمييز النصوص الناقصة */
+    .highlight-missing {
+      background-color: #BFDBFE;
+      padding: 0 2px;
+      border-radius: 2px;
     }
+    /* تمييز اختلاف المعنى */
+    .highlight-meaning {
+      color: #EF4444;
+      font-weight: bold;
     }
+    /* تقسيم شاشة المعاينة إلى جزئين */
+    .split-view {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1rem;
     }
+    .result-section {
+      border-top: 3px solid #E0E7FF;
+      margin-top: 2rem;
+      padding-top: 2rem;
     }
+    /* تنسيق كل سطر مع رقم السطر */
+    .line-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
     }
+    .line-number {
+      width: 30px;
+      font-weight: bold;
+      color: #4B5563;
+      flex-shrink: 0;
     }
+    .line-text {
+      flex: 1;
     }
+    /* تحسينات إضافية للواجهة */
+    .card-hover {
+      transition: all 0.3s ease;
     }
+    .card-hover:hover {
+      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
+      transform: translateY(-2px);
     }
+    .pulse-animation {
+      animation: pulse 2s infinite;
     }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+      70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
     }
   </style>
 </head>
+<body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 min-h-screen">
+  <div class="min-h-screen pb-12">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 animate-gradient text-white py-10 mb-10 shadow-xl">
+      <div class="max-w-6xl mx-auto px-4">
+        <h1 class="text-5xl font-bold text-center mb-4 animate-scale">نظام شركة موندو لينجوا</h1>
+        <p class="text-center text-xl text-blue-100 opacity-90">مقارنة وتحليل النصوص – المصدر مرجع أساسي</p>
       </div>
+    </header>
+    <!-- Main Content -->
+    <main class="max-w-6xl mx-auto px-4">
+      <!-- قسم رفع الملفات -->
+      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center border-b pb-3">
+          <i class="fas fa-file-upload text-blue-600 ml-2"></i> تحميل الملفات
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- ملف السورس -->
+          <div class="group border-2 border-dashed border-blue-200 rounded-xl p-8 text-center hover:border-blue-500 transition-colors duration-300 bg-blue-50 hover:bg-blue-100">
+            <label class="cursor-pointer block">
+              <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
+              <i class="fas fa-file-upload text-5xl text-blue-500 mb-4"></i>
+              <span class="text-lg text-blue-600 group-hover:text-blue-700">ملف السورس</span>
+            </label>
+          </div>
+          <!-- ملف التارجت -->
+          <div class="group border-2 border-dashed border-purple-200 rounded-xl p-8 text-center hover:border-purple-500 transition-colors duration-300 bg-purple-50 hover:bg-purple-100">
+            <label class="cursor-pointer block">
+              <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
+              <i class="fas fa-file-download text-5xl text-purple-500 mb-4"></i>
+              <span class="text-lg text-purple-600 group-hover:text-purple-700">ملف التارجت</span>
+            </label>
+          </div>
+        </div>
+        <div id="processStatus" class="hidden mt-4">
+          <div class="flex items-center justify-center space-x-3 bg-blue-100 rounded-xl p-4">
+            <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div>
+            <span class="text-lg text-blue-700">جارٍ معالجة الملف...</span>
+          </div>
         </div>
       </div>
+      <!-- إدخال النصوص يدويًا -->
+      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
+        <div class="space-y-6">
+          <!-- ال��ص المصدر -->
+          <div class="group">
+            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-language text-blue-600 ml-2"></i> النص المصدر
+            </label>
+            <textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-blue-200 focus:border-blue-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea>
+          </div>
+          <!-- النص الهدف -->
+          <div class="group">
+            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-language text-purple-600 ml-2"></i> النص الهدف
+            </label>
+            <textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-purple-200 focus:border-purple-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
+          </div>
+        </div>
       </div>
+      <!-- زر التحليل -->
+      <button id="submitBtn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-xl shadow-lg hover:shadow-xl mb-8 pulse-animation">
+        <div class="flex items-center justify-center">
+          <i class="fas fa-sync-alt ml-2"></i> تحليل النصوص
+        </div>
+      </button>
+      <!-- شاشة نتائج التحليل (المعاينة المقسمة) -->
+      <div id="resultSection" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
+          <i class="fas fa-search text-green-600 ml-2"></i> نتائج التحليل والمقارنة
+        </h2>
+        <!-- هنا يتم عرض الأخطاء والاختلافات فقط -->
+        <div id="errorsList" class="space-y-3 mb-6"></div>
+        <div class="result-section split-view">
+          <!-- عرض النص المصدر بعد التعليم مع تقسيمه إلى أسطر -->
+          <div>
+            <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-file-alt text-blue-600 ml-2"></i> النص المصدر (مع التعليم)
+            </h4>
+            <div id="sourceTextReview" class="bg-blue-50 rounded-xl p-6 min-h-[200px] border-2 border-blue-100 text-comparison"></div>
+          </div>
+          <!-- عرض النص الهدف بعد التعليم مع تقسيمه إلى أسطر -->
+          <div>
+            <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-file-alt text-purple-600 ml-2"></i> النص الهدف (مع التعليم)
+            </h4>
+            <div id="targetTextReview" class="bg-gray-50 rounded-xl p-6 min-h-[200px] border-2 border-gray-200 text-comparison"></div>
+          </div>
+        </div>
       </div>
+      <!-- صندوق شرح الاختلافات -->
+      <div id="explanationBox" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
+          <i class="fas fa-info-circle text-green-600 ml-2"></i> شرح الاختلافات
+        </h2>
+        <div id="explanationText" class="text-lg text-gray-700"></div>
       </div>
+    </main>
   </div>
+  <!-- JavaScript -->
   <script>
+    // API URL ومفتاح API (تم التحديث لاستخدام DeepSeek API)
+    const API_URL = 'https://api.deepseek.com/chat/completions';
+    const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
+    /*
+      الـ prompt المحسن:
+      أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
+      1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
+      2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
+      3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
+      إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
+      اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
+      النص المصدر:
+      {source}
+      النص الهدف:
+      {target}
+      أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.
+    */
+    const ANALYSIS_PROMPT = `أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
+1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
+2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
+3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
+إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
+اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
+النص المصدر:
+{source}
+النص الهدف:
+{target}
+أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.`;
+    // دالة لحساب عدد الكلمات
+    function countWords(text) {
+      return text.trim().split(/\s+/).filter(word => word !== "").length;
     }
+    // دالة لمساعدة في الهروب من أحرف regex الخاصة
+    function escapeRegExp(string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    // دالة تطبيق التمييز على النص باستخدام العلامات في نتيجة التحليل
+    function applyHighlights(originalText, analysisOutput) {
+      let highlightedText = originalText;
+      // تمييز اختلافات الأرقام
+      const numberRegex = /<([^<>]+)>/g;
+      let match;
+      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-number">${phrase}</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
+      // تمييز النصوص الناقصة
+      const missingRegex = /__(.*?)__/g;
+      while ((match = missingRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-missing">__${phrase}__</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
       }
+      // تمييز اختلاف المعنى
+      const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
+      while ((match = meaningRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-meaning">${phrase}</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
       }
+      return highlightedText;
     }
+    // دالة تقسيم النص إلى أسطر مع عرض رقم السطر
+    function splitIntoLines(text) {
+      const lines = text.split('\n');
+      let html = "";
+      lines.forEach((line, index) => {
+        html += `<div class="line-item"><span class="line-number">${index + 1}:</span> <span class="line-text">${line}</span></div>`;
       });
+      return html;
     }
+    // دالة للحصول على رقم السطر لظهور عبارة معينة في النص
+    function getLineNumber(text, substring) {
+      const index = text.indexOf(substring);
+      if (index === -1) return "غير محدد";
+      return text.substring(0, index).split("\n").length;
     }
+    // دالة توليد شرح الاختلافات
+    function generateExplanation(sourceText, analysisOutput) {
+      let explanation = "";
+      // شرح النصوص الناقصة
+      const missingRegex = /__(.*?)__/g;
+      let match;
+      while ((match = missingRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          explanation += `<p>في السطر ${lineNum}: النص "${phrase}" مفقود في النص الهدف.</p>`;
         }
+      }
+      // شرح اختلاف الأرقام
+      const numberRegex = /<([^<>]+)>/g;
+      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          explanation += `<p>في السطر ${lineNum}: اختلاف في الرقم "${phrase}".</p>`;
+        }
+      }
+      // شرح اختلاف المعنى
+      const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
+      while ((match = meaningRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          explanation += `<p>في السطر ${lineNum}: اختلاف في المعنى: "${phrase}".</p>`;
+        }
+      }
+      if (explanation === "") {
+        explanation = `<p>[MATCH] النصوص متطابقة تماماً.</p>`;
+      }
+      return explanation;
     }
+    // دالة موحدة لمعالجة الملفات (PDF و DOCX)
+    async function processFile(file) {
+      let text = "";
+      if (file.type === 'application/pdf') {
+        const form = new FormData();
+        form.append('image', file);
+        const response = await fetch('https://demo.api4ai.cloud/ocr/v1/results', {
+          method: 'POST',
+          body: form,
+          headers: { 'A4A-CLIENT-APP-ID': 'sample' }
+        });
+        const data = await response.json();
+        text = data.results[0].entities[0].objects[0].entities[0].text;
+      } else if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
+        const arrayBuffer = await file.arrayBuffer();
+        const result = await mammoth.extractRawText({ arrayBuffer });
+        text = result.value;
+      } else {
+        throw new Error('نوع الملف غير مدعوم');
+      }
+      return text;
     }
+    // رفع ملف السورس
+    document.getElementById('sourceFile')?.addEventListener('change', async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      document.getElementById('processStatus').classList.remove('hidden');
+      try {
+        const text = await processFile(file);
+        document.getElementById('sourceText').value = text;
+      } catch (error) {
+        console.error('Error processing source file:', error);
+        addError('خطأ في معالجة ملف السورس');
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
       }
+    });
+    // رفع ملف التارجت
+    document.getElementById('targetFile')?.addEventListener('change', async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      document.getElementById('processStatus').classList.remove('hidden');
+      try {
+        const text = await processFile(file);
+        document.getElementById('targetText').value = text;
+      } catch (error) {
+        console.error('Error processing target file:', error);
+        addError('خطأ في معالجة ملف التارجت');
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
       }
+    });
+    // دالة عرض الأخطاء أو الرسائل
+    function addError(message, type = 'error') {
+      const errorsList = document.getElementById('errorsList');
+      if (!errorsList) return;
+      const errorDiv = document.createElement('div');
+      errorDiv.className = `p-4 rounded-xl ${type === 'error' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700'}`;
+      errorDiv.innerHTML = `<div class="flex items-center">
+                              <i class="fas fa-${type === 'error' ? 'exclamation-circle' : 'info-circle'} ml-2 text-${type === 'error' ? 'red' : 'yellow'}-500"></i>
+                              <span>${message}</span>
+                            </div>`;
+      errorsList.appendChild(errorDiv);
     }
+    // عند الضغط على زر التحليل
+    document.getElementById('submitBtn').addEventListener('click', async () => {
+      const sourceText = document.getElementById('sourceText').value;
+      const targetText = document.getElementById('targetText').value;
+      // مسح الرسائل السابقة وإظهار قسم النتائج
+      document.getElementById('errorsList').innerHTML = '';
+      document.getElementById('resultSection').classList.remove('hidden');
+      document.getElementById('explanationBox').classList.remove('hidden');
+      if (!sourceText || !targetText) {
+        addError('يرجى إدخال كلا النصين المصدر والهدف');
         return;
       }
+      // مقارنة عدد الكلمات (تنبيه اختياري)
+      const sourceWordCount = countWords(sourceText);
+      const targetWordCount = countWords(targetText);
+      if (sourceWordCount !== targetWordCount) {
+        addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount})`, 'warning');
       }
       try {
+        // عرض مؤشر التقدم أثناء انتظار الرد
+        const progressDiv = document.createElement('div');
+        progressDiv.className = "bg-blue-100 p-4 rounded-xl mb-4";
+        progressDiv.innerHTML = `<div class="flex items-center">
+                                     <div class="animate-spin h-6 w-6 border-4 border-blue-600 rounded-full border-t-transparent ml-3"></div>
+                                     <span>جارٍ التحليل...</span>
+                                   </div>`;
+        document.getElementById('errorsList').appendChild(progressDiv);
+        // بناء prompt باستخدام النصين المُدخلين
+        const prompt = ANALYSIS_PROMPT
+                        .replace("{source}", sourceText)
+                        .replace("{target}", targetText);
+        // استخدام DeepSeek API
+        const payload = {
+          model: "deepseek-chat",
+          messages: [
+            { role: "system", content: "أنت خبير في تحليل النصوص ومقارنتها بدقة عالية." },
+            { role: "user", content: prompt }
+          ],
+          temperature: 0.3,
+          max_tokens: 2048,
+          stream: false
+        };
+        // استدعاء API التحليل
+        const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
+            'Authorization': 'Bearer ' + API_KEY,
+            'Content-Type': 'application/json'
           },
+          body: JSON.stringify(payload)
         });
+        if (!response.ok) {
+          throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
         }
+        const data = await response.json();
+        const analysisOutput = data.choices[0].message.content.trim();
+        progressDiv.remove();
+        if (analysisOutput.includes('[MATCH]')) {
+          const checkDiv = document.createElement('div');
+          checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
+          checkDiv.innerHTML = `<i class="fas fa-check-circle ml-2 text-lg"></i> <span class="text-lg">النصوص متطابقة تماماً</span>`;
+          document.getElementById('errorsList').appendChild(checkDiv);
+          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
+          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
+          document.getElementById('explanationText').innerHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
+        } else {
+          const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
+          const targetHighlighted = applyHighlights(targetText, analysisOutput);
+          // تقسيم النصوص المُظّلّة إلى أسطر مع رقم السطر
+          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
+          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetHighlighted);
+          // توليد شرح الاختلافات
+          const explanationHTML = generateExplanation(sourceText, analysisOutput);
+          document.getElementById('explanationText').innerHTML = explanationHTML;
+          // عرض ملخص الاختلافات إن وُجدت
+          const numDiffCount = (analysisOutput.match(/<([^<>]+)>/g) || []).length;
+          const missingDiffCount = (analysisOutput.match(/__(.*?)__/g) || []).length;
+          const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
+          if (numDiffCount > 0 || missingDiffCount > 0 || meaningDiffCount > 0) {
+            const summaryDiv = document.createElement('div');
+            summaryDiv.className = "p-4 rounded-xl bg-yellow-50 text-gray-800";
+            let summaryText = '<div class="font-bold mb-2">ملخص الاختلافات:</div><ul class="list-disc mr-6 space-y-1">';
+            if (numDiffCount > 0) summaryText += `<li>اختلاف في الأرقام: ${numDiffCount}</li>`;
+            if (missingDiffCount > 0) summaryText += `<li>نصوص مفقودة: ${missingDiffCount}</li>`;
+            if (meaningDiffCount > 0) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
+            summaryText += '</ul>';
+            summaryDiv.innerHTML = summaryText;
+            document.getElementById('errorsList').appendChild(summaryDiv);
+          }
         }
       } catch (error) {
+        document.getElementById('errorsList').innerHTML = '';
+        addError(`خطأ في التحليل: ${error.message}`);
       }
+    });
   </script>
 </body>
 </html>