bh-ab commited on
Commit
768906c
·
verified ·
1 Parent(s): 407bcf1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +3 -16
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6
- <title>دردشة محلية بالذكاء الاصطناعي</title>
7
  <style>
8
  :root{--bg:#0f172a;--panel:#111c33;--ai:#1e293b;--user:#0284c7;--line:#27344d;--text:#e2e8f0;--muted:#94a3b8;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444;--errbg:#450a0a}
9
  :root[data-theme=light]{--bg:#f1f5f9;--panel:#fff;--ai:#e6edf5;--line:#d3dde9;--text:#0f172a;--muted:#5b6b82;--errbg:#fee2e2}
@@ -17,7 +17,7 @@ aside section{margin-bottom:22px}
17
  .model{background:var(--ai);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px}
18
  .model small{color:var(--muted);display:block;margin-top:3px;direction:ltr;text-align:right;word-break:break-all}
19
  .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
20
- .dot.loading{background:var(--warn)}.dot.ready{background:var(--ok)}.dot.error{background:var(--err)}
21
  header{grid-area:head;display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
22
  header h1{font-size:17px;flex:1}
23
  .badge{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--ai);border:1px solid var(--line)}
@@ -93,7 +93,6 @@ select{width:100%;background:var(--ai);color:var(--text);border:1px solid var(--
93
  <div class="pop" id="pop" hidden>
94
  <button id="img">🖼️ إرفاق صورة</button>
95
  <button id="aud">🎵 رفع صوت</button>
96
- <button id="mic">🎤 تسجيل</button>
97
  </div>
98
  <textarea id="input" rows="1" placeholder="اكتب رسالتك…"></textarea>
99
  <button class="ic" id="stop" style="display:none">■</button>
@@ -106,11 +105,9 @@ select{width:100%;background:var(--ai);color:var(--text);border:1px solid var(--
106
  <script>
107
  const $ = s => document.querySelector(s);
108
  const log = $("#log"), main = $("#main"), input = $("#input");
109
- const API_BASE = ""; // نفس الأصل (Space)
110
 
111
- // ============ API helper ============
112
  async function api(name, body = {}) {
113
- const r = await fetch(`${API_BASE}/gradio_api/call/${name}`, {
114
  method: "POST",
115
  headers: { "Content-Type": "application/json" },
116
  body: JSON.stringify(body),
@@ -119,7 +116,6 @@ async function api(name, body = {}) {
119
  return r.json();
120
  }
121
 
122
- // ============ Theme ============
123
  let theme = localStorage.getItem("theme") || "dark";
124
  function applyTheme(t) {
125
  theme = t;
@@ -130,7 +126,6 @@ function applyTheme(t) {
130
  $("#theme").onclick = () => applyTheme(theme === "dark" ? "light" : "dark");
131
  applyTheme(theme);
132
 
133
- // ============ Sessions ============
134
  let sessions = JSON.parse(localStorage.getItem("chatSessions") || "{}");
135
  let currentId = localStorage.getItem("currentSessionId") || crypto.randomUUID();
136
  if (!sessions[currentId]) sessions[currentId] = { title: "دردشة جديدة", messages: [] };
@@ -168,7 +163,6 @@ function renderHistory() {
168
  });
169
  }
170
 
171
- // ============ Messages ============
172
  function addMsg(role, text = "", cls = "") {
173
  $(".empty")?.remove();
174
  const d = document.createElement("div");
@@ -196,7 +190,6 @@ function setBusy(v) {
196
  $("#modelSel").disabled = v;
197
  }
198
 
199
- // ============ Models ============
200
  const MODELS = {
201
  qwen25: { name: "Qwen2.5-0.5B", kind: "chat", size: "~500MB" },
202
  qwen3: { name: "Qwen3-0.6B", kind: "chat", size: "~600MB" },
@@ -227,7 +220,6 @@ modelSel.onchange = () => {
227
  save(); loadSession(currentId); syncModelUI();
228
  };
229
 
230
- // ============ Chat ============
231
  let currentReqId = null;
232
 
233
  async function ask(text) {
@@ -250,7 +242,6 @@ async function ask(text) {
250
  currentReqId = crypto.randomUUID();
251
 
252
  try {
253
- // تحميل النموذج إن لم يكن محملاً
254
  await api("load", { model_id: modelSel.value });
255
 
256
  const r = await api("generate", {
@@ -264,7 +255,6 @@ async function ask(text) {
264
  sessions[currentId].messages.push({ role: "assistant", content: r.text });
265
  save();
266
 
267
- // إضافة أزرار النسخ
268
  const row = document.createElement("div");
269
  row.className = "acts";
270
  const copy = document.createElement("button");
@@ -302,7 +292,6 @@ $("#stop").onclick = async () => {
302
  }
303
  };
304
 
305
- // ============ Unload / Clear ============
306
  $("#unload").onclick = async () => {
307
  await api("unload", { model_id: modelSel.value });
308
  $("#m-chat").querySelector(".dot").className = "dot";
@@ -323,7 +312,6 @@ $("#newChatBtn").onclick = () => {
323
 
324
  $("#menu").onclick = () => $("#side").classList.toggle("open");
325
 
326
- // ============ Attachments ============
327
  $("#plus").onclick = (e) => { e.stopPropagation(); $("#pop").hidden = !$("#pop").hidden; };
328
  document.addEventListener("click", () => $("#pop").hidden = true);
329
 
@@ -354,7 +342,6 @@ $("#audFile").onchange = async (e) => {
354
  } catch (e) { addMsg("assistant", "فشل تفريغ الصوت: " + e.message, "error"); }
355
  };
356
 
357
- // ============ Init ============
358
  renderHistory();
359
  loadSession(currentId);
360
  setBusy(false);
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6
+ <title>دردشة ذكاء اصطناعي</title>
7
  <style>
8
  :root{--bg:#0f172a;--panel:#111c33;--ai:#1e293b;--user:#0284c7;--line:#27344d;--text:#e2e8f0;--muted:#94a3b8;--ok:#22c55e;--warn:#f59e0b;--err:#ef4444;--errbg:#450a0a}
9
  :root[data-theme=light]{--bg:#f1f5f9;--panel:#fff;--ai:#e6edf5;--line:#d3dde9;--text:#0f172a;--muted:#5b6b82;--errbg:#fee2e2}
 
17
  .model{background:var(--ai);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px}
18
  .model small{color:var(--muted);display:block;margin-top:3px;direction:ltr;text-align:right;word-break:break-all}
19
  .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
20
+ .dot.ready{background:var(--ok)}
21
  header{grid-area:head;display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
22
  header h1{font-size:17px;flex:1}
23
  .badge{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--ai);border:1px solid var(--line)}
 
93
  <div class="pop" id="pop" hidden>
94
  <button id="img">🖼️ إرفاق صورة</button>
95
  <button id="aud">🎵 رفع صوت</button>
 
96
  </div>
97
  <textarea id="input" rows="1" placeholder="اكتب رسالتك…"></textarea>
98
  <button class="ic" id="stop" style="display:none">■</button>
 
105
  <script>
106
  const $ = s => document.querySelector(s);
107
  const log = $("#log"), main = $("#main"), input = $("#input");
 
108
 
 
109
  async function api(name, body = {}) {
110
+ const r = await fetch(`/gradio_api/call/${name}`, {
111
  method: "POST",
112
  headers: { "Content-Type": "application/json" },
113
  body: JSON.stringify(body),
 
116
  return r.json();
117
  }
118
 
 
119
  let theme = localStorage.getItem("theme") || "dark";
120
  function applyTheme(t) {
121
  theme = t;
 
126
  $("#theme").onclick = () => applyTheme(theme === "dark" ? "light" : "dark");
127
  applyTheme(theme);
128
 
 
129
  let sessions = JSON.parse(localStorage.getItem("chatSessions") || "{}");
130
  let currentId = localStorage.getItem("currentSessionId") || crypto.randomUUID();
131
  if (!sessions[currentId]) sessions[currentId] = { title: "دردشة جديدة", messages: [] };
 
163
  });
164
  }
165
 
 
166
  function addMsg(role, text = "", cls = "") {
167
  $(".empty")?.remove();
168
  const d = document.createElement("div");
 
190
  $("#modelSel").disabled = v;
191
  }
192
 
 
193
  const MODELS = {
194
  qwen25: { name: "Qwen2.5-0.5B", kind: "chat", size: "~500MB" },
195
  qwen3: { name: "Qwen3-0.6B", kind: "chat", size: "~600MB" },
 
220
  save(); loadSession(currentId); syncModelUI();
221
  };
222
 
 
223
  let currentReqId = null;
224
 
225
  async function ask(text) {
 
242
  currentReqId = crypto.randomUUID();
243
 
244
  try {
 
245
  await api("load", { model_id: modelSel.value });
246
 
247
  const r = await api("generate", {
 
255
  sessions[currentId].messages.push({ role: "assistant", content: r.text });
256
  save();
257
 
 
258
  const row = document.createElement("div");
259
  row.className = "acts";
260
  const copy = document.createElement("button");
 
292
  }
293
  };
294
 
 
295
  $("#unload").onclick = async () => {
296
  await api("unload", { model_id: modelSel.value });
297
  $("#m-chat").querySelector(".dot").className = "dot";
 
312
 
313
  $("#menu").onclick = () => $("#side").classList.toggle("open");
314
 
 
315
  $("#plus").onclick = (e) => { e.stopPropagation(); $("#pop").hidden = !$("#pop").hidden; };
316
  document.addEventListener("click", () => $("#pop").hidden = true);
317
 
 
342
  } catch (e) { addMsg("assistant", "فشل تفريغ الصوت: " + e.message, "error"); }
343
  };
344
 
 
345
  renderHistory();
346
  loadSession(currentId);
347
  setBusy(false);