Update index.html

index.html

@@ -9,9 +9,9 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
-    /* ================================
+    /* -------------------------------
        الحركات والتأثيرات
-    ================================= */
+    ------------------------------- */
     @keyframes gradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
@@ -26,52 +26,43 @@
     .animate-scale:hover { transform: scale(1.02); }
     .pulse-animation { animation: pulse 2s infinite; }
     @keyframes pulse {
-      0% { box-shadow: 0 0 0 0 rgba(156,39,176,0.4); }
-      70% { box-shadow: 0 0 0 10px rgba(156,39,176,0); }
-      100% { box-shadow: 0 0 0 0 rgba(156,39,176,0); }
+      0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
+      70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
+      100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
     }
     
-    /* ================================
-       تنسيقات النص والتظليل
-    ================================= */
+    /* -------------------------------
+       تنسيقات النص والتظليل (ألوان بيضاء)
+    ------------------------------- */
     .text-comparison { line-height: 1.8; white-space: pre-wrap; }
-    .highlight-number {
-      background-color: #FDE68A;
-      padding: 0 4px;
-      border-radius: 3px;
-      font-weight: bold;
-    }
     .highlight-missing {
-      background-color: #FECACA;
-      color: #B91C1C;
-      padding: 0 4px;
-      border-radius: 3px;
-      font-style: italic;
-    }
-    .highlight-extra {
-      background-color: #D1FAE5;
-      color: #065F46;
+      background-color: #ffffff;
+      color: #000;
       padding: 0 4px;
+      border: 1px solid #ccc;
       border-radius: 3px;
       font-weight: bold;
     }
-    .highlight-meaning {
-      background-color: #E0E7FF;
+    .highlight-number {
+      background-color: #ffffff;
+      color: #000;
       padding: 0 4px;
+      border: 1px solid #ccc;
       border-radius: 3px;
       font-weight: bold;
     }
-    .highlight-doubt {
-      background-color: #DBEAFE;
-      color: #1E3A8A;
+    .highlight-meaning {
+      background-color: #ffffff;
+      color: #000;
       padding: 0 4px;
+      border: 1px solid #ccc;
       border-radius: 3px;
       font-weight: bold;
     }
     
-    /* ================================
+    /* -------------------------------
        تنسيق الفقرات وترقيمها
-    ================================= */
+    ------------------------------- */
     .line-item {
       margin-bottom: 1rem;
       padding: 0.5rem;
@@ -84,18 +75,18 @@
     }
     .line-text { display: inline-block; }
     
-    /* ================================
+    /* -------------------------------
        تصميم البطاقات والأيقونات
-    ================================= */
+    ------------------------------- */
     .card {
       background-color: #fff;
       border-radius: 1rem;
-      box-shadow: 0 10px 25px -5px rgba(156,39,176,0.1);
+      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
       padding: 2rem;
       border: 1px solid #f3f4f6;
     }
     .card-hover:hover {
-      box-shadow: 0 10px 25px -5px rgba(156,39,176,0.2);
+      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
       transform: translateY(-3px);
     }
     .icon { margin-right: 0.5rem; }
@@ -110,7 +101,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>
@@ -228,14 +219,6 @@
         </h2>
         <div id="explanationText" class="text-lg text-gray-700"></div>
       </div>
-
-      <!-- قسم الكلمات المفقودة (الكلمات التي لم تُترجم) -->
-      <div id="missingWordsSection" class="card hidden">
-        <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
-          <i class="fas fa-exclamation-triangle icon text-red-500"></i> الكلمات المفقودة
-        </h2>
-        <div id="missingWordsList" class="text-lg text-red-700"></div>
-      </div>
     </main>
   </div>
 
@@ -245,20 +228,28 @@
   <script>
     (function() {
       "use strict";
-
-      // تنبيه: يُفضل عدم تضمين مفتاح API في الكود العام بل تخزينه على الخادم
+      
+      /* تحديث برومبت التحليل لتحديد ثلاثة بنود فقط:
+         1. النصوص المفقودة (الكلمات التي لم تُترجم أبداً)
+         2. الأرقام والتواريخ غير المتطا��قة
+         3. اختلاف المعنى إن وجد
+         يتم تمييز:
+           - النصوص المفقودة باستخدام __الكلمة__
+           - الأرقام والتواريخ باستخدام <الرقم/التاريخ>
+           - اختلاف المعنى باستخدام [MEANING] الاختلاف [/MEANING]
+      */
       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. **النصوص المفقودة:** الكلمات التي لم تُترجم أبداً من النص المصدر (لا يوجد لها مقابل في النص الهدف).
+2. **الأرقام والتواريخ:** التي لا تتطابق بين المصدر والهدف.
+3. **اختلاف المعنى:** في حال وجود اختلاف واضح.
+يرجى تمييز:
+- النصوص المفقودة بـ __الكلمة__
+- الأرقام والتواريخ بـ <الرقم/التاريخ>
+- اختلاف المعنى بـ [MEANING] الاختلاف [/MEANING]
+قدم ناتجك في شكل قائمة تفصيلية مع شرح مختصر لكل اختلاف.
 
 النص المصدر:
 {source}
@@ -266,9 +257,9 @@
 النص الهدف:
 {target}`;
 
-      /* ===============================
+      /* -------------------------------
          دوال مساعدة عامة
-      =============================== */
+      ------------------------------- */
       const countWords = text =>
         text.trim().split(/\s+/).filter(word => word !== "").length;
 
@@ -290,43 +281,33 @@
         return text.substring(0, index).split("\n").length;
       };
 
-      /* ===============================
-         دوال تظليل الاختلافات
-      =============================== */
+      /* -------------------------------
+         دوال تظليل الاختلافات (العلامات: __ للنص المفقود، < > للأرقام/التواريخ، [MEANING] اختلاف المعنى)
+      ------------------------------- */
       const applyHighlights = (originalText, analysisOutput) => {
         let highlightedText = originalText;
         let match;
-        // اختلافات الأرقام/التواريخ
-        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 missingRegex = /__(.*?)__/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) {
+        // تظليل الأرقام والتواريخ
+        const numberRegex = /<([^<>]+)>/g;
+        while ((match = numberRegex.exec(analysisOutput)) !== null) {
           const phrase = match[1].trim();
           if (phrase) {
-            const replacement = `<span class="highlight-extra">${phrase}</span>`;
+            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();
@@ -336,101 +317,53 @@
             highlightedText = highlightedText.replace(phraseRegex, replacement);
           }
         }
-        // علامات الشك أو الأخطاء البسيطة
-        const doubtRegex = /\[DOUBT\](.*?)\[\/DOUBT\]/g;
-        while ((match = doubtRegex.exec(analysisOutput)) !== null) {
-          const phrase = match[1].trim();
-          if (phrase) {
-            const replacement = `<span class="highlight-doubt">${phrase}</span>`;
-            const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-            highlightedText = highlightedText.replace(phraseRegex, replacement);
-          }
-        }
         return highlightedText;
       };
 
-      // توليد شرح تفصيلي للاختلافات مع أيقونات توضيحية
+      // توليد شرح تفصيلي للاختلافات مع أيقونات بسيطة
       const generateExplanation = (sourceText, analysisOutput) => {
         let steps = [];
         let match;
-        const iconMissing = `<i class="fas fa-exclamation-triangle 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 iconMissing = `<i class="fas fa-exclamation-triangle mr-1"></i>`;
+        const iconNumber = `<i class="fas fa-hashtag mr-1"></i>`;
+        const iconMeaning = `<i class="fas fa-info-circle 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>`);
+            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>`);
+            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>`);
+            steps.push(`<li>${iconMeaning} في السطر ${lineNum}، اختلاف المعنى: <span class="highlight-meaning">${phrase}</span></li>`);
           }
         }
         if (steps.length === 0) {
-          return `<p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>`;
+          return `<p><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>`;
         }
         return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`;
       };
 
-      /* =======================================
-         دالة اكتشاف الكلمات المفقودة (غير المُترجمة)
-         يتم التطبيع (إزالة علامات الترقيم وتحويل الأحرف لحروف صغيرة)
-         ثم مقارنة كلمات المصدر مع كلمات الهدف
-      ======================================= */
-      const detectMissingWords = (source, target) => {
-        // دالة لتطبيع النص (إزالة علامات الترقيم وتحويل النص لحروف صغيرة)
-        const normalize = text =>
-          text.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()؟،؛"']/g, '').toLowerCase();
-        const sourceTokens = normalize(source).split(/\s+/).filter(word => word);
-        const targetTokens = normalize(target).split(/\s+/).filter(word => word);
-        const targetSet = new Set(targetTokens);
-        // الكلمات المفقودة هي التي تظهر في المصدر وغير موجودة في الهدف
-        const missing = sourceTokens.filter(word => !targetSet.has(word));
-        // إزالة التكرارات إن وُجدت
-        return [...new Set(missing)];
-      };
-
-      /* ===============================
+      /* -------------------------------
          دالة معالجة الملفات (PDF و DOCX)
-      =============================== */
+      ------------------------------- */
       const processFile = async file => {
         let text = "";
         try {
@@ -458,9 +391,9 @@
         return text;
       };
 
-      /* ===============================
+      /* -------------------------------
          التعامل مع رفع الملفات وإدخال النصوص
-      =============================== */
+      ------------------------------- */
       const processFileInput = (inputId, targetTextAreaId, errorMsg) => {
         document.getElementById(inputId)?.addEventListener('change', async (event) => {
           const file = event.target.files[0];
@@ -482,9 +415,9 @@
       processFileInput('targetFile', 'targetText', 'خطأ في معالجة ملف الهدف');
       processFileInput('sourceExtraFile', 'sourceExtraText', 'خطأ في معالجة ملف المصدر الإضافي');
 
-      /* ===============================
+      /* -------------------------------
          دالة عرض الأخطاء
-      =============================== */
+      ------------------------------- */
       const addError = (message, type = 'error') => {
         const errorsList = document.getElementById('errorsList');
         if (!errorsList) return;
@@ -497,9 +430,9 @@
         errorsList.appendChild(errorDiv);
       };
 
-      /* ===============================
+      /* -------------------------------
          التعامل مع عملية التحليل والمقارنة
-      =============================== */
+      ------------------------------- */
       document.getElementById('submitBtn').addEventListener('click', async () => {
         const sourceText = document.getElementById('sourceText').value;
         const targetText = document.getElementById('targetText').value;
@@ -558,6 +491,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";
@@ -567,6 +501,7 @@
             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);
@@ -574,17 +509,6 @@
             const explanationHTML = generateExplanation(sourceText, analysisOutput);
             document.getElementById('explanationText').innerHTML = explanationHTML;
           }
-
-          // اكتشاف الكلمات المفقودة التي لم تُترجم من المصدر (تظهر في المصدر وغير موجودة في الهدف)
-          const missingWords = detectMissingWords(sourceText, targetText);
-          if (missingWords.length > 0) {
-            const missingWordsSection = document.getElementById('missingWordsSection');
-            const missingWordsList = document.getElementById('missingWordsList');
-            missingWordsList.innerHTML = `<ul class="list-disc ml-4">${missingWords.map(word => `<li>${word}</li>`).join('')}</ul>`;
-            missingWordsSection.classList.remove('hidden');
-          } else {
-            document.getElementById('missingWordsSection').classList.add('hidden');
-          }
         } catch (error) {
           document.getElementById('errorsList').innerHTML = '';
           addError(`خطأ في التحليل: ${error.message}`);