Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 13

Commit

48b50f8

verified ·

1 Parent(s): 52b6aeb

Update index.html

Browse files

Files changed (1) hide show

index.html +127 -323

index.html CHANGED Viewed

@@ -4,9 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>نظام المقارنة والتحليل المتقدم - شركة موندو لينجوا</title>
-  <!-- استيراد مكتبات Tailwind وFont Awesome وMammoth -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
     /* ================================
@@ -35,14 +34,14 @@
        تنسيقات النص والتظليل
     ================================= */
     .text-comparison { line-height: 1.8; white-space: pre-wrap; }
-    /* اختلافات بسيطة (نوع MINOR) */
     .highlight-minor {
       background-color: #FFF9C4; /* أصفر فاتح */
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
-    /* جمل مفقودة بالكامل (نوع MISSING) */
     .highlight-missing {
       background-color: #FECACA; /* أحمر فاتح */
       color: #B91C1C;
@@ -50,7 +49,7 @@
       border-radius: 3px;
       font-style: italic;
     }
-    /* جمل ناقصة (نوع PARTIAL) */
     .highlight-partial {
       background-color: #FFCDD2; /* أحمر باهت */
       color: #B91C1C;
@@ -58,9 +57,9 @@
       border-radius: 3px;
       font-weight: bold;
     }
-    /* تظليل الاختلافات الأخرى (أرقام، تواريخ، اختلاف معاني، علامات شك) */
     .highlight-number {
-      background-color: #FDE68A; /* أصفر */
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
@@ -72,7 +71,7 @@
       font-weight: bold;
     }
     .highlight-doubt {
-      background-color: #DBEAFE; /* أزرق */
       color: #1E3A8A;
       padding: 0 4px;
       border-radius: 3px;
@@ -113,9 +112,7 @@
     /* ================================
        شاشة الأخطاء والنتائج
     ================================= */
-    #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">
@@ -127,7 +124,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>
@@ -249,251 +246,100 @@
   </div>
   <!-- ================================
-       جافا سكريبت: الوظائف والتحليل
   ================================= -->
   <script>
-    // إعدادات الـ API والبرومبت مع تعليمات استخدام العلامات الجديدة
-    const API_URL = 'https://api.deepseek.com/chat/completions';
-    const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
-    const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة التقنية وتحليل النصوص بدقة عالية.
-مهمتك مقارنة النص المصدر والنص الهدف واستخراج كافة المشاكل وفقاً للأنواع التالية:
-1. إذا كانت الجملة موجودة في النصين ولكن بها اختلاف بسيط (مثال: اختلاف كلمة أو تاريخ أو معنى بسيط) فاستخدم العلامة [MINOR] ... [/MINOR].
-2. إذا كانت الجملة مختلفة تماماً (أي بها 3 اختلافات أو أكثر) فتعتبر مفقودة في النص الهدف، فاستخدم العلامة [MISSING] ... [/MISSING].
-3. إذا كانت الجملة موجودة في النص المصدر ولكنها ناقصة أو بها كلمات مفقودة في النص الهدف، فاستخدم العلامة [PARTIAL] ... [/PARTIAL].
-يُرجى إظهار العلامات في النص المصدر لتبيان مكان الخطأ.
-النص المصدر:
-{source}
-النص الهدف:
-{target}`;
-    // دوال مساعدة للتعامل مع النصوص
-    function countWords(text) {
-      return text.trim().split(/\s+/).filter(word => word !== "").length;
     }
-    function escapeRegExp(string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
-    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) {
-      const index = text.indexOf(substring);
-      if (index === -1) return "غير محدد";
-      return text.substring(0, index).split("\n").length;
     }
-    // دالة تطبيق التظليل على النص المصدر باستخدام العلامات الجديدة
-    function applyHighlights(originalText, analysisOutput) {
-      let highlightedText = originalText;
-      let match;
-      // اختلاف بسيط [MINOR]
-      const minorRegex = /\[MINOR\](.*?)\[\/MINOR\]/g;
-      while ((match = minorRegex.exec(analysisOutput)) !== null) {
-        const phrase = match[1].trim();
-        if (phrase) {
-          const replacement = `<span class="highlight-minor">${phrase}</span>`;
-          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-          highlightedText = highlightedText.replace(phraseRegex, replacement);
-        }
-      }
-      // جملة مفقودة [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 phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-          highlightedText = highlightedText.replace(phraseRegex, replacement);
-        }
-      }
-      // جملة ناقصة [PARTIAL]
-      const partialRegex = /\[PARTIAL\](.*?)\[\/PARTIAL\]/g;
-      while ((match = partialRegex.exec(analysisOutput)) !== null) {
-        const phrase = match[1].trim();
-        if (phrase) {
-          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();
-        if (phrase) {
-          const replacement = `<span class="highlight-meaning">${phrase}</span>`;
-          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
-          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;
     }
-    // دالة توليد شرح تفصيلي للاختلافات باستخدام العلامات الجديدة مع أيقونات توضيحية
-    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 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>`;
-      // استخراج اختلاف بسيط [MINOR]
-      const minorRegex2 = /\[MINOR\](.*?)\[\/MINOR\]/g;
-      while ((match = minorRegex2.exec(analysisOutput)) !== null) {
-        const phrase = match[1].trim();
-        if(phrase) {
-          const lineNum = getLineNumber(sourceText, phrase);
-          steps.push(`<li>${iconMinor} في السطر ${lineNum}: اختلاف بسيط في الجملة <span class="highlight-minor">${phrase}</span>.</li>`);
-        }
-      }
-      // استخراج جملة مفقودة [MISSING]
-      const missingRegex2 = /\[MISSING\](.*?)\[\/MISSING\]/g;
-      while ((match = missingRegex2.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>`);
-        }
-      }
-      // استخراج جملة ناقصة [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 numberRegex2 = /<([^<>]+)>/g;
-      while ((match = numberRegex2.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 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 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>`;
       }
-      return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`;
     }
-    // دالة معالجة الملفات (PDF و DOCX)
-    async function processFile(file) {
-      let text = "";
-      if (file.type === 'application/pdf') {
-        const form = new FormData();
-        form.append('image', file);
-        const response = await fetch('https://demo.api4ai.cloud/ocr/v1/results', {
-          method: 'POST',
-          body: form,
-          headers: { 'A4A-CLIENT-APP-ID': 'sample' }
-        });
-        const data = await response.json();
-        text = data.results[0].entities[0].objects[0].entities[0].text;
-      } else if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-        const arrayBuffer = await file.arrayBuffer();
-        const result = await mammoth.extractRawText({ arrayBuffer });
-        text = result.value;
-      } else {
-        throw new Error('نوع الملف غير مدعوم');
-      }
-      return text;
     }
-    // رفع الملفات وإدخال النصوص
-    document.getElementById('sourceFile')?.addEventListener('change', async (event) => {
-      const file = event.target.files[0];
-      if (!file) return;
-      document.getElementById('processStatus').classList.remove('hidden');
-      try {
-        const text = await processFile(file);
-        document.getElementById('sourceText').value = text;
-      } catch (error) {
-        console.error('Error processing source file:', error);
-        addError('خطأ في معالجة ملف المصدر');
-      } finally {
-        document.getElementById('processStatus').classList.add('hidden');
-      }
-    });
-    document.getElementById('targetFile')?.addEventListener('change', async (event) => {
-      const file = event.target.files[0];
-      if (!file) return;
-      document.getElementById('processStatus').classList.remove('hidden');
-      try {
-        const text = await processFile(file);
-        document.getElementById('targetText').value = text;
-      } catch (error) {
-        console.error('Error processing target file:', error);
-        addError('خطأ في معالجة ملف الهدف');
-      } finally {
-        document.getElementById('processStatus').classList.add('hidden');
-      }
-    });
-    document.getElementById('sourceExtraFile')?.addEventListener('change', async (event) => {
-      const file = event.target.files[0];
-      if (!file) return;
-      document.getElementById('processStatus').classList.remove('hidden');
-      try {
-        const text = await processFile(file);
-        document.getElementById('sourceExtraText').value = text;
-      } catch (error) {
-        console.error('Error processing extra source file:', error);
-        addError('خطأ في معالجة ملف المصدر الإضافي');
-      } finally {
-        document.getElementById('processStatus').classList.add('hidden');
-      }
-    });
-    // دالة عرض الأخطاء والرسائل
     function addError(message, type = 'error') {
       const errorsList = document.getElementById('errorsList');
       if (!errorsList) return;
@@ -506,8 +352,8 @@
       errorsList.appendChild(errorDiv);
     }
-    // معالجة عملية التحليل عند الضغط على زر "تحليل ومراجعة النصوص"
-    document.getElementById('submitBtn').addEventListener('click', async () => {
       const sourceText = document.getElementById('sourceText').value;
       const targetText = document.getElementById('targetText').value;
       document.getElementById('errorsList').innerHTML = '';
@@ -519,95 +365,53 @@
         return;
       }
-      const sourceWordCount = countWords(sourceText);
-      const targetWordCount = countWords(targetText);
       if (sourceWordCount !== targetWordCount) {
         addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount})`, 'warning');
       }
-      try {
-        const progressDiv = document.createElement('div');
-        progressDiv.className = "bg-indigo-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-indigo-600 rounded-full border-t-transparent mr-3"></div>
-                                     <span>جارٍ التحليل...</span>
-                                   </div>`;
-        document.getElementById('errorsList').appendChild(progressDiv);
-        const prompt = ANALYSIS_PROMPT
-                        .replace("{source}", sourceText)
-                        .replace("{target}", targetText);
-        const payload = {
-          model: "deepseek-chat",
-          messages: [
-            { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص بدقة عالية." },
-            { role: "user", content: prompt }
-          ],
-          temperature: 0.3,
-          max_tokens: 2048,
-          stream: false
-        };
-        const response = await fetch(API_URL, {
-          method: 'POST',
-          headers: {
-            'Authorization': 'Bearer ' + API_KEY,
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify(payload)
-        });
-        if (!response.ok) {
-          throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
-        }
-        const data = await response.json();
-        const analysisOutput = data.choices[0].message.content.trim();
-        progressDiv.remove();
-        // إذا كانت النصوص متطابقة تماماً
-        if (analysisOutput.includes('[MATCH]')) {
-          const checkDiv = document.createElement('div');
-          checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
-          checkDiv.innerHTML = `<i class="fas fa-check-circle mr-2"></i> <span>النصوص متطابقة تماماً</span>`;
-          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);
-          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
-          // عرض النص الهدف بدون تظليل
-          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
-          // توليد شرح تفصيلي لكل مشكلة تم استخراجها باستخدام العلامات الجديدة
-          const explanationHTML = generateExplanation(sourceText, analysisOutput);
-          document.getElementById('explanationText').innerHTML = explanationHTML;
-          // عرض ملخص للإختلافات بشكل عام إن وُجدت
-          const numDiffCount = (analysisOutput.match(/<([^<>]+)>/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 (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 (minorDiffCount) summaryText += `<li>اختلاف بسيط: ${minorDiffCount}</li>`;
-            if (missingDiffCount) summaryText += `<li>جمل مفقودة: ${missingDiffCount}</li>`;
-            if (partialDiffCount) summaryText += `<li>جمل ناقصة: ${partialDiffCount}</li>`;
-            if (numDiffCount) summaryText += `<li>اختلاف في الأرقام/التواريخ: ${numDiffCount}</li>`;
-            if (meaningDiffCount) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
-            if (doubtDiffCount) summaryText += `<li>علامات الشك: ${doubtDiffCount}</li>`;
-            summaryText += '</ul>';
-            summaryDiv.innerHTML = summaryText;
-            document.getElementById('errorsList').appendChild(summaryDiv);
-          }
-        }
-      } catch (error) {
-        document.getElementById('errorsList').innerHTML = '';
-        addError(`خطأ في التحليل: ${error.message}`);
       }
     });
   </script>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>نظام المقارنة والتحليل المتقدم - شركة موندو لينجوا</title>
+  <!-- استيراد مكتبات Tailwind وFont Awesome -->
   <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>
     /* ================================
        تنسيقات النص والتظليل
     ================================= */
     .text-comparison { line-height: 1.8; white-space: pre-wrap; }
+    /* اختلاف بسيط */
     .highlight-minor {
       background-color: #FFF9C4; /* أصفر فاتح */
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
+    /* جملة مفقودة بالكامل */
     .highlight-missing {
       background-color: #FECACA; /* أحمر فاتح */
       color: #B91C1C;
       border-radius: 3px;
       font-style: italic;
     }
+    /* جملة ناقصة */
     .highlight-partial {
       background-color: #FFCDD2; /* أحمر باهت */
       color: #B91C1C;
       border-radius: 3px;
       font-weight: bold;
     }
+    /* تظليل إضافي للأرقام والتواريخ واختلاف المعنى وعلامات الشك */
     .highlight-number {
+      background-color: #FDE68A;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
       font-weight: bold;
     }
     .highlight-doubt {
+      background-color: #DBEAFE;
       color: #1E3A8A;
       padding: 0 4px;
       border-radius: 3px;
     /* ================================
        شاشة الأخطاء والنتائج
     ================================= */
+    #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>
   </div>
   <!-- ================================
+       جافا سكريبت: التحليل المحلي للمقارنة
   ================================= -->
   <script>
+    // دالة تقسيم النص إلى جمل (مع التأكد من انتهاء كل جملة بنقطة)
+    function splitSentences(text) {
+      // تقسيم النص بواسطة النقطة (يمكن تحسينها بتقسيم علامات الاستفهام والتعجب)
+      return text.split('.').map(s => s.trim()).filter(s => s.length > 0).map(s => s + '.');
     }
+    // دالة لحساب درجة التشابه بين جملتين باستخدام تشابه جاكارد (Jaccard similarity)
+    function sentenceSimilarity(s1, s2) {
+      const words1 = s1.toLowerCase().split(/\s+/);
+      const words2 = s2.toLowerCase().split(/\s+/);
+      const set1 = new Set(words1);
+      const set2 = new Set(words2);
+      const intersection = new Set([...set1].filter(x => set2.has(x)));
+      const union = new Set([...set1, ...set2]);
+      return intersection.size / union.size;
     }
+    // دالة مقارنة الجمل بين المصدر والهدف
+    function compareSentences(source, target) {
+      const sourceSentences = splitSentences(source);
+      const targetSentences = splitSentences(target);
+      let results = [];
+      sourceSentences.forEach(sentence => {
+        let maxSim = 0;
+        targetSentences.forEach(tSentence => {
+          const sim = sentenceSimilarity(sentence, tSentence);
+          if (sim > maxSim) maxSim = sim;
+        });
+        let type = 'match';
+        // تحديد النوع بناءً على درجة التشابه
+        if(maxSim < 0.4) {
+          type = 'MISSING';
+        } else if(maxSim < 0.8) {
+          type = 'PARTIAL';
+        } else if(maxSim < 0.95) {
+          type = 'MINOR';
         }
+        results.push({ sentence, similarity: maxSim, type });
+      });
+      return results;
     }
+    // دالة بناء النص المصدر مع التظليل بناءً على النتائج
+    function buildAnnotatedText(results) {
+      return results.map((item, i) => {
+        let annotated = item.sentence;
+        if(item.type === 'MINOR') {
+          annotated = `<span class="highlight-minor">${annotated} [MINOR]</span>`;
+        } else if(item.type === 'PARTIAL') {
+          annotated = `<span class="highlight-partial">${annotated} [PARTIAL]</span>`;
+        } else if(item.type === 'MISSING') {
+          annotated = `<span class="highlight-missing">${annotated} [MISSING]</span>`;
         }
+        return `<div class="line-item"><span class="line-number">${i+1}:</span> <span class="line-text">${annotated}</span></div>`;
+      }).join('');
     }
+    // دالة توليد شرح تفصيلي لكل اختلاف
+    function generateExplanation(results) {
       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>`;
+      let explanations = results.map((item, i) => {
+        if(item.type === 'match') return "";
+        let explanation = "";
+        if(item.type === 'MINOR') {
+          explanation = `${iconMinor} السطر ${i+1}: اختلاف بسيط (درجة التشابه: ${(item.similarity*100).toFixed(1)}%)`;
+        } else if(item.type === 'PARTIAL') {
+          explanation = `${iconPartial} السطر ${i+1}: الجملة ناقصة أو بها كلمات مفقودة (درجة التشابه: ${(item.similarity*100).toFixed(1)}%)`;
+        } else if(item.type === 'MISSING') {
+          explanation = `${iconMissing} السطر ${i+1}: الجملة مفقودة بالكامل في النص ال��دف (درجة التشابه: ${(item.similarity*100).toFixed(1)}%)`;
         }
+        return `<li>${explanation}</li>`;
+      }).filter(exp => exp !== "");
+      if(explanations.length === 0) {
         return `<p class="text-green-700"><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>`;
       }
+      return `<ol class="list-decimal ml-6 space-y-2">${explanations.join('')}</ol>`;
     }
+    // دالة عرض النص الهدف مع تقسيم الجمل (بدون تظليل)
+    function buildTargetText(text) {
+      return splitSentences(text).map((sentence, i) => {
+        return `<div class="line-item"><span class="line-number">${i+1}:</span> <span class="line-text">${sentence}</span></div>`;
+      }).join('');
     }
+    // دالة عرض الأخطاء والرسائل (نفس الدالة السابقة)
     function addError(message, type = 'error') {
       const errorsList = document.getElementById('errorsList');
       if (!errorsList) return;
       errorsList.appendChild(errorDiv);
     }
+    // عند الضغط على زر التحليل يتم إجراء المقارنة وعرض النتائج
+    document.getElementById('submitBtn').addEventListener('click', () => {
       const sourceText = document.getElementById('sourceText').value;
       const targetText = document.getElementById('targetText').value;
       document.getElementById('errorsList').innerHTML = '';
         return;
       }
+      // تنبيه إذا اختلف عدد الكلمات (تحذير بسيط)
+      const sourceWordCount = sourceText.trim().split(/\s+/).filter(w => w).length;
+      const targetWordCount = targetText.trim().split(/\s+/).filter(w => w).length;
       if (sourceWordCount !== targetWordCount) {
         addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount})`, 'warning');
       }
+      // إظهار مؤشر التحليل
+      const progressDiv = document.createElement('div');
+      progressDiv.className = "bg-indigo-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-indigo-600 rounded-full border-t-transparent mr-3"></div>
+                                   <span>جارٍ التحليل...</span>
+                                 </div>`;
+      document.getElementById('errorsList').appendChild(progressDiv);
+      // إجراء مقارنة الجمل
+      const results = compareSentences(sourceText, targetText);
+      // بناء النص المصدر المُعلّم
+      const annotatedSource = buildAnnotatedText(results);
+      document.getElementById('sourceTextReview').innerHTML = annotatedSource;
+      // عرض النص الهدف كما هو مع تقسيم الجمل
+      document.getElementById('targetTextReview').innerHTML = buildTargetText(targetText);
+      // بناء الشرح التفصيلي للاختلافات
+      const explanationHTML = generateExplanation(results);
+      document.getElementById('explanationText').innerHTML = explanationHTML;
+      // إزالة مؤشر التحليل
+      progressDiv.remove();
+      // عرض ملخص الاختلافات إن وُجدت
+      const minorCount = results.filter(r => r.type === 'MINOR').length;
+      const partialCount = results.filter(r => r.type === 'PARTIAL').length;
+      const missingCount = results.filter(r => r.type === 'MISSING').length;
+      if(minorCount || partialCount || missingCount) {
+        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(minorCount) summaryText += `<li>اختلاف بسيط: ${minorCount}</li>`;
+        if(partialCount) summaryText += `<li>جمل ناقصة: ${partialCount}</li>`;
+        if(missingCount) summaryText += `<li>جمل مفقودة: ${missingCount}</li>`;
+        summaryText += '</ul>';
+        summaryDiv.innerHTML = summaryText;
+        document.getElementById('errorsList').appendChild(summaryDiv);
       }
     });
   </script>