Update index.html

index.html

@@ -35,34 +35,44 @@
        تنسيقات النص والتظليل
     ================================= */
     .text-comparison { line-height: 1.8; white-space: pre-wrap; }
-    .highlight-number {
-      background-color: #FDE68A; /* أصفر */
+    /* اختلافات بسيطة (نوع MINOR) */
+    .highlight-minor {
+      background-color: #FFF9C4; /* أصفر فاتح */
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
+    /* جمل مفقودة بالكامل (نوع MISSING) */
     .highlight-missing {
-      background-color: #FECACA; /* أحمر للنصوص الناقصة */
+      background-color: #FECACA; /* أحمر فاتح */
       color: #B91C1C;
       padding: 0 4px;
       border-radius: 3px;
       font-style: italic;
     }
-    .highlight-extra {
-      background-color: #D1FAE5; /* أخضر للنصوص الزائدة */
-      color: #065F46;
+    /* جمل ناقصة (نوع PARTIAL) */
+    .highlight-partial {
+      background-color: #FFCDD2; /* أحمر باهت */
+      color: #B91C1C;
+      padding: 0 4px;
+      border-radius: 3px;
+      font-weight: bold;
+    }
+    /* تظليل الاختلافات الأخرى (أرقام، تواريخ، اختلاف معاني، علامات شك) */
+    .highlight-number {
+      background-color: #FDE68A; /* أصفر */
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-meaning {
-      background-color: #E0E7FF; /* أزرق فاتح لاختلاف المعنى */
+      background-color: #E0E7FF;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-doubt {
-      background-color: #DBEAFE; /* أزرق لعناصر الشك */
+      background-color: #DBEAFE; /* أزرق */
       color: #1E3A8A;
       padding: 0 4px;
       border-radius: 3px;
@@ -101,7 +111,7 @@
     .icon { margin-right: 0.5rem; }
     
     /* ================================
-       تصميم شاشة الأخطاء والنتائج
+       شاشة الأخطاء والنتائج
     ================================= */
     #errorsList div {
       margin-bottom: 0.5rem;
@@ -117,7 +127,7 @@
           <i class="fas fa-chart-line icon"></i> نظام المقارنة والتحليل المتقدم
         </h1>
         <p class="text-xl opacity-90">
-          <i class="fas fa-info-circle icon"></i> استخراج كافة المشاكل مع التركيز على النصوص المفقودة
+          <i class="fas fa-info-circle icon"></i> استخراج كافة المشاكل مع التركيز على النصوص المفقودة في المصدر
         </p>
       </div>
     </header>
@@ -215,13 +225,13 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3">
-              <i class="fas fa-file-alt icon text-indigo-600"></i> النص المصدر (مع التعليم)
+              <i class="fas fa-file-alt icon text-indigo-600"></i> النص المصدر (مع التظليل)
             </h4>
             <div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-6 min-h-[200px] border-2 border-indigo-100 text-comparison"></div>
           </div>
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3">
-              <i class="fas fa-file-alt icon text-pink-600"></i> النص الهدف (مع التعليم)
+              <i class="fas fa-file-alt icon text-pink-600"></i> النص الهدف (بدون تظليل)
             </h4>
             <div id="targetTextReview" class="bg-gray-50 rounded-xl p-6 min-h-[200px] border-2 border-gray-200 text-comparison"></div>
           </div>
@@ -242,23 +252,19 @@
        جافا سكريبت: الوظائف والتحليل
   ================================= -->
   <script>
-    // إعدادات الـ API والبرومبت
+    // إعدادات الـ 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. قم باستخراج كافة المشاكل، وعلى رأسها النصوص المفقودة، مع تقديم شرح تفصيلي مدعوم بأيقونات توضيحية لكل فئة.
-
+    const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة التقنية وتحليل النصوص بدقة عالية.
+مهمتك مقارنة النص المصدر والنص الهدف واستخراج كافة المشاكل وفقاً للأنواع التالية:
+1. إذا كانت الجملة موجودة في النصين ولكن بها اختلاف بسيط (مثال: اختلاف كلمة أو تاريخ أو معنى بسيط) فاستخدم العلامة [MINOR] ... [/MINOR].
+2. إذا كانت الجملة مختلفة تماماً (أي بها 3 اختلافات أو أكثر) فتعتبر مفقودة في النص الهدف، فاستخدم العلامة [MISSING] ... [/MISSING].
+3. إذا كانت الجملة موجودة في النص المصدر ولكنها ناقصة أو بها كلمات مفقودة في النص الهدف، فاستخدم العلامة [PARTIAL] ... [/PARTIAL].
+يُرجى إظهار العلامات في النص المصدر لتبيان مكان الخطأ.
+  
 النص المصدر:
 {source}
-
+  
 النص الهدف:
 {target}`;
     
@@ -284,41 +290,50 @@
       return text.substring(0, index).split("\n").length;
     }
     
-    // دوال التظليل (Highlighting) لكل نوع من المشاكل
+    // دالة تطبيق التظليل على النص المصدر باستخدام العلامات الجديدة
     function applyHighlights(originalText, analysisOutput) {
       let highlightedText = originalText;
       let match;
-      // اختلافات الأرقام/التواريخ
-      const numberRegex = /<([^<>]+)>/g;
-      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+      // اختلاف بسيط [MINOR]
+      const minorRegex = /\[MINOR\](.*?)\[\/MINOR\]/g;
+      while ((match = minorRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
-          const replacement = `<span class="highlight-number">${phrase}</span>`;
+          const replacement = `<span class="highlight-minor">${phrase}</span>`;
           const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
-      // النصوص المفقودة (يتم استخراجها بأهمية خاصة)
-      const missingRegex = /__(.*?)__/g;
+      // جملة مفقودة [MISSING]
+      const missingRegex = /\[MISSING\](.*?)\[\/MISSING\]/g;
       while ((match = missingRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
-          const replacement = `<span class="highlight-missing">__${phrase}__</span>`;
+          const replacement = `<span class="highlight-missing">${phrase}</span>`;
           const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
-      // النصوص الزائدة
-      const extraRegex = /<<EXTRA>>(.*?)<<\/EXTRA>>/g;
-      while ((match = extraRegex.exec(analysisOutput)) !== null) {
+      // جملة ناقصة [PARTIAL]
+      const partialRegex = /\[PARTIAL\](.*?)\[\/PARTIAL\]/g;
+      while ((match = partialRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
         if (phrase) {
-          const replacement = `<span class="highlight-extra">${phrase}</span>`;
+          const replacement = `<span class="highlight-partial">${phrase}</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
+      }
+      // يمكن الإبقاء على التظليل السابق للأرقام والتواريخ واختلاف المعنى وعلامات الشك إن وجدت
+      const numberRegex = /<([^<>]+)>/g;
+      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-number">${phrase}</span>`;
           const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
-      // اختلافات المعنى
       const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
       while ((match = meaningRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
@@ -328,7 +343,6 @@
           highlightedText = highlightedText.replace(phraseRegex, replacement);
         }
       }
-      // علامات الشك أو الأخطاء البسيطة
       const doubtRegex = /\[DOUBT\](.*?)\[\/DOUBT\]/g;
       while ((match = doubtRegex.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
@@ -341,62 +355,71 @@
       return highlightedText;
     }
     
-    // دالة توليد شرح تفصيلي للاختلافات مع أيقونات توضيحية لكل مشكلة
+    // دالة توليد شرح تفصيلي للاختلافات باستخدام العلامات الجديدة مع أيقونات توضيحية
     function generateExplanation(sourceText, analysisOutput) {
       let steps = [];
       let match;
+      const iconMinor = `<i class="fas fa-edit text-orange-500 mr-1"></i>`;
       const iconMissing = `<i class="fas fa-exclamation-triangle text-red-500 mr-1"></i>`;
+      const iconPartial = `<i class="fas fa-minus-circle text-red-500 mr-1"></i>`;
       const iconNumber = `<i class="fas fa-hashtag text-yellow-600 mr-1"></i>`;
-      const iconExtra = `<i class="fas fa-plus-circle text-green-600 mr-1"></i>`;
       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) {
+      // استخراج اختلاف بسيط [MINOR]
+      const minorRegex2 = /\[MINOR\](.*?)\[\/MINOR\]/g;
+      while ((match = minorRegex2.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
-        if (phrase) {
+        if(phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconMissing} <strong>نص مفقود</strong> في السطر ${lineNum}: <span class="highlight-missing">__${phrase}__</span> غير موجود في النص الهدف.</li>`);
+          steps.push(`<li>${iconMinor} في السطر ${lineNum}: اختلاف بسيط في الجملة <span class="highlight-minor">${phrase}</span>.</li>`);
         }
       }
-      // استخراج اختلافات الأرقام/التواريخ
-      const numberRegex = /<([^<>]+)>/g;
-      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+      // استخراج جملة مفقودة [MISSING]
+      const missingRegex2 = /\[MISSING\](.*?)\[\/MISSING\]/g;
+      while ((match = missingRegex2.exec(analysisOutput)) !== null) {
         const phrase = match[1].trim();
-        if (phrase) {
+        if(phrase) {
           const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconNumber} في السطر ${lineNum}: الرقم/التاريخ <span class="highlight-number">${phrase}</span> لا يتطابق بين المصدر والهدف.</li>`);
+          steps.push(`<li>${iconMissing} في السطر ${lineNum}: جملة مفقودة <span class="highlight-missing">${phrase}</span> غير موجودة في النص الهدف.</li>`);
+        }
+      }
+      // استخراج جملة ناقصة [PARTIAL]
+      const partialRegex2 = /\[PARTIAL\](.*?)\[\/PARTIAL\]/g;
+      while ((match = partialRegex2.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if(phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          steps.push(`<li>${iconPartial} في السطر ${lineNum}: جملة ناقصة أو بها كلمات مفقودة <span class="highlight-partial">${phrase}</span> في النص الهدف.</li>`);
         }
       }
-      // استخراج النصوص الزائدة
-      const extraRegex = /<<EXTRA>>(.*?)<<\/EXTRA>>/g;
-      while ((match = extraRegex.exec(analysisOutput)) !== null) {
+      // استخراج اختلافات الأرقام/التواريخ إن وجدت
+      const numberRegex2 = /<([^<>]+)>/g;
+      while ((match = numberRegex2.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>`);
+          steps.push(`<li>${iconNumber} في السطر ${lineNum}: الرقم/التاريخ <span class="highlight-number">${phrase}</span> لا يتطابق بين المصدر والهدف.</li>`);
         }
       }
-      // استخراج اختلافات المعنى
-      const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
-      while ((match = meaningRegex.exec(analysisOutput)) !== null) {
+      // استخراج اختلافات المعنى إن وجدت
+      const meaningRegex2 = /\[MEANING\](.*?)\[\/MEANING\]/g;
+      while ((match = meaningRegex2.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 doubtRegex2 = /\[DOUBT\](.*?)\[\/DOUBT\]/g;
+      while ((match = doubtRegex2.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>`;
       }
@@ -525,7 +548,6 @@
           max_tokens: 2048,
           stream: false
         };
-        
         const response = await fetch(API_URL, {
           method: 'POST',
           headers: {
@@ -541,7 +563,7 @@
         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";
@@ -551,29 +573,31 @@
           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);
-          // توليد شرح تفصيلي لكل مشكلة تم استخراجها
+          // عرض النص الهدف بدون تظليل
+          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
+          // توليد شرح تفصيلي لكل مشكلة تم استخراجها باستخدام العلامات الجديدة
           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 minorDiffCount = (analysisOutput.match(/\[MINOR\](.*?)\[\/MINOR\]/g) || []).length;
+          const missingDiffCount = (analysisOutput.match(/\[MISSING\](.*?)\[\/MISSING\]/g) || []).length;
+          const partialDiffCount = (analysisOutput.match(/\[PARTIAL\](.*?)\[\/PARTIAL\]/g) || []).length;
           const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
           const doubtDiffCount = (analysisOutput.match(/\[DOUBT\](.*?)\[\/DOUBT\]/g) || []).length;
           
-          if (numDiffCount || missingDiffCount || extraDiffCount || meaningDiffCount || doubtDiffCount) {
+          if (minorDiffCount || missingDiffCount || partialDiffCount || numDiffCount || 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 (minorDiffCount) summaryText += `<li>اختلاف بسيط: ${minorDiffCount}</li>`;
+            if (missingDiffCount) summaryText += `<li>جمل مفقودة: ${missingDiffCount}</li>`;
+            if (partialDiffCount) summaryText += `<li>جمل ناقصة: ${partialDiffCount}</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>`;
             summaryText += '</ul>';