LLM integration with all the tabs

pages/techniques.html

@@ -60,32 +60,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 +100,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 +128,74 @@
     <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>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></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>