Hugging Face's logo

Spaces:
kimo33442
/
keoaistudio
Running

App Files Community
kimo33442 commited on
Commit
f3965fe
·
verified ·
1 Parent(s): eced623

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -16
index.html CHANGED
@@ -5,28 +5,34 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Keo AI Studio Chatbot</title>
7
  <style>
8
- body {font-family:sans-serif; background:#071126; color:#e6eef6;}
9
- #chat {height:400px; overflow:auto; border:1px solid #333; padding:10px;}
10
- .bubble {padding:10px; border-radius:10px; margin:5px; max-width:70%;}
11
  .bubble.user {background:#6ee7b7; color:#022; align-self:flex-end;}
12
  .bubble.bot {background:#0f1724; color:#e6eef6; align-self:flex-start;}
13
- #prompt {width:100%; padding:10px;}
 
 
14
  </style>
15
  </head>
16
  <body>
17
 
18
  <h2>Keo AI Studio Chatbot</h2>
 
19
  <select id="modelSel">
20
- <option value="prakasharyan/qwen-arabic:latest">Qwen Arabic</option>
21
- <option value="tiiuae/falcon-7b-instruct">Falcon 7B</option>
22
- <option value="google/flan-t5-xl">Flan-T5 XL</option>
 
 
23
  </select>
 
24
  <div id="chat"></div>
25
  <textarea id="prompt" placeholder="اكتب رسالتك هنا..."></textarea>
26
  <button id="sendBtn">إرسال</button>
27
 
28
  <script>
29
- const API = "/chat"; // هذا endpoint من Backend (Python)
30
 
31
  const chat = document.getElementById("chat");
32
  const promptEl = document.getElementById("prompt");
@@ -41,6 +47,7 @@ function appendBubble(text, cls){
41
  chat.scrollTop = chat.scrollHeight;
42
  }
43
 
 
44
  sendBtn.addEventListener("click", async () => {
45
  const text = promptEl.value.trim();
46
  if(!text) return;
@@ -49,15 +56,25 @@ sendBtn.addEventListener("click", async () => {
49
  appendBubble("...","bot"); // thinking
50
  const botBubble = chat.querySelector(".bubble.bot:last-child");
51
 
52
- const res = await fetch(API, {
53
- method:"POST",
54
- headers:{"Content-Type":"application/json"},
55
- body: JSON.stringify({model:modelSel.value, prompt:text})
56
- });
57
- const data = await res.json();
58
- botBubble.textContent = data.response || "⚠️ لم يتم الحصول على رد";
 
 
 
 
 
 
 
 
 
 
59
  });
60
  </script>
61
 
62
  </body>
63
- </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Keo AI Studio Chatbot</title>
7
  <style>
8
+ body {font-family:sans-serif; background:#071126; color:#e6eef6; display:flex; flex-direction:column; align-items:center; padding:20px;}
9
+ #chat {height:400px; overflow:auto; border:1px solid #333; padding:10px; width:100%; max-width:600px; display:flex; flex-direction:column;}
10
+ .bubble {padding:10px; border-radius:10px; margin:5px; max-width:70%; word-wrap:break-word;}
11
  .bubble.user {background:#6ee7b7; color:#022; align-self:flex-end;}
12
  .bubble.bot {background:#0f1724; color:#e6eef6; align-self:flex-start;}
13
+ #prompt {width:100%; max-width:600px; padding:10px; margin-top:10px;}
14
+ #sendBtn {margin-top:10px; padding:10px 20px; cursor:pointer; background:#6ee7b7; color:#022; border:none; border-radius:8px;}
15
+ #modelSel {margin-bottom:10px; padding:5px; border-radius:6px; border:1px solid #333; width:100%; max-width:600px;}
16
  </style>
17
  </head>
18
  <body>
19
 
20
  <h2>Keo AI Studio Chatbot</h2>
21
+
22
  <select id="modelSel">
23
+ <option value="https://huggingface.co/prakasharyan/qwen-arabic">Qwen-Arabic</option>
24
+ <option value="https://huggingface.co/tiiuae/falcon-7b-instruct">Falcon-7B-Instruct</option>
25
+ <option value="https://huggingface.co/google/flan-t5-xl">Flan-T5-XL</option>
26
+ <option value="https://huggingface.co/bigscience/bloom-3b">BLOOM-3B</option>
27
+ <option value="https://huggingface.co/EleutherAI/gpt-neo-2.7B">GPT-Neo-2.7B</option>
28
  </select>
29
+
30
  <div id="chat"></div>
31
  <textarea id="prompt" placeholder="اكتب رسالتك هنا..."></textarea>
32
  <button id="sendBtn">إرسال</button>
33
 
34
  <script>
35
+ const API = "/chat"; // endpoint للbackend
36
 
37
  const chat = document.getElementById("chat");
38
  const promptEl = document.getElementById("prompt");
 
47
  chat.scrollTop = chat.scrollHeight;
48
  }
49
 
50
+ // إرسال الرسالة للـ backend
51
  sendBtn.addEventListener("click", async () => {
52
  const text = promptEl.value.trim();
53
  if(!text) return;
 
56
  appendBubble("...","bot"); // thinking
57
  const botBubble = chat.querySelector(".bubble.bot:last-child");
58
 
59
+ try {
60
+ const res = await fetch(API, {
61
+ method:"POST",
62
+ headers:{"Content-Type":"application/json"},
63
+ body: JSON.stringify({model:modelSel.value, prompt:text})
64
+ });
65
+ const data = await res.json();
66
+ botBubble.textContent = data.response || "⚠️ لم يتم الحصول على رد";
67
+ } catch(err){
68
+ botBubble.textContent = "⚠️ خطأ في الاتصال بالـ API";
69
+ console.error(err);
70
+ }
71
+ });
72
+
73
+ // إرسال بالضغط على Ctrl+Enter
74
+ promptEl.addEventListener("keydown", (e) => {
75
+ if(e.key === "Enter" && (e.ctrlKey || e.metaKey)) sendBtn.click();
76
  });
77
  </script>
78
 
79
  </body>
80
+ </html>