|
<!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); } |
|
.pulse-animation { animation: pulse 2s infinite; } |
|
@keyframes pulse { |
|
0% { box-shadow: 0 0 0 0 rgba(156,39,176,0.4); } |
|
70% { box-shadow: 0 0 0 10px rgba(156,39,176,0); } |
|
100% { box-shadow: 0 0 0 0 rgba(156,39,176,0); } |
|
} |
|
|
|
|
|
|
|
|
|
.text-comparison { line-height: 1.8; white-space: pre-wrap; } |
|
.highlight-number { |
|
background-color: #FDE68A; |
|
padding: 0 4px; |
|
border-radius: 3px; |
|
font-weight: bold; |
|
} |
|
.highlight-missing { |
|
background-color: #BFDBFE; |
|
padding: 0 4px; |
|
border-radius: 3px; |
|
font-style: italic; |
|
} |
|
.highlight-meaning { |
|
background-color: #fecaca; |
|
color: #B91C1C; |
|
padding: 0 4px; |
|
border-radius: 3px; |
|
font-weight: bold; |
|
} |
|
|
|
|
|
|
|
|
|
.split-view { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
gap: 1rem; |
|
} |
|
.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(156,39,176,0.1), 0 10px 10px -5px rgba(156,39,176,0.04); |
|
transform: translateY(-2px); |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen"> |
|
<div class="min-h-screen pb-12"> |
|
|
|
<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"> |
|
<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> |
|
|
|
|
|
<section id="programExplanation" class="max-w-6xl mx-auto px-4 mb-8"> |
|
<div class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100"> |
|
<p class="text-lg text-gray-800"> |
|
هذا البرنامج مصمم لمقارنة النصوص التقنية وتحليلها بدقة عالية، مع تحديد الاختلافات في الأرقام، النصوص المفقودة واختلافات المعنى. يمكنك أيضًا التحقق مما إذا تم استخدام قاعدة المصطلحات أثناء التحليل وتنزيل تقرير مفصل بصيغة إكسيل أو وورد. |
|
</p> |
|
</div> |
|
</section> |
|
|
|
|
|
<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-indigo-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-indigo-300 rounded-xl p-8 text-center hover:border-indigo-500 transition-colors duration-300 bg-indigo-50 hover:bg-indigo-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-indigo-500 mb-4"></i> |
|
<span class="text-lg text-indigo-600 group-hover:text-indigo-700">ملف السورس</span> |
|
</label> |
|
</div> |
|
|
|
<div class="group border-2 border-dashed border-pink-300 rounded-xl p-8 text-center hover:border-pink-500 transition-colors duration-300 bg-pink-50 hover:bg-pink-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-pink-500 mb-4"></i> |
|
<span class="text-lg text-pink-600 group-hover:text-pink-700">ملف التارجت</span> |
|
</label> |
|
</div> |
|
</div> |
|
<div id="processStatus" class="hidden mt-4"> |
|
<div class="flex items-center justify-center space-x-3 bg-indigo-100 rounded-xl p-4"> |
|
<div class="animate-spin h-8 w-8 border-4 border-indigo-600 rounded-full border-t-transparent"></div> |
|
<span class="text-lg text-indigo-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-indigo-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-indigo-200 focus:border-indigo-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-pink-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-pink-200 focus:border-pink-400 transition-all resize-none text-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea> |
|
</div> |
|
|
|
<div class="mt-4 flex items-center"> |
|
<input type="checkbox" id="terminologyCheck" class="mr-2"> |
|
<label for="terminologyCheck" class="text-lg text-gray-700">استخدام قاعدة المصطلحات</label> |
|
</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"> |
|
<h2 class="text-2xl font-bold mb-6 text-gray-800 flex items-center border-b pb-3"> |
|
<i class="fas fa-book-open text-green-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-green-300 rounded-xl p-8 text-center hover:border-green-500 transition-colors duration-300 bg-green-50 hover:bg-green-100"> |
|
<label class="cursor-pointer block"> |
|
<input type="file" id="sourceExtraFile" accept=".docx,.pdf" class="hidden"> |
|
<i class="fas fa-upload text-5xl text-green-500 mb-4"></i> |
|
<span class="text-lg text-green-600 group-hover:text-green-700">تحميل ملف المصدر</span> |
|
</label> |
|
</div> |
|
|
|
<div class="group"> |
|
<label class="block text-lg font-bold text-gray-700 mb-3 flex items-center"> |
|
<i class="fas fa-edit text-green-600 ml-2"></i> إدخال المصادر يدويًا |
|
</label> |
|
<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> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<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 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-indigo-600 ml-2"></i> النص المصدر (مع التعليم) |
|
</h4> |
|
<div id="sourceTextReview" class="bg-indigo-50 rounded-xl p-6 min-h-[200px] border-2 border-indigo-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-pink-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> |
|
|
|
|
|
<div id="fullTextDraftSection" class="bg-white rounded-2xl shadow-lg p-8 border border-gray-100 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-file-alt text-blue-600 ml-2"></i> مسودة التحليل النصي الكامل |
|
</h2> |
|
<div id="fullTextDraft" class="bg-gray-50 rounded-xl p-6 border border-gray-200 text-comparison"></div> |
|
</div> |
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 space-y-4 md:space-y-0"> |
|
<button id="toggleDraftBtn" class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> |
|
عرض/إخفاء التحليل النصي الكامل |
|
</button> |
|
|
|
<div class="flex space-x-4"> |
|
<button id="downloadExcelBtn" class="w-full md:w-auto bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"> |
|
تنزيل التقرير (Excel) |
|
</button> |
|
<button id="downloadWordBtn" class="w-full md:w-auto bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> |
|
تنزيل التقرير (Word) |
|
</button> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
const API_URL = 'https://api.deepseek.com/chat/completions'; |
|
const API_KEY = 'sk-15606736ed9e4aea8b7cc11a195d2b01'; |
|
let fullAnalysisText = ''; |
|
|
|
|
|
|
|
|
|
|
|
const ANALYSIS_PROMPT = `أنت خبير لغوي متخصص في مراجعة الترجمة التقنية. مهمتك مقارنة النص المصدر والنص الهدف بدقة عالية مع العلم أن النصوص مليانة بالأخطاء والنواقص. |
|
لا تقم بإزالة أو تعديل العلامات التالية: |
|
• الأرقام: تحافظ على علامات < و >. |
|
• النصوص المفقودة: تحافظ على علامات __ و __. |
|
• اختلافات المعنى: تحافظ على علامات [MEANING] و [/MEANING]. |
|
|
|
اعتمد النص المصدر كأساس للمقارنة، وقم بتحديد: |
|
1. اختلافات الأرقام باستخدام <الرقم_في_المصدر> → <الرقم_في_الهدف>. |
|
2. النصوص المفقودة كما هي بين علامتي __. |
|
3. اختلافات المعنى باستخدام [MEANING] مع الحفاظ على التعليم. |
|
|
|
النص المصدر: |
|
{source} |
|
|
|
النص الهدف: |
|
{target}`; |
|
|
|
|
|
|
|
|
|
|
|
function countWords(text) { |
|
return text.trim().split(/\s+/).filter(word => word !== "").length; |
|
} |
|
|
|
function escapeRegExp(string) { |
|
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); |
|
} |
|
|
|
function splitIntoLines(text) { |
|
return text.split('\n').map((line, i) => `<div class="line-item"><span class="line-number">${i+1}:</span> <span class="line-text">${line}</span></div>`).join(''); |
|
} |
|
|
|
function getLineNumber(text, substring) { |
|
const index = text.indexOf(substring); |
|
if (index === -1) return "غير محدد"; |
|
return text.substring(0, index).split("\n").length; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
function applyHighlights(originalText, analysisOutput) { |
|
|
|
const numberMatches = Array.from(analysisOutput.matchAll(/<([^<>]+)>/g)).map(m => m[1].trim()); |
|
const missingMatches = Array.from(analysisOutput.matchAll(/__(.*?)__/g)).map(m => m[1].trim()); |
|
const meaningMatches = Array.from(analysisOutput.matchAll(/\[MEANING\](.*?)\[\/MEANING\]/g)).map(m => m[1].trim()); |
|
|
|
|
|
const lines = originalText.split('\n'); |
|
|
|
|
|
const highlightedLines = lines.map(line => { |
|
|
|
numberMatches.forEach(phrase => { |
|
if (line.includes(phrase)) { |
|
const regex = new RegExp(escapeRegExp(phrase), 'g'); |
|
line = line.replace(regex, `<span class="highlight-number">${phrase}</span>`); |
|
} |
|
}); |
|
|
|
missingMatches.forEach(phrase => { |
|
if (line.includes(phrase)) { |
|
const regex = new RegExp(escapeRegExp(phrase), 'g'); |
|
line = line.replace(regex, `<span class="highlight-missing">__${phrase}__</span>`); |
|
} |
|
}); |
|
|
|
meaningMatches.forEach(phrase => { |
|
if (line.includes(phrase)) { |
|
const regex = new RegExp(escapeRegExp(phrase), 'g'); |
|
line = line.replace(regex, `<span class="highlight-meaning">${phrase}</span>`); |
|
} |
|
}); |
|
return line; |
|
}); |
|
|
|
return highlightedLines.join('\n'); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
function generateExplanation(sourceText, analysisOutput) { |
|
let steps = []; |
|
|
|
const missingRegex = /__(.*?)__/g; |
|
let match; |
|
while ((match = missingRegex.exec(analysisOutput)) !== null) { |
|
const phrase = match[1].trim(); |
|
if (phrase) { |
|
const lineNum = getLineNumber(sourceText, phrase); |
|
steps.push(`<li><strong>الخطوة 1:</strong> في السطر ${lineNum}، الجزء "<span class="highlight-missing">__${phrase}__</span>" من النص المصدر مفقود في النص الهدف. تأكد من إضافته لتحسين الدقة.</li>`); |
|
} |
|
} |
|
|
|
const numberRegex = /<([^<>]+)>/g; |
|
while ((match = numberRegex.exec(analysisOutput)) !== null) { |
|
const phrase = match[1].trim(); |
|
if (phrase) { |
|
const lineNum = getLineNumber(sourceText, phrase); |
|
steps.push(`<li><strong>الخطوة 2:</strong> في السطر ${lineNum}، الرقم "<span class="highlight-number">${phrase}</span>" في المصدر لا يتطابق مع الرقم في الهدف. يرجى المراجعة.</li>`); |
|
} |
|
} |
|
|
|
const meaningRegex = /\[MEANING\](.*?)\[\/MEANING\]/g; |
|
while ((match = meaningRegex.exec(analysisOutput)) !== null) { |
|
const phrase = match[1].trim(); |
|
if (phrase) { |
|
const lineNum = getLineNumber(sourceText, phrase); |
|
steps.push(`<li><strong>الخطوة 3:</strong> في السطر ${lineNum}، تم العثور على اختلاف في المعنى مع التعبير "<span class="highlight-meaning">${phrase}</span>". تحقق من الدقة.</li>`); |
|
} |
|
} |
|
|
|
if (steps.length === 0) { |
|
return `<p>النصوص متطابقة تماماً ولا توجد فروقات تحتاج للتنبيه.</p>`; |
|
} |
|
return `<ol class="list-decimal ml-6 space-y-2">${steps.join('')}</ol>`; |
|
} |
|
|
|
|
|
|
|
|
|
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'); |
|
} |
|
}); |
|
|
|
document.getElementById('sourceExtraFile')?.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('sourceExtraText').value = text; |
|
} catch (error) { |
|
console.error('Error processing extra source 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-indigo-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-indigo-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-reasoner", |
|
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(); |
|
fullAnalysisText = analysisOutput; |
|
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>النصوص متطابقة ولا يوجد اختلاف يجب الإشارة إليه.</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}`); |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('toggleDraftBtn').addEventListener('click', function() { |
|
const draftSection = document.getElementById('fullTextDraftSection'); |
|
if (draftSection.classList.contains('hidden')) { |
|
draftSection.classList.remove('hidden'); |
|
|
|
document.getElementById('fullTextDraft').innerText = fullAnalysisText; |
|
} else { |
|
draftSection.classList.add('hidden'); |
|
} |
|
}); |
|
|
|
|
|
|
|
|
|
|
|
function getReportData() { |
|
const sourceText = document.getElementById('sourceText').value; |
|
const targetText = document.getElementById('targetText').value; |
|
const terminologyUsed = document.getElementById('terminologyCheck').checked ? "نعم" : "لا"; |
|
return { |
|
sourceText, |
|
targetText, |
|
fullAnalysisText, |
|
terminologyUsed |
|
}; |
|
} |
|
|
|
|
|
document.getElementById('downloadExcelBtn').addEventListener('click', () => { |
|
const data = getReportData(); |
|
let csvContent = "data:text/csv;charset=utf-8,"; |
|
csvContent += "الحقل,القيمة\n"; |
|
csvContent += `النص المصدر,"${data.sourceText.replace(/"/g, '""')}"\n`; |
|
csvContent += `النص الهدف,"${data.targetText.replace(/"/g, '""')}"\n`; |
|
csvContent += `تحليل النصوص,"${data.fullAnalysisText.replace(/"/g, '""')}"\n`; |
|
csvContent += `قاعدة المصطلحات المستخدمة,${data.terminologyUsed}\n`; |
|
|
|
const encodedUri = encodeURI(csvContent); |
|
const link = document.createElement("a"); |
|
link.setAttribute("href", encodedUri); |
|
link.setAttribute("download", "تقرير_التحليل.csv"); |
|
document.body.appendChild(link); |
|
link.click(); |
|
document.body.removeChild(link); |
|
}); |
|
|
|
// تنزيل التقرير بصيغة Word (ملف HTML مع امتداد .doc) |
|
document.getElementById('downloadWordBtn').addEventListener('click', () => { |
|
const data = getReportData(); |
|
const reportHTML = ` |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>تقرير التحليل</title> |
|
<style> |
|
body { font-family: Arial, sans-serif; direction: rtl; } |
|
h1 { text-align: center; } |
|
pre { white-space: pre-wrap; word-wrap: break-word; background: #f4f4f4; padding: 10px; } |
|
</style> |
|
</head> |
|
<body> |
|
<h1>تقرير التحليل</h1> |
|
<h2>النص المصدر</h2> |
|
<pre>${data.sourceText}</pre> |
|
<h2>النص الهدف</h2> |
|
<pre>${data.targetText}</pre> |
|
<h2>تحليل النصوص</h2> |
|
<pre>${data.fullAnalysisText}</pre> |
|
<h2>قاعدة المصطلحات المستخدمة</h2> |
|
<p>${data.terminologyUsed}</p> |
|
</body> |
|
</html>`; |
|
const blob = new Blob([reportHTML], { type: 'application/msword' }); |
|
const url = URL.createObjectURL(blob); |
|
const link = document.createElement('a'); |
|
link.href = url; |
|
link.download = 'تقرير_التحليل.doc'; |
|
document.body.appendChild(link); |
|
link.click(); |
|
document.body.removeChild(link); |
|
URL.revokeObjectURL(url); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
