Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 13

Commit

43df006

verified ·

1 Parent(s): b5ef197

Update index.html

Browse files

Files changed (1) hide show

index.html +56 -32

index.html CHANGED Viewed

@@ -10,7 +10,7 @@
   <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%; }
@@ -56,13 +56,13 @@
       font-weight: bold;
     }
     .highlight-meaning {
-      background-color: #E0E7FF;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-doubt {
-      background-color: #DBEAFE; /* أزرق لعلامات الشك */
       color: #1E3A8A;
       padding: 0 4px;
       border-radius: 3px;
@@ -70,11 +70,11 @@
     }
     /* ================================
-       تنسيق الفقرات وترقيمها
     ================================= */
     .line-item {
       margin-bottom: 1rem;
-      padding: 0.5rem;
       border-bottom: 1px dashed #ccc;
     }
     .line-number {
@@ -85,7 +85,7 @@
     .line-text { display: inline-block; }
     /* ================================
-       تحسين تصميم البطاقات والأيقونات
     ================================= */
     .card {
       background-color: #fff;
@@ -99,6 +99,13 @@
       transform: translateY(-3px);
     }
     .icon { margin-right: 0.5rem; }
   </style>
 </head>
 <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
@@ -110,7 +117,7 @@
           <i class="fas fa-chart-line icon"></i> نظام المقارنة والتحليل المتقدم
         </h1>
         <p class="text-xl opacity-90">
-          <i class="fas fa-info-circle icon"></i> دقة عالية في استخراج وتحليل النصوص
         </p>
       </div>
     </header>
@@ -156,14 +163,14 @@
             <label class="block text-lg font-bold text-gray-700 mb-3">
               <i class="fas fa-language icon text-indigo-600"></i> النص المصدر
             </label>
-            <textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-indigo-200 focus:border-indigo-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">
               <i class="fas fa-language icon text-pink-600"></i> النص الهدف
             </label>
-            <textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-pink-200 focus:border-pink-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
           </div>
         </div>
       </div>
@@ -187,7 +194,7 @@
             <label class="block text-lg font-bold text-gray-700 mb-3">
               <i class="fas fa-edit icon text-green-600"></i> إدخال المصادر يدويًا
             </label>
-            <textarea id="sourceExtraText" dir="rtl" class="w-full px-6 py-4 border-2 border-green-200 rounded-xl focus:ring-green-200 focus:border-green-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب المصادر هنا..."></textarea>
           </div>
         </div>
       </div>
@@ -199,7 +206,7 @@
         </div>
       </button>
-      <!-- نتائج التحليل -->
       <div id="resultSection" class="card hidden">
         <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
           <i class="fas fa-search icon text-green-600"></i> نتائج التحليل والمقارنة
@@ -221,10 +228,10 @@
         </div>
       </div>
-      <!-- شرح تفصيلي للاختلافات -->
       <div id="explanationBox" class="card hidden">
         <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
-          <i class="fas fa-info-circle icon text-green-600"></i> شرح الاختلافات
         </h2>
         <div id="explanationText" class="text-lg text-gray-700"></div>
       </div>
@@ -235,18 +242,19 @@
        جافا سكريبت: الوظائف والتحليل
   ================================= -->
   <script>
     const API_URL = 'https://api.deepseek.com/chat/completions';
     const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
-    const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة التقنية وتحليل النصوص بدقة. مهمتك مقارنة النص المصدر والنص الهدف واستخراج الاختلافات بدقة مع تحسين التظليل والتعليم.
 تعليمات:
-1. قم بتحليل النص إلى فقرات منفصلة، مع التأكد من انتهاء كل فقرة بنقطة.
 2. لا تقم بتعديل العلامات التالية:
    - الأرقام والتواريخ محاطة بـ < و >.
    - النصوص المفقودة محاطة بـ __ و __.
    - النصوص الزائدة محاطة بـ <<EXTRA>> و <<\/EXTRA>>.
    - اختلافات المعنى محاطة بـ [MEANING] و [/MEANING].
    - علامات الشك أو الأخطاء البسيطة محاطة بـ [DOUBT] و [/DOUBT].
-3. يجب أن يقدم التحليل تعليمات دقيقة مع أيقونات توضيحية لكل نوع من الاختلافات.
 النص المصدر:
 {source}
@@ -254,7 +262,7 @@
 النص الهدف:
 {target}`;
-    // دوال مساعدة
     function countWords(text) {
       return text.trim().split(/\s+/).filter(word => word !== "").length;
     }
@@ -264,8 +272,10 @@
     function splitIntoLines(text) {
       return text.split(/\n+/).map((line, i) => {
         line = line.trim();
-        if(line && !line.endsWith('.')) { line += '.'; }
-        return `<div class="line-item"><span class="line-number">${i+1}:</span><span class="line-text">${line}</span></div>`;
       }).join('');
     }
     function getLineNumber(text, substring) {
@@ -274,7 +284,7 @@
       return text.substring(0, index).split("\n").length;
     }
-    // دوال التظليل (Highlighting)
     function applyHighlights(originalText, analysisOutput) {
       let highlightedText = originalText;
       let match;
@@ -288,7 +298,7 @@
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
-      // النصوص المفقودة
       const missingRegex = /__(.*?)__/g;
       while ((match = missingRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
@@ -331,7 +341,7 @@
       return highlightedText;
     }
-    // دالة توليد شرح تفصيلي للاختلافات مع أيقونات
     function generateExplanation(sourceText, analysisOutput) {
       let steps = [];
       let match;
@@ -341,46 +351,52 @@
       const iconMeaning = `<i class="fas fa-info-circle text-blue-600 mr-1"></i>`;
       const iconDoubt = `<i class="fas fa-question-circle text-indigo-600 mr-1"></i>`;
       const missingRegex = /__(.*?)__/g;
       while ((match = missingRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconMissing} في السطر ${lineNum}، النص المفقود: <span class="highlight-missing">__${phrase}__</span> غير موجود في النص الهدف.</li>`);
         }
       }
       const numberRegex = /<([^<>]+)>/g;
       while ((match = numberRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconNumber} في السطر ${lineNum}، الرقم/التاريخ: <span class="highlight-number">${phrase}</span> لا يتطابق بين المصدر والهدف.</li>`);
         }
       }
       const extraRegex = /<<EXTRA>>(.*?)<<\/EXTRA>>/g;
       while ((match = extraRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconExtra} في السطر ${lineNum}، النص الزائد: <span class="highlight-extra">${phrase}</span> موجود بشكل غير متوقع في النص الهدف.</li>`);
         }
       }
       const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
       while ((match = meaningRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconMeaning} في السطر ${lineNum}، اختلاف في المعنى: <span class="highlight-meaning">${phrase}</span> بين المصدر والهدف.</li>`);
         }
       }
       const doubtRegex = /\[DOUBT\](.*?)\[\/DOUBT\]/g;
       while ((match = doubtRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconDoubt} في السطر ${lineNum}، علامة شك: <span class="highlight-doubt">${phrase}</span> قد تشير إلى غموض أو خطأ بسيط يحتاج مراجعة.</li>`);
         }
       }
       if (steps.length === 0) {
         return `<p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>`;
       }
@@ -454,7 +470,7 @@
       }
     });
-    // دالة عرض الأخطاء
     function addError(message, type = 'error') {
       const errorsList = document.getElementById('errorsList');
       if (!errorsList) return;
@@ -467,7 +483,7 @@
       errorsList.appendChild(errorDiv);
     }
-    // معالجة عملية التحليل عند الضغط على الزر
     document.getElementById('submitBtn').addEventListener('click', async () => {
       const sourceText = document.getElementById('sourceText').value;
       const targetText = document.getElementById('targetText').value;
@@ -509,6 +525,7 @@
           max_tokens: 2048,
           stream: false
         };
         const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
@@ -517,11 +534,14 @@
           },
           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";
@@ -529,26 +549,30 @@
           document.getElementById('errorsList').appendChild(checkDiv);
           document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
           document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
-          document.getElementById('explanationText').innerHTML = `<p>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</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 extraDiffCount = (analysisOutput.match(/<<EXTRA>>(.*?)<<\/EXTRA>>/g) || []).length;
           const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
           const doubtDiffCount = (analysisOutput.match(/\[DOUBT\](.*?)\[\/DOUBT\]/g) || []).length;
           if (numDiffCount || missingDiffCount || extraDiffCount || meaningDiffCount || doubtDiffCount) {
             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 ml-4 space-y-1">';
-            if (numDiffCount) summaryText += `<li>اختلاف في الأرقام/التواريخ: ${numDiffCount}</li>`;
             if (missingDiffCount) summaryText += `<li>النصوص المفقودة: ${missingDiffCount}</li>`;
             if (extraDiffCount) summaryText += `<li>النصوص الزائدة: ${extraDiffCount}</li>`;
             if (meaningDiffCount) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
             if (doubtDiffCount) summaryText += `<li>علامات الشك: ${doubtDiffCount}</li>`;

   <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%; }
       font-weight: bold;
     }
     .highlight-meaning {
+      background-color: #E0E7FF; /* أزرق فاتح لاختلاف المعنى */
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-doubt {
+      background-color: #DBEAFE; /* أزرق لعناصر الشك */
       color: #1E3A8A;
       padding: 0 4px;
       border-radius: 3px;
     }
     /* ================================
+       تنسيق عرض الفقرات وترقيمها
     ================================= */
     .line-item {
       margin-bottom: 1rem;
+      padding: 0.75rem;
       border-bottom: 1px dashed #ccc;
     }
     .line-number {
     .line-text { display: inline-block; }
     /* ================================
+       تصميم البطاقات والعناصر
     ================================= */
     .card {
       background-color: #fff;
       transform: translateY(-3px);
     }
     .icon { margin-right: 0.5rem; }
+    /* ================================
+       تصميم شاشة الأخطاء والنتائج
+    ================================= */
+    #errorsList div {
+      margin-bottom: 0.5rem;
+    }
   </style>
 </head>
 <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
           <i class="fas fa-chart-line icon"></i> نظام المقارنة والتحليل المتقدم
         </h1>
         <p class="text-xl opacity-90">
+          <i class="fas fa-info-circle icon"></i> استخراج كافة المشاكل مع التركيز على النصوص المفقودة
         </p>
       </div>
     </header>
             <label class="block text-lg font-bold text-gray-700 mb-3">
               <i class="fas fa-language icon text-indigo-600"></i> النص المصدر
             </label>
+            <textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-indigo-200 focus:border-indigo-400 transition-all resize-none text-lg" rows="8" placeholder="اكتب النص المصدر هنا..."></textarea>
           </div>
           <!-- النص الهدف -->
           <div class="group">
             <label class="block text-lg font-bold text-gray-700 mb-3">
               <i class="fas fa-language icon text-pink-600"></i> النص الهدف
             </label>
+            <textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-pink-200 focus:border-pink-400 transition-all resize-none text-lg" rows="8" placeholder="اكتب النص الهدف هنا..."></textarea>
           </div>
         </div>
       </div>
             <label class="block text-lg font-bold text-gray-700 mb-3">
               <i class="fas fa-edit icon text-green-600"></i> إدخال المصادر يدويًا
             </label>
+            <textarea id="sourceExtraText" dir="rtl" class="w-full px-6 py-4 border-2 border-green-200 rounded-xl focus:ring-green-200 focus:border-green-400 transition-all resize-none text-lg" rows="8" placeholder="اكتب المصادر هنا..."></textarea>
           </div>
         </div>
       </div>
         </div>
       </button>
+      <!-- قسم عرض نتائج التحليل -->
       <div id="resultSection" class="card hidden">
         <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
           <i class="fas fa-search icon text-green-600"></i> نتائج التحليل والمقارنة
         </div>
       </div>
+      <!-- قسم الشرح التفصيلي للاختلافات -->
       <div id="explanationBox" class="card hidden">
         <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
+          <i class="fas fa-info-circle icon text-green-600"></i> شرح الاختلافات المفصلة
         </h2>
         <div id="explanationText" class="text-lg text-gray-700"></div>
       </div>
        جافا سكريبت: الوظائف والتحليل
   ================================= -->
   <script>
+    // إعدادات الـ API والبرومبت
     const API_URL = 'https://api.deepseek.com/chat/completions';
     const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
+    const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة التقنية وتحليل النصوص بدقة عالية. مهمتك مقارنة النص المصدر والنص الهدف واستخراج كافة المشاكل مع التركيز بشكل خاص على النصوص المفقودة.
 تعليمات:
+1. قم بتحليل النص إلى فقرات منفصلة مع التأكد من انتهاء كل فقرة بنقطة.
 2. لا تقم بتعديل العلامات التالية:
    - الأرقام والتواريخ محاطة بـ < و >.
    - النصوص المفقودة محاطة بـ __ و __.
    - النصوص الزائدة محاطة بـ <<EXTRA>> و <<\/EXTRA>>.
    - اختلافات المعنى محاطة بـ [MEANING] و [/MEANING].
    - علامات الشك أو الأخطاء البسيطة محاطة بـ [DOUBT] و [/DOUBT].
+3. قم باستخراج كافة المشاكل، وعلى رأسها النصوص المفقودة، مع تقديم شرح تفصيلي مدعوم بأيقونات توضيحية لكل فئة.
 النص المصدر:
 {source}
 النص الهدف:
 {target}`;
+    // دوال مساعدة للتعامل مع النصوص
     function countWords(text) {
       return text.trim().split(/\s+/).filter(word => word !== "").length;
     }
     function splitIntoLines(text) {
       return text.split(/\n+/).map((line, i) => {
         line = line.trim();
+        if(line && !line.endsWith('.')) {
+          line += '.';
+        }
+        return `<div class="line-item"><span class="line-number">${i+1}:</span> <span class="line-text">${line}</span></div>`;
       }).join('');
     }
     function getLineNumber(text, substring) {
       return text.substring(0, index).split("\n").length;
     }
+    // دوال التظليل (Highlighting) لكل نوع من المشاكل
     function applyHighlights(originalText, analysisOutput) {
       let highlightedText = originalText;
       let match;
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
+      // النصوص المفقودة (يتم استخراجها بأهمية خاصة)
       const missingRegex = /__(.*?)__/g;
       while ((match = missingRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
       return highlightedText;
     }
+    // دالة توليد شرح تفصيلي للاختلافات مع أيقونات توضيحية لكل مشكلة
     function generateExplanation(sourceText, analysisOutput) {
       let steps = [];
       let match;
       const iconMeaning = `<i class="fas fa-info-circle text-blue-600 mr-1"></i>`;
       const iconDoubt = `<i class="fas fa-question-circle text-indigo-600 mr-1"></i>`;
+      // استخراج النصوص المفقودة (تظهر كأ��لوية)
       const missingRegex = /__(.*?)__/g;
       while ((match = missingRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
+          steps.push(`<li>${iconMissing} <strong>نص مفقود</strong> في السطر ${lineNum}: <span class="highlight-missing">__${phrase}__</span> غير موجود في النص الهدف.</li>`);
         }
       }
+      // استخراج اختلافات الأرقام/التواريخ
       const numberRegex = /<([^<>]+)>/g;
       while ((match = numberRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
+          steps.push(`<li>${iconNumber} في السطر ${lineNum}: الرقم/التاريخ <span class="highlight-number">${phrase}</span> لا يتطابق بين المصدر والهدف.</li>`);
         }
       }
+      // استخراج النصوص الزائدة
       const extraRegex = /<<EXTRA>>(.*?)<<\/EXTRA>>/g;
       while ((match = extraRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
+          steps.push(`<li>${iconExtra} في السطر ${lineNum}: النص الزائد <span class="highlight-extra">${phrase}</span> موجود بشكل غير متوقع في النص الهدف.</li>`);
         }
       }
+      // استخراج اختلافات المعنى
       const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
       while ((match = meaningRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
+          steps.push(`<li>${iconMeaning} في السطر ${lineNum}: اختلاف في المعنى مع التعبير <span class="highlight-meaning">${phrase}</span>.</li>`);
         }
       }
+      // استخراج علامات الشك أو الأخطاء البسيطة
       const doubtRegex = /\[DOUBT\](.*?)\[\/DOUBT\]/g;
       while ((match = doubtRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
+          steps.push(`<li>${iconDoubt} في السطر ${lineNum}: علامة شك أو خطأ بسيط <span class="highlight-doubt">${phrase}</span> تحتاج مراجعة.</li>`);
         }
       }
       if (steps.length === 0) {
         return `<p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>`;
       }
       }
     });
+    // دالة عرض الأخطاء والرسائل
     function addError(message, type = 'error') {
       const errorsList = document.getElementById('errorsList');
       if (!errorsList) return;
       errorsList.appendChild(errorDiv);
     }
+    // معالجة عملية التحليل عند الضغط على زر "تحليل ومراجعة النصوص"
     document.getElementById('submitBtn').addEventListener('click', async () => {
       const sourceText = document.getElementById('sourceText').value;
       const targetText = document.getElementById('targetText').value;
           max_tokens: 2048,
           stream: false
         };
         const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
           },
           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";
           document.getElementById('errorsList').appendChild(checkDiv);
           document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
           document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
+          document.getElementById('explanationText').innerHTML = `<p>النصوص متطابقة ولا توجد فروقات يجب الإشارة إليها.</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 extraDiffCount = (analysisOutput.match(/<<EXTRA>>(.*?)<<\/EXTRA>>/g) || []).length;
           const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
           const doubtDiffCount = (analysisOutput.match(/\[DOUBT\](.*?)\[\/DOUBT\]/g) || []).length;
           if (numDiffCount || missingDiffCount || extraDiffCount || meaningDiffCount || doubtDiffCount) {
             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 ml-4 space-y-1">';
             if (missingDiffCount) summaryText += `<li>النصوص المفقودة: ${missingDiffCount}</li>`;
+            if (numDiffCount) summaryText += `<li>اختلاف في الأرقام/التواريخ: ${numDiffCount}</li>`;
             if (extraDiffCount) summaryText += `<li>النصوص الزائدة: ${extraDiffCount}</li>`;
             if (meaningDiffCount) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
             if (doubtDiffCount) summaryText += `<li>علامات الشك: ${doubtDiffCount}</li>`;