Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 16, 2025

Commit

b09b208

verified ·

1 Parent(s): 85521cb

Update index.html

Browse files

Files changed (1) hide show

index.html +406 -273

index.html CHANGED Viewed

@@ -1,300 +1,433 @@
 <!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            line-height: 1.6;
-            margin: 0;
-            padding: 20px;
-            background-color: #f5f5f5;
-            color: #333;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        h1 {
-            color: #2c3e50;
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .text-areas {
-            display: flex;
-            flex-direction: row;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-        .text-column {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-        }
-        label {
-            font-weight: bold;
-            margin-bottom: 5px;
-            color: #2c3e50;
-        }
-        textarea {
-            height: 300px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            resize: vertical;
-            font-size: 16px;
-            font-family: inherit;
-        }
-        button {
-            background-color: #3498db;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 16px;
-            transition: background-color 0.3s;
-        }
-        button:hover {
-            background-color: #2980b9;
-        }
-        .result, .explanation {
-            margin-top: 30px;
-            padding: 20px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            background-color: #f9f9f9;
-        }
-        .result h2, .explanation h2 {
-            color: #2c3e50;
-            margin-top: 0;
-        }
-        .spinner {
-            display: none;
-            margin: 20px auto;
-            width: 50px;
-            height: 50px;
-            border: 5px solid #f3f3f3;
-            border-top: 5px solid #3498db;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .diff-highlight {
-            display: inline;
-            padding: 2px 0;
-        }
-        .diff-added {
-            background-color: #c8e6c9;
-        }
-        .diff-removed {
-            background-color: #ffcdd2;
-            text-decoration: line-through;
-        }
-        .diff-changed {
-            background-color: #fff9c4;
-            border: 1px dashed #f39c12;
-        }
-        .api-key-section {
-            margin-bottom: 20px;
-        }
-        .error-message {
-            color: #e74c3c;
-            margin-top: 10px;
-        }
-    </style>
 </head>
-<body>
-    <div class="container">
-        <h1>تطبيق مراجعة النصوص</h1>
-        <div class="api-key-section">
-            <label for="apiKey">مفتاح API (يمكنك تعديله إذا لزم الأمر):</label>
-            <input type="text" id="apiKey" value="sk-21a46269cd8e449f8aeb0cc129c36c33" style="width: 100%; padding: 8px; margin-top: 5px;">
         </div>
-        <div class="text-areas">
-            <div class="text-column">
-                <label for="sourceText">النص المصدر (الأساسي):</label>
-                <textarea id="sourceText" placeholder="أدخل النص المصدر هنا..."></textarea>
-            </div>
-            <div class="text-column">
-                <label for="targetText">النص الهدف (المشكوك فيه):</label>
-                <textarea id="targetText" placeholder="أدخل النص الهدف هنا..."></textarea>
-            </div>
         </div>
-        <div style="text-align: center;">
-            <button id="compareButton">قارن النصوص</button>
         </div>
-        <div id="spinner" class="spinner"></div>
-        <div id="errorMessage" class="error-message"></div>
-        <!-- قسم عرض نتائج المقارنة -->
-        <div id="result" class="result" style="display: none;">
-            <h2>نتائج المقارنة:</h2>
-            <div id="comparisonResults"></div>
         </div>
-        <!-- قسم عرض الشرح إذا وُجد -->
-        <div id="explanation" class="explanation" style="display: none;">
-            <h2>شرح النتائج:</h2>
-            <div id="explanationContent"></div>
         </div>
-    </div>
-    <script>
-        document.getElementById('compareButton').addEventListener('click', async function() {
-            const sourceText = document.getElementById('sourceText').value.trim();
-            const targetText = document.getElementById('targetText').value.trim();
-            const apiKey = document.getElementById('apiKey').value.trim();
-            const errorMessageElement = document.getElementById('errorMessage');
-            const resultElement = document.getElementById('result');
-            const comparisonResultsElement = document.getElementById('comparisonResults');
-            const explanationElement = document.getElementById('explanation');
-            const explanationContentElement = document.getElementById('explanationContent');
-            const spinner = document.getElementById('spinner');
-            errorMessageElement.textContent = '';
-            resultElement.style.display = 'none';
-            explanationElement.style.display = 'none';
-            if (!sourceText || !targetText) {
-                errorMessageElement.textContent = 'الرجاء إدخال كلا النصين للمقارنة';
-                return;
-            }
-            if (!apiKey) {
-                errorMessageElement.textContent = 'الرجاء إدخال مفتاح API صالح';
-                return;
-            }
-            spinner.style.display = 'block';
-            try {
-                // تحديث الطلب ليشمل توجيه للموديل بوضع الاختلافات داخل << >>
-                const prompt = `
 قارن بين النص المصدر والنص الهدف وحدد الاختلافات بينهما، بما في ذلك:
 1. الأرقام المكتوبة بشكل خاطئ
 2. النصوص المفقودة
 3. النصوص الفاسدة أو غير المفهومة
 4. النصوص المختلفة في المعنى
-يرجى وضع النصوص المختلفة أو التي بها خطأ داخل علامتي << و >>.
-كما يُرجى إضافة قسم "الشرح:" في نهاية التحليل يوضح أسباب الاختلاف وأهميتها.
 النص المصدر:
 ${sourceText}
 النص الهدف:
 ${targetText}
-                `;
-                const response = await fetch('https://api.deepseek.com/chat/completions', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${apiKey}`
-                    },
-                    body: JSON.stringify({
-                        model: 'deepseek-reasoner',
-                        messages: [
-                            { role: 'system', content: 'أنت مساعد مفيد متخصص في مراجعة النصوص وتحديد الاختلافات بينها بدقة عالية.' },
-                            { role: 'user', content: prompt }
-                        ],
-                        stream: false
-                    })
-                });
-                if (!response.ok) {
-                    throw new Error(`خطأ في الاتصال بالـ API: ${response.status} ${response.statusText}`);
-                }
-                const data = await response.json();
-                const analysisResult = data.choices[0].message.content;
-                // فصل التحليل عن قسم الشرح إن وُجد
-                let analysisPart = analysisResult;
-                let explanationPart = '';
-                if (analysisResult.includes('الشرح:')) {
-                    const splitParts = analysisResult.split('الشرح:');
-                    analysisPart = splitParts[0];
-                    explanationPart = splitParts[1];
-                }
-                comparisonResultsElement.innerHTML = formatAnalysisResult(analysisPart, sourceText, targetText);
-                if(explanationPart.trim()){
-                    explanationContentElement.innerHTML = explanationPart.replace(/\n/g, '<br>');
-                    explanationElement.style.display = 'block';
-                }
-                resultElement.style.display = 'block';
-            } catch (error) {
-                errorMessageElement.textContent = `حدث خطأ: ${error.message}`;
-                console.error('Error:', error);
-            } finally {
-                spinner.style.display = 'none';
-            }
         });
-        function formatAnalysisResult(analysisText, sourceText, targetText) {
-            // تحويل النص إلى HTML مع إبراز الاختلافات والتظليل:
-            let formattedText = analysisText
-                .replace(/\n/g, '<br>')
-                .replace(/الأرقام المكتوبة بشكل خاطئ:|الأرقام غير الصحيحة:/gi, '<strong style="color: #e74c3c;">الأرقام المكتوبة بشكل خاطئ:</strong>')
-                .replace(/النصوص المفقودة:/gi, '<strong style="color: #e74c3c;">النصوص المفقودة:</strong>')
-                .replace(/النصوص الفاسدة:|النصوص غير المفهومة:/gi, '<strong style="color: #e74c3c;">النصوص الفاسدة:</strong>')
-                .replace(/النصوص المختلفة في المعنى:/gi, '<strong style="color: #e74c3c;">النصوص المختلفة في المعنى:</strong>');
-            // إبراز النصوص داخل علامتي << >>
-            formattedText = formattedText.replace(/<<(.+?)>>/g, '<span class="diff-highlight diff-changed"><<$1>></span>');
-            // إبراز الاختلافات بناءً على موقعها في النص المصدر أو النص الهدف
-            formattedText = formattedText
-                .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>المقارنة السطرية:</h3><div style="display: flex; gap: 20px;">';
-            // عمود النص المصدر
-            visualComparison += '<div style="flex: 1;"><h4>النص المصدر:</h4><pre style="background-color: #f8f8f8; padding: 10px; border-radius: 4px; overflow-x: auto;">';
-            for (let i = 0; i < maxLines; i++) {
-                if (i < sourceLines.length) {
-                    visualComparison += `<div>${i+1}. ${sourceLines[i] || ''}</div>`;
-                }
-            }
-            visualComparison += '</pre></div>';
-            // عمود النص الهدف
-            visualComparison += '<div style="flex: 1;"><h4>النص الهدف:</h4><pre style="background-color: #f8f8f8; padding: 10px; border-radius: 4px; overflow-x: auto;">';
-            for (let i = 0; i < maxLines; i++) {
-                if (i < targetLines.length) {
-                    visualComparison += `<div>${i+1}. ${targetLines[i] || ''}</div>`;
-                }
-            }
-            visualComparison += '</pre></div>';
-            visualComparison += '</div>';
-            return formattedText + '<br><br>' + visualComparison;
         }
-    </script>
 </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>
+  <!-- استيراد مكتبات Tailwind وFont Awesome وMammoth -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <style>
+    /* ================================
+       تنسيقات الحركات والتأثيرات (من الكود الأول)
+    ================================= */
+    @keyframes gradient {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    .animate-gradient {
+      background-size: 200% 200%;
+      animation: gradient 15s ease infinite;
+    }
+    .transition-all { transition: all 0.3s ease-in-out; }
+    .animate-scale { transition: transform 0.2s ease-in-out; }
+    .animate-scale:hover { transform: scale(1.02); }
+    .pulse-animation { animation: pulse 2s infinite; }
+    @keyframes pulse {
+      0% { box-shadow: 0 0 0 0 rgba(156,39,176,0.4); }
+      70% { box-shadow: 0 0 0 10px rgba(156,39,176,0); }
+      100% { box-shadow: 0 0 0 0 rgba(156,39,176,0); }
+    }
+    /* ================================
+       تنسيقات النصوص والتحديد (من الكود الأول)
+    ================================= */
+    .text-comparison { line-height: 1.8; white-space: pre-wrap; }
+    .highlight-number {
+      background-color: #FDE68A;
+      padding: 0 4px;
+      border-radius: 3px;
+      font-weight: bold;
+    }
+    .highlight-missing {
+      background-color: #BFDBFE;
+      padding: 0 4px;
+      border-radius: 3px;
+      font-style: italic;
+    }
+    .highlight-meaning {
+      background-color: #fecaca;
+      color: #B91C1C;
+      padding: 0 4px;
+      border-radius: 3px;
+      font-weight: bold;
+    }
+    /* ================================
+       تنسيق عرض السطور في المعاينة (من الكود الأول)
+    ================================= */
+    .split-view {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1rem;
+    }
+    .line-item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
+    }
+    .line-number {
+      width: 30px;
+      font-weight: bold;
+      color: #4B5563;
+      flex-shrink: 0;
+    }
+    .line-text { flex: 1; }
+    /* ================================
+       تحسين تنسيق البطاقات والعناصر (من الكود الأول)
+    ================================= */
+    .card-hover {
+      transition: all 0.3s ease;
+    }
+    .card-hover:hover {
+      box-shadow: 0 10px 25px -5px rgba(156,39,176,0.1), 0 10px 10px -5px rgba(156,39,176,0.04);
+      transform: translateY(-2px);
+    }
+    /* ================================
+       إضافات من الكود الثاني للتنسيق المفصل للاختلافات
+    ================================= */
+    .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">
+  <div class="min-h-screen pb-12">
+    <!-- ============ رأس الصفحة ============ -->
+    <header class="bg-gradient-to-r from-indigo-700 via-purple-700 to-pink-700 animate-gradient text-white py-10 mb-10 shadow-xl">
+      <div class="max-w-6xl mx-auto px-4">
+        <h1 class="text-5xl font-bold text-center mb-4 animate-scale">نظام شركة موندو لينجوا - مراجعة النصوص</h1>
+        <p class="text-center text-xl text-blue-100 opacity-90">مقارنة وتحليل النصوص بدقة عالية</p>
+      </div>
+    </header>
+    <!-- ============ المحتوى الرئيسي ============ -->
+    <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>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- ملف السورس -->
+          <div class="group border-2 border-dashed border-indigo-300 rounded-xl p-8 text-center hover:border-indigo-500 transition-colors duration-300 bg-indigo-50 hover:bg-indigo-100">
+            <label class="cursor-pointer block">
+              <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
+              <i class="fas fa-file-upload text-5xl text-indigo-500 mb-4"></i>
+              <span class="text-lg text-indigo-600 group-hover:text-indigo-700">ملف السورس</span>
+            </label>
+          </div>
+          <!-- ملف التارجت -->
+          <div class="group border-2 border-dashed border-pink-300 rounded-xl p-8 text-center hover:border-pink-500 transition-colors duration-300 bg-pink-50 hover:bg-pink-100">
+            <label class="cursor-pointer block">
+              <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
+              <i class="fas fa-file-download text-5xl text-pink-500 mb-4"></i>
+              <span class="text-lg text-pink-600 group-hover:text-pink-700">ملف التارجت</span>
+            </label>
+          </div>
         </div>
+        <div id="processStatus" class="hidden mt-4">
+          <div class="flex items-center justify-center space-x-3 bg-indigo-100 rounded-xl p-4">
+            <div class="animate-spin h-8 w-8 border-4 border-indigo-600 rounded-full border-t-transparent"></div>
+            <span class="text-lg text-indigo-700">جارٍ معالجة الملف...</span>
+          </div>
         </div>
+      </div>
+      <!-- قسم إدخال النصوص يدويًا -->
+      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale card-hover">
+        <div class="space-y-6">
+          <!-- النص المصدر -->
+          <div class="group">
+            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-language text-indigo-600 ml-2"></i> النص المصدر
+            </label>
+            <textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-indigo-200 focus:border-indigo-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea>
+          </div>
+          <!-- النص الهدف -->
+          <div class="group">
+            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
+              <i class="fas fa-language text-pink-600 ml-2"></i> النص الهدف
+            </label>
+            <textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-pink-200 focus:border-pink-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
+          </div>
         </div>
+      </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>
+  <!-- ================================
+       جافا سكريبت: الوظائف والمعالجة
+  ================================= -->
+  <script>
+    // إعدادات 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;
+    }
+    /* =====================================
+       دوال رفع الملفات وإدخال النصوص - من الكود الأول
+    ===================================== */
+    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');
+      }
+    });
+    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');
+      }
+    });
+    /* =====================================
+       دالة التعامل مع حدث النقر على زر المقارنة
+    ===================================== */
+    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');
+      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>
 </body>
 </html>