Spaces:

AnesKAM
/

Genisi

Sleeping

App Files Files Community

AnesKAM commited on Apr 19

Commit

224b8d2

verified ·

1 Parent(s): 41a75ce

Update index.html

Browse files

Files changed (1) hide show

index.html +38 -12

index.html CHANGED Viewed

@@ -5,11 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Genisi AI - مساعدك الذكي</title>
-  <!-- 🌟 Lucide Icons - أحدث مكتبة أيقونات -->
   <script src="https://unpkg.com/lucide@latest"></script>
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"/>
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
@@ -46,7 +47,7 @@
     .app{display:flex;height:100vh;overflow:hidden}
-    /* SIDEBAR - مخفي افتراضياً */
     .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
       border-right:1px solid var(--border);display:flex;flex-direction:column;
       transition:width var(--tr),min-width var(--tr);overflow:hidden;
@@ -141,7 +142,7 @@
     .msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;}
     .msg-row.user .bubble{background:var(--user-bubble);border:none;}
-    /* 🌟 حاوية التفكير لنموذج Pro */
     .thinking-container {
       margin: 16px 0;
       padding: 16px 18px;
@@ -322,7 +323,7 @@
 <body>
 <div class="app">
-  <!-- SIDEBAR - مخفي افتراضياً -->
   <aside class="sidebar collapsed" id="sidebar">
     <div class="sidebar-header">
       <div class="s-logo">
@@ -439,7 +440,7 @@
 <script>
 // ═════════════════════════════════════════════════════════════
-// 🌟 GENISI AI - الواجهة النهائية
 // ═════════════════════════════════════════════════════════════
 // i18n
@@ -510,6 +511,25 @@ const getChat = (id) => chats.find(c => c.id === (id ?? activeChatId));
 const esc = (t) => String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 const scrollToBottom = () => { const area = document.getElementById('chat-area'); area.scrollTop = area.scrollHeight; };
 // Copy code
 window.copyCode = function(btn, encodedCode) {
   navigator.clipboard.writeText(decodeURIComponent(encodedCode)).then(() => {
@@ -670,6 +690,8 @@ function loadChat(id) {
   });
   scrollToBottom();
   renderChatList();
 }
 function deleteChat(id, e) {
@@ -695,7 +717,6 @@ async function sendMessage() {
   let text = input.value.trim();
   if (!text && pendingFiles.length === 0) return;
-  // إخفاء شاشة الترحيب
   const welcome = document.getElementById('welcome');
   if (welcome) welcome.remove();
@@ -728,7 +749,6 @@ async function sendMessage() {
   let thinkingContainer = null, thinkingContent = null, responseContainer = null;
   let thinkingText = '', finalResponse = '', isThinkingPhase = currentModel === 'pro';
-  // إعداد حاوية التفكير لنموذج Pro
   if (currentModel === 'pro') {
     const t = i18n[currentLang];
     thinkingContainer = document.createElement('div');
@@ -790,18 +810,21 @@ async function sendMessage() {
           finalResponse = fullResponse.substring(fullResponse.indexOf(" instant") + 8);
           if (responseContainer) responseContainer.innerHTML = marked.parse(finalResponse) + '<span class="genisi-cursor"></span>';
         }
       } else {
         botContentDiv.innerHTML = marked.parse(fullResponse) + '<span class="genisi-cursor"></span>';
       }
       lucide.createIcons();
       scrollToBottom();
     }
-    // إزالة المؤشر
     document.querySelector('.genisi-cursor')?.remove();
-    // حفظ المحادثة
     const historyEntry = {
       user: text, bot: fullResponse, uiFiles,
       thinking: currentModel === 'pro' ? thinkingText : null
@@ -819,6 +842,8 @@ async function sendMessage() {
       botContentDiv.innerHTML = `<span style="color:var(--danger)"><i data-lucide="alert-circle"></i> ${i18n[currentLang].errConnect}: ${err.message}</span>`;
     }
     lucide.createIcons();
   } finally {
     isGenerating = false;
     document.getElementById('send-btn').style.display = 'flex';
@@ -858,6 +883,10 @@ function appendBubble(role, text, isMarkdown, filesList = [], thinkingText = nul
   bub.appendChild(contentDiv);
   row.appendChild(av); row.appendChild(bub);
   area.appendChild(row);
   scrollToBottom();
   lucide.createIcons();
   return contentDiv;
@@ -875,7 +904,6 @@ applyTheme(localStorage.getItem('genisi_theme') || 'dark');
 document.getElementById('lang-select').value = currentLang;
 applyI18n();
-// تحميل النموذج المحفوظ
 (function loadSavedModel() {
   const toggleBtn = document.getElementById('model-toggle-btn');
   const icon = document.getElementById('model-icon-input');
@@ -889,7 +917,6 @@ applyI18n();
 lucide.createIcons();
-// Close dropdown on outside click
 document.addEventListener('click', (e) => {
   const selector = document.querySelector('.model-selector-input');
   const dropdown = document.getElementById('model-dropdown-input');
@@ -898,7 +925,6 @@ document.addEventListener('click', (e) => {
   }
 });
-// Ensure sidebar is collapsed by default
 document.getElementById('sidebar').classList.add('collapsed');
 </script>
 </body>

   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Genisi AI - مساعدك الذكي</title>
+  <!-- 🌟 Lucide Icons -->
   <script src="https://unpkg.com/lucide@latest"></script>
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <!-- KaTeX CSS + JS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"/>
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"></script>
     .app{display:flex;height:100vh;overflow:hidden}
+    /* SIDEBAR */
     .sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--surface);
       border-right:1px solid var(--border);display:flex;flex-direction:column;
       transition:width var(--tr),min-width var(--tr);overflow:hidden;
     .msg-row.bot .bubble{background:transparent;border:none;padding:8px 4px;box-shadow:none;}
     .msg-row.user .bubble{background:var(--user-bubble);border:none;}
+    /* حاوية التفكير */
     .thinking-container {
       margin: 16px 0;
       padding: 16px 18px;
 <body>
 <div class="app">
+  <!-- SIDEBAR -->
   <aside class="sidebar collapsed" id="sidebar">
     <div class="sidebar-header">
       <div class="s-logo">
 <script>
 // ═════════════════════════════════════════════════════════════
+// 🌟 GENISI AI - مع دعم ديناميكي كامل لـ KaTeX
 // ═════════════════════════════════════════════════════════════
 // i18n
 const esc = (t) => String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 const scrollToBottom = () => { const area = document.getElementById('chat-area'); area.scrollTop = area.scrollHeight; };
+// 🌟🌟🌟 دالة تصيير KaTeX يدوياً (التحسين الأساسي)
+function renderMath(element) {
+  if (window.renderMathInElement) {
+    try {
+      renderMathInElement(element, {
+        delimiters: [
+          {left: '$$', right: '$$', display: true},
+          {left: '$', right: '$', display: false},
+          {left: '\\(', right: '\\)', display: false},
+          {left: '\\[', right: '\\]', display: true}
+        ],
+        throwOnError: false
+      });
+    } catch (e) {
+      console.warn('KaTeX render error:', e);
+    }
+  }
+}
 // Copy code
 window.copyCode = function(btn, encodedCode) {
   navigator.clipboard.writeText(decodeURIComponent(encodedCode)).then(() => {
   });
   scrollToBottom();
   renderChatList();
+  // 🟢 إعادة تصيير الرياضيات بعد تحميل المحادثة
+  document.querySelectorAll('.bubble').forEach(bubble => renderMath(bubble));
 }
 function deleteChat(id, e) {
   let text = input.value.trim();
   if (!text && pendingFiles.length === 0) return;
   const welcome = document.getElementById('welcome');
   if (welcome) welcome.remove();
   let thinkingContainer = null, thinkingContent = null, responseContainer = null;
   let thinkingText = '', finalResponse = '', isThinkingPhase = currentModel === 'pro';
   if (currentModel === 'pro') {
     const t = i18n[currentLang];
     thinkingContainer = document.createElement('div');
           finalResponse = fullResponse.substring(fullResponse.indexOf(" instant") + 8);
           if (responseContainer) responseContainer.innerHTML = marked.parse(finalResponse) + '<span class="genisi-cursor"></span>';
         }
+        // 🟢 تصيير الرياضيات أثناء التدفق
+        if (thinkingContainer) renderMath(thinkingContainer);
+        if (responseContainer) renderMath(responseContainer);
       } else {
         botContentDiv.innerHTML = marked.parse(fullResponse) + '<span class="genisi-cursor"></span>';
+        // 🟢 تصيير الرياضيات أثناء التدفق
+        renderMath(botContentDiv);
       }
       lucide.createIcons();
       scrollToBottom();
     }
     document.querySelector('.genisi-cursor')?.remove();
     const historyEntry = {
       user: text, bot: fullResponse, uiFiles,
       thinking: currentModel === 'pro' ? thinkingText : null
       botContentDiv.innerHTML = `<span style="color:var(--danger)"><i data-lucide="alert-circle"></i> ${i18n[currentLang].errConnect}: ${err.message}</span>`;
     }
     lucide.createIcons();
+    // 🟢 تصيير الرياضيات في حالة الخطأ
+    renderMath(botContentDiv);
   } finally {
     isGenerating = false;
     document.getElementById('send-btn').style.display = 'flex';
   bub.appendChild(contentDiv);
   row.appendChild(av); row.appendChild(bub);
   area.appendChild(row);
+  // 🟢 تصيير الرياضيات بعد إضافة الفقاعة
+  renderMath(bub);
   scrollToBottom();
   lucide.createIcons();
   return contentDiv;
 document.getElementById('lang-select').value = currentLang;
 applyI18n();
 (function loadSavedModel() {
   const toggleBtn = document.getElementById('model-toggle-btn');
   const icon = document.getElementById('model-icon-input');
 lucide.createIcons();
 document.addEventListener('click', (e) => {
   const selector = document.querySelector('.model-selector-input');
   const dropdown = document.getElementById('model-dropdown-input');
   }
 });
 document.getElementById('sidebar').classList.add('collapsed');
 </script>
 </body>