Ndope21/neuronnest-navigator
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>BrainyByte Buddy - Your AI Learning Companion</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>12 <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>13 <style>14 .gradient-bg {15 background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);16 }17 .chat-bubble {18 border-radius: 1.25rem;19 position: relative;20 max-width: 80%;21 }22 .typing-indicator span {23 display: inline-block;24 width: 8px;25 height: 8px;26 border-radius: 50%;27 background-color: #4b5563;28 margin: 0 2px;29 animation: bounce 1.4s infinite ease-in-out;30 }31 .typing-indicator span:nth-child(2) {32 animation-delay: 0.2s;33 }34 .typing-indicator span:nth-child(3) {35 animation-delay: 0.4s;36 }37 .recording {38 animation: pulse 1.5s infinite;39 }40 @keyframes pulse {41 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }42 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }43 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }44 }45@keyframes bounce {46 0%, 80%, 100% { transform: translateY(0); }47 40% { transform: translateY(-10px); }48 }49 </style>50</head>51<body class="gradient-bg min-h-screen text-gray-100">52 <div id="vanta-globe" class="fixed inset-0 z-0"></div>53 <div class="relative z-10 container mx-auto px-4 py-8">54 <!-- Learning Progress Indicator -->55 <div id="learningProgress" class="fixed top-4 right-4 bg-gray-800 bg-opacity-70 text-xs px-3 py-2 rounded-lg hidden">56 <span id="progressText">Learning in progress...</span>57 </div>58<header class="flex flex-col items-center mb-8">59 <div class="flex items-center mb-4">60 <i data-feather="cpu" class="w-12 h-12 mr-3"></i>61 <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-blue-300">62 BrainyByte Buddy63 </h1>64 </div>65 <p class="text-lg text-center max-w-2xl">66 Your lightweight, fast AI companion for learning and experimentation. Powered by Mistral, LLaMA 3, and OpenHermes.67 </p>68 </header>69 70 <main class="max-w-4xl mx-auto">71 <div class="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 shadow-2xl mb-8">72 <h2 class="text-2xl font-semibold mb-4">AI Engine Selection</h2>73 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">74 <div class="bg-gray-700 bg-opacity-60 p-4 rounded-lg hover:bg-opacity-80 transition cursor-pointer">75 <div class="flex items-center mb-2">76 <i data-feather="zap" class="text-yellow-400 mr-2"></i>77 <h3 class="font-medium">Mistral/Mixtral</h3>78 </div>79 <p class="text-sm text-gray-300">Lightweight & fast for experiments</p>80 </div>81 <div class="bg-gray-700 bg-opacity-60 p-4 rounded-lg hover:bg-opacity-80 transition cursor-pointer">82 <div class="flex items-center mb-2">83 <i data-feather="shield" class="text-blue-400 mr-2"></i>84 <h3 class="font-medium">LLaMA 3</h3>85 </div>86 <p class="text-sm text-gray-300">Strong general purpose base</p>87 </div>88 <div class="bg-gray-700 bg-opacity-60 p-4 rounded-lg hover:bg-opacity-80 transition cursor-pointer">89 <div class="flex items-center mb-2">90 <i data-feather="message-square" class="text-purple-400 mr-2"></i>91 <h3 class="font-medium">OpenHermes</h3>92 </div>93 <p class="text-sm text-gray-300">Chatty assistant-style conversations</p>94 </div>95 <div class="bg-gray-700 bg-opacity-60 p-4 rounded-lg hover:bg-opacity-80 transition cursor-pointer" id="speechButton">96 <div class="flex items-center mb-2">97 <i data-feather="mic" class="text-green-400 mr-2"></i>98 <h3 class="font-medium">Speech Pipeline</h3>99 </div>100 <p class="text-sm text-gray-300">Voice input/output with Web Speech API</p>101 </div>102</div>103 </div>104 105 <div class="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 shadow-2xl">106 <h2 class="text-2xl font-semibold mb-4">Interactive Learning</h2>107 <div id="chatContainer" class="flex flex-col space-y-4 max-h-[400px] overflow-y-auto p-2">108 <div class="flex items-start space-x-3">109 <div class="bg-purple-500 rounded-full p-2">110 <i data-feather="cpu" class="w-4 h-4"></i>111 </div>112 <div class="bg-gray-700 p-4 rounded-lg flex-1">113 <p>Hello! I'm BrainyByte Buddy, your AI learning companion. I can help you learn about any topic, explain concepts, and even remember what we've discussed before. What would you like to learn about today?</p>114 </div>115 </div>116 </div>117 <form id="chatForm" class="mt-6 flex" onsubmit="processInput(); return false;">118 <input type="text" id="userInput" placeholder="Ask me anything or teach me something new..." 119 class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"120 autocomplete="off">121 <button type="submit" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg">122 <i data-feather="send" class="w-5 h-5"></i>123 </button>124 </form>125<div class="mt-4 flex items-center space-x-4">126 <div class="flex items-center">127 <label class="inline-flex items-center cursor-pointer">128 <input type="checkbox" id="webToggle" class="sr-only peer" checked>129 <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>130 <span class="ms-3 text-sm font-medium flex items-center">131 <i data-feather="globe" class="w-4 h-4 mr-1"></i> Web132 </span>133 </label>134 </div>135 <div class="flex items-center">136 <label class="inline-flex items-center cursor-pointer">137 <input type="checkbox" id="videoToggle" class="sr-only peer">138 <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>139 <span class="ms-3 text-sm font-medium flex items-center">140 <i data-feather="youtube" class="w-4 h-4 mr-1"></i> Video141 </span>142 </label>143 </div>144 <div class="flex items-center">145 <label class="inline-flex items-center cursor-pointer">146 <input type="checkbox" id="docToggle" class="sr-only peer">147 <div class="relative w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>148 <span class="ms-3 text-sm font-medium flex items-center">149 <i data-feather="file-text" class="w-4 h-4 mr-1"></i> Document150 </span>151 </label>152 </div>153 </div>154</div>155 </main>156 </div>157 158 <script>159 /* ---------- VANTA ---------- */160 VANTA.GLOBE({161 el: "#vanta-globe",162 mouseControls: true,163 touchControls: true,164 gyroControls: false,165 minHeight: 200.00,166 minWidth: 200.00,167 scale: 1.00,168 scaleMobile: 1.00,169 color: 0x3a86ff,170 backgroundColor: 0x000000171});172 });173 174 /* ---------- Helpers ---------- */175 function stripHTML(s){ const d=document.createElement('div'); d.innerHTML=s; return d.textContent||d.innerText||''; }176 function getKB(){ try{ return JSON.parse(localStorage.getItem('brainybyteKnowledge'))||{concepts:{},patterns:{},interactions:0,chatHistory:[]}; }catch{ return {concepts:{},patterns:{},interactions:0,chatHistory:[]}; } }177 function setKB(kb){ localStorage.setItem('brainybyteKnowledge', JSON.stringify(kb)); }178 179 /* Save chat history every 10s */180 setInterval(() => {181 const chatEls = document.querySelectorAll('#chatContainer > div');182 const chatHistory = Array.from(chatEls).map(el => {183 const isUser = el.querySelector('.bg-blue-500') !== null;184 const content = (el.querySelector('.bg-gray-700 p')?.textContent) || (el.querySelector('.chat-content')?.textContent) || '';185 return { role: isUser ? 'user' : 'ai', content };186 });187 const kb = getKB();188 kb.chatHistory = chatHistory.slice(-10);189 setKB(kb);190 }, 10000);191 192 feather.replace();193 194 /* ---------- Speech ---------- */195 const synth = window.speechSynthesis;196 let recognition = null, recoActive = false;197 const speechBtn = document.getElementById('speechButton');198 const hasReco = 'SpeechRecognition' in window || 'webkitSpeechRecognition' in window;199 200 if (!hasReco) {201 speechBtn.style.opacity = 0.5; speechBtn.style.pointerEvents = 'none';202 speechBtn.title = 'Voice input not supported in this browser';203 } else {204 speechBtn.addEventListener('click', () => {205 if (!recognition) {206 const Ctor = window.SpeechRecognition || window.webkitSpeechRecognition;207 recognition = new Ctor(); recognition.continuous = false; recognition.interimResults = false;208 recognition.onstart = () => { recoActive = true; speechBtn.classList.add('recording'); };209 recognition.onend = () => { recoActive = false; speechBtn.classList.remove('recording'); };210 recognition.onerror = (e) => console.error('Speech recognition error', e.error);211 recognition.onresult = (e) => {212 const transcript = e.results[0][0].transcript;213 document.getElementById('userInput').value = transcript;214 document.getElementById('chatForm').dispatchEvent(new Event('submit'));215 };216 }217 if (recoActive) recognition.stop(); else recognition.start();218 });219 }220 function speak(text){221 if (!('speechSynthesis' in window)) return;222 synth.cancel();223 const u = new SpeechSynthesisUtterance(stripHTML(text));224 u.rate = 0.95; u.pitch = 1.05; u.volume = 1;225 const choose = () => {226 const voices = synth.getVoices()||[];227 const v = voices.find(v=>v.name.includes('Google')||v.name.includes('Microsoft')) || voices.find(v=>v.lang?.startsWith('en'));228 if (v) u.voice = v; synth.speak(u);229 };230 if (synth.getVoices().length===0) synth.onvoiceschanged = choose; else choose();231 }232 /* ---------- Chat ---------- */233 async function processInput(){234 const inputEl = document.getElementById('userInput');235 const input = inputEl.value.trim(); if (!input) return;236 237 addMessage(input,'user'); inputEl.value=''; inputEl.focus(); showTypingIndicator();238 if (recognition && recoActive) recognition.stop();239 240 await new Promise(r=>setTimeout(r,600));241 let aiResponse = generateResponse(input);242 243 const webEnabled = document.getElementById('webToggle').checked;244 const videoEnabled = document.getElementById('videoToggle').checked;245 const docEnabled = document.getElementById('docToggle').checked;246 247 let links = "";248 if (webEnabled) links += `<a href="https://wikipedia.org/wiki/${encodeURIComponent(input.split(' ')[0])}" target="_blank" class="text-blue-300 hover:underline mr-2">Web</a>`;249 if (videoEnabled) links += `<a href="https://youtube.com/results?search_query=${encodeURIComponent(input)}" target="_blank" class="text-red-300 hover:underline mr-2">Video</a>`;250 if (docEnabled) links += `<a href="https://scholar.google.com/scholar?q=${encodeURIComponent(input)}" target="_blank" class="text-green-300 hover:underline">Research</a>`;251 if (links) aiResponse += `<div class="mt-3">Explore: ${links}</div>`;252 253 hideTypingIndicator(); addMessage(aiResponse,'ai'); speak(aiResponse);254 255 const kb = getKB(); kb.interactions = (kb.interactions||0)+1; setKB(kb);256 }257 258 function generateResponse(input){259 const lower = input.toLowerCase();260 if (/(^|\b)(hello|hi|hey)\b/.test(lower)) return "Hey! I'm your BrainyByte Buddy. What should we explore today?";261 if (lower.includes('help')) return "I can explain concepts, answer questions, suggest resources, and remember topics. What do you need?";262 if (lower.includes('thank')) return "Anytime. Want to dive into something else?";263 if (lower.includes('how are you')) return "Always ready to learn with you. What's next?";264 return `You asked about "${input}". Here's a starter overview and links above. Want me to go deeper or quiz you?`;265 }266 function addMessage(content, sender){267 const chat = document.getElementById('chatContainer');268 const div = document.createElement('div');269 div.className = `flex items-start space-x-3 ${sender==='user'?'justify-end':''}`;270 if (sender==='user') {271 div.innerHTML = `<div class="bg-blue-500 rounded-full p-2 order-2"><i data-feather="user" class="w-4 h-4"></i></div>272 <div class="bg-gray-700 p-4 rounded-lg flex-1 order-1 max-w-[80%]"><p>${content}</p></div>`;273 } else {274 div.innerHTML = `<div class="bg-purple-500 rounded-full p-2"><i data-feather="cpu" class="w-4 h-4"></i></div>275 <div class="bg-gray-700 p-4 rounded-lg flex-1 max-w-[80%]"><div class="chat-content">${content}</div></div>`;276 }277 chat.appendChild(div); feather.replace(); chat.scrollTop = chat.scrollHeight;278 }279 280 function showTypingIndicator(){281 const chat=document.getElementById('chatContainer');282 const div=document.createElement('div'); div.id='typingIndicator'; div.className='flex items-start space-x-3';283 div.innerHTML = `<div class="bg-purple-500 rounded-full p-2"><i data-feather="cpu" class="w-4 h-4"></i></div>284 <div class="bg-gray-700 p-4 rounded-lg flex-1 max-w-[80%]">285 <div class="typing-indicator flex space-x-1"><span></span><span></span><span></span></div>286 </div>`;287 chat.appendChild(div); chat.scrollTop = chat.scrollHeight; feather.replace();288 }289 function hideTypingIndicator(){ const el=document.getElementById('typingIndicator'); if (el) el.remove(); }290 document.addEventListener('DOMContentLoaded', () => {291 const kb = getKB();292 if (kb.interactions>0 && Array.isArray(kb.chatHistory)) kb.chatHistory.slice(-3).forEach(m=>addMessage(m.content,m.role));293 294 if ('speechSynthesis' in window) {295 speechSynthesis.onvoiceschanged = () => console.log('Voices:', speechSynthesis.getVoices());296 }297 298 const chatForm = document.getElementById('chatForm');299 const userInput = document.getElementById('userInput');300 chatForm.addEventListener('submit',(e)=>{e.preventDefault(); if(userInput.value.trim()) processInput();});301 userInput.addEventListener('keydown',(e)=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); if(userInput.value.trim()) processInput(); }});302 userInput.focus();303 304 // Background animation305 anime({ targets: '.gradient-bg',306 background:[307 'linear-gradient(135deg,#6e8efb 0%,#a777e3 100%)',308 'linear-gradient(135deg,#a777e3 0%,#6e8efb 100%)'309 ],310 duration:10000, direction:'alternate', loop:true, easing:'easeInOutQuad'311 });312 });313 314 // Optional diagnostics315 async function runSystemDiagnostics(){316 const kb=getKB();317 const checks={318 localStorage:!!window.localStorage,319 speechSynthesis:'speechSynthesis' in window,320 speechRecognition:hasReco,321 network:navigator.onLine,322 knowledgeBase:Object.keys(kb.concepts||{}).length>0323 };324 let report="🧠 System Diagnostics Report 🧠\n\n";325 report+=`• LocalStorage: ${checks.localStorage?'✅ OK':'❌ Not Available'}\n`;326 report+=`• Speech Synthesis: ${checks.speechSynthesis?'✅ OK':'❌ Not Available'}\n`;327 report+=`• Speech Recognition: ${checks.speechRecognition?'✅ OK':'❌ Not Available'}\n`;328 report+=`• Network: ${checks.network?'✅ Online':'❌ Offline'}\n`;329 report+=`• Knowledge Base: ${checks.knowledgeBase?'✅ Loaded':'❌ Empty'}\n`;330 return report;331 }332 function attemptSelfRepair(){ try{ localStorage.removeItem('brainybyteKnowledge'); location.reload(); return "Self-repair initiated."; } catch(e){ return `Failed to self-repair: ${e.message}`; } }333 </script>334</body>335</html>336