S
Santomuh
Guest
* هل توجد أي مترجم عربي -انجليزي او العكس ذات طريقة إستخدام فعالة في المنتدى؟
Follow along with the video below to see how to install our site as a web app on your home screen.
ملاحظة: This feature may not be available in some browsers.
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مترجم Gemini الذكي</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
body { font-family: 'Tajawal', sans-serif; background-color: #f3f4f6; }
.glass { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-2xl w-full glass rounded-3xl shadow-2xl overflow-hidden border border-gray-100">
<!-- Header -->
<div class="bg-indigo-600 p-6 text-white text-center">
<h1 class="text-2xl font-bold">المترجم الذكي (عربي - إنجليزي)</h1>
<p class="text-indigo-100 text-sm mt-1">ترجمة دقيقة مدعومة بالذكاء الاصطناعي</p>
</div>
<div class="p-6 space-y-4">
<!-- Language Switcher -->
<div class="flex items-center justify-between bg-gray-50 p-3 rounded-xl border border-gray-200">
<span id="langFrom" class="font-bold text-indigo-600">العربية</span>
<button id="switchBtn" class="bg-white p-2 rounded-full shadow-sm hover:bg-indigo-50 transition-colors">
<i class="fas fa-exchange-alt text-gray-400"></i>
</button>
<span id="langTo" class="font-bold text-indigo-600">الإنجليزية</span>
</div>
<!-- Input Area -->
<div class="relative">
<textarea id="inputText" rows="5"
class="w-full p-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none text-lg"
placeholder="أدخل النص هنا..."></textarea>
<div class="absolute bottom-3 left-3 flex space-x-2 space-x-reverse">
<button onclick="clearText()" class="text-gray-400 hover:text-red-500 p-1"><i class="fas fa-times-circle"></i></button>
</div>
</div>
<!-- Translate Button -->
<button id="translateBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 rounded-xl shadow-lg transition-all transform active:scale-95 flex items-center justify-center space-x-2 space-x-reverse">
<span>ترجمة الآن</span>
<i class="fas fa-magic"></i>
</button>
<!-- Output Area -->
<div id="outputContainer" class="hidden animate-fade-in">
<div class="bg-indigo-50 p-4 rounded-xl border border-indigo-100 relative">
<div id="outputText" class="text-lg text-gray-800 leading-relaxed min-h-[1.5rem]"></div>
<div class="mt-4 flex justify-end space-x-3 space-x-reverse">
<button onclick="copyResult()" class="text-indigo-600 hover:bg-indigo-100 p-2 rounded-lg transition-colors" title="نسخ">
<i class="fas fa-copy"></i>
</button>
<button onclick="speakResult()" class="text-indigo-600 hover:bg-indigo-100 p-2 rounded-lg transition-colors" title="استماع">
<i class="fas fa-volume-up"></i>
</button>
</div>
</div>
</div>
<!-- Loading Spinner -->
<div id="loader" class="hidden flex justify-center py-4">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
</div>
</div>
<!-- Footer Info -->
<div class="bg-gray-50 p-4 text-center text-xs text-gray-500 border-t border-gray-100">
هذا المترجم يستخدم واجهة برمجة تطبيقات Gemini لتقديم أدق النتائج السياقية.
</div>
</div>
<script>
const apiKey = ""; // تم الضبط تلقائياً في البيئة
let isArToEn = true;
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const outputContainer = document.getElementById('outputContainer');
const translateBtn = document.getElementById('translateBtn');
const loader = document.getElementById('loader');
const switchBtn = document.getElementById('switchBtn');
const langFrom = document.getElementById('langFrom');
const langTo = document.getElementById('langTo');
// تبديل اللغات
switchBtn.onclick = () => {
isArToEn = !isArToEn;
langFrom.innerText = isArToEn ? "العربية" : "الإنجليزية";
langTo.innerText = isArToEn ? "الإنجليزية" : "العربية";
inputText.placeholder = isArToEn ? "أدخل النص هنا..." : "Enter text here...";
clearText();
};
function clearText() {
inputText.value = "";
outputContainer.classList.add('hidden');
}
async function translateText() {
const text = inputText.value.trim();
if (!text) return;
translateBtn.disabled = true;
loader.classList.remove('hidden');
outputContainer.classList.add('hidden');
const sourceLang = isArToEn ? "Arabic" : "English";
const targetLang = isArToEn ? "English" : "Arabic";
const prompt = `Translate the following text from ${sourceLang} to ${targetLang}. Provide only the translation result without any extra text or explanations: "${text}"`;
try {
const response = await fetchWithRetry(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
contents: [{ parts: [{ text: prompt }] }]
})
});
const data = await response.json();
const result = data.candidates?.[0]?.content?.parts?.[0]?.text;
if (result) {
outputText.innerText = result.trim();
outputContainer.classList.remove('hidden');
} else {
throw new Error("فشلت الترجمة");
}
} catch (error) {
alert("حدث خطأ أثناء الاتصال بالخادم. يرجى المحاولة مرة أخرى.");
} finally {
loader.classList.add('hidden');
translateBtn.disabled = false;
}
}
async function fetchWithRetry(url, options, retries = 5, backoff = 1000) {
try {
const res = await fetch(url, options);
if (!res.ok && retries > 0) throw res;
return res;
} catch (err) {
if (retries <= 0) throw err;
await new Promise(resolve => setTimeout(resolve, backoff));
return fetchWithRetry(url, options, retries - 1, backoff * 2);
}
}
translateBtn.onclick = translateText;
function copyResult() {
const text = outputText.innerText;
const el = document.createElement('textarea');
el.value = text;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
const btn = event.currentTarget;
const icon = btn.innerHTML;
btn.innerHTML = '<i class="fas fa-check"></i>';
setTimeout(() => btn.innerHTML = icon, 2000);
}
function speakResult() {
const text = outputText.innerText;
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = isArToEn ? 'en-US' : 'ar-SA';
window.speechSynthesis.speak(utterance);
}
</script>
</body>
</html>