SM1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blank Slate Chatbot</title>
<style>
:root{color-scheme:dark;--bg:#10131a;--panel:#191e29;--panel2:#222a38;--text:#eef2f8;--muted:#aab4c5;--accent:#8ab4ff;--border:#343e50}
*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:20px;background:radial-gradient(circle at top,#1c2940,var(--bg) 55%);color:var(--text);font:16px/1.5 system-ui,sans-serif;display:grid;place-items:center}
.app{width:min(760px,100%);display:grid;gap:14px}header,.panel{background:rgba(25,30,41,.96);border:1px solid var(--border);border-radius:16px;padding:18px}
header h1{margin:0 0 4px;font-size:1.45rem}header p,.hint{margin:0;color:var(--muted)}.tag{display:inline-block;margin-top:10px;padding:3px 9px;border:1px solid var(--border);border-radius:999px;color:var(--accent);font-size:.82rem}
#chat{height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px;background:#111620;border:1px solid var(--border);border-radius:12px}
.message{max-width:88%;padding:10px 13px;border-radius:13px;white-space:pre-wrap;overflow-wrap:anywhere}.bot{align-self:flex-start;background:var(--panel2)}.user{align-self:flex-end;background:#29466f}
.controls{display:flex;gap:8px;margin-top:10px}input,button{font:inherit;border-radius:10px;border:1px solid var(--border)}input{background:#111620;color:var(--text);padding:11px 12px;min-width:0;width:100%}button{cursor:pointer;padding:10px 14px;background:#2d4f7e;color:white}button:hover{filter:brightness(1.12)}button.secondary{background:var(--panel2)}
.teach-grid{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}#notes{display:grid;gap:7px;margin-top:12px}.note{display:flex;align-items:start;justify-content:space-between;gap:10px;background:#111620;border:1px solid var(--border);border-radius:10px;padding:9px 11px}.note span{overflow-wrap:anywhere}.note button{padding:3px 8px;background:#49303a;flex-shrink:0}.footer{color:var(--muted);font-size:.85rem}
@media(max-width:520px){body{padding:10px}#chat{height:300px}.controls{flex-direction:column}.teach-grid{grid-template-columns:1fr}.message{max-width:95%}}
</style></head>
<body><main class="app">
<header><h1>Blank Slate</h1><p>A tiny starter chatbot. It begins with no built-in world knowledge and can use notes you teach it.</p><span class="tag">Local demo · No AI model connected</span></header>
<section class="panel" aria-label="Chat"><div id="chat" aria-live="polite"><div class="message bot">Hello! I'm a blank-slate chatbot. I don't know facts about the world. You can teach me notes below, and I'll try to use them when you ask about them.</div></div>
<form id="chatForm" class="controls"><input id="messageInput" placeholder="Write a message…" autocomplete="off" required><button type="submit">Send</button></form>
<p class="hint" style="margin-top:8px">Tip: teach a note like “My favorite game is Minecraft.” Then ask “What is my favorite game?”</p></section>
<section class="panel"><h2 style="margin:0;font-size:1.1rem">Teach a note</h2><p class="hint">Notes stay in this browser on this device. This demo doesn't send them anywhere.</p>
<form id="teachForm" class="teach-grid"><input id="noteInput" placeholder="Example: Solvania's capital is Kayjorn." required><button type="submit">Teach</button></form>
<div id="notes"></div><div class="controls"><button id="exportBtn" type="button" class="secondary">Export notes</button><button id="clearBtn" type="button" class="secondary">Clear all notes</button></div></section>
<p class="footer">This is a simple rule-based demo, not a language model. It can match notes and respond to a few basic phrases, but it cannot reason or learn language like ChatGPT.</p>
</main>
<script>
const chat=document.getElementById('chat'),chatForm=document.getElementById('chatForm'),messageInput=document.getElementById('messageInput'),teachForm=document.getElementById('teachForm'),noteInput=document.getElementById('noteInput'),notesBox=document.getElementById('notes'),STORAGE_KEY='blankSlateNotesV1';
let notes=[];try{notes=JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]');if(!Array.isArray(notes))notes=[]}catch{notes=[]}
function saveNotes(){localStorage.setItem(STORAGE_KEY,JSON.stringify(notes));renderNotes()}
function addMessage(text,who){const div=document.createElement('div');div.className='message '+who;div.textContent=text;chat.appendChild(div);chat.scrollTop=chat.scrollHeight}
function renderNotes(){notesBox.replaceChildren();if(!notes.length){const empty=document.createElement('p');empty.className='hint';empty.textContent='No notes yet.';notesBox.appendChild(empty);return}notes.forEach((note,index)=>{const row=document.createElement('div');row.className='note';const span=document.createElement('span');span.textContent=note;const del=document.createElement('button');del.type='button';del.textContent='Delete';del.setAttribute('aria-label','Delete note');del.addEventListener('click',()=>{notes.splice(index,1);saveNotes()});row.append(span,del);notesBox.appendChild(row)})}
function normalize(text){return text.toLowerCase().replace(/[^\p{L}\p{N}\s']/gu,' ').replace(/\s+/g,' ').trim()}
function replyTo(message){const q=normalize(message);
if(/^(hi|hello|hey|good morning|good evening|good night)\b/.test(q))return'Hello! I am still a blank slate, but I can use the notes you teach me.';
if(/\b(thank you|thanks)\b/.test(q))return"You're welcome!";
if(/\b(what do you know|what have i taught you|show my notes)\b/.test(q))return notes.length?'Here are the notes I have been taught:\n- '+notes.join('\n- '):"You haven't taught me any notes yet.";
if(/\b(who are you|what are you)\b/.test(q))return"I'm Blank Slate, a simple rule-based chatbot demo. I don't have general world knowledge or a connected AI model.";
const meaningfulWords=q.split(' ').filter(word=>word.length>3);
const matches=notes.filter(note=>{const n=normalize(note);return meaningfulWords.some(word=>n.includes(word))});
if(matches.length)return'I found this in the notes you taught me:\n- '+matches.join('\n- ');
const rememberMatch=message.match(/^(remember that|please remember|note that)\s+(.+)$/i);
if(rememberMatch){notes.push(rememberMatch[2].trim());saveNotes();return'I saved that note. You can see or delete it in the notes section.'}
return"I don't know the answer yet. I'm not connected to a world-knowledge database or AI model. You can teach me a note below, then ask about it."}
chatForm.addEventListener('submit',event=>{event.preventDefault();const message=messageInput.value.trim();if(!message)return;addMessage(message,'user');messageInput.value='';addMessage(replyTo(message),'bot');messageInput.focus()});
teachForm.addEventListener('submit',event=>{event.preventDefault();const note=noteInput.value.trim();if(!note)return;notes.push(note);saveNotes();noteInput.value='';addMessage('I learned a note: '+note,'bot')});
document.getElementById('clearBtn').addEventListener('click',()=>{if(confirm('Delete all saved notes from this browser? This cannot be undone.')){notes=[];saveNotes()}});
document.getElementById('exportBtn').addEventListener('click',()=>{const blob=new Blob([JSON.stringify(notes,null,2)],{type:'application/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='blank-slate-notes.json';a.click();URL.revokeObjectURL(url)});
renderNotes();
</script></body></html>