Update index.html

index.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Genisi AI</title>
   
-  <!-- Font Awesome 6 (أيقونات موحدة واحترافية) -->
+  <!-- Font Awesome 6 -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   
   <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
@@ -22,6 +22,7 @@
       --text: #e8eaf2; --text2: #9aa3be; --text3: #5c6480;
       --user-bubble: #1a2340; --bot-bubble: #161920;
       --danger: #f75f5f; 
+      --flash-color: #ffd700; --pro-color: #7c5cf7;
       --radius: 28px; --radius-sm: 18px; --radius-pill: 50px;
       --sidebar-w: 280px; --tr: 0.3s cubic-bezier(.4,0,.2,1);
     }
@@ -50,7 +51,6 @@
     .s-logo img{width:36px;height:36px;border-radius:12px;object-fit:cover; box-shadow: 0 4px 12px var(--accent-soft);}
     .s-logo-name{font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
     
-    /* أيقونات Font Awesome داخل الأزرار */
     .btn-new i { font-size: 1rem; }
     .btn-new{margin:12px 16px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));
       color:#fff;border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:'Cairo',sans-serif;
@@ -81,6 +81,32 @@
     .topbar{height:70px;padding:0 24px;display:flex;align-items:center;gap:16px; flex-shrink:0}
     .topbar-title{flex:1;font-size:1.05rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 
+    /* 🌟 MODEL SELECTOR (جديد) */
+    .model-selector{position:relative;display:flex;align-items:center;gap:10px;padding:8px 16px;
+      background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-pill);
+      cursor:pointer;transition:all var(--tr);user-select:none;}
+    .model-selector:hover{background:var(--surface3);border-color:var(--accent);}
+    .model-selector i{font-size:1.1rem;}
+    .model-selector .fa-bolt{color:var(--flash-color);}
+    .model-selector .fa-crown{color:var(--pro-color);}
+    .model-selector span{font-weight:600;font-size:0.9rem;}
+    .model-selector .fa-chevron-down{font-size:0.8rem;color:var(--text3);transition:transform var(--tr);}
+    .model-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);
+      border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;min-width:180px;
+      box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:100;opacity:0;visibility:hidden;
+      transform:translateY(-10px);transition:all var(--tr);}
+    [dir="rtl"] .model-dropdown{left:auto;right:0;}
+    .model-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);}
+    .model-option{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);
+      cursor:pointer;transition:background var(--tr);}
+    .model-option:hover{background:var(--surface2);}
+    .model-option.active{background:var(--accent-soft);}
+    .model-option i{width:20px;}
+    .model-info{flex:1;}
+    .model-name{font-weight:600;font-size:0.95rem;}
+    .model-desc{font-size:0.75rem;color:var(--text3);}
+    .model-badge{padding:2px 8px;background:var(--accent);color:#fff;border-radius:var(--radius-pill);font-size:0.65rem;font-weight:700;}
+
     /* CHAT AREA */
     .chat-area{flex:1;overflow-y:auto;padding:20px 0 40px;display:flex;flex-direction:column; scroll-behavior: smooth;}
     .welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
@@ -116,8 +142,8 @@
     .msg-row.user .bubble{background:var(--user-bubble);border:none; border-top-right-radius:6px}
     [dir="rtl"] .msg-row.user .bubble { border-top-right-radius:var(--radius); border-top-left-radius:6px; }
     
-    /* GEMINI STREAMING EFFECT */
-    .gemini-cursor { display: inline-block; width: 14px; height: 14px; margin-inline-start: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); mask-size: cover; -webkit-mask-size: cover; animation: spinPulse 1s infinite linear; transform-origin: center; vertical-align: middle; }
+    /* GENISI STREAMING EFFECT */
+    .genisi-cursor { display: inline-block; width: 14px; height: 14px; margin-inline-start: 6px; background: linear-gradient(135deg, var(--accent), var(--accent2)); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l2.5 9.5L24 12l-9.5 2.5L12 24l-2.5-9.5L0 12l9.5-2.5z"/></svg>'); mask-size: cover; -webkit-mask-size: cover; animation: spinPulse 1s infinite linear; transform-origin: center; vertical-align: middle; }
     @keyframes spinPulse { 0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.2) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 5px var(--accent)); } 100% { transform: scale(0.8) rotate(180deg); opacity: 0.5; } }
 
     /* IMAGE SKELETON LOADING */
@@ -239,6 +265,8 @@
       .w-title { font-size: 1.8rem; }
       .chips { gap: 8px; }
       .chip { font-size: .82rem; padding: 8px 14px; }
+      .model-selector span { display: none; }
+      .model-selector { padding: 8px 12px; }
     }
   </style>
 </head>
@@ -267,6 +295,32 @@
   <main class="main">
     <div class="topbar">
       <button class="btn-icon" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button>
+      
+      <!-- 🌟 MODEL SELECTOR (جديد) -->
+      <div class="model-selector" onclick="toggleModelDropdown(event)">
+        <i id="model-icon" class="fas fa-bolt"></i>
+        <span id="model-name">Flash</span>
+        <i class="fas fa-chevron-down"></i>
+        <div class="model-dropdown" id="model-dropdown">
+          <div class="model-option" data-model="flash" onclick="selectModel('flash', event)">
+            <i class="fas fa-bolt" style="color: var(--flash-color);"></i>
+            <div class="model-info">
+              <div class="model-name">Genisi Flash ⚡</div>
+              <div class="model-desc">سريع، مثالي للمهام اليومية</div>
+            </div>
+            <span class="model-badge" style="background: var(--flash-color);">Fast</span>
+          </div>
+          <div class="model-option" data-model="pro" onclick="selectModel('pro', event)">
+            <i class="fas fa-crown" style="color: var(--pro-color);"></i>
+            <div class="model-info">
+              <div class="model-name">Genisi Pro 💎</div>
+              <div class="model-desc">متقدم، تحليل عميق وإبداع</div>
+            </div>
+            <span class="model-badge" style="background: var(--pro-color);">Pro</span>
+          </div>
+        </div>
+      </div>
+      
       <div class="topbar-title" id="topbar-title">Genisi AI</div>
     </div>
 
@@ -404,6 +458,86 @@ let activeChatId = null;
 let isGenerating = false;
 let pendingFiles = [];
 let currentAbortController = null;
+let currentModel = 'flash'; // 🌟 النموذج الافتراضي
+
+// 🌟 دوال إدارة النموذج
+function toggleModelDropdown(event) {
+    event.stopPropagation();
+    const dropdown = document.getElementById('model-dropdown');
+    dropdown.classList.toggle('show');
+    
+    // إغلاق القائمة عند النقر خارجها
+    if (dropdown.classList.contains('show')) {
+        setTimeout(() => {
+            document.addEventListener('click', closeModelDropdown);
+        }, 0);
+    }
+}
+
+function closeModelDropdown() {
+    document.getElementById('model-dropdown').classList.remove('show');
+    document.removeEventListener('click', closeModelDropdown);
+}
+
+function selectModel(model, event) {
+    event.stopPropagation();
+    currentModel = model;
+    
+    const icon = document.getElementById('model-icon');
+    const name = document.getElementById('model-name');
+    const options = document.querySelectorAll('.model-option');
+    
+    // تحديث الأيقونة والنص
+    if (model === 'flash') {
+        icon.className = 'fas fa-bolt';
+        name.textContent = 'Flash';
+    } else {
+        icon.className = 'fas fa-crown';
+        name.textContent = 'Pro';
+    }
+    
+    // تحديث الحالة النشطة
+    options.forEach(opt => {
+        opt.classList.remove('active');
+        if (opt.dataset.model === model) {
+            opt.classList.add('active');
+        }
+    });
+    
+    // حفظ التفضيل
+    localStorage.setItem('genisi_model', model);
+    
+    // إغلاق القائمة
+    closeModelDropdown();
+    
+    // إظهار رسالة تأكيد صغيرة (اختياري)
+    console.log(`Model switched to: Genisi ${model === 'flash' ? 'Flash ⚡' : 'Pro 💎'}`);
+}
+
+// تحميل النموذج المحفوظ
+function loadSavedModel() {
+    const saved = localStorage.getItem('genisi_model') || 'flash';
+    currentModel = saved;
+    
+    const icon = document.getElementById('model-icon');
+    const name = document.getElementById('model-name');
+    const options = document.querySelectorAll('.model-option');
+    
+    if (saved === 'flash') {
+        icon.className = 'fas fa-bolt';
+        name.textContent = 'Flash';
+    } else {
+        icon.className = 'fas fa-crown';
+        name.textContent = 'Pro';
+    }
+    
+    options.forEach(opt => {
+        opt.classList.remove('active');
+        if (opt.dataset.model === saved) {
+            opt.classList.add('active');
+        }
+    });
+}
 
 // Markdown renderer
 const renderer = new marked.Renderer();
@@ -658,7 +792,13 @@ async function sendMessage(){
     const response = await fetch('/chat', {
       method: 'POST',
       headers: {'Content-Type':'application/json'},
-      body: JSON.stringify({ user_id: userId, message: text, history: chat.history, files: binaryFiles }),
+      body: JSON.stringify({ 
+        user_id: userId, 
+        message: text, 
+        history: chat.history, 
+        files: binaryFiles,
+        model: currentModel // 🌟 إرسال النموذج المختار للباك-إند
+      }),
       signal: currentAbortController.signal
     });
 
@@ -681,12 +821,12 @@ async function sendMessage(){
           if (isImageRequest && !fullBotResponse.includes('<img')) {
               htmlToRender += '<div class="skeleton-img"><i class="fas fa-palette"></i> جاري التخيل والتصميم...</div>';
           }
-          botContentDiv.innerHTML = htmlToRender + '<span class="gemini-cursor"></span>';
+          botContentDiv.innerHTML = htmlToRender + '<span class="genisi-cursor"></span>';
       }
       scrollToBottom();
     }
 
-    const cursor = botContentDiv.querySelector('.gemini-cursor');
+    const cursor = botContentDiv.querySelector('.genisi-cursor');
     if (cursor) cursor.remove();
 
     if (fullBotResponse.includes('<div style="text-align:center;') && fullBotResponse.includes('<img')) {
@@ -791,6 +931,16 @@ function appendMemBadge(count, total){
 applyTheme(localStorage.getItem('genisi_theme')||'dark');
 document.getElementById('lang-select').value = currentLang;
 applyI18n();
+loadSavedModel(); // 🌟 تحميل النموذج المحفوظ
+
+// 🌟 إغلاق القائمة المنسدلة عند النقر خارجها
+document.addEventListener('click', function(event) {
+    const selector = document.querySelector('.model-selector');
+    const dropdown = document.getElementById('model-dropdown');
+    if (!selector.contains(event.target) && dropdown.classList.contains('show')) {
+        dropdown.classList.remove('show');
+    }
+});
 </script>
 </body>
 </html>