|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>تحليل النصوص والترجمات – وضع Streaming</title> |
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> |
|
|
<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(0,0,0,0.2); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } |
|
|
} |
|
|
|
|
|
|
|
|
.text-comparison { line-height: 1.8; white-space: pre-wrap; } |
|
|
.highlight { |
|
|
color: white; |
|
|
background-color: #ef4444; |
|
|
padding: 0 3px; |
|
|
border-radius: 3px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
|
|
|
.line-item { |
|
|
margin-bottom: 1rem; |
|
|
padding: 0.5rem; |
|
|
border-bottom: 1px dashed #ccc; |
|
|
} |
|
|
.line-number { |
|
|
font-weight: bold; |
|
|
color: #4B5563; |
|
|
margin-left: 0.5rem; |
|
|
} |
|
|
.line-text { display: inline-block; } |
|
|
|
|
|
|
|
|
.card { |
|
|
background-color: #fff; |
|
|
border-radius: 1rem; |
|
|
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); |
|
|
padding: 2rem; |
|
|
border: 1px solid #f3f4f6; |
|
|
} |
|
|
.card-hover:hover { |
|
|
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
.icon { margin-left: 0.5rem; } |
|
|
.upload-label { |
|
|
display: flex; |
|
|
flex-direction: row-reverse; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
|
|
|
.spinner { |
|
|
border: 4px solid #f3f3f3; |
|
|
border-top: 4px solid #4f46e5; |
|
|
border-radius: 50%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
#chainOfThought { |
|
|
display: none; |
|
|
margin-top: 1rem; |
|
|
background-color: #f9fafb; |
|
|
padding: 1rem; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 0.5rem; |
|
|
font-size: 0.9rem; |
|
|
direction: ltr; |
|
|
text-align: left; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-100 via-blue-100 to-indigo-100 min-h-screen"> |
|
|
<div class="max-w-5xl mx-auto py-12"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-5xl font-bold mb-4 animate-gradient">تحليل النصوص والترجمات</h1> |
|
|
<p class="text-2xl">ترجم النص الهدف إلى العربية مع التعليم، ثم قارن مع النص المصدر واخرج الاختلافات (النصوص الناقصة) فقط.</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-2xl font-bold mb-2">النص المصدر</label> |
|
|
<textarea id="sourceText" class="w-full p-4 border rounded-lg" rows="6" placeholder="اكتب النص المصدر هنا..."></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-2xl font-bold mb-2">النص الهدف</label> |
|
|
<textarea id="targetText" class="w-full p-4 border rounded-lg" rows="6" placeholder="اكتب النص الهدف هنا..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 flex items-center justify-center space-x-4"> |
|
|
<button id="analyzeBtn" class="px-8 py-4 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 transition"> |
|
|
تحليل ومراجعة النصوص |
|
|
</button> |
|
|
<div id="loadingIndicator" class="spinner hidden"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chainOfThought" class="mt-6"> |
|
|
<strong>سلسلة التفكير:</strong> |
|
|
<pre id="chainText" class="whitespace-pre-wrap text-gray-700"></pre> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultSection" class="mt-8 hidden"> |
|
|
<h2 class="text-3xl font-bold mb-4">النتائج:</h2> |
|
|
<div id="diffResult" class="p-4 border rounded-lg"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
(function(){ |
|
|
"use strict"; |
|
|
|
|
|
|
|
|
const PROMPT = `ترجم النص الهدف إلى العربية مع التعليم، ثم قارن بين النص المصدر والنص الهدف المُترجم واخرج الاختلافات فقط (النصوص الناقصة) مع وضعها بين أقواس (). |
|
|
النص المصدر: |
|
|
{source} |
|
|
النص الهدف: |
|
|
{target}`; |
|
|
|
|
|
|
|
|
const showLoading = () => { |
|
|
document.getElementById('loadingIndicator').classList.remove('hidden'); |
|
|
}; |
|
|
const hideLoading = () => { |
|
|
document.getElementById('loadingIndicator').classList.add('hidden'); |
|
|
}; |
|
|
|
|
|
|
|
|
async function analyzeText(source, target) { |
|
|
const payload = { |
|
|
model: "deepseek-chat", |
|
|
messages: [ |
|
|
{ role: "system", content: "أنت نموذج DeepSeek؛ ترجم النص الهدف إلى العربية مع التعليم ثم قارن بينه وبين النص المصدر واخرج الاختلافات (النصوص الناقصة) فقط مع وضعها بين أقواس ()." }, |
|
|
{ role: "user", content: PROMPT.replace("{source}", source).replace("{target}", target) } |
|
|
], |
|
|
temperature: 0.3, |
|
|
max_tokens: 1024, |
|
|
stream: true |
|
|
}; |
|
|
|
|
|
console.log("Payload:", payload); |
|
|
try { |
|
|
const response = await fetch("https://api.deepseek.com/chat/completions", { |
|
|
method: "POST", |
|
|
headers: { |
|
|
"Authorization": "Bearer sk-15606736ed9e4aea8b7cc11a195d2b01", |
|
|
"Content-Type": "application/json" |
|
|
}, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
if (!response.ok) { |
|
|
throw new Error("حدث خطأ في الاتصال: " + response.statusText); |
|
|
} |
|
|
|
|
|
const reader = response.body.getReader(); |
|
|
const decoder = new TextDecoder(); |
|
|
let result = ""; |
|
|
while (true) { |
|
|
const { done, value } = await reader.read(); |
|
|
if (done) break; |
|
|
result += decoder.decode(value, { stream: true }); |
|
|
|
|
|
document.getElementById('chainText').innerText = result; |
|
|
} |
|
|
return result; |
|
|
} catch (error) { |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function processResult(source, analysisOutput) { |
|
|
|
|
|
let processed = analysisOutput.replace(/__(.*?)__/g, '<span class="highlight">($1)</span>'); |
|
|
return processed; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('analyzeBtn').addEventListener('click', async () => { |
|
|
const sourceText = document.getElementById('sourceText').value.trim(); |
|
|
const targetText = document.getElementById('targetText').value.trim(); |
|
|
if (!sourceText || !targetText) { |
|
|
alert("يرجى إدخال كلا النصين."); |
|
|
return; |
|
|
} |
|
|
|
|
|
document.getElementById('resultSection').classList.add('hidden'); |
|
|
document.getElementById('chainOfThought').style.display = "none"; |
|
|
showLoading(); |
|
|
try { |
|
|
const analysisOutput = await analyzeText(sourceText, targetText); |
|
|
|
|
|
document.getElementById('chainOfThought').style.display = "block"; |
|
|
|
|
|
const diffResult = processResult(sourceText, analysisOutput); |
|
|
document.getElementById('diffResult').innerHTML = diffResult; |
|
|
document.getElementById('resultSection').classList.remove('hidden'); |
|
|
} catch (error) { |
|
|
alert("خطأ أثناء التحليل: " + error.message); |
|
|
} finally { |
|
|
hideLoading(); |
|
|
} |
|
|
}); |
|
|
|
|
|
})(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
