Hugging Face's logo

Spaces:
AnesKAM
/
gen
Sleeping

App Files Community
AnesKAM commited on
Commit
8024816
·
verified ·
1 Parent(s): 3d610b7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +39 -41
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.0">
6
- <title>G4F Literal + Kimi</title>
7
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
8
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
 
@@ -69,6 +69,7 @@
69
  padding: 12px;
70
  border-radius: 8px;
71
  margin-bottom: 20px;
 
72
  }
73
  .model-status.fast { background: rgba(35,134,54,0.1); border: 1px solid var(--fast); }
74
  .model-status.think { background: rgba(163,113,247,0.1); border: 1px solid var(--think); }
@@ -91,10 +92,7 @@
91
  animation: fadeIn 0.3s ease;
92
  }
93
 
94
- @keyframes fadeIn {
95
- from { opacity: 0; transform: translateY(10px); }
96
- to { opacity: 1; transform: translateY(0); }
97
- }
98
 
99
  .message.user { align-self: flex-end; flex-direction: row-reverse; }
100
  .message.ai { align-self: flex-start; }
@@ -158,7 +156,7 @@
158
  <body>
159
 
160
  <aside class="sidebar">
161
- <div class="brand"><i class="fas fa-layer-group"></i> Dual AI</div>
162
 
163
  <div class="mode-selector">
164
  <button class="mode-btn fast active" onclick="setMode('fast')">
@@ -170,13 +168,14 @@
170
  </div>
171
 
172
  <div class="model-status fast" id="modelStatus">
173
- <strong>G4F + Pollinations</strong><br>
 
174
  createClient("pollinations")<br>
175
  model: 'openai-fast'
176
  </div>
177
 
178
  <div style="margin-top: auto; font-size: 11px; color: #8b949e;">
179
- <div id="currentMode">الوضع الحالي: سريع (G4F)</div>
180
  </div>
181
  </aside>
182
 
@@ -185,11 +184,9 @@
185
  <div class="message ai fast">
186
  <div class="avatar"><i class="fas fa-robot"></i></div>
187
  <div class="bubble">
188
- مرحباً! النظام يستخدم الكود حرفياً:<br>
189
- <code style="background:#161b22;padding:4px 8px;border-radius:4px;display:block;margin:8px 0;">
190
- createClient("pollinations")<br>
191
- model: 'openai-fast'
192
- </code>
193
  </div>
194
  </div>
195
  </div>
@@ -202,16 +199,10 @@
202
  </div>
203
  </main>
204
 
205
- <!-- ✅✅✅ الكود الحرفي المطلوب ✅✅✅ -->
206
- <script type="module">
207
- // ========== الكود حرفياً كما طلبت ==========
208
- import { createClient } from 'https://g4f.dev/dist/js/providers.js';
209
-
210
- const client = createClient("pollinations");
211
- // ==========================================
212
-
213
  let currentMode = 'fast';
214
- window.setMode = (mode) => {
 
215
  currentMode = mode;
216
  document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
217
  document.querySelector(`.mode-btn.${mode}`).classList.add('active');
@@ -222,21 +213,22 @@
222
 
223
  if (mode === 'fast') {
224
  status.className = 'model-status fast';
225
- status.innerHTML = '<strong>G4F + Pollinations</strong><br>createClient("pollinations")<br>model: \'openai-fast\'';
226
  btn.className = 'send-btn fast';
227
- current.textContent = 'الوضع الحالي: سريع (G4F)';
228
  } else {
229
  status.className = 'model-status think';
230
- status.innerHTML = '<strong>Kimi K2.5 FW</strong><br>مع تفكير وتحليل عميق';
231
  btn.className = 'send-btn think';
232
- current.textContent = 'الوضع الحالي: مفكر (Kimi)';
233
  }
234
- };
235
 
236
- window.handleSend = async () => {
237
  const input = document.getElementById('userInput');
238
  const btn = document.getElementById('sendBtn');
239
  const text = input.value.trim();
 
240
  if (!text) return;
241
 
242
  addMessage(text, 'user');
@@ -245,37 +237,43 @@
245
  btn.disabled = true;
246
 
247
  if (currentMode === 'fast') {
248
- await sendFast(text);
249
  } else {
250
- await sendThink(text);
251
  }
252
 
253
  input.disabled = false;
254
  btn.disabled = false;
255
  input.focus();
256
- };
257
 
 
258
  async function sendFast(text) {
259
  const msgId = addMessage('', 'ai', 'fast');
260
  const bubble = document.getElementById(msgId).querySelector('.bubble');
261
- bubble.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> جاري الرد...';
262
 
263
  try {
264
- // ✅✅✅ الكود حرفياً مع تمرير النص فقط ✅✅✅
265
- const result = await client.chat.completions.create({
266
- model: 'openai-fast',
267
- messages: [{ role: 'user', content: text }] // text بدلاً من 'Hello!'
268
  });
269
 
270
- // عرض الناتج (console.log الأصلي لا يظهر في الصفحة)
271
- bubble.innerHTML = marked.parse(result.choices[0].message.content);
 
 
 
 
 
272
 
273
  } catch (err) {
274
- console.error(err);
275
- bubble.innerHTML = `<span style="color:#f85149">خطأ في G4F: ${err.message}<br>تأكد من الاتصال بالإنترنت</span>`;
276
  }
277
  }
278
 
 
279
  async function sendThink(text) {
280
  const msgId = addMessage('', 'ai', 'think');
281
  const msgElement = document.getElementById(msgId);
@@ -350,7 +348,7 @@
350
  }
351
 
352
  document.getElementById('userInput').addEventListener('keypress', (e) => {
353
- if (e.key === 'Enter') window.handleSend();
354
  });
355
  </script>
356
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dual AI - Backend Powered</title>
7
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
8
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
9
 
 
69
  padding: 12px;
70
  border-radius: 8px;
71
  margin-bottom: 20px;
72
+ line-height: 1.6;
73
  }
74
  .model-status.fast { background: rgba(35,134,54,0.1); border: 1px solid var(--fast); }
75
  .model-status.think { background: rgba(163,113,247,0.1); border: 1px solid var(--think); }
 
92
  animation: fadeIn 0.3s ease;
93
  }
94
 
95
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
 
 
96
 
97
  .message.user { align-self: flex-end; flex-direction: row-reverse; }
98
  .message.ai { align-self: flex-start; }
 
156
  <body>
157
 
158
  <aside class="sidebar">
159
+ <div class="brand"><i class="fas fa-server"></i> Backend AI</div>
160
 
161
  <div class="mode-selector">
162
  <button class="mode-btn fast active" onclick="setMode('fast')">
 
168
  </div>
169
 
170
  <div class="model-status fast" id="modelStatus">
171
+ <strong>⚡ Fast Mode</strong><br>
172
+ Backend: G4F + Pollinations<br>
173
  createClient("pollinations")<br>
174
  model: 'openai-fast'
175
  </div>
176
 
177
  <div style="margin-top: auto; font-size: 11px; color: #8b949e;">
178
+ <div id="currentMode">الوضع الحالي: سريع (Backend)</div>
179
  </div>
180
  </aside>
181
 
 
184
  <div class="message ai fast">
185
  <div class="avatar"><i class="fas fa-robot"></i></div>
186
  <div class="bubble">
187
+ مرحباً! الآن كل شيء يعمل من الباكاند:<br><br>
188
+ ⚡ <strong>السريع:</strong> G4F (Pollinations) في السيرفر<br>
189
+ 🧠 <strong>المفكر:</strong> Kimi K2.5 FW في السيرفر
 
 
190
  </div>
191
  </div>
192
  </div>
 
199
  </div>
200
  </main>
201
 
202
+ <script>
 
 
 
 
 
 
 
203
  let currentMode = 'fast';
204
+
205
+ function setMode(mode) {
206
  currentMode = mode;
207
  document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
208
  document.querySelector(`.mode-btn.${mode}`).classList.add('active');
 
213
 
214
  if (mode === 'fast') {
215
  status.className = 'model-status fast';
216
+ status.innerHTML = '<strong>⚡ Fast Mode</strong><br>Backend: G4F + Pollinations<br>createClient("pollinations")<br>model: \'openai-fast\'';
217
  btn.className = 'send-btn fast';
218
+ current.textContent = 'الوضع الحالي: سريع (Backend)';
219
  } else {
220
  status.className = 'model-status think';
221
+ status.innerHTML = '<strong>🧠 Think Mode</strong><br>Backend: Kimi K2.5 FW<br>مع تفكير وتحليل عميق';
222
  btn.className = 'send-btn think';
223
+ current.textContent = 'الوضع الحالي: مفكر (Backend)';
224
  }
225
+ }
226
 
227
+ async function handleSend() {
228
  const input = document.getElementById('userInput');
229
  const btn = document.getElementById('sendBtn');
230
  const text = input.value.trim();
231
+
232
  if (!text) return;
233
 
234
  addMessage(text, 'user');
 
237
  btn.disabled = true;
238
 
239
  if (currentMode === 'fast') {
240
+ await sendFast(text); // ✅ يتصل بالباكاند
241
  } else {
242
+ await sendThink(text); // ✅ يتصل بالباكاند
243
  }
244
 
245
  input.disabled = false;
246
  btn.disabled = false;
247
  input.focus();
248
+ }
249
 
250
+ // ✅ الوضع السريع: يتصل بالباكاند /api/fast
251
  async function sendFast(text) {
252
  const msgId = addMessage('', 'ai', 'fast');
253
  const bubble = document.getElementById(msgId).querySelector('.bubble');
254
+ bubble.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> جاري الرد من السيرفر...';
255
 
256
  try {
257
+ const response = await fetch('/api/fast', {
258
+ method: 'POST',
259
+ headers: { 'Content-Type': 'application/json' },
260
+ body: JSON.stringify({ message: text })
261
  });
262
 
263
+ const data = await response.json();
264
+
265
+ if (data.success) {
266
+ bubble.innerHTML = marked.parse(data.content);
267
+ } else {
268
+ throw new Error(data.error);
269
+ }
270
 
271
  } catch (err) {
272
+ bubble.innerHTML = `<span style="color:#f85149">خطأ: ${err.message}</span>`;
 
273
  }
274
  }
275
 
276
+ // ✅ الوضع المفكر: يتصل بالباكاند /api/think
277
  async function sendThink(text) {
278
  const msgId = addMessage('', 'ai', 'think');
279
  const msgElement = document.getElementById(msgId);
 
348
  }
349
 
350
  document.getElementById('userInput').addEventListener('keypress', (e) => {
351
+ if (e.key === 'Enter') handleSend();
352
  });
353
  </script>
354