Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 3, 2025

Commit

d0d3666

verified ·

1 Parent(s): 91e5a7d

Update index.html

Browse files

Files changed (1) hide show

index.html +938 -19

index.html CHANGED Viewed

@@ -1,19 +1,938 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>نظام المقارنة والترجمة الخاص بشركة موندو لينجوا</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <style>
+    @keyframes gradient {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    .animate-gradient {
+      background-size: 200% 200%;
+      animation: gradient 15s ease infinite;
+    }
+    .transition-all { transition: all 0.3s ease-in-out; }
+    .animate-scale { transition: transform 0.2s ease-in-out; }
+    .animate-scale:hover { transform: scale(1.02); }
+    .file-drop-active { border-color: #3B82F6; background-color: rgba(59,130,246,0.1); }
+    .text-comparison { line-height: 1.8; white-space: pre-wrap; }
+    /* تمييز اختلاف الأرقام */
+    .highlight-number {
+      background-color: #FDE68A;
+      padding: 0 2px;
+      border-radius: 2px;
+    }
+    /* تمييز النصوص الناقصة */
+    .highlight-missing {
+      background-color: #BFDBFE;
+      padding: 0 2px;
+      border-radius: 2px;
+    }
+    /* تمييز اختلاف المعنى */
+    .highlight-meaning {
+      color: #EF4444;
+      font-weight: bold;
+    }
+    /* تقسيم شاشة المعاينة إلى جزئين */
+    .split-view {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1rem;
+    }
+    .result-section {
+      border-top: 3px solid #E0E7FF;
+      margin-top: 2rem;
+      padding-top: 2rem;
+    }
+    /* تنسيق كل سطر مع رقم السطر */
+    .line-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
+    }
+    .line-number {
+      width: 30px;
+      font-weight: bold;
+      color: #4B5563;
+      flex-shrink: 0;
+    }
+    .line-text {
+      flex: 1;
+    }
+    /* تحسينات إضافية للواجهة */
+    .card-hover {
+      transition: all 0.3s ease;
+    }
+    .card-hover:hover {
+      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
+      transform: translateY(-2px);
+    }
+    .pulse-animation {
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+      70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+    }
+    /* زر التنزيل */
+    .download-btn {
+      background-color: #10B981;
+      transition: all 0.3s ease;
+    }
+    .download-btn:hover {
+      background-color: #059669;
+      transform: translateY(-2px);
+    }
+    /* تنسيق اسم الملف */
+    .file-name {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    /* تنسيق معلومات الملف */
+    .file-info {
+      background-color: #F3F4F6;
+      border-radius: 8px;
+      padding: 8px 12px;
+      margin-top: 8px;
+      font-size: 0.9rem;
+    }
+    /* تنسيق مؤشر التقدم */
+    .progress-bar {
+      width: 100%;
+      height: 8px;
+      background-color: #E5E7EB;
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 8px;
+    }
+    .progress-fill {
+      height: 100%;
+      background-color: #3B82F6;
+      width: 0%;
+      transition: width 0.3s ease;
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 min-h-screen">
+  <div class="min-h-screen pb-12">
+    <!-- Header -->
+    <header class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 animate-gradient text-white py-10 mb-10 shadow-xl">
+      <div class="max-w-6xl mx-auto px-4">
+        <h1 class="text-5xl font-bold text-center mb-4 animate-scale">نظام شركة موندو لينجوا</h1>
+        <p class="text-center text-xl text-blue-100 opacity-90">مقارنة وتحليل النصوص – المصدر مرجع أساسي</p>
+      </div>
+    </header>
+    <!-- Main Content -->
+    <main class="max-w-6xl mx-auto px-4">
+      <!-- قسم رفع الملفات -->
+      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center border-b pb-3">
+          <i class="fas fa-file-upload text-blue-600 ml-2"></i> تحليل الملفات مباشرة
+        </h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- ملف السورس -->
+          <div class="group border-2 border-dashed border-blue-200 rounded-xl p-8 text-center hover:border-blue-500 transition-colors duration-300 bg-blue-50 hover:bg-blue-100">
+            <label class="cursor-pointer block">
+              <input type="file" id="sourceFile" accept=".docx,.pdf,.txt" class="hidden">
+              <i class="fas fa-file-upload text-5xl text-blue-500 mb-4"></i>
+              <span class="text-lg text-blue-600 group-hover:text-blue-700">ملف السورس</span>
+              <p class="text-sm text-gray-500 mt-2">(.docx, .pdf, .txt)</p>
+              <div id="sourceFileInfo" class="mt-2 text-sm text-gray-600"></div>
+            </label>
+          </div>
+          <!-- ملف التارجت -->
+          <div class="group border-2 border-dashed border-purple-200 rounded-xl p-8 text-center hover:border-purple-500 transition-colors duration-300 bg-purple-50 hover:bg-purple-100">
+            <label class="cursor-pointer block">
+              <input type="file" id="targetFile" accept=".docx,.pdf,.txt" class="hidden">
+              <i class="fas fa-file-download text-5xl text-purple-500 mb-4"></i>
+              <span class="text-lg text-purple-600 group-hover:text-purple-700">ملف التارجت</span>
+              <p class="text-sm text-gray-500 mt-2">(.docx, .pdf, .txt)</p>
+              <div id="targetFileInfo" class="mt-2 text-sm text-gray-600"></div>
+            </label>
+          </div>
+        </div>
+        <div id="processStatus" class="hidden mt-4">
+          <div class="flex items-center justify-center space-x-3 bg-blue-100 rounded-xl p-4">
+            <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div>
+            <span class="text-lg text-blue-700">جارٍ معالجة الملفات...</span>
+          </div>
+          <div class="progress-bar mt-2">
+            <div id="progressFill" class="progress-fill"></div>
+          </div>
+        </div>
+        <!-- زر تحليل الملفات -->
+        <button id="analyzeFilesBtn" class="w-full mt-6 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-4 px-6 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-lg shadow-lg hover:shadow-xl">
+          <div class="flex items-center justify-center">
+            <i class="fas fa-file-search ml-2"></i> تحليل الملفات
+          </div>
+        </button>
+      </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-keyboard text-blue-600 ml-2"></i> إدخال النصوص يدوياً
+        </h2>
+        <div class="space-y-6">
+          <!-- النص المصدر -->
+          <div class="group">
+            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-language text-blue-600 ml-2"></i> النص المصدر
+            </label>
+            <textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-blue-200 focus:border-blue-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea>
+          </div>
+          <!-- النص الهدف -->
+          <div class="group">
+            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-language text-purple-600 ml-2"></i> النص الهدف
+            </label>
+            <textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-purple-200 focus:border-purple-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
+          </div>
+        </div>
+        <!-- زر تحليل النصوص -->
+        <button id="submitBtn" class="w-full mt-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-lg shadow-lg hover:shadow-xl pulse-animation">
+          <div class="flex items-center justify-center">
+            <i class="fas fa-sync-alt ml-2"></i> تحليل النصوص
+          </div>
+        </button>
+      </div>
+      <!-- شاشة نتائج التحليل (المعاينة المقسمة) -->
+      <div id="resultSection" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
+          <i class="fas fa-search text-green-600 ml-2"></i> نتائج التحليل والمقارنة
+        </h2>
+        <!-- هنا يتم عرض الأخطاء والاختلافات فقط -->
+        <div id="errorsList" class="space-y-3 mb-6"></div>
+        <div class="result-section split-view">
+          <!-- عرض النص المصدر بعد التعليم مع تقسيمه إلى أسطر -->
+          <div>
+            <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-file-alt text-blue-600 ml-2"></i> النص المصدر (مع التعليم)
+            </h4>
+            <div id="sourceTextReview" class="bg-blue-50 rounded-xl p-6 min-h-[200px] border-2 border-blue-100 text-comparison"></div>
+          </div>
+          <!-- عرض النص الهدف بعد التعليم مع تقسيمه إلى أسطر -->
+          <div>
+            <h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-file-alt text-purple-600 ml-2"></i> النص الهدف (مع التعليم)
+            </h4>
+            <div id="targetTextReview" class="bg-gray-50 rounded-xl p-6 min-h-[200px] border-2 border-gray-200 text-comparison"></div>
+          </div>
+        </div>
+        <!-- زر تنزيل التقرير -->
+        <div class="mt-8 flex justify-center">
+          <button id="downloadReportBtn" class="download-btn text-white font-bold py-4 px-8 rounded-xl shadow-lg flex items-center">
+            <i class="fas fa-download ml-2"></i> تنزيل تقرير التحليل
+          </button>
+        </div>
+      </div>
+      <!-- صندوق شرح الاختلافات -->
+      <div id="explanationBox" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover">
+        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center">
+          <i class="fas fa-info-circle text-green-600 ml-2"></i> شرح الاختلافات
+        </h2>
+        <div id="explanationText" class="text-lg text-gray-700"></div>
+      </div>
+    </main>
+  </div>
+  <!-- JavaScript -->
+  <script>
+    // API URL ومفتاح API (تم التحديث لاستخدام DeepSeek API)
+    const API_URL = 'https://api.deepseek.com/v1/files/analyze';
+    const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
+    // متغيرات عامة لتخزين نتائج التحليل
+    let analysisResults = {
+      sourceText: "",
+      targetText: "",
+      analysisOutput: "",
+      explanationHTML: "",
+      numDiffCount: 0,
+      missingDiffCount: 0,
+      meaningDiffCount: 0,
+      timestamp: "",
+      sourceFileName: "",
+      targetFileName: ""
+    };
+    // دالة لحساب عدد الكلمات
+    function countWords(text) {
+      return text.trim().split(/\s+/).filter(word => word !== "").length;
+    }
+    // دالة لمساعدة في الهروب من أحرف regex الخاصة
+    function escapeRegExp(string) {
+      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    // دالة تطبيق التمييز على النص باستخدام العلامات في نتيجة التحليل
+    function applyHighlights(originalText, analysisOutput) {
+      let highlightedText = originalText;
+      // تمييز اختلافات الأرقام
+      const numberRegex = /<([^<>]+)>/g;
+      let match;
+      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-number">${phrase}</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
+      }
+      // تمييز النصوص الناقصة
+      const missingRegex = /__(.*?)__/g;
+      while ((match = missingRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-missing">__${phrase}__</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
+      }
+      // تمييز اختلاف المعنى
+      const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
+      while ((match = meaningRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const replacement = `<span class="highlight-meaning">${phrase}</span>`;
+          const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
+          highlightedText = highlightedText.replace(phraseRegex, replacement);
+        }
+      }
+      return highlightedText;
+    }
+    // دالة تقسيم النص إلى أسطر مع عرض رقم السطر
+    function splitIntoLines(text) {
+      const lines = text.split('\n');
+      let html = "";
+      lines.forEach((line, index) => {
+        html += `<div class="line-item"><span class="line-number">${index + 1}:</span> <span class="line-text">${line}</span></div>`;
+      });
+      return html;
+    }
+    // دالة للحصول على رقم السطر لظهور عبارة معينة في النص
+    function getLineNumber(text, substring) {
+      const index = text.indexOf(substring);
+      if (index === -1) return "غير محدد";
+      return text.substring(0, index).split("\n").length;
+    }
+    // دالة توليد شرح الاختلافات
+    function generateExplanation(sourceText, analysisOutput) {
+      let explanation = "";
+      // شرح النصوص الناقصة
+      const missingRegex = /__(.*?)__/g;
+      let match;
+      while ((match = missingRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          explanation += `<p>في السطر ${lineNum}: النص "${phrase}" مفقود في النص الهدف.</p>`;
+        }
+      }
+      // شرح اختلاف الأرقام
+      const numberRegex = /<([^<>]+)>/g;
+      while ((match = numberRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          explanation += `<p>في السطر ${lineNum}: اختلاف في الرقم "${phrase}".</p>`;
+        }
+      }
+      // شرح اختلاف المعنى
+      const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
+      while ((match = meaningRegex.exec(analysisOutput)) !== null) {
+        const phrase = match[1].trim();
+        if (phrase) {
+          const lineNum = getLineNumber(sourceText, phrase);
+          explanation += `<p>في السطر ${lineNum}: اختلاف في المعنى: "${phrase}".</p>`;
+        }
+      }
+      if (explanation === "") {
+        explanation = `<p>[MATCH] النصوص متطابقة تماماً.</p>`;
+      }
+      return explanation;
+    }
+    // دالة عرض الأخطاء أو الرسائل
+    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);
+    }
+    // دالة تحليل النصوص
+    async function analyzeTexts(sourceText, targetText) {
+      // مسح الرسائل السابقة وإظهار قسم النتائج
+      document.getElementById('errorsList').innerHTML = '';
+      document.getElementById('resultSection').classList.remove('hidden');
+      document.getElementById('explanationBox').classList.remove('hidden');
+      if (!sourceText || !targetText) {
+        addError('يرجى إدخال كلا النصين المصدر والهدف');
+        return;
+      }
+      try {
+        // عرض مؤشر التقدم أثناء انتظار الرد
+        const progressDiv = document.createElement('div');
+        progressDiv.className = "bg-blue-100 p-4 rounded-xl mb-4";
+        progressDiv.innerHTML = `<div class="flex items-center">
+                                   <div class="animate-spin h-6 w-6 border-4 border-blue-600 rounded-full border-t-transparent ml-3"></div>
+                                   <span>جارٍ التحليل...</span>
+                                 </div>`;
+        document.getElementById('errorsList').appendChild(progressDiv);
+        // إنشاء ملفات بلوب من النصوص المدخلة
+        const sourceBlob = new Blob([sourceText], { type: 'text/plain' });
+        const targetBlob = new Blob([targetText], { type: 'text/plain' });
+        // إنشاء FormData وإضافة الملفات إليها
+        const formData = new FormData();
+        formData.append('source_file', sourceBlob, 'source.txt');
+        formData.append('target_file', targetBlob, 'target.txt');
+        formData.append('analysis_type', 'text_comparison');
+        formData.append('instructions', `
+        أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
+        1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
+        2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
+        3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
+        إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
+        اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
+        ملاحظة مهمة: قم بفحص النصوص بدقة عالية. إذا كانت هناك اختلافات حتى بسيطة، يجب تحديدها. لا تكتب [MATCH] إلا إذا كانت النصوص متطابقة تماماً بنسبة 100%.
+        `);
+        // إرسال الطلب مع الملفات مباشرة
+        const response = await fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'Authorization': 'Bearer ' + API_KEY
+          },
+          body: formData
+        });
+        if (!response.ok) {
+          throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
+        }
+        const data = await response.json();
+        const analysisOutput = data.analysis_result;
+        progressDiv.remove();
+        // تخزين نتائج التحليل
+        analysisResults = {
+          sourceText: sourceText,
+          targetText: targetText,
+          analysisOutput: analysisOutput,
+          timestamp: new Date().toLocaleString('ar-SA'),
+          sourceFileName: "إدخال يدوي",
+          targetFileName: "إدخال يدوي"
+        };
+        if (analysisOutput.includes('[MATCH]')) {
+          const checkDiv = document.createElement('div');
+          checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
+          checkDiv.innerHTML = `<i class="fas fa-check-circle ml-2 text-lg"></i> <span class="text-lg">النصوص متطابقة تماماً</span>`;
+          document.getElementById('errorsList').appendChild(checkDiv);
+          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
+          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
+          document.getElementById('explanationText').innerHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
+          analysisResults.explanationHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
+          analysisResults.numDiffCount = 0;
+          analysisResults.missingDiffCount = 0;
+          analysisResults.meaningDiffCount = 0;
+        } 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;
+          // تخزين شرح الاختلافات
+          analysisResults.explanationHTML = explanationHTML;
+          // عرض ملخص الاختلافات إن وُجدت
+          const numDiffCount = (analysisOutput.match(/<([^<>]+)>/g) || []).length;
+          const missingDiffCount = (analysisOutput.match(/__(.*?)__/g) || []).length;
+          const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
+          // تخزين عدد الاختلافات
+          analysisResults.numDiffCount = numDiffCount;
+          analysisResults.missingDiffCount = missingDiffCount;
+          analysisResults.meaningDiffCount = meaningDiffCount;
+          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);
+          }
+        }
+        return true;
+      } catch (error) {
+        document.getElementById('errorsList').innerHTML = '';
+        addError(`خطأ في التحليل: ${error.message}`);
+        return false;
+      }
+    }
+    // دالة تحليل الملفات
+    async function analyzeFiles(sourceFile, targetFile) {
+      // مسح الرسائل السابقة وإظهار قسم النتائج
+      document.getElementById('errorsList').innerHTML = '';
+      document.getElementById('resultSection').classList.remove('hidden');
+      document.getElementById('explanationBox').classList.remove('hidden');
+      if (!sourceFile || !targetFile) {
+        addError('يرجى تحميل كلا الملفين المصدر والهدف');
+        return;
+      }
+      try {
+        // عرض مؤشر التقدم أثناء انتظار الرد
+        const progressDiv = document.createElement('div');
+        progressDiv.className = "bg-blue-100 p-4 rounded-xl mb-4";
+        progressDiv.innerHTML = `<div class="flex items-center">
+                                   <div class="animate-spin h-6 w-6 border-4 border-blue-600 rounded-full border-t-transparent ml-3"></div>
+                                   <span>جارٍ تحليل الملفات...</span>
+                                 </div>`;
+        document.getElementById('errorsList').appendChild(progressDiv);
+        // تحديث شريط التقدم
+        document.getElementById('progressFill').style.width = '30%';
+        // إنشاء FormData وإضافة الملفات إليها
+        const formData = new FormData();
+        formData.append('source_file', sourceFile);
+        formData.append('target_file', targetFile);
+        formData.append('analysis_type', 'text_comparison');
+        formData.append('instructions', `
+        أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
+        1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
+        2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
+        3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
+        إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
+        اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
+        ملاحظة مهمة: قم بفحص النصوص بدقة عالية. إذا كانت هناك اختلافات حتى بسيطة، يجب تحديدها. لا تكتب [MATCH] إلا إذا كانت النصوص متطابقة تماماً بنسبة 100%.
+        `);
+        // تحديث شريط التقدم
+        document.getElementById('progressFill').style.width = '50%';
+        // إرسال الطلب مع الملفات مباشرة
+        const response = await fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'Authorization': 'Bearer ' + API_KEY
+          },
+          body: formData
+        });
+        // تحديث شريط التقدم
+        document.getElementById('progressFill').style.width = '80%';
+        if (!response.ok) {
+          throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
+        }
+        const data = await response.json();
+        const analysisOutput = data.analysis_result;
+        // استخراج النصوص المقارنة من النتائج
+        const extractedSourceText = data.extracted_source_text || "لم يتم استخراج النص المصدر";
+        const extractedTargetText = data.extracted_target_text || "لم يتم استخراج النص الهدف";
+        // تحديث شريط التقدم
+        document.getElementById('progressFill').style.width = '100%';
+        progressDiv.remove();
+        // تخزين نتائج التحليل
+        analysisResults = {
+          sourceText: extractedSourceText,
+          targetText: extractedTargetText,
+          analysisOutput: analysisOutput,
+          timestamp: new Date().toLocaleString('ar-SA'),
+          sourceFileName: sourceFile.name,
+          targetFileName: targetFile.name
+        };
+        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(extractedSourceText);
+          document.getElementById('targetTextReview').innerHTML = splitIntoLines(extractedTargetText);
+          document.getElementById('explanationText').innerHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
+          analysisResults.explanationHTML = `<p>[MATCH] لا توجد اختلافات.</p>`;
+          analysisResults.numDiffCount = 0;
+          analysisResults.missingDiffCount = 0;
+          analysisResults.meaningDiffCount = 0;
+        } else {
+          const sourceHighlighted = applyHighlights(extractedSourceText, analysisOutput);
+          const targetHighlighted = applyHighlights(extractedTargetText, analysisOutput);
+          // تقسيم النصوص المُظّلّة إلى أسطر مع رقم السطر
+          document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
+          document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetHighlighted);
+          // توليد شرح الاختلافات
+          const explanationHTML = generateExplanation(extractedSourceText, analysisOutput);
+          document.getElementById('explanationText').innerHTML = explanationHTML;
+          // تخزين شرح الاختلافات
+          analysisResults.explanationHTML = explanationHTML;
+          // عرض ملخص الاختلافات إن وُجدت
+          const numDiffCount = (analysisOutput.match(/<([^<>]+)>/g) || []).length;
+          const missingDiffCount = (analysisOutput.match(/__(.*?)__/g) || []).length;
+          const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length;
+          // تخزين عدد الاختلافات
+          analysisResults.numDiffCount = numDiffCount;
+          analysisResults.missingDiffCount = missingDiffCount;
+          analysisResults.meaningDiffCount = meaningDiffCount;
+          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);
+          }
+        }
+        return true;
+      } catch (error) {
+        document.getElementById('errorsList').innerHTML = '';
+        addError(`خطأ في تحليل الملفات: ${error.message}`);
+        return false;
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
+      }
+    }
+    // عرض معلومات الملف بعد اختياره
+    document.getElementById('sourceFile')?.addEventListener('change', async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      const fileInfo = document.getElementById('sourceFileInfo');
+      fileInfo.innerHTML = `
+        <div class="file-info">
+          <div class="file-name"><strong>الملف:</strong> ${file.name}</div>
+          <div><strong>الحجم:</strong> ${(file.size / 1024).toFixed(2)} كيلوبايت</div>
+          <div><strong>النوع:</strong> ${file.type || 'غير محدد'}</div>
+        </div>
+      `;
+      // تخزين اسم الملف
+      analysisResults.sourceFileName = file.name;
+    });
+    document.getElementById('targetFile')?.addEventListener('change', async (event) => {
+      const file = event.target.files[0];
+      if (!file) return;
+      const fileInfo = document.getElementById('targetFileInfo');
+      fileInfo.innerHTML = `
+        <div class="file-info">
+          <div class="file-name"><strong>الملف:</strong> ${file.name}</div>
+          <div><strong>الحجم:</strong> ${(file.size / 1024).toFixed(2)} كيلوبايت</div>
+          <div><strong>النوع:</strong> ${file.type || 'غير محدد'}</div>
+        </div>
+      `;
+      // تخزين اسم الملف
+      analysisResults.targetFileName = file.name;
+    });
+    // عند الضغط على زر تحليل النصوص المدخلة يدوياً
+    document.getElementById('submitBtn').addEventListener('click', async () => {
+      const sourceText = document.getElementById('sourceText').value;
+      const targetText = document.getElementById('targetText').value;
+      await analyzeTexts(sourceText, targetText);
+    });
+    // عند الضغط على زر تحليل الملفات
+    document.getElementById('analyzeFilesBtn').addEventListener('click', async () => {
+      const sourceFileInput = document.getElementById('sourceFile');
+      const targetFileInput = document.getElementById('targetFile');
+      if (!sourceFileInput.files.length || !targetFileInput.files.length) {
+        addError('يرجى تحميل كلا الملفين المصدر والهدف');
+        document.getElementById('resultSection').classList.remove('hidden');
+        return;
+      }
+      document.getElementById('processStatus').classList.remove('hidden');
+      document.getElementById('progressFill').style.width = '0%';
+      try {
+        // تحليل الملفات مباشرة
+        await analyzeFiles(sourceFileInput.files[0], targetFileInput.files[0]);
+      } catch (error) {
+        console.error('Error analyzing files:', error);
+        document.getElementById('resultSection').classList.remove('hidden');
+        addError(`خطأ في تحليل الملفات: ${error.message}`);
+      } finally {
+        document.getElementById('processStatus').classList.add('hidden');
+      }
+    });
+    // دالة إنشاء تقرير HTML
+    function generateHTMLReport() {
+      const { sourceText, targetText, analysisOutput, explanationHTML, numDiffCount, missingDiffCount, meaningDiffCount, timestamp, sourceFileName, targetFileName } = analysisResults;
+      // تطبيق التمييز على النصوص
+      const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
+      const targetHighlighted = applyHighlights(targetText, analysisOutput);
+      // إنشاء محتوى HTML للتقرير
+      let reportHTML = `
+      <!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>
+        <style>
+          body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+          }
+          h1, h2, h3 {
+            color: #2563EB;
+          }
+          .header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 2px solid #E0E7FF;
+          }
+          .summary {
+            background-color: #FFFBEB;
+            border: 1px solid #FEF3C7;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+          }
+          .explanation {
+            background-color: #F3F4F6;
+            padding: 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+          }
+          .text-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 30px;
+          }
+          .text-box {
+            border: 1px solid #E5E7EB;
+            padding: 15px;
+            border-radius: 8px;
+            background-color: #F9FAFB;
+          }
+          .highlight-number {
+            background-color: #FDE68A;
+            padding: 0 2px;
+            border-radius: 2px;
+          }
+          .highlight-missing {
+            background-color: #BFDBFE;
+            padding: 0 2px;
+            border-radius: 2px;
+          }
+          .highlight-meaning {
+            color: #EF4444;
+            font-weight: bold;
+          }
+          .footer {
+            text-align: center;
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 2px solid #E0E7FF;
+            color: #6B7280;
+            font-size: 0.9em;
+          }
+          .line-item {
+            display: flex;
+            margin-bottom: 8px;
+          }
+          .line-number {
+            width: 30px;
+            font-weight: bold;
+            color: #6B7280;
+          }
+          .line-text {
+            flex: 1;
+          }
+          .file-info {
+            background-color: #EFF6FF;
+            padding: 10px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="header">
+          <h1>تقرير تحليل النصوص</h1>
+          <p>شركة موندو لينجوا للترجمة والتحليل اللغوي</p>
+          <p>تاريخ التحليل: ${timestamp}</p>
+        </div>
+        <div class="file-info">
+          <h2>معلومات الملفات</h2>
+          <p><strong>الملف المصدر:</strong> ${sourceFileName}</p>
+          <p><strong>الملف الهدف:</strong> ${targetFileName}</p>
+        </div>
+        <div class="summary">
+          <h2>ملخص التحليل</h2>
+      `;
+      if (numDiffCount === 0 && missingDiffCount === 0 && meaningDiffCount === 0) {
+        reportHTML += `<p>النصوص متطابقة تماماً [MATCH]</p>`;
+      } else {
+        reportHTML += `<ul>`;
+        if (numDiffCount > 0) reportHTML += `<li>اختلاف في الأرقام: ${numDiffCount}</li>`;
+        if (missingDiffCount > 0) reportHTML += `<li>نصوص مفقودة: ${missingDiffCount}</li>`;
+        if (meaningDiffCount > 0) reportHTML += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`;
+        reportHTML += `</ul>`;
+      }
+      reportHTML += `
+        </div>
+        <div class="explanation">
+          <h2>شرح الاختلافات</h2>
+          ${explanationHTML}
+        </div>
+        <h2>النصوص المقارنة</h2>
+        <div class="text-container">
+          <div class="text-box">
+            <h3>النص المصدر</h3>
+            <div>
+      `;
+      // تقسيم النص المصدر إلى أسطر مع أرقام الأسطر
+      const sourceLines = sourceHighlighted.split('\n');
+      sourceLines.forEach((line, index) => {
+        reportHTML += `<div class="line-item"><span class="line-number">${index + 1}:</span> <span class="line-text">${line}</span></div>`;
+      });
+      reportHTML += `
+            </div>
+          </div>
+          <div class="text-box">
+            <h3>النص الهدف</h3>
+            <div>
+      `;
+      // تقسيم النص الهدف إلى أسطر مع أرقام الأسطر
+      const targetLines = targetHighlighted.split('\n');
+      targetLines.forEach((line, index) => {
+        reportHTML += `<div class="line-item"><span class="line-number">${index + 1}:</span> <span class="line-text">${line}</span></div>`;
+      });
+      reportHTML += `
+            </div>
+          </div>
+        </div>
+        <div class="footer">
+          <p>© ${new Date().getFullYear()} شركة موندو لينجوا - جميع الحقوق محفوظة</p>
+        </div>
+      </body>
+      </html>
+      `;
+      return reportHTML;
+    }
+    // دالة تنزيل التقرير
+    function downloadReport() {
+      // التحقق من وجود نتائج تحليل
+      if (!analysisResults.sourceText || !analysisResults.targetText) {
+        alert('لا توجد نتائج تحليل متاحة للتنزيل');
+        return;
+      }
+      // إنشاء محتوى التقرير
+      const reportHTML = generateHTMLReport();
+      // إنشاء Blob من HTML
+      const blob = new Blob([reportHTML], { type: 'text/html' });
+      // إنشاء رابط التنزيل
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `تقرير_تحليل_النصوص_${new Date().toISOString().slice(0, 10)}.html`;
+      // إضافة الرابط للصفحة وتنفيذ النقر عليه ثم إزالته
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      // تحرير الموارد
+      URL.revokeObjectURL(url);
+    }
+    // إضافة مستمع حدث لزر تنزيل التقرير
+    document.getElementById('downloadReportBtn').addEventListener('click', downloadReport);
+  </script>
+</body>
+</html>