Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 3

Commit

7929297

verified ·

1 Parent(s): fdbe166

Update index.html

Browse files

Files changed (1) hide show

index.html +1076 -156

index.html CHANGED Viewed

@@ -5,6 +5,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">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
     @keyframes gradient {
@@ -119,6 +121,90 @@
       width: 0%;
       transition: width 0.3s ease;
     }
   </style>
 </head>
 <body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 min-h-screen">
@@ -142,20 +228,20 @@
           <!-- ملف السورس -->
           <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,.txt" 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>
-              <p class="text-sm text-gray-500 mt-2">(.docx, .pdf, .txt)</p>
               <div id="sourceFileInfo" class="mt-2 text-sm text-gray-600"></div>
             </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,.txt" 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>
-              <p class="text-sm text-gray-500 mt-2">(.docx, .pdf, .txt)</p>
               <div id="targetFileInfo" class="mt-2 text-sm text-gray-600"></div>
             </label>
           </div>
@@ -169,8 +255,43 @@
             <div id="progressFill" class="progress-fill"></div>
           </div>
         </div>
         <!-- زر تحليل الملفات -->
-        <button id="analyzeFilesBtn" class="w-full mt-6 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 px-6 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-lg shadow-lg hover:shadow-xl">
           <div class="flex items-center justify-center">
             <i class="fas fa-file-search ml-2"></i> تحليل الملفات
           </div>
@@ -188,14 +309,14 @@
             <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>
         <!-- زر تحليل النصوص -->
@@ -230,11 +351,15 @@
           </div>
         </div>
-        <!-- زر تنزيل التقرير -->
-        <div class="mt-8 flex justify-center">
           <button id="downloadReportBtn" class="download-btn text-white font-bold py-4 px-8 rounded-xl shadow-lg flex items-center">
             <i class="fas fa-download ml-2"></i> تنزيل تقرير التحليل
           </button>
         </div>
       </div>
@@ -251,9 +376,53 @@
   <!-- JavaScript -->
   <script>
     // API URL ومفتاح API (تم التحديث لاستخدام DeepSeek API)
-    const API_URL = 'https://api.deepseek.com/v1/files/analyze';
     const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
     // متغيرات عامة لتخزين نتائج التحليل
     let analysisResults = {
       sourceText: "",
@@ -267,6 +436,20 @@
       sourceFileName: "",
       targetFileName: ""
     };
     // دالة لحساب عدد الكلمات
     function countWords(text) {
@@ -369,6 +552,424 @@
       return explanation;
     }
     // دالة عرض الأخطاء أو الرسائل
     function addError(message, type = 'error') {
       const errorsList = document.getElementById('errorsList');
@@ -394,46 +995,53 @@
         return;
       }
       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);
-        // إنشاء ملفات بلوب من النصوص المدخلة
-        const sourceBlob = new Blob([sourceText], { type: 'text/plain' });
-        const targetBlob = new Blob([targetText], { type: 'text/plain' });
-        // إنشاء FormData وإضافة الملفات إليها
-        const formData = new FormData();
-        formData.append('source_file', sourceBlob, 'source.txt');
-        formData.append('target_file', targetBlob, 'target.txt');
-        formData.append('analysis_type', 'text_comparison');
-        formData.append('instructions', `
-        أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
-        1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
-        2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
-        3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
-        إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
-        اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
-        ملاحظة مهمة: قم بفحص النصوص بدقة عالية. إذا كانت هناك اختلافات حتى بسيطة، يجب تحديدها. لا تكتب [MATCH] إلا إذا كانت النصوص متطابقة تماماً بنسبة 100%.
-        `);
-        // إرسال الطلب مع الملفات مباشرة
         const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
-            'Authorization': 'Bearer ' + API_KEY
           },
-          body: formData
         });
         if (!response.ok) {
@@ -441,7 +1049,7 @@
         }
         const data = await response.json();
-        const analysisOutput = data.analysis_result;
         progressDiv.remove();
@@ -451,11 +1059,19 @@
           targetText: targetText,
           analysisOutput: analysisOutput,
           timestamp: new Date().toLocaleString('ar-SA'),
-          sourceFileName: "إدخال يدوي",
-          targetFileName: "إدخال يدوي"
         };
-        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>`;
@@ -502,6 +1118,9 @@
             summaryText += '</ul>';
             summaryDiv.innerHTML = summaryText;
             document.getElementById('errorsList').appendChild(summaryDiv);
           }
         }
@@ -513,6 +1132,220 @@
       }
     }
     // دالة تحليل الملفات
     async function analyzeFiles(sourceFile, targetFile) {
       // مسح الرسائل السابقة وإظهار قسم النتائج
@@ -525,84 +1358,131 @@
         return;
       }
       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);
-        // تحديث شريط التقدم
-        document.getElementById('progressFill').style.width = '30%';
-        // إنشاء FormData وإضافة الملفات إليها
-        const formData = new FormData();
-        formData.append('source_file', sourceFile);
-        formData.append('target_file', targetFile);
-        formData.append('analysis_type', 'text_comparison');
-        formData.append('instructions', `
-        أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
-        1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
-        2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
-        3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
-        إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
-        اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
-        ملاحظة مهمة: قم بفحص النصوص بدقة عالية. إذا كانت هناك اختلافات حتى بسيطة، يجب تحديدها. لا تكتب [MATCH] إلا إذا كانت النصوص متطابقة تماماً بنسبة 100%.
-        `);
-        // تحديث شريط التقدم
         document.getElementById('progressFill').style.width = '50%';
-        // إرسال الطلب مع الملفات مباشرة
         const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
-            'Authorization': 'Bearer ' + API_KEY
           },
-          body: formData
         });
-        // تحديث شريط التقدم
-        document.getElementById('progressFill').style.width = '80%';
         if (!response.ok) {
           throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
         }
         const data = await response.json();
-        const analysisOutput = data.analysis_result;
-        // استخراج النصوص المقارنة من النتائج
-        const extractedSourceText = data.extracted_source_text || "لم يتم استخراج النص المصدر";
-        const extractedTargetText = data.extracted_target_text || "لم يتم استخراج النص الهدف";
-        // تحديث شريط التقدم
-        document.getElementById('progressFill').style.width = '100%';
         progressDiv.remove();
         // تخزين نتائج التحليل
         analysisResults = {
-          sourceText: extractedSourceText,
-          targetText: extractedTargetText,
           analysisOutput: analysisOutput,
           timestamp: new Date().toLocaleString('ar-SA'),
           sourceFileName: sourceFile.name,
           targetFileName: targetFile.name
         };
-        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(extractedSourceText);
-          document.getElementById('targetTextReview').innerHTML = splitIntoLines(extractedTargetText);
           document.getElementById('explanationText').innerHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
           analysisResults.explanationHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
@@ -610,14 +1490,14 @@
           analysisResults.missingDiffCount = 0;
           analysisResults.meaningDiffCount = 0;
         } else {
-          const sourceHighlighted = applyHighlights(extractedSourceText, analysisOutput);
-          const targetHighlighted = applyHighlights(extractedTargetText, analysisOutput);
           // تقسيم النصوص المُظّلّة إلى أسطر مع رقم السطر
           document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
           document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetHighlighted);
           // توليد شرح الاختلافات
-          const explanationHTML = generateExplanation(extractedSourceText, analysisOutput);
           document.getElementById('explanationText').innerHTML = explanationHTML;
           // تخزين شرح الاختلافات
@@ -643,6 +1523,9 @@
             summaryText += '</ul>';
             summaryDiv.innerHTML = summaryText;
             document.getElementById('errorsList').appendChild(summaryDiv);
           }
         }
@@ -656,74 +1539,6 @@
       }
     }
-    // عرض معلومات الملف بعد اختياره
-    document.getElementById('sourceFile')?.addEventListener('change', async (event) => {
-      const file = event.target.files[0];
-      if (!file) return;
-      const fileInfo = document.getElementById('sourceFileInfo');
-      fileInfo.innerHTML = `
-        <div class="file-info">
-          <div class="file-name"><strong>الملف:</strong> ${file.name}</div>
-          <div><strong>الحجم:</strong> ${(file.size / 1024).toFixed(2)} كيلوبايت</div>
-          <div><strong>النوع:</strong> ${file.type || 'غير محدد'}</div>
-        </div>
-      `;
-      // تخزين اسم الملف
-      analysisResults.sourceFileName = file.name;
-    });
-    document.getElementById('targetFile')?.addEventListener('change', async (event) => {
-      const file = event.target.files[0];
-      if (!file) return;
-      const fileInfo = document.getElementById('targetFileInfo');
-      fileInfo.innerHTML = `
-        <div class="file-info">
-          <div class="file-name"><strong>الملف:</strong> ${file.name}</div>
-          <div><strong>الحجم:</strong> ${(file.size / 1024).toFixed(2)} كيلوبايت</div>
-          <div><strong>النوع:</strong> ${file.type || 'غير محدد'}</div>
-        </div>
-      `;
-      // تخزين اسم الملف
-      analysisResults.targetFileName = file.name;
-    });
-    // عند الضغط على زر تحليل النصوص المدخلة يدوياً
-    document.getElementById('submitBtn').addEventListener('click', async () => {
-      const sourceText = document.getElementById('sourceText').value;
-      const targetText = document.getElementById('targetText').value;
-      await analyzeTexts(sourceText, targetText);
-    });
-    // عند الضغط على زر تحليل الملفات
-    document.getElementById('analyzeFilesBtn').addEventListener('click', async () => {
-      const sourceFileInput = document.getElementById('sourceFile');
-      const targetFileInput = document.getElementById('targetFile');
-      if (!sourceFileInput.files.length || !targetFileInput.files.length) {
-        addError('يرجى تحميل كلا الملفين المصدر والهدف');
-        document.getElementById('resultSection').classList.remove('hidden');
-        return;
-      }
-      document.getElementById('processStatus').classList.remove('hidden');
-      document.getElementById('progressFill').style.width = '0%';
-      try {
-        // تحليل الملفات مباشرة
-        await analyzeFiles(sourceFileInput.files[0], targetFileInput.files[0]);
-      } catch (error) {
-        console.error('Error analyzing files:', error);
-        document.getElementById('resultSection').classList.remove('hidden');
-        addError(`خطأ في تحليل الملفات: ${error.message}`);
-      } finally {
-        document.getElementById('processStatus').classList.add('hidden');
-      }
-    });
     // دالة إنشاء تقرير HTML
     function generateHTMLReport() {
       const { sourceText, targetText, analysisOutput, explanationHTML, numDiffCount, missingDiffCount, meaningDiffCount, timestamp, sourceFileName, targetFileName } = analysisResults;
@@ -931,8 +1746,113 @@
       URL.revokeObjectURL(url);
     }
     // إضافة مستمع حدث لزر تنزيل التقرير
     document.getElementById('downloadReportBtn').addEventListener('click', downloadReport);
   </script>
 </body>
 </html>

   <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>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.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 {
       width: 0%;
       transition: width 0.3s ease;
     }
+    /* تنسيق قسم OCR */
+    .ocr-section {
+      margin-top: 20px;
+      padding: 15px;
+      border-radius: 8px;
+      background-color: #EFF6FF;
+      border: 1px solid #DBEAFE;
+    }
+    .ocr-result {
+      margin-top: 15px;
+      padding: 10px;
+      background-color: #F9FAFB;
+      border-radius: 6px;
+      border: 1px solid #E5E7EB;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    /* تنسيق مؤشر التقدم الدائري */
+    .circular-progress {
+      position: relative;
+      width: 60px;
+      height: 60px;
+      margin: 0 auto;
+    }
+    .circular-progress-circle {
+      stroke-dasharray: 283;
+      stroke-dashoffset: 283;
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+    }
+    .circular-progress-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 14px;
+      font-weight: bold;
+    }
+    /* تنسيق عرض صفحات PDF */
+    .pdf-pages-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: 15px;
+      margin-top: 20px;
+    }
+    .pdf-page-thumbnail {
+      border: 1px solid #E5E7EB;
+      border-radius: 8px;
+      overflow: hidden;
+      position: relative;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .pdf-page-thumbnail:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    }
+    .pdf-page-number {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(0,0,0,0.6);
+      color: white;
+      font-size: 0.8rem;
+      text-align: center;
+      padding: 3px 0;
+    }
+    .pdf-page-selected {
+      border: 2px solid #3B82F6;
+    }
+    .pdf-toolbar {
+      display: flex;
+      align-items: center;
+      margin-top: 15px;
+      padding: 10px;
+      background-color: #F9FAFB;
+      border-radius: 8px;
+      justify-content: space-between;
+    }
+    .pdf-page-canvas {
+      width: 100%;
+      height: auto;
+    }
   </style>
 </head>
 <body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 min-h-screen">
           <!-- ملف السورس -->
           <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,.txt,.png,.jpg,.jpeg" 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>
+              <p class="text-sm text-gray-500 mt-2">(.docx, .pdf, .txt, .png, .jpg)</p>
               <div id="sourceFileInfo" class="mt-2 text-sm text-gray-600"></div>
             </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,.txt,.png,.jpg,.jpeg" 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>
+              <p class="text-sm text-gray-500 mt-2">(.docx, .pdf, .txt, .png, .jpg)</p>
               <div id="targetFileInfo" class="mt-2 text-sm text-gray-600"></div>
             </label>
           </div>
             <div id="progressFill" class="progress-fill"></div>
           </div>
         </div>
+        <!-- عرض صفحات PDF -->
+        <div id="pdfPagesContainer" class="hidden mt-6">
+          <div class="bg-blue-50 p-4 rounded-xl mb-4">
+            <h3 class="text-lg font-bold text-blue-800 mb-3">صفحات ملف PDF</h3>
+            <p class="text-sm text-blue-600 mb-4">اختر الصفحات التي تريد استخراج النص منها (انقر للتحديد/إلغاء التحديد)</p>
+            <div class="pdf-toolbar">
+              <div>
+                <button id="selectAllPagesBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg ml-2 text-sm">
+                  تحديد الكل
+                </button>
+                <button id="deselectAllPagesBtn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm">
+                  إلغاء تحديد الكل
+                </button>
+              </div>
+              <button id="extractSelectedPagesBtn" class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg text-sm flex items-center">
+                <i class="fas fa-file-export ml-2"></i> استخراج النص من الصفحات المحددة
+              </button>
+            </div>
+            <!-- هنا يتم عرض الصور المصغرة للصفحات -->
+            <div id="pdfPagesGrid" class="pdf-pages-grid">
+              <!-- سيتم إضافة الصفحات هنا ديناميكيًا -->
+            </div>
+          </div>
+        </div>
+        <!-- زر استخراج النصوص -->
+        <button id="extractTextBtn" class="w-full mt-6 bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-700 hover:to-teal-700 text-white font-bold py-4 px-6 rounded-xl transition-all transform hover:scale-105 focus:ring-green-200 text-lg shadow-lg hover:shadow-xl">
+          <div class="flex items-center justify-center">
+            <i class="fas fa-file-alt ml-2"></i> استخراج النصوص من الملفات
+          </div>
+        </button>
         <!-- زر تحليل الملفات -->
+        <button id="analyzeFilesBtn" class="w-full mt-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 px-6 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-lg shadow-lg hover:shadow-xl">
           <div class="flex items-center justify-center">
             <i class="fas fa-file-search ml-2"></i> تحليل الملفات
           </div>
             <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="10" 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="10" placeholder="اكتب النص الهدف هنا..."></textarea>
           </div>
         </div>
         <!-- زر تحليل النصوص -->
           </div>
         </div>
+        <!-- أزرار التحكم -->
+        <div class="mt-8 flex flex-wrap justify-center gap-4">
           <button id="downloadReportBtn" class="download-btn text-white font-bold py-4 px-8 rounded-xl shadow-lg flex items-center">
             <i class="fas fa-download ml-2"></i> تنزيل تقرير التحليل
           </button>
+          <button id="reloadAnalysisBtn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-4 px-8 rounded-xl shadow-lg flex items-center transition-all">
+            <i class="fas fa-redo-alt ml-2"></i> إعادة ��لتحليل
+          </button>
         </div>
       </div>
   <!-- JavaScript -->
   <script>
     // API URL ومفتاح API (تم التحديث لاستخدام DeepSeek API)
+    const API_URL = 'https://api.deepseek.com/chat/completions';
     const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
+    // API4AI OCR Configuration
+    const RAPIDAPI_KEY = 'eb11693cddmshb8bd157e05b74acp1f6aa4jsn4369fa546e55';
+    const OCR_API_URL = 'https://ocr43.p.rapidapi.com/v1/results';
+    /*
+      الـ prompt المحسن:
+      أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
+      1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
+      2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
+      3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
+      إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
+      اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
+      النص المصدر:
+      {source}
+      النص الهدف:
+      {target}
+      أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.
+    */
+    const ANALYSIS_PROMPT = `أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
+1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
+2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
+3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
+إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
+اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
+النص المصدر:
+{source}
+النص الهدف:
+{target}
+أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.
+ملاحظة مهمة: قم بفحص النصوص بدقة عالية. إذا كانت هناك اختلافات حتى بسيطة، يجب تحديدها. لا تكتب [MATCH] إلا إذا كانت النصوص متطابقة تماماً بنسبة 100%.`;
     // متغيرات عامة لتخزين نتائج التحليل
     let analysisResults = {
       sourceText: "",
       sourceFileName: "",
       targetFileName: ""
     };
+    // متغيرات لحفظ صفحات PDF المحددة
+    let pdfPages = {
+      source: {
+        pdf: null,
+        pages: [],
+        selectedPages: []
+      },
+      target: {
+        pdf: null,
+        pages: [],
+        selectedPages: []
+      }
+    };
     // دالة لحساب عدد الكلمات
     function countWords(text) {
       return explanation;
     }
+    // دالة استخراج النص من ملف DOCX
+    async function extractTextFromDocx(file) {
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        const result = await mammoth.extractRawText({ arrayBuffer });
+        return result.value;
+      } catch (error) {
+        console.error("Error extracting text from DOCX:", error);
+        throw new Error(`فشل في استخراج النص من ملف DOCX: ${error.message}`);
+      }
+    }
+    // دالة عرض صفحات PDF كصور مصغرة وإتاحة اختيار الصفحات
+    async function displayPdfPages(file, type) {
+      try {
+        // تحميل ملف PDF
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        // تخزين مرجع PDF
+        pdfPages[type].pdf = pdf;
+        pdfPages[type].pages = [];
+        pdfPages[type].selectedPages = [];
+        // إنشاء عناصر الصفحات المصغرة
+        const pdfPagesGrid = document.getElementById('pdfPagesGrid');
+        pdfPagesGrid.innerHTML = '';
+        // إظهار قسم صفحات PDF
+        document.getElementById('pdfPagesContainer').classList.remove('hidden');
+        // تحديث عنوان قسم صفحات PDF
+        const pdfTitle = document.querySelector('#pdfPagesContainer h3');
+        pdfTitle.textContent = `صفحات ملف PDF (${type === 'source' ? 'المصدر' : 'الهدف'}) - ${pdf.numPages} صفحة`;
+        // إنشاء صورة مصغرة لكل صفحة
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          pdfPages[type].pages.push(page);
+          // إنشاء عنصر div للصفحة المصغرة
+          const thumbnailDiv = document.createElement('div');
+          thumbnailDiv.className = 'pdf-page-thumbnail';
+          thumbnailDiv.dataset.page = i;
+          thumbnailDiv.dataset.type = type;
+          // إنشاء canvas لعرض الصفحة
+          const canvas = document.createElement('canvas');
+          canvas.className = 'pdf-page-canvas';
+          const context = canvas.getContext('2d');
+          // ضبط حجم Canvas
+          const viewport = page.getViewport({ scale: 0.3 }); // حجم مصغر للعرض
+          canvas.width = viewport.width;
+          canvas.height = viewport.height;
+          // عرض الصفحة في Canvas
+          await page.render({
+            canvasContext: context,
+            viewport: viewport
+          }).promise;
+          // إضافة رقم الصفحة
+          const pageNumberDiv = document.createElement('div');
+          pageNumberDiv.className = 'pdf-page-number';
+          pageNumberDiv.textContent = `صفحة ${i}`;
+          // إضافة العناصر إلى div الصفحة المصغرة
+          thumbnailDiv.appendChild(canvas);
+          thumbnailDiv.appendChild(pageNumberDiv);
+          // إضافة حدث النقر على الصفحة للتحديد/إلغاء التحديد
+          thumbnailDiv.addEventListener('click', function() {
+            // تبديل حالة التحديد
+            if (this.classList.contains('pdf-page-selected')) {
+              this.classList.remove('pdf-page-selected');
+              // إزالة الصفحة من قائمة الصفحات المحددة
+              const pageIndex = pdfPages[type].selectedPages.indexOf(parseInt(this.dataset.page));
+              if (pageIndex > -1) {
+                pdfPages[type].selectedPages.splice(pageIndex, 1);
+              }
+            } else {
+              this.classList.add('pdf-page-selected');
+              // إضافة الصفحة إلى قائمة الصفحات المحددة
+              pdfPages[type].selectedPages.push(parseInt(this.dataset.page));
+            }
+          });
+          // إضافة div الصفحة المصغرة إلى الشبكة
+          pdfPagesGrid.appendChild(thumbnailDiv);
+          // تحديث مؤشر التقدم
+          document.getElementById('progressFill').style.width = `${Math.round((i / pdf.numPages) * 100)}%`;
+        }
+        return pdf.numPages;
+      } catch (error) {
+        console.error("Error displaying PDF pages:", error);
+        throw new Error(`فشل في عرض صفحات PDF: ${error.message}`);
+      }
+    }
+    // دالة استخراج النص من صفحات PDF محددة
+    async function extractTextFromSelectedPdfPages(type) {
+      try {
+        const pdf = pdfPages[type].pdf;
+        if (!pdf) {
+          throw new Error('لم يتم تحميل ملف PDF');
+        }
+        // التحقق من وجود صفحات محددة
+        if (pdfPages[type].selectedPages.length === 0) {
+          throw new Error('لم يتم تحديد أي صفحات');
+        }
+        // ترتيب الصفحات المحددة تصاعديًا
+        pdfPages[type].selectedPages.sort((a, b) => a - b);
+        // استخراج النص من كل صفحة محددة
+        let text = '';
+        const totalPages = pdfPages[type].selectedPages.length;
+        // إنشاء مؤشر تقدم للصفحات
+        const progressDiv = document.createElement('div');
+        progressDiv.className = "mt-4 p-4 bg-blue-50 rounded-xl";
+        progressDiv.innerHTML = `
+          <div class="text-center mb-2">جارٍ استخراج النص من ${totalPages} صفحة محددة...</div>
+          <div class="flex items-center justify-center">
+            <div class="circular-progress">
+              <svg width="60" height="60" viewBox="0 0 60 60">
+                <circle cx="30" cy="30" r="25" fill="none" stroke="#E5E7EB" stroke-width="5"></circle>
+                <circle id="progress-circle-${type}" cx="30" cy="30" r="25" fill="none" stroke="#3B82F6" stroke-width="5" class="circular-progress-circle"></circle>
+              </svg>
+              <div class="circular-progress-text" id="circular-progress-text-${type}">0%</div>
+            </div>
+            <div class="mr-4" id="page-progress-${type}">0/${totalPages}</div>
+          </div>
+        `;
+        document.getElementById('processStatus').appendChild(progressDiv);
+        // استخراج النص من كل صفحة محددة
+        for (let i = 0; i < totalPages; i++) {
+          const pageNum = pdfPages[type].selectedPages[i];
+          const page = await pdf.getPage(pageNum);
+          const content = await page.getTextContent();
+          const strings = content.items.map(item => item.str);
+          text += `=== صفحة ${pageNum} ===\n` + strings.join(' ') + '\n\n';
+          // تحديث مؤشر التقدم
+          const progress = Math.round(((i + 1) / totalPages) * 100);
+          // تحديث مؤشر التقدم الدائري
+          const circle = document.getElementById(`progress-circle-${type}`);
+          if (circle) {
+            const circumference = 2 * Math.PI * 25; // 2πr
+            const offset = circumference - (progress / 100) * circumference;
+            circle.style.strokeDashoffset = offset;
+            document.getElementById(`circular-progress-text-${type}`).textContent = `${progress}%`;
+            document.getElementById(`page-progress-${type}`).textContent = `${i + 1}/${totalPages}`;
+          }
+          // إعطاء فرصة للمتصفح لتحديث واجهة المستخدم
+          await new Promise(resolve => setTimeout(resolve, 10));
+        }
+        // إزالة مؤشر التقدم بعد الانتهاء
+        if (progressDiv && progressDiv.parentNode) {
+          progressDiv.parentNode.removeChild(progressDiv);
+        }
+        return text;
+      } catch (error) {
+        console.error("Error extracting text from selected PDF pages:", error);
+        throw new Error(`فشل في استخراج النص من صفحات PDF المحددة: ${error.message}`);
+      }
+    }
+    // دالة استخراج النص من ملف PDF كامل
+    async function extractTextFromPdf(file) {
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        let text = '';
+        // تحديث إجمالي عدد الصفحات في واجهة المستخدم
+        const totalPages = pdf.numPages;
+        // إنشاء مؤشر تقدم للصفحات
+        const progressDiv = document.createElement('div');
+        progressDiv.className = "mt-4 p-4 bg-blue-50 rounded-xl";
+        progressDiv.innerHTML = `
+          <div class="text-center mb-2">جارٍ استخراج النص من ${totalPages} صفحة...</div>
+          <div class="flex items-center justify-center">
+            <div class="circular-progress">
+              <svg width="60" height="60" viewBox="0 0 60 60">
+                <circle cx="30" cy="30" r="25" fill="none" stroke="#E5E7EB" stroke-width="5"></circle>
+                <circle id="progress-circle" cx="30" cy="30" r="25" fill="none" stroke="#3B82F6" stroke-width="5" class="circular-progress-circle"></circle>
+              </svg>
+              <div class="circular-progress-text">0%</div>
+            </div>
+            <div class="mr-4" id="page-progress">0/${totalPages}</div>
+          </div>
+        `;
+        document.getElementById('processStatus').appendChild(progressDiv);
+        // استخراج النص من كل صفحة
+        for (let i = 1; i <= totalPages; i++) {
+          const page = await pdf.getPage(i);
+          const content = await page.getTextContent();
+          const strings = content.items.map(item => item.str);
+          text += `=== صفحة ${i} ===\n` + strings.join(' ') + '\n\n';
+          // تحديث مؤشر التقدم
+          const progress = Math.round((i / totalPages) * 100);
+          document.getElementById('progressFill').style.width = `${progress}%`;
+          // تحديث مؤشر التقدم الدائري
+          const circle = document.getElementById('progress-circle');
+          if (circle) {
+            const circumference = 2 * Math.PI * 25; // 2πr
+            const offset = circumference - (progress / 100) * circumference;
+            circle.style.strokeDashoffset = offset;
+            document.querySelector('.circular-progress-text').textContent = `${progress}%`;
+            document.getElementById('page-progress').textContent = `${i}/${totalPages}`;
+          }
+          // إعطاء فرصة للمتصفح لتحديث واجهة المستخدم
+          await new Promise(resolve => setTimeout(resolve, 10));
+        }
+        // إزالة مؤشر التقدم بعد الانتهاء
+        if (progressDiv && progressDiv.parentNode) {
+          progressDiv.parentNode.removeChild(progressDiv);
+        }
+        return text;
+      } catch (error) {
+        console.error("Error extracting text from PDF:", error);
+        throw new Error(`فشل في استخراج النص من ملف PDF: ${error.message}`);
+      }
+    }
+    // دالة استخراج النص من ملف نصي
+    async function extractTextFromTxt(file) {
+      try {
+        return await file.text();
+      } catch (error) {
+        console.error("Error extracting text from TXT:", error);
+        throw new Error(`فشل في استخراج النص من ملف نصي: ${error.message}`);
+      }
+    }
+    // دالة استخراج النص من صورة باستخدام OCR
+    async function extractTextFromImage(file) {
+      try {
+        // إنشاء مؤشر تقدم للـ OCR
+        const progressDiv = document.createElement('div');
+        progressDiv.className = "mt-4 p-4 bg-blue-50 rounded-xl";
+        progressDiv.innerHTML = `
+          <div class="text-center mb-2">جارٍ استخراج النص من الصورة باستخدام OCR...</div>
+          <div class="flex items-center justify-center">
+            <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div>
+            <span class="mr-4 text-blue-700">يرجى الانتظار، قد تستغرق هذه العملية بعض الوقت</span>
+          </div>
+        `;
+        document.getElementById('processStatus').appendChild(progressDiv);
+        // تنفيذ طلب OCR باستخدام XMLHttpRequest
+        return new Promise((resolve, reject) => {
+          const form = new FormData();
+          form.append('image', file);
+          const xhr = new XMLHttpRequest();
+          xhr.withCredentials = true;
+          xhr.addEventListener('readystatechange', function() {
+            if (this.readyState === this.DONE) {
+              // إزالة مؤشر التقدم
+              if (progressDiv && progressDiv.parentNode) {
+                progressDiv.parentNode.removeChild(progressDiv);
+              }
+              if (this.status === 200) {
+                try {
+                  const response = JSON.parse(this.responseText);
+                  if (response && response.results && response.results[0] &&
+                      response.results[0].entities && response.results[0].entities[0] &&
+                      response.results[0].entities[0].objects && response.results[0].entities[0].objects[0] &&
+                      response.results[0].entities[0].objects[0].entities && response.results[0].entities[0].objects[0].entities[0]) {
+                    const text = response.results[0].entities[0].objects[0].entities[0].text;
+                    resolve(text);
+                  } else {
+                    reject(new Error('تنسيق استجابة OCR غير صالح'));
+                  }
+                } catch (error) {
+                  reject(new Error(`فشل في تحليل استجابة OCR: ${error.message}`));
+                }
+              } else {
+                reject(new Error(`فشل في طلب OCR: الرمز ${this.status}`));
+              }
+            }
+          });
+          xhr.addEventListener('error', function() {
+            if (progressDiv && progressDiv.parentNode) {
+              progressDiv.parentNode.removeChild(progressDiv);
+            }
+            reject(new Error('حدث خطأ في الشبكة أثناء طلب OCR'));
+          });
+          xhr.open('POST', OCR_API_URL);
+          xhr.setRequestHeader('x-rapidapi-key', RAPIDAPI_KEY);
+          xhr.setRequestHeader('x-rapidapi-host', 'ocr43.p.rapidapi.com');
+          xhr.send(form);
+        });
+      } catch (error) {
+        console.error("Error extracting text from image:", error);
+        throw new Error(`فشل في استخراج النص من الصورة: ${error.message}`);
+      }
+    }
+    // دالة استخراج النص من أي ملف مدعوم
+    async function extractTextFromFile(file) {
+      const fileType = file.name.split('.').pop().toLowerCase();
+      document.getElementById('progressFill').style.width = '10%';
+      switch (fileType) {
+        case 'docx':
+          return await extractTextFromDocx(file);
+        case 'pdf':
+          // طلب عرض صفحات PDF للاختيار
+          const currentType = file === document.getElementById('sourceFile').files[0] ? 'source' : 'target';
+          await displayPdfPages(file, currentType);
+          // في هذه المرحلة، سيتمكن المستخدم من اختيار الصفحات المطلوبة
+          // وسيتم استخراج النص لاحقًا عند الضغط على زر استخراج النص
+          return null;
+        case 'txt':
+          document.getElementById('progressFill').style.width = '50%';
+          const text = await extractTextFromTxt(file);
+          document.getElementById('progressFill').style.width = '100%';
+          return text;
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+          return await extractTextFromImage(file);
+        default:
+          throw new Error(`نوع الملف غير مدعوم: ${fileType}`);
+      }
+    }
+    // عرض معلومات الملف بعد اختياره
+    document.getElementById('sourceFile')?.addEventListener('change', async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      const fileInfo = document.getElementById('sourceFileInfo');
+      fileInfo.innerHTML = `
+        <div class="file-info">
+          <div class="file-name"><strong>الملف:</strong> ${file.name}</div>
+          <div><strong>الحجم:</strong> ${(file.size / 1024).toFixed(2)} كيلوبايت</div>
+          <div><strong>النوع:</strong> ${file.type || 'غير محدد'}</div>
+        </div>
+      `;
+      // تخزين اسم الملف
+      analysisResults.sourceFileName = file.name;
+      // إذا كان الملف PDF، عرض صفحاته لاختيار الصفحات المطلوبة
+      if (file.name.toLowerCase().endsWith('.pdf')) {
+        document.getElementById('processStatus').classList.remove('hidden');
+        try {
+          // عرض صفحات PDF للاختيار
+          await displayPdfPages(file, 'source');
+        } catch (error) {
+          console.error('Error displaying PDF pages:', error);
+          addError(`حدث خطأ أثناء عرض صفحات PDF: ${error.message}`);
+        } finally {
+          document.getElementById('processStatus').classList.add('hidden');
+        }
+      }
+    });
+    document.getElementById('targetFile')?.addEventListener('change', async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      const fileInfo = document.getElementById('targetFileInfo');
+      fileInfo.innerHTML = `
+        <div class="file-info">
+          <div class="file-name"><strong>الملف:</strong> ${file.name}</div>
+          <div><strong>الحجم:</strong> ${(file.size / 1024).toFixed(2)} كيلوبايت</div>
+          <div><strong>النوع:</strong> ${file.type || 'غير محدد'}</div>
+        </div>
+      `;
+      // تخزين اسم الملف
+      analysisResults.targetFileName = file.name;
+      // إذا كان الملف PDF، عرض صفحاته لاختيار الصفحات المطلوبة
+      if (file.name.toLowerCase().endsWith('.pdf')) {
+        document.getElementById('processStatus').classList.remove('hidden');
+        try {
+          // عرض صفحات PDF للاختيار
+          await displayPdfPages(file, 'target');
+        } catch (error) {
+          console.error('Error displaying PDF pages:', error);
+          addError(`حدث خطأ أثناء عرض صفحات PDF: ${error.message}`);
+        } finally {
+          document.getElementById('processStatus').classList.add('hidden');
+        }
+      }
+    });
     // دالة عرض الأخطاء أو الرسائل
     function addError(message, type = 'error') {
       const errorsList = document.getElementById('errorsList');
         return;
       }
+      // مقارنة عدد الكلمات (تنبيه اختياري)
+      const sourceWordCount = countWords(sourceText);
+      const targetWordCount = countWords(targetText);
+      if (Math.abs(sourceWordCount - targetWordCount) > sourceWordCount * 0.1) {
+        addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف بشكل كبير عن النص الهدف (${targetWordCount})`, 'warning');
+      }
+      // فحص أولي سريع للاختلافات الواضحة
+      if (sourceText === targetText) {
+        addError('النصوص متطابقة تماماً بشكل حرفي', '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.1, // تقليل درجة الحرارة لزيادة الدقة
+          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) {
         }
         const data = await response.json();
+        const analysisOutput = data.choices[0].message.content.trim();
         progressDiv.remove();
           targetText: targetText,
           analysisOutput: analysisOutput,
           timestamp: new Date().toLocaleString('ar-SA'),
+          sourceFileName: analysisResults.sourceFileName || "إدخال يدوي",
+          targetFileName: analysisResults.targetFileName || "إدخال يدوي"
         };
+        // فحص إضافي للتأكد من دقة التحليل
+        const hasActualDifferences = sourceText !== targetText;
+        const reportedMatch = analysisOutput.includes('[MATCH]');
+        if (hasActualDifferences && reportedMatch) {
+          addError('تنبيه: النصوص مختلفة ولكن تم الإبلاغ عن تطابقها. يرجى التحقق يدوياً.', 'warning');
+        }
+        if (analysisOutput.includes('[MATCH]') && !hasActualDifferences) {
           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>`;
             summaryText += '</ul>';
             summaryDiv.innerHTML = summaryText;
             document.getElementById('errorsList').appendChild(summaryDiv);
+          } else if (hasActualDifferences) {
+            // إذا كانت هناك اختلافات ولكن لم يتم اكتشافها
+            addError('تنبيه: قد تكون هناك اختلافات لم يتم اكتشافها. يرجى التحقق يدوياً.', 'warning');
           }
         }
       }
     }
+    // دالة استخراج النصوص من الملفات المختارة
+    async function extractTextsFromSelectedPdfPages() {
+      try {
+        // التحقق من وجود ملفات PDF
+        if (!pdfPages.source.pdf && !pdfPages.target.pdf) {
+          addError('لا توجد ملفات PDF محددة');
+          return;
+        }
+        // استخراج النص من ملف المصدر إذا تم تحميله
+        if (pdfPages.source.pdf) {
+          const statusDiv = document.createElement('div');
+          statusDiv.className = "p-4 rounded-xl bg-blue-50 text-blue-700 mb-4";
+          statusDiv.innerHTML = `<div class="flex items-center">
+                                   <i class="fas fa-spinner fa-spin ml-2"></i>
+                                   <span>جارٍ استخراج النص من صفحات PDF المحددة من ملف المصدر</span>
+                                 </div>`;
+          document.getElementById('errorsList').appendChild(statusDiv);
+          // التحقق من وجود صفحات محددة
+          if (pdfPages.source.selectedPages.length === 0) {
+            // إذا لم يتم تحديد أي صفحات، اختر جميع الصفحات تلقائيًا
+            for (let i = 1; i <= pdfPages.source.pdf.numPages; i++) {
+              pdfPages.source.selectedPages.push(i);
+            }
+            // تحديث الواجهة لتظهر جميع الصفحات محددة
+            document.querySelectorAll('.pdf-page-thumbnail[data-type="source"]').forEach(elem => {
+              elem.classList.add('pdf-page-selected');
+            });
+          }
+          const sourceText = await extractTextFromSelectedPdfPages('source');
+          document.getElementById('sourceText').value = sourceText;
+          statusDiv.innerHTML = `<div class="flex items-center">
+                                   <i class="fas fa-check-circle ml-2 text-green-500"></i>
+                                   <span>تم استخراج النص من صفحات PDF المحددة من ملف المصدر بنجاح (${countWords(sourceText)} كلمة)</span>
+                                 </div>`;
+        }
+        // استخراج النص من ملف الهدف إذا تم تحميله
+        if (pdfPages.target.pdf) {
+          const statusDiv = document.createElement('div');
+          statusDiv.className = "p-4 rounded-xl bg-blue-50 text-blue-700 mb-4";
+          statusDiv.innerHTML = `<div class="flex items-center">
+                                   <i class="fas fa-spinner fa-spin ml-2"></i>
+                                   <span>جارٍ استخراج النص من صفحات PDF المحددة من ملف الهدف</span>
+                                 </div>`;
+          document.getElementById('errorsList').appendChild(statusDiv);
+          // التحقق من وجود صفحات محددة
+          if (pdfPages.target.selectedPages.length === 0) {
+            // إذا لم يتم تحديد أي صفحات، اختر جميع الصفحات تلقائيًا
+            for (let i = 1; i <= pdfPages.target.pdf.numPages; i++) {
+              pdfPages.target.selectedPages.push(i);
+            }
+            // تحديث الواجهة لتظهر جميع الصفحات محددة
+            document.querySelectorAll('.pdf-page-thumbnail[data-type="target"]').forEach(elem => {
+              elem.classList.add('pdf-page-selected');
+            });
+          }
+          const targetText = await extractTextFromSelectedPdfPages('target');
+          document.getElementById('targetText').value = targetText;
+          statusDiv.innerHTML = `<div class="flex items-center">
+                                   <i class="fas fa-check-circle ml-2 text-green-500"></i>
+                                   <span>تم استخراج النص من صفحات PDF المحددة من ملف الهدف بنجاح (${countWords(targetText)} كلمة)</span>
+                                 </div>`;
+        }
+        // إخفاء قسم عرض صفحات PDF
+        document.getElementById('pdfPagesContainer').classList.add('hidden');
+        // إضافة رسالة نجاح
+        const successDiv = document.createElement('div');
+        successDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 mt-4";
+        successDiv.innerHTML = `<div class="flex items-center">
+                                 <i class="fas fa-check-circle ml-2"></i>
+                                 <span>تم استخراج النصوص من صفحات PDF المحددة بنجاح. يمكنك الآن تعديل النصوص يدوياً إذا لزم الأمر ثم الضغط على زر "تحليل النصوص".</span>
+                               </div>`;
+        document.getElementById('errorsList').appendChild(successDiv);
+        return true;
+      } catch (error) {
+        console.error('Error extracting text from selected PDF pages:', error);
+        addError(`خطأ في استخراج النصوص من صفحات PDF المحددة: ${error.message}`);
+        return false;
+      }
+    }
+    // دالة استخراج النصوص من الملفات
+    async function extractTextsFromFiles() {
+      const sourceFileInput = document.getElementById('sourceFile');
+      const targetFileInput = document.getElementById('targetFile');
+      if (!sourceFileInput.files.length && !targetFileInput.files.length) {
+        addError('يرجى تحميل ملف واحد على الأقل');
+        document.getElementById('resultSection').classList.remove('hidden');
+        return;
+      }
+      // إذا كانت هناك ملفات PDF تم عرض صفحاتها بالفعل، قم باستخراج النصوص من الصفحات المحددة
+      if (pdfPages.source.pdf || pdfPages.target.pdf) {
+        await extractTextsFromSelectedPdfPages();
+        return;
+      }
+      document.getElementById('processStatus').classList.remove('hidden');
+      document.getElementById('errorsList').innerHTML = '';
+      try {
+        // استخراج النص من ملف المصدر إذا تم تحميله
+        if (sourceFileInput.files.length) {
+          const sourceFile = sourceFileInput.files[0];
+          const statusDiv = document.createElement('div');
+          statusDiv.className = "p-4 rounded-xl bg-blue-50 text-blue-700 mb-4";
+          statusDiv.innerHTML = `<div class="flex items-center">
+                                   <i class="fas fa-spinner fa-spin ml-2"></i>
+                                   <span>جارٍ استخراج النص من ملف المصدر: ${sourceFile.name}</span>
+                                 </div>`;
+          document.getElementById('errorsList').appendChild(statusDiv);
+          // إذا كان الملف PDF، عرض صفحاته لاختيار الصفحات المطلوبة
+          if (sourceFile.name.toLowerCase().endsWith('.pdf')) {
+            try {
+              await displayPdfPages(sourceFile, 'source');
+              statusDiv.innerHTML = `<div class="flex items-center">
+                                      <i class="fas fa-info-circle ml-2 text-blue-500"></i>
+                                      <span>تم عرض صفحات ملف PDF المصدر. يرجى تحديد الصفحات المطلوبة ثم الضغط على زر "استخراج النص من الصفحات المحددة".</span>
+                                    </div>`;
+            } catch (error) {
+              statusDiv.innerHTML = `<div class="flex items-center">
+                                      <i class="fas fa-exclamation-circle ml-2 text-red-500"></i>
+                                      <span>حدث خطأ أثناء عرض صفحات PDF: ${error.message}</span>
+                                    </div>`;
+            }
+          } else {
+            // استخراج النص من الملفات الأخرى
+            const sourceText = await extractTextFromFile(sourceFile);
+            document.getElementById('sourceText').value = sourceText;
+            statusDiv.innerHTML = `<div class="flex items-center">
+                                    <i class="fas fa-check-circle ml-2 text-green-500"></i>
+                                    <span>تم استخراج النص من ملف المصدر بنجاح (${countWords(sourceText)} كلمة)</span>
+                                  </div>`;
+          }
+        }
+        // استخراج النص من ملف الهدف إذا تم تحميله
+        if (targetFileInput.files.length) {
+          const targetFile = targetFileInput.files[0];
+          const statusDiv = document.createElement('div');
+          statusDiv.className = "p-4 rounded-xl bg-blue-50 text-blue-700 mb-4";
+          statusDiv.innerHTML = `<div class="flex items-center">
+                                   <i class="fas fa-spinner fa-spin ml-2"></i>
+                                   <span>جارٍ استخراج النص من ملف الهدف: ${targetFile.name}</span>
+                                 </div>`;
+          document.getElementById('errorsList').appendChild(statusDiv);
+          // إذا كان الملف PDF، عرض صفحاته لاختيار الصفحات المطلوبة
+          if (targetFile.name.toLowerCase().endsWith('.pdf')) {
+            try {
+              await displayPdfPages(targetFile, 'target');
+              statusDiv.innerHTML = `<div class="flex items-center">
+                                      <i class="fas fa-info-circle ml-2 text-blue-500"></i>
+                                      <span>تم عرض صفحات ملف PDF الهدف. يرجى تحديد الصفحات المطلوبة ثم الضغط على زر "استخراج النص من الصفحات المحددة".</span>
+                                    </div>`;
+            } catch (error) {
+              statusDiv.innerHTML = `<div class="flex items-center">
+                                      <i class="fas fa-exclamation-circle ml-2 text-red-500"></i>
+                                      <span>حدث خطأ أثناء عرض صفحات PDF: ${error.message}</span>
+                                    </div>`;
+            }
+          } else {
+            // استخراج النص من الملفات الأخرى
+            const targetText = await extractTextFromFile(targetFile);
+            document.getElementById('targetText').value = targetText;
+            statusDiv.innerHTML = `<div class="flex items-center">
+                                    <i class="fas fa-check-circle ml-2 text-green-500"></i>
+                                    <span>تم استخراج النص من ملف الهدف بنجاح (${countWords(targetText)} كلمة)</span>
+                                  </div>`;
+          }
+        }
+        // إذا لم يتم عرض صفحات PDF، أضف رسالة نجاح
+        if (!document.getElementById('pdfPagesContainer').classList.contains('hidden')) {
+          // تم عرض صفحات PDF، لا تضف رسالة النجاح هنا
+        } else {
+          // إضافة رسالة نجاح
+          const successDiv = document.createElement('div');
+          successDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 mt-4";
+          successDiv.innerHTML = `<div class="flex items-center">
+                                  <i class="fas fa-check-circle ml-2"></i>
+                                  <span>تم استخراج النصوص بنجاح. يمكنك الآن تعديل النصوص يدوياً إذا لزم الأمر ثم الضغط على زر "تحليل النصوص".</span>
+                                </div>`;
+          document.getElementById('errorsList').appendChild(successDiv);
+        }
+        // التمرير إلى قسم النصوص
+        document.getElementById('sourceText').scrollIntoView({ behavior: 'smooth' });
+      } catch (error) {
+        console.error('Error extracting texts from files:', error);
+        addError(`خطأ في استخراج النصوص: ${error.message}`);
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
+        document.getElementById('resultSection').classList.remove('hidden');
+      }
+    }
     // دالة تحليل الملفات
     async function analyzeFiles(sourceFile, targetFile) {
       // مسح الرسائل السابقة وإظهار قسم النتائج
         return;
       }
+      // التحقق من أن الملفين مختلفين
+      if (sourceFile.name === targetFile.name && sourceFile.size === targetFile.size && sourceFile.lastModified === targetFile.lastModified) {
+        addError('يبدو أنك قمت بتحميل نفس الملف مرتين. يرجى التحقق من الملفات.', '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);
+        // استخراج النصوص من الملفات
+        document.getElementById('progressFill').style.width = '0%';
+        // إذا كانت ملفات PDF وتم بالفعل اختيار صفحات، استخدم النصوص المستخرجة من الحقول
+        let sourceText = '';
+        let targetText = '';
+        if (sourceFile.name.toLowerCase().endsWith('.pdf') && pdfPages.source.pdf) {
+          sourceText = document.getElementById('sourceText').value;
+        } else {
+          sourceText = await extractTextFromFile(sourceFile);
+        }
         document.getElementById('progressFill').style.width = '50%';
+        if (targetFile.name.toLowerCase().endsWith('.pdf') && pdfPages.target.pdf) {
+          targetText = document.getElementById('targetText').value;
+        } else {
+          targetText = await extractTextFromFile(targetFile);
+        }
+        document.getElementById('progressFill').style.width = '100%';
+        // تحديث النص في مؤشر التقدم
+        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>`;
+        // عرض النصوص المستخرجة في مربعات النص إذا لم تكن موجودة بالفعل
+        if (!document.getElementById('sourceText').value) {
+          document.getElementById('sourceText').value = sourceText;
+        }
+        if (!document.getElementById('targetText').value) {
+          document.getElementById('targetText').value = targetText;
+        }
+        // مقارنة عدد الكلمات (تنبيه اختياري)
+        const sourceWordCount = countWords(sourceText);
+        const targetWordCount = countWords(targetText);
+        if (Math.abs(sourceWordCount - targetWordCount) > sourceWordCount * 0.1) {
+          addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف بشكل كبير عن النص الهدف (${targetWordCount})`, 'warning');
+        }
+        // فحص أولي سريع للاختلافات الواضحة
+        if (sourceText === targetText) {
+          addError('النصوص المستخرجة من الملفات متطابقة تماماً بشكل حرفي', 'warning');
+        }
+        // بناء 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.1, // تقليل درجة الحرارة لزيادة الدقة
+          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();
         // تخزين نتائج التحليل
         analysisResults = {
+          sourceText: sourceText,
+          targetText: targetText,
           analysisOutput: analysisOutput,
           timestamp: new Date().toLocaleString('ar-SA'),
           sourceFileName: sourceFile.name,
           targetFileName: targetFile.name
         };
+        // فحص إضافي للتأكد من دقة التحليل
+        const hasActualDifferences = sourceText !== targetText;
+        const reportedMatch = analysisOutput.includes('[MATCH]');
+        if (hasActualDifferences && reportedMatch) {
+          addError('تنبيه: النصوص مختلفة ولكن تم الإبلاغ عن تطابقها. يرجى التحقق يدوياً.', 'warning');
+        }
+        if (analysisOutput.includes('[MATCH]') && !hasActualDifferences) {
           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>`;
           analysisResults.explanationHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
           analysisResults.missingDiffCount = 0;
           analysisResults.meaningDiffCount = 0;
         } 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;
           // تخزين شرح الاختلافات
             summaryText += '</ul>';
             summaryDiv.innerHTML = summaryText;
             document.getElementById('errorsList').appendChild(summaryDiv);
+          } else if (hasActualDifferences) {
+            // إذا كانت هناك اختلافات ولكن لم يتم اكتشافها
+            addError('تنبيه: قد تكون هناك اختلافات لم يتم اكتشافها. يرجى التحقق يدوياً.', 'warning');
           }
         }
       }
     }
     // دالة إنشاء تقرير HTML
     function generateHTMLReport() {
       const { sourceText, targetText, analysisOutput, explanationHTML, numDiffCount, missingDiffCount, meaningDiffCount, timestamp, sourceFileName, targetFileName } = analysisResults;
       URL.revokeObjectURL(url);
     }
+    // دالة إعادة تحميل/تنفيذ التحليل
+    function reloadAnalysis() {
+      // إعادة تحليل النصوص الحالية في حقول النص
+      const sourceText = document.getElementById('sourceText').value;
+      const targetText = document.getElementById('targetText').value;
+      if (sourceText && targetText) {
+        analyzeTexts(sourceText, targetText);
+      } else {
+        alert('يرجى التأكد من وجود نصوص في حقول الإدخال قبل إعادة التحليل');
+      }
+    }
+    // عند الضغط على زر تحليل النصوص المدخلة يدوياً
+    document.getElementById('submitBtn').addEventListener('click', async () => {
+      const sourceText = document.getElementById('sourceText').value;
+      const targetText = document.getElementById('targetText').value;
+      await analyzeTexts(sourceText, targetText);
+    });
+    // عند الضغط على زر استخراج النصوص من الملفات
+    document.getElementById('extractTextBtn').addEventListener('click', async () => {
+      document.getElementById('resultSection').classList.remove('hidden');
+      document.getElementById('errorsList').innerHTML = '';
+      await extractTextsFromFiles();
+    });
+    // عند الضغط على زر تحليل الملفات
+    document.getElementById('analyzeFilesBtn').addEventListener('click', async () => {
+      const sourceFileInput = document.getElementById('sourceFile');
+      const targetFileInput = document.getElementById('targetFile');
+      if (!sourceFileInput.files.length || !targetFileInput.files.length) {
+        addError('يرجى تحميل كلا الملفين المصدر والهدف');
+        document.getElementById('resultSection').classList.remove('hidden');
+        return;
+      }
+      document.getElementById('processStatus').classList.remove('hidden');
+      try {
+        // تحليل الملفات
+        await analyzeFiles(sourceFileInput.files[0], targetFileInput.files[0]);
+      } catch (error) {
+        console.error('Error analyzing files:', error);
+        document.getElementById('resultSection').classList.remove('hidden');
+        addError(`خطأ في تحليل الملفات: ${error.message}`);
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
+      }
+    });
     // إضافة مستمع حدث لزر تنزيل التقرير
     document.getElementById('downloadReportBtn').addEventListener('click', downloadReport);
+    // إضافة مستمع حدث لزر إعادة التحليل
+    document.getElementById('reloadAnalysisBtn').addEventListener('click', reloadAnalysis);
+    // إضافة مستمع حدث لزر استخراج النص من الصفحات المحددة
+    document.getElementById('extractSelectedPagesBtn').addEventListener('click', async () => {
+      document.getElementById('resultSection').classList.remove('hidden');
+      document.getElementById('errorsList').innerHTML = '';
+      document.getElementById('processStatus').classList.remove('hidden');
+      try {
+        await extractTextsFromSelectedPdfPages();
+      } catch (error) {
+        console.error('Error extracting text from selected PDF pages:', error);
+        addError(`خطأ في استخراج النص من صفحات PDF المحددة: ${error.message}`);
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
+      }
+    });
+    // إضافة مستمع حدث لزر تحديد كل الصفحات
+    document.getElementById('selectAllPagesBtn').addEventListener('click', () => {
+      // تحديد الصفحات بناءً على أي ملف PDF تم عرضه
+      let type = 'source';
+      if (pdfPages.target.pdf && !pdfPages.source.pdf) {
+        type = 'target';
+      }
+      document.querySelectorAll(`.pdf-page-thumbnail[data-type="${type}"]`).forEach(elem => {
+        elem.classList.add('pdf-page-selected');
+        const pageNum = parseInt(elem.dataset.page);
+        if (!pdfPages[type].selectedPages.includes(pageNum)) {
+          pdfPages[type].selectedPages.push(pageNum);
+        }
+      });
+    });
+    // إضافة مستمع حدث لزر إلغاء تحديد كل الصفحات
+    document.getElementById('deselectAllPagesBtn').addEventListener('click', () => {
+      // إلغاء تحديد الصفحات بناءً على أي ملف PDF تم عرضه
+      let type = 'source';
+      if (pdfPages.target.pdf && !pdfPages.source.pdf) {
+        type = 'target';
+      }
+      document.querySelectorAll(`.pdf-page-thumbnail[data-type="${type}"]`).forEach(elem => {
+        elem.classList.remove('pdf-page-selected');
+      });
+      pdfPages[type].selectedPages = [];
+    });
+    // تهيئة PDF.js
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
   </script>
 </body>
 </html>