Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on 28 days ago

Commit

35d533d

verified ·

1 Parent(s): d1351bb

Update index.html

Browse files

Files changed (1) hide show

index.html +80 -94

index.html CHANGED Viewed

@@ -32,25 +32,25 @@
     }
     /* -------------------------------
-       تنسيقات النص والتظليل (تمييز النصوص ذات المشاكل فقط)
     ------------------------------- */
     .text-comparison { line-height: 1.8; white-space: pre-wrap; }
     .highlight-missing {
-      background-color: #fb923c;  /* برتقالي مميز */
       color: #fff;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-number {
-      background-color: #fde047;  /* أصفر باهر */
       color: #000;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-meaning {
-      background-color: #a78bfa;  /* بنفسجي */
       color: #fff;
       padding: 0 4px;
       border-radius: 3px;
@@ -67,20 +67,20 @@
     }
     .line-number {
       font-weight: bold;
-      color: #374151;
       margin-left: 0.5rem;
     }
     .line-text { display: inline-block; }
     /* -------------------------------
-       تصميم البطاقات والأيقونات وتحديث ألوان الواجهة
     ------------------------------- */
     .card {
       background-color: #fff;
       border-radius: 1rem;
       box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
       padding: 2rem;
-      border: 1px solid #e5e7eb;
     }
     .card-hover:hover {
       box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
@@ -89,16 +89,16 @@
     .icon { margin-right: 0.5rem; }
   </style>
 </head>
-<body class="bg-gradient-to-br from-gray-100 via-blue-50 to-indigo-50 min-h-screen">
   <div class="min-h-screen pb-12">
     <!-- رأس الصفحة -->
-    <header class="bg-gradient-to-r from-teal-500 to-blue-500 animate-gradient text-white py-10 mb-10 shadow-xl">
       <div class="max-w-6xl mx-auto px-4 text-center">
         <h1 class="text-5xl font-bold mb-4 animate-scale">
           <i class="fas fa-chart-line icon"></i> نظام المقارنة والتحليل المتقدم
         </h1>
         <p class="text-xl opacity-90">
-          <i class="fas fa-info-circle icon"></i> تحليل دقيق لاكتشاف النصوص المفقودة، الأرقام/التواريخ، واختلاف المعاني
         </p>
       </div>
     </header>
@@ -108,30 +108,30 @@
       <!-- قسم رفع الملفات -->
       <div class="card card-hover">
         <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
-          <i class="fas fa-file-upload icon text-blue-600"></i> تحميل الملفات
         </h2>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <!-- ملف المصدر -->
-          <div class="group border-2 border-dashed border-blue-300 rounded-xl p-8 text-center bg-blue-50 hover:bg-blue-100 transition-colors duration-300">
             <label class="cursor-pointer block">
               <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
-              <i class="fas fa-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-300 rounded-xl p-8 text-center bg-purple-50 hover:bg-purple-100 transition-colors duration-300">
             <label class="cursor-pointer block">
               <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
-              <i class="fas fa-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>
@@ -142,16 +142,16 @@
           <!-- النص المصدر -->
           <div class="group">
             <label class="block text-lg font-bold text-gray-700 mb-3">
-              <i class="fas fa-language icon text-blue-600"></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">
-              <i class="fas fa-language icon text-purple-600"></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>
@@ -181,7 +181,7 @@
       </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 pulse-animation">
         <div class="flex items-center justify-center">
           <i class="fas fa-sync-alt icon ml-2"></i> تحليل ومراجعة النصوص
         </div>
@@ -196,13 +196,13 @@
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3">
-              <i class="fas fa-file-alt icon text-blue-600"></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">
-              <i class="fas fa-file-alt icon text-purple-600"></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>
@@ -226,30 +226,22 @@
     (function() {
       "use strict";
-      /* تحسين البرومت:
-         - مهمتك: مقارنة النص المصدر مع النص الهدف واستخراج كافة الاختلافات والتناقضات بينهما وفقاً للتعليمات التفصيلية التالية:
-           1. النصوص المفقودة:
-              • تحديد الكلما�� أو العبارات التي تظهر في النص المصدر ولا توجد لها مقابل في النص الهدف.
-              • قم بتمييز النص المفقود عن طريق وضعه بين علامتي __ و __.
-           2. الأرقام والتواريخ:
-              • مقارنة الأرقام والتواريخ الموجودة في كلا النصين وتحديد أي اختلاف أو عدم تطابق.
-              • قم بتمييزها بوضعها بين علامتي < و >.
-           3. اختلاف المعنى:
-              • فحص النصين للتأكد من توافق المعاني، وفي حال وجود اختلاف واضح في المعنى، يجب الإشارة إليه.
-              • قم بتمييز اختلاف المعنى باستخدام العلامتين [MEANING] و [/MEANING].
-           تعليمات إضافية:
-              • إذا كان هناك اختلاف في ترتيب الفقرات أو الكلمات، يرجى الإشارة إليه.
-              • تأكد من عدم تكرار الإشارات لنفس المشكلة في نفس السياق.
-              • في حال وجود اختلافات طفيفة لا تؤثر على المعنى، يمكن تجاهلها.
-              • قدم الناتج في شكل قائمة مرتبة لكل اختلاف مع شرح مختصر ورقم السطر إن أمكن.
-         النص المصدر:
-         {source}
-         النص الهدف:
-         {target}
-      `;
       const API_URL = 'https://api.deepseek.com/chat/completions';
       const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
@@ -262,70 +254,64 @@
       const escapeRegExp = string =>
         string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      // تقسيم النص إلى فقرات مرقمة
       const splitIntoLines = text =>
         text.split(/\n+/).map((line, i) => {
           line = line.trim();
-          if(line && !line.endsWith('.')) { line += '.'; }
           return `<div class="line-item"><span class="line-number">${i+1}:</span><span class="line-text">${line}</span></div>`;
         }).join('');
-      // الحصول على رقم السطر الذي يحتوي على عبارة معينة
       const getLineNumber = (text, substring) => {
-        const index = text.indexOf(substring);
-        if (index === -1) return "غير محدد";
-        return text.substring(0, index).split("\n").length;
       };
       /* -------------------------------
-         دوال تظليل الاختلافات على الأسطر التي بها مشاكل فقط
       ------------------------------- */
       const applyHighlights = (originalText, analysisOutput) => {
-        // استخراج العبارات الخاصة بكل نوع من الاختلافات بدون تكرار
-        let missingMatches = [];
         let match;
         const missingRegex = /__(.*?)__/g;
         while ((match = missingRegex.exec(analysisOutput)) !== null) {
-          let phrase = match[1].trim();
-          if (phrase && !missingMatches.includes(phrase)) missingMatches.push(phrase);
         }
-        let numberMatches = [];
         const numberRegex = /<([^<>]+)>/g;
         while ((match = numberRegex.exec(analysisOutput)) !== null) {
-          let phrase = match[1].trim();
-          if (phrase && !numberMatches.includes(phrase)) numberMatches.push(phrase);
         }
-        let meaningMatches = [];
         const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
         while ((match = meaningRegex.exec(analysisOutput)) !== null) {
-          let phrase = match[1].trim();
-          if (phrase && !meaningMatches.includes(phrase)) meaningMatches.push(phrase);
         }
-        // معالجة كل سطر وتطبيق التظليل إذا احتوى على عبارة مشكلة
-        let lines = originalText.split("\n");
-        let highlightedLines = lines.map(line => {
-          let newLine = line;
-          missingMatches.forEach(phrase => {
-            if(newLine.includes(phrase)){
-              newLine = newLine.replace(new RegExp(escapeRegExp(phrase), 'g'), `<span class="highlight-missing">${phrase}</span>`);
-            }
-          });
-          numberMatches.forEach(phrase => {
-            if(newLine.includes(phrase)){
-              newLine = newLine.replace(new RegExp(escapeRegExp(phrase), 'g'), `<span class="highlight-number">${phrase}</span>`);
-            }
-          });
-          meaningMatches.forEach(phrase => {
-            if(newLine.includes(phrase)){
-              newLine = newLine.replace(new RegExp(escapeRegExp(phrase), 'g'), `<span class="highlight-meaning">${phrase}</span>`);
-            }
-          });
-          return newLine;
-        });
-        return highlightedLines.join("\n");
       };
-      // توليد شرح تفصيلي للاختلافات مع أيقونات بسيطة
       const generateExplanation = (sourceText, analysisOutput) => {
         let steps = [];
         let match;
@@ -360,7 +346,7 @@
           }
         }
         if (steps.length === 0) {
-          return `<p><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>`;
         }
         return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`;
       };
@@ -457,9 +443,9 @@
         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 mr-3"></div>
                                        <span>جارٍ التحليل...</span>
                                      </div>`;
           document.getElementById('errorsList').appendChild(progressDiv);

     }
     /* -------------------------------
+       تنسيقات النص والتظليل (استخدام ألوان مميزة)
     ------------------------------- */
     .text-comparison { line-height: 1.8; white-space: pre-wrap; }
     .highlight-missing {
+      background-color: #f87171;  /* أحمر */
       color: #fff;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-number {
+      background-color: #facc15;  /* أصفر */
       color: #000;
       padding: 0 4px;
       border-radius: 3px;
       font-weight: bold;
     }
     .highlight-meaning {
+      background-color: #60a5fa;  /* أزرق */
       color: #fff;
       padding: 0 4px;
       border-radius: 3px;
     }
     .line-number {
       font-weight: bold;
+      color: #4B5563;
       margin-left: 0.5rem;
     }
     .line-text { display: inline-block; }
     /* -------------------------------
+       تصميم البطاقات والأيقونات
     ------------------------------- */
     .card {
       background-color: #fff;
       border-radius: 1rem;
       box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
       padding: 2rem;
+      border: 1px solid #f3f4f6;
     }
     .card-hover:hover {
       box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
     .icon { margin-right: 0.5rem; }
   </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 text-center">
         <h1 class="text-5xl font-bold mb-4 animate-scale">
           <i class="fas fa-chart-line icon"></i> نظام المقارنة والتحليل المتقدم
         </h1>
         <p class="text-xl opacity-90">
+          <i class="fas fa-info-circle icon"></i> تحليل دقيق لاكتشاف النصوص المفقودة، الأرقام/التواريخ واختلاف المعنى
         </p>
       </div>
     </header>
       <!-- قسم رفع الملفات -->
       <div class="card card-hover">
         <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
+          <i class="fas fa-file-upload icon text-indigo-600"></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 bg-indigo-50 hover:bg-indigo-100 transition-colors duration-300">
             <label class="cursor-pointer block">
               <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
+              <i class="fas fa-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 bg-pink-50 hover:bg-pink-100 transition-colors duration-300">
             <label class="cursor-pointer block">
               <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
+              <i class="fas fa-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="group">
             <label class="block text-lg font-bold text-gray-700 mb-3">
+              <i class="fas fa-language icon text-indigo-600"></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">
+              <i class="fas fa-language icon text-pink-600"></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>
       </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 pulse-animation">
         <div class="flex items-center justify-center">
           <i class="fas fa-sync-alt icon ml-2"></i> تحليل ومراجعة النصوص
         </div>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3">
+              <i class="fas fa-file-alt icon text-indigo-600"></i> النص المصدر (مع التعليم)
             </h4>
+            <div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-6 min-h-[200px] border-2 border-indigo-100 text-comparison"></div>
           </div>
           <div>
             <h4 class="text-lg font-bold text-gray-700 mb-3">
+              <i class="fas fa-file-alt icon text-pink-600"></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>
     (function() {
       "use strict";
+      /* تحسين البرومبت:
+         - مهمتك: مقارنة النص المصدر والنص الهدف واستخراج الاختلافات التالية بدقة:
+             1. **النصوص المفقودة:** الكلمات أو العبارات التي لم تُترجم من النص المصدر.
+             2. **الأرقام والتواريخ:** التي لا تتطابق بين النص المصدر والنص الهدف.
+             3. **اختلاف المعنى:** في حال وجود اختلاف في معنى النص أو سياقه.
+         - التنسيق المطلوب:
+             • ضع النصوص المفقودة بين علامتي __ والنص المفقود__.
+             • ضع الأرقام والتواريخ بين علامتي < والرقم/التاريخ>.
+             • ضع اختلاف المعنى بين [MEANING] و [/MEANING].
+         - يُرجى تضمين رقم السطر لكل اختلاف إن أمكن وتقديم النتائج في قائمة مفصلة مع شرح مختصر.
+النص المصدر:
+{source}
+النص الهدف:
+{target}`;
       const API_URL = 'https://api.deepseek.com/chat/completions';
       const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
       const escapeRegExp = string =>
         string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      // تقسيم النص إلى فقرات مع ترقيم السطور
       const splitIntoLines = text =>
         text.split(/\n+/).map((line, i) => {
           line = line.trim();
+          if(line && !/[.?!]$/.test(line)) { line += '.'; }
           return `<div class="line-item"><span class="line-number">${i+1}:</span><span class="line-text">${line}</span></div>`;
         }).join('');
+      // الحصول على رقم السطر الذي يحتوي على عبارة معينة (مع تحسين حساسية الأحرف والمسافات)
       const getLineNumber = (text, substring) => {
+        const regex = new RegExp(escapeRegExp(substring.trim()), 'i');
+        const lines = text.split(/\n+/);
+        for (let i = 0; i < lines.length; i++) {
+          if (regex.test(lines[i])) return i + 1;
+        }
+        return "غير محدد";
       };
       /* -------------------------------
+         دوال تظليل الاختلافات (باستخدام العلامات المحددة)
       ------------------------------- */
       const applyHighlights = (originalText, analysisOutput) => {
+        let highlightedText = originalText;
         let match;
+        // تظليل النصوص المفقودة
         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), 'gi');
+            highlightedText = highlightedText.replace(phraseRegex, replacement);
+          }
         }
+        // تظليل الأرقام والتواريخ
         const numberRegex = /<([^<>]+)>/g;
         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), 'gi');
+            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), 'gi');
+            highlightedText = highlightedText.replace(phraseRegex, replacement);
+          }
         }
+        return highlightedText;
       };
+      // توليد شرح تفصيلي للاختلافات مع أيقونات مميزة
       const generateExplanation = (sourceText, analysisOutput) => {
         let steps = [];
         let match;
           }
         }
         if (steps.length === 0) {
+          return `<p><i class="fas fa-check-circle mr-2"></i> النصوص متطابقة ولا يوجد اختلاف يُذكر.</p>`;
         }
         return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`;
       };
         try {
           const progressDiv = document.createElement('div');
+          progressDiv.className = "bg-indigo-100 p-4 rounded-xl mb-4";
           progressDiv.innerHTML = `<div class="flex items-center">
+                                       <div class="animate-spin h-6 w-6 border-4 border-indigo-600 rounded-full border-t-transparent mr-3"></div>
                                        <span>جارٍ التحليل...</span>
                                      </div>`;
           document.getElementById('errorsList').appendChild(progressDiv);