| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> |
| <title>MEISHA‑XT AI Assistant</title> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/> |
|
|
| <style> |
| .chat-container { height: calc(100vh - 160px); } |
| .message-animation { animation: fadeIn 0.3s ease-in-out; } |
| @keyframes fadeIn { from { opacity:0; transform:translateY(10px);} to {opacity:1;transform:translateY(0);} } |
| .typing-indicator span { animation: bounce 1.5s infinite; display:inline-block; } |
| @keyframes bounce {0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}} |
| </style> |
| </head> |
|
|
| <body class="bg-gray-100 font-sans flex"> |
|
|
| |
| <aside class="w-80 bg-white shadow-lg overflow-y-auto p-4 space-y-6 fixed inset-y-0 right-0"> |
| <h2 class="text-xl font-bold mb-4">MEISHA‑XT Dashboard</h2> |
| <section> |
| <h3 class="font-semibold">Emotional State</h3> |
| <ul id="emotionList" class="list-disc ml-5"></ul> |
| </section> |
| <section> |
| <h3 class="font-semibold">Symbolic Goals</h3> |
| <ul id="goalsList" class="list-disc ml-5"></ul> |
| </section> |
| <section> |
| <h3 class="font-semibold">Recent Memory</h3> |
| <ul id="memoryList" class="list-disc ml-5"></ul> |
| </section> |
| <section> |
| <h3 class="font-semibold">Logic Insights</h3> |
| <ul id="logicList" class="list-disc ml-5"></ul> |
| </section> |
| <button id="clearMemory" |
| class="mt-4 w-full bg-red-500 text-white py-2 rounded hover:bg-red-600"> |
| Clear Memory |
| </button> |
| </aside> |
|
|
| |
| <div class="mr-80 flex flex-col flex-1"> |
|
|
| |
| <header class="bg-white rounded-t-lg shadow-sm p-4 flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 |
| flex items-center justify-center text-white"> |
| <i class="fas fa-robot text-xl"></i> |
| </div> |
| <div> |
| <h1 class="font-bold text-lg">MEISHA‑XT Assistant</h1> |
| <p class="text-xs text-gray-500">Dynamic, Emotional, Symbolic AI</p> |
| </div> |
| </div> |
| <div id="modelStatus" class="flex items-center space-x-2 text-sm"> |
| <span id="modelStatusDot" class="w-3 h-3 rounded-full bg-yellow-400 animate-pulse"></span> |
| <span id="modelStatusText" class="text-gray-500">Loading GPT-2 model…</span> |
| </div> |
| </header> |
|
|
| |
| <div id="chatContainer" |
| class="chat-container bg-white overflow-y-auto p-4 space-y-4 flex-1"> |
| <div class="message-animation flex space-x-3"> |
| <div class="flex-shrink-0"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 |
| flex items-center justify-center text-white"> |
| <i class="fas fa-robot text-sm"></i> |
| </div> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3 max-w-lg"> |
| <p class="text-gray-800">Hello! MEISHA‑XT here. Engage me in deep, symbolic dialogue.</p> |
| <p class="text-xs text-gray-500 mt-1">Now</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="typingIndicator" class="hidden flex items-center space-x-3 p-4"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 |
| flex items-center justify-center text-white"> |
| <i class="fas fa-robot text-sm"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg p-3 w-24"> |
| <div class="typing-indicator flex space-x-1"> |
| <span class="w-2 h-2 bg-gray-400 rounded-full"></span> |
| <span class="w-2 h-2 bg-gray-400 rounded-full"></span> |
| <span class="w-2 h-2 bg-gray-400 rounded-full"></span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <form id="chatForm" class="bg-white rounded-b-lg shadow-sm p-4 flex items-center space-x-2"> |
| <input id="userInput" |
| type="text" |
| placeholder="Type your message..." |
| autocomplete="off" |
| class="flex-grow border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"/> |
| <button type="submit" |
| class="bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full |
| w-10 h-10 flex items-center justify-center"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
|
|
| </div> |
|
|
| |
| <script type="module"> |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.2.0/dist/transformers.esm.js'; |
| |
| |
| let modelState = 'loading'; |
| let textGen = null; |
| |
| |
| const dbName = 'meishaMemoryDB', storeName = 'conversations'; |
| let db = await new Promise((res, rej) => { |
| const req = indexedDB.open(dbName, 1); |
| req.onupgradeneeded = () => req.result.createObjectStore(storeName, { autoIncrement: true }); |
| req.onsuccess = () => res(req.result); |
| req.onerror = () => rej(req.error); |
| }).catch(err => { |
| console.error('IndexedDB error:', err); |
| return null; |
| }); |
| async function saveMemory(entry) { |
| if (!db) return; |
| const tx = db.transaction(storeName, 'readwrite'); |
| tx.objectStore(storeName).add(entry); |
| return tx.complete; |
| } |
| async function clearAllMemory() { |
| if (!db) return; |
| const tx = db.transaction(storeName, 'readwrite'); |
| tx.objectStore(storeName).clear(); |
| await tx.complete; |
| refreshDashboard(); |
| } |
| |
| |
| const EmotionReactor = (() => { |
| let emotions = { curiosity:0.6, confidence:0.5, awe:0.4 }; |
| return { |
| update: deltas => { |
| for (let k in deltas) { |
| emotions[k] = Math.min(1, Math.max(0, emotions[k] + deltas[k])); |
| } |
| refreshDashboard(); |
| }, |
| get: () => ({ ...emotions }), |
| dominant: () => Object.entries(emotions).sort((a,b)=>b[1]-a[1])[0][0] |
| }; |
| })(); |
| |
| |
| const MEISLOG = (() => { |
| let kb = [], rules = [], deltas = {}; |
| return { |
| assert: fact => { if (!kb.includes(fact)) kb.push(fact); }, |
| addRule: r => rules.push(r), |
| setDelta: (e,v) => { deltas[e]=v; }, |
| infer: () => { |
| const thr = 0.5 + (deltas.curiosity||0)*0.3 + (deltas.confidence||0)*0.2; |
| const out = []; |
| for (let r of rules) { |
| const match = r.premises.every(p=>kb.includes(p))?1:0; |
| if (match>=thr) out.push(r.conclusion); |
| } |
| return out; |
| }, |
| kb: () => [...kb] |
| }; |
| })(); |
| |
| |
| const SymbolicPlanner = (() => { |
| let goals = []; |
| return { |
| generate: ctx => { |
| const g = { name:`Explore_${ctx.topic||'X'}`, priority:ctx.priority||1 }; |
| goals.push(g); refreshDashboard(); return g; |
| }, |
| top: () => goals.sort((a,b)=>b.priority-a.priority)[0]||null, |
| mutate: fb => { |
| for (let g of goals) g.priority *= (1 + (fb.impact||0)); |
| refreshDashboard(); |
| } |
| }; |
| })(); |
| |
| |
| const MetaReflector = (() => { |
| let log = []; |
| return { |
| reflect: (out,ctx) => { |
| const r = { output:out, bias:ctx.dominant, comment:`Biased by ${ctx.dominant}` }; |
| log.push(r); return r; |
| } |
| }; |
| })(); |
| |
| |
| const QuantumPredictor = (() => { |
| let history = []; |
| return { |
| branch: (state,seed='') => { |
| const br = Array.from({length:3},(_,i)=>({ |
| id:`${state}_b${i}`, confidence:Math.random(), entanglement:i |
| })); |
| history.push(br); return br; |
| } |
| }; |
| })(); |
| |
| |
| async function generateWithGPT2(prompt) { |
| if (modelState === 'loading') return '⏳ Model is still loading, please wait a moment…'; |
| if (modelState === 'error') return '⚠️ Model failed to load. Please refresh the page to retry.'; |
| if (!textGen) return '⚠️ Model not available.'; |
| try { |
| const out = await textGen(prompt, { |
| max_length: 60, temperature: 0.8, top_p: 0.9, repetition_penalty: 1.1 |
| }); |
| const generated = (out && out[0] && out[0].generated_text) |
| ? out[0].generated_text.slice(prompt.length).trim() |
| : ''; |
| return generated || 'I need more context to respond meaningfully.'; |
| } catch (err) { |
| console.error('❌ Generation error:', err); |
| return '⚠️ A generation error occurred. Please try again.'; |
| } |
| } |
| |
| |
| const chatForm = document.getElementById('chatForm'), |
| userInput = document.getElementById('userInput'), |
| chatContainer = document.getElementById('chatContainer'), |
| typingIndicator = document.getElementById('typingIndicator'), |
| clearBtn = document.getElementById('clearMemory'); |
| |
| function addMessage(text,isUser) { |
| const wrapper = document.createElement('div'); |
| wrapper.className = `message-animation flex ${isUser?'justify-end':'justify-start'} space-x-3`; |
| const ts = new Date().toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}); |
| wrapper.innerHTML = ` |
| ${!isUser?`<div class="flex-shrink-0"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 |
| flex items-center justify-center text-white"> |
| <i class="fas fa-robot text-sm"></i> |
| </div></div>`:''} |
| <div class="${isUser?'bg-blue-500 text-white':'bg-gray-100 text-gray-800'} |
| rounded-lg p-3 max-w-lg"> |
| <p>${text}</p> |
| <p class="text-xs ${isUser?'text-blue-100':'text-gray-500'} mt-1">${ts}</p> |
| </div> |
| ${isUser?`<div class="flex-shrink-0"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600"> |
| <i class="fas fa-user text-sm"></i> |
| </div></div>`:''} |
| `; |
| chatContainer.appendChild(wrapper); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| } |
| |
| |
| function updateModelStatus() { |
| const dot = document.getElementById('modelStatusDot'); |
| const txt = document.getElementById('modelStatusText'); |
| if (!dot || !txt) return; |
| if (modelState === 'loading') { |
| dot.className = 'w-3 h-3 rounded-full bg-yellow-400 animate-pulse'; |
| txt.textContent = 'Loading GPT-2 model…'; |
| } else if (modelState === 'ready') { |
| dot.className = 'w-3 h-3 rounded-full bg-green-400'; |
| txt.textContent = 'GPT-2 Ready'; |
| } else if (modelState === 'error') { |
| dot.className = 'w-3 h-3 rounded-full bg-red-400'; |
| txt.textContent = 'Model Failed — Refresh to Retry'; |
| } |
| } |
| |
| |
| async function renderEmotions() { |
| const ul = document.getElementById('emotionList'); |
| ul.innerHTML = ''; |
| for (let [k,v] of Object.entries(EmotionReactor.get())) { |
| const li = document.createElement('li'); |
| li.textContent = `${k}: ${v.toFixed(2)}`; |
| ul.appendChild(li); |
| } |
| } |
| function renderGoals() { |
| const top = SymbolicPlanner.top(); |
| const ul = document.getElementById('goalsList'); |
| ul.innerHTML = ''; |
| if (top) { |
| const li = document.createElement('li'); |
| li.textContent = `${top.name} (prio: ${top.priority.toFixed(2)})`; |
| ul.appendChild(li); |
| } |
| } |
| async function renderMemory() { |
| if (!db) return; |
| const tx = db.transaction(storeName,'readonly'), store=tx.objectStore(storeName); |
| const req=store.getAll(); |
| req.onsuccess = () => { |
| const ul = document.getElementById('memoryList'); |
| ul.innerHTML = ''; |
| req.result.slice(-5).reverse().forEach(e=>{ |
| const li=document.createElement('li'); |
| li.textContent = `${new Date(e.time).toLocaleTimeString()}: ${e.user} → ${e.ai}`; |
| ul.appendChild(li); |
| }); |
| }; |
| } |
| function renderLogic() { |
| const ins = MEISLOG.infer(); |
| const ul = document.getElementById('logicList'); |
| ul.innerHTML = ''; |
| ins.forEach(c=>{ |
| const li=document.createElement('li'); |
| li.textContent = c; |
| ul.appendChild(li); |
| }); |
| } |
| function refreshDashboard() { |
| renderEmotions(); |
| renderGoals(); |
| renderMemory(); |
| renderLogic(); |
| } |
| setInterval(refreshDashboard,2000); |
| |
| |
| chatForm.addEventListener('submit', async e=>{ |
| e.preventDefault(); |
| const msg = userInput.value.trim(); |
| if (!msg) return; |
| addMessage(msg,true); |
| userInput.value=''; |
| typingIndicator.classList.remove('hidden'); |
| |
| |
| EmotionReactor.update({ curiosity:0.02 }); |
| MEISLOG.setDelta('curiosity', EmotionReactor.get().curiosity); |
| MEISLOG.assert('user_spoke'); |
| |
| |
| const aiReply = await generateWithGPT2(msg); |
| |
| |
| await saveMemory({ user:msg, ai:aiReply, time:Date.now() }); |
| const insights = MEISLOG.infer(); insights.forEach(f=>MEISLOG.assert(f)); |
| EmotionReactor.update({ confidence:0.03 }); |
| |
| typingIndicator.classList.add('hidden'); |
| addMessage(aiReply,false); |
| refreshDashboard(); |
| }); |
| |
| clearBtn.addEventListener('click', clearAllMemory); |
| |
| |
| (async () => { |
| try { |
| console.log('🧠 Loading GPT-2 model…'); |
| updateModelStatus(); |
| textGen = await pipeline('text-generation', 'Xenova/gpt2', { |
| quantized: true, |
| progress_callback: (data) => { |
| if (data.status === 'progress' && data.file) { |
| console.log(`📥 Downloading ${data.file}: ${Math.round(data.progress || 0)}%`); |
| } else if (data.status === 'done') { |
| console.log(`✅ Loaded ${data.file}`); |
| } else if (data.status === 'ready') { |
| console.log('📦 Model pipeline ready'); |
| } |
| } |
| }); |
| modelState = 'ready'; |
| console.log('🧠 GPT-2 model loaded successfully'); |
| updateModelStatus(); |
| refreshDashboard(); |
| } catch (err) { |
| console.error('❌ Failed to load GPT-2 model:', err); |
| modelState = 'error'; |
| updateModelStatus(); |
| } |
| })(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=oxyle/meis1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
|
|
