Spaces:

joermd
/

translate

Running

File size: 27,187 Bytes

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-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">
  <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%; }
      100% { background-position: 0% 50%; }
    }
    .animate-gradient {
      background-size: 200% 200%;
      animation: gradient 15s ease infinite;
    }
    .transition-all { transition: all 0.3s ease-in-out; }
    .animate-scale { transition: transform 0.2s ease-in-out; }
    .animate-scale:hover { transform: scale(1.02); }
    .file-drop-active { border-color: #3B82F6; background-color: rgba(59,130,246,0.1); }
    .text-comparison { line-height: 1.8; white-space: pre-wrap; }
    /* تمييز اختلاف الأرقام */
    .highlight-number {
      background-color: #FDE68A;
      padding: 0 2px;
      border-radius: 2px;
    }
    /* تمييز النصوص الناقصة */
    .highlight-missing {
      background-color: #BFDBFE;
      padding: 0 2px;
      border-radius: 2px;
    }
    /* تمييز اختلاف المعنى */
    .highlight-meaning {
      color: #EF4444;
      font-weight: bold;
    }
    /* تقسيم شاشة المعاينة إلى جزئين */
    .split-view {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
    }
    .result-section {
      border-top: 3px solid #E0E7FF;
      margin-top: 2rem;
      padding-top: 2rem;
    }
    /* تنسيق كل سطر مع رقم السطر */
    .line-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 0.5rem;
    }
    .line-number {
      width: 30px;
      font-weight: bold;
      color: #4B5563;
      flex-shrink: 0;
    }
    .line-text {
      flex: 1;
    }
    /* تحسينات إضافية للواجهة */
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
      transform: translateY(-2px);
    }
    .pulse-animation {
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
      100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 min-h-screen">
  <div class="min-h-screen pb-12">
    <!-- Header -->
    <header class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 animate-gradient text-white py-10 mb-10 shadow-xl">
      <div class="max-w-6xl mx-auto px-4">
        <h1 class="text-5xl font-bold text-center mb-4 animate-scale">نظام شركة موندو لينجوا</h1>
        <p class="text-center text-xl text-blue-100 opacity-90">مقارنة وتحليل النصوص – المصدر مرجع أساسي</p>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-4">
      <!-- قسم رفع الملفات -->
      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center border-b pb-3">
          <i class="fas fa-file-upload text-blue-600 ml-2"></i> تحميل الملفات
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- ملف السورس -->
          <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" 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>
            </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" 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>
            </label>
          </div>
        </div>
        <div id="processStatus" class="hidden mt-4">
          <div class="flex items-center justify-center space-x-3 bg-blue-100 rounded-xl p-4">
            <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div>
            <span class="text-lg text-blue-700">جارٍ معالجة الملف...</span>
          </div>
        </div>
      </div>

      <!-- إدخال النصوص يدويًا -->
      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
        <div class="space-y-6">
          <!-- النص المصدر -->
          <div class="group">
            <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>
      </div>

      <!-- زر التحليل -->
      <button id="submitBtn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-xl shadow-lg hover:shadow-xl mb-8 pulse-animation">
        <div class="flex items-center justify-center">
          <i class="fas fa-sync-alt ml-2"></i> تحليل النصوص
        </div>
      </button>

      <!-- شاشة نتائج التحليل (المعاينة المقسمة) -->
      <div id="resultSection" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
          <i class="fas fa-search text-green-600 ml-2"></i> نتائج التحليل والمقارنة
        </h2>
        <!-- هنا يتم عرض الأخطاء والاختلافات فقط -->
        <div id="errorsList" class="space-y-3 mb-6"></div>
        <div class="result-section split-view">
          <!-- عرض النص المصدر بعد التعليم مع تقسيمه إلى أسطر -->
          <div>
            <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
              <i class="fas fa-file-alt text-blue-600 ml-2"></i> النص المصدر (مع التعليم)
            </h4>
            <div id="sourceTextReview" class="bg-blue-50 rounded-xl p-6 min-h-[200px] border-2 border-blue-100 text-comparison"></div>
          </div>
          <!-- عرض النص الهدف بعد التعليم مع تقسيمه إلى أسطر -->
          <div>
            <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
              <i class="fas fa-file-alt text-purple-600 ml-2"></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>
        </div>
      </div>

      <!-- صندوق شرح الاختلافات -->
      <div id="explanationBox" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
          <i class="fas fa-info-circle text-green-600 ml-2"></i> شرح الاختلافات
        </h2>
        <div id="explanationText" class="text-lg text-gray-700"></div>
      </div>
    </main>
  </div>

  <!-- JavaScript -->
  <script>
    // API URL ومفتاح API (تم التحديث لاستخدام DeepSeek API)
    const API_URL = 'https://api.deepseek.com/chat/completions';
    const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';

    /* 
      الـ prompt المحسن:
      أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
      
      1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
      2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
      3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
      
      إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط. تأكد اكثر من مرة من التطابق اذا كان كامل
      
      اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
      اولا راجع الارقام اولا ثم اجعل في الناتج النهائي جزء خاص بالارقام فقط و ثانيا : راجع السياق والمعنى العام والاجمالي للنصوص لمعرفة اذا وجد نقص  او نسيان لجملة معينة او عدم ترجمتها
       ثم راجع المحتوى كاملا وانا ارد في الشرح ان  تقوم بتقسيمه الى ثلاث عناوين اول عنوان وهو ناتج مراجعة الارقام وثانيا ناتج مراجعة النصوص في السياق وثالثا المحتوى كاملا
      النص المصدر:
      {source}
      
      النص الهدف:
      {target}
      
      أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.
    */
    const ANALYSIS_PROMPT = `أنت خبير في مراجعة الترجمة، ومتخصص في اكتشاف الأخطاء والنصوص غير المترجمة الموجودة في النص المصدر لكنها مفقودة في النص الهدف. مهمتك هي مقارنة النصين بدقة عالية واكتشاف الفروقات التالية فقط:

اختلافات الأرقام: ضع الرقم المختلف بين علامتي < و >
النصوص المفقودة: إذا كان هناك نص موجود في المصدر لكنه غير موجود في الهدف، ضع النص المفقود بين __ و __
اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
قم بتحديد النصوص التالفة والمنسية ومختلفة المعنى للعلم النصوص بها الكثير من هذا النوع من الاختلافات 
آلية المراجعة:
✅ ابدأ بمراجعة الأرقام أولًا، وحدد أي اختلافات فيها.
✅ ثم راجع السياق والمعنى العام لمعرفة ما إذا كانت هناك جملة مفقودة أو غير مترجمة أو تغيير في المعنى.
✅ راجع النص بالكامل أكثر من مرة للتأكد من التطابق التام بين المصدر والهدف.
✅استخرج الاخطاء الموجودة بالفعل وايضا الاختلافات الموجودة بالفعل وايضا النصوص المنسية الموجودة في المصدر وفير موجودة في الهدف 
✅النص الموجود في المصدر وغير موجود في الهدف قم بتحديده بالكامل من اول ما نقص الى الاخر في المصدر 
هيكلة النتائج:
🟢 قسم الناتج النهائي إلى ثلاثة أجزاء:

ناتج مراجعة الأرقام (يحتوي فقط على الأرقام المختلفة)
ناتج مراجعة النصوص في السياق (يحتوي على الجمل المفقودة والاختلافات المعنوية)
المحتوى بالكامل مع التعديلات المظللة
📌 ملاحظة: حدد فقط الأخطاء والفروقات دون أي تعديلات إضافية، واعتبر النص المصدر هو المرجع الأساسي.

النص المصدر:
{source}

النص الهدف:
{target}`;

    // دالة لحساب عدد الكلمات
    function countWords(text) {
      return text.trim().split(/\s+/).filter(word => word !== "").length;
    }

    // دالة لمساعدة في الهروب من أحرف regex الخاصة
    function escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    // دالة تطبيق التمييز على النص باستخدام العلامات في نتيجة التحليل
    function applyHighlights(originalText, analysisOutput) {
      let highlightedText = originalText;
      // تمييز اختلافات الأرقام
      const numberRegex = /<([^<>]+)>/g;
      let match;
      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 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);
        }
      }
      return highlightedText;
    }

    // دالة تقسيم النص إلى أسطر مع عرض رقم السطر
    function splitIntoLines(text) {
      const lines = text.split('\n');
      let html = "";
      lines.forEach((line, index) => {
        html += `<div class="line-item"><span class="line-number">${index + 1}:</span> <span class="line-text">${line}</span></div>`;
      });
      return html;
    }

    // دالة للحصول على رقم السطر لظهور عبارة معينة في النص
    function getLineNumber(text, substring) {
      const index = text.indexOf(substring);
      if (index === -1) return "غير محدد";
      return text.substring(0, index).split("\n").length;
    }

    // دالة توليد شرح الاختلافات
    function generateExplanation(sourceText, analysisOutput) {
      let explanation = "";
      // شرح النصوص الناقصة
      const missingRegex = /__(.*?)__/g;
      let match;
      while ((match = missingRegex.exec(analysisOutput)) !== null) {
        const phrase = match[1].trim();
        if (phrase) {
          const lineNum = getLineNumber(sourceText, phrase);
          explanation += `<p>في السطر ${lineNum}: النص "${phrase}" مفقود في النص الهدف.</p>`;
        }
      }
      // شرح اختلاف الأرقام
      const numberRegex = /<([^<>]+)>/g;
      while ((match = numberRegex.exec(analysisOutput)) !== null) {
        const phrase = match[1].trim();
        if (phrase) {
          const lineNum = getLineNumber(sourceText, phrase);
          explanation += `<p>في السطر ${lineNum}: اختلاف في الرقم "${phrase}".</p>`;
        }
      }
      // شرح اختلاف المعنى
      const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
      while ((match = meaningRegex.exec(analysisOutput)) !== null) {
        const phrase = match[1].trim();
        if (phrase) {
          const lineNum = getLineNumber(sourceText, phrase);
          explanation += `<p>في السطر ${lineNum}: اختلاف في المعنى: "${phrase}".</p>`;
        }
      }
      if (explanation === "") {
        explanation = `<p>[MATCH] النصوص متطابقة تماماً.</p>`;
      }
      return explanation;
    }

    // دالة موحدة لمعالجة الملفات (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');
      }
    });

    // دالة عرض الأخطاء أو الرسائل
    function addError(message, type = 'error') {
      const errorsList = document.getElementById('errorsList');
      if (!errorsList) return;
      const errorDiv = document.createElement('div');
      errorDiv.className = `p-4 rounded-xl ${type === 'error' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700'}`;
      errorDiv.innerHTML = `<div class="flex items-center">
                              <i class="fas fa-${type === 'error' ? 'exclamation-circle' : 'info-circle'} ml-2 text-${type === 'error' ? 'red' : 'yellow'}-500"></i>
                              <span>${message}</span>
                            </div>`;
      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 = '';
      document.getElementById('resultSection').classList.remove('hidden');
      document.getElementById('explanationBox').classList.remove('hidden');
      
      if (!sourceText || !targetText) {
        addError('يرجى إدخال كلا النصين المصدر والهدف');
        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-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.3,
          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();
        
        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(sourceText);
          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
          document.getElementById('explanationText').innerHTML = `<p>[MATCH] لا توجد اختلافات.</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 meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
          if (numDiffCount > 0 || missingDiffCount > 0 || meaningDiffCount > 0) {
            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 mr-6 space-y-1">';
            if (numDiffCount > 0) summaryText += `<li>اختلاف في الأرقام: ${numDiffCount}</li>`;
            if (missingDiffCount > 0) summaryText += `<li>نصوص مفقودة: ${missingDiffCount}</li>`;
            if (meaningDiffCount > 0) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
            summaryText += '</ul>';
            summaryDiv.innerHTML = summaryText;
            document.getElementById('errorsList').appendChild(summaryDiv);
          }
        }
        
      } catch (error) {
        document.getElementById('errorsList').innerHTML = '';
        addError(`خطأ في التحليل: ${error.message}`);
      }
    });
  </script>
</body>
</html>