Hugging Face's logo

Spaces:
joermd
/
translate
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +111 -145
index.html CHANGED
@@ -3,15 +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 وFont Awesome و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
- الحركات والتأثيرات
14
- ------------------------------- */
15
  @keyframes gradient {
16
  0% { background-position: 0% 50%; }
17
  50% { background-position: 100% 50%; }
@@ -21,247 +19,227 @@
21
  background-size: 200% 200%;
22
  animation: gradient 15s ease infinite;
23
  }
 
24
  .transition-all { transition: all 0.3s ease-in-out; }
25
- .animate-scale { transition: transform 0.2s ease-in-out; }
26
- .animate-scale:hover { transform: scale(1.02); }
27
  .pulse-animation { animation: pulse 2s infinite; }
28
  @keyframes pulse {
29
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.2); }
30
  70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
31
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
32
  }
33
-
34
- /* -------------------------------
35
- تنسيقات النص والتظليل (استخدام ألوان مميزة)
36
- ------------------------------- */
37
  .text-comparison { line-height: 1.8; white-space: pre-wrap; }
38
  .highlight-missing {
39
- background-color: #f87171; /* أحمر */
40
  color: #fff;
41
  padding: 0 4px;
42
  border-radius: 3px;
43
  font-weight: bold;
44
  }
45
  .highlight-number {
46
- background-color: #facc15; /* أصفر */
47
  color: #000;
48
  padding: 0 4px;
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;
57
  font-weight: bold;
58
  }
59
-
60
- /* -------------------------------
61
- تنسيق الفقرات وترقيمها
62
- ------------------------------- */
63
  .line-item {
64
  margin-bottom: 1rem;
65
  padding: 0.5rem;
66
- border-bottom: 1px dashed #ccc;
67
  }
68
  .line-number {
69
  font-weight: bold;
70
- color: #4B5563;
71
  margin-left: 0.5rem;
72
  }
73
- .line-text { display: inline-block; }
74
-
75
- /* -------------------------------
76
- تصميم البطاقات والأيقونات
77
- ------------------------------- */
78
  .card {
79
- background-color: #fff;
80
  border-radius: 1rem;
81
- box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
82
  padding: 2rem;
83
- border: 1px solid #f3f4f6;
84
  }
85
- .card-hover:hover {
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>
227
 
228
- <!-- -------------------------------
229
- جافا سكريبت: الوظائف والتحليل
230
- ------------------------------- -->
231
  <script>
232
  (function() {
233
  "use strict";
234
-
235
- /* تحسين البرومت:
236
- - مهمتك: مقارنة النص المصدر والنص الهدف واستخراج الأخطاء فقط.
237
- - يتم التركيز على:
238
- 1. النصوص المفقودة: الكلمات أو العبارات التي لم تُترجم من النص المصدر (يتم التعليم عليها فقط في ملف المصدر).
239
- 2. الأرقام والتواريخ: التي لا تتطابق بين النص المصدر والنص الهدف.
240
- 3. اختلاف المعنى: في حال وجود اختلاف واضح في معنى النص.
241
- - التعليم يتم بعد التحليل وفق فقرة، وليس عشوائيًا.
242
- - يجب الاعتماد بشكل كامل على نموذج DeepSeek لإجراء التحليل.
243
- - إذا تم استخدام المصادر (ملف المصادر أو الإدخال اليدوي) يجب إضافة أيقونة توضيحية لذلك.
244
- - يجب أن يكون الناتج عبارة عن شرح تفصيلي فقرة بفقرة مع الإشارة إلى رقم السطر عند الإمكان.
245
-
 
246
  النص المصدر:
247
  {source}
248
 
249
  النص الهدف:
250
  {target}`;
251
-
252
- const API_URL = 'https://api.deepseek.com/chat/completions';
253
- const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01';
254
 
255
- /* -------------------------------
256
- دوال مساعدة عامة
257
- ------------------------------- */
258
  const countWords = text =>
259
  text.trim().split(/\s+/).filter(word => word !== "").length;
260
 
261
  const escapeRegExp = string =>
262
  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
263
 
264
- // تقسيم النص إلى فقرات مرقمة
265
  const splitIntoLines = text =>
266
  text.split(/\n+/).map((line, i) => {
267
  line = line.trim();
@@ -269,20 +247,18 @@
269
  return `<div class="line-item"><span class="line-number">${i+1}:</span><span class="line-text">${line}</span></div>`;
270
  }).join('');
271
 
272
- // الحصول على رقم السطر الذي يحتوي على عبارة معينة
273
  const getLineNumber = (text, substring) => {
274
  const index = text.indexOf(substring);
275
  if (index === -1) return "غير محدد";
276
  return text.substring(0, index).split("\n").length;
277
  };
278
 
279
- /* -------------------------------
280
- دوال تظليل الاختلافات (يتم التعليم على النص المصدر فقط)
281
- ------------------------------- */
282
  const applyHighlights = (sourceText, analysisOutput) => {
283
  let highlightedText = sourceText;
284
  let match;
285
- // تظليل النصوص المفقودة
286
  const missingRegex = /__(.*?)__/g;
287
  while ((match = missingRegex.exec(analysisOutput)) !== null) {
288
  const phrase = match[1].trim();
@@ -292,7 +268,7 @@
292
  highlightedText = highlightedText.replace(phraseRegex, replacement);
293
  }
294
  }
295
- // تظليل الأرقام والتواريخ
296
  const numberRegex = /<([^<>]+)>/g;
297
  while ((match = numberRegex.exec(analysisOutput)) !== null) {
298
  const phrase = match[1].trim();
@@ -302,7 +278,7 @@
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();
@@ -315,15 +291,15 @@
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) {
@@ -331,7 +307,7 @@
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();
@@ -340,7 +316,7 @@
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();
@@ -355,9 +331,7 @@
355
  return paragraphs.join('');
356
  };
357
 
358
- /* -------------------------------
359
- دالة معالجة الملفات (PDF و DOCX)
360
- ------------------------------- */
361
  const processFile = async file => {
362
  let text = "";
363
  try {
@@ -385,9 +359,7 @@
385
  return text;
386
  };
387
 
388
- /* -------------------------------
389
- التعامل مع رفع الملفات وإدخال النصوص
390
- ------------------------------- */
391
  const processFileInput = (inputId, targetTextAreaId, errorMsg) => {
392
  document.getElementById(inputId)?.addEventListener('change', async (event) => {
393
  const file = event.target.files[0];
@@ -407,11 +379,9 @@
407
  // رفع ملفات المصدر، الهدف والمصادر الإضافية
408
  processFileInput('sourceFile', 'sourceText', 'خطأ في معالجة ملف المصدر');
409
  processFileInput('targetFile', 'targetText', 'خطأ في معالجة ملف الهدف');
410
- processFileInput('sourceExtraFile', 'sourceExtraText', 'خطأ في معالجة ملف المصدر الإضافي');
411
 
412
- /* -------------------------------
413
- دالة عرض الأخطاء
414
- ------------------------------- */
415
  const addError = (message, type = 'error') => {
416
  const errorsList = document.getElementById('errorsList');
417
  if (!errorsList) return;
@@ -424,9 +394,7 @@
424
  errorsList.appendChild(errorDiv);
425
  };
426
 
427
- /* -------------------------------
428
- التعامل مع عملية التحليل والمقارنة
429
- ------------------------------- */
430
  document.getElementById('submitBtn').addEventListener('click', async () => {
431
  const sourceText = document.getElementById('sourceText').value;
432
  const targetText = document.getElementById('targetText').value;
@@ -448,9 +416,9 @@
448
 
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);
@@ -462,7 +430,7 @@
462
  const payload = {
463
  model: "deepseek-chat",
464
  messages: [
465
- { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص بدقة عالية مع تركيز على الأخطاء فقط." },
466
  { role: "user", content: prompt }
467
  ],
468
  temperature: 0.3,
@@ -470,23 +438,23 @@
470
  stream: false
471
  };
472
 
473
- const response = await fetch(API_URL, {
474
  method: 'POST',
475
  headers: {
476
- 'Authorization': 'Bearer ' + API_KEY,
477
  'Content-Type': 'application/json'
478
  },
479
  body: JSON.stringify(payload)
480
  });
481
 
482
- if (!response.ok) {
483
- throw new Error('حدث خطأ بالشبكة: ' + response.statusText);
484
  }
485
  const data = await response.json();
486
  const analysisOutput = data.choices[0].message.content.trim();
487
  progressDiv.remove();
488
 
489
- // في حالة التطابق التام
490
  if (analysisOutput.includes('[MATCH]')) {
491
  const checkDiv = document.createElement('div');
492
  checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center";
@@ -496,13 +464,11 @@
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>`;
 
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
  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();
 
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
  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
  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();
 
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) {
 
307
  paragraphs.push(`<p>${iconMissing} في السطر ${lineNum}، النص المفقود: <span class="highlight-missing">${phrase}</span></p>`);
308
  }
309
  }
310
+ // شرح الأرقام والتواريخ
311
  const numberRegex = /<([^<>]+)>/g;
312
  while ((match = numberRegex.exec(analysisOutput)) !== null) {
313
  const phrase = match[1].trim();
 
316
  paragraphs.push(`<p>${iconNumber} في السطر ${lineNum}، الرقم/التاريخ: <span class="highlight-number">${phrase}</span></p>`);
317
  }
318
  }
319
+ // شرح اختلاف المعنى
320
  const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g;
321
  while ((match = meaningRegex.exec(analysisOutput)) !== null) {
322
  const phrase = match[1].trim();
 
331
  return paragraphs.join('');
332
  };
333
 
334
+ /* دالة معالجة الملفات (PDF و DOCX) */
 
 
335
  const processFile = async file => {
336
  let text = "";
337
  try {
 
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];
 
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;
 
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;
 
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);
 
430
  const payload = {
431
  model: "deepseek-chat",
432
  messages: [
433
+ { role: "system", content: "أنت خبير في تحليل ومراجعة النصوص تركيزك على استخراج الأخطاء فقط." },
434
  { role: "user", content: prompt }
435
  ],
436
  temperature: 0.3,
 
438
  stream: false
439
  };
440
 
441
+ const response = await fetch('https://api.deepseek.com/chat/completions', {
442
  method: 'POST',
443
  headers: {
444
+ 'Authorization': 'Bearer sk-15606736ed9e4aea8b7cc11a195d2b01',
445
  'Content-Type': 'application/json'
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";
 
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>`;