Hugging Face's logo

Spaces:
joermd
/
translate
Running

App Files Community
joermd commited on
Commit
bf7e722
·
verified ·
1 Parent(s): 6903f30

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +201 -176
index.html CHANGED
@@ -3,13 +3,13 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>منصة التحليل الذكية - شركة موندو لينجوا</title>
7
- <!-- تضمين Tailwind CSS وFont Awesome وMammoth لتحليل ملفات DOCX -->
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
 
11
  <style>
12
- /* تأثير تدرج الخلفية */
13
  @keyframes gradient {
14
  0% { background-position: 0% 50%; }
15
  50% { background-position: 100% 50%; }
@@ -19,246 +19,260 @@
19
  background-size: 200% 200%;
20
  animation: gradient 15s ease infinite;
21
  }
22
- /* تأثيرات عامة */
23
  .transition-all { transition: all 0.3s ease-in-out; }
24
- .hover-scale:hover { transform: scale(1.02); }
 
25
  .pulse-animation { animation: pulse 2s infinite; }
26
  @keyframes pulse {
27
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
28
  70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
29
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
30
  }
31
- /* تظليل النصوص */
 
32
  .text-comparison { line-height: 1.8; white-space: pre-wrap; }
33
  .highlight-missing {
34
- background-color: #e3342f; /* أحمر غامق */
35
  color: #fff;
36
  padding: 0 4px;
37
  border-radius: 3px;
38
  font-weight: bold;
39
  }
40
  .highlight-number {
41
- background-color: #ffed4a; /* أصفر */
42
  color: #000;
43
  padding: 0 4px;
44
  border-radius: 3px;
45
  font-weight: bold;
46
  }
47
- .highlight-meaning {
48
- background-color: #3490dc; /* أزرق فاتح */
49
  color: #fff;
50
  padding: 0 4px;
51
  border-radius: 3px;
52
  font-weight: bold;
53
  }
54
- /* تصميم الفقرات والسطور */
 
55
  .line-item {
56
  margin-bottom: 1rem;
57
  padding: 0.5rem;
58
- border-bottom: 1px dashed #ddd;
59
  }
60
  .line-number {
61
  font-weight: bold;
62
- color: #2d3748;
63
  margin-left: 0.5rem;
64
  }
 
 
65
  /* تصميم البطاقات */
66
  .card {
67
- background-color: #ffffff;
68
  border-radius: 1rem;
69
- box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.1);
70
  padding: 2rem;
71
- border: 1px solid #f1f5f9;
 
 
 
 
72
  }
73
- .card:hover { box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.15); }
74
- /* تخصيص رفع الملفات: الأيقونات على اليمين */
75
- .file-upload-label {
76
  display: flex;
77
- justify-content: space-between;
78
  align-items: center;
 
79
  }
80
  </style>
81
  </head>
82
- <body class="bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 min-h-screen">
83
  <div class="min-h-screen pb-12">
84
- <!-- الرأس -->
85
- <header class="bg-gradient-to-r from-blue-800 via-purple-800 to-pink-800 animate-gradient text-white py-10 shadow-2xl">
86
  <div class="max-w-6xl mx-auto px-4 text-center">
87
- <h1 class="text-5xl font-extrabold mb-4 hover-scale">
88
- <i class="fas fa-brain mr-2"></i> منصة التحليل الذكية
89
  </h1>
90
- <p class="text-xl opacity-90">
91
- <i class="fas fa-search mr-2"></i> تحليل دقيق للنصوص واكتشاف الأخطاء باستخدام أحدث النماذج
92
  </p>
93
  </div>
94
  </header>
95
-
96
  <!-- المحتوى الرئيسي -->
97
- <main class="max-w-6xl mx-auto px-4 space-y-10">
98
  <!-- قسم رفع الملفات -->
99
- <section class="card">
100
- <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
101
- <i class="fas fa-cloud-upload-alt text-blue-600 mr-2"></i> رفع الملفات
102
  </h2>
103
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
104
  <!-- ملف المصدر -->
105
- <div class="group border-2 border-dashed border-blue-300 rounded-xl p-6 text-center bg-blue-50 hover:bg-blue-100 transition-colors duration-300">
106
- <label class="cursor-pointer block file-upload-label">
107
- <span class="text-lg text-blue-600 group-hover:text-blue-700">ملف المصدر</span>
108
- <i class="fas fa-upload text-5xl text-blue-500"></i>
109
  <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
 
 
110
  </label>
111
  </div>
112
  <!-- ملف الهدف -->
113
- <div class="group border-2 border-dashed border-pink-300 rounded-xl p-6 text-center bg-pink-50 hover:bg-pink-100 transition-colors duration-300">
114
- <label class="cursor-pointer block file-upload-label">
115
- <span class="text-lg text-pink-600 group-hover:text-pink-700">ملف الهدف</span>
116
- <i class="fas fa-download text-5xl text-pink-500"></i>
117
  <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
 
 
118
  </label>
119
  </div>
120
  </div>
121
- <div id="processStatus" class="hidden mt-4">
122
- <div class="flex items-center justify-center space-x-3 bg-blue-100 rounded-xl p-4">
123
- <div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div>
124
- <span class="text-lg text-blue-700">جارٍ معالجة الملف...</span>
125
  </div>
126
  </div>
127
- </section>
128
-
129
  <!-- قسم إدخال النصوص يدويًا -->
130
- <section class="card">
131
- <div class="space-y-6">
132
  <!-- النص المصدر -->
133
  <div class="group">
134
- <label class="block text-lg font-bold text-gray-700 mb-3">
135
- <i class="fas fa-pen-fancy text-blue-600 mr-2"></i> النص المصدر
136
  </label>
137
- <textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-300 rounded-xl focus:ring-blue-200 focus:border-blue-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea>
138
  </div>
139
  <!-- النص الهدف -->
140
  <div class="group">
141
- <label class="block text-lg font-bold text-gray-700 mb-3">
142
- <i class="fas fa-pen-fancy text-pink-600 mr-2"></i> النص الهدف
143
  </label>
144
- <textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-300 rounded-xl focus:ring-pink-200 focus:border-pink-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea>
145
  </div>
146
  </div>
147
- </section>
148
-
149
  <!-- قسم المصادر الإضافية -->
150
- <section class="card">
151
- <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
152
- <i class="fas fa-bookmark text-green-600 mr-2"></i> المصادر الإضافية
153
  </h2>
154
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
155
- <!-- رفع ملف المصادر -->
156
- <div class="group border-2 border-dashed border-green-300 rounded-xl p-6 text-center bg-green-50 hover:bg-green-100 transition-colors duration-300">
157
- <label class="cursor-pointer block file-upload-label">
158
- <span class="text-lg text-green-600 group-hover:text-green-700">تحميل ملف المصادر</span>
159
- <i class="fas fa-upload text-5xl text-green-500"></i>
160
  <input type="file" id="sourceExtraFile" accept=".docx,.pdf" class="hidden">
 
 
161
  </label>
162
  </div>
163
  <!-- إدخال المصادر يدويًا -->
164
  <div class="group">
165
- <label class="block text-lg font-bold text-gray-700 mb-3">
166
- <i class="fas fa-edit text-green-600 mr-2"></i> إدخال المصادر يدويًا
167
  </label>
168
- <textarea id="sourceExtraText" dir="rtl" class="w-full px-6 py-4 border-2 border-green-300 rounded-xl focus:ring-green-200 focus:border-green-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب المصادر هنا..."></textarea>
169
  </div>
170
  </div>
171
- </section>
172
-
173
- <!-- زر التحليل -->
174
- <section class="text-center">
175
- <button id="submitBtn" class="w-full md:w-1/2 mx-auto bg-gradient-to-r from-blue-600 to-pink-600 hover:from-blue-700 hover:to-pink-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover-scale pulse-animation text-xl shadow-xl">
176
- <i class="fas fa-sync-alt mr-2"></i> تحليل ومراجعة النصوص
177
- </button>
178
- </section>
179
-
180
- <!-- نتائج التحليل -->
181
- <section id="resultSection" class="card hidden">
182
- <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
183
- <i class="fas fa-search text-green-600 mr-2"></i> نتائج التحليل
 
184
  </h2>
185
- <div id="errorsList" class="space-y-3 mb-6"></div>
186
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
187
  <div>
188
- <h4 class="text-lg font-semibold text-gray-700 mb-3">
189
- <i class="fas fa-file-alt text-blue-600 mr-2"></i> النص المصدر (مع التعليم)
190
  </h4>
191
- <div id="sourceTextReview" class="bg-blue-50 rounded-xl p-6 min-h-[200px] border border-blue-200 text-comparison"></div>
192
  </div>
193
  <div>
194
- <h4 class="text-lg font-semibold text-gray-700 mb-3">
195
- <i class="fas fa-file-alt text-pink-600 mr-2"></i> النص الهدف (بدون تعليم)
196
  </h4>
197
- <div id="targetTextReview" class="bg-pink-50 rounded-xl p-6 min-h-[200px] border border-pink-200 text-comparison"></div>
198
  </div>
199
  </div>
200
- </section>
201
-
202
- <!-- شرح تفصيلي للاختلافات -->
203
- <section id="explanationBox" class="card hidden">
204
- <h2 class="text-2xl font-bold text-gray-800 border-b pb-3 mb-6">
205
- <i class="fas fa-info-circle text-green-600 mr-2"></i> شرح الأخطاء
206
  </h2>
207
- <div id="explanationText" class="text-lg text-gray-700"></div>
208
- </section>
209
  </main>
210
  </div>
211
-
212
- <!-- جافا سكريبت للتحليل -->
213
  <script>
214
  (function() {
215
  "use strict";
216
-
217
- // تعريف برومت التحليل مع الاعتماد على نموذج DeepSeek
218
- const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة التقنية وتحليل النصوص بدقة. مهمتك مقارنة النص المصدر والنص الهدف واستخراج الأخطاء التالية:
219
- 1. النصوص المفقودة: الكلمات أو العبارات التي لم تُترجم من النص المصدر (يتم تعليمها في النص المصدر فقط).
220
- 2. الأرقام والتواريخ: التي لا تتطابق بين النص المصدر والنص الهدف.
221
- 3. اختلاف المعنى: في حال وجود اختلاف واضح في معنى النص.
222
- يُرجى تعليم:
223
- - النصوص المفقودة بوضعها بين علامتي __ والنص__.
224
- - الأرقام والتواريخ بوضعها بين علامتي < والنص>.
225
- - اختلاف المعنى بوضعها بين [MEANING] و [/MEANING].
226
-
227
- قدم الناتج في شكل قائمة تفصيلية مع شرح فقرة بفقرة لكل خطأ مع ذكر رقم السطر إن أمكن.
 
 
 
 
228
 
229
  النص المصدر:
230
  {source}
231
 
232
  النص الهدف:
233
  {target}`;
234
-
235
- /* دوال مساعدة */
236
  const countWords = text =>
237
  text.trim().split(/\s+/).filter(word => word !== "").length;
238
-
239
  const escapeRegExp = string =>
240
  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
241
-
242
- // تقسيم النص إلى أسطر مرقمة
243
  const splitIntoLines = text =>
244
  text.split(/\n+/).map((line, i) => {
245
  line = line.trim();
246
  if(line && !line.endsWith('.')) { line += '.'; }
247
  return `<div class="line-item"><span class="line-number">${i+1}:</span><span class="line-text">${line}</span></div>`;
248
  }).join('');
249
-
250
- // الحصول على رقم السطر لنص معين
251
  const getLineNumber = (text, substring) => {
252
  const index = text.indexOf(substring);
253
  if (index === -1) return "غير محدد";
254
  return text.substring(0, index).split("\n").length;
255
  };
256
-
257
- /* دوال تعليم الأخطاء على النص المصدر */
258
- const applyHighlights = (sourceText, analysisOutput) => {
259
- let highlightedText = sourceText;
260
  let match;
261
- // تعليم النصوص المفقودة
262
  const missingRegex = /__(.*?)__/g;
263
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
264
  const phrase = match[1].trim();
@@ -268,7 +282,7 @@
268
  highlightedText = highlightedText.replace(phraseRegex, replacement);
269
  }
270
  }
271
- // تعليم الأرقام والتواريخ
272
  const numberRegex = /<([^<>]+)>/g;
273
  while ((match = numberRegex.exec(analysisOutput)) !== null) {
274
  const phrase = match[1].trim();
@@ -278,33 +292,35 @@
278
  highlightedText = highlightedText.replace(phraseRegex, replacement);
279
  }
280
  }
281
- // تعليم اختلاف المعنى
282
- const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
283
- while ((match = meaningRegex.exec(analysisOutput)) !== null) {
284
  const phrase = match[1].trim();
285
  if (phrase) {
286
- const replacement = `<span class="highlight-meaning">${phrase}</span>`;
287
  const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
288
  highlightedText = highlightedText.replace(phraseRegex, replacement);
289
  }
290
  }
291
  return highlightedText;
292
  };
293
-
294
- // توليد شرح تفصيلي للأخطاء (فقرة بفقرة مع رقم السطر)
295
  const generateExplanation = (sourceText, analysisOutput) => {
296
- let paragraphs = [];
297
  const iconMissing = `<i class="fas fa-exclamation-triangle mr-1"></i>`;
298
  const iconNumber = `<i class="fas fa-hashtag mr-1"></i>`;
299
  const iconMeaning = `<i class="fas fa-info-circle mr-1"></i>`;
300
- let match;
 
301
  // شرح النصوص المفقودة
302
  const missingRegex = /__(.*?)__/g;
 
303
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
304
  const phrase = match[1].trim();
305
  if (phrase) {
306
  const lineNum = getLineNumber(sourceText, phrase);
307
- paragraphs.push(`<p>${iconMissing} في السطر ${lineNum}، النص المفقود: <span class="highlight-missing">${phrase}</span></p>`);
308
  }
309
  }
310
  // شرح الأرقام والتواريخ
@@ -313,7 +329,7 @@
313
  const phrase = match[1].trim();
314
  if (phrase) {
315
  const lineNum = getLineNumber(sourceText, phrase);
316
- paragraphs.push(`<p>${iconNumber} في السطر ${lineNum}، الرقم/التاريخ: <span class="highlight-number">${phrase}</span></p>`);
317
  }
318
  }
319
  // شرح اختلاف المعنى
@@ -322,16 +338,31 @@
322
  const phrase = match[1].trim();
323
  if (phrase) {
324
  const lineNum = getLineNumber(sourceText, phrase);
325
- paragraphs.push(`<p>${iconMeaning} في السطر ${lineNum}، اختلاف المعنى: <span class="highlight-meaning">${phrase}</span></p>`);
 
 
 
 
 
 
 
 
 
326
  }
327
  }
328
- if (paragraphs.length === 0) {
329
- return `<p><i class="fas fa-check-circle mr-2"></i> لا توجد أخطاء ملحوظة بين النصين.</p>`;
 
 
 
 
 
 
330
  }
331
- return paragraphs.join('');
332
  };
333
-
334
- /* دالة معالجة الملفات (PDF و DOCX) */
335
  const processFile = async file => {
336
  let text = "";
337
  try {
@@ -358,8 +389,8 @@
358
  }
359
  return text;
360
  };
361
-
362
- /* التعامل مع رفع الملفات وإدخال النصوص */
363
  const processFileInput = (inputId, targetTextAreaId, errorMsg) => {
364
  document.getElementById(inputId)?.addEventListener('change', async (event) => {
365
  const file = event.target.files[0];
@@ -375,13 +406,13 @@
375
  }
376
  });
377
  };
378
-
379
  // رفع ملفات المصدر، الهدف والمصادر الإضافية
380
  processFileInput('sourceFile', 'sourceText', 'خطأ في معالجة ملف المصدر');
381
  processFileInput('targetFile', 'targetText', 'خطأ في معالجة ملف الهدف');
382
  processFileInput('sourceExtraFile', 'sourceExtraText', 'خطأ في معالجة ملف المصادر الإضافية');
383
-
384
- /* دالة عرض الأخطاء */
385
  const addError = (message, type = 'error') => {
386
  const errorsList = document.getElementById('errorsList');
387
  if (!errorsList) return;
@@ -393,51 +424,50 @@
393
  </div>`;
394
  errorsList.appendChild(errorDiv);
395
  };
396
-
397
- /* التعامل مع عملية التحليل */
398
  document.getElementById('submitBtn').addEventListener('click', async () => {
399
  const sourceText = document.getElementById('sourceText').value;
400
  const targetText = document.getElementById('targetText').value;
401
- const sourceExtra = document.getElementById('sourceExtraText').value.trim();
402
  document.getElementById('errorsList').innerHTML = '';
403
  document.getElementById('resultSection').classList.remove('hidden');
404
  document.getElementById('explanationBox').classList.remove('hidden');
405
-
406
  if (!sourceText || !targetText) {
407
  addError('يرجى إدخال كلا النصين المصدر والهدف');
408
  return;
409
  }
410
-
411
  const sourceWordCount = countWords(sourceText);
412
  const targetWordCount = countWords(targetText);
413
  if (sourceWordCount !== targetWordCount) {
414
  addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount})`, 'warning');
415
  }
416
-
417
  try {
418
  const progressDiv = document.createElement('div');
419
- progressDiv.className = "bg-blue-100 p-4 rounded-xl mb-4";
420
- progressDiv.innerHTML = `<div class="flex items-center">
421
- <div class="animate-spin h-6 w-6 border-4 border-blue-600 rounded-full border-t-transparent mr-3"></div>
422
- <span>جارٍ التحليل...</span>
423
  </div>`;
424
  document.getElementById('errorsList').appendChild(progressDiv);
425
-
426
  const prompt = ANALYSIS_PROMPT
427
  .replace("{source}", sourceText)
428
  .replace("{target}", targetText);
429
-
430
  const payload = {
431
  model: "deepseek-chat",
432
  messages: [
433
- { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص تركيزك على استخراج الأخطاء فقط." },
434
  { role: "user", content: prompt }
435
  ],
436
  temperature: 0.3,
437
  max_tokens: 2048,
438
  stream: false
439
  };
440
-
441
  const response = await fetch('https://api.deepseek.com/chat/completions', {
442
  method: 'POST',
443
  headers: {
@@ -446,15 +476,15 @@
446
  },
447
  body: JSON.stringify(payload)
448
  });
449
-
450
- if (!response.ok) {
451
- throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
452
  }
453
  const data = await response.json();
454
  const analysisOutput = data.choices[0].message.content.trim();
455
  progressDiv.remove();
456
-
457
- // إذا كانت النصوص متطابقة تماماً
458
  if (analysisOutput.includes('[MATCH]')) {
459
  const checkDiv = document.createElement('div');
460
  checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
@@ -462,20 +492,15 @@
462
  document.getElementById('errorsList').appendChild(checkDiv);
463
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
464
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
465
- document.getElementById('explanationText').innerHTML = `<p>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</p>`;
466
  } else {
467
- // تطبيق التعليم على النص المصدر فقط
468
  const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
469
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
 
470
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
471
  const explanationHTML = generateExplanation(sourceText, analysisOutput);
472
- let sourcesNote = "";
473
- if(sourceExtra) {
474
- sourcesNote = `<p><i class="fas fa-bookmark mr-1"></i> المصادر مستخدمة.</p>`;
475
- } else {
476
- sourcesNote = `<p><i class="fas fa-ban mr-1"></i> لم يتم استخدام المصادر.</p>`;
477
- }
478
- document.getElementById('explanationText').innerHTML = sourcesNote + explanationHTML;
479
  }
480
  } catch (error) {
481
  document.getElementById('errorsList').innerHTML = '';
@@ -485,4 +510,4 @@
485
  })();
486
  </script>
487
  </body>
488
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام المقارنة والتحليل المتقدم - شركة موندو لينجوا</title>
7
+ <!-- استيراد Tailwind CSS, FontAwesome وMammoth -->
8
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
 
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
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
  @keyframes gradient {
14
  0% { background-position: 0% 50%; }
15
  50% { background-position: 100% 50%; }
 
19
  background-size: 200% 200%;
20
  animation: gradient 15s ease infinite;
21
  }
 
22
  .transition-all { transition: all 0.3s ease-in-out; }
23
+ .animate-scale { transition: transform 0.2s ease-in-out; }
24
+ .animate-scale:hover { transform: scale(1.02); }
25
  .pulse-animation { animation: pulse 2s infinite; }
26
  @keyframes pulse {
27
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
28
  70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
29
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
30
  }
31
+
32
+ /* تنسيق النصوص والتظليل */
33
  .text-comparison { line-height: 1.8; white-space: pre-wrap; }
34
  .highlight-missing {
35
+ background-color: #f87171;
36
  color: #fff;
37
  padding: 0 4px;
38
  border-radius: 3px;
39
  font-weight: bold;
40
  }
41
  .highlight-number {
42
+ background-color: #facc15;
43
  color: #000;
44
  padding: 0 4px;
45
  border-radius: 3px;
46
  font-weight: bold;
47
  }
48
+ .highlight-abbreviation {
49
+ background-color: #34d399;
50
  color: #fff;
51
  padding: 0 4px;
52
  border-radius: 3px;
53
  font-weight: bold;
54
  }
55
+
56
+ /* تنسيق الفقرات وترقيمها */
57
  .line-item {
58
  margin-bottom: 1rem;
59
  padding: 0.5rem;
60
+ border-bottom: 1px dashed #ccc;
61
  }
62
  .line-number {
63
  font-weight: bold;
64
+ color: #4B5563;
65
  margin-left: 0.5rem;
66
  }
67
+ .line-text { display: inline-block; }
68
+
69
  /* تصميم البطاقات */
70
  .card {
71
+ background-color: #fff;
72
  border-radius: 1rem;
73
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
74
  padding: 2rem;
75
+ border: 1px solid #f3f4f6;
76
+ }
77
+ .card-hover:hover {
78
+ box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
79
+ transform: translateY(-3px);
80
  }
81
+ .icon { margin-left: 0.5rem; }
82
+ /* أيقونات رفع الملفات على اليمين */
83
+ .upload-label {
84
  display: flex;
85
+ flex-direction: row-reverse;
86
  align-items: center;
87
+ justify-content: center;
88
  }
89
  </style>
90
  </head>
91
+ <body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen">
92
  <div class="min-h-screen pb-12">
93
+ <!-- رأس الصفحة -->
94
+ <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">
95
  <div class="max-w-6xl mx-auto px-4 text-center">
96
+ <h1 class="text-6xl font-extrabold mb-4 animate-scale">
97
+ نظام المقارنة والتحليل المتقدم <i class="fas fa-chart-line icon"></i>
98
  </h1>
99
+ <p class="text-2xl opacity-90">
100
+ تحليل دقيق يشمل النصوص المفقودة، الأرقام/التواريخ، وفهم الاختصارات
101
  </p>
102
  </div>
103
  </header>
104
+
105
  <!-- المحتوى الرئيسي -->
106
+ <main class="max-w-7xl mx-auto px-4 space-y-10">
107
  <!-- قسم رفع الملفات -->
108
+ <div class="card card-hover">
109
+ <h2 class="text-3xl font-bold text-gray-800 border-b pb-3 mb-6">
110
+ <i class="fas fa-file-upload icon text-indigo-600"></i> تحميل الملفات
111
  </h2>
112
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
113
  <!-- ملف المصدر -->
114
+ <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">
115
+ <label class="cursor-pointer block upload-label">
 
 
116
  <input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden">
117
+ <span class="text-xl text-indigo-600 group-hover:text-indigo-700">ملف المصدر</span>
118
+ <i class="fas fa-upload text-6xl text-indigo-500 mb-4"></i>
119
  </label>
120
  </div>
121
  <!-- ملف الهدف -->
122
+ <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">
123
+ <label class="cursor-pointer block upload-label">
 
 
124
  <input type="file" id="targetFile" accept=".docx,.pdf" class="hidden">
125
+ <span class="text-xl text-pink-600 group-hover:text-pink-700">ملف الهدف</span>
126
+ <i class="fas fa-download text-6xl text-pink-500 mb-4"></i>
127
  </label>
128
  </div>
129
  </div>
130
+ <div id="processStatus" class="hidden mt-6">
131
+ <div class="flex items-center justify-end space-x-3 bg-indigo-100 rounded-xl p-4">
132
+ <span class="text-xl text-indigo-700">جارٍ معالجة الملف...</span>
133
+ <div class="animate-spin h-10 w-10 border-4 border-indigo-600 rounded-full border-t-transparent"></div>
134
  </div>
135
  </div>
136
+ </div>
137
+
138
  <!-- قسم إدخال النصوص يدويًا -->
139
+ <div class="card card-hover">
140
+ <div class="space-y-8">
141
  <!-- النص المصدر -->
142
  <div class="group">
143
+ <label class="block text-2xl font-bold text-gray-700 mb-4">
144
+ <i class="fas fa-language icon text-indigo-600"></i> النص المصدر
145
  </label>
146
+ <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>
147
  </div>
148
  <!-- النص الهدف -->
149
  <div class="group">
150
+ <label class="block text-2xl font-bold text-gray-700 mb-4">
151
+ <i class="fas fa-language icon text-pink-600"></i> النص الهدف
152
  </label>
153
+ <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>
154
  </div>
155
  </div>
156
+ </div>
157
+
158
  <!-- قسم المصادر الإضافية -->
159
+ <div class="card card-hover">
160
+ <h2 class="text-3xl font-bold text-gray-800 border-b pb-3 mb-6">
161
+ <i class="fas fa-book-open icon text-green-600"></i> مصادر إضافية
162
  </h2>
163
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
164
+ <!-- رفع ملف المصادر الإضافية -->
165
+ <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">
166
+ <label class="cursor-pointer block upload-label">
 
 
167
  <input type="file" id="sourceExtraFile" accept=".docx,.pdf" class="hidden">
168
+ <span class="text-xl text-green-600 group-hover:text-green-700">تحميل ملف المصادر</span>
169
+ <i class="fas fa-upload text-6xl text-green-500 mb-4"></i>
170
  </label>
171
  </div>
172
  <!-- إدخال المصادر يدويًا -->
173
  <div class="group">
174
+ <label class="block text-2xl font-bold text-gray-700 mb-4">
175
+ <i class="fas fa-edit icon text-green-600"></i> إدخال المصادر يدويًا
176
  </label>
177
+ <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>
178
  </div>
179
  </div>
180
+ </div>
181
+
182
+ <!-- زر التحليل والمراجعة -->
183
+ <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">
184
+ <div class="flex items-center justify-center">
185
+ <span>تحليل ومراجعة النصوص</span>
186
+ <i class="fas fa-sync-alt icon mr-4"></i>
187
+ </div>
188
+ </button>
189
+
190
+ <!-- قسم نتائج التحليل والمقارنة -->
191
+ <div id="resultSection" class="card hidden">
192
+ <h2 class="text-3xl font-bold text-gray-800 border-b pb-4 mb-6">
193
+ <i class="fas fa-search icon text-green-600"></i> نتائج التحليل والمقارنة
194
  </h2>
195
+ <div id="errorsList" class="space-y-4 mb-6"></div>
196
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
197
  <div>
198
+ <h4 class="text-2xl font-bold text-gray-700 mb-4">
199
+ <i class="fas fa-file-alt icon text-indigo-600"></i> النص المصدر (مع التعليم)
200
  </h4>
201
+ <div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-8 min-h-[250px] border-2 border-indigo-200 text-comparison"></div>
202
  </div>
203
  <div>
204
+ <h4 class="text-2xl font-bold text-gray-700 mb-4">
205
+ <i class="fas fa-file-alt icon text-pink-600"></i> النص الهدف (بدون تعليم)
206
  </h4>
207
+ <div id="targetTextReview" class="bg-gray-50 rounded-xl p-8 min-h-[250px] border-2 border-gray-300 text-comparison"></div>
208
  </div>
209
  </div>
210
+ </div>
211
+
212
+ <!-- قسم الشرح التفصيلي للاختلافات -->
213
+ <div id="explanationBox" class="card hidden">
214
+ <h2 class="text-3xl font-bold text-gray-800 border-b pb-4 mb-6">
215
+ <i class="fas fa-info-circle icon text-green-600"></i> شرح الاختلافات
216
  </h2>
217
+ <div id="explanationText" class="text-2xl text-gray-700"></div>
218
+ </div>
219
  </main>
220
  </div>
221
+
222
+ <!-- جافا سكريبت: الوظائف والتحليل -->
223
  <script>
224
  (function() {
225
  "use strict";
226
+
227
+ // تعريف البرومت مع التعليمات الدقيقة ودعم الاختصارات
228
+ const ANALYSIS_PROMPT = `أنت خبير لغوي وتقني متخصص في مراجعة الترجمة وتحليل النصوص بدقة عالية.
229
+ مهمتك مقارنة النص المصدر والنص الهدف بدقة مع مراعاة فهم الاختصارات.
230
+ إذا كانت النصوص متطابقة تماماً، أرجع [MATCH] فقط.
231
+ أما إذا كان هناك اختلافات، فحدد الأنواع التالية:
232
+ 1. النصوص المفقودة: الكلمات أو العبارات الموجودة في النص المصدر وغير موجودة في النص الهدف.
233
+ 2. الأرقام والتواريخ: التي يجب أن تكون مطابقة بين النصين؛ وفي حال وجود اختلاف، قم بالإشارة إليه.
234
+ 3. اختلاف المعنى: إذا كانت الترجمة تحمل معنى مختلفاً عن النص المصدر.
235
+ 4. الاختصارات: يجب على النموذج فهم الاختصارات وتحليلها بدقة وعدم اعتبارها خطأ إذا كانت مستخدمة بشكل سليم.
236
+ استخدم العلامات التالية لتعليم النص المصدر فقط:
237
+ - النصوص المفقودة بين علامتي __ و __.
238
+ - الأرقام والتواريخ بين علامتي < و >.
239
+ - اختلاف المعنى بين علامتي [MEANING] و [/MEANING].
240
+ - الاختصارات بين علامتي {ABBR} و {/ABBR}.
241
+ قدم الناتج في شكل قائمة مفصلة مع شرح مختصر لكل اختلاف وذكر رقم السطر إن أمكن.
242
 
243
  النص المصدر:
244
  {source}
245
 
246
  النص الهدف:
247
  {target}`;
248
+
249
+ // دوال مساعدة عامة
250
  const countWords = text =>
251
  text.trim().split(/\s+/).filter(word => word !== "").length;
252
+
253
  const escapeRegExp = string =>
254
  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
255
+
256
+ // تقسيم النص إلى فقرات مرقمة
257
  const splitIntoLines = text =>
258
  text.split(/\n+/).map((line, i) => {
259
  line = line.trim();
260
  if(line && !line.endsWith('.')) { line += '.'; }
261
  return `<div class="line-item"><span class="line-number">${i+1}:</span><span class="line-text">${line}</span></div>`;
262
  }).join('');
263
+
264
+ // الحصول على رقم السطر الذي يحتوي على عبارة معينة
265
  const getLineNumber = (text, substring) => {
266
  const index = text.indexOf(substring);
267
  if (index === -1) return "غير محدد";
268
  return text.substring(0, index).split("\n").length;
269
  };
270
+
271
+ // تظليل الاختلافات في النص المصدر بناءً على نتائج التحليل
272
+ const applyHighlights = (originalText, analysisOutput) => {
273
+ let highlightedText = originalText;
274
  let match;
275
+ // تظليل النصوص المفقودة
276
  const missingRegex = /__(.*?)__/g;
277
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
278
  const phrase = match[1].trim();
 
282
  highlightedText = highlightedText.replace(phraseRegex, replacement);
283
  }
284
  }
285
+ // تظليل الأرقام والتواريخ
286
  const numberRegex = /<([^<>]+)>/g;
287
  while ((match = numberRegex.exec(analysisOutput)) !== null) {
288
  const phrase = match[1].trim();
 
292
  highlightedText = highlightedText.replace(phraseRegex, replacement);
293
  }
294
  }
295
+ // تظليل الاختصارات
296
+ const abbrRegex = /{ABBR}(.*?){\/ABBR}/g;
297
+ while ((match = abbrRegex.exec(analysisOutput)) !== null) {
298
  const phrase = match[1].trim();
299
  if (phrase) {
300
+ const replacement = `<span class="highlight-abbreviation">${phrase}</span>`;
301
  const phraseRegex = new RegExp(escapeRegExp(phrase), 'g');
302
  highlightedText = highlightedText.replace(phraseRegex, replacement);
303
  }
304
  }
305
  return highlightedText;
306
  };
307
+
308
+ // توليد شرح تفصيلي للاختلافات
309
  const generateExplanation = (sourceText, analysisOutput) => {
310
+ let explanations = [];
311
  const iconMissing = `<i class="fas fa-exclamation-triangle mr-1"></i>`;
312
  const iconNumber = `<i class="fas fa-hashtag mr-1"></i>`;
313
  const iconMeaning = `<i class="fas fa-info-circle mr-1"></i>`;
314
+ const iconAbbr = `<i class="fas fa-font mr-1"></i>`;
315
+
316
  // شرح النصوص المفقودة
317
  const missingRegex = /__(.*?)__/g;
318
+ let match;
319
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
320
  const phrase = match[1].trim();
321
  if (phrase) {
322
  const lineNum = getLineNumber(sourceText, phrase);
323
+ explanations.push(`<p>${iconMissing} في السطر ${lineNum}: النص المفقود <span class="highlight-missing">${phrase}</span></p>`);
324
  }
325
  }
326
  // شرح الأرقام والتواريخ
 
329
  const phrase = match[1].trim();
330
  if (phrase) {
331
  const lineNum = getLineNumber(sourceText, phrase);
332
+ explanations.push(`<p>${iconNumber} في السطر ${lineNum}: الرقم/التاريخ <span class="highlight-number">${phrase}</span></p>`);
333
  }
334
  }
335
  // شرح اختلاف المعنى
 
338
  const phrase = match[1].trim();
339
  if (phrase) {
340
  const lineNum = getLineNumber(sourceText, phrase);
341
+ explanations.push(`<p>${iconMeaning} في السطر ${lineNum}: اختلاف المعنى <span class="highlight-missing">${phrase}</span></p>`);
342
+ }
343
+ }
344
+ // شرح الاختصارات
345
+ const abbrRegex = /{ABBR}(.*?){\/ABBR}/g;
346
+ while ((match = abbrRegex.exec(analysisOutput)) !== null) {
347
+ const phrase = match[1].trim();
348
+ if (phrase) {
349
+ const lineNum = getLineNumber(sourceText, phrase);
350
+ explanations.push(`<p>${iconAbbr} في السطر ${lineNum}: الاختصار <span class="highlight-abbreviation">${phrase}</span></p>`);
351
  }
352
  }
353
+
354
+ // التحقق من استخدام المصادر الخارجية
355
+ const usedSource = analysisOutput.includes('[USED_SOURCE]');
356
+ let sourceNote = usedSource ? `<p><i class="fas fa-book-reader mr-1"></i> تم استخدام مصادر خارجية لشرح الاختصارات والمصطلحات.</p>`
357
+ : `<p><i class="fas fa-book mr-1"></i> لم يتم استخدام مصادر خارجية.</p>`;
358
+
359
+ if (explanations.length === 0) {
360
+ return `<p><i class="fas fa-check-circle mr-2"></i> لا توجد اختلافات ملحوظة بين النصين.</p>` + sourceNote;
361
  }
362
+ return explanations.join('') + sourceNote;
363
  };
364
+
365
+ // دالة معالجة الملفات (PDF و DOCX)
366
  const processFile = async file => {
367
  let text = "";
368
  try {
 
389
  }
390
  return text;
391
  };
392
+
393
+ // التعامل مع رفع الملفات وإدخال النصوص
394
  const processFileInput = (inputId, targetTextAreaId, errorMsg) => {
395
  document.getElementById(inputId)?.addEventListener('change', async (event) => {
396
  const file = event.target.files[0];
 
406
  }
407
  });
408
  };
409
+
410
  // رفع ملفات المصدر، الهدف والمصادر الإضافية
411
  processFileInput('sourceFile', 'sourceText', 'خطأ في معالجة ملف المصدر');
412
  processFileInput('targetFile', 'targetText', 'خطأ في معالجة ملف الهدف');
413
  processFileInput('sourceExtraFile', 'sourceExtraText', 'خطأ في معالجة ملف المصادر الإضافية');
414
+
415
+ // دالة عرض الأخطاء
416
  const addError = (message, type = 'error') => {
417
  const errorsList = document.getElementById('errorsList');
418
  if (!errorsList) return;
 
424
  </div>`;
425
  errorsList.appendChild(errorDiv);
426
  };
427
+
428
+ // عملية التحليل والمقارنة عند الضغط على زر التحليل
429
  document.getElementById('submitBtn').addEventListener('click', async () => {
430
  const sourceText = document.getElementById('sourceText').value;
431
  const targetText = document.getElementById('targetText').value;
 
432
  document.getElementById('errorsList').innerHTML = '';
433
  document.getElementById('resultSection').classList.remove('hidden');
434
  document.getElementById('explanationBox').classList.remove('hidden');
435
+
436
  if (!sourceText || !targetText) {
437
  addError('يرجى إدخال كلا النصين المصدر والهدف');
438
  return;
439
  }
440
+
441
  const sourceWordCount = countWords(sourceText);
442
  const targetWordCount = countWords(targetText);
443
  if (sourceWordCount !== targetWordCount) {
444
  addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount})`, 'warning');
445
  }
446
+
447
  try {
448
  const progressDiv = document.createElement('div');
449
+ progressDiv.className = "bg-indigo-100 p-4 rounded-xl mb-4";
450
+ progressDiv.innerHTML = `<div class="flex items-center justify-end">
451
+ <span class="text-xl">جارٍ التحليل...</span>
452
+ <div class="animate-spin h-10 w-10 border-4 border-indigo-600 rounded-full border-t-transparent ml-4"></div>
453
  </div>`;
454
  document.getElementById('errorsList').appendChild(progressDiv);
455
+
456
  const prompt = ANALYSIS_PROMPT
457
  .replace("{source}", sourceText)
458
  .replace("{target}", targetText);
459
+
460
  const payload = {
461
  model: "deepseek-chat",
462
  messages: [
463
+ { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص بدقة عالية، وتفهم الاختصارات ومعانيها الكاملة." },
464
  { role: "user", content: prompt }
465
  ],
466
  temperature: 0.3,
467
  max_tokens: 2048,
468
  stream: false
469
  };
470
+
471
  const response = await fetch('https://api.deepseek.com/chat/completions', {
472
  method: 'POST',
473
  headers: {
 
476
  },
477
  body: JSON.stringify(payload)
478
  });
479
+
480
+ if (!response.ok) {
481
+ throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
482
  }
483
  const data = await response.json();
484
  const analysisOutput = data.choices[0].message.content.trim();
485
  progressDiv.remove();
486
+
487
+ // في حالة التطابق التام
488
  if (analysisOutput.includes('[MATCH]')) {
489
  const checkDiv = document.createElement('div');
490
  checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
 
492
  document.getElementById('errorsList').appendChild(checkDiv);
493
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText);
494
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
495
+ document.getElementById('explanationText').innerHTML = `<p class="text-xl">النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</p>`;
496
  } else {
497
+ // تطبيق التعليم فقط على النص المصدر
498
  const sourceHighlighted = applyHighlights(sourceText, analysisOutput);
499
  document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted);
500
+ // عرض النص الهدف بدون تعليم
501
  document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText);
502
  const explanationHTML = generateExplanation(sourceText, analysisOutput);
503
+ document.getElementById('explanationText').innerHTML = explanationHTML;
 
 
 
 
 
 
504
  }
505
  } catch (error) {
506
  document.getElementById('errorsList').innerHTML = '';
 
510
  })();
511
  </script>
512
  </body>
513
+ </html>