Merge pull request 'fix modals not being in dark mode' (#2) from reese/fix-playground into main

Reviewed-on: #2

compose.yaml

@@ -0,0 +1,8 @@
+services:
+  web:
+    build: .
+    ports:
+      - "8080:80"
+    volumes:
+      - .:/usr/share/nginx/html:delegated,Z
+    restart: unless-stopped

index.html

@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -55,30 +87,42 @@
 <div class="container">
   <h2 class="section-title">Browse Topics</h2>
   <div class="cards">
-    <div class="card">
+    <a href="/pages/terminology.html" class="card-link">
-      <h3>📖 Terminology</h3>
+      <div class="card">
-      <p>Key AI terms from ML and NLP — supervised learning, fine-tuning, tokens, embeddings, and more.</p>
+        <h3>📖 Terminology</h3>
-    </div>
+        <p>Key AI terms from ML and NLP — supervised learning, fine-tuning, tokens, embeddings, and more.</p>
-    <div class="card">
+      </div>
-      <h3>⚙️ Techniques</h3>
+    </a>
-      <p>How AI models are trained and improved — backpropagation, RLHF, quantization, RAG, and more.</p>
+    <a href="/pages/techniques.html" class="card-link">
-    </div>
+      <div class="card">
-    <div class="card">
+        <h3>⚙️ Techniques</h3>
-      <h3>🎯 Use Cases</h3>
+        <p>How AI models are trained and improved — backpropagation, RLHF, quantization, RAG, and more.</p>
-      <p>Where AI is used in the real world — healthcare, finance, creative work, customer support, and more.</p>
+      </div>
-    </div>
+    </a>
-    <div class="card">
+    <a href="/pages/use-cases.html" class="card-link">
-      <h3>🤖 Model Types</h3>
+      <div class="card">
-      <p>LLMs, diffusion models, CNNs, GANs, transformers, and other AI architectures explained.</p>
+        <h3>🎯 Use Cases</h3>
-    </div>
+        <p>Where AI is used in the real world — healthcare, finance, creative work, customer support, and more.</p>
-    <div class="card">
+      </div>
-      <h3>✍️ Prompt Engineering</h3>
+    </a>
-      <p>How to write effective prompts — zero-shot, few-shot, chain-of-thought, and structured prompts.</p>
+    <a href="/pages/model-types.html" class="card-link">
-    </div>
+      <div class="card">
-    <div class="card">
+        <h3>🤖 Model Types</h3>
-      <h3>📐 Math & Concepts</h3>
+        <p>LLMs, diffusion models, CNNs, GANs, transformers, and other AI architectures explained.</p>
-      <p>Underlying concepts — loss functions, attention, temperature, perplexity, and accuracy metrics.</p>
+      </div>
-    </div>
+    </a>
+    <a href="/pages/prompts.html" class="card-link">
+      <div class="card">
+        <h3>✍️ Prompt Engineering</h3>
+        <p>How to write effective prompts — zero-shot, few-shot, chain-of-thought, and structured prompts.</p>
+      </div>
+    </a>
+    <a href="/pages/math.html" class="card-link">
+      <div class="card">
+        <h3>📐 Math & Concepts</h3>
+        <p>Underlying concepts — loss functions, attention, temperature, perplexity, and accuracy metrics.</p>
+      </div>
+    </a>
   </div>
 
   <h2 class="section-title">Quick Start</h2>
@@ -92,9 +136,84 @@
     <h3>LLM vs Traditional ML</h3>
     <p>Traditional ML models are built for one specific task (e.g., classify spam). Large Language Models are general-purpose — trained on massive text corpora to understand and generate human language across countless tasks.</p>
   </div>
+
+  <h2 class="section-title">Interactive</h2>
+  <div class="ask-question-section">
+    <div class="ask-question-box">
+      <h3>💬 Ask a Question</h3>
+      <p style="color: var(--pink-700); font-size: 0.95rem; margin-bottom: 1rem;">Ask anything about AI — terminology, concepts, techniques, or real-world applications. Powered by your configured LLM.</p>
+      <div class="ask-question-input-row">
+        <input class="ask-question-input" id="askInput" placeholder="Ask me anything about AI..." />
+        <button class="llm-btn" onclick="askQuestion()" style="padding: 0.6rem 1.5rem;"><span class="icon">Send</span></button>
+      </div>
+      <div class="ask-question-answer" id="askAnswer"></div>
+    </div>
+  </div>
+  <a href="/pages/chat.html" class="card-link" style="margin-top: 1.5rem; display: block;">
+    <div class="card">
+      <h3>💬 Full Chat</h3>
+      <p>Try AI right now — ask questions, brainstorm ideas, get explanations, or just experiment. Powered by a real LLM API.</p>
+    </div>
+  </a>
 </div>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="lib/llm.js"></script>
+<script src="lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  function askQuestion() {
+    var input = document.getElementById('askInput');
+    var answer = document.getElementById('askAnswer');
+    var text = input.value.trim();
+    if (!text) return;
+
+    answer.classList.add('visible');
+    answer.innerHTML = '<span class="llm-loading">Thinking...</span>';
+
+    var cheatSheetContext = `You are an AI educator answering questions based on this cheat sheet content:
+
+TERMINOLOGY: Machine Learning (ML), Supervised Learning, Unsupervised Learning, Reinforcement Learning, Overfitting, Underfitting, NLP, Token, Embedding, Context Window, Paraphrasing, Sentiment Analysis, LLM, Pre-trained Model, Fine-tuning, Parameters, Inference, Weights. Acronyms: AI, ML, DL, NLP, LLM, RLHF, RAG, API, SFT, PoC, GAN, CNN, AGI, STT/ASR, TTS.
+
+TECHNIQUES: Backpropagation, Epoch, Batch Size, Learning Rate, Transfer Learning, Data Augmentation, RLHF, SFT, Prompt Tuning, LoRA, Quantization, Distillation, Speculative Decoding, RAG, Agent/Tool Use, Chain-of-Thought.
+
+USE CASES: Content Generation, Image Generation, Video & Audio, Summarization, Code Generation, Debugging & Review, Documentation, Code Translation, Chatbots & Assistants, Data Analysis, Research & Search, Translation, Email & Meeting Assistants, Document Processing, Healthcare, Finance, Automotive, Education, Manufacturing, Legal.
+
+MODEL TYPES: LLMs (GPT-4, Claude, Gemini, Llama, Mistral), Encoder-Only (BERT, RoBERTa), Decoder-Only (GPT, Claude, Llama), Encoder-Decoder (T5, BART), CNN (ResNet, EfficientNet), ViT (CLIP, DINOv2), Diffusion (Stable Diffusion, DALL-E), GAN (StyleGAN), VQ-VAE, Flow Models, RNN/LSTM, MoE, Retrieval Models, SLMs (Phi-3, Gemma).
+
+PROMPT ENGINEERING: Zero-Shot, Few-Shot, Chain-of-Thought, Role Prompting, Structured Output, Self-Consistency, ReAct. Tips: Be specific, use delimiters, provide context, iterate.
+
+MATH & CONCEPTS: Attention, Self-Attention, Multi-Head Attention, Positional Encoding, FFN, Layer Norm, Loss Function, Gradient Descent, Adam, Gradient, Regularization, Batch Norm, Temperature, Top-K, Top-P, Greedy Decoding, Beam Search, Logits, Perplexity, Accuracy, Precision & Recall, F1 Score, BLEU/ROUGE, TPS. Formulas: Attention=softmax(QKᵀ/√dₖ)V, Cross-Entropy=-Σyᵢlog(pᵢ), Softmax=eˣⁱ/Σeˣʲ, ReLU=max(0,x), LayerNorm=(x-μ)/σ×γ+β, F1=2×(P×R)/(P+R), Perplexity=2^(cross-entropy).`;
+
+    var messages = [
+      { role: 'system', content: 'You are a helpful AI educator answering questions based on an AI cheat sheet. Use the context below to provide accurate, concise answers. If a question is outside the cheat sheet scope, say so but try to help anyway. Keep answers to 2-4 short paragraphs. Use formatting like bold text and code blocks where helpful.' },
+      { role: 'user', content: cheatSheetContext + '\n\nQuestion: ' + text }
+    ];
+
+    LLM.chatWithHistory('askAnswer', messages)
+      .then(function() {
+        answer.innerHTML = answer.innerHTML.replace('<span class="llm-loading">Thinking...</span>', '');
+      })
+      .catch(function() {});
+  }
+
+  var askInput = document.getElementById('askInput');
+  if (askInput) {
+    askInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        askQuestion();
+      }
+    });
+  }
+
+  window.askQuestion = askQuestion;
+})();
+</script>
+
 </body>
 </html>

lib/llm.js

@@ -0,0 +1,179 @@
+var LLM = (function() {
+  var defaultApiUrl = 'https://llama-instruct.reeselink.com/v1';
+  var defaultModel = 'instruct';
+
+  function getConfig() {
+    return {
+      apiUrl: localStorage.getItem('apiUrl') || defaultApiUrl,
+      token: localStorage.getItem('apiToken') || '',
+      model: localStorage.getItem('modelName') || defaultModel
+    };
+  }
+
+  function callAPI(messages, onChunk, onComplete, onError) {
+    var config = getConfig();
+    var apiUrl = config.apiUrl.replace(/\/+$/, '');
+    var headers = { 'Content-Type': 'application/json' };
+    if (config.token) {
+      headers['Authorization'] = 'Bearer ' + config.token;
+    }
+
+    fetch(apiUrl + '/chat/completions', {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({
+        messages: messages,
+        model: config.model,
+        stream: true
+      })
+    })
+    .then(function(response) {
+      if (!response.ok) {
+        throw new Error('API error: ' + response.status + ' ' + response.statusText);
+      }
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder();
+      var buffer = '';
+
+      function read() {
+        return reader.read().then(function(result) {
+          var done = result.done;
+          var value = result.value;
+          if (done) {
+            onComplete();
+            return;
+          }
+          buffer += decoder.decode(value, { stream: true });
+          var lines = buffer.split('\n');
+          buffer = lines.pop();
+
+          for (var i = 0; i < lines.length; i++) {
+            var line = lines[i].trim();
+            if (line.startsWith('data: ')) {
+              var data = line.slice(6);
+              if (data === '[DONE]') {
+                onComplete();
+                return;
+              }
+              try {
+                var json = JSON.parse(data);
+                var delta = json.choices && json.choices[0] && json.choices[0].delta;
+                if (delta && delta.content) {
+                  onChunk(delta.content);
+                }
+              } catch (e) {
+                // skip malformed JSON
+              }
+            }
+          }
+          return read();
+        });
+      }
+      return read();
+    })
+    .catch(function(err) {
+      onError(err.message);
+    });
+  }
+
+  function chat(elementId, systemPrompt, userMessage) {
+    var messages = [];
+    if (systemPrompt) {
+      messages.push({ role: 'system', content: systemPrompt });
+    }
+    messages.push({ role: 'user', content: userMessage });
+
+    return new Promise(function(resolve, reject) {
+      var outputEl = document.getElementById(elementId);
+      if (!outputEl) { reject(new Error('Output element not found')); return; }
+
+      outputEl.innerHTML = '<span class="llm-loading">Thinking...</span>';
+
+      var fullText = '';
+      var history = systemPrompt ? messages : [];
+
+      callAPI(
+        history,
+        function(chunk) {
+          fullText += chunk;
+          outputEl.innerHTML = formatMarkdown(fullText);
+          outputEl.style.whiteSpace = 'pre-wrap';
+        },
+        function() {
+          resolve(fullText);
+        },
+        function(err) {
+          outputEl.innerHTML = '<span class="llm-error">Error: ' + escapeHTML(err) + '</span>';
+          reject(err);
+        }
+      );
+    });
+  }
+
+  function chatWithHistory(elementId, history, onDone) {
+    return new Promise(function(resolve, reject) {
+      var outputEl = document.getElementById(elementId);
+      if (!outputEl) { reject(new Error('Output element not found')); return; }
+
+      outputEl.innerHTML = '<span class="llm-loading">Thinking...</span>';
+
+      var fullText = '';
+
+      callAPI(
+        history,
+        function(chunk) {
+          fullText += chunk;
+          outputEl.innerHTML = formatMarkdown(fullText);
+          outputEl.style.whiteSpace = 'pre-wrap';
+        },
+        function() {
+          if (onDone) onDone();
+          resolve(fullText);
+        },
+        function(err) {
+          outputEl.innerHTML = '<span class="llm-error">Error: ' + escapeHTML(err) + '</span>';
+          reject(err);
+        }
+      );
+    });
+  }
+
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function formatMarkdown(text) {
+    // Extract code blocks first to protect them from escaping
+    var codeBlocks = [];
+    text = text.replace(/```([\s\S]*?)```/g, function(match, code) {
+      var placeholder = '%%CODEBLOCK' + codeBlocks.length + '%%';
+      codeBlocks.push('<pre class="llm-code-block"><code>' + escapeHTML(code) + '</code></pre>');
+      return placeholder;
+    });
+
+    // Escape remaining HTML
+    text = escapeHTML(text);
+
+    // Restore code blocks
+    for (var i = 0; i < codeBlocks.length; i++) {
+      text = text.replace('%%CODEBLOCK' + i + '%%', codeBlocks[i]);
+    }
+
+    // Inline code
+    text = text.replace(/`([^`]+)`/g, '<code class="llm-inline-code">$1</code>');
+    // Bold
+    text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // Line breaks
+    text = text.replace(/\n/g, '<br>');
+    return text;
+  }
+
+  return {
+    getConfig: getConfig,
+    callAPI: callAPI,
+    chat: chat,
+    chatWithHistory: chatWithHistory
+  };
+})();

lib/modal.js

@@ -0,0 +1,117 @@
+// Shared modal for LLM explanations
+var LLMModal = (function() {
+  var modalEl = null;
+  var contentEl = null;
+  var isOpen = false;
+
+  function createModal() {
+    if (modalEl) return;
+    modalEl = document.createElement('div');
+    modalEl.className = 'llm-modal-backdrop';
+    modalEl.style.cssText = 'display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; padding:2rem;';
+
+    var container = document.createElement('div');
+    container.className = 'llm-modal-container';
+    container.style.cssText = 'background:var(--white); border-radius:20px; max-width:700px; width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden;';
+
+    var header = document.createElement('div');
+    header.className = 'llm-modal-header';
+    header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; border-bottom:2px solid var(--pink-200);';
+
+    var title = document.createElement('h3');
+    title.className = 'llm-modal-title';
+    title.style.cssText = 'color:var(--pink-600); font-size:1.1rem; margin:0;';
+
+    var closeBtn = document.createElement('button');
+    closeBtn.className = 'llm-modal-close';
+    closeBtn.innerHTML = '✕';
+    closeBtn.style.cssText = 'background:none; border:none; color:var(--pink-500); font-size:1.5rem; cursor:pointer; padding:0.2rem 0.5rem; line-height:1; transition:color 0.2s;';
+    closeBtn.addEventListener('mouseenter', function() { this.style.color = 'var(--pink-700)'; });
+    closeBtn.addEventListener('mouseleave', function() { this.style.color = 'var(--pink-500)'; });
+    closeBtn.addEventListener('click', close);
+
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+
+    var body = document.createElement('div');
+    body.className = 'llm-modal-body';
+    body.id = 'llm-modal-content';
+    body.style.cssText = 'padding:1.5rem; overflow-y:auto; flex:1; font-size:0.95rem; line-height:1.7; color:var(--pink-900); white-space:pre-wrap;';
+
+    container.appendChild(header);
+    container.appendChild(body);
+    modalEl.appendChild(container);
+    document.body.appendChild(modalEl);
+
+    modalEl.addEventListener('click', function(e) {
+      if (e.target === modalEl) close();
+    });
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && isOpen) close();
+    });
+
+    modalEl.style.display = 'flex';
+  }
+
+  function open(titleText) {
+    if (!modalEl) createModal();
+    var title = modalEl.querySelector('.llm-modal-title');
+    title.textContent = titleText;
+    contentEl = document.getElementById('llm-modal-content');
+    contentEl.innerHTML = '<span class="llm-loading">Thinking...</span>';
+    modalEl.style.display = 'flex';
+    isOpen = true;
+  }
+
+  function update(text) {
+    if (contentEl) {
+      contentEl.innerHTML = formatMarkdown(text);
+    }
+  }
+
+  function done() {
+    // nothing to do, modal stays open
+  }
+
+  function error(msg) {
+    if (contentEl) {
+      contentEl.innerHTML = '<span class="llm-error">Error: ' + escapeHTML(msg) + '</span>';
+    }
+  }
+
+  function close() {
+    if (modalEl) {
+      modalEl.style.display = 'none';
+      isOpen = false;
+    }
+  }
+
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function formatMarkdown(text) {
+    // Escape HTML first
+    text = escapeHTML(text);
+    // Code blocks (must be before inline code)
+    text = text.replace(/```([\s\S]*?)```/g, '<pre class="llm-code-block"><code>$1</code></pre>');
+    // Inline code
+    text = text.replace(/`([^`]+)`/g, '<code class="llm-inline-code">$1</code>');
+    // Bold
+    text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // Line breaks
+    text = text.replace(/\n/g, '<br>');
+    return text;
+  }
+
+  return {
+    open: open,
+    update: update,
+    done: done,
+    error: error,
+    close: close
+  };
+})();

lib/search.js

@@ -0,0 +1,566 @@
+var Search = (function() {
+  var dropdownVisible = false;
+  var selectedIndex = -1;
+  var results = [];
+  var debounceTimer = null;
+  var currentInput = null;
+
+  // Page title mapping
+  var PAGE_TITLES = {
+    'index.html': 'Home',
+    'terminology.html': 'Terminology',
+    'techniques.html': 'Techniques',
+    'use-cases.html': 'Use Cases',
+    'model-types.html': 'Model Types',
+    'prompts.html': 'Prompt Guide',
+    'math.html': 'Math & Concepts',
+    'chat.html': 'Chat',
+    'image-gen.html': 'Image Gen'
+  };
+
+  // Content to skip during crawling
+  var SKIP_CONTENT = [
+    'AI Cheat Sheet',
+    'Toggle dark mode',
+    'Toggle menu',
+    'Send',
+    'Ask me anything about AI',
+    'Ask a Question',
+    'Ask anything about AI',
+    'Powered by your configured LLM',
+    'Try AI right now',
+    'Full Chat',
+    'Generate',
+    'Clear',
+    'Image Generation',
+    'Enter image prompt'
+  ];
+
+  function assignAnchors() {
+    var defCards = document.querySelectorAll('.def-card');
+    defCards.forEach(function(card) {
+      var h3 = card.querySelector('h3');
+      if (h3) {
+        var id = slugify(h3.textContent.trim());
+        if (id) card.setAttribute('id', id);
+      }
+    });
+
+    var tables = document.querySelectorAll('.glossary-table tbody tr');
+    tables.forEach(function(row) {
+      var firstTd = row.querySelector('td');
+      if (firstTd) {
+        var id = slugify(firstTd.textContent.trim());
+        if (id) row.setAttribute('id', id);
+      }
+    });
+
+    var useGrid = document.querySelector('.use-grid');
+    if (useGrid) {
+      var useCards = useGrid.querySelectorAll('.use-card');
+      useCards.forEach(function(card) {
+        var h3 = card.querySelector('h3');
+        if (h3) {
+          var id = slugify(h3.textContent.trim());
+          if (id) card.setAttribute('id', id);
+        }
+      });
+    }
+
+    var promptBlocks = document.querySelectorAll('.prompt-block');
+    promptBlocks.forEach(function(block) {
+      var h3 = block.querySelector('h3');
+      if (h3) {
+        var id = slugify(h3.textContent.trim());
+        if (id) block.setAttribute('id', id);
+      }
+    });
+  }
+
+  function init() {
+    var navInner = document.querySelector('.nav-inner');
+    if (!navInner) return;
+
+    var brand = navInner.querySelector('.nav-brand');
+    if (!brand) return;
+
+    assignAnchors();
+
+    // Create search wrapper
+    var searchWrapper = document.createElement('div');
+    searchWrapper.className = 'sidebar-search';
+    searchWrapper.style.cssText = 'position:relative; margin-top:0.5rem; margin-bottom:0.25rem;';
+
+    var searchInput = document.createElement('input');
+    searchInput.type = 'text';
+    searchInput.className = 'sidebar-search-input';
+    searchInput.placeholder = 'Search...';
+    searchInput.setAttribute('aria-label', 'Search all pages');
+    searchInput.autocomplete = 'off';
+
+    searchWrapper.appendChild(searchInput);
+
+    // Insert after brand
+    brand.parentNode.insertBefore(searchWrapper, brand.nextSibling);
+
+    currentInput = searchInput;
+
+    // Event listeners
+    searchInput.addEventListener('input', function(e) {
+      clearTimeout(debounceTimer);
+      var query = e.target.value.trim();
+      if (query.length === 0) {
+        hideDropdown();
+        return;
+      }
+      debounceTimer = setTimeout(function() {
+        performSearch(query);
+      }, 150);
+    });
+
+    searchInput.addEventListener('keydown', function(e) {
+      if (!dropdownVisible || results.length === 0) return;
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
+        updateSelection();
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, 0);
+        updateSelection();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (selectedIndex >= 0 && selectedIndex < results.length) {
+          navigateToResult(results[selectedIndex]);
+        } else if (results.length > 0) {
+          navigateToResult(results[0]);
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        hideDropdown();
+        searchInput.blur();
+      }
+    });
+
+    searchInput.addEventListener('focus', function() {
+      if (results.length > 0 && currentInput.value.trim().length > 0) {
+        showDropdown();
+      }
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(e) {
+      if (!searchWrapper.contains(e.target)) {
+        hideDropdown();
+      }
+    });
+
+    // Reposition on scroll and resize
+    function positionDropdown() {
+      var container = document.getElementById('searchResultsContainer');
+      if (!container || !dropdownVisible) return;
+      var rect = currentInput.getBoundingClientRect();
+      var vw = window.innerWidth;
+      container.style.top = (rect.bottom + 5) + 'px';
+      if (vw <= 900) {
+        container.style.left = '0';
+        container.style.width = '100vw';
+      } else {
+        container.style.left = rect.left + 'px';
+        container.style.width = '520px';
+      }
+    }
+
+    window.addEventListener('scroll', positionDropdown);
+    window.addEventListener('resize', positionDropdown);
+  }
+
+  function crawlPage(url, callback) {
+    fetch(url)
+      .then(function(response) { return response.text(); })
+      .then(function(html) {
+        var parser = new DOMParser();
+        var doc = parser.parseFromString(html, 'text/html');
+        var results = [];
+
+        // Get page title
+        var pageTitle = PAGE_TITLES[doc.title.replace(' - Cheat Sheet', '').replace('AI Cheat Sheet', '').trim()] || doc.title;
+
+        // Extract def-cards
+        var defCards = doc.querySelectorAll('.def-card');
+        defCards.forEach(function(card) {
+          var heading = card.querySelector('h3');
+          var p = card.querySelector('p');
+          var example = card.querySelector('.example');
+          var category = card.querySelector('.category');
+
+          if (!heading || !p) return;
+
+          var headingText = heading.textContent.trim();
+          var defText = p.textContent.trim();
+          var catText = category ? category.textContent.trim() : '';
+          var exText = example ? example.textContent.trim() : '';
+
+          var fullText = (catText + ' ' + headingText + ' ' + defText + ' ' + exText).trim();
+          if (fullText.length < 10) return;
+
+          // Skip boilerplate content
+          var skip = false;
+          for (var i = 0; i < SKIP_CONTENT.length; i++) {
+            if (fullText.indexOf(SKIP_CONTENT[i]) === 0) { skip = true; break; }
+          }
+          if (skip) return;
+
+          results.push({
+            page: pageTitle,
+            url: url,
+            heading: headingText,
+            category: catText,
+            snippet: defText,
+            fullText: fullText.toLowerCase(),
+            anchor: slugify(headingText)
+          });
+        });
+
+        // Extract table rows
+        var tables = doc.querySelectorAll('.glossary-table tbody tr');
+        tables.forEach(function(row) {
+          var tds = row.querySelectorAll('td');
+          if (tds.length < 2) return;
+
+          var acronym = tds[0].textContent.trim();
+          var meaning = tds[1].textContent.trim();
+
+          results.push({
+            page: pageTitle,
+            url: url,
+            heading: acronym,
+            category: 'Acronym',
+            snippet: meaning,
+            fullText: (acronym + ' ' + meaning).toLowerCase(),
+            anchor: slugify(acronym)
+          });
+        });
+
+        // Extract section headings for pages without def-cards (like use-cases, model-types)
+        var sections = doc.querySelectorAll('h2.section-title');
+        sections.forEach(function(h2) {
+          var sectionName = h2.textContent.trim();
+          // Check if there are cards under this section
+          var next = h2.nextElementSibling;
+          var cards = [];
+          while (next && !next.classList.contains('section-title')) {
+            if (next.classList && (next.classList.contains('card') || next.classList.contains('use-card') || next.classList.contains('prompt-block') || next.classList.contains('def-card'))) {
+              cards.push(next);
+            }
+            next = next.nextElementSibling;
+          }
+
+          cards.forEach(function(card) {
+            var h3 = card.querySelector('h3');
+            var p = card.querySelector('p');
+            if (!h3 || !p) return;
+
+            var headingText = h3.textContent.trim();
+            var cardText = p.textContent.trim();
+
+            // Skip if already captured as def-card
+            if (card.classList.contains('def-card')) return;
+
+            results.push({
+              page: pageTitle,
+              url: url,
+              heading: headingText,
+              category: sectionName,
+              snippet: cardText,
+              fullText: (sectionName + ' ' + headingText + ' ' + cardText).toLowerCase(),
+              anchor: slugify(headingText)
+            });
+          });
+        });
+
+        // For pages with .use-grid, extract use-cards
+        var useGrid = doc.querySelector('.use-grid');
+        if (useGrid) {
+          var useCards = useGrid.querySelectorAll('.use-card');
+          useCards.forEach(function(card) {
+            var h3 = card.querySelector('h3');
+            var p = card.querySelector('p');
+            if (!h3 || !p) return;
+            var headingText = h3.textContent.trim();
+            var cardText = p.textContent.trim();
+
+            results.push({
+              page: pageTitle,
+              url: url,
+              heading: headingText,
+              category: 'Use Case',
+              snippet: cardText,
+              fullText: (headingText + ' ' + cardText).toLowerCase(),
+              anchor: slugify(headingText)
+            });
+          });
+        }
+
+        // For prompt guide, extract prompt-blocks
+        var promptBlocks = doc.querySelectorAll('.prompt-block');
+        if (promptBlocks.length > 0) {
+          promptBlocks.forEach(function(block) {
+            var h3 = block.querySelector('h3');
+            var label = block.querySelector('.label');
+            var p = block.querySelector('p');
+
+            if (!h3) return;
+            var headingText = h3.textContent.trim();
+            var labelText = label ? label.textContent.trim() : '';
+            var cardText = p ? p.textContent.trim() : '';
+
+            results.push({
+              page: pageTitle,
+              url: url,
+              heading: headingText,
+              category: labelText || 'Prompt',
+              snippet: cardText,
+              fullText: (headingText + ' ' + labelText + ' ' + cardText).toLowerCase(),
+              anchor: slugify(headingText)
+            });
+          });
+        }
+
+        // For math page, extract def-cards (already handled above)
+        // For model-types, also grab comparison table
+        var modelTables = doc.querySelectorAll('.glossary-table');
+        if (modelTables.length > 0) {
+          modelTables.forEach(function(table) {
+            var rows = table.querySelectorAll('tbody tr');
+            rows.forEach(function(row) {
+              var tds = row.querySelectorAll('td');
+              if (tds.length === 0) return;
+              var rowText = '';
+              for (var i = 0; i < tds.length; i++) {
+                rowText += ' ' + tds[i].textContent.trim();
+              }
+              if (rowText.length < 5) return;
+
+              results.push({
+                page: pageTitle,
+                url: url,
+                heading: tds[0] ? tds[0].textContent.trim() : 'Table Entry',
+                category: 'Comparison',
+                snippet: rowText.trim(),
+                fullText: rowText.toLowerCase(),
+                anchor: slugify(tds[0] ? tds[0].textContent.trim() : 'Table Entry')
+              });
+            });
+          });
+        }
+
+        callback(results);
+      })
+      .catch(function() {
+        callback([]);
+      });
+  }
+
+  function crawlAllPages(callback) {
+    var pages = [
+      { url: '/index.html', title: 'Home' },
+      { url: '/pages/terminology.html', title: 'Terminology' },
+      { url: '/pages/techniques.html', title: 'Techniques' },
+      { url: '/pages/use-cases.html', title: 'Use Cases' },
+      { url: '/pages/model-types.html', title: 'Model Types' },
+      { url: '/pages/prompts.html', title: 'Prompt Guide' },
+      { url: '/pages/math.html', title: 'Math & Concepts' }
+    ];
+
+    var allResults = [];
+    var completed = 0;
+
+    if (pages.length === 0) {
+      callback(allResults);
+      return;
+    }
+
+    pages.forEach(function(page) {
+      crawlPage(page.url, function(results) {
+        allResults = allResults.concat(results);
+        completed++;
+        if (completed === pages.length) {
+          callback(allResults);
+        }
+      });
+    });
+  }
+
+  function performSearch(query) {
+    var q = query.toLowerCase().trim();
+    if (q.length === 0) { hideDropdown(); return; }
+
+    crawlAllPages(function(allResults) {
+      searchResults(allResults, q);
+    });
+  }
+
+  function searchResults(allResults, q) {
+    var qWords = q.split(/\s+/).filter(function(w) { return w.length > 0; });
+    var scored = [];
+
+    for (var i = 0; i < allResults.length; i++) {
+      var item = allResults[i];
+      var text = item.fullText || '';
+      var score = 0;
+
+      if (text.indexOf(q) !== -1) score += 100;
+
+      for (var j = 0; j < qWords.length; j++) {
+        if (text.indexOf(qWords[j]) !== -1) score += 10;
+        if (item.heading && item.heading.toLowerCase().indexOf(qWords[j]) === 0) score += 20;
+        if (item.category && item.category.toLowerCase().indexOf(qWords[j]) !== -1) score += 5;
+      }
+
+      if (score > 0) {
+        scored.push({ item: item, score: score });
+      }
+    }
+
+    scored.sort(function(a, b) { return b.score - a.score; });
+    var topResults = scored.slice(0, 10).map(function(s) { return s.item; });
+    displayResults(topResults, q);
+  }
+
+  function highlightText(text, query) {
+    if (!text || !query) return escapeHTML(text);
+    var escaped = escapeHTML(text);
+    var qWords = query.toLowerCase().split(/\s+/).filter(function(w) { return w.length > 0; });
+
+    for (var i = 0; i < qWords.length; i++) {
+      var word = qWords[i];
+      var regex = new RegExp('(' + escapeRegex(word) + ')', 'gi');
+      escaped = escaped.replace(regex, '<mark class="search-highlight">$1</mark>');
+    }
+
+    return escaped;
+  }
+
+  function escapeRegex(str) {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function slugify(text) {
+    return text
+      .toLowerCase()
+      .replace(/\(.*?\)/g, function(match) { return match.replace(/[()]/g, ''); })
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
+  function displayResults(foundResults, query) {
+    results = foundResults;
+    selectedIndex = -1;
+
+    if (results.length === 0) {
+      showDropdown();
+      var container = document.getElementById('searchResultsContainer');
+      if (container) {
+        container.innerHTML = '<div class="search-no-results">No results found for "' + escapeHTML(query) + '"</div>';
+      }
+      return;
+    }
+
+    var container = document.getElementById('searchResultsContainer');
+    var html = '';
+    for (var i = 0; i < results.length; i++) {
+      var r = results[i];
+      var categoryLabel = r.category ? '<span class="search-result-category">' + escapeHTML(r.category) + '</span>' : '';
+      var highlightedSnippet = highlightText(r.snippet, query);
+
+      html += '<div class="search-result-item" data-index="' + i + '" data-url="' + escapeHTML(r.url) + '" data-anchor="' + escapeHTML(r.anchor || '') + '">';
+      html += '<div class="search-result-title">';
+      html += '<span class="search-result-page">' + escapeHTML(r.page) + '</span>';
+      html += categoryLabel;
+      html += '</div>';
+      html += '<div class="search-result-heading">' + highlightText(r.heading, query) + '</div>';
+      html += '<div class="search-result-snippet">' + highlightedSnippet + '</div>';
+      html += '</div>';
+    }
+    container.innerHTML = html;
+    showDropdown();
+
+    // Attach click handlers
+    var items = container.querySelectorAll('.search-result-item');
+    for (var j = 0; j < items.length; j++) {
+      items[j].addEventListener('click', function() {
+        var url = this.getAttribute('data-url');
+        var anchor = this.getAttribute('data-anchor');
+        navigateToResult({ url: url, anchor: anchor });
+      });
+      items[j].addEventListener('mouseenter', function() {
+        var idx = parseInt(this.getAttribute('data-index'), 10);
+        selectedIndex = idx;
+        updateSelection();
+      });
+    }
+  }
+
+  function updateSelection() {
+    var items = document.querySelectorAll('.search-result-item');
+    for (var i = 0; i < items.length; i++) {
+      if (i === selectedIndex) {
+        items[i].classList.add('active');
+        items[i].scrollIntoView({ block: 'nearest' });
+      } else {
+        items[i].classList.remove('active');
+      }
+    }
+  }
+
+  function showDropdown() {
+    var container = document.getElementById('searchResultsContainer');
+    if (container) {
+      var rect = currentInput.getBoundingClientRect();
+      var vw = window.innerWidth;
+      var sidebarWidth = 240;
+
+      if (vw <= 900) {
+        container.style.left = '0';
+        container.style.width = '100vw';
+      } else {
+        container.style.left = rect.left + 'px';
+        container.style.width = '520px';
+      }
+      container.style.top = (rect.bottom + 5) + 'px';
+      container.style.display = 'block';
+      dropdownVisible = true;
+    }
+  }
+
+  function hideDropdown() {
+    var container = document.getElementById('searchResultsContainer');
+    if (container) {
+      container.style.display = 'none';
+    }
+    dropdownVisible = false;
+    selectedIndex = -1;
+  }
+
+  function navigateToResult(result) {
+    hideDropdown();
+    if (currentInput) currentInput.blur();
+    var target = result.url;
+    if (result.anchor) {
+      target = result.url + '#' + result.anchor;
+    }
+    window.location.href = target;
+  }
+
+  return {
+    init: init
+  };
+})();

pages/chat.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="index.html" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html">Terminology</a>
       <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html" class="active">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -87,6 +119,12 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script src="../lib/marked.min.js"></script>
+
 <script>
 (function(){
   var chatMessages = document.getElementById('chatMessages');
@@ -97,6 +135,12 @@
     var apiTokenInput = document.getElementById('apiToken');
     var modelNameInput = document.getElementById('modelName');
 
+  // Parse markdown in initial welcome message
+  var initialBubble = chatMessages.querySelector('.message-bubble p');
+  if(initialBubble) {
+    initialBubble.innerHTML = marked.parseInline(initialBubble.textContent);
+  }
+
     // Restore saved settings
     var savedToken = localStorage.getItem('apiToken');
     if(savedToken) apiTokenInput.value = savedToken;
@@ -121,7 +165,11 @@
 
     var p = document.createElement('p');
     p.className = 'message-content';
-    p.textContent = content;
+    if(role === 'assistant') {
+      p.innerHTML = marked.parse(content);
+    } else {
+      p.textContent = content;
+    }
     bubble.appendChild(p);
 
     msgDiv.appendChild(avatar);
@@ -239,7 +287,7 @@
                 var delta = json.choices && json.choices[0] && json.choices[0].delta;
                 if(delta && delta.content) {
                   streamContent += delta.content;
-                  contentEl.textContent = streamContent;
+                  contentEl.innerHTML = marked.parse(streamContent);
                   chatMessages.scrollTop = chatMessages.scrollHeight;
                 }
               } catch(e) {
@@ -281,7 +329,7 @@
     chatMessages.innerHTML = '';
     var welcomeMsg = document.createElement('div');
     welcomeMsg.className = 'message assistant-message';
-    welcomeMsg.innerHTML = '<div class="message-avatar">AI</div><div class="message-bubble"><p>Hello! Chat cleared. How can I help you?</p></div>';
+    welcomeMsg.innerHTML = '<div class="message-avatar">AI</div><div class="message-bubble"><p>' + marked.parse('Hello! Chat cleared. How can I help you?') + '</p></div>';
     chatMessages.appendChild(welcomeMsg);
   });
 

pages/image-gen.html

@@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Generation - AI Cheat Sheet</title>
+  <link rel="stylesheet" href="../css/style.css">
+</head>
+<body>
+
+<nav>
+  <div class="nav-inner">
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
+    <div class="nav-links">
+      <a href="/pages/terminology.html">Terminology</a>
+      <a href="/pages/techniques.html">Techniques</a>
+      <a href="/pages/use-cases.html">Use Cases</a>
+      <a href="/pages/model-types.html">Model Types</a>
+      <a href="/pages/prompts.html">Prompt Guide</a>
+      <a href="/pages/math.html">Math & Concepts</a>
+      <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html" class="active">Image Gen</a>
+    </div>
+    <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
+  </div>
+</nav>
+
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
+<script>
+(function(){
+  var btn = document.getElementById('darkToggle');
+  var saved = localStorage.getItem('theme');
+  if(saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)){
+    document.documentElement.setAttribute('data-theme','dark');
+    btn.textContent = '☀️';
+  }
+  btn.addEventListener('click', function(){
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    if(isDark){
+      document.documentElement.removeAttribute('data-theme');
+      btn.textContent = '🌙';
+      localStorage.setItem('theme','light');
+    } else {
+      document.documentElement.setAttribute('data-theme','dark');
+      btn.textContent = '☀️';
+      localStorage.setItem('theme','dark');
+    }
+  });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
+})();
+</script>
+
+<div class="hero">
+  <h1>Image Generation</h1>
+  <p>Generate images from text prompts using AI.</p>
+</div>
+
+<div class="container">
+  <div class="chat-config">
+    <div class="config-row">
+      <label for="apiUrl">API Endpoint</label>
+      <input type="text" id="apiUrl" value="https://image-gen.reeselink.com/v1">
+    </div>
+    <div class="config-row">
+      <label for="apiToken">API Token</label>
+      <input type="password" id="apiToken" placeholder="Enter your API token">
+    </div>
+    <div class="config-row">
+      <label for="modelName">Model</label>
+      <input type="text" id="modelName" value="flux">
+    </div>
+  </div>
+
+  <div class="image-gen-prompt-area">
+    <label for="promptInput">Prompt</label>
+    <textarea id="promptInput" placeholder="Describe the image you want to generate..." rows="3"></textarea>
+    <button id="generateBtn" class="generate-btn">Generate</button>
+  </div>
+
+  <div class="image-gen-results" id="imageResults">
+    <div class="image-gen-placeholder" id="imagePlaceholder">
+      <p>Your generated image will appear here.</p>
+    </div>
+  </div>
+</div>
+
+<footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
+
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+
+<script>
+(function(){
+  var apiUrlInput = document.getElementById('apiUrl');
+  var apiTokenInput = document.getElementById('apiToken');
+  var modelNameInput = document.getElementById('modelName');
+  var promptInput = document.getElementById('promptInput');
+  var generateBtn = document.getElementById('generateBtn');
+  var imageResults = document.getElementById('imageResults');
+  var imagePlaceholder = document.getElementById('imagePlaceholder');
+
+  var savedToken = localStorage.getItem('imageGenToken');
+  if(savedToken) apiTokenInput.value = savedToken;
+  var savedModel = localStorage.getItem('imageGenModel');
+  if(savedModel) modelNameInput.value = savedModel;
+  var savedUrl = localStorage.getItem('imageGenUrl');
+  if(savedUrl) apiUrlInput.value = savedUrl;
+
+  var isGenerating = false;
+
+  function setLoading(loading) {
+    isGenerating = loading;
+    generateBtn.disabled = loading;
+    generateBtn.textContent = loading ? 'Generating...' : 'Generate';
+    promptInput.disabled = loading;
+  }
+
+  function showImage(dataUrl, prompt) {
+    if(imagePlaceholder) {
+      imagePlaceholder.style.display = 'none';
+    }
+
+    var existingImages = imageResults.querySelectorAll('.generated-image-card');
+    for(var i = 0; i < existingImages.length; i++) {
+      existingImages[i].remove();
+    }
+
+    var card = document.createElement('div');
+    card.className = 'generated-image-card';
+
+    var promptText = document.createElement('p');
+    promptText.className = 'generated-image-prompt';
+    promptText.textContent = prompt;
+
+    var imgContainer = document.createElement('div');
+    imgContainer.className = 'generated-image-container';
+
+    var img = document.createElement('img');
+    img.className = 'generated-image';
+    img.src = dataUrl;
+    img.alt = prompt;
+    imgContainer.appendChild(img);
+
+    var actions = document.createElement('div');
+    actions.className = 'generated-image-actions';
+
+    var copyBtn = document.createElement('button');
+    copyBtn.className = 'image-action-btn';
+    copyBtn.textContent = 'Copy Image';
+    copyBtn.addEventListener('click', function() {
+      copyToClipboard(dataUrl, copyBtn);
+    });
+
+    var downloadBtn = document.createElement('button');
+    downloadBtn.className = 'image-action-btn';
+    downloadBtn.textContent = 'Download';
+    downloadBtn.addEventListener('click', function() {
+      var a = document.createElement('a');
+      a.href = dataUrl;
+      a.download = 'generated-image-' + Date.now() + '.png';
+      a.click();
+    });
+
+    actions.appendChild(copyBtn);
+    actions.appendChild(downloadBtn);
+
+    card.appendChild(promptText);
+    card.appendChild(imgContainer);
+    card.appendChild(actions);
+
+    imageResults.appendChild(card);
+    imageResults.scrollTop = imageResults.scrollHeight;
+  }
+
+  function copyToClipboard(dataUrl, copyBtn) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', dataUrl, true);
+    xhr.responseType = 'blob';
+    xhr.onload = function() {
+      var blob = xhr.response;
+      if(navigator.clipboard && navigator.clipboard.write) {
+        navigator.clipboard.write([
+          new ClipboardItem({ 'image/png': blob })
+        ]).then(function() {
+          copyBtn.textContent = 'Copied!';
+          setTimeout(function() {
+            copyBtn.textContent = 'Copy Image';
+          }, 2000);
+        }).catch(function() {
+          fallbackCopy(dataUrl);
+        });
+      } else {
+        fallbackCopy(dataUrl);
+      }
+    };
+    xhr.send();
+  }
+
+  function fallbackCopy(dataUrl) {
+    var textarea = document.createElement('textarea');
+    textarea.value = dataUrl;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    alert('Image URL copied to clipboard.');
+  }
+
+  function showError(message) {
+    if(imagePlaceholder) {
+      imagePlaceholder.style.display = 'block';
+      imagePlaceholder.innerHTML = '<p class="image-gen-error">' + message + '</p>';
+    }
+  }
+
+  function generate() {
+    if(isGenerating) return;
+
+    var prompt = promptInput.value.trim();
+    if(!prompt) {
+      alert('Please enter a prompt.');
+      promptInput.focus();
+      return;
+    }
+
+    var model = modelNameInput.value.trim();
+    if(!model) {
+      alert('Please enter a model name.');
+      modelNameInput.focus();
+      return;
+    }
+
+    setLoading(true);
+    if(imagePlaceholder) {
+      imagePlaceholder.style.display = 'block';
+      imagePlaceholder.innerHTML = '<p class="image-gen-loading">Generating image... This may take a few seconds.</p>';
+    }
+
+    var existingImages = imageResults.querySelectorAll('.generated-image-card');
+    for(var i = 0; i < existingImages.length; i++) {
+      existingImages[i].remove();
+    }
+
+    var apiEndpoint = apiUrlInput.value.trim().replace(/\/+$/, '');
+    var apiToken = apiTokenInput.value.trim();
+
+    var headers = { 'Content-Type': 'application/json' };
+    if(apiToken) {
+      headers['Authorization'] = 'Bearer ' + apiToken;
+    }
+
+    fetch(apiEndpoint + '/images/generations', {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({
+        prompt: prompt,
+        model: model,
+        n: 1,
+        size: '512x512'
+      })
+    })
+    .then(function(response) {
+      if(!response.ok) {
+        return response.text().then(function(text) {
+          throw new Error('API error ' + response.status + ': ' + (text || response.statusText));
+        });
+      }
+      return response.json();
+    })
+    .then(function(data) {
+      setLoading(false);
+      if(data.data && data.data[0]) {
+        var imageData = data.data[0];
+        var dataUrl;
+        if(imageData.url) {
+          dataUrl = imageData.url;
+        } else if(imageData.b64_json) {
+          dataUrl = 'data:image/png;base64,' + imageData.b64_json;
+        } else {
+          showError('Unexpected response format from the API.');
+          return;
+        }
+        showImage(dataUrl, prompt);
+      } else {
+        showError('No image returned from the API.');
+      }
+    })
+    .catch(function(err) {
+      setLoading(false);
+      showError('Error: ' + err.message);
+    });
+  }
+
+  generateBtn.addEventListener('click', generate);
+
+  promptInput.addEventListener('keydown', function(e) {
+    if(e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      generate();
+    }
+  });
+
+  promptInput.addEventListener('input', function() {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+  });
+
+  apiTokenInput.addEventListener('change', function() {
+    localStorage.setItem('imageGenToken', this.value);
+  });
+  modelNameInput.addEventListener('change', function() {
+    localStorage.setItem('imageGenModel', this.value);
+  });
+  apiUrlInput.addEventListener('change', function() {
+    localStorage.setItem('imageGenUrl', this.value);
+  });
+
+  promptInput.focus();
+})();
+</script>
+
+</body>
+</html>

pages/math.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html">Terminology</a>
       <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html" class="active">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -60,32 +92,38 @@
     <h3>Attention Mechanism</h3>
     <p>A way for the model to weigh the importance of different parts of the input when processing each token. "Attention is all you need" — the 2017 paper that launched the transformer revolution.</p>
     <div class="example"><strong>Analogy:</strong> When reading a sentence, you naturally pay more attention to certain words. "The cat that chased the mouse hid" — you attend to "cat" when processing "hid".</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Attention Mechanism', 'Walk through attention with a concrete numerical example. If we have tokens [A, B, C] with embeddings [1,0,0], [0,1,0], [0,0,1], show how Q, K, V are computed and how attention weights are calculated step by step.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Self-Attention</h3>
     <p>Each token in a sequence attends to every other token, creating rich contextual representations. The core of the transformer architecture.</p>
     <div class="example"><strong>Math:</strong> Attention(Q, K, V) = softmax(QKᵀ / √dₖ) V</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Self-Attention', 'Walk through the self-attention formula step by step with a simple example. Show how Q, K, V matrices are computed, how the dot product creates attention scores, how softmax normalizes them, and how the final output is a weighted sum of V.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Multi-Head Attention</h3>
     <p>Running multiple self-attention operations in parallel, each learning different types of relationships. Like having multiple "lenses" to view the input.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Multi-Head Attention', 'Walk through multi-head attention. If we have 4 heads with d_model=128, show how the model splits into 4 heads of dimension 32, runs self-attention on each, concatenates them, and projects back to dimension 128.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Positional Encoding</h3>
     <p>Since transformers process all tokens simultaneously (unlike RNNs), position information must be added explicitly so the model knows word order.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Positional Encoding', 'Walk through positional encoding. Show how sinusoidal positional encodings work with a concrete example. If we have positions 0, 1, 2, 3 and dimension 4, show the actual encoding vectors and explain why sin/cos are used.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Feed-Forward Network (FFN)</h3>
     <p>After attention, each token passes through a small neural network that transforms its representation. Usually two linear layers with a non-linearity in between.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Feed-Forward Network (FFN)', 'Walk through the FFN in a transformer. Show the dimensions: if d_model=512 and d_ff=2048, show how each token goes through Linear(512, 2048) → ReLU → Linear(2048, 512). Give a concrete numerical example.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Layer Normalization</h3>
     <p>A technique to stabilize training by normalizing the activations of each layer. Helps gradients flow more smoothly through deep networks.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Layer Normalization', 'Walk through layer normalization step by step. If a layer outputs [2, -1, 3, 0] for a single token, show how to compute the mean, variance, normalize, and then apply the learnable parameters γ and β.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Training Concepts</h2>
@@ -94,31 +132,37 @@
     <h3>Loss Function</h3>
     <p>A mathematical measure of how far the model's predictions are from the correct answers. Training = minimizing this value. For language models, cross-entropy loss is standard.</p>
     <div class="example"><strong>Example:</strong> If the correct next word is "cat" but the model assigns it 10% probability, the loss is high. If it assigns 90%, the loss is low.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Loss Function (Cross-Entropy)', 'Walk through cross-entropy loss with a concrete example. If the true class is "cat" and the model outputs probabilities [dog: 0.5, cat: 0.3, bird: 0.2], show the exact calculation of -log(0.3) and explain what this number means.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Gradient Descent</h3>
     <p>The optimization algorithm that adjusts model weights in the direction that reduces loss. "Descent" because you're moving down the loss surface toward a minimum.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Gradient Descent', 'Walk through gradient descent with a concrete example. If loss(w) = (w - 3)², compute the gradient, show a weight update with learning rate 0.1 starting from w=0. Do 3 iterations and show how w approaches 3.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Adam Optimizer</h3>
     <p>The most popular optimizer for training deep learning models. Combines momentum (acceleration) with adaptive learning rates (per-parameter tuning).</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Adam Optimizer', 'Walk through Adam optimizer step by step. Starting from gradient g=2 at step t=1, show how m (momentum) and v (variance) are computed with β1=0.9, β2=0.999, then show bias correction and the parameter update with lr=0.001.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Gradient</h3>
     <p>A vector of partial derivatives showing the direction and rate of steepest increase of the loss. We move in the opposite direction to minimize loss.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Gradient', 'Walk through what a gradient is with a concrete example. If loss = w1² + 2w2², compute ∂loss/∂w1 and ∂loss/∂w2 at the point (w1=1, w2=2). Show what the gradient vector looks like and what direction we move in.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Regularization</h3>
     <p>Techniques to prevent overfitting: dropout (randomly deactivating neurons), weight decay (penalizing large weights), and early stopping.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Regularization', 'Walk through L2 regularization (weight decay) with a concrete example. If loss = MSE + λ·Σw², show how the gradient changes with λ=0.01 vs λ=0. What happens to the weights over training?')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Batch Normalization</h3>
     <p>Normalizing layer inputs across each mini-batch. Reduces internal covariate shift and allows higher learning rates.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Batch Normalization', 'Walk through batch normalization step by step. If a mini-batch has activations [1, 3, 5, 7], show how to compute the batch mean and variance, normalize, and apply γ=1.5, β=0.5. Show the final output.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Generation & Sampling</h2>
@@ -128,32 +172,38 @@
     <p>Controls randomness in text generation. Low (0.2) = focused and deterministic. High (0.9) = creative and varied. 1.0 = standard sampling.</p>
     <div class="example"><strong>Low temp:</strong> Technical documentation, code generation<br>
       <strong>High temp:</strong> Creative writing, brainstorming</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Temperature in Sampling', 'Walk through temperature with a concrete example. If a model outputs logits [2.0, 1.0, 0.0] for tokens [cat, dog, bird], show the probabilities at temperature=0.1, temperature=1.0, and temperature=2.0. Show the softmax math step by step.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Top-K Sampling</h3>
     <p>At each step, only consider the K most likely next tokens. Reduces weird or irrelevant outputs.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Top-K Sampling', 'Walk through Top-K sampling with an example. If a model outputs probabilities [cat: 0.4, dog: 0.25, bird: 0.15, fish: 0.1, car: 0.05, house: 0.03, tree: 0.02], show what happens with K=3 vs K=10. Show the renormalization.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Top-P (Nucleus) Sampling</h3>
     <p>Only consider tokens whose cumulative probability reaches P. More adaptive than Top-K — automatically adjusts the number of candidates.</p>
     <div class="example"><strong>Top-P = 0.9:</strong> Include the smallest set of tokens that together cover 90% probability mass.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Top-P (Nucleus) Sampling', 'Walk through Top-P sampling with the same example: [cat: 0.4, dog: 0.25, bird: 0.15, fish: 0.1, car: 0.05, house: 0.03, tree: 0.02]. Show which tokens are included at P=0.9 and P=0.95, and how the probabilities are renormalized.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Greedy Decoding</h3>
     <p>Always pick the most likely next token. Fastest but can get stuck in repetitive loops. Often produces the most coherent output for factual tasks.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Greedy Decoding', 'Walk through greedy decoding vs beam search with a concrete example. If at step 1 the model outputs [the: 0.5, a: 0.3, I: 0.2], show what greedy picks. At step 2, if the continuation probabilities depend on the first token, show how greedy might get stuck vs beam search.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Beam Search</h3>
     <p>Instead of picking the single best token at each step, keep the top B sequences and pick the best overall. Better quality but slower.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Beam Search', 'Walk through beam search with beam size 2. Show how at each step, B sequences are expanded, pruned, and scored. Use a simple example with 3 possible tokens at each step. Show how beam search might find a better overall sequence than greedy.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Logits</h3>
     <p>The raw, unnormalized scores the model outputs for each token before softmax. Can be adjusted for bias correction, repetition penalties, and custom sampling.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Logits', 'Walk through logits step by step. If the model outputs logits [2.0, 1.0, 0.0] for [cat, dog, bird], show: 1) softmax to get probabilities, 2) log to get log-probabilities, 3) how temperature scales logits, 4) how top-k filtering modifies them.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Evaluation Metrics</h2>
@@ -162,32 +212,32 @@
     <h3>Perplexity</h3>
     <p>Measures how "surprised" the model is by test data. Lower is better. A perplexity of 100 means the model is as confused as choosing uniformly from 100 options.</p>
     <div class="example"><strong>Example:</strong> Perplexity 5 on a language model means, on average, it's as uncertain as picking from 5 equally likely options at each step.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Perplexity', 'Walk through perplexity calculation step by step. If a model assigns probabilities [0.9, 0.8, 0.7, 0.6] to 4 correct tokens, show: 1) cross-entropy loss calculation, 2) how perplexity = 2^cross-entropy, 3) the final perplexity value and what it means.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>Accuracy</h3>
     <p>Percentage of correct predictions. Simple but can be misleading for imbalanced datasets.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Accuracy', 'Walk through accuracy with a concrete example. If you have 1000 examples where 950 are class A and 50 are class B, and your model predicts everything as class A, what is the accuracy? Why is this misleading? Show a better metric.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>Precision & Recall</h3>
     <p>Precision = of all positive predictions, how many were correct? Recall = of all actual positives, how many did we find?</p>
     <div class="example"><strong>Spam filter:</strong> High precision = few legitimate emails flagged. High recall = few spam emails missed.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Precision & Recall', 'Walk through precision and recall with a spam filter example. If the filter flags 100 emails as spam, and 80 are actually spam (20 are legitimate), and there are 10 total spam emails in the inbox, compute precision, recall, and F1.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>F1 Score</h3>
     <p>The harmonic mean of precision and recall. A single metric that balances both.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 F1 Score', 'Walk through F1 score calculation. If precision = 0.8 and recall = 0.6, show: 1) the harmonic mean formula, 2) the step-by-step calculation, 3) why harmonic mean is used instead of arithmetic mean, 4) what F1 = 0.7 means.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>BLEU / ROUGE</h3>
     <p>Metrics for evaluating text generation quality by comparing model output to reference text. BLEU counts n-gram overlap (used for translation). ROUGE is similar but common for summarization.</p>
-  </div>
+    <button class="llm-btn" onclick="walkThrough('📐 BLEU Score', 'Walk through BLEU score calculation. If the model outputs "the cat sat on the mat" and the reference is "the cat sat on the mat", compute 1-gram, 2-gram, 3-gram, and 4-gram precision. Show the final BLEU score with the brevity penalty.')"><span class="icon">📐</span> Walk me through</button>
-  <div class="def-card">
-    <span class="category">Metrics</span>
-    <h3>Tokens per Second (TPS)</h3>
-    <p>How many tokens the model generates per second. Measures inference speed. Typical range: 20-100+ TPS depending on model size and hardware.</p>
   </div>
 
   <h2 class="section-title">Key Formulas</h2>
@@ -210,5 +260,38 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  function walkThrough(title, prompt) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI math tutor. Walk through the requested concept step by step with concrete numerical examples. Show every calculation explicitly. Use code blocks for math. Explain each step in plain language. Make it feel like a patient teacher working through a problem.' },
+      { role: 'user', content: prompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.walkThrough = walkThrough;
+})();
+</script>
+
 </body>
 </html>

pages/model-types.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html">Terminology</a>
       <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -60,24 +92,28 @@
     <h3>LLM (Large Language Model)</h3>
     <p>Neural networks based on the transformer architecture, trained on massive text corpora. They predict the next token given a sequence, enabling fluency in language tasks.</p>
     <div class="example"><strong>Examples:</strong> GPT-4, Claude, Gemini, Llama 3, Mistral, Qwen</div>
+    <button class="llm-btn" onclick="explainModel('💬 LLM (Large Language Model)', 'Neural networks based on the transformer architecture, trained on massive text corpora. They predict the next token given a sequence.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Transformer</span>
     <h3>Encoder-Only Models</h3>
     <p>Transformers designed to understand input (not generate text). Used for classification, sentiment analysis, and embedding generation.</p>
     <div class="example"><strong>Examples:</strong> BERT, RoBERTa, DeBERTa</div>
+    <button class="llm-btn" onclick="explainModel('💬 Encoder-Only Models', 'Transformers designed to understand input (not generate text). Used for classification, sentiment analysis, and embedding generation.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Transformer</span>
     <h3>Decoder-Only Models</h3>
     <p>Transformers designed to generate text autoregressively — the dominant architecture for modern LLMs.</p>
     <div class="example"><strong>Examples:</strong> GPT series, Claude, Llama, Mistral</div>
+    <button class="llm-btn" onclick="explainModel('💬 Decoder-Only Models', 'Transformers designed to generate text autoregressively — the dominant architecture for modern LLMs.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Transformer</span>
     <h3>Encoder-Decoder Models</h3>
     <p>Transformers with both encoder and decoder, used for tasks that transform input to output (translation, summarization).</p>
     <div class="example"><strong>Examples:</strong> T5, BART, Flan-T5</div>
+    <button class="llm-btn" onclick="explainModel('💬 Encoder-Decoder Models', 'Transformers with both encoder and decoder, used for tasks that transform input to output.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Vision Models</h2>
@@ -86,24 +122,28 @@
     <h3>CNN (Convolutional Neural Network)</h3>
     <p>Neural networks with layers that scan images with small filters, detecting edges, textures, and patterns hierarchically. The backbone of computer vision for years.</p>
     <div class="example"><strong>Examples:</strong> ResNet, EfficientNet, VGG</div>
+    <button class="llm-btn" onclick="explainModel('💬 CNN', 'Neural networks with layers that scan images with small filters, detecting edges, textures, and patterns hierarchically.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Vision</span>
     <h3>ViT (Vision Transformer)</h3>
     <p>Applying the transformer architecture to images by treating image patches as tokens. Often outperforms CNNs at scale.</p>
     <div class="example"><strong>Examples:</strong> CLIP, DINOv2, ViT-Base</div>
+    <button class="llm-btn" onclick="explainModel('💬 ViT', 'Applying the transformer architecture to images by treating image patches as tokens.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Vision</span>
     <h3>Diffusion Models</h3>
     <p>Models that generate images by iteratively denoising random noise. The architecture behind most state-of-the-art image generators.</p>
     <div class="example"><strong>Examples:</strong> Stable Diffusion, DALL-E 3, Midjourney</div>
+    <button class="llm-btn" onclick="explainModel('💬 Diffusion Models', 'Models that generate images by iteratively denoising random noise.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Vision</span>
     <h3>Multimodal Models</h3>
     <p>Models that process multiple input types — text, images, audio — and can generate outputs across modalities.</p>
     <div class="example"><strong>Examples:</strong> GPT-4V (vision), Claude 3, Gemini, Qwen-VL</div>
+    <button class="llm-btn" onclick="explainModel('💬 Multimodal Models', 'Models that process multiple input types — text, images, audio — and can generate outputs across modalities.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Generative Models</h2>
@@ -112,18 +152,21 @@
     <h3>GAN (Generative Adversarial Network)</h3>
     <p>Two networks compete: a generator creates fake data, and a discriminator tries to detect fakes. Over time, both improve until the generator is indistinguishable from real data.</p>
     <div class="example"><strong>Example:</strong> Creating photorealistic faces that don't exist (StyleGAN).</div>
+    <button class="llm-btn" onclick="explainModel('💬 GAN', 'Two networks compete: a generator creates fake data, and a discriminator tries to detect fakes.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Generative</span>
     <h3>VQ-VAE (Vector Quantized VAE)</h3>
     <p>Combines autoencoders with discrete codebooks to learn compressed representations. Used as a foundation for autoregressive generation.</p>
     <div class="example"><strong>Example:</strong> MusicGen (music generation), SoundStream (audio compression)</div>
+    <button class="llm-btn" onclick="explainModel('💬 VQ-VAE', 'Combines autoencoders with discrete codebooks to learn compressed representations.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Generative</span>
     <h3>Flow Models</h3>
     <p>Models that learn a reversible transformation between data and noise, enabling exact likelihood computation and fast generation.</p>
     <div class="example"><strong>Examples:</strong> Glow, RealNVP, Rectified Flow</div>
+    <button class="llm-btn" onclick="explainModel('💬 Flow Models', 'Models that learn a reversible transformation between data and noise.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Other Architectures</h2>
@@ -132,24 +175,28 @@
     <h3>RNN / LSTM</h3>
     <p>Recurrent networks that process sequences step-by-step, maintaining a hidden state. Largely replaced by transformers but still used in some applications.</p>
     <div class="example"><strong>Use case:</strong> Time series prediction, speech recognition</div>
+    <button class="llm-btn" onclick="explainModel('💬 RNN/LSTM', 'Recurrent networks that process sequences step-by-step, maintaining a hidden state.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Mixture of Experts (MoE)</h3>
     <p>A model with multiple "expert" subnetworks. A routing mechanism selects which experts to use for each input, enabling large models that are computationally efficient at inference.</p>
     <div class="example"><strong>Examples:</strong> Mixtral 8x7B, Google's Switch Transformer, Grok-1</div>
+    <button class="llm-btn" onclick="explainModel('💬 Mixture of Experts (MoE)', 'A model with multiple expert subnetworks. A routing mechanism selects which experts to use for each input.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Retrieval Models</h3>
     <p>Models designed specifically for semantic search — finding the most relevant documents for a query from a large corpus.</p>
     <div class="example"><strong>Examples:</strong> BGE, E5, Cohere embed models</div>
+    <button class="llm-btn" onclick="explainModel('💬 Retrieval Models', 'Models designed specifically for semantic search — finding the most relevant documents for a query.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Small Language Models (SLMs)</h3>
     <p>Compact language models (under 7B parameters) optimized for edge devices and low-latency applications. Getting remarkably capable.</p>
     <div class="example"><strong>Examples:</strong> Phi-3, Gemma 2B, Qwen 1.5B, MicroLlama</div>
+    <button class="llm-btn" onclick="explainModel('💬 Small Language Models (SLMs)', 'Compact language models (under 7B parameters) optimized for edge devices and low-latency applications.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Model Comparison</h2>
@@ -171,9 +218,97 @@
     </tbody>
   </table>
 
+  <h2 class="section-title">AI Assistant</h2>
+  <div class="def-card">
+    <span class="category">Interactive</span>
+    <h3>🤖 Which Model Should I Use?</h3>
+    <p>Describe your task, constraints, and goals — the AI will recommend the best model architecture and specific model from the comparison table.</p>
+    <div class="llm-mini-chat" id="model-chat">
+      <div class="llm-mini-chat-header"><h4>🤖 Model Advisor</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
+      <div class="llm-mini-chat-input-row">
+        <input class="llm-mini-chat-input" id="model-input" placeholder="e.g., I need to classify customer reviews by sentiment, processing 10,000 per day..." />
+        <button class="llm-mini-chat-send" onclick="askModelAdvisor()">Ask</button>
+      </div>
+      <div class="llm-mini-chat-output" id="model-output" style="margin-top: 0.8rem;"></div>
+    </div>
+  </div>
+
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  function explainModel(title, definition) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI educator explaining model architectures. Explain how this model type works, what makes it unique, when to use it vs alternatives, and concrete examples. Use analogies and keep it practical.' },
+      { role: 'user', content: 'Explain this AI model architecture: ' + title + '. ' + definition + '. Compare it to similar architectures and explain when you would choose this one over alternatives.' }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  function askModelAdvisor() {
+    var input = document.getElementById('model-input');
+    var output = document.getElementById('model-output');
+    var text = input.value.trim();
+    if (!text) return;
+
+    output.innerHTML = '<span class="llm-loading">Analyzing...</span>';
+
+    var comparisonTable = `
+Model Comparison:
+- GPT-4 / GPT-4o: Decoder LLM - General-purpose reasoning, coding, multimodal
+- Claude 3.5: Decoder LLM - Long-context analysis, coding, writing
+- Gemini 1.5 Pro: Decoder LLM - Massive context windows, multimodal
+- Llama 3: Decoder LLM - Open-source, self-hosting, fine-tuning
+- Mistral Large: Dense LLM - High-quality reasoning, multilingual
+- Stable Diffusion: Diffusion - Image generation, open-source
+- CLIP: Encoder (Vision+Text) - Image-text matching, embeddings
+- BERT: Encoder - Text classification, search, NLU
+- Whisper: Encoder-Decoder - Speech recognition, transcription
+- TTS models: Decoder - Text-to-speech, voice synthesis`;
+
+    var messages = [
+      { role: 'system', content: 'You are an AI model advisor. Help users choose the right AI model for their task. Consider: 1) The task type (text, image, audio, structured data), 2) Scale/volume requirements, 3) Latency needs, 4) Budget constraints, 5) Open-source vs proprietary, 6) Deployment environment. Recommend specific models from the comparison table and explain why.' },
+      { role: 'user', content: 'I need help choosing an AI model for my task: ' + text + '. Here are the available model options:\n' + comparisonTable + '\nWhich model should I use and why?' }
+    ];
+
+    LLM.chatWithHistory('model-output', messages).catch(function() {});
+  }
+
+  var modelInput = document.getElementById('model-input');
+  if (modelInput) {
+    modelInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        askModelAdvisor();
+      }
+    });
+  }
+
+  window.explainModel = explainModel;
+  window.askModelAdvisor = askModelAdvisor;
+})();
+</script>
+
 </body>
 </html>

pages/prompts.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html">Terminology</a>
       <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html" class="active">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -63,13 +95,14 @@
   </div>
   <div class="prompt-block">
     <span class="label">Few-Shot</span>
-    <h3>Show examples to guide behavior</h3>
+    <h3>Show examples to teach a pattern</h3>
-    <p>Include a few input-output examples in the prompt to teach the model the desired format or style.</p>
+    <p>Include a few input-output examples so the model infers a pattern it couldn't know from instructions alone.</p>
     <div class="example"><strong>Prompt:</strong><br>
-      "Classify the sentiment:<br>
+      "Convert words to star code:<br>
-      'I love this!' → Positive<br>
+      'hello world' → ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐<br>
-      'This is terrible.' → Negative<br>
+      'cat' → ⭐⭐⭐<br>
-      'It's okay, I guess.' → ?"</div>
+      'I am happy' → ⭐ ⭐⭐ ⭐⭐⭐⭐⭐<br>
+      'The cat eats' → ?"</div>
   </div>
   <div class="prompt-block">
     <span class="label">Chain-of-Thought</span>
@@ -174,9 +207,139 @@
       Then rewrite it incorporating your feedback."</div>
   </div>
 
+  <h2 class="section-title">Playground</h2>
+  <div class="def-card">
+    <span class="category">Interactive</span>
+    <h3>🧪 Test Your Prompts Live</h3>
+    <p>Try any prompt technique with your configured model. Paste a prompt template, fill in the variables, and see the result.</p>
+    <div class="llm-mini-chat visible" id="prompt-playground">
+      <div class="llm-mini-chat-header"><h4>🧪 Prompt Playground</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Choose a technique</label>
+        <select id="prompt-technique" style="width: 100%; padding: 0.5rem 0.8rem; border: 2px solid var(--pink-200); border-radius: 10px; font-size: 0.88rem; color: var(--pink-900); background: var(--pink-50);">
+          <option value="zero-shot">Zero-Shot</option>
+          <option value="few-shot">Few-Shot</option>
+          <option value="chain-of-thought">Chain-of-Thought</option>
+          <option value="role">Role Prompting</option>
+          <option value="structured">Structured Output</option>
+        </select>
+      </div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Your prompt</label>
+        <textarea class="llm-mini-chat-input" id="prompt-input" rows="4" placeholder="Enter your prompt here..."></textarea>
+        <div id="prompt-hint" style="font-size: 0.78rem; color: var(--pink-500); margin-top: 0.3rem;"></div>
+      </div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Full prompt that will be sent</label>
+        <pre id="prompt-preview" style="font-size: 0.78rem; white-space: pre-wrap; background: var(--pink-50); border: 2px solid var(--pink-200); border-radius: 10px; padding: 0.6rem 0.8rem; color: var(--pink-800); min-height: 2rem; max-height: 10rem; overflow-y: auto; font-family: var(--font-mono);"></pre>
+      </div>
+      <button class="llm-mini-chat-send" onclick="testPrompt()" style="width: 100%; padding: 0.7rem;">Send to LLM</button>
+      <div class="llm-mini-chat-output" id="prompt-output" style="margin-top: 0.8rem;"></div>
+    </div>
+  </div>
+
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  var techniquePrompts = {
+    'zero-shot': '{task}',
+    'few-shot': 'Convert each sentence into a "secret code" where every word is replaced by a number of stars equal to the word\'s length.\n\nExamples:\nhello world → ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐⭐\ncat → ⭐⭐⭐\nI am happy → ⭐ ⭐⭐ ⭐⭐⭐⭐⭐\n\n{task}',
+    'chain-of-thought': 'Solve this step by step. Think through each step carefully before giving your final answer.\n\n{task}',
+    'role': 'You are an expert in {domain}. {task}',
+    'structured': 'Analyze the following text and return results as JSON with these keys: summary, sentiment, key_topics, action_items.\n\n{text}'
+  };
+
+  var techniqueHints = {
+    'zero-shot': 'Try a direct question or request. The model answers without examples.',
+    'few-shot': 'Type any sentence. The model must infer the star-length rule from the examples alone.',
+    'chain-of-thought': 'Try a math or logic problem. Step-by-step reasoning beats direct answers.',
+    'role': 'Try asking for code review, writing advice, or expert analysis in any domain.',
+    'structured': 'Paste any text with products, data, or items to extract into JSON.'
+  };
+
+  (function() {
+    var select = document.getElementById('prompt-technique');
+    var hint = document.getElementById('prompt-hint');
+    var preview = document.getElementById('prompt-preview');
+    var input = document.getElementById('prompt-input');
+    function update() {
+      hint.textContent = techniqueHints[select.value] || '';
+      var base = techniquePrompts[select.value];
+      var user = input.value.trim();
+      if (!user) {
+        preview.textContent = base;
+      } else {
+        preview.textContent = base.replace('{text}', user).replace('{task}', user).replace('{domain}', 'general');
+      }
+    }
+    select.addEventListener('change', update);
+    input.addEventListener('input', update);
+    update();
+  })();
+
+  function applyTechnique() {
+    var technique = document.getElementById('prompt-technique').value;
+    var basePrompt = techniquePrompts[technique];
+    var userPrompt = document.getElementById('prompt-input').value.trim();
+
+    if (!userPrompt) return basePrompt;
+
+    return basePrompt.replace('{text}', userPrompt).replace('{task}', userPrompt).replace('{domain}', 'general');
+  }
+
+  function testPrompt() {
+    var userPrompt = document.getElementById('prompt-input').value.trim();
+    var technique = document.getElementById('prompt-technique').value;
+
+    if (!userPrompt) {
+      LLMModal.open('🧪 Prompt Playground');
+      LLMModal.error('Please enter a prompt to test.');
+      return;
+    }
+
+    var techniqueNames = {
+      'zero-shot': 'Zero-Shot',
+      'few-shot': 'Few-Shot',
+      'chain-of-thought': 'Chain-of-Thought',
+      'role': 'Role Prompting',
+      'structured': 'Structured Output'
+    };
+
+    LLMModal.open('🧪 Testing: ' + techniqueNames[technique]);
+    var finalPrompt = applyTechnique();
+    var systemPrompt = 'You are a helpful AI assistant. Respond to the prompt below using the specified technique.';
+
+    var messages = [
+      { role: 'system', content: systemPrompt },
+      { role: 'user', content: finalPrompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.testPrompt = testPrompt;
+})();
+</script>
+
 </body>
 </html>

pages/techniques.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html">Terminology</a>
       <a href="/pages/techniques.html" class="active">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -60,32 +92,38 @@
     <h3>Backpropagation</h3>
     <p>The core algorithm for training neural networks. It calculates the gradient of the loss function with respect to each weight by chain rule, then adjusts weights to minimize error.</p>
     <div class="example"><strong>Analogy:</strong> Like adjusting a radio dial — you turn it slightly, check if the signal is clearer, and keep adjusting in the right direction.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Backpropagation', 'Explain backpropagation in neural networks using a simple analogy. Walk through a numerical example: if the loss is 0.5 and the gradient is -0.03, what happens to the weight? Show the math.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Epoch</h3>
     <p>One complete pass through the entire training dataset. Models typically train for many epochs.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Epochs', 'Explain what an epoch is in training. Walk through a concrete example: if you have 10,000 training examples and a batch size of 32, how many steps per epoch? How many total steps for 10 epochs?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Batch Size</h3>
     <p>The number of training examples processed before the model's weights are updated. Larger batches are more stable but use more memory.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Batch Size', 'Explain batch size in training. Compare batch sizes of 1, 32, and 256 — what are the tradeoffs for each in terms of training speed, memory, and convergence quality?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Learning Rate</h3>
     <p>A hyperparameter that controls how much to adjust weights during each update. Too high → unstable training; too low → slow convergence.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Learning Rate', 'Explain learning rate with a visual analogy. Show what happens numerically: if the learning rate is 0.1 vs 0.001, and the gradient is 5, what is the weight update in each case?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Transfer Learning</h3>
     <p>Using a model trained on one task as the starting point for a model on a second task. Saves time and data.</p>
     <div class="example"><strong>Example:</strong> A model trained on Wikipedia text is fine-tuned for legal document analysis.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Transfer Learning', 'Explain transfer learning with a concrete example. If someone wanted to build a sentiment analysis model for restaurant reviews using transfer learning, walk through the steps from pre-trained model to final fine-tuned model.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Data Augmentation</h3>
     <p>Artificially expanding a training dataset by applying transformations (e.g., rotation, flipping, synonym replacement) to create new training examples.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Data Augmentation', 'Explain data augmentation. Give me 5 concrete examples of how you would augment a dataset of 100 product reviews to create 500 training examples. Include both text and non-text techniques.')"><span class="icon">🧪</span> Try it</button>
   </div>
 
   <h2 class="section-title">Alignment & Improvement</h2>
@@ -94,22 +132,26 @@
     <h3>RLHF (Reinforcement Learning from Human Feedback)</h3>
     <p>A technique to align model outputs with human preferences. Humans rank model responses, and a reward model is trained on those rankings. The main model is then fine-tuned to maximize the reward.</p>
     <div class="example"><strong>Used by:</strong> ChatGPT, Claude, and other conversational AI systems to make them more helpful and harmless.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 RLHF', 'Walk me through RLHF step by step with a concrete example. Start with a raw model that gives bad answers, show how human feedback improves it, and explain the reward model training process.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Alignment</span>
     <h3>SFT (Supervised Fine-Tuning)</h3>
     <p>Fine-tuning a model on a dataset of input-output pairs to teach it a specific format or style of response.</p>
     <div class="example"><strong>Example:</strong> Training a model to respond in JSON format for API integration.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 SFT', 'Show me an example of SFT (Supervised Fine-Tuning). Give me 5 example input-output pairs for fine-tuning a model to act as a customer support agent, then explain what the model learns from these.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Alignment</span>
     <h3>Prompt Tuning</h3>
     <p>Instead of changing model weights, carefully crafting prompts to guide the model's behavior. Zero-cost and reversible.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Prompt Tuning', 'Compare prompt tuning vs fine-tuning. Show 3 examples where the same task (e.g., sentiment analysis) is handled with just a prompt vs with fine-tuning — what are the pros and cons of each?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Alignment</span>
     <h3>LoRA (Low-Rank Adaptation)</h3>
     <p>An efficient fine-tuning technique that adds small trainable matrices to a frozen pre-trained model, drastically reducing compute and memory needs.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 LoRA', 'Explain LoRA (Low-Rank Adaptation) simply. If a model has 7 billion parameters, how many parameters does LoRA actually train? Walk through the math and explain why this is so much more efficient than full fine-tuning.')"><span class="icon">🧪</span> Try it</button>
   </div>
 
   <h2 class="section-title">Deployment & Optimization</h2>
@@ -118,39 +160,78 @@
     <h3>Quantization</h3>
     <p>Reducing the precision of model weights (e.g., from 32-bit to 8-bit) to shrink model size and speed up inference with minimal accuracy loss.</p>
     <div class="example"><strong>Example:</strong> A 13GB model quantized to 4-bit becomes ~3.5GB, fitting on consumer GPUs.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Quantization', 'Explain quantization with concrete numbers. If a model has 7 billion parameters stored as 32-bit floats, what is the total size? What happens at 16-bit, 8-bit, and 4-bit? Show the accuracy tradeoffs.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Optimization</span>
     <h3>Distillation</h3>
     <p>Training a smaller "student" model to mimic the behavior of a larger "teacher" model, capturing its knowledge in a more compact form.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Knowledge Distillation', 'Explain knowledge distillation with a concrete example. If GPT-4 is the teacher and a 350M parameter model is the student, how does the student learn? Show a specific example of soft vs hard labels.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Optimization</span>
     <h3>Speculative Decoding</h3>
     <p>Using a small model to draft multiple tokens, then having the large model verify them in parallel — speeding up generation.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Speculative Decoding', 'Explain speculative decoding with a step-by-step example. If the small model drafts ["the", "cat"] and the large model verifies both, how many forward passes does this save? Walk through a full sequence.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>RAG (Retrieval-Augmented Generation)</h3>
     <p>Augmenting a language model with an external knowledge retrieval step. The model first searches a knowledge base, then generates a response using both the retrieved info and its own training.</p>
     <div class="example"><strong>Example:</strong> A customer support bot that searches your product docs before answering questions — no fine-tuning needed.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 RAG', 'Walk through a complete RAG pipeline step by step: given a user question "How do I reset my password?", show how the retrieval system works, what gets retrieved, and how the LLM generates the final answer using the retrieved docs.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Agent / Tool Use</h3>
     <p>Giving an LLM the ability to call external tools (search, calculators, APIs) to accomplish multi-step tasks.</p>
     <div class="example"><strong>Example:</strong> An AI that searches the web, summarizes results, and writes a report — all autonomously.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Agent / Tool Use', 'Show me a concrete example of an AI agent with tool use. Walk through how an agent plans and executes the task "Find today'"'"'s weather in Tokyo and suggest what to wear" — show each tool call, observation, and thought step.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Chain-of-Thought</h3>
     <p>Asking a model to show its reasoning step-by-step before giving an answer. Dramatically improves performance on reasoning tasks.</p>
-    <div class="example"><strong>Prompt:</strong> "Let's think step by step. First, ..."</div>
+    <div class="example"><strong>Prompt:</strong> "Let'"'"'s think step by step. First, ..."</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Chain-of-Thought', 'Demonstrate chain-of-thought prompting. Give me a math word problem, then show: 1) the answer without CoT, 2) the answer with CoT showing each reasoning step. Explain why CoT improves accuracy.')"><span class="icon">🧪</span> Try it</button>
   </div>
 
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  function demoTechnique(title, prompt) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI educator running a live demo. Walk through the concept step by step with concrete numerical examples, analogies, and clear explanations. Use formatting like bold text and code blocks where helpful.' },
+      { role: 'user', content: prompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.demoTechnique = demoTechnique;
+})();
+</script>
+
 </body>
 </html>

pages/terminology.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html" class="active">Terminology</a>
       <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -59,34 +91,40 @@
     <span class="category">ML</span>
     <h3>Machine Learning (ML)</h3>
     <p>A subset of AI where systems learn patterns from data to make decisions or predictions without being explicitly programmed for each task.</p>
+    <button class="llm-btn" onclick="explainTerm('Machine Learning (ML)', 'A subset of AI where systems learn patterns from data to make decisions or predictions without being explicitly programmed for each task.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Supervised Learning</h3>
     <p>Training a model on labeled data — each example has an input and a known correct output. The model learns to map inputs to outputs.</p>
     <div class="example"><strong>Example:</strong> Training on emails labeled "spam" or "not spam" to build a spam filter.</div>
+    <button class="llm-btn" onclick="explainTerm('Supervised Learning', 'Training a model on labeled data — each example has an input and a known correct output. The model learns to map inputs to outputs.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Unsupervised Learning</h3>
     <p>Training on unlabeled data — the model finds hidden patterns or groupings on its own.</p>
     <div class="example"><strong>Example:</strong> Grouping customers by purchasing behavior without pre-defined categories.</div>
+    <button class="llm-btn" onclick="explainTerm('Unsupervised Learning', 'Training on unlabeled data — the model finds hidden patterns or groupings on its own.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Reinforcement Learning</h3>
     <p>An agent learns by interacting with an environment, receiving rewards for good actions and penalties for bad ones, optimizing for maximum cumulative reward.</p>
     <div class="example"><strong>Example:</strong> An AI learning to play chess by playing millions of games against itself.</div>
+    <button class="llm-btn" onclick="explainTerm('Reinforcement Learning', 'An agent learns by interacting with an environment, receiving rewards for good actions and penalties for bad ones, optimizing for maximum cumulative reward.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Overfitting</h3>
     <p>When a model learns the training data too well — including noise and outliers — and performs poorly on new, unseen data.</p>
+    <button class="llm-btn" onclick="explainTerm('Overfitting', 'When a model learns the training data too well — including noise and outliers — and performs poorly on new, unseen data.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Underfitting</h3>
     <p>When a model is too simple to capture the patterns in the data, performing poorly on both training and test data.</p>
+    <button class="llm-btn" onclick="explainTerm('Underfitting', 'When a model is too simple to capture the patterns in the data, performing poorly on both training and test data.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
 
   <h2 class="section-title">Natural Language Processing</h2>
@@ -94,35 +132,41 @@
     <span class="category">NLP</span>
     <h3>NLP (Natural Language Processing)</h3>
     <p>A field of AI focused on enabling computers to understand, interpret, and generate human language.</p>
+    <button class="llm-btn" onclick="explainTerm('NLP - Natural Language Processing', 'A field of AI focused on enabling computers to understand, interpret, and generate human language.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Token</h3>
     <p>The smallest unit of text a model processes. Tokens can be words, subwords, or characters. A single word may be split into multiple tokens.</p>
     <div class="example"><strong>Example:</strong> "unhappiness" might become ["un", "happiness"] — 2 tokens.</div>
+    <button class="llm-btn" onclick="explainTerm('Token', 'The smallest unit of text a model processes. Tokens can be words, subwords, or characters. A single word may be split into multiple tokens.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Embedding</h3>
     <p>A numerical representation of text (or other data) in a continuous vector space, where similar items are closer together.</p>
     <div class="example"><strong>Example:</strong> "king", "queen", "man", "woman" are embedded so that queen - woman + man ≈ king.</div>
+    <button class="llm-btn" onclick="explainTerm('Embedding', 'A numerical representation of text (or other data) in a continuous vector space, where similar items are closer together.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Context Window</h3>
     <p>The maximum number of tokens a model can process at once — both input and output combined.</p>
     <div class="example"><strong>Example:</strong> A 128K context window means the model can read ~100,000 words in a single prompt.</div>
+    <button class="llm-btn" onclick="explainTerm('Context Window', 'The maximum number of tokens a model can process at once — both input and output combined.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Paraphrasing</h3>
     <p>Restating text in different words while preserving the original meaning. LLMs excel at this task.</p>
+    <button class="llm-btn" onclick="explainTerm('Paraphrasing', 'Restating text in different words while preserving the original meaning. LLMs excel at this task.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Sentiment Analysis</h3>
     <p>Determining the emotional tone behind text — positive, negative, or neutral.</p>
     <div class="example"><strong>Example:</strong> "This product is amazing!" → Positive</div>
+    <button class="llm-btn" onclick="explainTerm('Sentiment Analysis', 'Determining the emotional tone behind text — positive, negative, or neutral.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
 
   <h2 class="section-title">Model Concepts</h2>
@@ -130,33 +174,39 @@
     <span class="category">Model</span>
     <h3>LLM (Large Language Model)</h3>
     <p>A neural network with billions of parameters trained on massive text corpora to understand and generate human language. Examples: GPT-4, Claude, Gemini, Llama.</p>
+    <button class="llm-btn" onclick="explainTerm('LLM - Large Language Model', 'A neural network with billions of parameters trained on massive text corpora to understand and generate human language.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Pre-trained Model</h3>
     <p>A model that has already been trained on a large dataset and can be used as-is or fine-tuned for specific tasks.</p>
+    <button class="llm-btn" onclick="explainTerm('Pre-trained Model', 'A model that has already been trained on a large dataset and can be used as-is or fine-tuned for specific tasks.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Fine-tuning</h3>
     <p>Taking a pre-trained model and continuing to train it on a smaller, task-specific dataset to adapt its behavior.</p>
     <div class="example"><strong>Example:</strong> Fine-tuning GPT-4 on medical texts so it answers healthcare questions more accurately.</div>
+    <button class="llm-btn" onclick="explainTerm('Fine-tuning', 'Taking a pre-trained model and continuing to train it on a smaller, task-specific dataset to adapt its behavior.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Parameters</h3>
     <p>The internal variables of a model that are adjusted during training. More parameters generally mean greater capacity to learn complex patterns.</p>
     <div class="example"><strong>Example:</strong> GPT-4 is estimated to have trillions of parameters.</div>
+    <button class="llm-btn" onclick="explainTerm('Parameters', 'The internal variables of a model that are adjusted during training. More parameters generally mean greater capacity to learn complex patterns.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Inference</h3>
     <p>The process of using a trained model to generate outputs for new inputs (as opposed to training the model).</p>
+    <button class="llm-btn" onclick="explainTerm('Inference', 'The process of using a trained model to generate outputs for new inputs (as opposed to training the model).')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Weights</h3>
     <p>The numerical values learned during training that determine how input signals are transformed as they pass through the network.</p>
+    <button class="llm-btn" onclick="explainTerm('Weights', 'The numerical values learned during training that determine how input signals are transformed as they pass through the network.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
 
   <h2 class="section-title">Common Acronyms</h2>
@@ -187,5 +237,38 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  function explainTerm(title, definition) {
+    LLMModal.open('💬 ' + title);
+    var messages = [
+      { role: 'system', content: 'You are an AI educator explaining technical terms simply. Keep explanations to 2-3 short paragraphs with a practical example. Use the definition provided as your starting point.' },
+      { role: 'user', content: 'Explain this AI term in simple, practical terms: ' + title + '. Definition: ' + definition + '.' }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.explainTerm = explainTerm;
+})();
+</script>
+
 </body>
 </html>

pages/use-cases.html

@@ -10,7 +10,7 @@
 
 <nav>
   <div class="nav-inner">
-    <a href="/" class="nav-brand">AI Cheat Sheet</a>
+    <a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
     <div class="nav-links">
       <a href="/pages/terminology.html">Terminology</a>
       <a href="/pages/techniques.html">Techniques</a>
@@ -19,11 +19,15 @@
       <a href="/pages/prompts.html">Prompt Guide</a>
       <a href="/pages/math.html">Math & Concepts</a>
       <a href="/pages/chat.html">Chat</a>
+      <a href="/pages/image-gen.html">Image Gen</a>
     </div>
     <button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
   </div>
 </nav>
 
+<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
+<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
+
 <script>
 (function(){
   var btn = document.getElementById('darkToggle');
@@ -44,6 +48,34 @@
       localStorage.setItem('theme','dark');
     }
   });
+
+  var menuToggle = document.getElementById('menuToggle');
+  var nav = document.querySelector('nav');
+  var backdrop = document.getElementById('sidebarBackdrop');
+  if(menuToggle && nav){
+    menuToggle.addEventListener('click', function(){
+      nav.classList.toggle('sidebar-open');
+      var isOpen = nav.classList.contains('sidebar-open');
+      menuToggle.textContent = isOpen ? '✕' : '☰';
+      if(backdrop){
+        backdrop.classList.toggle('visible', isOpen);
+      }
+    });
+    if(backdrop){
+      backdrop.addEventListener('click', function(){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        backdrop.classList.remove('visible');
+      });
+    }
+    document.addEventListener('click', function(e){
+      if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
+        nav.classList.remove('sidebar-open');
+        menuToggle.textContent = '☰';
+        if(backdrop) backdrop.classList.remove('visible');
+      }
+    });
+  }
 })();
 </script>
 
@@ -147,31 +179,52 @@
       <div class="icon">🏥</div>
       <h3>Healthcare</h3>
       <p>Medical image analysis, drug discovery, clinical note generation, symptom triage, and personalized treatment plans.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Healthcare AI Use Cases', 'Give me 5 specific, actionable AI use cases for a mid-size hospital system. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">💰</div>
       <h3>Finance</h3>
       <p>Fraud detection, algorithmic trading, risk assessment, credit scoring, and compliance monitoring.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Finance AI Use Cases', 'Give me 5 specific, actionable AI use cases for a fintech startup. For each, describe the AI technique, expected impact, and key data needed.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">🚗</div>
       <h3>Automotive</h3>
       <p>Autonomous driving, predictive maintenance, route optimization, and in-car voice assistants.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Automotive AI Use Cases', 'Give me 5 specific, actionable AI use cases for an automotive company. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">🎓</div>
       <h3>Education</h3>
       <p>Personalized tutoring, automated grading, curriculum design, and interactive learning experiences.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Education AI Use Cases', 'Give me 5 specific, actionable AI use cases for an online education platform. For each, describe the AI technique, expected impact, and key data needed.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">🏭</div>
       <h3>Manufacturing</h3>
       <p>Quality inspection via computer vision, supply chain optimization, predictive maintenance, and digital twins.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Manufacturing AI Use Cases', 'Give me 5 specific, actionable AI use cases for a manufacturing company. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">⚖️</div>
       <h3>Legal</h3>
       <p>Contract review, legal research, case prediction, document drafting, and compliance analysis.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Legal AI Use Cases', 'Give me 5 specific, actionable AI use cases for a law firm. For each, describe the AI technique, expected impact, and key considerations.')"><span class="icon">💡</span> Brainstorm</button>
+    </div>
+  </div>
+
+  <h2 class="section-title">AI Assistant</h2>
+  <div class="def-card">
+    <span class="category">Interactive</span>
+    <h3>🤖 Brainstorm AI Use Cases</h3>
+    <p>Describe your industry, project, or problem — and the AI will suggest specific, actionable use cases with implementation details.</p>
+    <div class="llm-mini-chat" id="brainstorm-chat">
+      <div class="llm-mini-chat-header"><h4>💡 Brainstorm Assistant</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
+      <div class="llm-mini-chat-input-row">
+        <input class="llm-mini-chat-input" id="brainstorm-input" placeholder="Describe your industry, project, or problem..." />
+        <button class="llm-mini-chat-send" onclick="doBrainstorm()">Go</button>
+      </div>
+      <div class="llm-mini-chat-output" id="brainstorm-output" style="margin-top: 0.8rem;"></div>
     </div>
   </div>
 
@@ -179,5 +232,65 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<div class="search-results-dropdown" id="searchResultsContainer"></div>
+
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script src="../lib/search.js"></script>
+<script>Search.init();</script>
+<script>
+(function(){
+  function brainstormUseCase(title, prompt) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI consultant helping professionals brainstorm practical AI use cases. For each use case, describe: 1) The specific problem it solves, 2) The AI technique/model needed, 3) Expected impact (quantified if possible), 4) Implementation complexity (Easy/Medium/Hard), 5) Key data or resources needed. Be concrete and actionable.' },
+      { role: 'user', content: prompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  function doBrainstorm() {
+    var input = document.getElementById('brainstorm-input');
+    var output = document.getElementById('brainstorm-output');
+    var text = input.value.trim();
+    if (!text) return;
+
+    output.innerHTML = '<span class="llm-loading">Brainstorming...</span>';
+
+    var messages = [
+      { role: 'system', content: 'You are an AI consultant helping professionals brainstorm practical AI use cases. For each use case, describe: 1) The specific problem it solves, 2) The AI technique or model needed, 3) Expected impact, 4) Implementation complexity (Easy/Medium/Hard), 5) Key data or resources needed. Be concrete and actionable. Give 5-7 use cases.' },
+      { role: 'user', content: 'I work in ' + text + '. Brainstorm specific, actionable AI use cases for my context. Tailor each one to my industry, company size, and available resources. For each use case, describe the problem it solves, the AI technique needed, expected impact, implementation complexity, and key data or resources needed.' }
+    ];
+
+    LLM.chatWithHistory('brainstorm-output', messages).catch(function() {});
+  }
+
+  var brainstormInput = document.getElementById('brainstorm-input');
+  if (brainstormInput) {
+    brainstormInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        doBrainstorm();
+      }
+    });
+  }
+
+  window.brainstormUseCase = brainstormUseCase;
+  window.doBrainstorm = doBrainstorm;
+})();
+</script>
+
 </body>
 </html>