Spaces:
Running
Running
| <html lang="ar"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Keo AI Studio Chatbot</title> | |
| <style> | |
| body {font-family:sans-serif; background:#071126; color:#e6eef6; display:flex; flex-direction:column; align-items:center; padding:20px;} | |
| #chat {height:400px; overflow:auto; border:1px solid #333; padding:10px; width:100%; max-width:600px; display:flex; flex-direction:column;} | |
| .bubble {padding:10px; border-radius:10px; margin:5px; max-width:70%; word-wrap:break-word;} | |
| .bubble.user {background:#6ee7b7; color:#022; align-self:flex-end;} | |
| .bubble.bot {background:#0f1724; color:#e6eef6; align-self:flex-start;} | |
| #prompt {width:100%; max-width:600px; padding:10px; margin-top:10px;} | |
| #sendBtn {margin-top:10px; padding:10px 20px; cursor:pointer; background:#6ee7b7; color:#022; border:none; border-radius:8px;} | |
| #modelSel {margin-bottom:10px; padding:5px; border-radius:6px; border:1px solid #333; width:100%; max-width:600px;} | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Keo AI Studio Chatbot</h2> | |
| <select id="modelSel"> | |
| <option value="https://huggingface.co/prakasharyan/qwen-arabic">Qwen-Arabic</option> | |
| <option value="https://huggingface.co/tiiuae/falcon-7b-instruct">Falcon-7B-Instruct</option> | |
| <option value="https://huggingface.co/google/flan-t5-xl">Flan-T5-XL</option> | |
| <option value="https://huggingface.co/bigscience/bloom-3b">BLOOM-3B</option> | |
| <option value="https://huggingface.co/EleutherAI/gpt-neo-2.7B">GPT-Neo-2.7B</option> | |
| </select> | |
| <div id="chat"></div> | |
| <textarea id="prompt" placeholder="اكتب رسالتك هنا..."></textarea> | |
| <button id="sendBtn">إرسال</button> | |
| <script> | |
| const API = "/chat"; // endpoint للbackend | |
| const chat = document.getElementById("chat"); | |
| const promptEl = document.getElementById("prompt"); | |
| const sendBtn = document.getElementById("sendBtn"); | |
| const modelSel = document.getElementById("modelSel"); | |
| function appendBubble(text, cls){ | |
| const el = document.createElement("div"); | |
| el.className = "bubble " + cls; | |
| el.textContent = text; | |
| chat.appendChild(el); | |
| chat.scrollTop = chat.scrollHeight; | |
| } | |
| // إرسال الرسالة للـ backend | |
| sendBtn.addEventListener("click", async () => { | |
| const text = promptEl.value.trim(); | |
| if(!text) return; | |
| appendBubble(text,"user"); | |
| promptEl.value = ""; | |
| appendBubble("...","bot"); // thinking | |
| const botBubble = chat.querySelector(".bubble.bot:last-child"); | |
| try { | |
| const res = await fetch(API, { | |
| method:"POST", | |
| headers:{"Content-Type":"application/json"}, | |
| body: JSON.stringify({model:modelSel.value, prompt:text}) | |
| }); | |
| const data = await res.json(); | |
| botBubble.textContent = data.response || "⚠️ لم يتم الحصول على رد"; | |
| } catch(err){ | |
| botBubble.textContent = "⚠️ خطأ في الاتصال بالـ API"; | |
| console.error(err); | |
| } | |
| }); | |
| // إرسال بالضغط على Ctrl+Enter | |
| promptEl.addEventListener("keydown", (e) => { | |
| if(e.key === "Enter" && (e.ctrlKey || e.metaKey)) sendBtn.click(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |