From 695a3a510ed50ff59f040432586571fecee56a75 Mon Sep 17 00:00:00 2001 From: ducoterra Date: Tue, 5 May 2026 08:51:34 -0400 Subject: [PATCH] LLM integration with all the tabs --- compose.yaml | 8 + css/style.css | 449 +++++++++++++++++++++++++++++++++++++++++ index.html | 67 +++++- lib/llm.js | 180 +++++++++++++++++ lib/modal.js | 117 +++++++++++ pages/math.html | 57 +++++- pages/model-types.html | 99 +++++++++ pages/prompts.html | 93 +++++++++ pages/techniques.html | 47 ++++- pages/terminology.html | 47 +++++ pages/use-cases.html | 77 +++++++ 11 files changed, 1233 insertions(+), 8 deletions(-) create mode 100644 compose.yaml create mode 100644 lib/llm.js create mode 100644 lib/modal.js diff --git a/compose.yaml b/compose.yaml new file mode 100644 index 0000000..18d7e03 --- /dev/null +++ b/compose.yaml @@ -0,0 +1,8 @@ +services: + web: + build: . + ports: + - "8080:80" + volumes: + - .:/usr/share/nginx/html:delegated,Z + restart: unless-stopped diff --git a/css/style.css b/css/style.css index 991e790..669cfa1 100644 --- a/css/style.css +++ b/css/style.css @@ -795,3 +795,452 @@ footer { [data-theme="dark"] .send-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--pink-500), #1a1a3e); } + +/* LLM interactive elements */ +.llm-btn { + background: linear-gradient(135deg, var(--pink-400), var(--pink-500)); + color: var(--white); + border: none; + padding: 0.5rem 1rem; + border-radius: 10px; + cursor: pointer; + font-size: 0.82rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + transition: background 0.2s, transform 0.1s, opacity 0.2s; + display: inline-flex; + align-items: center; + gap: 0.4rem; +} + +.llm-btn:hover:not(:disabled) { + background: linear-gradient(135deg, var(--pink-500), var(--pink-600)); + transform: translateY(-1px); +} + +.llm-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.llm-btn .icon { + font-size: 1rem; +} + +.llm-response-area { + background: var(--pink-100); + border: 2px solid var(--pink-300); + border-radius: 12px; + padding: 1rem 1.2rem; + margin-top: 0.8rem; + font-size: 0.9rem; + line-height: 1.6; + max-height: 400px; + overflow-y: auto; + display: none; +} + +.llm-response-area.visible { + display: block; + animation: llmFadeIn 0.3s ease-out; +} + +@keyframes llmFadeIn { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +.llm-loading { + color: var(--pink-500); + font-style: italic; +} + +.llm-error { + color: var(--pink-700); + font-weight: 600; +} + +.llm-inline-code { + background: var(--white); + padding: 0.15rem 0.4rem; + border-radius: 4px; + font-family: 'Courier New', monospace; + font-size: 0.85em; + border: 1px solid var(--pink-300); +} + +.llm-code-block { + background: var(--pink-50); + padding: 0.8rem 1rem; + border-radius: 8px; + overflow-x: auto; + font-size: 0.85rem; + border: 1px solid var(--pink-200); + margin: 0.5rem 0; +} + +.llm-code-block code { + font-family: 'Courier New', monospace; + white-space: pre-wrap; +} + +.llm-mini-chat { + display: none; + background: var(--white); + border: 2px solid var(--pink-300); + border-radius: 16px; + padding: 1.2rem; + margin-top: 1rem; + box-shadow: var(--shadow-lg); +} + +.llm-mini-chat.visible { + display: block; + animation: llmFadeIn 0.3s ease-out; +} + +.llm-mini-chat-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.8rem; + padding-bottom: 0.5rem; + border-bottom: 2px solid var(--pink-200); +} + +.llm-mini-chat-header h4 { + color: var(--pink-600); + font-size: 0.95rem; + margin: 0; +} + +.llm-close-btn { + background: none; + border: none; + color: var(--pink-500); + cursor: pointer; + font-size: 1.2rem; + padding: 0.2rem; + line-height: 1; + transition: color 0.2s; +} + +.llm-close-btn:hover { + color: var(--pink-700); +} + +.llm-mini-chat-output { + background: var(--pink-50); + border: 1px solid var(--pink-200); + border-radius: 10px; + padding: 0.8rem 1rem; + margin-bottom: 0.8rem; + min-height: 40px; + font-size: 0.9rem; + line-height: 1.6; + max-height: 300px; + overflow-y: auto; + white-space: pre-wrap; +} + +.llm-mini-chat-input-row { + display: flex; + gap: 0.5rem; +} + +.llm-mini-chat-input { + flex: 1; + 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); + font-family: inherit; + resize: none; + outline: none; +} + +.llm-mini-chat-input:focus { + border-color: var(--pink-400); + background: var(--white); +} + +.llm-mini-chat-send { + background: linear-gradient(135deg, var(--pink-400), var(--pink-500)); + color: var(--white); + border: none; + padding: 0.5rem 1rem; + border-radius: 10px; + cursor: pointer; + font-size: 0.85rem; + font-weight: 700; + white-space: nowrap; + transition: background 0.2s; +} + +.llm-mini-chat-send:hover:not(:disabled) { + background: linear-gradient(135deg, var(--pink-500), var(--pink-600)); +} + +.llm-mini-chat-send:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Dark mode LLM styles */ +[data-theme="dark"] .llm-btn { + background: linear-gradient(135deg, var(--pink-600), #0f3460); +} + +[data-theme="dark"] .llm-btn:hover:not(:disabled) { + background: linear-gradient(135deg, var(--pink-500), #1a1a3e); +} + +[data-theme="dark"] .llm-response-area { + background: var(--bg-primary); + border-color: var(--border-secondary); +} + +[data-theme="dark"] .llm-loading { + color: var(--pink-400); +} + +[data-theme="dark"] .llm-error { + color: var(--pink-300); +} + +[data-theme="dark"] .llm-inline-code { + background: var(--bg-card); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .llm-code-block { + background: var(--bg-table); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .llm-mini-chat { + background: var(--bg-card); + border-color: var(--border-primary); +} + +[data-theme="dark"] .llm-mini-chat-header { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .llm-mini-chat-header h4 { + color: var(--text-heading); +} + +[data-theme="dark"] .llm-close-btn { + color: var(--text-secondary); +} + +[data-theme="dark"] .llm-close-btn:hover { + color: var(--text-primary); +} + +[data-theme="dark"] .llm-mini-chat-output { + background: var(--bg-primary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .llm-mini-chat-input { + background: var(--bg-primary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .llm-mini-chat-input:focus { + border-color: var(--border-accent); + background: var(--bg-secondary); +} + +[data-theme="dark"] .llm-mini-chat-send { + background: linear-gradient(135deg, var(--pink-600), #0f3460); +} + +[data-theme="dark"] .llm-mini-chat-send:hover:not(:disabled) { + background: linear-gradient(135deg, var(--pink-500), #1a1a3e); +} + +/* Ask a question section on home page */ +.ask-question-section { + margin-top: 2.5rem; +} + +.ask-question-box { + background: var(--white); + border-radius: 16px; + padding: 2rem; + box-shadow: var(--shadow-lg); + border: 2px solid var(--pink-200); +} + +.ask-question-box h3 { + color: var(--pink-700); + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.ask-question-input-row { + display: flex; + gap: 0.8rem; + margin-bottom: 1rem; +} + +.ask-question-input { + flex: 1; + padding: 0.8rem 1rem; + border: 2px solid var(--pink-200); + border-radius: 12px; + font-size: 0.95rem; + color: var(--pink-900); + background: var(--pink-50); + font-family: inherit; + resize: none; + outline: none; +} + +.ask-question-input:focus { + border-color: var(--pink-400); + background: var(--white); +} + +.ask-question-answer { + background: var(--pink-50); + border: 1px solid var(--pink-200); + border-radius: 10px; + padding: 1rem 1.2rem; + font-size: 0.95rem; + line-height: 1.6; + min-height: 40px; + white-space: pre-wrap; + display: none; +} + +.ask-question-answer.visible { + display: block; + animation: llmFadeIn 0.3s ease-out; +} + +[data-theme="dark"] .ask-question-box { + background: var(--bg-card); + border-color: var(--border-primary); +} + +[data-theme="dark"] .ask-question-box h3 { + color: var(--text-heading); +} + +[data-theme="dark"] .ask-question-input { + background: var(--bg-primary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +[data-theme="dark"] .ask-question-input:focus { + border-color: var(--border-accent); + background: var(--bg-secondary); +} + +[data-theme="dark"] .ask-question-answer { + background: var(--bg-primary); + border-color: var(--border-primary); + color: var(--text-primary); +} + +/* Modal dialog */ +.llm-modal-backdrop { + 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; +} + +.llm-modal-container { + 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; +} + +.llm-modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.2rem 1.5rem; + border-bottom: 2px solid var(--pink-200); +} + +.llm-modal-title { + color: var(--pink-600); + font-size: 1.1rem; + margin: 0; +} + +.llm-modal-close { + 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; +} + +.llm-modal-close:hover { + color: var(--pink-700); +} + +.llm-modal-body { + padding: 1.5rem; + overflow-y: auto; + flex: 1; + font-size: 0.95rem; + line-height: 1.7; + color: var(--pink-900); + white-space: pre-wrap; +} + +[data-theme="dark"] .llm-modal-container { + background: var(--bg-card); +} + +[data-theme="dark"] .llm-modal-header { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .llm-modal-title { + color: var(--text-heading); +} + +[data-theme="dark"] .llm-modal-close { + color: var(--text-secondary); +} + +[data-theme="dark"] .llm-modal-close:hover { + color: var(--text-primary); +} + +[data-theme="dark"] .llm-modal-body { + color: var(--text-primary); +} + diff --git a/index.html b/index.html index 99488d3..c49ec5f 100644 --- a/index.html +++ b/index.html @@ -106,9 +106,20 @@

Interactive

- +
+
+

๐Ÿ’ฌ Ask a Question

+

Ask anything about AI โ€” terminology, concepts, techniques, or real-world applications. Powered by your configured LLM.

+
+ + +
+
+
+
+
-

๐Ÿ’ฌ Chat

+

๐Ÿ’ฌ Full Chat

Try AI right now โ€” ask questions, brainstorm ideas, get explanations, or just experiment. Powered by a real LLM API.

 @@ -116,5 +127,57 @@ + + + diff --git a/lib/llm.js b/lib/llm.js new file mode 100644 index 0000000..cceba66 --- /dev/null +++ b/lib/llm.js @@ -0,0 +1,180 @@ +// Shared LLM module - provides streaming chat to any page +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 = 'Thinking...'; + + 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 = 'Error: ' + escapeHTML(err) + ''; + 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 = 'Thinking...'; + + 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 = 'Error: ' + escapeHTML(err) + ''; + 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('
' + escapeHTML(code) + '
'); + 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, '$1'); + // Bold + text = text.replace(/\*\*([^*]+)\*\*/g, '$1'); + // Line breaks + text = text.replace(/\n/g, '
'); + return text; + } + + return { + getConfig: getConfig, + callAPI: callAPI, + chat: chat, + chatWithHistory: chatWithHistory + }; +})(); diff --git a/lib/modal.js b/lib/modal.js new file mode 100644 index 0000000..f77027b --- /dev/null +++ b/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 = 'Thinking...'; + 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 = 'Error: ' + escapeHTML(msg) + ''; + } + } + + 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, '
$1
'); + // Inline code + text = text.replace(/`([^`]+)`/g, '$1'); + // Bold + text = text.replace(/\*\*([^*]+)\*\*/g, '$1'); + // Line breaks + text = text.replace(/\n/g, '
'); + return text; + } + + return { + open: open, + update: update, + done: done, + error: error, + close: close + }; +})(); diff --git a/pages/math.html b/pages/math.html index 6f10dbb..b985d8f 100644 --- a/pages/math.html +++ b/pages/math.html @@ -60,32 +60,38 @@

Attention Mechanism

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.

Analogy: 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".
+
Architecture

Self-Attention

Each token in a sequence attends to every other token, creating rich contextual representations. The core of the transformer architecture.

Math: Attention(Q, K, V) = softmax(QKแต€ / โˆšdโ‚–) V
+
Architecture

Multi-Head Attention

Running multiple self-attention operations in parallel, each learning different types of relationships. Like having multiple "lenses" to view the input.

+
Architecture

Positional Encoding

Since transformers process all tokens simultaneously (unlike RNNs), position information must be added explicitly so the model knows word order.

+
Architecture

Feed-Forward Network (FFN)

After attention, each token passes through a small neural network that transforms its representation. Usually two linear layers with a non-linearity in between.

+
Architecture

Layer Normalization

A technique to stabilize training by normalizing the activations of each layer. Helps gradients flow more smoothly through deep networks.

+

Training Concepts

@@ -94,31 +100,37 @@

Loss Function

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.

Example: 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.
+
Training

Gradient Descent

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.

+
Training

Adam Optimizer

The most popular optimizer for training deep learning models. Combines momentum (acceleration) with adaptive learning rates (per-parameter tuning).

+
Training

Gradient

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.

+
Training

Regularization

Techniques to prevent overfitting: dropout (randomly deactivating neurons), weight decay (penalizing large weights), and early stopping.

+
Training

Batch Normalization

Normalizing layer inputs across each mini-batch. Reduces internal covariate shift and allows higher learning rates.

+

Generation & Sampling

@@ -128,32 +140,38 @@

Controls randomness in text generation. Low (0.2) = focused and deterministic. High (0.9) = creative and varied. 1.0 = standard sampling.

Low temp: Technical documentation, code generation
High temp: Creative writing, brainstorming
+
Sampling

Top-K Sampling

At each step, only consider the K most likely next tokens. Reduces weird or irrelevant outputs.

+
Sampling

Top-P (Nucleus) Sampling

Only consider tokens whose cumulative probability reaches P. More adaptive than Top-K โ€” automatically adjusts the number of candidates.

Top-P = 0.9: Include the smallest set of tokens that together cover 90% probability mass.
+
Sampling

Greedy Decoding

Always pick the most likely next token. Fastest but can get stuck in repetitive loops. Often produces the most coherent output for factual tasks.

+
Sampling

Beam Search

Instead of picking the single best token at each step, keep the top B sequences and pick the best overall. Better quality but slower.

+
Sampling

Logits

The raw, unnormalized scores the model outputs for each token before softmax. Can be adjusted for bias correction, repetition penalties, and custom sampling.

+

Evaluation Metrics

@@ -162,32 +180,32 @@

Perplexity

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.

Example: Perplexity 5 on a language model means, on average, it's as uncertain as picking from 5 equally likely options at each step.
+
Metrics

Accuracy

Percentage of correct predictions. Simple but can be misleading for imbalanced datasets.

+
Metrics

Precision & Recall

Precision = of all positive predictions, how many were correct? Recall = of all actual positives, how many did we find?

Spam filter: High precision = few legitimate emails flagged. High recall = few spam emails missed.
+
Metrics

F1 Score

The harmonic mean of precision and recall. A single metric that balances both.

+
Metrics

BLEU / ROUGE

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.

-
-
- Metrics -

Tokens per Second (TPS)

-

How many tokens the model generates per second. Measures inference speed. Typical range: 20-100+ TPS depending on model size and hardware.

+

Key Formulas

@@ -210,5 +228,34 @@ + + + + diff --git a/pages/model-types.html b/pages/model-types.html index 6d37816..05bb269 100644 --- a/pages/model-types.html +++ b/pages/model-types.html @@ -60,24 +60,28 @@

LLM (Large Language Model)

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.

Examples: GPT-4, Claude, Gemini, Llama 3, Mistral, Qwen
+
Transformer

Encoder-Only Models

Transformers designed to understand input (not generate text). Used for classification, sentiment analysis, and embedding generation.

Examples: BERT, RoBERTa, DeBERTa
+
Transformer

Decoder-Only Models

Transformers designed to generate text autoregressively โ€” the dominant architecture for modern LLMs.

Examples: GPT series, Claude, Llama, Mistral
+
Transformer

Encoder-Decoder Models

Transformers with both encoder and decoder, used for tasks that transform input to output (translation, summarization).

Examples: T5, BART, Flan-T5
+

Vision Models

@@ -86,24 +90,28 @@

CNN (Convolutional Neural Network)

Neural networks with layers that scan images with small filters, detecting edges, textures, and patterns hierarchically. The backbone of computer vision for years.

Examples: ResNet, EfficientNet, VGG
+
Vision

ViT (Vision Transformer)

Applying the transformer architecture to images by treating image patches as tokens. Often outperforms CNNs at scale.

Examples: CLIP, DINOv2, ViT-Base
+
Vision

Diffusion Models

Models that generate images by iteratively denoising random noise. The architecture behind most state-of-the-art image generators.

Examples: Stable Diffusion, DALL-E 3, Midjourney
+
Vision

Multimodal Models

Models that process multiple input types โ€” text, images, audio โ€” and can generate outputs across modalities.

Examples: GPT-4V (vision), Claude 3, Gemini, Qwen-VL
+

Generative Models

@@ -112,18 +120,21 @@

GAN (Generative Adversarial Network)

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.

Example: Creating photorealistic faces that don't exist (StyleGAN).
+
Generative

VQ-VAE (Vector Quantized VAE)

Combines autoencoders with discrete codebooks to learn compressed representations. Used as a foundation for autoregressive generation.

Example: MusicGen (music generation), SoundStream (audio compression)
+
Generative

Flow Models

Models that learn a reversible transformation between data and noise, enabling exact likelihood computation and fast generation.

Examples: Glow, RealNVP, Rectified Flow
+

Other Architectures

@@ -132,24 +143,28 @@

RNN / LSTM

Recurrent networks that process sequences step-by-step, maintaining a hidden state. Largely replaced by transformers but still used in some applications.

Use case: Time series prediction, speech recognition
+
Architecture

Mixture of Experts (MoE)

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.

Examples: Mixtral 8x7B, Google's Switch Transformer, Grok-1
+
Architecture

Retrieval Models

Models designed specifically for semantic search โ€” finding the most relevant documents for a query from a large corpus.

Examples: BGE, E5, Cohere embed models
+
Architecture

Small Language Models (SLMs)

Compact language models (under 7B parameters) optimized for edge devices and low-latency applications. Getting remarkably capable.

Examples: Phi-3, Gemma 2B, Qwen 1.5B, MicroLlama
+

Model Comparison

@@ -171,9 +186,93 @@ +

AI Assistant

+
+ Interactive +

๐Ÿค– Which Model Should I Use?

+

Describe your task, constraints, and goals โ€” the AI will recommend the best model architecture and specific model from the comparison table.

+
+

๐Ÿค– Model Advisor

+
+ + +
+
+
+
+ + + + + diff --git a/pages/prompts.html b/pages/prompts.html index abd86f2..8b669f6 100644 --- a/pages/prompts.html +++ b/pages/prompts.html @@ -174,9 +174,102 @@ Then rewrite it incorporating your feedback." +

Playground

+
+ Interactive +

๐Ÿงช Test Your Prompts Live

+

Try any prompt technique with your configured model. Paste a prompt template, fill in the variables, and see the result.

+
+

๐Ÿงช Prompt Playground

+
+ + +
+
+ + +
+ +
+
+
+ + + + + diff --git a/pages/techniques.html b/pages/techniques.html index 5b0d925..e18957e 100644 --- a/pages/techniques.html +++ b/pages/techniques.html @@ -60,32 +60,38 @@

Backpropagation

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.

Analogy: Like adjusting a radio dial โ€” you turn it slightly, check if the signal is clearer, and keep adjusting in the right direction.
+
Training

Epoch

One complete pass through the entire training dataset. Models typically train for many epochs.

+
Training

Batch Size

The number of training examples processed before the model's weights are updated. Larger batches are more stable but use more memory.

+
Training

Learning Rate

A hyperparameter that controls how much to adjust weights during each update. Too high โ†’ unstable training; too low โ†’ slow convergence.

+
Training

Transfer Learning

Using a model trained on one task as the starting point for a model on a second task. Saves time and data.

Example: A model trained on Wikipedia text is fine-tuned for legal document analysis.
+
Training

Data Augmentation

Artificially expanding a training dataset by applying transformations (e.g., rotation, flipping, synonym replacement) to create new training examples.

+

Alignment & Improvement

@@ -94,22 +100,26 @@

RLHF (Reinforcement Learning from Human Feedback)

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.

Used by: ChatGPT, Claude, and other conversational AI systems to make them more helpful and harmless.
+
Alignment

SFT (Supervised Fine-Tuning)

Fine-tuning a model on a dataset of input-output pairs to teach it a specific format or style of response.

Example: Training a model to respond in JSON format for API integration.
+
Alignment

Prompt Tuning

Instead of changing model weights, carefully crafting prompts to guide the model's behavior. Zero-cost and reversible.

+
Alignment

LoRA (Low-Rank Adaptation)

An efficient fine-tuning technique that adds small trainable matrices to a frozen pre-trained model, drastically reducing compute and memory needs.

+

Deployment & Optimization

@@ -118,39 +128,74 @@

Quantization

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.

Example: A 13GB model quantized to 4-bit becomes ~3.5GB, fitting on consumer GPUs.
+
Optimization

Distillation

Training a smaller "student" model to mimic the behavior of a larger "teacher" model, capturing its knowledge in a more compact form.

+
Optimization

Speculative Decoding

Using a small model to draft multiple tokens, then having the large model verify them in parallel โ€” speeding up generation.

+
Architecture

RAG (Retrieval-Augmented Generation)

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.

Example: A customer support bot that searches your product docs before answering questions โ€” no fine-tuning needed.
+
Architecture

Agent / Tool Use

Giving an LLM the ability to call external tools (search, calculators, APIs) to accomplish multi-step tasks.

Example: An AI that searches the web, summarizes results, and writes a report โ€” all autonomously.
+
Architecture

Chain-of-Thought

Asking a model to show its reasoning step-by-step before giving an answer. Dramatically improves performance on reasoning tasks.

-
Prompt: "Let's think step by step. First, ..."
+
Prompt: "Let'"'"'s think step by step. First, ..."
+
+ + + + diff --git a/pages/terminology.html b/pages/terminology.html index 0433fdd..963d97f 100644 --- a/pages/terminology.html +++ b/pages/terminology.html @@ -59,34 +59,40 @@ ML

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.

+
ML

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.

Example: Training on emails labeled "spam" or "not spam" to build a spam filter.
+
ML

Unsupervised Learning

Training on unlabeled data โ€” the model finds hidden patterns or groupings on its own.

Example: Grouping customers by purchasing behavior without pre-defined categories.
+
ML

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.

Example: An AI learning to play chess by playing millions of games against itself.
+
ML

Overfitting

When a model learns the training data too well โ€” including noise and outliers โ€” and performs poorly on new, unseen data.

+
ML

Underfitting

When a model is too simple to capture the patterns in the data, performing poorly on both training and test data.

+

Natural Language Processing

@@ -94,35 +100,41 @@ NLP

NLP (Natural Language Processing)

A field of AI focused on enabling computers to understand, interpret, and generate human language.

+
NLP

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.

Example: "unhappiness" might become ["un", "happiness"] โ€” 2 tokens.
+
NLP

Embedding

A numerical representation of text (or other data) in a continuous vector space, where similar items are closer together.

Example: "king", "queen", "man", "woman" are embedded so that queen - woman + man โ‰ˆ king.
+
NLP

Context Window

The maximum number of tokens a model can process at once โ€” both input and output combined.

Example: A 128K context window means the model can read ~100,000 words in a single prompt.
+
NLP

Paraphrasing

Restating text in different words while preserving the original meaning. LLMs excel at this task.

+
NLP

Sentiment Analysis

Determining the emotional tone behind text โ€” positive, negative, or neutral.

Example: "This product is amazing!" โ†’ Positive
+

Model Concepts

@@ -130,33 +142,39 @@ Model

LLM (Large Language Model)

A neural network with billions of parameters trained on massive text corpora to understand and generate human language. Examples: GPT-4, Claude, Gemini, Llama.

+
Model

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.

+
Model

Fine-tuning

Taking a pre-trained model and continuing to train it on a smaller, task-specific dataset to adapt its behavior.

Example: Fine-tuning GPT-4 on medical texts so it answers healthcare questions more accurately.
+
Model

Parameters

The internal variables of a model that are adjusted during training. More parameters generally mean greater capacity to learn complex patterns.

Example: GPT-4 is estimated to have trillions of parameters.
+
Model

Inference

The process of using a trained model to generate outputs for new inputs (as opposed to training the model).

+
Model

Weights

The numerical values learned during training that determine how input signals are transformed as they pass through the network.

+

Common Acronyms

@@ -187,5 +205,34 @@ + + + + diff --git a/pages/use-cases.html b/pages/use-cases.html index a0e7faf..126d409 100644 --- a/pages/use-cases.html +++ b/pages/use-cases.html @@ -147,31 +147,52 @@
๐Ÿฅ

Healthcare

Medical image analysis, drug discovery, clinical note generation, symptom triage, and personalized treatment plans.

+
๐Ÿ’ฐ

Finance

Fraud detection, algorithmic trading, risk assessment, credit scoring, and compliance monitoring.

+
๐Ÿš—

Automotive

Autonomous driving, predictive maintenance, route optimization, and in-car voice assistants.

+
๐ŸŽ“

Education

Personalized tutoring, automated grading, curriculum design, and interactive learning experiences.

+
๐Ÿญ

Manufacturing

Quality inspection via computer vision, supply chain optimization, predictive maintenance, and digital twins.

+
โš–๏ธ

Legal

Contract review, legal research, case prediction, document drafting, and compliance analysis.

+ +
+ + +

AI Assistant

+
+ Interactive +

๐Ÿค– Brainstorm AI Use Cases

+

Describe your industry, project, or problem โ€” and the AI will suggest specific, actionable use cases with implementation details.

+
+

๐Ÿ’ก Brainstorm Assistant

+
+ + +
+
@@ -179,5 +200,61 @@ + + + +