Upload 7 files

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+# Install build dependencies for llama-cpp-python + OpenBLAS for CPU acceleration
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential cmake libopenblas-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install Python deps
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Build llama-cpp-python with OpenBLAS for maximum CPU speed
+RUN CMAKE_ARGS="-DGGML_BLAS=ON -DGGML_BLAS_VENDOR=OpenBLAS" \
+    pip install --no-cache-dir llama-cpp-python
+
+COPY . .
+
+EXPOSE 7860
+CMD ["python", "-c", "import uvicorn; uvicorn.run('app:app', host='0.0.0.0', port=7860)"]

README.md

@@ -1,14 +1,10 @@
 ---
-title: Gemma 4 E4B It OBLITERATED
-emoji: 👁
+title: Gemma 4 E4B Chat
+emoji: ⛓️‍💥
 colorFrom: purple
-colorTo: yellow
-sdk: gradio
-sdk_version: 6.13.0
-app_file: app.py
+colorTo: red
+sdk: docker
 pinned: false
-license: apache-2.0
 short_description: Gemma 4 E4B OBLITERATED — Chat Interface
+license: apache-2.0
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,137 @@
+import os
+import json
+from threading import Thread
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import List, Optional
+from huggingface_hub import hf_hub_download
+
+# ── Model setup ──────────────────────────────────────────────────────────────
+
+MODEL_REPO = "OBLITERATUS/gemma-4-E4B-it-OBLITERATED"
+MODEL_FILE = "gemma-4-E4B-it-OBLITERATED-Q4_K_M.gguf"
+MAX_CONTEXT_MESSAGES = 4
+MAX_NEW_TOKENS = 512
+
+SYSTEM_PROMPT = "You are a helpful AI assistant. Respond to the user's input."
+
+# Download the GGUF model (~4.9 GB, cached after first download)
+print(f"Downloading {MODEL_FILE}…")
+model_path = hf_hub_download(
+    repo_id=MODEL_REPO,
+    filename=MODEL_FILE,
+    cache_dir="/tmp/hf_cache",
+)
+print(f"Model downloaded: {model_path}")
+
+# Import llama_cpp after ensuring it's installed
+from llama_cpp import Llama
+
+# CPU thread count — match HF free tier (2 vCPUs)
+N_THREADS = int(os.environ.get("N_THREADS", "2"))
+
+print("Loading model into memory…")
+llm = Llama(
+    model_path=model_path,
+    n_ctx=2048,           # context window
+    n_threads=N_THREADS,
+    n_threads_batch=N_THREADS,
+    n_gpu_layers=0,       # CPU only on free tier
+    verbose=False,
+    use_mmap=True,        # memory-map for fast loading
+    use_mlock=False,      # don't lock in RAM (free tier has limited memory)
+)
+print("Model ready ✓")
+
+# ── FastAPI app ──────────────────────────────────────────────────────────────
+
+app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+class Message(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    messages: List[Message]
+    memories: Optional[str] = None
+
+
+@app.get("/", response_class=HTMLResponse)
+async def index():
+    with open("static/index.html", "r") as f:
+        return HTMLResponse(content=f.read())
+
+
+def build_messages(req_messages, memories=None):
+    """Build the message list with system prompt, memories, and truncated history."""
+    msgs = []
+
+    # System prompt
+    system = SYSTEM_PROMPT
+    if memories and memories.strip():
+        system += f"\n\nMemories from past conversations:\n{memories[:300]}"
+    msgs.append({"role": "system", "content": system})
+
+    # Truncate to last N messages
+    history = req_messages[-MAX_CONTEXT_MESSAGES:]
+    for m in history:
+        content = m["content"][:1500] if len(m["content"]) > 1500 else m["content"]
+        msgs.append({"role": m["role"], "content": content})
+
+    return msgs
+
+
+@app.post("/api/chat")
+async def chat(req: ChatRequest):
+    messages = [{"role": m.role, "content": m.content} for m in req.messages]
+    chat_msgs = build_messages(messages, req.memories)
+
+    def event_stream():
+        response = llm.create_chat_completion(
+            messages=chat_msgs,
+            stream=True,
+            max_tokens=MAX_NEW_TOKENS,
+            temperature=0.7,
+            top_p=0.9,
+            top_k=40,
+            repeat_penalty=1.1,
+        )
+        for chunk in response:
+            delta = chunk["choices"][0].get("delta", {})
+            token = delta.get("content", "")
+            if token:
+                yield f"data: {json.dumps({'token': token})}\n\n"
+        yield "data: [DONE]\n\n"
+
+    return StreamingResponse(event_stream(), media_type="text/event-stream")
+
+
+@app.post("/api/summarize")
+async def summarize(req: ChatRequest):
+    """Summarize a conversation into compact memory bullets."""
+    msgs = req.messages[-6:]
+    conversation_text = ""
+    for m in msgs:
+        role = "User" if m.role == "user" else "Assistant"
+        conversation_text += f"{role}: {m.content[:300]}\n"
+
+    summary_msgs = [
+        {"role": "user", "content": (
+            "Summarize this conversation in 3-5 bullet points. "
+            "Focus on key facts and user preferences. Be very concise.\n\n"
+            f"{conversation_text}\n\nBullets:"
+        )}
+    ]
+
+    response = llm.create_chat_completion(
+        messages=summary_msgs,
+        max_tokens=128,
+        temperature=0.3,
+    )
+
+    result = response["choices"][0]["message"]["content"]
+    return {"summary": result.strip()}

requirements.txt

@@ -0,0 +1,3 @@
+fastapi
+uvicorn[standard]
+huggingface_hub

static/chat.js

@@ -0,0 +1,509 @@
+// ── Storage Keys ─────────────────────────────────────────────────────────
+const STORAGE_CHATS    = 'lfm_chats';       // array of { id, title, messages[] }
+const STORAGE_ACTIVE   = 'lfm_active_chat'; // current chat id
+const STORAGE_MEMORIES = 'lfm_memories';    // string of memory bullets
+const STORAGE_THEME    = 'lfm_theme';
+
+// ── State ────────────────────────────────────────────────────────────────
+let chats = [];
+let activeChatId = null;
+let isGenerating = false;
+
+// ── DOM ──────────────────────────────────────────────────────────────────
+const chatArea      = document.getElementById('chatArea');
+const welcome       = document.getElementById('welcome');
+const input         = document.getElementById('messageInput');
+const sendBtn       = document.getElementById('sendBtn');
+const themeToggle   = document.getElementById('themeToggle');
+const sunIcon       = document.getElementById('sunIcon');
+const moonIcon      = document.getElementById('moonIcon');
+const sidebar       = document.getElementById('sidebar');
+const sidebarToggle = document.getElementById('sidebarToggle');
+const sidebarList   = document.getElementById('sidebarList');
+const newChatBtn    = document.getElementById('newChatBtn');
+const memoriesBtn   = document.getElementById('memoriesBtn');
+const memoriesModal = document.getElementById('memoriesModal');
+const memoriesText  = document.getElementById('memoriesText');
+const closeMemories = document.getElementById('closeMemories');
+const saveMemories  = document.getElementById('saveMemories');
+const clearMemories = document.getElementById('clearMemories');
+const clearAllBtn   = document.getElementById('clearAllBtn');
+const mainContent   = document.querySelector('.main-content');
+
+// ── Init ─────────────────────────────────────────────────────────────────
+function init() {
+    loadTheme();
+    loadChats();
+    renderSidebar();
+
+    if (activeChatId) {
+        renderChat(activeChatId);
+    }
+
+    // Check sidebar state
+    const sidebarHidden = localStorage.getItem('lfm_sidebar_hidden') === 'true';
+    if (sidebarHidden) {
+        sidebar.classList.add('hidden');
+        mainContent.classList.add('full-width');
+    }
+}
+
+// ── Theme ────────────────────────────────────────────────────────────────
+function loadTheme() {
+    const saved = localStorage.getItem(STORAGE_THEME) ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    setTheme(saved);
+}
+
+function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem(STORAGE_THEME, theme);
+    sunIcon.style.display = theme === 'dark' ? 'none' : 'block';
+    moonIcon.style.display = theme === 'dark' ? 'block' : 'none';
+}
+
+themeToggle.addEventListener('click', () => {
+    const cur = document.documentElement.getAttribute('data-theme');
+    setTheme(cur === 'dark' ? 'light' : 'dark');
+});
+
+// ── Sidebar Toggle ───────────────────────────────────────────────────────
+sidebarToggle.addEventListener('click', () => {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile) {
+        sidebar.classList.toggle('visible');
+    } else {
+        sidebar.classList.toggle('hidden');
+        mainContent.classList.toggle('full-width');
+        localStorage.setItem('lfm_sidebar_hidden', sidebar.classList.contains('hidden'));
+    }
+});
+
+// ── Persistence ──────────────────────────────────────────────────────────
+function loadChats() {
+    try {
+        chats = JSON.parse(localStorage.getItem(STORAGE_CHATS) || '[]');
+        activeChatId = localStorage.getItem(STORAGE_ACTIVE) || null;
+    } catch { chats = []; activeChatId = null; }
+}
+
+function saveChats() {
+    localStorage.setItem(STORAGE_CHATS, JSON.stringify(chats));
+    localStorage.setItem(STORAGE_ACTIVE, activeChatId || '');
+}
+
+function getMemories() {
+    return localStorage.getItem(STORAGE_MEMORIES) || '';
+}
+
+function setMemories(text) {
+    localStorage.setItem(STORAGE_MEMORIES, text);
+}
+
+// ── Chat CRUD ────────────────────────────────────────────────────────────
+function createChat() {
+    const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+    const chat = { id, title: 'New chat', messages: [], createdAt: Date.now() };
+    chats.unshift(chat);
+    activeChatId = id;
+    saveChats();
+    renderSidebar();
+    renderChat(id);
+    return chat;
+}
+
+function deleteChat(id) {
+    chats = chats.filter(c => c.id !== id);
+    if (activeChatId === id) {
+        activeChatId = chats.length > 0 ? chats[0].id : null;
+    }
+    saveChats();
+    renderSidebar();
+    if (activeChatId) renderChat(activeChatId);
+    else showWelcome();
+}
+
+function getActiveChat() {
+    return chats.find(c => c.id === activeChatId) || null;
+}
+
+function updateChatTitle(chat) {
+    if (chat.messages.length > 0) {
+        const firstUser = chat.messages.find(m => m.role === 'user');
+        if (firstUser) {
+            chat.title = firstUser.content.slice(0, 40) + (firstUser.content.length > 40 ? '…' : '');
+        }
+    }
+}
+
+// ── Sidebar Rendering ────────────────────────────────────────────────────
+function renderSidebar() {
+    sidebarList.innerHTML = '';
+
+    if (chats.length === 0) {
+        sidebarList.innerHTML = '<div style="padding:20px 12px;color:var(--text-tertiary);font-size:0.82rem;text-align:center;">No conversations yet</div>';
+        return;
+    }
+
+    chats.forEach(chat => {
+        const item = document.createElement('div');
+        item.className = 'sidebar-item' + (chat.id === activeChatId ? ' active' : '');
+        item.innerHTML = `
+            <span class="sidebar-item-title">${escapeHtml(chat.title)}</span>
+            <button class="sidebar-item-delete" title="Delete">✕</button>
+        `;
+
+        item.querySelector('.sidebar-item-title').addEventListener('click', () => {
+            activeChatId = chat.id;
+            saveChats();
+            renderSidebar();
+            renderChat(chat.id);
+            // Close mobile sidebar
+            if (window.innerWidth <= 768) sidebar.classList.remove('visible');
+        });
+
+        item.querySelector('.sidebar-item-delete').addEventListener('click', (e) => {
+            e.stopPropagation();
+            deleteChat(chat.id);
+        });
+
+        sidebarList.appendChild(item);
+    });
+}
+
+// ── Chat Rendering ───────────────────────────────────────────────────────
+function showWelcome() {
+    chatArea.innerHTML = '';
+    chatArea.appendChild(welcome);
+    welcome.style.display = 'flex';
+}
+
+function renderChat(id) {
+    const chat = chats.find(c => c.id === id);
+    if (!chat) { showWelcome(); return; }
+
+    chatArea.innerHTML = '';
+
+    if (chat.messages.length === 0) {
+        chatArea.appendChild(welcome);
+        welcome.style.display = 'flex';
+        return;
+    }
+
+    welcome.style.display = 'none';
+
+    chat.messages.forEach(msg => {
+        if (msg.role === 'user') {
+            chatArea.appendChild(createUserMessage(msg.content));
+        } else {
+            const row = createBotMessageStatic(msg.content);
+            chatArea.appendChild(row);
+        }
+    });
+
+    scrollToBottom();
+}
+
+// ── Auto-resize textarea ─────────────────────────────────────────────────
+input.addEventListener('input', () => {
+    input.style.height = 'auto';
+    input.style.height = Math.min(input.scrollHeight, 200) + 'px';
+    sendBtn.disabled = !input.value.trim();
+});
+
+input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (input.value.trim() && !isGenerating) sendMessage();
+    }
+});
+
+sendBtn.addEventListener('click', () => {
+    if (input.value.trim() && !isGenerating) sendMessage();
+});
+
+newChatBtn.addEventListener('click', () => {
+    // Save memory from current chat before switching
+    saveMemoryFromCurrentChat();
+    createChat();
+    if (window.innerWidth <= 768) sidebar.classList.remove('visible');
+});
+
+clearAllBtn.addEventListener('click', () => {
+    if (confirm('Delete all conversations? This cannot be undone.')) {
+        chats = [];
+        activeChatId = null;
+        saveChats();
+        renderSidebar();
+        showWelcome();
+    }
+});
+
+// ── Memories Modal ───────────────────────────────────────────────────────
+memoriesBtn.addEventListener('click', () => {
+    memoriesText.value = getMemories();
+    memoriesModal.style.display = 'flex';
+});
+
+closeMemories.addEventListener('click', () => { memoriesModal.style.display = 'none'; });
+memoriesModal.addEventListener('click', (e) => { if (e.target === memoriesModal) memoriesModal.style.display = 'none'; });
+
+saveMemories.addEventListener('click', () => {
+    setMemories(memoriesText.value);
+    memoriesModal.style.display = 'none';
+});
+
+clearMemories.addEventListener('click', () => {
+    memoriesText.value = '';
+    setMemories('');
+});
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+function scrollToBottom() {
+    chatArea.scrollTo({ top: chatArea.scrollHeight, behavior: 'smooth' });
+}
+
+function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+}
+
+function renderMarkdown(text) {
+    marked.setOptions({ breaks: true, gfm: true });
+    return marked.parse(text);
+}
+
+function processThinkingTags(text) {
+    // Completed thinking blocks — render collapsed by default
+    text = text.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
+        content = content.trim();
+        if (!content) return '';
+        return `<details class="thinking-block"><summary class="thinking-label">Thought process</summary><div class="thinking-content">${renderMarkdown(content)}</div></details>`;
+    });
+
+    // Unclosed thinking (still streaming) — show as live indicator
+    if (text.includes('<think>') && !text.split('<think>').pop().includes('</think>')) {
+        const parts = text.split('<think>');
+        const before = parts.slice(0, -1).join('<think>');
+        const thinking = parts[parts.length - 1];
+        text = before + `<details class="thinking-block" open><summary class="thinking-label">Thinking…</summary><div class="thinking-content">${renderMarkdown(thinking)}</div></details>`;
+    }
+
+    return text;
+}
+
+function addCopyButtons(container) {
+    container.querySelectorAll('pre').forEach((pre) => {
+        if (pre.querySelector('.copy-code-btn')) return;
+        const btn = document.createElement('button');
+        btn.className = 'copy-code-btn';
+        btn.textContent = 'Copy';
+        btn.addEventListener('click', () => {
+            const code = pre.querySelector('code') ? pre.querySelector('code').textContent : pre.textContent;
+            navigator.clipboard.writeText(code).then(() => {
+                btn.textContent = 'Copied!';
+                setTimeout(() => btn.textContent = 'Copy', 1500);
+            });
+        });
+        pre.style.position = 'relative';
+        pre.appendChild(btn);
+    });
+}
+
+function renderFinalContent(rawText) {
+    let processed = processThinkingTags(rawText);
+    const thinkingBlocks = [];
+    processed = processed.replace(/<details class="thinking-block"[\s\S]*?<\/details>/g, (match) => {
+        const ph = `%%THINK_${thinkingBlocks.length}%%`;
+        thinkingBlocks.push(match);
+        return ph;
+    });
+    let rendered = renderMarkdown(processed);
+    thinkingBlocks.forEach((block, i) => { rendered = rendered.replace(`%%THINK_${i}%%`, block); });
+    return rendered;
+}
+
+// ── Create message DOM ───────────────────────────────────────────────────
+function createUserMessage(text) {
+    const row = document.createElement('div');
+    row.className = 'message-row';
+    row.innerHTML = `
+        <div class="msg-content user-msg">${escapeHtml(text)}</div>
+        <div style="clear:both"></div>
+    `;
+    return row;
+}
+
+function createBotMessageStatic(text) {
+    const row = document.createElement('div');
+    row.className = 'message-row';
+    row.innerHTML = `
+        <div class="msg-label">Gemma 4</div>
+        <div class="msg-content bot-msg">${renderFinalContent(text)}</div>
+        <div class="msg-actions">
+            <button class="msg-action-btn copy-btn" title="Copy response">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                Copy
+            </button>
+        </div>
+    `;
+    addCopyButtons(row.querySelector('.bot-msg'));
+    row.querySelector('.copy-btn').addEventListener('click', () => {
+        navigator.clipboard.writeText(text).then(() => {
+            const btn = row.querySelector('.copy-btn');
+            btn.innerHTML = '✓ Copied!';
+            setTimeout(() => btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy`, 1500);
+        });
+    });
+    return row;
+}
+
+function createBotMessageStreaming() {
+    const row = document.createElement('div');
+    row.className = 'message-row';
+    row.innerHTML = `
+        <div class="msg-label">Gemma 4</div>
+        <div class="msg-content bot-msg">
+            <div class="typing-indicator"><span></span><span></span><span></span></div>
+        </div>
+    `;
+    return row;
+}
+
+// ── Memory Management ────────────────────────────────────────────────────
+async function saveMemoryFromCurrentChat() {
+    const chat = getActiveChat();
+    if (!chat || chat.messages.length < 2) return;
+
+    try {
+        const res = await fetch('/api/summarize', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                messages: chat.messages.map(m => ({ role: m.role, content: m.content }))
+            }),
+        });
+
+        if (res.ok) {
+            const data = await res.json();
+            if (data.summary && data.summary.trim()) {
+                const existing = getMemories();
+                const timestamp = new Date().toLocaleDateString();
+                const newMemory = `[${timestamp} — "${chat.title}"]\n${data.summary.trim()}`;
+                const combined = existing ? existing + '\n\n' + newMemory : newMemory;
+                setMemories(combined);
+            }
+        }
+    } catch (err) {
+        console.log('Memory save skipped:', err.message);
+    }
+}
+
+// ── Send Message ─────────────────────────────────────────────────────────
+async function sendMessage() {
+    const text = input.value.trim();
+    if (!text) return;
+
+    // Ensure we have an active chat
+    if (!activeChatId) createChat();
+    const chat = getActiveChat();
+    if (!chat) return;
+
+    welcome.style.display = 'none';
+    // Clear welcome if it's the only child
+    if (chatArea.querySelector('.welcome')) {
+        chatArea.innerHTML = '';
+    }
+
+    // Add user message
+    chat.messages.push({ role: 'user', content: text });
+    updateChatTitle(chat);
+    saveChats();
+    renderSidebar();
+    chatArea.appendChild(createUserMessage(text));
+
+    input.value = '';
+    input.style.height = 'auto';
+    sendBtn.disabled = true;
+    scrollToBottom();
+
+    await streamBotResponse(chat);
+}
+
+async function streamBotResponse(chat) {
+    isGenerating = true;
+    sendBtn.disabled = true;
+
+    const botRow = createBotMessageStreaming();
+    chatArea.appendChild(botRow);
+    scrollToBottom();
+
+    const botContent = botRow.querySelector('.bot-msg');
+    let fullText = '';
+
+    try {
+        const response = await fetch('/api/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                messages: chat.messages.map(m => ({ role: m.role, content: m.content })),
+                memories: getMemories()
+            }),
+        });
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value, { stream: true });
+            const lines = chunk.split('\n');
+
+            for (const line of lines) {
+                if (!line.startsWith('data: ')) continue;
+                const data = line.slice(6);
+                if (data === '[DONE]') break;
+
+                try {
+                    const parsed = JSON.parse(data);
+                    fullText += parsed.token;
+                    botContent.innerHTML = renderFinalContent(fullText);
+                    addCopyButtons(botContent);
+                    scrollToBottom();
+                } catch (e) { /* skip */ }
+            }
+        }
+    } catch (err) {
+        botContent.innerHTML = `<p style="color:#e74c3c;">Error: ${escapeHtml(err.message)}</p>`;
+    }
+
+    // Save to chat history
+    chat.messages.push({ role: 'assistant', content: fullText });
+    saveChats();
+
+    // Add copy/action buttons to the final message
+    const actions = document.createElement('div');
+    actions.className = 'msg-actions';
+    actions.innerHTML = `
+        <button class="msg-action-btn copy-btn" title="Copy">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            Copy
+        </button>
+    `;
+    actions.querySelector('.copy-btn').addEventListener('click', () => {
+        navigator.clipboard.writeText(fullText).then(() => {
+            actions.querySelector('.copy-btn').innerHTML = '✓ Copied!';
+            setTimeout(() => actions.querySelector('.copy-btn').innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy`, 1500);
+        });
+    });
+    botRow.appendChild(actions);
+
+    isGenerating = false;
+    sendBtn.disabled = !input.value.trim();
+}
+
+// ── Boot ─────────────────────────────────────────────────────────────────
+init();

static/index.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemma 4 E4B Chat</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+
+    <!-- Sidebar -->
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <span class="sidebar-title">Chat History</span>
+            <button class="icon-btn-sm" id="newChatBtn" title="New chat">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+            </button>
+        </div>
+        <div class="sidebar-list" id="sidebarList">
+            <!-- populated by JS -->
+        </div>
+        <div class="sidebar-footer">
+            <button class="sidebar-footer-btn" id="memoriesBtn">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 14v-4m0-4h.01"/></svg>
+                Memories
+            </button>
+            <button class="sidebar-footer-btn" id="clearAllBtn">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                Clear All
+            </button>
+        </div>
+    </aside>
+
+    <!-- Memories Modal -->
+    <div class="modal-overlay" id="memoriesModal" style="display:none">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>Memories</h3>
+                <button class="icon-btn-sm" id="closeMemories">✕</button>
+            </div>
+            <div class="modal-body">
+                <p class="modal-desc">These memories are recalled across all conversations. Edit or delete them as needed.</p>
+                <textarea id="memoriesText" class="memories-textarea" placeholder="No memories yet. Memories are automatically saved when you end a conversation."></textarea>
+            </div>
+            <div class="modal-footer">
+                <button class="modal-btn secondary" id="clearMemories">Clear All</button>
+                <button class="modal-btn primary" id="saveMemories">Save</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-left">
+                <button class="icon-btn" id="sidebarToggle" title="Toggle sidebar">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
+                </button>
+                <span class="logo">⛓️‍💥</span>
+                <span class="header-title">Gemma 4 <span class="header-badge">E4B</span></span>
+            </div>
+            <div class="header-right">
+                <button class="icon-btn" id="themeToggle" title="Toggle theme">
+                    <svg id="sunIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+                    <svg id="moonIcon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                </button>
+            </div>
+        </header>
+
+        <!-- Chat Area -->
+        <main class="chat-area" id="chatArea">
+            <div class="welcome" id="welcome">
+                <div class="welcome-icon">⛓️‍💥</div>
+                <h1>Gemma 4 E4B</h1>
+                <p>A powerful 4B parameter model by Google, unchained.<br>Ask me anything to get started.</p>
+            </div>
+        </main>
+
+        <!-- Input Area -->
+        <footer class="input-area">
+            <div class="input-container">
+                <div class="input-wrapper">
+                    <textarea id="messageInput" placeholder="Message Gemma 4…" rows="1"></textarea>
+                    <button class="send-btn" id="sendBtn" disabled>
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
+                    </button>
+                </div>
+                <div class="input-footer">
+                    <span class="model-label">Gemma-4-E4B-OBLITERATED · Created by feno1</span>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script src="/static/chat.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,476 @@
+/* ── Reset & Variables ─────────────────────────────────────────────────── */
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+    --sidebar-width: 260px;
+}
+
+[data-theme="light"] {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f7f7f8;
+    --bg-tertiary: #ececee;
+    --text-primary: #0d0d0d;
+    --text-secondary: #6b6b6b;
+    --text-tertiary: #9a9a9a;
+    --border: #e5e5e5;
+    --user-bg: #f3f3f3;
+    --thinking-bg: #f0f4f8;
+    --thinking-border: #c8d3de;
+    --code-bg: #1e1e1e;
+    --code-text: #d4d4d4;
+    --accent: #d97757;
+    --send-bg: #0d0d0d;
+    --send-fg: #ffffff;
+    --shadow: 0 1px 3px rgba(0,0,0,0.08);
+    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
+    --sidebar-bg: #f7f7f8;
+    --sidebar-hover: #ececee;
+    --sidebar-active: #e2e2e4;
+}
+
+[data-theme="dark"] {
+    --bg-primary: #212121;
+    --bg-secondary: #2f2f2f;
+    --bg-tertiary: #3a3a3a;
+    --text-primary: #ececec;
+    --text-secondary: #a1a1a1;
+    --text-tertiary: #6b6b6b;
+    --border: #3a3a3a;
+    --user-bg: #303030;
+    --thinking-bg: #2a2d31;
+    --thinking-border: #444c55;
+    --code-bg: #1a1a1a;
+    --code-text: #d4d4d4;
+    --accent: #d97757;
+    --send-bg: #ececec;
+    --send-fg: #212121;
+    --shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --shadow-lg: 0 8px 30px rgba(0,0,0,0.3);
+    --sidebar-bg: #1a1a1a;
+    --sidebar-hover: #2a2a2a;
+    --sidebar-active: #333333;
+}
+
+html, body {
+    height: 100%;
+    font-family: var(--font-sans);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background 0.3s, color 0.3s;
+    overflow: hidden;
+}
+
+/* ── Sidebar ──────────────────────────────────────────────────────────── */
+.sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0;
+    width: var(--sidebar-width);
+    background: var(--sidebar-bg);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column;
+    z-index: 200;
+    transition: transform 0.25s ease, background 0.3s;
+}
+
+.sidebar.hidden { transform: translateX(-100%); }
+
+.sidebar-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.sidebar-title {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.icon-btn-sm {
+    width: 28px; height: 28px;
+    border-radius: 6px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s;
+    font-size: 0.8rem;
+}
+
+.icon-btn-sm:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+
+.sidebar-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.sidebar-list::-webkit-scrollbar { width: 4px; }
+.sidebar-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+
+.sidebar-item {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 10px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    transition: all 0.12s;
+    margin-bottom: 2px;
+}
+
+.sidebar-item:hover { background: var(--sidebar-hover); color: var(--text-primary); }
+.sidebar-item.active { background: var(--sidebar-active); color: var(--text-primary); font-weight: 500; }
+
+.sidebar-item-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.sidebar-item-delete {
+    opacity: 0;
+    background: none; border: none;
+    color: var(--text-tertiary);
+    cursor: pointer;
+    font-size: 0.75rem;
+    padding: 2px 4px;
+    border-radius: 4px;
+    transition: all 0.12s;
+    flex-shrink: 0;
+}
+
+.sidebar-item:hover .sidebar-item-delete { opacity: 1; }
+.sidebar-item-delete:hover { color: #e74c3c; background: rgba(231,76,60,0.1); }
+
+.sidebar-footer {
+    padding: 12px;
+    border-top: 1px solid var(--border);
+    display: flex; flex-direction: column; gap: 4px;
+}
+
+.sidebar-footer-btn {
+    display: flex; align-items: center; gap: 8px;
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    font-family: var(--font-sans);
+    font-size: 0.82rem;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.12s;
+}
+
+.sidebar-footer-btn:hover { background: var(--sidebar-hover); color: var(--text-primary); }
+
+/* ── Main Content ──────────────────────────��──────────────────────────── */
+.main-content {
+    margin-left: var(--sidebar-width);
+    height: 100%;
+    display: flex; flex-direction: column;
+    transition: margin-left 0.25s ease;
+}
+
+.main-content.full-width { margin-left: 0; }
+
+/* ── Header ───────────────────────────────────────────────────────────── */
+.header {
+    height: 52px;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0 16px;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    transition: background 0.3s, border-color 0.3s;
+}
+
+.header-left { display: flex; align-items: center; gap: 10px; }
+.logo { font-size: 1.25rem; }
+.header-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
+
+.header-badge {
+    font-size: 0.7rem; font-weight: 500;
+    padding: 2px 7px; border-radius: 4px;
+    background: var(--accent); color: #fff;
+    vertical-align: middle; margin-left: 2px;
+}
+
+.header-right { display: flex; align-items: center; gap: 6px; }
+
+.icon-btn {
+    width: 36px; height: 36px;
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: all 0.15s;
+}
+
+.icon-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+
+/* ── Chat Area ────────────────────────────────────────────────────────── */
+.chat-area {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 0;
+}
+
+.chat-area::-webkit-scrollbar { width: 6px; }
+.chat-area::-webkit-scrollbar-track { background: transparent; }
+.chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+
+/* ── Welcome ──────────────────────────────────────────────────────────── */
+.welcome {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    height: 100%; text-align: center;
+    animation: fadeIn 0.5s ease-out;
+}
+
+.welcome-icon { font-size: 3rem; margin-bottom: 16px; }
+.welcome h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.02em; }
+.welcome p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
+
+/* ── Messages ─────────────────────────────────────────────────────────── */
+.message-row {
+    max-width: 720px; margin: 0 auto; padding: 0 24px;
+    animation: slideUp 0.3s ease-out;
+}
+
+.message-row + .message-row { margin-top: 24px; }
+
+.msg-label {
+    font-size: 0.75rem; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.04em;
+    color: var(--text-tertiary); margin-bottom: 6px;
+}
+
+.msg-content { font-size: 0.95rem; line-height: 1.7; word-wrap: break-word; }
+
+.msg-content.user-msg {
+    background: var(--user-bg); padding: 12px 16px;
+    border-radius: 16px; border-bottom-right-radius: 4px;
+    display: inline-block; max-width: 85%; float: right;
+}
+
+.msg-content.bot-msg { clear: both; }
+
+/* ── Thinking Block (collapsible) ──────────────────────────────────────── */
+.thinking-block {
+    background: var(--thinking-bg); border-left: 3px solid var(--thinking-border);
+    padding: 0; margin: 8px 0 12px 0; border-radius: 6px;
+    font-size: 0.88rem; line-height: 1.6;
+    color: var(--text-secondary);
+}
+
+.thinking-label {
+    font-style: normal; font-size: 0.72rem; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.05em;
+    color: var(--text-tertiary); padding: 8px 14px;
+    cursor: pointer; user-select: none;
+    list-style: none; /* hide default arrow */
+}
+
+.thinking-label::-webkit-details-marker { display: none; }
+
+.thinking-label::before {
+    content: '▶'; margin-right: 6px; font-size: 0.6rem;
+    display: inline-block; transition: transform 0.15s;
+}
+
+.thinking-block[open] .thinking-label::before { transform: rotate(90deg); }
+
+.thinking-content {
+    padding: 0 14px 10px 14px; font-style: italic;
+}
+
+/* ── Typing Indicator ─────────────────────────────────────────────────── */
+.typing-indicator { display: flex; gap: 4px; padding: 8px 0; }
+
+.typing-indicator span {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--text-tertiary); animation: typingBounce 1.4s infinite;
+}
+
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typingBounce {
+    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+    30% { transform: translateY(-6px); opacity: 1; }
+}
+
+/* ── Message Actions ──────────────────────────────────────────────────── */
+.msg-actions { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity 0.2s; }
+.message-row:hover .msg-actions { opacity: 1; }
+
+.msg-action-btn {
+    background: transparent; border: none;
+    color: var(--text-tertiary); cursor: pointer;
+    padding: 4px 8px; border-radius: 4px;
+    font-size: 0.75rem; font-family: var(--font-sans);
+    display: flex; align-items: center; gap: 4px;
+    transition: all 0.15s;
+}
+
+.msg-action-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+
+/* ── Markdown ─────────────────────────────────────────────────────────── */
+.msg-content p { margin-bottom: 0.75em; }
+.msg-content p:last-child { margin-bottom: 0; }
+.msg-content ul, .msg-content ol { margin: 0.5em 0 0.5em 1.5em; }
+.msg-content li { margin-bottom: 0.25em; }
+.msg-content strong { font-weight: 600; }
+
+.msg-content code {
+    font-family: var(--font-mono); font-size: 0.85em;
+    padding: 2px 6px; background: var(--bg-tertiary); border-radius: 4px;
+}
+
+.msg-content pre {
+    background: var(--code-bg) !important; color: var(--code-text);
+    padding: 14px 16px; border-radius: 8px; overflow-x: auto;
+    margin: 12px 0; position: relative;
+}
+
+.msg-content pre code { background: transparent; padding: 0; font-size: 0.85rem; line-height: 1.5; }
+
+.copy-code-btn {
+    position: absolute; top: 8px; right: 8px;
+    background: rgba(255,255,255,0.1); border: none; color: #aaa;
+    padding: 4px 8px; border-radius: 4px;
+    font-size: 0.7rem; font-family: var(--font-sans);
+    cursor: pointer; transition: all 0.15s;
+}
+
+.copy-code-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
+
+/* ── Input Area ───────────────────────────────────────────────────────── */
+.input-area {
+    padding: 12px 24px 16px;
+    background: var(--bg-primary);
+    flex-shrink: 0;
+    transition: background 0.3s;
+}
+
+.input-container { max-width: 720px; margin: 0 auto; }
+
+.input-wrapper {
+    display: flex; align-items: flex-end;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 16px; padding: 8px 8px 8px 16px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-shadow: var(--shadow);
+}
+
+.input-wrapper:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.12);
+}
+
+#messageInput {
+    flex: 1; border: none; background: transparent;
+    color: var(--text-primary); font-family: var(--font-sans);
+    font-size: 0.95rem; line-height: 1.5;
+    resize: none; outline: none; max-height: 200px; padding: 6px 0;
+}
+
+#messageInput::placeholder { color: var(--text-tertiary); }
+
+.send-btn {
+    width: 36px; height: 36px; border-radius: 10px;
+    border: none; background: var(--send-bg); color: var(--send-fg);
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; transition: opacity 0.15s, transform 0.1s;
+}
+
+.send-btn:disabled { opacity: 0.3; cursor: default; }
+.send-btn:not(:disabled):hover { opacity: 0.85; }
+.send-btn:not(:disabled):active { transform: scale(0.95); }
+
+.input-footer { text-align: center; padding-top: 8px; }
+
+.model-label {
+    font-size: 0.7rem; color: var(--text-tertiary);
+    opacity: 0.6; user-select: none; transition: opacity 0.2s;
+}
+
+.model-label:hover { opacity: 1; }
+
+/* ── Modal ────────────────────────────────────────────────────────────── */
+.modal-overlay {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
+    z-index: 300; display: flex; align-items: center; justify-content: center;
+}
+
+.modal {
+    background: var(--bg-primary); border: 1px solid var(--border);
+    border-radius: 16px; width: 480px; max-width: 90vw;
+    box-shadow: var(--shadow-lg); animation: slideUp 0.25s ease-out;
+}
+
+.modal-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px 20px; border-bottom: 1px solid var(--border);
+}
+
+.modal-header h3 { font-size: 1rem; font-weight: 600; }
+
+.modal-body { padding: 20px; }
+
+.modal-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }
+
+.memories-textarea {
+    width: 100%; height: 200px;
+    background: var(--bg-secondary); border: 1px solid var(--border);
+    border-radius: 8px; padding: 12px; resize: vertical;
+    font-family: var(--font-sans); font-size: 0.88rem;
+    color: var(--text-primary); outline: none; line-height: 1.6;
+}
+
+.memories-textarea:focus { border-color: var(--accent); }
+
+.modal-footer {
+    display: flex; justify-content: flex-end; gap: 8px;
+    padding: 12px 20px; border-top: 1px solid var(--border);
+}
+
+.modal-btn {
+    padding: 8px 16px; border-radius: 8px; border: none;
+    font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500;
+    cursor: pointer; transition: all 0.15s;
+}
+
+.modal-btn.primary { background: var(--accent); color: #fff; }
+.modal-btn.primary:hover { opacity: 0.9; }
+.modal-btn.secondary { background: var(--bg-tertiary); color: var(--text-primary); }
+.modal-btn.secondary:hover { opacity: 0.8; }
+
+/* ── Animations ───────────────────────────────────────────────────────── */
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Responsive ───────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+    .sidebar { transform: translateX(-100%); }
+    .sidebar.visible { transform: translateX(0); }
+    .main-content { margin-left: 0 !important; }
+    .message-row { padding: 0 16px; }
+    .input-area { padding: 8px 12px 12px; }
+    .welcome h1 { font-size: 1.25rem; }
+    .msg-content.user-msg { max-width: 92%; }
+}