Spaces:

joermd
/

translate

Running

File size: 40,280 Bytes

f7b6faf

<!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>
  <!-- استيراد مكتبات 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>
    /* ================================
       تنسيقات الحركات والتأثيرات
    ================================= */
    @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); }
    .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); }
    }

    /* ================================
       تنسيقات النصوص والتحديد
    ================================= */
    .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: #BFDBFE;
      padding: 0 4px;
      border-radius: 3px;
      font-style: italic;
    }
    .highlight-meaning {
      background-color: #fecaca;
      color: #B91C1C;
      padding: 0 4px;
      border-radius: 3px;
      font-weight: bold;
    }

    /* ================================
       تنسيق عرض السطور في المعاينة
    ================================= */
    .split-view {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
    }
    .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(156,39,176,0.1), 0 10px 10px -5px rgba(156,39,176,0.04);
      transform: translateY(-2px);
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
  <div class="min-h-screen pb-12">
    <!-- ============ رأس الصفحة ============ -->
    <header class="bg-gradient-to-r from-indigo-700 via-purple-700 to-pink-700 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>

    <!-- ============ شرح البرنامج التعريفي ============ -->
    <section id="programExplanation" class="max-w-6xl mx-auto px-4 mb-8">
      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100">
        <p class="text-lg text-gray-800">
          هذا البرنامج مصمم لمقارنة النصوص التقنية وتحليلها بدقة عالية، مع تحديد الاختلافات في الأرقام، النصوص المفقودة واختلافات المعنى. يمكنك أيضًا التحقق مما إذا تم استخدام قاعدة المصطلحات أثناء التحليل وتنزيل تقرير مفصل بصيغة إكسيل أو وورد.
        </p>
      </div>
    </section>

    <!-- ============ المحتوى الرئيسي ============ -->
    <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-indigo-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-indigo-300 rounded-xl p-8 text-center hover:border-indigo-500 transition-colors duration-300 bg-indigo-50 hover:bg-indigo-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-indigo-500 mb-4"></i>
              <span class="text-lg text-indigo-600 group-hover:text-indigo-700">ملف السورس</span>
            </label>
          </div>
          <!-- ملف التارجت -->
          <div class="group border-2 border-dashed border-pink-300 rounded-xl p-8 text-center hover:border-pink-500 transition-colors duration-300 bg-pink-50 hover:bg-pink-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-pink-500 mb-4"></i>
              <span class="text-lg text-pink-600 group-hover:text-pink-700">ملف التارجت</span>
            </label>
          </div>
        </div>
        <div id="processStatus" class="hidden mt-4">
          <div class="flex items-center justify-center space-x-3 bg-indigo-100 rounded-xl p-4">
            <div class="animate-spin h-8 w-8 border-4 border-indigo-600 rounded-full border-t-transparent"></div>
            <span class="text-lg text-indigo-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-indigo-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-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 flex items-center">
              <i class="fas fa-language text-pink-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-pink-200 focus:border-pink-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
          </div>
          <!-- خيار استخدام قاعدة المصطلحات -->
          <div class="mt-4 flex items-center">
            <input type="checkbox" id="terminologyCheck" class="mr-2">
            <label for="terminologyCheck" class="text-lg text-gray-700">استخدام قاعدة المصطلحات</label>
          </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">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center border-b pb-3">
          <i class="fas fa-book-open text-green-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-green-300 rounded-xl p-8 text-center hover:border-green-500 transition-colors duration-300 bg-green-50 hover:bg-green-100">
            <label class="cursor-pointer block">
              <input type="file" id="sourceExtraFile" accept=".docx,.pdf" class="hidden">
              <i class="fas fa-upload text-5xl text-green-500 mb-4"></i>
              <span class="text-lg text-green-600 group-hover:text-green-700">تحميل ملف المصدر</span>
            </label>
          </div>
          <!-- إدخال المصادر يدويًا -->
          <div class="group">
            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
              <i class="fas fa-edit text-green-600 ml-2"></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>

      <!-- زر التحليل -->
      <button id="submitBtn" class="w-full bg-gradient-to-r from-indigo-600 to-pink-600 hover:from-indigo-700 hover:to-pink-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover:scale-105 focus:ring-indigo-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-indigo-600 ml-2"></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 flex items-center">
              <i class="fas fa-file-alt text-pink-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>

      <!-- قسم عرض المسودة (التحليل النصي الكامل) مع زر التبديل -->
      <div id="fullTextDraftSection" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 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-file-alt text-blue-600 ml-2"></i> مسودة التحليل النصي الكامل
        </h2>
        <div id="fullTextDraft" class="bg-gray-50 rounded-xl p-6 border border-gray-200 text-comparison"></div>
      </div>
      <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 space-y-4 md:space-y-0">
        <button id="toggleDraftBtn" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          عرض/إخفاء التحليل النصي الكامل
        </button>
        <!-- أزرار تنزيل التقرير -->
        <div class="flex space-x-4">
          <button id="downloadExcelBtn" class="w-full md:w-auto bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
            تنزيل التقرير (Excel)
          </button>
          <button id="downloadWordBtn" class="w-full md:w-auto bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
            تنزيل التقرير (Word)
          </button>
        </div>
      </div>
    </main>
  </div>

  <!-- ================================
       جافا سكريبت: الوظائف والمعالجة
  ================================= -->
  <script>
    // إعدادات API
    const DEEPSEEK_API_URL = 'https://api.deepseek.com/chat/completions';
    const DEEPSEEK_API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
    
    // إعدادات API ChatGPT-4o
    const CHATGPT_API_URL = 'https://api.openai.com/v1/chat/completions';
    const CHATGPT_API_KEY = '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';
    
    let fullAnalysisText = ''; // متغير لتخزين النص الكامل للتحليل

    /* 
       البرومبت الجديد: يتم فيه تحديد أن النصوص مليئة بالأخطاء والنواقص،
       مع ضرورة الحفاظ على علامات التحديد (التعليم) كما هي.
    */
    const ANALYSIS_PROMPT = `أنت خبير لغوي متخصص في مراجعة الترجمة التقنية. مهمتك مقارنة النص المصدر والنص الهدف بدقة عالية مع العلم أن النصوص مليانة بالأخطاء والنواقص.
لا تقم بإزالة أو تعديل العلامات التالية:
• الأرقام: تحافظ على علامات < و >.
• النصوص المفقودة: تحافظ على علامات __ و __.
• اختلافات المعنى: تحافظ على علامات [MEANING] و [/MEANING].

اعتمد النص المصدر كأساس للمقارنة، وقم بتحديد:
1. اختلافات الأرقام باستخدام <الرقم_في_المصدر> → <الرقم_في_الهدف>.
2. النصوص المفقودة كما هي بين علامتي __.
3. اختلافات المعنى باستخدام [MEANING] مع الحفاظ على التعليم.
  
النص المصدر:
{source}
  
النص الهدف:
{target}`;

    // برومبت لتقسيم النص باستخدام ChatGPT-4o
    const TEXT_DIVISION_PROMPT = `قم بتقسيم النص التالي إلى أجزاء منطقية للتحليل.
    يجب أن يكون كل جزء وحدة متماسكة (فقرة، قسم، إلخ) لا تتجاوز 500 كلمة.
    أعد النص كمصفوفة JSON بالأجزاء. الصيغة: {"segments": ["جزء1", "جزء2", ...]}
    
    النص للتقسيم:
    {text}`;

    /* =====================================
       دالة لتقسيم النص باستخدام ChatGPT-4o
    ===================================== */
    async function divideTextWithChatGPT(text) {
      try {
        // إذا كان النص قصيرًا، لا داعي لتقسيمه
        if (countWords(text) <= 500) {
          return [text];
        }
        
        // تحضير البيانات لـ ChatGPT-4o
        const prompt = TEXT_DIVISION_PROMPT.replace("{text}", text);
        const payload = {
          model: "gpt-4o",
          messages: [
            { role: "system", content: "أنت مساعد متخصص في تقسيم النصوص إلى أجزاء منطقية." },
            { role: "user", content: prompt }
          ],
          temperature: 0.3,
          max_tokens: 1024
        };
        
        // استدعاء API ChatGPT
        const response = await fetch(CHATGPT_API_URL, {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + CHATGPT_API_KEY,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(payload)
        });
        
        if (!response.ok) {
          throw new Error('خطأ في API ChatGPT: ' + response.statusText);
        }
        
        const data = await response.json();
        const content = data.choices[0].message.content.trim();
        
        // محاولة تحليل الاستجابة كـ JSON
        try {
          const jsonResponse = JSON.parse(content);
          if (jsonResponse.segments && Array.isArray(jsonResponse.segments)) {
            return jsonResponse.segments;
          }
        } catch (e) {
          // إذا تعذر تحليلها كـ JSON، حاول استخراج الأجزاء يدويًا
          const segments = content.split(/\n{2,}/).filter(seg => seg.trim().length > 0);
          if (segments.length > 0) {
            return segments;
          }
        }
        
        // إذا فشل كل شيء، قسم النص إلى فقرات
        return text.split(/\n{2,}/).filter(para => para.trim().length > 0);
        
      } catch (error) {
        console.error('خطأ في تقسيم النص باستخدام ChatGPT:', error);
        // الخطة البديلة: تقسيم حسب الفقرات
        return text.split(/\n{2,}/).filter(para => para.trim().length > 0);
      }
    }
    
    /* =====================================
       دالة لتحليل الأجزاء باستخدام DeepSeek ودمج النتائج
    ===================================== */
    async function analyzeTextSegments(sourceSegments, targetSegments) {
      // التحقق من أن لدينا نفس عدد الأجزاء
      if (sourceSegments.length !== targetSegments.length) {
        throw new Error('عدد أجزاء المصدر والهدف غير متطابق');
      }
      
      let combinedAnalysis = '';
      const progressDiv = document.createElement('div');
      progressDiv.className = "bg-indigo-100 p-4 rounded-xl mb-4";
      progressDiv.innerHTML = `<div class="flex items-center justify-between">
                                 <div class="flex items-center">
                                   <div class="animate-spin h-6 w-6 border-4 border-indigo-600 rounded-full border-t-transparent ml-3"></div>
                                   <span>جارٍ التحليل...</span>
                                 </div>
                                 <span id="segmentProgress">0/${sourceSegments.length}</span>
                               </div>`;
      document.getElementById('errorsList').appendChild(progressDiv);
      
      // تحليل كل زوج من الأجزاء
      for (let i = 0; i < sourceSegments.length; i++) {
        // تحديث التقدم
        document.getElementById('segmentProgress').textContent = `${i+1}/${sourceSegments.length}`;
        
        // بناء البرومبت لهذا الجزء
        const prompt = ANALYSIS_PROMPT
                        .replace("{source}", sourceSegments[i])
                        .replace("{target}", targetSegments[i]);
        
        // استدعاء DeepSeek API
        const payload = {
          model: "deepseek-reasoner",
          messages: [
            { role: "system", content: "أنت خبير في تحليل النصوص ومقارنتها بدقة عالية." },
            { role: "user", content: prompt }
          ],
          temperature: 0.3,
          max_tokens: 2048,
          stream: false
        };
        
        const response = await fetch(DEEPSEEK_API_URL, {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + DEEPSEEK_API_KEY,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(payload)
        });
        
        if (!response.ok) {
          throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
        }
        
        const data = await response.json();
        const segmentAnalysis = data.choices[0].message.content.trim();
        
        // دمج مع التحليل السابق
        if (i > 0) combinedAnalysis += '\n\n---\n\n';
        combinedAnalysis += `[الجزء ${i+1}]\n${segmentAnalysis}`;
      }
      
      progressDiv.remove();
      return combinedAnalysis;
    }

    /* =====================================
       دوال مساعدة للتعامل مع النصوص
    ===================================== */
    // حساب عدد الكلمات في النص
    function countWords(text) {
      return text.trim().split(/\s+/).filter(word => word !== "").length;
    }
    // هروب أحرف Regex الخاصة
    function escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }
    // تقسيم النص إلى أسطر مع عرض رقم السطر
    function splitIntoLines(text) {
      return text.split('\n').map((line, i) => `<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;
    }

    /* =====================================
       دوال التمييز (Highlighting) للنتائج
    ===================================== */
    // دالة محسنة لتحديد النصوص التي بها مشاكل فقط على الأسطر المتأثرة
    function applyHighlights(originalText, analysisOutput) {
      // استخراج النصوص التي بها مشاكل من التحليل
      const numberMatches = Array.from(analysisOutput.matchAll(/<([^<>]+)>/g)).map(m => m[1].trim());
      const missingMatches = Array.from(analysisOutput.matchAll(/__(.*?)__/g)).map(m => m[1].trim());
      const meaningMatches = Array.from(analysisOutput.matchAll(/\[MEANING\](.*?)\[\/MEANING\]/g)).map(m => m[1].trim());
      
      // تقسيم النص الأصلي إلى أسطر
      const lines = originalText.split('\n');

      // معالجة كل سطر على حدة وتطبيق التحديد إذا وُجدت مشكلة
      const highlightedLines = lines.map(line => {
        // تحديد اختلافات الأرقام
        numberMatches.forEach(phrase => {
          if (line.includes(phrase)) {
            const regex = new RegExp(escapeRegExp(phrase), 'g');
            line = line.replace(regex, `<span class="highlight-number">${phrase}</span>`);
          }
        });
        // تحديد النصوص المفقودة
        missingMatches.forEach(phrase => {
          if (line.includes(phrase)) {
            const regex = new RegExp(escapeRegExp(phrase), 'g');
            line = line.replace(regex, `<span class="highlight-missing">__${phrase}__</span>`);
          }
        });
        // تحديد اختلافات المعنى
        meaningMatches.forEach(phrase => {
          if (line.includes(phrase)) {
            const regex = new RegExp(escapeRegExp(phrase), 'g');
            line = line.replace(regex, `<span class="highlight-meaning">${phrase}</span>`);
          }
        });
        return line;
      });

      return highlightedLines.join('\n');
    }

    /* =====================================
       دالة توليد الشرح التفصيلي Organized Explanation
       يتم تقسيم الشرح إلى خطوات منظمة
    ===================================== */
    function generateExplanation(sourceText, analysisOutput) {
      let steps = [];
      // الخطوة 1: النصوص المفقودة
      const missingRegex = /__(.*?)__/g;
      let match;
      while ((match = missingRegex.exec(analysisOutput)) !== null) {
        const phrase = match[1].trim();
        if (phrase) {
          const lineNum = getLineNumber(sourceText, phrase);
          steps.push(`<li><strong>الخطوة 1:</strong> في السطر ${lineNum}، الجزء "<span class="highlight-missing">__${phrase}__</span>" من النص المصدر مفقود في النص الهدف. تأكد من إضافته لتحسين الدقة.</li>`);
        }
      }
      // الخطوة 2: اختلافات الأرقام
      const numberRegex = /<([^<>]+)>/g;
      while ((match = numberRegex.exec(analysisOutput)) !== null) {
        const phrase = match[1].trim();
        if (phrase) {
          const lineNum = getLineNumber(sourceText, phrase);
          steps.push(`<li><strong>الخطوة 2:</strong> في السطر ${lineNum}، الرقم "<span class="highlight-number">${phrase}</span>" في المصدر لا يتطابق مع الرقم في الهدف. يرجى المراجعة.</li>`);
        }
      }
      // الخطوة 3: اختلافات المعنى
      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><strong>الخطوة 3:</strong> في السطر ${lineNum}، تم العثور على اختلاف في المعنى مع التعبير "<span class="highlight-meaning">${phrase}</span>". تحقق من الدقة.</li>`);
        }
      }
      // إذا لم يكن هناك اختلافات
      if (steps.length === 0) {
        return `<p>النصوص متطابقة تماماً ولا توجد فروقات تحتاج للتنبيه.</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;
      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 initialProgressDiv = document.createElement('div');
        initialProgressDiv.className = "bg-indigo-100 p-4 rounded-xl mb-4";
        initialProgressDiv.innerHTML = `<div class="flex items-center">
                                     <div class="animate-spin h-6 w-6 border-4 border-indigo-600 rounded-full border-t-transparent ml-3"></div>
                                     <span>جارٍ تقسيم النصوص...</span>
                                   </div>`;
        document.getElementById('errorsList').appendChild(initialProgressDiv);
        
        // الخطوة 1: تقسيم النصوص باستخدام ChatGPT-4o
        const sourceSegments = await divideTextWithChatGPT(sourceText);
        const targetSegments = await divideTextWithChatGPT(targetText);
        
        initialProgressDiv.remove();
        
        // الخطوة 2: تحليل الأجزاء باستخدام DeepSeek
        const analysisOutput = await analyzeTextSegments(sourceSegments, targetSegments);
        fullAnalysisText = analysisOutput; // حفظ التحليل الكامل
        
        // معالجة النتائج كما كان من قبل
        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>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</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}`);
      }
    });

    // زر تبديل عرض/إخفاء المسودة (التحليل النصي الكامل)
    document.getElementById('toggleDraftBtn').addEventListener('click', function() {
      const draftSection = document.getElementById('fullTextDraftSection');
      if (draftSection.classList.contains('hidden')) {
        draftSection.classList.remove('hidden');
        // عرض النص الكامل للتحليل مع تنسيق النصوص كما هي
        document.getElementById('fullTextDraft').innerText = fullAnalysisText;
      } else {
        draftSection.classList.add('hidden');
      }
    });

    /* =====================================
       دوال إنشاء وتنزيل التقرير
    ===================================== */
    // دالة لجمع بيانات التقرير
    function getReportData() {
      const sourceText = document.getElementById('sourceText').value;
      const targetText = document.getElementById('targetText').value;
      const terminologyUsed = document.getElementById('terminologyCheck').checked ? "نعم" : "لا";
      return {
        sourceText,
        targetText,
        fullAnalysisText,
        terminologyUsed
      };
    }

    // تنزيل التقرير بصيغة CSV (Excel)
    document.getElementById('downloadExcelBtn').addEventListener('click', () => {
      const data = getReportData();
      let csvContent = "data:text/csv;charset=utf-8,";
      csvContent += "الحقل,القيمة\n";
      csvContent += `النص المصدر,"${data.sourceText.replace(/"/g, '""')}"\n`;
      csvContent += `النص الهدف,"${data.targetText.replace(/"/g, '""')}"\n`;
      csvContent += `تحليل النصوص,"${data.fullAnalysisText.replace(/"/g, '""')}"\n`;
      csvContent += `قاعدة المصطلحات المستخدمة,${data.terminologyUsed}\n`;
      
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", "تقرير_التحليل.csv");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });

    // تنزيل التقرير بصيغة Word (ملف HTML مع امتداد .doc)
    document.getElementById('downloadWordBtn').addEventListener('click', () => {
      const data = getReportData();
      const reportHTML = `
        <html>
          <head>
            <meta charset="UTF-8">
            <title>تقرير التحليل</title>
            <style>
              body { font-family: Arial, sans-serif; direction: rtl; }
              h1 { text-align: center; }
              pre { white-space: pre-wrap; word-wrap: break-word; background: #f4f4f4; padding: 10px; }
            </style>
          </head>
          <body>
            <h1>تقرير التحليل</h1>
            <h2>النص المصدر</h2>
            <pre>${data.sourceText}</pre>
            <h2>النص الهدف</h2>
            <pre>${data.targetText}</pre>
            <h2>تحليل النصوص</h2>
            <pre>${data.fullAnalysisText}</pre>
            <h2>قاعدة المصطلحات المستخدمة</h2>
            <p>${data.terminologyUsed}</p>
          </body>
        </html>`;
      const blob = new Blob([reportHTML], { type: 'application/msword' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'تقرير_التحليل.doc';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>