Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 16, 2025

Commit

f2ebb4e

verified ·

1 Parent(s): a6752fa

Update index.html

Browse files

Files changed (1) hide show

index.html +388 -257

index.html CHANGED Viewed

@@ -10,7 +10,7 @@
   <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%; }
@@ -30,8 +30,9 @@
       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 {
@@ -53,8 +54,9 @@
       border-radius: 3px;
       font-weight: bold;
     }
     /* ================================
-       تنسيق عرض السطور في المعاينة (من الكود الأول)
     ================================= */
     .split-view {
       display: grid;
@@ -73,8 +75,9 @@
       flex-shrink: 0;
     }
     .line-text { flex: 1; }
     /* ================================
-       تحسين تنسيق البطاقات والعناصر (من الكود الأول)
     ================================= */
     .card-hover {
       transition: all 0.3s ease;
@@ -83,37 +86,6 @@
       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);
     }
-    /* ================================
-       إضافات من الكود الثاني للتنسيق المفصل للاختلافات
-    ================================= */
-    .diff-highlight {
-      display: inline;
-      padding: 2px 0;
-    }
-    .diff-added {
-      background-color: #c8e6c9;
-      text-decoration: none;
-    }
-    .diff-removed {
-      background-color: #ffcdd2;
-      text-decoration: line-through;
-    }
-    .diff-changed {
-      background-color: #fff9c4;
-      text-decoration: none;
-    }
-    /* تنسيق قسم مفتاح الـ API باستخدام Tailwind */
-    .api-key-input input {
-      width: 100%;
-      padding: 0.75rem;
-      border: 2px solid #ddd;
-      border-radius: 0.5rem;
-      outline: none;
-      transition: border-color 0.3s;
-    }
-    .api-key-input input:focus {
-      border-color: #6366F1;
-    }
   </style>
 </head>
 <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
@@ -121,25 +93,15 @@
     <!-- ============ رأس الصفحة ============ -->
     <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>
     <!-- ============ المحتوى الرئيسي ============ -->
-    <main class="max-w-6xl mx-auto px-4 space-y-8">
-      <!-- قسم مفتاح API -->
-      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale card-hover">
-        <div class="api-key-input">
-          <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
-            <i class="fas fa-key text-green-600 ml-2"></i> مفتاح API
-          </label>
-          <input type="text" id="apiKey" value="sk-21a46269cd8e449f8aeb0cc129c36c33" placeholder="أدخل مفتاح API هنا...">
-        </div>
-      </div>
       <!-- قسم رفع الملفات -->
-      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale 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>
@@ -170,7 +132,7 @@
       </div>
       <!-- قسم إدخال النصوص يدويًا -->
-      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale card-hover">
         <div class="space-y-6">
           <!-- النص المصدر -->
           <div class="group">
@@ -189,21 +151,79 @@
         </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 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="comparisonResults" class="space-y-6"></div>
       </div>
     </main>
   </div>
@@ -211,227 +231,338 @@
        جافا سكريبت: الوظائف والمعالجة
   ================================= -->
   <script>
-    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 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>';
-        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('نوع الملف غير مدعوم');
         }
-        return text;
       }
-      /* =====================================
-         ربط أحداث رفع الملفات (من الكود الأول)
-      ===================================== */
-      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');
-          }
         });
       }
-      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');
-          }
-        });
       }
-      /* =====================================
-         حدث النقر على زر المقارنة / التحليل
-      ===================================== */
-      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 = '';
-          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. النصوص المفقودة
-3. النصوص الفاسدة أو غير المفهومة
-4. النصوص المختلفة في المعنى
-قدم تحليلاً مفصلاً للاختلافات وتصنيفها حسب نوع الخطأ.
-النص المصدر:
-${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)
-            });
-            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>

   <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%; }
       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 {
       border-radius: 3px;
       font-weight: bold;
     }
     /* ================================
+       تنسيق عرض السطور في المعاينة
     ================================= */
     .split-view {
       display: grid;
       flex-shrink: 0;
     }
     .line-text { flex: 1; }
     /* ================================
+       تحسين تنسيق البطاقات والعناصر
     ================================= */
     .card-hover {
       transition: all 0.3s ease;
       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">
     <!-- ============ رأس الصفحة ============ -->
     <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>
     <!-- ============ المحتوى الرئيسي ============ -->
+    <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>
       <!-- قسم إدخال النصوص يدويًا -->
+      <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">
         </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>
+      <button id="toggleDraftBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-8">
+        عرض/إخفاء التحليل النصي الكامل
+      </button>
     </main>
   </div>
        جافا سكريبت: الوظائف والمعالجة
   ================================= -->
   <script>
+    // إعدادات API
+    const API_URL = 'https://api.deepseek.com/chat/completions';
+    const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
+    let fullAnalysisText = ''; // متغير لتخزين النص الكامل للتحليل
+    /*
+       البرومبت الجديد: يتم فيه تحديد أن النصوص مليئة بالأخطاء والنواقص،
+       مع ضرورة الحفاظ على علامات التحديد (التعليم) كما هي.
+    */
+    const ANALYSIS_PROMPT = `أنت خبير لغوي متخصص في مراجعة الترجمة التقنية. مهمتك مقارنة النص المصدر والنص الهدف بدقة عالية مع العلم أن النصوص مليانة بالأخطاء والنواقص.
+لا تقم بإزالة أو تعديل العلامات التالية:
+• الأرقام: تحافظ على علامات < و >.
+• النصوص المفقودة: تحافظ على علامات __ و __.
+• اختلافات المعنى: تحافظ على علامات [MEANING] و [/MEANING].
+اعتمد النص المصدر كأساس للمقارنة، وقم بتحديد:
+1. اختلافات الأرقام باستخدام <الرقم_في_المصدر> → <الرقم_في_الهدف>.
+2. النصوص المفقودة كما هي بين علامتي __.
+3. اختلافات المعنى باستخدام [MEANING] مع الحفاظ على التعليم.
+النص المصدر:
+{source}
+النص الهدف:
+{target}`;
+    /* =====================================
+       دوال مساعدة للتعامل مع النصوص
+    ===================================== */
+    // حساب عدد الكلمات في النص
+    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) {
+      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;
+    }
+    /* =====================================
+       دالة توليد الشرح التفصيلي 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 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 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
+        };
+        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();
+        fullAnalysisText = analysisOutput; // حفظ التحليل النصي الكامل في المتغير
+        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>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</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');
       }
     });
   </script>