joermd commited on
Commit
58eb977
·
verified ·
1 Parent(s): 8263469

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +126 -46
index.html CHANGED
@@ -105,6 +105,13 @@
105
  background-color: #fff9c4;
106
  text-decoration: none;
107
  }
 
 
 
 
 
 
 
108
  .api-key-section {
109
  margin-bottom: 20px;
110
  }
@@ -112,6 +119,30 @@
112
  color: #e74c3c;
113
  margin-top: 10px;
114
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </style>
116
  </head>
117
  <body>
@@ -145,6 +176,22 @@
145
  <div id="result" class="result" style="display: none;">
146
  <h2>نتائج المقارنة:</h2>
147
  <div id="comparisonResults"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
  </div>
150
 
@@ -156,6 +203,9 @@
156
  const errorMessageElement = document.getElementById('errorMessage');
157
  const resultElement = document.getElementById('result');
158
  const comparisonResultsElement = document.getElementById('comparisonResults');
 
 
 
159
  const spinner = document.getElementById('spinner');
160
 
161
  errorMessageElement.textContent = '';
@@ -181,8 +231,20 @@
181
  3. النصوص الفاسدة أو غير المفهومة
182
  4. النصوص المختلفة في المعنى
183
 
 
 
184
  قدم تحليلاً مفصلاً للاختلافات وتصنيفها حسب نوع الخطأ.
185
 
 
 
 
 
 
 
 
 
 
 
186
  النص المصدر:
187
  ${sourceText}
188
 
@@ -199,7 +261,7 @@
199
  body: JSON.stringify({
200
  model: 'deepseek-reasoner',
201
  messages: [
202
- { role: 'system', content: 'أنت مساعد مفيد متخصص في مراجعة النصوص وتحديد الاختلافات بينها بدقة عالية.' },
203
  { role: 'user', content: prompt }
204
  ],
205
  stream: false
@@ -211,9 +273,42 @@
211
  }
212
 
213
  const data = await response.json();
214
- const analysisResult = data.choices[0].message.content;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
 
216
- comparisonResultsElement.innerHTML = formatAnalysisResult(analysisResult, sourceText, targetText);
217
  resultElement.style.display = 'block';
218
  } catch (error) {
219
  errorMessageElement.textContent = `حدث خطأ: ${error.message}`;
@@ -223,46 +318,31 @@
223
  }
224
  });
225
 
226
- function formatAnalysisResult(analysisText, sourceText, targetText) {
227
- // التحويل إلى HTML مع إبراز الاختلافات
228
- let formattedText = analysisText
229
- .replace(/\n/g, '<br>')
230
- .replace(/الأرقام المكتوبة بشكل خاطئ:|الأرقام غير الصحيحة:/gi, '<strong style="color: #e74c3c;">الأرقام المكتوبة بشكل خاطئ:</strong>')
231
- .replace(/النصوص المفقودة:/gi, '<strong style="color: #e74c3c;">النصوص المفقودة:</strong>')
232
- .replace(/النصوص الفاسدة:|النصوص غير المفهومة:/gi, '<strong style="color: #e74c3c;">النصوص الفاسدة:</strong>')
233
- .replace(/النصوص المختلفة في المعنى:/gi, '<strong style="color: #e74c3c;">النصوص المختلفة في المعنى:</strong>')
234
- .replace(/في النص المصدر: "(.*?)"/g, 'في النص المصدر: "<span class="diff-highlight diff-removed">$1</span>"')
235
- .replace(/في النص الهدف: "(.*?)"/g, 'في النص الهدف: "<span class="diff-highlight diff-added">$1</span>"');
236
-
237
- // إضافة مقارنة نصية مرئية
238
- const sourceLines = sourceText.split('\n');
239
- const targetLines = targetText.split('\n');
240
- const maxLines = Math.max(sourceLines.length, targetLines.length);
241
-
242
- let visualComparison = '<h3>المقارنة السطرية:</h3><div style="display: flex; gap: 20px;">';
243
-
244
- // عمود النص المصدر
245
- visualComparison += '<div style="flex: 1;"><h4>النص المصدر:</h4><pre style="background-color: #f8f8f8; padding: 10px; border-radius: 4px; overflow-x: auto;">';
246
- for (let i = 0; i < maxLines; i++) {
247
- if (i < sourceLines.length) {
248
- visualComparison += `<div>${i+1}. ${sourceLines[i] || ''}</div>`;
249
- }
250
- }
251
- visualComparison += '</pre></div>';
252
-
253
- // عمود النص الهدف
254
- visualComparison += '<div style="flex: 1;"><h4>النص الهدف:</h4><pre style="background-color: #f8f8f8; padding: 10px; border-radius: 4px; overflow-x: auto;">';
255
- for (let i = 0; i < maxLines; i++) {
256
- if (i < targetLines.length) {
257
- visualComparison += `<div>${i+1}. ${targetLines[i] || ''}</div>`;
258
- }
259
- }
260
- visualComparison += '</pre></div>';
261
-
262
- visualComparison += '</div>';
263
-
264
- return formattedText + '<br><br>' + visualComparison;
265
- }
266
- </script>
267
- </body>
268
- </html>
 
105
  background-color: #fff9c4;
106
  text-decoration: none;
107
  }
108
+ .error-text {
109
+ background-color: #ffcdd2;
110
+ color: #c62828;
111
+ padding: 0 3px;
112
+ border-radius: 3px;
113
+ font-weight: bold;
114
+ }
115
  .api-key-section {
116
  margin-bottom: 20px;
117
  }
 
119
  color: #e74c3c;
120
  margin-top: 10px;
121
  }
122
+ .side-by-side {
123
+ display: flex;
124
+ gap: 20px;
125
+ margin-top: 20px;
126
+ }
127
+ .preview-column {
128
+ flex: 1;
129
+ padding: 15px;
130
+ background-color: #f8f8f8;
131
+ border-radius: 4px;
132
+ border: 1px solid #ddd;
133
+ }
134
+ .preview-heading {
135
+ margin-top: 0;
136
+ padding-bottom: 10px;
137
+ border-bottom: 1px solid #ddd;
138
+ }
139
+ .explanation-section {
140
+ margin-top: 30px;
141
+ padding: 15px;
142
+ background-color: #e8f4fd;
143
+ border-radius: 4px;
144
+ border: 1px solid #cce5ff;
145
+ }
146
  </style>
147
  </head>
148
  <body>
 
176
  <div id="result" class="result" style="display: none;">
177
  <h2>نتائج المقارنة:</h2>
178
  <div id="comparisonResults"></div>
179
+
180
+ <div class="explanation-section">
181
+ <h3>شرح الاختلافات:</h3>
182
+ <div id="explanationText"></div>
183
+ </div>
184
+
185
+ <div class="side-by-side">
186
+ <div class="preview-column">
187
+ <h3 class="preview-heading">النص المصدر مع تحديد الاختلافات:</h3>
188
+ <div id="sourcePreview"></div>
189
+ </div>
190
+ <div class="preview-column">
191
+ <h3 class="preview-heading">النص الهدف مع تحديد الاختلافات:</h3>
192
+ <div id="targetPreview"></div>
193
+ </div>
194
+ </div>
195
  </div>
196
  </div>
197
 
 
203
  const errorMessageElement = document.getElementById('errorMessage');
204
  const resultElement = document.getElementById('result');
205
  const comparisonResultsElement = document.getElementById('comparisonResults');
206
+ const explanationTextElement = document.getElementById('explanationText');
207
+ const sourcePreviewElement = document.getElementById('sourcePreview');
208
+ const targetPreviewElement = document.getElementById('targetPreview');
209
  const spinner = document.getElementById('spinner');
210
 
211
  errorMessageElement.textContent = '';
 
231
  3. النصوص الفاسدة أو غير المفهومة
232
  4. النصوص المختلفة في المعنى
233
 
234
+ مهم جدًا: قم بتحديد النص المختلف أو الذي يحتوي على خطأ بوضعه بين علامتي <<>> في إجابتك.
235
+
236
  قدم تحليلاً مفصلاً للاختلافات وتصنيفها حسب نوع الخطأ.
237
 
238
+ بالإضافة لذلك، قم بإعداد نسخة من النص المصدر مع وضع علامة <<>> حول الأجزاء التي تختلف عن النص الهدف أو غير موجودة في النص الهدف.
239
+
240
+ كذلك قم بإعداد نسخة من النص الهدف مع وضع علامة <<>> حول الأجزاء التي تختلف عن النص المصدر أو الأجزاء التي تحتوي على أخطاء.
241
+
242
+ جاوب على شكل JSON مع المفاتيح التالية:
243
+ - analysisResult: تحليل مفصل للاختلافات
244
+ - sourceWithMarkers: النص المصدر مع علامات <<>> حول المناطق المختلفة
245
+ - targetWithMarkers: النص الهدف مع علامات <<>> حول المناطق المختلفة
246
+ - explanation: شرح موجز وواضح للاختلافات الرئيسية
247
+
248
  النص المصدر:
249
  ${sourceText}
250
 
 
261
  body: JSON.stringify({
262
  model: 'deepseek-reasoner',
263
  messages: [
264
+ { role: 'system', content: 'أنت مساعد مفيد متخصص في مراجعة النصوص وتحديد الاختلافات بينها بدقة عالية. يجب أن تضع الاختلافات والأخطاء بين علامتي <<>> في إجابتك وتنظم النتائج بتنسيق JSON كما هو مطلوب.' },
265
  { role: 'user', content: prompt }
266
  ],
267
  stream: false
 
273
  }
274
 
275
  const data = await response.json();
276
+ const result = data.choices[0].message.content;
277
+
278
+ // استخراج JSON من النتيجة
279
+ let jsonResult;
280
+ try {
281
+ // البحث عن JSON داخل النص
282
+ const jsonRegex = /{[\s\S]*}/;
283
+ const match = result.match(jsonRegex);
284
+
285
+ if (match) {
286
+ jsonResult = JSON.parse(match[0]);
287
+ } else {
288
+ // إذا لم يتم العثور على JSON، عامل النص كاملاً كتحليل
289
+ jsonResult = {
290
+ analysisResult: result,
291
+ sourceWithMarkers: sourceText,
292
+ targetWithMarkers: targetText,
293
+ explanation: "لم يتم توفير شرح منظم."
294
+ };
295
+ }
296
+ } catch (e) {
297
+ console.error("خطأ في تحليل JSON:", e);
298
+ jsonResult = {
299
+ analysisResult: result,
300
+ sourceWithMarkers: sourceText,
301
+ targetWithMarkers: targetText,
302
+ explanation: "لم يتم توفير شرح منظم."
303
+ };
304
+ }
305
+
306
+ // عرض النتائج
307
+ comparisonResultsElement.innerHTML = formatAnalysisResult(jsonResult.analysisResult);
308
+ explanationTextElement.innerHTML = formatExplanation(jsonResult.explanation);
309
+ sourcePreviewElement.innerHTML = formatTextWithMarkers(jsonResult.sourceWithMarkers || sourceText);
310
+ targetPreviewElement.innerHTML = formatTextWithMarkers(jsonResult.targetWithMarkers || targetText);
311
 
 
312
  resultElement.style.display = 'block';
313
  } catch (error) {
314
  errorMessageElement.textContent = `حدث خطأ: ${error.message}`;
 
318
  }
319
  });
320
 
321
+ function formatAnalysisResult(analysisText) {
322
+ // التحويل إلى HTML مع إبراز الاختلافات
323
+ let formattedText = analysisText
324
+ .replace(/\n/g, '<br>')
325
+ .replace(/الأرقام المكتوبة بشكل خاطئ:|الأرقام غير الصحيحة:/gi, '<strong style="color: #e74c3c;">الأرقام المكتوبة بشكل خاطئ:</strong>')
326
+ .replace(/النصوص المفقودة:/gi, '<strong style="color: #e74c3c;">النصوص المفقودة:</strong>')
327
+ .replace(/النصوص الفاسدة:|النصوص غير المفهومة:/gi, '<strong style="color: #e74c3c;">النصوص الفاسدة:</strong>')
328
+ .replace(/النصوص المختلفة في المعنى:/gi, '<strong style="color: #e74c3c;">النصوص المختلفة في المعنى:</strong>');
329
+
330
+ // تظليل النصوص بين علامات <<>>
331
+ formattedText = formattedText.replace(/<<(.*?)>>/g, '<span class="error-text">$1</span>');
332
+
333
+ return formattedText;
334
+ }
335
+
336
+ function formatExplanation(explanationText) {
337
+ // تطبيق نفس التنسيق على شرح الاختلافات
338
+ let formattedExplanation = explanationText
339
+ .replace(/\n/g, '<br>')
340
+ .replace(/<<(.*?)>>/g, '<span class="error-text">$1</span>');
341
+
342
+ return formattedExplanation;
343
+ }
344
+
345
+ function formatTextWithMarkers(markedText) {
346
+ // استبدال علامات <<>> بتنسيق HTML للتظليل
347
+ return markedText.replace(/<<(.*?)>>/g, '<span class="error-text">$1</span>');
348
+ }