Hugging Face's logo

Spaces:
joermd
/
translate
Running

App Files Community
joermd commited on
Commit
068d7e2
·
verified ·
1 Parent(s): dfb5957

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +100 -113
index.html CHANGED
@@ -10,7 +10,7 @@
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11
  <style>
12
  /* -------------------------------
13
- الحركات والتأثيرات والتنسيقات المحسنة
14
  ------------------------------- */
15
  @keyframes gradient {
16
  0% { background-position: 0% 50%; }
@@ -32,7 +32,7 @@
32
  }
33
 
34
  /* -------------------------------
35
- تنسيقات النص والتظليل
36
  ------------------------------- */
37
  .text-comparison { line-height: 1.8; white-space: pre-wrap; }
38
  .highlight-missing {
@@ -49,8 +49,8 @@
49
  border-radius: 3px;
50
  font-weight: bold;
51
  }
52
- .highlight-abbreviation {
53
- background-color: #34d399; /* أخضر */
54
  color: #fff;
55
  padding: 0 4px;
56
  border-radius: 3px;
@@ -86,144 +86,141 @@
86
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
87
  transform: translateY(-3px);
88
  }
89
- .icon { margin-left: 0.5rem; }
90
- /* تعديل أيقونات التحميل لتكون على اليمين */
91
- .upload-label {
92
  display: flex;
93
- flex-direction: row-reverse;
94
  align-items: center;
95
- justify-content: center;
96
  }
 
97
  </style>
98
  </head>
99
  <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
100
  <div class="min-h-screen pb-12">
101
  <!-- رأس الصفحة -->
102
- <header class="bg-gradient-to-r from-indigo-800 via-purple-800 to-pink-800 animate-gradient text-white py-12 mb-12 shadow-2xl">
103
  <div class="max-w-6xl mx-auto px-4 text-center">
104
- <h1 class="text-6xl font-extrabold mb-4 animate-scale">
105
- نظام المقارنة والتحليل المتقدم
106
- <i class="fas fa-chart-line icon"></i>
107
  </h1>
108
- <p class="text-2xl opacity-90">
109
- تحليل دقيق يشمل النصوص المفقودة، الأرقام/التواريخ، وفهم الاختصارات
110
  </p>
111
  </div>
112
  </header>
113
 
114
  <!-- المحتوى الرئيسي -->
115
- <main class="max-w-7xl mx-auto px-4 space-y-10">
116
  <!-- قسم رفع الملفات -->
117
  <div class="card card-hover">
118
- <h2 class="text-3xl font-bold text-gray-800 border-b pb-3 mb-6">
119
  <i class="fas fa-file-upload icon text-indigo-600"></i> تحميل الملفات
120
  </h2>
121
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
122
  <!-- ملف المصدر -->
123
- <div class="group border-2 border-dashed border-indigo-300 rounded-xl p-10 text-center bg-indigo-50 hover:bg-indigo-100 transition-colors duration-300">
124
- <label class="cursor-pointer block upload-label">
 
125
  <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
126
- <span class="text-xl text-indigo-600 group-hover:text-indigo-700">ملف المصدر</span>
127
- <i class="fas fa-upload text-6xl text-indigo-500 mb-4"></i>
128
  </label>
129
  </div>
130
  <!-- ملف الهدف -->
131
- <div class="group border-2 border-dashed border-pink-300 rounded-xl p-10 text-center bg-pink-50 hover:bg-pink-100 transition-colors duration-300">
132
- <label class="cursor-pointer block upload-label">
 
133
  <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
134
- <span class="text-xl text-pink-600 group-hover:text-pink-700">ملف الهدف</span>
135
- <i class="fas fa-download text-6xl text-pink-500 mb-4"></i>
136
  </label>
137
  </div>
138
  </div>
139
- <div id="processStatus" class="hidden mt-6">
140
- <div class="flex items-center justify-end space-x-3 bg-indigo-100 rounded-xl p-4">
141
- <span class="text-xl text-indigo-700">جارٍ معالجة الملف...</span>
142
- <div class="animate-spin h-10 w-10 border-4 border-indigo-600 rounded-full border-t-transparent"></div>
143
  </div>
144
  </div>
145
  </div>
146
 
147
  <!-- قسم إدخال النصوص يدويًا -->
148
  <div class="card card-hover">
149
- <div class="space-y-8">
150
  <!-- النص المصدر -->
151
  <div class="group">
152
- <label class="block text-2xl font-bold text-gray-700 mb-4">
153
  <i class="fas fa-language icon text-indigo-600"></i> النص المصدر
154
  </label>
155
- <textarea id="sourceText" dir="rtl" class="w-full px-8 py-6 border-2 border-gray-200 rounded-xl focus:ring-indigo-200 focus:border-indigo-400 transition-all resize-none text-xl" rows="8" placeholder="اكتب النص المصدر هنا..."></textarea>
156
  </div>
157
  <!-- النص الهدف -->
158
  <div class="group">
159
- <label class="block text-2xl font-bold text-gray-700 mb-4">
160
  <i class="fas fa-language icon text-pink-600"></i> النص الهدف
161
  </label>
162
- <textarea id="targetText" dir="ltr" class="w-full px-8 py-6 border-2 border-gray-200 rounded-xl focus:ring-pink-200 focus:border-pink-400 transition-all resize-none text-xl" rows="8" placeholder="اكتب النص الهدف هنا..."></textarea>
163
  </div>
164
  </div>
165
  </div>
166
 
167
  <!-- قسم المصادر الإضافية -->
168
  <div class="card card-hover">
169
- <h2 class="text-3xl font-bold text-gray-800 border-b pb-3 mb-6">
170
  <i class="fas fa-book-open icon text-green-600"></i> مصادر إضافية
171
  </h2>
172
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
173
  <!-- رفع ملف المصادر الإضافية -->
174
- <div class="group border-2 border-dashed border-green-300 rounded-xl p-10 text-center bg-green-50 hover:bg-green-100 transition-colors duration-300">
175
- <label class="cursor-pointer block upload-label">
 
176
  <input type="file" id="sourceExtraFile" accept=".docx,.pdf" class="hidden">
177
- <span class="text-xl text-green-600 group-hover:text-green-700">تحميل ملف المصادر</span>
178
- <i class="fas fa-upload text-6xl text-green-500 mb-4"></i>
179
  </label>
180
  </div>
181
  <!-- إدخال المصادر يدويًا -->
182
  <div class="group">
183
- <label class="block text-2xl font-bold text-gray-700 mb-4">
184
  <i class="fas fa-edit icon text-green-600"></i> إدخال المصادر يدويًا
185
  </label>
186
- <textarea id="sourceExtraText" dir="rtl" class="w-full px-8 py-6 border-2 border-green-200 rounded-xl focus:ring-green-200 focus:border-green-400 transition-all resize-none text-xl" rows="8" placeholder="اكتب المصادر هنا..."></textarea>
187
  </div>
188
  </div>
189
  </div>
190
 
191
  <!-- زر التحليل والمراجعة -->
192
- <button id="submitBtn" class="w-full bg-gradient-to-r from-indigo-700 to-pink-700 hover:from-indigo-800 hover:to-pink-800 text-white font-bold py-6 px-10 rounded-xl transition-all transform hover:scale-105 focus:ring-indigo-200 text-2xl shadow-2xl hover:shadow-2xl pulse-animation">
193
  <div class="flex items-center justify-center">
194
- <span>تحليل ومراجعة النصوص</span>
195
- <i class="fas fa-sync-alt icon mr-4"></i>
196
  </div>
197
  </button>
198
 
199
  <!-- نتائج التحليل والمقارنة -->
200
  <div id="resultSection" class="card hidden">
201
- <h2 class="text-3xl font-bold text-gray-800 border-b pb-4 mb-6">
202
  <i class="fas fa-search icon text-green-600"></i> نتائج التحليل والمقارنة
203
  </h2>
204
- <div id="errorsList" class="space-y-4 mb-6"></div>
205
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
206
  <div>
207
- <h4 class="text-2xl font-bold text-gray-700 mb-4">
208
  <i class="fas fa-file-alt icon text-indigo-600"></i> النص المصدر (مع التعليم)
209
  </h4>
210
- <div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-8 min-h-[250px] border-2 border-indigo-200 text-comparison"></div>
211
  </div>
212
  <div>
213
- <h4 class="text-2xl font-bold text-gray-700 mb-4">
214
  <i class="fas fa-file-alt icon text-pink-600"></i> النص الهدف (بدون تعليم)
215
  </h4>
216
- <div id="targetTextReview" class="bg-gray-50 rounded-xl p-8 min-h-[250px] border-2 border-gray-300 text-comparison"></div>
217
  </div>
218
  </div>
219
  </div>
220
 
221
  <!-- شرح تفصيلي للاختلافات -->
222
  <div id="explanationBox" class="card hidden">
223
- <h2 class="text-3xl font-bold text-gray-800 border-b pb-4 mb-6">
224
  <i class="fas fa-info-circle icon text-green-600"></i> شرح الاختلافات
225
  </h2>
226
- <div id="explanationText" class="text-2xl text-gray-700"></div>
227
  </div>
228
  </main>
229
  </div>
@@ -236,19 +233,15 @@
236
  "use strict";
237
 
238
  /* تحسين البرومت:
239
- - مهمتك: مقارنة النص المصدر والنص الهدف بدقة عالية مع مراعاة فهم الاختصارات.
240
- - إذا كانت النصوص متطابقة تماماً، أرجع [MATCH] فقط.
241
- - إذا كان هناك اختلافات، قم بتحديد الأنواع التالية:
242
- 1. النصوص المفقودة: الكلمات أو العبارات الموجودة في النص المصدر وغير موجودة في النص الهدف.
243
- 2. الأرقام والتواريخ: التي يجب أن تكون مطابقة بين النصين؛ وفي حال وجود اختلاف، قم بالإشارة إليه.
244
- 3. اختلاف المعنى: إذا كانت الترجمة تحمل معنى مختلفاً عن النص المصدر.
245
- 4. الاختصارات: يجب على النموذج فهم الاختصارات وتحليلها بدقة (مع مراعاة معانيها الكاملة) وعدم اعتبارها خطأ إذا كانت مستخدمة بشكل سليم.
246
- - استخدم العلامات التالية لتعليم النص المصدر فقط:
247
- • النصوص المفقودة بين علامتي __ و __.
248
- • الأرقام والتواريخ بين علامتي < و >.
249
- • اختلاف المعنى بين علامتي [MEANING] و [/MEANING].
250
- • الاختصارات بين علامتي {ABBR} و {/ABBR}.
251
- - قدم الناتج في شكل قائمة مفصلة مع شرح مختصر لكل اختلاف وذكر رقم السطر إن أمكن.
252
 
253
  النص المصدر:
254
  {source}
@@ -256,6 +249,9 @@
256
  النص الهدف:
257
  {target}`;
258
 
 
 
 
259
  /* -------------------------------
260
  دوال مساعدة عامة
261
  ------------------------------- */
@@ -281,10 +277,10 @@
281
  };
282
 
283
  /* -------------------------------
284
- دوال تظليل الاختلافات (التركيز على النصوص المفقودة، الأرقام والاختصارات)
285
  ------------------------------- */
286
- const applyHighlights = (originalText, analysisOutput) => {
287
- let highlightedText = originalText;
288
  let match;
289
  // تظليل النصوص المفقودة
290
  const missingRegex = /__(.*?)__/g;
@@ -306,12 +302,12 @@
306
  highlightedText = highlightedText.replace(phraseRegex, replacement);
307
  }
308
  }
309
- // تظليل الاختصارات
310
- const abbrRegex = /{ABBR}(.*?){\/ABBR}/g;
311
- while ((match = abbrRegex.exec(analysisOutput)) !== null) {
312
  const phrase = match[1].trim();
313
  if (phrase) {
314
- const replacement = `<span class="highlight-abbreviation">${phrase}</span>`;
315
  const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
316
  highlightedText = highlightedText.replace(phraseRegex, replacement);
317
  }
@@ -319,61 +315,44 @@
319
  return highlightedText;
320
  };
321
 
322
- // توليد شرح تفصيلي للاختلافات فقرة بفقرة مع أيقونات بسيطة
323
  const generateExplanation = (sourceText, analysisOutput) => {
324
- let explanations = [];
325
  const iconMissing = `<i class="fas fa-exclamation-triangle mr-1"></i>`;
326
  const iconNumber = `<i class="fas fa-hashtag mr-1"></i>`;
327
  const iconMeaning = `<i class="fas fa-info-circle mr-1"></i>`;
328
- const iconAbbr = `<i class="fas fa-font mr-1"></i>`;
329
-
330
- // تحليل النصوص المفقودة
331
  const missingRegex = /__(.*?)__/g;
332
  let match;
333
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
334
  const phrase = match[1].trim();
335
  if (phrase) {
336
  const lineNum = getLineNumber(sourceText, phrase);
337
- explanations.push(`<p>${iconMissing} في السطر ${lineNum}: النص المفقود <span class="highlight-missing">${phrase}</span></p>`);
338
  }
339
  }
340
- // تحليل الأرقام والتواريخ
341
  const numberRegex = /<([^<>]+)>/g;
342
  while ((match = numberRegex.exec(analysisOutput)) !== null) {
343
  const phrase = match[1].trim();
344
  if (phrase) {
345
  const lineNum = getLineNumber(sourceText, phrase);
346
- explanations.push(`<p>${iconNumber} في السطر ${lineNum}: الرقم/التاريخ <span class="highlight-number">${phrase}</span></p>`);
347
  }
348
  }
349
- // تحليل اختلاف المعنى
350
  const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
351
  while ((match = meaningRegex.exec(analysisOutput)) !== null) {
352
  const phrase = match[1].trim();
353
  if (phrase) {
354
  const lineNum = getLineNumber(sourceText, phrase);
355
- explanations.push(`<p>${iconMeaning} في السطر ${lineNum}: اختلاف المعنى <span class="highlight-missing">${phrase}</span></p>`);
356
- }
357
- }
358
- // تحليل الاختصارات
359
- const abbrRegex = /{ABBR}(.*?){\/ABBR}/g;
360
- while ((match = abbrRegex.exec(analysisOutput)) !== null) {
361
- const phrase = match[1].trim();
362
- if (phrase) {
363
- const lineNum = getLineNumber(sourceText, phrase);
364
- explanations.push(`<p>${iconAbbr} في السطر ${lineNum}: الاختصار <span class="highlight-abbreviation">${phrase}</span></p>`);
365
  }
366
  }
367
-
368
- // التحقق من استخدام المصادر الخارجية
369
- const usedSource = analysisOutput.includes('[USED_SOURCE]');
370
- let sourceNote = usedSource ? `<p><i class="fas fa-book-reader mr-1"></i> تم استخدام مصادر خارجية لشرح الاختصارات والمصطلحات.</p>`
371
- : `<p><i class="fas fa-book mr-1"></i> لم يتم استخدام مصادر خارجية.</p>`;
372
-
373
- if (explanations.length === 0) {
374
- return `<p><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>` + sourceNote;
375
  }
376
- return explanations.join('') + sourceNote;
377
  };
378
 
379
  /* -------------------------------
@@ -428,7 +407,7 @@
428
  // رفع ملفات المصدر، الهدف والمصادر الإضافية
429
  processFileInput('sourceFile', 'sourceText', 'خطأ في معالجة ملف المصدر');
430
  processFileInput('targetFile', 'targetText', 'خطأ في معالجة ملف الهدف');
431
- processFileInput('sourceExtraFile', 'sourceExtraText', 'خطأ في معالجة ملف المصادر الإضافية');
432
 
433
  /* -------------------------------
434
  دالة عرض الأخطاء
@@ -451,6 +430,7 @@
451
  document.getElementById('submitBtn').addEventListener('click', async () => {
452
  const sourceText = document.getElementById('sourceText').value;
453
  const targetText = document.getElementById('targetText').value;
 
454
  document.getElementById('errorsList').innerHTML = '';
455
  document.getElementById('resultSection').classList.remove('hidden');
456
  document.getElementById('explanationBox').classList.remove('hidden');
@@ -469,9 +449,9 @@
469
  try {
470
  const progressDiv = document.createElement('div');
471
  progressDiv.className = "bg-indigo-100 p-4 rounded-xl mb-4";
472
- progressDiv.innerHTML = `<div class="flex items-center justify-end">
473
- <span class="text-xl">جارٍ التحليل...</span>
474
- <div class="animate-spin h-10 w-10 border-4 border-indigo-600 rounded-full border-t-transparent ml-4"></div>
475
  </div>`;
476
  document.getElementById('errorsList').appendChild(progressDiv);
477
 
@@ -482,7 +462,7 @@
482
  const payload = {
483
  model: "deepseek-chat",
484
  messages: [
485
- { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص بدقة عالية، وتفهم الاختصارات ومعانيها الكاملة." },
486
  { role: "user", content: prompt }
487
  ],
488
  temperature: 0.3,
@@ -514,15 +494,22 @@
514
  document.getElementById('errorsList').appendChild(checkDiv);
515
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
516
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
517
- document.getElementById('explanationText').innerHTML = `<p class="text-xl">النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</p>`;
518
  } else {
519
- // تطبيق التعليم فقط على النص المصدر
520
  const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
521
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
522
- // عرض النص الهدف بدون تعليم
523
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
524
  const explanationHTML = generateExplanation(sourceText, analysisOutput);
525
- document.getElementById('explanationText').innerHTML = explanationHTML;
 
 
 
 
 
 
 
526
  }
527
  } catch (error) {
528
  document.getElementById('errorsList').innerHTML = '';
@@ -532,4 +519,4 @@
532
  })();
533
  </script>
534
  </body>
535
- </html>
 
10
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11
  <style>
12
  /* -------------------------------
13
+ الحركات والتأثيرات
14
  ------------------------------- */
15
  @keyframes gradient {
16
  0% { background-position: 0% 50%; }
 
32
  }
33
 
34
  /* -------------------------------
35
+ تنسيقات النص والتظليل (استخدام ألوان مميزة)
36
  ------------------------------- */
37
  .text-comparison { line-height: 1.8; white-space: pre-wrap; }
38
  .highlight-missing {
 
49
  border-radius: 3px;
50
  font-weight: bold;
51
  }
52
+ .highlight-meaning {
53
+ background-color: #60a5fa; /* أزرق */
54
  color: #fff;
55
  padding: 0 4px;
56
  border-radius: 3px;
 
86
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
87
  transform: translateY(-3px);
88
  }
89
+ /* تنسيق خاص لأيقونات الرفع لتكون على اليمين */
90
+ .file-upload-label {
 
91
  display: flex;
92
+ justify-content: space-between;
93
  align-items: center;
 
94
  }
95
+ .icon { }
96
  </style>
97
  </head>
98
  <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
99
  <div class="min-h-screen pb-12">
100
  <!-- رأس الصفحة -->
101
+ <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">
102
  <div class="max-w-6xl mx-auto px-4 text-center">
103
+ <h1 class="text-5xl font-bold mb-4 animate-scale">
104
+ <i class="fas fa-chart-line icon"></i> نظام المقارنة والتحليل المتقدم
 
105
  </h1>
106
+ <p class="text-xl opacity-90">
107
+ <i class="fas fa-info-circle icon"></i> تحليل دقيق لاكتشاف النصوص المفقودة، الأرقام/التواريخ واختلاف المعنى
108
  </p>
109
  </div>
110
  </header>
111
 
112
  <!-- المحتوى الرئيسي -->
113
+ <main class="max-w-6xl mx-auto px-4 space-y-8">
114
  <!-- قسم رفع الملفات -->
115
  <div class="card card-hover">
116
+ <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
117
  <i class="fas fa-file-upload icon text-indigo-600"></i> تحميل الملفات
118
  </h2>
119
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
120
  <!-- ملف المصدر -->
121
+ <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">
122
+ <label class="cursor-pointer block file-upload-label">
123
+ <span class="text-lg text-indigo-600 group-hover:text-indigo-700">ملف المصدر</span>
124
  <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
125
+ <i class="fas fa-upload text-5xl text-indigo-500 mb-4"></i>
 
126
  </label>
127
  </div>
128
  <!-- ملف الهدف -->
129
+ <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">
130
+ <label class="cursor-pointer block file-upload-label">
131
+ <span class="text-lg text-pink-600 group-hover:text-pink-700">ملف الهدف</span>
132
  <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
133
+ <i class="fas fa-download text-5xl text-pink-500 mb-4"></i>
 
134
  </label>
135
  </div>
136
  </div>
137
+ <div id="processStatus" class="hidden mt-4">
138
+ <div class="flex items-center justify-center space-x-3 bg-indigo-100 rounded-xl p-4">
139
+ <div class="animate-spin h-8 w-8 border-4 border-indigo-600 rounded-full border-t-transparent"></div>
140
+ <span class="text-lg text-indigo-700">جارٍ معالجة الملف...</span>
141
  </div>
142
  </div>
143
  </div>
144
 
145
  <!-- قسم إدخال النصوص يدويًا -->
146
  <div class="card card-hover">
147
+ <div class="space-y-6">
148
  <!-- النص المصدر -->
149
  <div class="group">
150
+ <label class="block text-lg font-bold text-gray-700 mb-3">
151
  <i class="fas fa-language icon text-indigo-600"></i> النص المصدر
152
  </label>
153
+ <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>
154
  </div>
155
  <!-- النص الهدف -->
156
  <div class="group">
157
+ <label class="block text-lg font-bold text-gray-700 mb-3">
158
  <i class="fas fa-language icon text-pink-600"></i> النص الهدف
159
  </label>
160
+ <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>
161
  </div>
162
  </div>
163
  </div>
164
 
165
  <!-- قسم المصادر الإضافية -->
166
  <div class="card card-hover">
167
+ <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
168
  <i class="fas fa-book-open icon text-green-600"></i> مصادر إضافية
169
  </h2>
170
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
171
  <!-- رفع ملف المصادر الإضافية -->
172
+ <div class="group border-2 border-dashed border-green-300 rounded-xl p-8 text-center bg-green-50 hover:bg-green-100 transition-colors duration-300">
173
+ <label class="cursor-pointer block file-upload-label">
174
+ <span class="text-lg text-green-600 group-hover:text-green-700">تحميل ملف المصدر</span>
175
  <input type="file" id="sourceExtraFile" accept=".docx,.pdf" class="hidden">
176
+ <i class="fas fa-upload text-5xl text-green-500 mb-4"></i>
 
177
  </label>
178
  </div>
179
  <!-- إدخال المصادر يدويًا -->
180
  <div class="group">
181
+ <label class="block text-lg font-bold text-gray-700 mb-3">
182
  <i class="fas fa-edit icon text-green-600"></i> إدخال المصادر يدويًا
183
  </label>
184
+ <textarea id="sourceExtraText" dir="rtl" class="w-full px-6 py-4 border-2 border-green-200 rounded-xl focus:ring-green-200 focus:border-green-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب المصادر هنا..."></textarea>
185
  </div>
186
  </div>
187
  </div>
188
 
189
  <!-- زر التحليل والمراجعة -->
190
+ <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">
191
  <div class="flex items-center justify-center">
192
+ <i class="fas fa-sync-alt icon ml-2"></i> تحليل ومراجعة النصوص
 
193
  </div>
194
  </button>
195
 
196
  <!-- نتائج التحليل والمقارنة -->
197
  <div id="resultSection" class="card hidden">
198
+ <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
199
  <i class="fas fa-search icon text-green-600"></i> نتائج التحليل والمقارنة
200
  </h2>
201
+ <div id="errorsList" class="space-y-3 mb-6"></div>
202
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
203
  <div>
204
+ <h4 class="text-lg font-bold text-gray-700 mb-3">
205
  <i class="fas fa-file-alt icon text-indigo-600"></i> النص المصدر (مع التعليم)
206
  </h4>
207
+ <div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-6 min-h-[200px] border-2 border-indigo-100 text-comparison"></div>
208
  </div>
209
  <div>
210
+ <h4 class="text-lg font-bold text-gray-700 mb-3">
211
  <i class="fas fa-file-alt icon text-pink-600"></i> النص الهدف (بدون تعليم)
212
  </h4>
213
+ <div id="targetTextReview" class="bg-gray-50 rounded-xl p-6 min-h-[200px] border-2 border-gray-200 text-comparison"></div>
214
  </div>
215
  </div>
216
  </div>
217
 
218
  <!-- شرح تفصيلي للاختلافات -->
219
  <div id="explanationBox" class="card hidden">
220
+ <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
221
  <i class="fas fa-info-circle icon text-green-600"></i> شرح الاختلافات
222
  </h2>
223
+ <div id="explanationText" class="text-lg text-gray-700"></div>
224
  </div>
225
  </main>
226
  </div>
 
233
  "use strict";
234
 
235
  /* تحسين البرومت:
236
+ - مهمتك: مقارنة النص المصدر والنص الهدف واستخراج الأخطاء فقط.
237
+ - يتم التركيز على:
238
+ 1. النصوص المفقودة: الكلمات أو العبارات التي لم تُترجم من النص المصدر (يتم التعليم عليها فقط في ملف المصدر).
239
+ 2. الأرقام والتواريخ: التي لا تتطابق بين النص المصدر والنص الهدف.
240
+ 3. اختلاف المعنى: في حال وجود اختلاف واضح في معنى النص.
241
+ - التعليم يتم بعد التحليل وفق فقرة، وليس عشوائيًا.
242
+ - يجب الاعتماد بشكل كامل على نموذج DeepSeek لإجراء التحليل.
243
+ - إذا تم استخدام المصادر (ملف المصادر أو الإدخال اليدوي) يجب إضافة أيقونة توضيحية لذلك.
244
+ - يجب أن يكون الناتج عبارة عن شرح تفصيلي فقرة بفقرة مع الإشارة إلى رقم السطر عند الإمكان.
 
 
 
 
245
 
246
  النص المصدر:
247
  {source}
 
249
  النص الهدف:
250
  {target}`;
251
 
252
+ const API_URL = 'https://api.deepseek.com/chat/completions';
253
+ const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
254
+
255
  /* -------------------------------
256
  دوال مساعدة عامة
257
  ------------------------------- */
 
277
  };
278
 
279
  /* -------------------------------
280
+ دوال تظليل الاختلافات (يتم التعليم على النص المصدر فقط)
281
  ------------------------------- */
282
+ const applyHighlights = (sourceText, analysisOutput) => {
283
+ let highlightedText = sourceText;
284
  let match;
285
  // تظليل النصوص المفقودة
286
  const missingRegex = /__(.*?)__/g;
 
302
  highlightedText = highlightedText.replace(phraseRegex, replacement);
303
  }
304
  }
305
+ // تظليل اختلاف المعنى
306
+ const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
307
+ while ((match = meaningRegex.exec(analysisOutput)) !== null) {
308
  const phrase = match[1].trim();
309
  if (phrase) {
310
+ const replacement = `<span class="highlight-meaning">${phrase}</span>`;
311
  const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
312
  highlightedText = highlightedText.replace(phraseRegex, replacement);
313
  }
 
315
  return highlightedText;
316
  };
317
 
318
+ // توليد شرح تفصيلي للأخطاء مع أيقونات لكل نوع (كل فقرة تمثل خطأ)
319
  const generateExplanation = (sourceText, analysisOutput) => {
320
+ let paragraphs = [];
321
  const iconMissing = `<i class="fas fa-exclamation-triangle mr-1"></i>`;
322
  const iconNumber = `<i class="fas fa-hashtag mr-1"></i>`;
323
  const iconMeaning = `<i class="fas fa-info-circle mr-1"></i>`;
324
+ // النصوص المفقودة
 
 
325
  const missingRegex = /__(.*?)__/g;
326
  let match;
327
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
328
  const phrase = match[1].trim();
329
  if (phrase) {
330
  const lineNum = getLineNumber(sourceText, phrase);
331
+ paragraphs.push(`<p>${iconMissing} في السطر ${lineNum}، النص المفقود: <span class="highlight-missing">${phrase}</span></p>`);
332
  }
333
  }
334
+ // الأرقام والتواريخ
335
  const numberRegex = /<([^<>]+)>/g;
336
  while ((match = numberRegex.exec(analysisOutput)) !== null) {
337
  const phrase = match[1].trim();
338
  if (phrase) {
339
  const lineNum = getLineNumber(sourceText, phrase);
340
+ paragraphs.push(`<p>${iconNumber} في السطر ${lineNum}، الرقم/التاريخ: <span class="highlight-number">${phrase}</span></p>`);
341
  }
342
  }
343
+ // اختلاف المعنى
344
  const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
345
  while ((match = meaningRegex.exec(analysisOutput)) !== null) {
346
  const phrase = match[1].trim();
347
  if (phrase) {
348
  const lineNum = getLineNumber(sourceText, phrase);
349
+ paragraphs.push(`<p>${iconMeaning} في السطر ${lineNum}، اختلاف المعنى: <span class="highlight-meaning">${phrase}</span></p>`);
 
 
 
 
 
 
 
 
 
350
  }
351
  }
352
+ if (paragraphs.length === 0) {
353
+ return `<p><i class="fas fa-check-circle mr-2"></i> لا توجد أخطاء ملحوظة بين النصين.</p>`;
 
 
 
 
 
 
354
  }
355
+ return paragraphs.join('');
356
  };
357
 
358
  /* -------------------------------
 
407
  // رفع ملفات المصدر، الهدف والمصادر الإضافية
408
  processFileInput('sourceFile', 'sourceText', 'خطأ في معالجة ملف المصدر');
409
  processFileInput('targetFile', 'targetText', 'خطأ في معالجة ملف الهدف');
410
+ processFileInput('sourceExtraFile', 'sourceExtraText', 'خطأ في معالجة ملف المصدر الإضافي');
411
 
412
  /* -------------------------------
413
  دالة عرض الأخطاء
 
430
  document.getElementById('submitBtn').addEventListener('click', async () => {
431
  const sourceText = document.getElementById('sourceText').value;
432
  const targetText = document.getElementById('targetText').value;
433
+ const sourceExtra = document.getElementById('sourceExtraText').value.trim();
434
  document.getElementById('errorsList').innerHTML = '';
435
  document.getElementById('resultSection').classList.remove('hidden');
436
  document.getElementById('explanationBox').classList.remove('hidden');
 
449
  try {
450
  const progressDiv = document.createElement('div');
451
  progressDiv.className = "bg-indigo-100 p-4 rounded-xl mb-4";
452
+ progressDiv.innerHTML = `<div class="flex items-center">
453
+ <div class="animate-spin h-6 w-6 border-4 border-indigo-600 rounded-full border-t-transparent mr-3"></div>
454
+ <span>جارٍ التحليل...</span>
455
  </div>`;
456
  document.getElementById('errorsList').appendChild(progressDiv);
457
 
 
462
  const payload = {
463
  model: "deepseek-chat",
464
  messages: [
465
+ { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص بدقة عالية مع تركيز على الأخطاء فقط." },
466
  { role: "user", content: prompt }
467
  ],
468
  temperature: 0.3,
 
494
  document.getElementById('errorsList').appendChild(checkDiv);
495
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
496
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
497
+ document.getElementById('explanationText').innerHTML = `<p>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</p>`;
498
  } else {
499
+ // يتم تعليم النص المصدر فقط (استخدام applyHighlights عليه)
500
  const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
501
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
502
+ // للنص الهدف لم يتم تطبيق التعليم
503
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
504
  const explanationHTML = generateExplanation(sourceText, analysisOutput);
505
+ // إضافة ملاحظة استخدام المصادر بناءً على الإدخال
506
+ let sourcesNote = "";
507
+ if(sourceExtra) {
508
+ sourcesNote = `<p><i class="fas fa-bookmark mr-1"></i> المصادر مستخدمة.</p>`;
509
+ } else {
510
+ sourcesNote = `<p><i class="fas fa-ban mr-1"></i> لم يتم استخدام المصادر.</p>`;
511
+ }
512
+ document.getElementById('explanationText').innerHTML = sourcesNote + explanationHTML;
513
  }
514
  } catch (error) {
515
  document.getElementById('errorsList').innerHTML = '';
 
519
  })();
520
  </script>
521
  </body>
522
+ </html>