|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>نظام المقارنة والترجمة الخاص بشركة موندو لينجوا</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes gradient { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.animate-gradient { |
|
|
background-size: 200% 200%; |
|
|
animation: gradient 15s ease infinite; |
|
|
} |
|
|
.transition-all { transition: all 0.3s ease-in-out; } |
|
|
.animate-scale { transition: transform 0.2s ease-in-out; } |
|
|
.animate-scale:hover { transform: scale(1.02); } |
|
|
.file-drop-active { border-color: #3B82F6; background-color: rgba(59,130,246,0.1); } |
|
|
.text-comparison { line-height: 1.8; white-space: pre-wrap; } |
|
|
|
|
|
.highlight-number { |
|
|
background-color: #FDE68A; |
|
|
padding: 0 2px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.highlight-missing { |
|
|
background-color: #BFDBFE; |
|
|
padding: 0 2px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.highlight-meaning { |
|
|
color: #EF4444; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.split-view { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 1rem; |
|
|
} |
|
|
.result-section { |
|
|
border-top: 3px solid #E0E7FF; |
|
|
margin-top: 2rem; |
|
|
padding-top: 2rem; |
|
|
} |
|
|
|
|
|
.line-item { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
.line-number { |
|
|
width: 30px; |
|
|
font-weight: bold; |
|
|
color: #4B5563; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
.line-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50 min-h-screen"> |
|
|
<div class="min-h-screen pb-12"> |
|
|
|
|
|
<header class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 animate-gradient text-white py-10 mb-10 shadow-xl"> |
|
|
<div class="max-w-6xl mx-auto px-4"> |
|
|
<h1 class="text-5xl font-bold text-center mb-4 animate-scale">نظام شركة موندو لينجوا</h1> |
|
|
<p class="text-center text-xl text-blue-100 opacity-90">مقارنة وتحليل النصوص – المصدر مرجع أساسي</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-6xl mx-auto px-4"> |
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center border-b pb-3"> |
|
|
<i class="fas fa-file-upload text-blue-600 ml-2"></i> تحميل الملفات |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="group border-2 border-dashed border-blue-200 rounded-xl p-8 text-center hover:border-blue-500 transition-colors duration-300 bg-blue-50 hover:bg-blue-100"> |
|
|
<label class="cursor-pointer block"> |
|
|
<input type="file" id="sourceFile" accept=".docx,.pdf" class="hidden"> |
|
|
<i class="fas fa-file-upload text-5xl text-blue-500 mb-4"></i> |
|
|
<span class="text-lg text-blue-600 group-hover:text-blue-700">ملف السورس</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="group border-2 border-dashed border-purple-200 rounded-xl p-8 text-center hover:border-purple-500 transition-colors duration-300 bg-purple-50 hover:bg-purple-100"> |
|
|
<label class="cursor-pointer block"> |
|
|
<input type="file" id="targetFile" accept=".docx,.pdf" class="hidden"> |
|
|
<i class="fas fa-file-download text-5xl text-purple-500 mb-4"></i> |
|
|
<span class="text-lg text-purple-600 group-hover:text-purple-700">ملف التارجت</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div id="processStatus" class="hidden mt-4"> |
|
|
<div class="flex items-center justify-center space-x-3 bg-blue-100 rounded-xl p-4"> |
|
|
<div class="animate-spin h-8 w-8 border-4 border-blue-600 rounded-full border-t-transparent"></div> |
|
|
<span class="text-lg text-blue-700">جارٍ معالجة الملف...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 card-hover"> |
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="group"> |
|
|
<label class="block text-lg font-bold text-gray-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-language text-blue-600 ml-2"></i> النص المصدر |
|
|
</label> |
|
|
<textarea id="sourceText" dir="rtl" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-blue-200 focus:border-blue-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="group"> |
|
|
<label class="block text-lg font-bold text-gray-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-language text-purple-600 ml-2"></i> النص الهدف |
|
|
</label> |
|
|
<textarea id="targetText" dir="ltr" class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl focus:ring-purple-200 focus:border-purple-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="submitBtn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-5 px-8 rounded-xl transition-all transform hover:scale-105 focus:ring-blue-200 text-xl shadow-lg hover:shadow-xl mb-8 pulse-animation"> |
|
|
<div class="flex items-center justify-center"> |
|
|
<i class="fas fa-sync-alt ml-2"></i> تحليل النصوص |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
|
|
|
<div id="resultSection" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center"> |
|
|
<i class="fas fa-search text-green-600 ml-2"></i> نتائج التحليل والمقارنة |
|
|
</h2> |
|
|
|
|
|
<div id="errorsList" class="space-y-3 mb-6"></div> |
|
|
<div class="result-section split-view"> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-file-alt text-blue-600 ml-2"></i> النص المصدر (مع التعليم) |
|
|
</h4> |
|
|
<div id="sourceTextReview" class="bg-blue-50 rounded-xl p-6 min-h-[200px] border-2 border-blue-100 text-comparison"></div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold text-gray-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-file-alt text-purple-600 ml-2"></i> النص الهدف (مع التعليم) |
|
|
</h4> |
|
|
<div id="targetTextReview" class="bg-gray-50 rounded-xl p-6 min-h-[200px] border-2 border-gray-200 text-comparison"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="explanationBox" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 hover:shadow-xl transition-all animate-scale mb-8 hidden card-hover"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-3 flex items-center"> |
|
|
<i class="fas fa-info-circle text-green-600 ml-2"></i> شرح الاختلافات |
|
|
</h2> |
|
|
<div id="explanationText" class="text-lg text-gray-700"></div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
const API_URL = 'https://api.deepseek.com/chat/completions'; |
|
|
const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ANALYSIS_PROMPT = `أنت خبير في مراجعة الترجمة، ومتخصص في اكتشاف الأخطاء والنصوص غير المترجمة الموجودة في النص المصدر لكنها مفقودة في النص الهدف. مهمتك هي مقارنة النصين بدقة عالية واكتشاف الفروقات التالية فقط: |
|
|
|
|
|
اختلافات الأرقام: ضع الرقم المختلف بين علامتي < و > |
|
|
النصوص المفقودة: إذا كان هناك نص موجود في المصدر لكنه غير موجود في الهدف، ضع النص المفقود بين __ و __ |
|
|
اختلافات المعنى: إذا كانت هناك كلمة أو عبارة تختلف في المعنى، ضعها بين [MEANING] و [/MEANING] |
|
|
آلية المراجعة: |
|
|
✅ ابدأ بمراجعة الأرقام أولًا، وحدد أي اختلافات فيها. |
|
|
✅ ثم راجع السياق والمعنى العام لمعرفة ما إذا كانت هناك جملة مفقودة أو غير مترجمة أو تغيير في المعنى. |
|
|
✅ راجع النص بالكامل أكثر من مرة للتأكد من التطابق التام بين المصدر والهدف. |
|
|
✅استخرج الاخطاء الموجودة بالفعل وايضا الاختلافات الموجودة بالفعل وايضا النصوص المنسية الموجودة في المصدر وفير موجودة في الهدف |
|
|
هيكلة النتائج: |
|
|
🟢 قسم الناتج النهائي إلى ثلاثة أجزاء: |
|
|
|
|
|
ناتج مراجعة الأرقام (يحتوي فقط على الأرقام المختلفة) |
|
|
ناتج مراجعة النصوص في السياق (يحتوي على الجمل المفقودة والاختلافات المعنوية) |
|
|
المحتوى بالكامل مع التعديلات المظللة |
|
|
📌 ملاحظة: حدد فقط الأخطاء والفروقات دون أي تعديلات إضافية، واعتبر النص المصدر هو المرجع الأساسي. |
|
|
|
|
|
النص المصدر: |
|
|
{source} |
|
|
|
|
|
النص الهدف: |
|
|
{target}`; |
|
|
|
|
|
|
|
|
function countWords(text) { |
|
|
return text.trim().split(/\s+/).filter(word => word !== "").length; |
|
|
} |
|
|
|
|
|
|
|
|
function escapeRegExp(string) { |
|
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); |
|
|
} |
|
|
|
|
|
|
|
|
function applyHighlights(originalText, analysisOutput) { |
|
|
let highlightedText = originalText; |
|
|
|
|
|
const numberRegex = /<([^<>]+)>/g; |
|
|
let match; |
|
|
while ((match = numberRegex.exec(analysisOutput)) !== null) { |
|
|
const phrase = match[1].trim(); |
|
|
if (phrase) { |
|
|
const replacement = `<span class="highlight-number">${phrase}</span>`; |
|
|
const phraseRegex = new RegExp(escapeRegExp(phrase), 'g'); |
|
|
highlightedText = highlightedText.replace(phraseRegex, replacement); |
|
|
} |
|
|
} |
|
|
|
|
|
const missingRegex = /__(.*?)__/g; |
|
|
while ((match = missingRegex.exec(analysisOutput)) !== null) { |
|
|
const phrase = match[1].trim(); |
|
|
if (phrase) { |
|
|
const replacement = `<span class="highlight-missing">__${phrase}__</span>`; |
|
|
const phraseRegex = new RegExp(escapeRegExp(phrase), 'g'); |
|
|
highlightedText = highlightedText.replace(phraseRegex, replacement); |
|
|
} |
|
|
} |
|
|
|
|
|
const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g; |
|
|
while ((match = meaningRegex.exec(analysisOutput)) !== null) { |
|
|
const phrase = match[1].trim(); |
|
|
if (phrase) { |
|
|
const replacement = `<span class="highlight-meaning">${phrase}</span>`; |
|
|
const phraseRegex = new RegExp(escapeRegExp(phrase), 'g'); |
|
|
highlightedText = highlightedText.replace(phraseRegex, replacement); |
|
|
} |
|
|
} |
|
|
return highlightedText; |
|
|
} |
|
|
|
|
|
|
|
|
function splitIntoLines(text) { |
|
|
const lines = text.split('\n'); |
|
|
let html = ""; |
|
|
lines.forEach((line, index) => { |
|
|
html += `<div class="line-item"><span class="line-number">${index + 1}:</span> <span class="line-text">${line}</span></div>`; |
|
|
}); |
|
|
return html; |
|
|
} |
|
|
|
|
|
|
|
|
function getLineNumber(text, substring) { |
|
|
const index = text.indexOf(substring); |
|
|
if (index === -1) return "غير محدد"; |
|
|
return text.substring(0, index).split("\n").length; |
|
|
} |
|
|
|
|
|
|
|
|
function generateExplanation(sourceText, analysisOutput) { |
|
|
let explanation = ""; |
|
|
|
|
|
const missingRegex = /__(.*?)__/g; |
|
|
let match; |
|
|
while ((match = missingRegex.exec(analysisOutput)) !== null) { |
|
|
const phrase = match[1].trim(); |
|
|
if (phrase) { |
|
|
const lineNum = getLineNumber(sourceText, phrase); |
|
|
explanation += `<p>في السطر ${lineNum}: النص "${phrase}" مفقود في النص الهدف.</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
const numberRegex = /<([^<>]+)>/g; |
|
|
while ((match = numberRegex.exec(analysisOutput)) !== null) { |
|
|
const phrase = match[1].trim(); |
|
|
if (phrase) { |
|
|
const lineNum = getLineNumber(sourceText, phrase); |
|
|
explanation += `<p>في السطر ${lineNum}: اختلاف في الرقم "${phrase}".</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g; |
|
|
while ((match = meaningRegex.exec(analysisOutput)) !== null) { |
|
|
const phrase = match[1].trim(); |
|
|
if (phrase) { |
|
|
const lineNum = getLineNumber(sourceText, phrase); |
|
|
explanation += `<p>في السطر ${lineNum}: اختلاف في المعنى: "${phrase}".</p>`; |
|
|
} |
|
|
} |
|
|
if (explanation === "") { |
|
|
explanation = `<p>[MATCH] النصوص متطابقة تماماً.</p>`; |
|
|
} |
|
|
return explanation; |
|
|
} |
|
|
|
|
|
|
|
|
async function processFile(file) { |
|
|
let text = ""; |
|
|
if (file.type === 'application/pdf') { |
|
|
const form = new FormData(); |
|
|
form.append('image', file); |
|
|
const response = await fetch('https://demo.api4ai.cloud/ocr/v1/results', { |
|
|
method: 'POST', |
|
|
body: form, |
|
|
headers: { 'A4A-CLIENT-APP-ID': 'sample' } |
|
|
}); |
|
|
const data = await response.json(); |
|
|
text = data.results[0].entities[0].objects[0].entities[0].text; |
|
|
} else if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { |
|
|
const arrayBuffer = await file.arrayBuffer(); |
|
|
const result = await mammoth.extractRawText({ arrayBuffer }); |
|
|
text = result.value; |
|
|
} else { |
|
|
throw new Error('نوع الملف غير مدعوم'); |
|
|
} |
|
|
return text; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('sourceFile')?.addEventListener('change', async (event) => { |
|
|
const file = event.target.files[0]; |
|
|
if (!file) return; |
|
|
document.getElementById('processStatus').classList.remove('hidden'); |
|
|
try { |
|
|
const text = await processFile(file); |
|
|
document.getElementById('sourceText').value = text; |
|
|
} catch (error) { |
|
|
console.error('Error processing source file:', error); |
|
|
addError('خطأ في معالجة ملف السورس'); |
|
|
} finally { |
|
|
document.getElementById('processStatus').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('targetFile')?.addEventListener('change', async (event) => { |
|
|
const file = event.target.files[0]; |
|
|
if (!file) return; |
|
|
document.getElementById('processStatus').classList.remove('hidden'); |
|
|
try { |
|
|
const text = await processFile(file); |
|
|
document.getElementById('targetText').value = text; |
|
|
} catch (error) { |
|
|
console.error('Error processing target file:', error); |
|
|
addError('خطأ في معالجة ملف التارجت'); |
|
|
} finally { |
|
|
document.getElementById('processStatus').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function addError(message, type = 'error') { |
|
|
const errorsList = document.getElementById('errorsList'); |
|
|
if (!errorsList) return; |
|
|
const errorDiv = document.createElement('div'); |
|
|
errorDiv.className = `p-4 rounded-xl ${type === 'error' ? 'bg-red-50 text-red-700' : 'bg-yellow-50 text-yellow-700'}`; |
|
|
errorDiv.innerHTML = `<div class="flex items-center"> |
|
|
<i class="fas fa-${type === 'error' ? 'exclamation-circle' : 'info-circle'} ml-2 text-${type === 'error' ? 'red' : 'yellow'}-500"></i> |
|
|
<span>${message}</span> |
|
|
</div>`; |
|
|
errorsList.appendChild(errorDiv); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('submitBtn').addEventListener('click', async () => { |
|
|
const sourceText = document.getElementById('sourceText').value; |
|
|
const targetText = document.getElementById('targetText').value; |
|
|
|
|
|
|
|
|
document.getElementById('errorsList').innerHTML = ''; |
|
|
document.getElementById('resultSection').classList.remove('hidden'); |
|
|
document.getElementById('explanationBox').classList.remove('hidden'); |
|
|
|
|
|
if (!sourceText || !targetText) { |
|
|
addError('يرجى إدخال كلا النصين المصدر والهدف'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const sourceWordCount = countWords(sourceText); |
|
|
const targetWordCount = countWords(targetText); |
|
|
if (sourceWordCount !== targetWordCount) { |
|
|
addError(`عدد كلمات النص المصدر (${sourceWordCount}) يختلف عن النص الهدف (${targetWordCount})`, 'warning'); |
|
|
} |
|
|
|
|
|
try { |
|
|
|
|
|
const progressDiv = document.createElement('div'); |
|
|
progressDiv.className = "bg-blue-100 p-4 rounded-xl mb-4"; |
|
|
progressDiv.innerHTML = `<div class="flex items-center"> |
|
|
<div class="animate-spin h-6 w-6 border-4 border-blue-600 rounded-full border-t-transparent ml-3"></div> |
|
|
<span>جارٍ التحليل...</span> |
|
|
</div>`; |
|
|
document.getElementById('errorsList').appendChild(progressDiv); |
|
|
|
|
|
|
|
|
const prompt = ANALYSIS_PROMPT |
|
|
.replace("{source}", sourceText) |
|
|
.replace("{target}", targetText); |
|
|
|
|
|
|
|
|
const payload = { |
|
|
model: "deepseek-chat", |
|
|
messages: [ |
|
|
{ role: "system", content: "أنت خبير في تحليل النصوص ومقارنتها بدقة عالية." }, |
|
|
{ role: "user", content: prompt } |
|
|
], |
|
|
temperature: 0.3, |
|
|
max_tokens: 2048, |
|
|
stream: false |
|
|
}; |
|
|
|
|
|
|
|
|
const response = await fetch(API_URL, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Authorization': 'Bearer ' + API_KEY, |
|
|
'Content-Type': 'application/json' |
|
|
}, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error('حدث خطأ بالشبكة: ' + response.statusText); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
const analysisOutput = data.choices[0].message.content.trim(); |
|
|
|
|
|
progressDiv.remove(); |
|
|
|
|
|
if (analysisOutput.includes('[MATCH]')) { |
|
|
const checkDiv = document.createElement('div'); |
|
|
checkDiv.className = "p-4 rounded-xl bg-green-50 text-green-700 flex items-center"; |
|
|
checkDiv.innerHTML = `<i class="fas fa-check-circle ml-2 text-lg"></i> <span class="text-lg">النصوص متطابقة تماماً</span>`; |
|
|
document.getElementById('errorsList').appendChild(checkDiv); |
|
|
document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceText); |
|
|
document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetText); |
|
|
document.getElementById('explanationText').innerHTML = `<p>[MATCH] لا توجد اختلافات.</p>`; |
|
|
} else { |
|
|
const sourceHighlighted = applyHighlights(sourceText, analysisOutput); |
|
|
const targetHighlighted = applyHighlights(targetText, analysisOutput); |
|
|
|
|
|
document.getElementById('sourceTextReview').innerHTML = splitIntoLines(sourceHighlighted); |
|
|
document.getElementById('targetTextReview').innerHTML = splitIntoLines(targetHighlighted); |
|
|
|
|
|
|
|
|
const explanationHTML = generateExplanation(sourceText, analysisOutput); |
|
|
document.getElementById('explanationText').innerHTML = explanationHTML; |
|
|
|
|
|
|
|
|
const numDiffCount = (analysisOutput.match(/<([^<>]+)>/g) || []).length; |
|
|
const missingDiffCount = (analysisOutput.match(/__(.*?)__/g) || []).length; |
|
|
const meaningDiffCount = (analysisOutput.match(/\[MEANING\](.*?)\[\/MEANING\]/g) || []).length; |
|
|
if (numDiffCount > 0 || missingDiffCount > 0 || meaningDiffCount > 0) { |
|
|
const summaryDiv = document.createElement('div'); |
|
|
summaryDiv.className = "p-4 rounded-xl bg-yellow-50 text-gray-800"; |
|
|
let summaryText = '<div class="font-bold mb-2">ملخص الاختلافات:</div><ul class="list-disc mr-6 space-y-1">'; |
|
|
if (numDiffCount > 0) summaryText += `<li>اختلاف في الأرقام: ${numDiffCount}</li>`; |
|
|
if (missingDiffCount > 0) summaryText += `<li>نصوص مفقودة: ${missingDiffCount}</li>`; |
|
|
if (meaningDiffCount > 0) summaryText += `<li>اختلاف في المعنى: ${meaningDiffCount}</li>`; |
|
|
summaryText += '</ul>'; |
|
|
summaryDiv.innerHTML = summaryText; |
|
|
document.getElementById('errorsList').appendChild(summaryDiv); |
|
|
} |
|
|
} |
|
|
|
|
|
} catch (error) { |
|
|
document.getElementById('errorsList').innerHTML = ''; |
|
|
addError(`خطأ في التحليل: ${error.message}`); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
