Spaces:
No application file
No application file
File size: 2,568 Bytes
4bbb6c5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>Llama 3 Chat Space</title>
<style>
body { background: #000; color: #0f0; text-align: center; font-family: sans-serif; padding: 20px; }
.container { border: 2px solid #0f0; padding: 20px; border-radius: 15px; max-width: 600px; margin: auto; }
textarea { width: 90%; height: 120px; background: #111; color: #fff; border: 1px solid #0f0; padding: 10px; border-radius: 8px; margin-bottom: 10px; }
button { width: 95%; padding: 15px; background: #0f0; color: #000; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; }
#response { margin-top: 20px; background: #1a1a1a; padding: 15px; border-radius: 10px; min-height: 50px; text-align: right; line-height: 1.6; }
</style>
</head>
<body>
<div class="container">
<h2>دردشة Llama 3 - Space الخاص بك</h2>
<textarea id="userInput" placeholder="اسألني أي شيء بالعربي أو الإنجليزي..."></textarea>
<button onclick="askAI()">إرسال السؤال</button>
<div id="response">بانتظار سؤالك...</div>
</div>
<script>
const API_TOKEN = "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";
async function askAI() {
const input = document.getElementById('userInput').value;
const resDiv = document.getElementById('response');
if(!input) return alert("اكتب شيئاً أولاً");
resDiv.innerText = "جاري التفكير... انتظر قليلاً";
try {
const response = await fetch(
"https://api-inference.huggingface.co/models/meta-llama/Llama-3.2-3B-Instruct",
{
headers: {
"Authorization": `Bearer ${API_TOKEN}`,
"Content-Type": "application/json"
},
method: "POST",
body: JSON.stringify({ inputs: input }),
}
);
const result = await response.json();
if (response.ok) {
// عرض النتيجة
resDiv.innerText = result[0].generated_text || "انتهى التفكير!";
} else {
resDiv.innerText = "خطأ من السيرفر: " + (result.error || "تأكد من الموافقة على شروط الموديل");
}
} catch (e) {
resDiv.innerText = "فشل الاتصال: " + e.message;
}
}
</script>
</body>
</html>
|