Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 4, 2025

Commit

788900f

verified ·

1 Parent(s): 5a6ee0d

Update ocr.html

Browse files

Files changed (1) hide show

ocr.html +526 -439

ocr.html CHANGED Viewed

@@ -3,513 +3,600 @@
 <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">
-  <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); }
-    .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); }
     }
   </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" 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>
-            </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" 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>
-            </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>
       </div>
-      <!-- إدخال النصوص يدويًا -->
-      <div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover">
-        <div class="space-y-6">
-          <!-- النص المصدر -->
-          <div class="group">
-            <label class="block text-lg font-bold text-gray-700 mb-3 flex items-center">
-              <i class="fas fa-language text-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>
       </div>
-      <!-- زر التحليل -->
-      <button id="submitBtn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-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-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>
-      <!-- صندوق شرح الاختلافات -->
-      <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/chat/completions';
-    const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
-    /*
-      الـ prompt المحسن:
-      أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
-      1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
-      2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
-      3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
-      إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
-      اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
-      النص المصدر:
-      {source}
-      النص الهدف:
-      {target}
-      أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.
-    */
-    const ANALYSIS_PROMPT = `أنت خبير في تحليل النصوص ومقارنتها. قم بمقارنة النص المصدر والنص الهدف بدقة عالية واكتشف الاختلافات التالية فقط:
-1. اختلافات الأرقام: ضع الرقم المختلف بين علامتي "<" و ">"
-2. النصوص المفقودة: إذا كان هناك نص موجود في المصدر ومفقود في الهدف، ضع النص المفقود بين "__" و "__"
-3. اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING]
-إذا كانت النصوص متطابقة تماماً، اكتب [MATCH] فقط.
-اعتبر النص المصدر هو المرجع الأساسي للمقارنة.
-النص المصدر:
-{source}
-النص الهدف:
-{target}
-أخرج فقط الاختلافات المحددة بالعلامات المذكورة أعلاه، دون أي شرح إضافي.`;
-    // دالة لحساب عدد الكلمات
-    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;
-    }
-    // دالة موحدة لمعالجة الملفات (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');
       }
-    });
-    // دالة عرض الأخطاء أو الرسائل
-    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-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);
-        // بناء 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
-        };
-        // استدعاء API التحليل
-        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();
-        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>[MATCH] لا توجد اختلافات.</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}`);
       }
-    });
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>موندو لينجوا - نظام OCR</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
   <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+      background-color: #f8f9fa;
     }
+    .header {
+      background-color: #3b82f6;
+      color: white;
+      padding: 15px;
+      border-radius: 10px;
+      margin-bottom: 20px;
+      text-align: center;
     }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
     }
+    .card {
+      background-color: white;
+      border-radius: 10px;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+      padding: 20px;
+      margin-bottom: 20px;
     }
+    .pdf-grid {
       display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+      gap: 10px;
+      margin-top: 15px;
     }
+    .pdf-page {
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      padding: 5px;
+      position: relative;
+      cursor: pointer;
+      transition: all 0.2s;
     }
+    .pdf-page:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
     }
+    .pdf-page.selected {
+      border: 2px solid #3b82f6;
+    }
+    .pdf-page img {
+      width: 100%;
+      height: auto;
+      border-radius: 3px;
+    }
+    .page-number {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(0,0,0,0.6);
+      color: white;
+      text-align: center;
+      font-size: 12px;
+      padding: 2px;
     }
+    .btn-primary {
+      background-color: #3b82f6;
+      border-color: #3b82f6;
     }
+    .btn-success {
+      background-color: #10b981;
+      border-color: #10b981;
     }
+    .result-text {
+      max-height: 300px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      direction: rtl;
+      border: 1px solid #ddd;
+      padding: 10px;
+      border-radius: 5px;
+      background-color: #f8f9fa;
     }
+    .spinner-border {
+      width: 1.5rem;
+      height: 1.5rem;
+      margin-left: 0.5rem;
     }
+    .logo {
+      font-weight: bold;
+      font-size: 24px;
+      display: inline-block;
+      margin-bottom: 5px;
+    }
+    .logo span {
+      color: #bfdbfe;
     }
   </style>
 </head>
+<body>
+  <div class="container">
+    <div class="header">
+      <div class="logo">مـوندو <span>لينجـوا</span></div>
+      <h1>نظام التعرف الضوئي على النصوص</h1>
+      <p class="mb-0">استخراج النصوص من الصور والملفات متعددة الصفحات</p>
+    </div>
+    <!-- بطاقة تحميل الملف -->
+    <div class="card">
+      <h3>تحميل الملف</h3>
+      <div class="mb-3">
+        <input type="file" class="form-control" id="fileInput" accept=".pdf,.jpg,.jpeg,.png">
+        <div class="form-text">يمكنك تحميل ملف PDF (حتى 30 صفحة) أو صورة</div>
       </div>
+      <button id="processBtn" class="btn btn-primary">معالجة الملف</button>
+    </div>
+    <!-- عرض حالة المعالجة -->
+    <div id="processingStatus" class="card d-none">
+      <h3>حالة المعالجة</h3>
+      <div class="alert alert-info">
+        <div class="d-flex align-items-center">
+          <div class="spinner-border text-primary" role="status"></div>
+          <span id="statusText" class="ms-2">جاري معالجة الملف...</span>
         </div>
       </div>
+      <div class="progress mt-2">
+        <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%"></div>
+      </div>
+    </div>
+    <!-- عرض صفحات PDF -->
+    <div id="pdfPagesCard" class="card d-none">
+      <h3>صفحات الملف</h3>
+      <p>اختر الصفحات التي تريد معالجتها (انقر للتحديد)</p>
+      <div class="mb-3">
+        <button id="selectAllBtn" class="btn btn-sm btn-outline-primary me-2">تحديد الكل</button>
+        <button id="deselectAllBtn" class="btn btn-sm btn-outline-secondary">إلغاء تحديد الكل</button>
       </div>
+      <div id="pdfPagesContainer" class="pdf-grid"></div>
+      <div class="mt-3">
+        <button id="extractImagesBtn" class="btn btn-success me-2">تحويل إلى صور</button>
+        <button id="extractTextBtn" class="btn btn-primary">استخراج النص</button>
+      </div>
+    </div>
+    <!-- عرض النتائج -->
+    <div id="resultsCard" class="card d-none">
+      <h3>النص المستخرج</h3>
+      <div id="resultText" class="result-text mt-3">
+        لم يتم استخراج نص بعد.
       </div>
+      <div class="mt-3">
+        <button id="copyTextBtn" class="btn btn-outline-primary me-2">نسخ النص</button>
+        <button id="downloadTextBtn" class="btn btn-success">تنزيل النص</button>
+      </div>
+    </div>
   </div>
   <script>
+    // تهيئة PDF.js
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
+    // إعدادات API4AI OCR
+    const RAPIDAPI_KEY = 'eb11693cddmshb8bd157e05b74acp1f6aa4jsn4369fa546e55';
+    const OCR_API_URL = 'https://ocr43.p.rapidapi.com/v1/results';
+    // متغيرات عامة
+    let documentPages = [];
+    let selectedPages = [];
+    let extractedTexts = [];
+    // عناصر DOM
+    const fileInput = document.getElementById('fileInput');
+    const processBtn = document.getElementById('processBtn');
+    const processingStatus = document.getElementById('processingStatus');
+    const statusText = document.getElementById('statusText');
+    const progressBar = document.getElementById('progressBar');
+    const pdfPagesCard = document.getElementById('pdfPagesCard');
+    const pdfPagesContainer = document.getElementById('pdfPagesContainer');
+    const selectAllBtn = document.getElementById('selectAllBtn');
+    const deselectAllBtn = document.getElementById('deselectAllBtn');
+    const extractImagesBtn = document.getElementById('extractImagesBtn');
+    const extractTextBtn = document.getElementById('extractTextBtn');
+    const resultsCard = document.getElementById('resultsCard');
+    const resultText = document.getElementById('resultText');
+    const copyTextBtn = document.getElementById('copyTextBtn');
+    const downloadTextBtn = document.getElementById('downloadTextBtn');
+    // إضافة مستمعات الأحداث
+    document.addEventListener('DOMContentLoaded', function() {
+      processBtn.addEventListener('click', processFile);
+      selectAllBtn.addEventListener('click', selectAllPages);
+      deselectAllBtn.addEventListener('click', deselectAllPages);
+      extractImagesBtn.addEventListener('click', extractImages);
+      extractTextBtn.addEventListener('click', extractText);
+      copyTextBtn.addEventListener('click', copyText);
+      downloadTextBtn.addEventListener('click', downloadText);
+    });
+    // معالجة الملف
+    async function processFile() {
+      if (!fileInput.files || fileInput.files.length === 0) {
+        alert('الرجاء اختيار ملف أولاً');
+        return;
+      }
+      const file = fileInput.files[0];
+      // إظهار حالة المعالجة
+      processingStatus.classList.remove('d-none');
+      statusText.textContent = 'جاري معالجة الملف...';
+      progressBar.style.width = '0%';
+      // إخفاء بطاقات أخرى
+      pdfPagesCard.classList.add('d-none');
+      resultsCard.classList.add('d-none');
+      // إفراغ مصفوفات الصفحات
+      documentPages = [];
+      selectedPages = [];
+      extractedTexts = [];
+      try {
+        const fileType = file.name.split('.').pop().toLowerCase();
+        if (fileType === 'pdf') {
+          await processPdf(file);
+        } else if (['jpg', 'jpeg', 'png'].includes(fileType)) {
+          await processImage(file);
+        } else {
+          throw new Error('نوع الملف غير مدعوم. يرجى اختيار ملف PDF أو صورة.');
         }
+        // إظهار بطاقة صفحات PDF
+        pdfPagesCard.classList.remove('d-none');
+        // إخفاء حالة المعالجة
+        processingStatus.classList.add('d-none');
+      } catch (error) {
+        console.error('Error processing file:', error);
+        statusText.textContent = `خطأ: ${error.message}`;
+        // لا نخفي حالة المعالجة لإظهار الخطأ
       }
     }
+    // معالجة ملف PDF
+    async function processPdf(file) {
+      try {
+        // تحميل ملف PDF
+        const arrayBuffer = await file.arrayBuffer();
+        const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        // التحقق من عدد الصفحات
+        const numPages = pdfDoc.numPages;
+        if (numPages > 30) {
+          alert('هذا الملف يحتوي على أكثر من 30 صفحة. سيتم معالجة أول 30 صفحة فقط.');
         }
+        // مسح حاوية الصفحات
+        pdfPagesContainer.innerHTML = '';
+        // عرض أول 30 صفحة كصور مصغرة
+        const maxPages = Math.min(numPages, 30);
+        for (let i = 1; i <= maxPages; i++) {
+          // تحديث شريط التقدم
+          progressBar.style.width = `${(i / maxPages) * 100}%`;
+          statusText.textContent = `جاري معالجة الصفحة ${i} من ${maxPages}...`;
+          // تحويل الصفحة إلى صورة
+          const pageImage = await convertPdfPageToImage(pdfDoc, i);
+          // إضافة الصفحة إلى المصفوفة
+          documentPages.push({
+            pageNumber: i,
+            imageData: pageImage.imageData,
+            width: pageImage.width,
+            height: pageImage.height
+          });
+          // إنشاء عنصر للصفحة في واجهة المستخدم
+          createPageElement(pageImage.imageData, i);
         }
+      } catch (error) {
+        console.error('Error processing PDF:', error);
+        throw error;
       }
     }
+    // معالجة ملف صورة
+    async function processImage(file) {
       try {
+        // قراءة الصورة كـ Data URL
+        const imageData = await readFileAsDataURL(file);
+        // إنشاء صورة لقياس أبعادها
+        const img = new Image();
+        await new Promise((resolve, reject) => {
+          img.onload = resolve;
+          img.onerror = reject;
+          img.src = imageData;
+        });
+        // مسح حاوية الصفحات
+        pdfPagesContainer.innerHTML = '';
+        // إضافة الصورة إلى المصفوفة
+        documentPages = [{
+          pageNumber: 1,
+          imageData: imageData,
+          width: img.width,
+          height: img.height
+        }];
+        // إنشاء عنصر للصورة في واجهة المستخدم
+        createPageElement(imageData, 1);
+        // تحديث شريط التقدم
+        progressBar.style.width = '100%';
+        statusText.textContent = 'تمت معالجة الصورة بنجاح';
       } catch (error) {
+        console.error('Error processing image:', error);
+        throw error;
       }
+    }
+    // تحويل صفحة PDF إلى صورة
+    async function convertPdfPageToImage(pdfDoc, pageNumber, scale = 1.5) {
       try {
+        // الحصول على الصفحة من مستند PDF
+        const page = await pdfDoc.getPage(pageNumber);
+        // إنشاء عنصر canvas لرسم الصفحة
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        // ضبط حجم الـ canvas بناءً على حجم الصفحة ومقياس التكبير
+        const viewport = page.getViewport({ scale });
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        // رسم الصفحة على الـ canvas
+        await page.render({
+          canvasContext: context,
+          viewport: viewport
+        }).promise;
+        // تحويل الـ canvas إلى صورة بصيغة PNG
+        return {
+          imageData: canvas.toDataURL('image/png'),
+          width: viewport.width,
+          height: viewport.height,
+          pageNumber: pageNumber
+        };
       } catch (error) {
+        console.error(`Error converting PDF page ${pageNumber} to image:`, error);
+        throw error;
       }
     }
+    // إنشاء عنصر للصفحة في واجهة المستخدم
+    function createPageElement(imageData, pageNumber) {
+      const pageDiv = document.createElement('div');
+      pageDiv.className = 'pdf-page';
+      pageDiv.dataset.page = pageNumber;
+      const img = document.createElement('img');
+      img.src = imageData;
+      img.alt = `صفحة ${pageNumber}`;
+      const pageNumberDiv = document.createElement('div');
+      pageNumberDiv.className = 'page-number';
+      pageNumberDiv.textContent = `صفحة ${pageNumber}`;
+      pageDiv.appendChild(img);
+      pageDiv.appendChild(pageNumberDiv);
+      // إضافة حدث النقر للتحديد
+      pageDiv.addEventListener('click', function() {
+        this.classList.toggle('selected');
+        // تحديث مصفوفة الصفحات المحددة
+        const page = parseInt(this.dataset.page);
+        if (this.classList.contains('selected')) {
+          if (!selectedPages.includes(page)) {
+            selectedPages.push(page);
+          }
+        } else {
+          const index = selectedPages.indexOf(page);
+          if (index > -1) {
+            selectedPages.splice(index, 1);
+          }
+        }
+      });
+      pdfPagesContainer.appendChild(pageDiv);
+    }
+    // قراءة ملف كـ Data URL
+    function readFileAsDataURL(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = e => resolve(e.target.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    }
+    // تحديد كل الصفحات
+    function selectAllPages() {
+      document.querySelectorAll('.pdf-page').forEach(page => {
+        page.classList.add('selected');
+        const pageNumber = parseInt(page.dataset.page);
+        if (!selectedPages.includes(pageNumber)) {
+          selectedPages.push(pageNumber);
+        }
+      });
+    }
+    // إلغاء تحديد كل الصفحات
+    function deselectAllPages() {
+      document.querySelectorAll('.pdf-page').forEach(page => {
+        page.classList.remove('selected');
+      });
+      selectedPages = [];
+    }
+    // استخراج الصور
+    function extractImages() {
+      if (documentPages.length === 0) {
+        alert('لا توجد صفحات للمعالجة');
+        return;
+      }
+      // اختيار الصفحات المحددة فقط أو كل الصفحات إذا لم يتم تحديد أي صفحة
+      const pagesToExtract = selectedPages.length > 0
+        ? documentPages.filter(page => selectedPages.includes(page.pageNumber))
+        : documentPages;
+      if (pagesToExtract.length === 0) {
+        alert('الرجاء تحديد صفحة واحدة على الأقل');
         return;
       }
+      // إنشاء وتنزيل كل صورة
+      pagesToExtract.forEach(page => {
+        const a = document.createElement('a');
+        a.href = page.imageData;
+        a.download = `mondo_lingua_page_${page.pageNumber}.png`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      });
+      // إظهار رسالة نجاح
+      alert(`تم استخراج ${pagesToExtract.length} صورة بنجاح`);
+    }
+    // استخراج النص
+    async function extractText() {
+      if (documentPages.length === 0) {
+        alert('لا توجد صفحات للمعالجة');
+        return;
       }
+      // اختيار الصفحات المحددة فقط أو كل الصفحات إذا لم يتم تحديد أي صفحة
+      const pagesToProcess = selectedPages.length > 0
+        ? documentPages.filter(page => selectedPages.includes(page.pageNumber))
+        : documentPages;
+      if (pagesToProcess.length === 0) {
+        alert('الرجاء تحديد صفحة واحدة على الأقل');
+        return;
+      }
+      // إظهار حالة المعالجة
+      processingStatus.classList.remove('d-none');
+      statusText.textContent = 'جاري استخراج النص...';
+      progressBar.style.width = '0%';
       try {
+        extractedTexts = [];
+        // معالجة كل صفحة
+        for (let i = 0; i < pagesToProcess.length; i++) {
+          const page = pagesToProcess[i];
+          // تحديث التقدم
+          progressBar.style.width = `${((i + 1) / pagesToProcess.length) * 100}%`;
+          statusText.textContent = `جاري معالجة الصفحة ${i + 1} من ${pagesToProcess.length}...`;
+          // استخراج النص من الصورة باستخدام OCR API
+          const pageText = await extractTextFromImage(page.imageData, page.pageNumber);
+          extractedTexts.push(pageText);
+        }
+        // جمع النصوص المستخرجة
+        const combinedText = extractedTexts.join('\n\n');
+        // عرض النص المستخرج
+        resultText.textContent = combinedText;
+        resultsCard.classList.remove('d-none');
+        // إخفاء حالة المعالجة
+        processingStatus.classList.add('d-none');
+        // التمرير إلى النتائج
+        resultsCard.scrollIntoView({ behavior: 'smooth' });
+      } catch (error) {
+        console.error('Error extracting text:', error);
+        statusText.textContent = `خطأ: ${error.message}`;
+      }
+    }
+    // استخراج النص من صورة باستخدام API4AI OCR
+    async function extractTextFromImage(imageData, pageNumber) {
+      try {
+        // تحويل Data URL إلى Blob
+        const response = await fetch(imageData);
+        const blob = await response.blob();
+        // إنشاء FormData وإضافة الصورة
+        const formData = new FormData();
+        formData.append('image', blob, `page_${pageNumber}.png`);
+        // طلب OCR
+        const ocrResponse = await fetch(OCR_API_URL, {
           method: 'POST',
           headers: {
+            'X-RapidAPI-Key': RAPIDAPI_KEY,
+            'X-RapidAPI-Host': 'ocr43.p.rapidapi.com'
           },
+          body: formData
         });
+        if (!ocrResponse.ok) {
+          throw new Error(`فشل في طلب OCR: ${ocrResponse.status}`);
         }
+        const data = await ocrResponse.json();
+        try {
+          // استخراج النص من الاستجابة
+          const text = data.results[0].entities[0].objects[0].entities[0].text;
+          return `=== صفحة ${pageNumber} ===\n${text}`;
+        } catch (e) {
+          console.error('Error parsing OCR response:', e);
+          return `=== صفحة ${pageNumber} ===\n[خطأ في معالجة النص]`;
         }
       } catch (error) {
+        console.error(`Error in OCR for page ${pageNumber}:`, error);
+        throw error;
       }
+    }
+    // نسخ النص
+    function copyText() {
+      const text = resultText.textContent;
+      if (!text || text === 'لم يتم استخراج نص بعد.') {
+        alert('لا يوجد نص للنسخ');
+        return;
+      }
+      navigator.clipboard.writeText(text)
+        .then(() => alert('تم نسخ النص بنجاح'))
+        .catch(err => alert('حدث خطأ أثناء نسخ النص: ' + err));
+    }
+    // تنزيل النص
+    function downloadText() {
+      const text = resultText.textContent;
+      if (!text || text === 'لم يتم استخراج نص بعد.') {
+        alert('لا يوجد نص للتنزيل');
+        return;
+      }
+      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'mondo_lingua_ocr_text.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
   </script>
 </body>
 </html>