Update index.html

index.html

@@ -189,8 +189,6 @@
         </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">
@@ -213,164 +211,170 @@
        جافا سكريبت: الوظائف والمعالجة
   ================================= -->
   <script>
-    // إعدادات API الأساسية
-    const API_URL = 'https://api.deepseek.com/chat/completions';
+    document.addEventListener('DOMContentLoaded', function() {
+      // إعدادات API الأساسية
+      const API_URL = 'https://api.deepseek.com/chat/completions';
 
-    /* =====================================
-       دوال مساعدة للتعامل مع النصوص (من الكود الأول)
-    ===================================== */
-    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) => `<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 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) => `<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 formatAnalysisResult(analysisText, sourceText, targetText) {
-      // استبدال بعض العبارات لتحديد الاختلافات
-      let formattedText = analysisText
-        .replace(/\n/g, '<br>')
-        .replace(/الأرقام المكتوبة بشكل خاطئ:|الأرقام غير الصحيحة:/gi, '<strong class="text-red-600">الأرقام المكتوبة بشكل خاطئ:</strong>')
-        .replace(/النصوص المفقودة:/gi, '<strong class="text-red-600">النصوص المفقودة:</strong>')
-        .replace(/النصوص الفاسدة:|النصوص غير المفهومة:/gi, '<strong class="text-red-600">النصوص الفاسدة:</strong>')
-        .replace(/النصوص المختلفة في المعنى:/gi, '<strong class="text-red-600">النصوص المختلفة في المعنى:</strong>')
-        .replace(/في النص المصدر: "(.*?)"/g, 'في النص المصدر: "<span class="diff-highlight diff-removed">$1</span>"')
-        .replace(/في النص الهدف: "(.*?)"/g, 'في النص الهدف: "<span class="diff-highlight diff-added">$1</span>"');
-      
-      // مقارنة سطرية مرئية
-      const sourceLines = sourceText.split('\n');
-      const targetLines = targetText.split('\n');
-      const maxLines = Math.max(sourceLines.length, targetLines.length);
-      
-      let visualComparison = '<h3 class="text-lg font-bold text-gray-700 mt-6 mb-3">المقارنة السطرية:</h3><div class="flex flex-col md:flex-row gap-6">';
-      
-      // عمود النص المصدر
-      visualComparison += '<div class="flex-1"><h4 class="font-bold text-indigo-600 mb-2">النص المصدر:</h4><div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100 overflow-x-auto">';
-      for (let i = 0; i < maxLines; i++) {
-        if(i < sourceLines.length) {
-          visualComparison += `<div>${i+1}. ${sourceLines[i]}</div>`;
+      /* =====================================
+         دالة تنسيق النتيجة بالشكل المفصل (من الكود الثاني)
+      ===================================== */
+      function formatAnalysisResult(analysisText, sourceText, targetText) {
+        let formattedText = analysisText
+          .replace(/\n/g, '<br>')
+          .replace(/الأرقام المكتوبة بشكل خاطئ:|الأرقام غير الصحيحة:/gi, '<strong class="text-red-600">الأرقام المكتوبة بشكل خاطئ:</strong>')
+          .replace(/النصوص المفقودة:/gi, '<strong class="text-red-600">النصوص المفقودة:</strong>')
+          .replace(/النصوص الفاسدة:|النصوص غير المفهومة:/gi, '<strong class="text-red-600">النصوص الفاسدة:</strong>')
+          .replace(/النصوص المختلفة في المعنى:/gi, '<strong class="text-red-600">النصوص المختلفة في المعنى:</strong>')
+          .replace(/في النص المصدر: "(.*?)"/g, 'في النص المصدر: "<span class="diff-highlight diff-removed">$1</span>"')
+          .replace(/في النص الهدف: "(.*?)"/g, 'في النص الهدف: "<span class="diff-highlight diff-added">$1</span>"');
+        
+        // مقارنة سطرية مرئية
+        const sourceLines = sourceText.split('\n');
+        const targetLines = targetText.split('\n');
+        const maxLines = Math.max(sourceLines.length, targetLines.length);
+        
+        let visualComparison = '<h3 class="text-lg font-bold text-gray-700 mt-6 mb-3">المقارنة السطرية:</h3><div class="flex flex-col md:flex-row gap-6">';
+        
+        visualComparison += '<div class="flex-1"><h4 class="font-bold text-indigo-600 mb-2">النص المصدر:</h4><div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100 overflow-x-auto">';
+        for (let i = 0; i < maxLines; i++) {
+          if(i < sourceLines.length) {
+            visualComparison += `<div>${i+1}. ${sourceLines[i]}</div>`;
+          }
         }
-      }
-      visualComparison += '</div></div>';
-      
-      // عمود النص الهدف
-      visualComparison += '<div class="flex-1"><h4 class="font-bold text-pink-600 mb-2">النص الهدف:</h4><div class="bg-pink-50 p-4 rounded-lg border border-pink-100 overflow-x-auto">';
-      for (let i = 0; i < maxLines; i++) {
-        if(i < targetLines.length) {
-          visualComparison += `<div>${i+1}. ${targetLines[i]}</div>`;
+        visualComparison += '</div></div>';
+        
+        visualComparison += '<div class="flex-1"><h4 class="font-bold text-pink-600 mb-2">النص الهدف:</h4><div class="bg-pink-50 p-4 rounded-lg border border-pink-100 overflow-x-auto">';
+        for (let i = 0; i < maxLines; i++) {
+          if(i < targetLines.length) {
+            visualComparison += `<div>${i+1}. ${targetLines[i]}</div>`;
+          }
         }
+        visualComparison += '</div></div>';
+        
+        visualComparison += '</div>';
+        
+        return formattedText + '<br><br>' + visualComparison;
       }
-      visualComparison += '</div></div>';
-      
-      visualComparison += '</div>';
-      
-      return formattedText + '<br><br>' + visualComparison;
-    }
 
-    /* =====================================
-       دالة معالجة الملفات (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('نوع الملف غير مدعوم');
+      /* =====================================
+         دالة معالجة الملفات (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;
       }
-      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);
-        alert('خطأ في معالجة ملف السورس');
-      } finally {
-        document.getElementById('processStatus').classList.add('hidden');
+      /* =====================================
+         ربط أحداث رفع الملفات (من الكود الأول)
+      ===================================== */
+      const sourceFileEl = document.getElementById('sourceFile');
+      if (sourceFileEl) {
+        sourceFileEl.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);
+            alert('خطأ في معالجة ملف السورس');
+          } 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);
-        alert('خطأ في معالجة ملف التارجت');
-      } finally {
-        document.getElementById('processStatus').classList.add('hidden');
+      const targetFileEl = document.getElementById('targetFile');
+      if (targetFileEl) {
+        targetFileEl.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);
+            alert('خطأ في معالجة ملف التارجت');
+          } finally {
+            document.getElementById('processStatus').classList.add('hidden');
+          }
+        });
       }
-    });
 
-    /* =====================================
-       دالة التعامل مع حدث النقر على زر المقارنة
-    ===================================== */
-    document.getElementById('submitBtn').addEventListener('click', async () => {
-      const sourceText = document.getElementById('sourceText').value.trim();
-      const targetText = document.getElementById('targetText').value.trim();
-      const apiKey = document.getElementById('apiKey').value.trim();
-      const resultsContainer = document.getElementById('comparisonResults');
-      const resultSection = document.getElementById('resultSection');
+      /* =====================================
+         حدث النقر على زر المقارنة / التحليل
+      ===================================== */
+      const submitBtn = document.getElementById('submitBtn');
+      if (submitBtn) {
+        submitBtn.addEventListener('click', async () => {
+          const sourceText = document.getElementById('sourceText').value.trim();
+          const targetText = document.getElementById('targetText').value.trim();
+          const apiKey = document.getElementById('apiKey').value.trim();
+          const resultsContainer = document.getElementById('comparisonResults');
+          const resultSection = document.getElementById('resultSection');
 
-      resultsContainer.innerHTML = '';
+          resultsContainer.innerHTML = '';
 
-      if (!sourceText || !targetText) {
-        alert('الرجاء إدخال كلا النصين المصدر والهدف');
-        return;
-      }
-      if (!apiKey) {
-        alert('الرجاء إدخال مفتاح API صالح');
-        return;
-      }
-      
-      // مقارنة عدد الكلمات وتنبيه إن وجد اختلاف (اختياري)
-      const sourceWordCount = countWords(sourceText);
-      const targetWordCount = countWords(targetText);
-      if (sourceWordCount !== targetWordCount) {
-        resultsContainer.innerHTML += `<div class="p-4 rounded-xl bg-yellow-50 text-yellow-700 mb-4"><i class="fas fa-info-circle ml-2"></i> عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount}).</div>`;
-      }
-      
-      // عرض مؤشر التقدم
-      resultsContainer.innerHTML += `<div id="progressIndicator" class="bg-indigo-100 p-4 rounded-xl mb-4 flex items-center justify-center">
-                                        <div class="animate-spin h-8 w-8 border-4 border-indigo-600 rounded-full border-t-transparent mr-3"></div>
-                                        <span class="text-indigo-700 text-lg">جارٍ التحليل...</span>
-                                      </div>`;
-      
-      // بناء prompt باستخدام نصوص الكلا المصدر والهدف (باستخدام نص الكود الثاني)
-      const prompt = `
+          if (!sourceText || !targetText) {
+            alert('الرجاء إدخال كلا النصين المصدر والهدف');
+            return;
+          }
+          if (!apiKey) {
+            alert('الرجاء إدخال مفتاح API صالح');
+            return;
+          }
+          
+          // مقارنة عدد الكلمات وتنبيه إن وجد اختلاف (اختياري)
+          const sourceWordCount = countWords(sourceText);
+          const targetWordCount = countWords(targetText);
+          if (sourceWordCount !== targetWordCount) {
+            resultsContainer.innerHTML += `<div class="p-4 rounded-xl bg-yellow-50 text-yellow-700 mb-4"><i class="fas fa-info-circle ml-2"></i> عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount}).</div>`;
+          }
+          
+          // عرض مؤشر التقدم
+          resultsContainer.innerHTML += `<div id="progressIndicator" class="bg-indigo-100 p-4 rounded-xl mb-4 flex items-center justify-center">
+                                            <div class="animate-spin h-8 w-8 border-4 border-indigo-600 rounded-full border-t-transparent mr-3"></div>
+                                            <span class="text-indigo-700 text-lg">جارٍ التحليل...</span>
+                                          </div>`;
+          
+          // بناء prompt باستخدام نصوص المصدر والهدف
+          const prompt = `
 قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما، بما في ذلك:
 1. الأرقام المكتوبة بشكل خاطئ
 2. النصوص المفقودة
@@ -384,48 +388,50 @@ ${sourceText}
 
 النص الهدف:
 ${targetText}
-      `;
-      
-      try {
-        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(API_URL, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'Authorization': 'Bearer ' + apiKey
-          },
-          body: JSON.stringify(payload)
+          `;
+          
+          try {
+            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(API_URL, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + apiKey
+              },
+              body: JSON.stringify(payload)
+            });
+            
+            if (!response.ok) {
+              throw new Error('خطأ في الاتصال بالـ API: ' + response.statusText);
+            }
+            
+            const data = await response.json();
+            const analysisResult = data.choices[0].message.content.trim();
+            
+            // إزالة مؤشر التقدم
+            const progressIndicator = document.getElementById('progressIndicator');
+            if (progressIndicator) progressIndicator.remove();
+            
+            // عرض النتيجة باستخدام دالة التنسيق
+            const formattedResult = formatAnalysisResult(analysisResult, sourceText, targetText);
+            resultsContainer.innerHTML += formattedResult;
+            resultSection.classList.remove('hidden');
+          } catch (error) {
+            resultsContainer.innerHTML = '';
+            alert('حدث خطأ في التحليل: ' + error.message);
+            console.error('Error:', error);
+          }
         });
-        
-        if (!response.ok) {
-          throw new Error('خطأ في الاتصال بالـ API: ' + response.statusText);
-        }
-        
-        const data = await response.json();
-        const analysisResult = data.choices[0].message.content.trim();
-        
-        // إزالة مؤشر التقدم
-        const progressIndicator = document.getElementById('progressIndicator');
-        if (progressIndicator) progressIndicator.remove();
-        
-        // عرض النتيجة باستخدام دالة التنسيق (من الكود الثاني)
-        const formattedResult = formatAnalysisResult(analysisResult, sourceText, targetText);
-        resultsContainer.innerHTML += formattedResult;
-        resultSection.classList.remove('hidden');
-      } catch (error) {
-        resultsContainer.innerHTML = '';
-        alert('حدث خطأ في التحليل: ' + error.message);
-        console.error('Error:', error);
       }
     });
   </script>