| <!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> |
|
|
