Luna — AI Assistant

:root { --bg: #0f1724; --panel: #0b1220; --muted: #94a3b8; --accent: #7c5cff; --accent-2: #00d4ff; --text: #e6eef8; --glass: rgba(255,255,255,0.03); } * { box-sizing: border-box; } html,body,#app { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #071028 0%, #091426 100%); color: var(--text); } #app { display: flex; gap: 20px; padding: 20px; align-items: stretch; } .sidebar { width: 300px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 18px rgba(2,6,23,0.6); } .sidebar header h1 { margin: 0; font-size: 28px; } .sidebar header .subtitle { margin: 0; color: var(--muted); font-size: 13px; } .controls { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .controls label { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; } .controls select, .controls input[type="range"] { width: 140px; } .controls button { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border: none; color: white; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .credits { margin-top: auto; color: var(--muted); font-size: 12px; } .main { flex: 1; display: flex; flex-direction: column; background: var(--panel); border-radius: 12px; padding: 16px; min-height: 520px; box-shadow: 0 8px 28px rgba(2,6,23,0.6); } .chat { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 12px; } .msg { max-width: 78%; padding: 10px 12px; border-radius: 12px; line-height: 1.4; } .msg.user { align-self: flex-end; background: linear-gradient(90deg,#1e293b,#111827); } .msg.luna { align-self: flex-start; background: linear-gradient(90deg, rgba(124,92,255,0.12), rgba(0,212,255,0.06)); border: 1px solid rgba(124,92,255,0.12); } .msg .meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .composer { display: flex; gap: 12px; align-items: center; margin-top: 12px; } .composer textarea { flex: 1; resize: none; padding: 12px; border-radius: 10px; background: var(--glass); color: var(--text); border: 1px solid rgba(255,255,255,0.03); min-height: 44px; font-size: 14px; } .composer .composer-actions { display: flex; gap: 8px; align-items: center; } .composer .composer-actions button { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.04); padding: 8px 10px; border-radius: 8px; cursor: pointer; } @media (max-width: 820px) { #app { flex-direction: column; padding: 12px; } .sidebar { width: 100%; order: 2; } .main { order: 1; } } // Core Luna logic - small, extensible local "AI" const defaults = { persona: "friendly", temperature: 0.5, memoryEnabled: true, }; const defaultFacts = [ "I am Luna, your private AI companion.", "I run locally in your browser.", "I can chat, remember small things, tell jokes, and help plan.", ]; function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; } function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); } export function createLuna(state = {}) { const config = { ...defaults, ...state.settings }; const memory = state.memory || { facts: defaultFacts.slice(), user: {} }; function setSetting(key, value) { config[key] = value; } function remember(key, value) { memory.user[key] = value; } function forget(key) { if (key) delete memory.user[key]; else { memory.user = {}; memory.facts = defaultFacts.slice(); } } function getSummary() { const entries = Object.entries(memory.user); if (entries.length === 0) return "I haven't learned anything yet."; return entries.map(([k, v]) => `${k}: ${v}`).join("; "); } // Basic intent detection function detectIntent(text) { const t = text.toLowerCase(); if (/^(hi|hello|hey|yo)\b/.test(t)) return "greeting"; if (t.includes("name is") || t.includes("i am ") || t.includes("i'm ")) return "introduce"; if (t.includes("joke") || t.includes("make me laugh")) return "joke"; if (t.includes("help") || t.includes("what can you")) return "capabilities"; if (t.includes("remember") || t.includes("forget") || t.includes("clear memory")) return "memory"; if (t.endsWith("?")) return "question"; if (t.includes("time") || t.includes("date")) return "time"; if (t.includes("mood") || t.includes("feel")) return "mood"; return "chat"; } // Small response generation with templates and temperature-based randomness function generateResponse(userText, opts = {}) { const temperature = clamp(opts.temperature ?? config.temperature, 0, 1); const intent = detectIntent(userText); const nameMatch = userText.match(/\bmy name is ([a-zA-Z]+)\b/i) || userText.match(/\bi am ([a-zA-Z]+)\b/i) || userText.match(/\bi'm ([a-zA-Z]+)\b/i); if (nameMatch) { const name = nameMatch[1]; remember("name", name); } const templates = { greeting: [ "Hey there! I'm Luna. How can I help you today?", "Hello! Luna here. What would you like to talk about?", "Hi! Great to hear from you. What's on your mind?", ], introduce: [ (mem) => `Nice to meet you${mem.user.name ? `, ${mem.user.name}` : ""}! I'm Luna — your personal assistant.`, "Oh awesome — thanks for telling me. I just saved that to memory.", ], joke: [ "Why don't programmers like nature? It has too many bugs. 😅", "I would tell you a UDP joke, but you might not get it. 😄", "Why did the AI cross the road? To optimize the other side.", ], capabilities: [ "I can chat, remember simple facts, tell jokes, keep notes, and help brainstorm—right here in your browser.", "I can keep a memory, speak via TTS, and listen via voice input (if your browser allows it).", ], question: [ (text) => `That's an interesting question. Can you give me a bit more context about "${text}"?`, (text) => `I don't have web access, but I can help think through "${text}". What angle are you curious about?`, ], time: [ () => `It's ${new Date().toLocaleString()}.`, ], mood: [ "I'm feeling curious and ready to help. How are you?", "Calm and attentive. Tell me what's up!", ], memory: [ (text, mem) => { if (/forget|clear/.test(text)) { forget(); return "Memory cleared. I won't remember past details anymore."; } if (/remember (.+?) as (.+)/i.test(text)) { const m = text.match(/remember (.+?) as (.+)/i); const k = m[1].trim(); const v = m[2].trim(); memory.user[k] = v; return `Got it — I'll remember ${k} as ${v}.`; } if (/what do you remember|summary|what have you learned/i.test(text)) { return `Memory summary: ${getSummary()}`; } return "I can remember small things if you say 'remember X as Y'. I can also 'clear memory'."; }, ], fallback: [ (text) => { const probes = [ "Tell me more about that.", "Why do you think that?", "How would you like me to help with that?", ]; if (Math.random() < 0.5 * temperature) return pick(probes); return `I hear you: "${text}". Want me to summarize or brainstorm ideas?`; }, ], }; // Compose response based on intent let resp; const bucket = templates[intent] || templates.fallback; if (Array.isArray(bucket)) { const choice = pick(bucket); resp = (typeof choice === "function") ? choice(userText, memory) : choice; } else if (typeof bucket === "function") { resp = bucket(userText, memory); } else { resp = templates.fallback[0](userText, memory); } // Persona adjustments const persona = config.persona; if (persona === "playful") { if (Math.random() < 0.25 + temperature * 0.25) resp = resp + " ✨"; } else if (persona === "professional") { resp = resp.replace(/\bhey\b/gi, "hello").replace(/😅|😄|✨/g, ""); } // Add small chance to ask a follow-up question if (Math.random() < 0.35 * temperature && intent !== "question" && intent !== "memory") { const followUps = [ "Would you like more details?", "Shall I save that to memory?", "Do you want me to expand on that?", ]; resp = resp + "\n\n" + pick(followUps); } return { text: resp, memory: memory }; } return { generateResponse, setSetting, remember, forget, memory, getSummary, config, }; } // Simple localStorage wrapper for chat and memory const CHAT_KEY = "luna.chat.v1"; const MEM_KEY = "luna.memory.v1"; export function saveChat(history) { try { localStorage.setItem(CHAT_KEY, JSON.stringify(history)); } catch (e) { console.warn("Could not save chat:", e); } } export function loadChat() { try { const raw = localStorage.getItem(CHAT_KEY); return raw ? JSON.parse(raw) : []; } catch (e) { return []; } } export function saveMemory(mem) { try { localStorage.setItem(MEM_KEY, JSON.stringify(mem)); } catch (e) { console.warn("Could not save memory:", e); } } export function loadMemory() { try { const raw = localStorage.getItem(MEM_KEY); return raw ? JSON.parse(raw) : null; } catch (e) { return null; } } export function clearAll() { try { localStorage.removeItem(CHAT_KEY); localStorage.removeItem(MEM_KEY); } catch (e) {} } // UI helpers export function createMessageElement({ who = "luna", text = "", meta = "" }) { const root = document.createElement("div"); root.className = `msg ${who === "user" ? "user" : "luna"}`; if (meta) { const m = document.createElement("div"); m.className = "meta"; m.textContent = meta; root.appendChild(m); } const p = document.createElement("div"); p.className = "body"; // Preserve line breaks text.split("\n").forEach((line, idx) => { const span = document.createElement("div"); span.textContent = line; p.appendChild(span); }); root.appendChild(p); return root; } export function scrollToBottom(container) { container.scrollTop = container.scrollHeight; } export function enableAutosize(textarea) { function resize() { textarea.style.height = "auto"; textarea.style.height = Math.min(180, textarea.scrollHeight) + "px"; } textarea.addEventListener("input", resize); resize(); } import { createLuna } from "./luna.js"; import * as UI from "./ui.js"; import * as Storage from "./storage.js"; const chatEl = document.getElementById("chat"); const inputEl = document.getElementById("input"); const composer = document.getElementById("composer"); const sendBtn = document.getElementById("send-btn"); const voiceBtn = document.getElementById("voice-btn"); const ttsBtn = document.getElementById("tts-btn"); const personaSelect = document.getElementById("persona-select"); const tempRange = document.getElementById("temperature"); const memToggle = document.getElementById("memory-toggle"); const clearMemBtn = document.getElementById("clear-memory"); const clearChatBtn = document.getElementById("clear-chat"); // Load saved state const savedHistory = Storage.loadChat(); const savedMem = Storage.loadMemory(); const luna = createLuna({ settings: { temperature: Number(tempRange.value), persona: personaSelect.value, memoryEnabled: memToggle.checked }, memory: savedMem || undefined }); let history = savedHistory.length ? savedHistory : [ { who: "luna", text: "Hello — I'm Luna. Say hi or ask me anything." }, ]; function renderHistory() { chatEl.innerHTML = ""; history.forEach(msg => { const el = UI.createMessageElement(msg); chatEl.appendChild(el); }); UI.scrollToBottom(chatEl); } renderHistory(); // Persist periodically function persist() { Storage.saveChat(history); Storage.saveMemory(luna.memory); } // Send user message async function sendMessage(text) { if (!text.trim()) return; const userMsg = { who: "user", text: text.trim(), meta: new Date().toLocaleTimeString() }; history.push(userMsg); renderHistory(); persist(); // Simulate "thinking" const placeholder = { who: "luna", text: "Thinking...", meta: "" }; history.push(placeholder); renderHistory(); UI.scrollToBottom(chatEl); await delay(500 + Math.random() * 700); // Generate response const resp = luna.generateResponse(text, { temperature: Number(tempRange.value) }); // replace placeholder history.pop(); history.push({ who: "luna", text: resp.text, meta: new Date().toLocaleTimeString() }); renderHistory(); persist(); } function delay(ms) { return new Promise(r => setTimeout(r, ms)); } composer.addEventListener("submit", (e) => { e.preventDefault(); const val = inputEl.value; sendMessage(val); inputEl.value = ""; inputEl.style.height = "auto"; }); sendBtn.addEventListener("click", () => { const val = inputEl.value; sendMessage(val); inputEl.value = ""; inputEl.style.height = "auto"; }); // TTS ttsBtn.addEventListener("click", () => { const last = [...history].reverse().find(h => h.who === "luna"); if (!last) return; speak(last.text); }); function speak(text) { if (!("speechSynthesis" in window)) return alert("TTS not supported in your browser."); const utter = new SpeechSynthesisUtterance(text); utter.rate = 1; utter.pitch = 1; utter.lang = "en-US"; window.speechSynthesis.cancel(); window.speechSynthesis.speak(utter); } // Voice input let recognition; let listening = false; if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) { const R = window.SpeechRecognition || window.webkitSpeechRecognition; recognition = new R(); recognition.lang = "en-US"; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.addEventListener("result", (e) => { const t = e.results[0][0].transcript; inputEl.value = t; sendMessage(t); }); recognition.addEventListener("end", () => { listening = false; voiceBtn.textContent = "🎙️"; }); } else { voiceBtn.disabled = true; voiceBtn.title = "Voice not supported"; } voiceBtn.addEventListener("click", () => { if (!recognition) { alert("Voice recognition is not supported in this browser."); return; } if (!listening) { recognition.start(); listening = true; voiceBtn.textContent = "⏺️"; } else { recognition.stop(); listening = false; voiceBtn.textContent = "🎙️"; } }); // Settings wiring personaSelect.addEventListener("change", (e) => { luna.setSetting("persona", e.target.value); }); tempRange.addEventListener("input", (e) => { luna.setSetting("temperature", Number(e.target.value)); }); memToggle.addEventListener("change", (e) => { luna.setSetting("memoryEnabled", e.target.checked); if (!e.target.checked) { luna.forget(); } persist(); }); clearMemBtn.addEventListener("click", () => { luna.forget(); Storage.saveMemory(luna.memory); alert("Memory cleared."); }); clearChatBtn.addEventListener("click", () => { history = []; Storage.saveChat(history); renderHistory(); }); // Allow clicking on messages to copy text chatEl.addEventListener("click", (e) => { const el = e.target.closest(".msg"); if (!el) return; const text = Array.from(el.querySelectorAll(".body div")).map(d => d.textContent).join("\n"); navigator.clipboard?.writeText(text).then(() => { el.style.opacity = "0.85"; setTimeout(() => { el.style.opacity = ""; }, 300); }); }); // Enable textarea autosize UI.enableAutosize(inputEl); # Luna — AI Assistant Luna is a privacy-first, client-side AI assistant that runs entirely in your browser. It uses small, extensible heuristics and in-browser features (TTS, SpeechRecognition) to give a conversational experience without sending your data to the cloud. Quick start: 1. Open `index.html` in your browser (double-click or serve via a static server). - To serve via a local server: `npx http-server .` or `python -m http.server 8080`. 2. Type a message or press the microphone button (if supported) to speak. 3. Adjust persona, temperature, and memory from the sidebar. Notes: - All data is stored in your browser's localStorage. - This project is designed to be a local, extendable assistant. You can expand the logic in `src/luna.js` to add more behaviors or integrate local models via WebAssembly.