Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 13

Commit

d1351bb

verified ·

1 Parent(s): 6712d18

Update index.html

Browse files

Files changed (1) hide show

index.html +86 -90

index.html CHANGED Viewed

@@ -32,25 +32,25 @@
     }
     /* -------------------------------
-       تنسيقات النص والتظليل (استخدام ألوان مميزة)
     ------------------------------- */
     .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;
@@ -67,20 +67,20 @@
     }
     .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);
@@ -89,16 +89,16 @@
     .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>
@@ -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-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>
@@ -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-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>
@@ -181,7 +181,7 @@
       </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>
@@ -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-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>
@@ -227,44 +227,31 @@
       "use strict";
       /* تحسين البرومت:
-         - مهمتك: مقارنة النص المصدر والنص الهدف واستخراج الاختلافات التالية:
-             1. النصوص المفقودة: الكلمات أو العبارات التي لم تُترجم من المصدر (لا يوجد لها مقابل في الهدف).
-             2. ال��رقام والتواريخ: التي لا تتطابق بين المصدر والهدف.
-             3. اختلاف المعنى: في حال وجود اختلاف واضح في معنى النص.
-         - يُرجى تمييز:
-             • النصوص المفقودة بوضعها بين علامتي __ و __.
-             • الأرقام والتواريخ بوضعها بين علامتي < و >.
-             • اختلاف المعنى بوضعها بين [MEANING] و [/MEANING].
-         - قدم الناتج في شكل قائمة مفصلة مع شرح مختصر لكل اختلاف، مع الإشارة إلى رقم السطر إن أمكن.
-      */
       const API_URL = 'https://api.deepseek.com/chat/completions';
       const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
-      const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة التقنية وتحليل النصوص بدقة. مهمتك هي مقارنة النص المصدر مع النص الهدف واستخراج كافة الاختلافات والتناقضات بينهما، مع اتباع التعليمات التفصيلية التالية:
-النصوص المفقودة:
-تحديد الكلمات أو العبارات التي تظهر في النص المصدر ولا توجد لها مقابل في النص الهدف.
-قم بتمييز كل نص مفقود عن طريق وضعه بين علامتي __ (مثال: مثال).
-الأرقام والتواريخ:
-مقارنة الأرقام والتواريخ الموجودة في كلا النصين وتحديد أي اختلافات أو عدم تطابق.
-قم بتمييز الأرقام أو التواريخ التي لا تتطابق بوضعها بين علامتي < و > (مثال: <2023> أو <15-04-2023>).
-اختلاف المعنى:
-فحص النصين للتأكد من توافق المعاني، وفي حال وجود اختلاف واضح في المعنى، يجب الإشارة إليه.
-قم بتمييز الاختلافات في المعنى باستخدام العلامتين [MEANING] و [/MEANING] (مثال: [MEANING]تغيير في الفكرة[/MEANING]).
-تعليمات إضافية:
-تنسيق الإخراج:
-قدم الناتج في شكل قائمة تفصيلية لكل اختلاف.
-ضمن كل بند من القائمة، اذكر شرحاً مختصراً يوضح طبيعة الاختلاف، مع ذكر رقم السطر أو رقم الفقرة إن أمكن ذلك.
-الدقة والشمول:
-تأكد من مراجعة النصوص بدقة، مع تضمين جميع الاختلافات سواء كانت تركيبية، نحوية أو دلالية.
-لا تقم بتعديل أو تغيير المحتوى الأصلي للنصين؛ فقط قم بتحديد الاختلافات.
-النص المصدر:
-{source}
-النص الهدف:
-{target}`;
       /* -------------------------------
          دوال مساعدة عامة
@@ -291,42 +278,51 @@
       };
       /* -------------------------------
-         دوال تظليل الاختلافات (استخدام العلامات المستخرجة من البرومت)
       ------------------------------- */
       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), 'g');
-            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), '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;
       };
       // توليد شرح تفصيلي للاختلافات مع أيقونات بسيطة
@@ -461,9 +457,9 @@
         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);

     }
     /* -------------------------------
+       تنسيقات النص والتظليل (تمييز النصوص ذات المشاكل فقط)
     ------------------------------- */
     .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;
     }
     .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);
     .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>
       <!-- قسم رفع الملفات -->
       <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>
           <!-- النص المصدر -->
           <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>
       </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>
         <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>
       "use strict";
       /* تحسين البرومت:
+         - مهمتك: مقارنة النص المصدر مع النص الهدف واستخراج كافة الاختلافات والتناقضات بينهما وفقاً للتعليمات التفصيلية التالية:
+           1. النصوص المفقودة:
+              • تحديد الكلمات أو العبارات التي تظهر في النص المصدر ولا توجد لها مقابل في النص الهدف.
+              • قم بتمييز النص المفقود عن طريق وضعه بين علامتي __ و __.
+           2. الأرقام والتواريخ:
+              • مقارنة الأرقام والتواريخ الموجودة في كلا النصين وتحديد أي اختلاف أو عدم تطابق.
+              • قم بتمييزها بوضعها بين علامتي < و >.
+           3. اختلاف المعنى:
+              • فحص النصين للتأكد من توافق المعاني، وفي حال وجود اختلاف واضح في المعنى، يجب الإشارة إليه.
+              • قم بتمييز اختلاف المعنى باستخدام العلامتين [MEANING] و [/MEANING].
+           تعليمات إضافية:
+              • إذا كان هناك اختلاف في ترتيب الفقرات أو الكلمات، يرجى الإشارة إليه.
+              • تأكد من عدم تكرار الإشارات لنفس المشكلة في نفس السياق.
+              • في حال وجود اختلافات طفيفة لا تؤثر على المعنى، يمكن تجاهلها.
+              • قدم الناتج في شكل قائمة مرتبة لكل اختلاف مع شرح مختصر ورقم السطر إن أمكن.
+         النص المصدر:
+         {source}
+         النص الهدف:
+         {target}
+      `;
       const API_URL = 'https://api.deepseek.com/chat/completions';
       const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
       /* -------------------------------
          دوال مساعدة عامة
       };
       /* -------------------------------
+         دوال تظليل الاختلافات على الأسطر التي بها مشاكل فقط
       ------------------------------- */
       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");
       };
       // توليد شرح تفصيلي للاختلافات مع أيقونات بسيطة
         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);