Spaces:

nixaut-codelabs
/

neural-nexus-ai

Running

App Files Files Community

nixaut-codelabs commited on Nov 17

Commit

a986b42

verified ·

1 Parent(s): 999ee93

footer en sağda şuanda aşağıda değil. Footerı direkt kaldır hatta chat sitesinde gerek yok. Site adı Nixaut Copilot ayrıca. Model seçme yeri de olsun - modeller "Max", "Turbo", "Lite" ve "Deep Research" olacak. Model seçme için özel dropdown kodla, hazır html dropdown tasarımı berbat

Browse files

Files changed (4) hide show

components/header.js +2 -2
index.html +53 -15
script.js +91 -9
style.css +30 -1

components/header.js CHANGED Viewed

@@ -108,9 +108,9 @@ class CustomHeader extends HTMLElement {
                         </svg>
                     </div>
                     <div class="logo-text text-white">
-                        Neural <span>Nexus</span> AI
                     </div>
-                </div>
                 <div class="nav-actions">
                     <button onclick="toggleTheme()" class="icon-btn" data-tooltip="Toggle theme">

                         </svg>
                     </div>
                     <div class="logo-text text-white">
+                        Nixaut <span>Copilot</span>
                     </div>
+</div>
                 <div class="nav-actions">
                     <button onclick="toggleTheme()" class="icon-btn" data-tooltip="Toggle theme">

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Neural Nexus AI - Futuristic Chat Platform</title>
-    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -150,9 +150,57 @@
                 </div>
             </div>
         </main>
         <!-- Right Sidebar -->
         <aside class="w-80 bg-zinc-900/50 backdrop-blur-xl border-l border-zinc-800 p-6 space-y-6">
             <!-- AI Status -->
             <div class="bg-zinc-800/50 rounded-xl p-4 glow">
                 <h3 class="font-semibold text-white mb-3 flex items-center">
@@ -160,10 +208,6 @@
                     System Status
                 </h3>
                 <div class="space-y-2">
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm text-zinc-400">Model</span>
-                        <span class="text-sm text-white font-medium">GPT-4 Turbo</span>
-                    </div>
                     <div class="flex justify-between items-center">
                         <span class="text-sm text-zinc-400">Response Time</span>
                         <span class="text-sm text-green-400 font-medium">~0.8s</span>
@@ -174,8 +218,7 @@
                     </div>
                 </div>
             </div>
-            <!-- AI Capabilities -->
             <div>
                 <h3 class="font-semibold text-white mb-3 flex items-center">
                     <i data-feather="zap" class="w-4 h-4 mr-2"></i>
@@ -233,14 +276,9 @@
                 </div>
             </div>
         </aside>
-    <div class="flex-1">
-        <!-- Footer -->
-        <custom-footer></custom-footer>
-    </div>
 <script src="components/header.js"></script>
     <script src="components/sidebar.js"></script>
-    <script src="components/footer.js"></script>
-    <script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nixaut Copilot - Advanced AI Assistant</title>
+<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
                 </div>
             </div>
         </main>
         <!-- Right Sidebar -->
         <aside class="w-80 bg-zinc-900/50 backdrop-blur-xl border-l border-zinc-800 p-6 space-y-6">
+            <!-- Model Selection -->
+            <div class="bg-zinc-800/50 rounded-xl p-4 glow">
+                <h3 class="font-semibold text-white mb-3 flex items-center">
+                    <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
+                    Model Selection
+                </h3>
+                <div id="modelDropdown" class="relative">
+                    <button onclick="toggleModelDropdown()" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-4 py-3 text-left text-white flex items-center justify-between hover:border-zinc-600 transition-all duration-200">
+                        <span id="selectedModel" class="flex items-center">
+                            <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
+                            Max
+                        </span>
+                        <svg class="w-5 h-5 text-zinc-400 transition-transform" id="modelDropdownArrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M6 9l6 6 6-6"/>
+                        </svg>
+                    </button>
+                    <div id="modelDropdownMenu" class="hidden absolute top-full left-0 right-0 mt-2 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl z-50">
+                        <div onclick="selectModel('Max')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center">
+                            <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
+                            <div class="flex-1">
+                                <div class="font-medium">Max</div>
+                                <div class="text-xs text-zinc-400">Most capable, best quality</div>
+                            </div>
+                        </div>
+                        <div onclick="selectModel('Turbo')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center">
+                            <div class="w-2 h-2 bg-blue-400 rounded-full mr-2"></div>
+                            <div class="flex-1">
+                                <div class="font-medium">Turbo</div>
+                                <div class="text-xs text-zinc-400">Fast responses, good quality</div>
+                            </div>
+                        </div>
+                        <div onclick="selectModel('Lite')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center">
+                            <div class="w-2 h-2 bg-yellow-400 rounded-full mr-2"></div>
+                            <div class="flex-1">
+                                <div class="font-medium">Lite</div>
+                                <div class="text-xs text-zinc-400">Quick tasks, minimal cost</div>
+                            </div>
+                        </div>
+                        <div onclick="selectModel('Deep Research')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center border-t border-zinc-700">
+                            <div class="w-2 h-2 bg-purple-400 rounded-full mr-2"></div>
+                            <div class="flex-1">
+                                <div class="font-medium">Deep Research</div>
+                                <div class="text-xs text-zinc-400">Advanced analysis & insights</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <!-- AI Status -->
             <div class="bg-zinc-800/50 rounded-xl p-4 glow">
                 <h3 class="font-semibold text-white mb-3 flex items-center">
                     System Status
                 </h3>
                 <div class="space-y-2">
                     <div class="flex justify-between items-center">
                         <span class="text-sm text-zinc-400">Response Time</span>
                         <span class="text-sm text-green-400 font-medium">~0.8s</span>
                     </div>
                 </div>
             </div>
+<!-- AI Capabilities -->
             <div>
                 <h3 class="font-semibold text-white mb-3 flex items-center">
                     <i data-feather="zap" class="w-4 h-4 mr-2"></i>
                 </div>
             </div>
         </aside>
 <script src="components/header.js"></script>
     <script src="components/sidebar.js"></script>
+<script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

script.js CHANGED Viewed

@@ -1,6 +1,7 @@
 // Global Variables
 let chatHistory = [];
- let isCompactMode = false;
  let isConnected = true;
 // Initialize
@@ -127,19 +128,100 @@ function addMessage(content, sender) {
     // Update token count
     updateTokenCount();
 }
 function generateAIResponse(userMessage) {
-    const responses = [
-        "I understand you're asking about: \"" + userMessage + "\". Let me help you with that. Based on my analysis, this involves several key components that we should consider carefully.",
-        "That's an interesting question! Here's my take on it: " + userMessage + " deserves attention because it touches on important aspects of modern technology and its applications.",
-        "Great question! " + userMessage + " is a topic I can elaborate on. From my perspective, there are multiple approaches we can take to understand this better.",
-        "I appreciate you bringing this up. Regarding " + userMessage + ", I think we should explore the underlying principles and practical implications.",
-        "This is a fascinating topic! " + userMessage + " connects to broader concepts in technology and innovation. Let me share some insights that might help."
-    ];
     return responses[Math.floor(Math.random() * responses.length)];
 }
 function handleKeyPress(event) {
     if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();

 // Global Variables
 let chatHistory = [];
+let currentModel = 'Max';
+let isCompactMode = false;
  let isConnected = true;
 // Initialize
     // Update token count
     updateTokenCount();
 }
 function generateAIResponse(userMessage) {
+    const modelResponses = {
+        'Max': [
+            "I understand you're asking about: \"" + userMessage + "\". Let me help you with that. Based on my analysis, this involves several key components that we should consider carefully.",
+            "That's an interesting question! Here's my comprehensive take on it: " + userMessage + " deserves attention because it touches on important aspects of modern technology and its applications.",
+            "Great question! " + userMessage + " is a topic I can elaborate on in depth. From my perspective with the Max model, there are multiple approaches and nuances we should explore.",
+            "I appreciate you bringing this up. Regarding " + userMessage + ", I think we should explore the underlying principles and practical implications thoroughly.",
+            "This is a fascinating topic! " + userMessage + " connects to broader concepts in technology and innovation. Let me share detailed insights that might help."
+        ],
+        'Turbo': [
+            "Quick analysis on: \"" + userMessage + "\" - Here's what I think: It involves key components worth looking at.",
+            "Regarding " + userMessage + " - That's an interesting point worth discussing. Let me break it down for you.",
+            "Got it! " + userMessage + " - I can help with that. Here are the main approaches to consider.",
+            "About " + userMessage + " - Let me give you a clear perspective on this topic.",
+            "Interesting question about " + userMessage + "! Here are some quick insights for you."
+        ],
+        'Lite': [
+            "About: \"" + userMessage + "\" - Here's a brief overview for you.",
+            "Regarding " + userMessage + " - Here are the key points to consider.",
+            "Quick take on " + userMessage + " - Here's what you need to know.",
+            "Brief analysis: " + userMessage + " - Key insights below.",
+            "Quick reply about " + userMessage + " - Here are the essentials."
+        ],
+        'Deep Research': [
+            "Let me conduct a deep analysis of: \"" + userMessage + "\". This query warrants comprehensive examination from multiple theoretical and practical frameworks. Based on extensive knowledge synthesis, we can identify several critical dimensions: historical context, current state-of-the-art approaches, potential future developments, and cross-disciplinary implications. The underlying mechanisms deserve careful scrutiny as they relate to broader patterns in technology evolution and cognitive science principles.",
+            "Your inquiry about " + userMessage + " represents a sophisticated topic that benefits from deep research methodology. Drawing upon interdisciplinary knowledge domains including computer science, cognitive psychology, and systems theory, I can provide a multifaceted analysis. This exploration should consider not only surface-level implications but also second and third-order effects on ecosystem dynamics, user behavior patterns, and long-term sustainability considerations.",
+            "Excellent research question regarding " + userMessage + ". To properly address this, we must examine it through multiple analytical lenses including technical feasibility, economic viability, social impact assessment, and ethical considerations. The complexity of this domain suggests we should also investigate precedent cases, failure modes, success patterns, and emerging trends that might influence future trajectories."
+        ]
+    };
+    const responses = modelResponses[currentModel] || modelResponses['Max'];
     return responses[Math.floor(Math.random() * responses.length)];
 }
+function toggleModelDropdown() {
+    const menu = document.getElementById('modelDropdownMenu');
+    const arrow = document.getElementById('modelDropdownArrow');
+    if (menu.classList.contains('hidden')) {
+        menu.classList.remove('hidden');
+        arrow.style.transform = 'rotate(180deg)';
+    } else {
+        menu.classList.add('hidden');
+        arrow.style.transform = 'rotate(0deg)';
+    }
+}
+function selectModel(model) {
+    currentModel = model;
+    const selected = document.getElementById('selectedModel');
+    const model = {
+        'Max': { color: 'green' },
+        'Turbo': { color: 'blue' },
+        'Lite': { color: 'yellow' },
+        'Deep Research': { color: 'purple' }
+    };
+    selected.innerHTML = `
+        <div class="w-2 h-2 bg-${modelConfig[model].color}-400 rounded-full mr-2"></div>
+        ${model}
+    `;
+    // Close dropdown
+    document.getElementById('modelDropdownMenu').classList.add('hidden');
+    document.getElementById('modelDropdownArrow').style.transform = 'rotate(0deg)';
+    // Update response time based on model
+    updateModelStatus(model);
+}
+function updateModelStatus(model) {
+    const responseTimes = {
+        'Max': '~1.2s',
+        'Turbo': '~0.8s',
+        'Lite': '~0.5s',
+        'Deep Research': '~2.1s'
+    };
+    const responseElements = document.querySelectorAll('.text-green-400');
+    responseElements.forEach(el => {
+        if (el.textContent.includes('~')) {
+            el.textContent = responseTimes[model];
+        }
+    });
+}
+// Close dropdown when clicking outside
+document.addEventListener('click', function(event) {
+    const dropdown = document.getElementById('modelDropdown');
+    if (!dropdown.contains(event.target)) {
+        document.getElementById('modelDropdownMenu').classList.add('hidden');
+        document.getElementById('modelDropdownArrow').style.transform = 'rotate(0deg)';
+    }
+});
 function handleKeyPress(event) {
     if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();

style.css CHANGED Viewed

@@ -104,7 +104,6 @@ body {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 }
 /* Utility Classes */
 .text-shadow {
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
@@ -115,6 +114,36 @@ body {
                 0 0 20px rgba(255, 255, 255, 0.05);
 }
 /* Mobile Responsive */
 @media (max-width: 768px) {
     .sidebar-mobile {

     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 }
 /* Utility Classes */
 .text-shadow {
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
                 0 0 20px rgba(255, 255, 255, 0.05);
 }
+/* Model Dropdown Styles */
+#modelDropdownMenu {
+    max-height: 300px;
+    overflow-y: auto;
+}
+#modelDropdownMenu::-webkit-scrollbar {
+    width: 4px;
+}
+#modelDropdownMenu::-webkit-scrollbar-track {
+    background: transparent;
+}
+#modelDropdownMenu::-webkit-scrollbar-thumb {
+    background: #525252;
+    border-radius: 2px;
+}
+.model-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+}
+.model-dot.green { background: #4ade80; }
+.model-dot.blue { background: #60a5fa; }
+.model-dot.yellow { background: #facc15; }
+.model-dot.purple { background: #c084fc; }
 /* Mobile Responsive */
 @media (max-width: 768px) {
     .sidebar-mobile {