Spaces:

AnesKAM
/

gen

Sleeping

App Files Files Community

AnesKAM commited on 16 days ago

Commit

fe1cdda

verified ·

1 Parent(s): f82b4a2

Update index.html

Browse files

Files changed (1) hide show

index.html +118 -63

index.html CHANGED Viewed

@@ -6,18 +6,13 @@
     <title>Dual Mode AI</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <!-- ✅ G4F Library للوضع السريع -->
-    <script type="module">
-        import { createClient } from 'https://g4f.dev/dist/js/providers.js';
-        window.g4fClient = createClient('default');
-    </script>
     <style>
         :root {
             --bg: #0d1117;
             --sidebar: #161b22;
-            --fast: #238636;      /* أخضر للسريع */
-            --think: #a371f7;     /* بنفسجي للمفكر */
             --border: #30363d;
             --text: #c9d1d9;
         }
@@ -80,6 +75,17 @@
         .mode-info.fast { background: rgba(35,134,54,0.1); border: 1px solid var(--fast); }
         .mode-info.think { background: rgba(163,113,247,0.1); border: 1px solid var(--think); }
         .chat-container {
             flex: 1;
             display: flex;
@@ -115,8 +121,9 @@
         }
         .message.fast .avatar { background: var(--fast); color: white; }
-        .message.think .avatar { background: var(--think); color: white; animation: pulse 2s infinite; }
         @keyframes pulse {
             0%, 100% { box-shadow: 0 0 0 0 rgba(163,113,247,0.4); }
             50% { box-shadow: 0 0 0 10px rgba(163,113,247,0); }
@@ -128,17 +135,12 @@
         }
         .user .bubble { background: #21262d; }
-        .ai.fast .bubble { border-color: var(--fast); }
-        .ai.think .bubble { border-color: var(--think); }
-        /* مؤشر التفكير */
         .thinking-indicator {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: var(--think);
-            font-size: 13px;
-            margin-bottom: 8px;
         }
         .thinking-indicator i { animation: spin 1s linear infinite; }
@@ -149,15 +151,12 @@
             bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
-            width: 75%;
-            max-width: 800px;
             background: var(--sidebar);
             border: 1px solid var(--border);
             border-radius: 12px;
             padding: 12px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
         }
         #userInput {
@@ -174,6 +173,16 @@
         .send-btn.fast { background: var(--fast); }
         .send-btn.think { background: var(--think); }
         .send-btn:disabled { background: #30363d !important; cursor: not-allowed; }
     </style>
 </head>
 <body>
@@ -191,13 +200,16 @@
         </div>
         <div class="mode-info fast" id="modeInfo">
-            <strong>G4F Mode</strong><br>
             مجاني • فوري • بدون API Key<br>
-            يستخدم providers متعددة للرد السريع
         </div>
         <div style="margin-top: auto; font-size: 11px; color: #8b949e;">
-            <div id="currentMode">الوضع الحالي: سريع (G4F)</div>
         </div>
     </aside>
@@ -207,56 +219,88 @@
                 <div class="avatar"><i class="fas fa-robot"></i></div>
                 <div class="bubble">
                     مرحباً! اختر الوضع المناسب:<br><br>
-                    ⚡ <strong>الوضع السريع:</strong> ردود فورية مجانية عبر G4F<br>
-                    🧠 <strong>الوضع المفكر:</strong> تحليل عميق عبر Kimi (��حتاج Poe API)
                 </div>
             </div>
         </div>
         <div class="input-wrapper">
             <input type="text" id="userInput" placeholder="اكتب رسالتك..." autocomplete="off">
-            <button class="send-btn fast" id="sendBtn" onclick="handleSend()">
                 <i class="fas fa-paper-plane"></i>
             </button>
         </div>
     </main>
-    <script>
-        let currentMode = 'fast'; // 'fast' أو 'think'
-        function setMode(mode) {
             currentMode = mode;
-            // تحديث الأزرار
             document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
             document.querySelector(`.mode-btn.${mode}`).classList.add('active');
-            // تحديث المعلومات
             const info = document.getElementById('modeInfo');
             const btn = document.getElementById('sendBtn');
             const status = document.getElementById('currentMode');
             if (mode === 'fast') {
                 info.className = 'mode-info fast';
-                info.innerHTML = '<strong>G4F Mode</strong><br>مجاني • فوري • بدون API Key';
                 btn.className = 'send-btn fast';
                 status.textContent = 'الوضع الحالي: سريع (G4F)';
             } else {
                 info.className = 'mode-info think';
-                info.innerHTML = '<strong>Kimi Think Mode</strong><br>يبحث ويفكر قبل الإجابة<br>يحتاج Poe API Key في السيرفر';
                 btn.className = 'send-btn think';
                 status.textContent = 'الوضع الحالي: مفكر (Kimi)';
             }
-        }
-        async function handleSend() {
             const input = document.getElementById('userInput');
             const btn = document.getElementById('sendBtn');
             const text = input.value.trim();
             if (!text) return;
-            // إضافة رسالة المستخدم
             addMessage(text, 'user');
             input.value = '';
             input.disabled = true;
@@ -271,17 +315,25 @@
             input.disabled = false;
             btn.disabled = false;
             input.focus();
-        }
-        // ✅ الوضع السريع: G4F مباشرة في المتصفح
         async function sendFast(text) {
             const msgId = addMessage('', 'ai', 'fast');
             const bubble = document.getElementById(msgId).querySelector('.bubble');
             try {
-                // استخدام G4F client المستورد من CDN
-                const result = await window.g4fClient.chat.completions.create({
-                    model: 'auto',  // يختار أفضل provider تلقائياً
                     messages: [{ role: 'user', content: text }]
                 });
@@ -289,22 +341,22 @@
                 bubble.innerHTML = marked.parse(content);
             } catch (err) {
-                bubble.innerHTML = `<span style="color:#f85149">خطأ في G4F: ${err.message}</span>`;
             }
         }
-        // ✅ الوضع المفكر: Poe API مع Kimi وإظهار التفكير
         async function sendThink(text) {
             const msgId = addMessage('', 'ai', 'think');
-            const container = document.getElementById(msgId);
-            const bubble = container.querySelector('.bubble');
             // إضافة مؤشر التفكير
-            const thinkingDiv = document.createElement('div');
-            thinkingDiv.className = 'thinking-indicator';
-            thinkingDiv.id = `thinking-${msgId}`;
-            thinkingDiv.innerHTML = '<i class="fas fa-circle-notch"></i> يفكر...';
-            container.insertBefore(thinkingDiv, bubble);
             try {
                 const res = await fetch('/api/think', {
@@ -316,7 +368,7 @@
                 const reader = res.body.getReader();
                 const decoder = new TextDecoder();
                 let fullText = "";
-                let isResponding = false;
                 while (true) {
                     const { done, value } = await reader.read();
@@ -334,27 +386,27 @@
                         try {
                             const json = JSON.parse(data);
-                            // ✅ إخفاء مؤشر التفكير عند بدء الرد
-                            if (json.status === 'responding' && !isResponding) {
-                                isResponding = true;
-                                const indicator = document.getElementById(`thinking-${msgId}`);
-                                if (indicator) indicator.style.display = 'none';
                             }
                             if (json.content) {
                                 fullText += json.content;
                                 bubble.innerHTML = marked.parse(fullText);
                             }
                         } catch (e) {}
                     }
                 }
             } catch (err) {
-                bubble.innerHTML = `<span style="color:#f85149">خطأ: ${err.message}</span>`;
             } finally {
-                // إخفاء المؤشر إذا بقي ظاهراً
-                const indicator = document.getElementById(`thinking-${msgId}`);
-                if (indicator) indicator.style.display = 'none';
             }
         }
@@ -377,8 +429,11 @@
         }
         document.getElementById('userInput').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') handleSend();
         });
     </script>
 </body>
 </html>

     <title>Dual Mode AI</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         :root {
             --bg: #0d1117;
             --sidebar: #161b22;
+            --fast: #238636;
+            --think: #a371f7;
             --border: #30363d;
             --text: #c9d1d9;
         }
         .mode-info.fast { background: rgba(35,134,54,0.1); border: 1px solid var(--fast); }
         .mode-info.think { background: rgba(163,113,247,0.1); border: 1px solid var(--think); }
+        .status-badge {
+            display: inline-block;
+            font-size: 10px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            margin-right: 6px;
+        }
+        .status-badge.ready { background: var(--fast); color: white; }
+        .status-badge.loading { background: #d29922; color: black; }
+        .status-badge.error { background: #f85149; color: white; }
         .chat-container {
             flex: 1;
             display: flex;
         }
         .message.fast .avatar { background: var(--fast); color: white; }
+        .message.think .avatar { background: var(--think); color: white; }
+        .thinking .avatar { animation: pulse 2s infinite; }
         @keyframes pulse {
             0%, 100% { box-shadow: 0 0 0 0 rgba(163,113,247,0.4); }
             50% { box-shadow: 0 0 0 10px rgba(163,113,247,0); }
         }
         .user .bubble { background: #21262d; }
+        .ai.fast .bubble { border-color: rgba(35,134,54,0.3); }
+        .ai.think .bubble { border-color: rgba(163,113,247,0.3); }
         .thinking-indicator {
+            display: flex; align-items: center; gap: 8px;
+            color: var(--think); font-size: 13px; margin-bottom: 8px;
         }
         .thinking-indicator i { animation: spin 1s linear infinite; }
             bottom: 30px;
             left: 50%;
             transform: translateX(-50%);
+            width: 75%; max-width: 800px;
             background: var(--sidebar);
             border: 1px solid var(--border);
             border-radius: 12px;
             padding: 12px;
+            display: flex; align-items: center; gap: 12px;
         }
         #userInput {
         .send-btn.fast { background: var(--fast); }
         .send-btn.think { background: var(--think); }
         .send-btn:disabled { background: #30363d !important; cursor: not-allowed; }
+        .error-box {
+            background: rgba(248,81,73,0.1);
+            border: 1px solid #f85149;
+            color: #f85149;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            margin-top: 8px;
+        }
     </style>
 </head>
 <body>
         </div>
         <div class="mode-info fast" id="modeInfo">
+            <strong>
+                G4F Mode
+                <span class="status-badge loading" id="g4fStatus">جاري التحميل...</span>
+            </strong><br>
             مجاني • فوري • بدون API Key<br>
+            <div id="g4fError"></div>
         </div>
         <div style="margin-top: auto; font-size: 11px; color: #8b949e;">
+            <div id="currentMode">الوضع الحالي: سريع</div>
         </div>
     </aside>
                 <div class="avatar"><i class="fas fa-robot"></i></div>
                 <div class="bubble">
                     مرحباً! اختر الوضع المناسب:<br><br>
+                    ⚡ <strong>الوضع السريع:</strong> ردود فورية مجانية<br>
+                    🧠 <strong>الوضع المفكر:</strong> تحليل عميق عبر Kimi
                 </div>
             </div>
         </div>
         <div class="input-wrapper">
             <input type="text" id="userInput" placeholder="اكتب رسالتك..." autocomplete="off">
+            <button class="send-btn fast" id="sendBtn" onclick="handleSend()" disabled>
                 <i class="fas fa-paper-plane"></i>
             </button>
         </div>
     </main>
+    <script type="module">
+        // ✅ استيراد G4F بشكل صحيح كـ ES Module
+        let g4fClient = null;
+        let g4fReady = false;
+        // محاولة تحميل G4F
+        async function initG4F() {
+            try {
+                const { createClient } = await import('https://g4f.dev/dist/js/providers.js');
+                g4fClient = createClient('azure');
+                g4fReady = true;
+                document.getElementById('g4fStatus').textContent = 'جاهز';
+                document.getElementById('g4fStatus').className = 'status-badge ready';
+                document.getElementById('sendBtn').disabled = false;
+                console.log('✅ G4F Client Ready');
+            } catch (err) {
+                console.error('❌ G4F Error:', err);
+                document.getElementById('g4fStatus').textContent = 'خطأ';
+                document.getElementById('g4fStatus').className = 'status-badge error';
+                document.getElementById('g4fError').innerHTML =
+                    `<div class="error-box">فشل تحميل G4F. سيتم استخدام الوضع المفكر فقط.</div>`;
+                // تفعيل الوضع المفكر تلقائياً إذا فشل G4F
+                setMode('think');
+                document.getElementById('sendBtn').disabled = false;
+            }
+        }
+        let currentMode = 'fast';
+        window.setMode = function(mode) {
             currentMode = mode;
             document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
             document.querySelector(`.mode-btn.${mode}`).classList.add('active');
             const info = document.getElementById('modeInfo');
             const btn = document.getElementById('sendBtn');
             const status = document.getElementById('currentMode');
             if (mode === 'fast') {
                 info.className = 'mode-info fast';
                 btn.className = 'send-btn fast';
                 status.textContent = 'الوضع الحالي: سريع (G4F)';
+                if (!g4fReady) {
+                    info.innerHTML = `
+                        <strong>G4F Mode</strong>
+                        <span class="status-badge error">غير متوفر</span><br>
+                        فشل الاتصال بـ G4F
+                    `;
+                }
             } else {
                 info.className = 'mode-info think';
                 btn.className = 'send-btn think';
                 status.textContent = 'الوضع الحالي: مفكر (Kimi)';
             }
+        };
+        window.handleSend = async function() {
             const input = document.getElementById('userInput');
             const btn = document.getElementById('sendBtn');
             const text = input.value.trim();
             if (!text) return;
             addMessage(text, 'user');
             input.value = '';
             input.disabled = true;
             input.disabled = false;
             btn.disabled = false;
             input.focus();
+        };
         async function sendFast(text) {
             const msgId = addMessage('', 'ai', 'fast');
             const bubble = document.getElementById(msgId).querySelector('.bubble');
+            // التحقق من توفر G4F
+            if (!g4fReady || !g4fClient) {
+                bubble.innerHTML = `<span style="color:#f85149">
+                    ⚠️ G4F غير متوفر. <button onclick="setMode('think'); handleSend()" style="background:var(--think);border:none;color:white;padding:4px 8px;border-radius:4px;cursor:pointer;">التبديل للوضع المفكر</button>
+                </span>`;
+                return;
+            }
             try {
+                bubble.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> جاري الرد...';
+                const result = await g4fClient.chat.completions.create({
+                    model: 'auto',
                     messages: [{ role: 'user', content: text }]
                 });
                 bubble.innerHTML = marked.parse(content);
             } catch (err) {
+                console.error('G4F Error:', err);
+                bubble.innerHTML = `<span style="color:#f85149">خطأ في G4F: ${err.message}. <a href="#" onclick="setMode('think')" style="color:var(--think)">جرب الوضع المفكر</a></span>`;
             }
         }
         async function sendThink(text) {
             const msgId = addMessage('', 'ai', 'think');
+            const msgElement = document.getElementById(msgId);
+            const bubble = msgElement.querySelector('.bubble');
             // إضافة مؤشر التفكير
+            msgElement.classList.add('thinking');
+            const indicator = document.createElement('div');
+            indicator.className = 'thinking-indicator';
+            indicator.innerHTML = '<i class="fas fa-circle-notch"></i> يفكر...';
+            bubble.parentNode.insertBefore(indicator, bubble);
             try {
                 const res = await fetch('/api/think', {
                 const reader = res.body.getReader();
                 const decoder = new TextDecoder();
                 let fullText = "";
+                let respondingStarted = false;
                 while (true) {
                     const { done, value } = await reader.read();
                         try {
                             const json = JSON.parse(data);
+                            if (json.status === 'responding' && !respondingStarted) {
+                                respondingStarted = true;
+                                indicator.style.display = 'none';
+                                msgElement.classList.remove('thinking');
                             }
                             if (json.content) {
                                 fullText += json.content;
                                 bubble.innerHTML = marked.parse(fullText);
+                            } else if (json.error) {
+                                bubble.innerHTML = `<span style="color:#f85149">خطأ: ${json.error}</span>`;
                             }
                         } catch (e) {}
                     }
                 }
             } catch (err) {
+                bubble.innerHTML = `<span style="color:#f85149">فشل الاتصال بالسيرفر: ${err.message}</span>`;
             } finally {
+                indicator.style.display = 'none';
+                msgElement.classList.remove('thinking');
             }
         }
         }
         document.getElementById('userInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') window.handleSend();
         });
+        // ✅ بدء التحميل
+        initG4F();
     </script>
 </body>
 </html>