| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>LLM Decoding Strategies Demo</title> |
| | <style> |
| | body { |
| | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | max-width: 1200px; |
| | margin: 0 auto; |
| | padding: 20px; |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | min-height: 100vh; |
| | } |
| | .container { |
| | background: white; |
| | border-radius: 15px; |
| | padding: 30px; |
| | box-shadow: 0 10px 30px rgba(0,0,0,0.2); |
| | } |
| | h1 { |
| | text-align: center; |
| | color: #333; |
| | margin-bottom: 30px; |
| | font-size: 2.5em; |
| | } |
| | .vocab-section { |
| | background: #f8f9fa; |
| | padding: 20px; |
| | border-radius: 10px; |
| | margin-bottom: 30px; |
| | border-left: 5px solid #667eea; |
| | } |
| | .logits-section { |
| | background: #e3f2fd; |
| | padding: 20px; |
| | border-radius: 10px; |
| | margin-bottom: 30px; |
| | border-left: 5px solid #2196f3; |
| | } |
| | .strategy { |
| | background: #fff; |
| | border: 2px solid #e0e0e0; |
| | border-radius: 10px; |
| | padding: 20px; |
| | margin-bottom: 20px; |
| | transition: all 0.3s ease; |
| | } |
| | .strategy:hover { |
| | border-color: #667eea; |
| | box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| | } |
| | .strategy h3 { |
| | color: #667eea; |
| | margin-bottom: 15px; |
| | font-size: 1.4em; |
| | } |
| | .probs-table { |
| | width: 100%; |
| | border-collapse: collapse; |
| | margin: 15px 0; |
| | font-size: 0.9em; |
| | } |
| | .probs-table th, .probs-table td { |
| | padding: 8px 12px; |
| | border: 1px solid #ddd; |
| | text-align: center; |
| | } |
| | .probs-table th { |
| | background: #667eea; |
| | color: white; |
| | } |
| | .probs-table tr:nth-child(even) { |
| | background: #f9f9f9; |
| | } |
| | .selected { |
| | background: #4caf50 !important; |
| | color: white; |
| | font-weight: bold; |
| | } |
| | .filtered { |
| | background: #ffcdd2 !important; |
| | color: #666; |
| | } |
| | .result { |
| | background: #e8f5e8; |
| | padding: 15px; |
| | border-radius: 8px; |
| | margin-top: 15px; |
| | border-left: 4px solid #4caf50; |
| | } |
| | .controls { |
| | background: #f5f5f5; |
| | padding: 20px; |
| | border-radius: 10px; |
| | margin-bottom: 20px; |
| | } |
| | .control-group { |
| | margin-bottom: 15px; |
| | } |
| | .control-group label { |
| | display: inline-block; |
| | width: 120px; |
| | font-weight: bold; |
| | } |
| | .control-group input { |
| | padding: 5px; |
| | border: 1px solid #ddd; |
| | border-radius: 4px; |
| | width: 100px; |
| | } |
| | button { |
| | background: #667eea; |
| | color: white; |
| | border: none; |
| | padding: 10px 20px; |
| | border-radius: 5px; |
| | cursor: pointer; |
| | font-size: 16px; |
| | transition: background 0.3s; |
| | } |
| | button:hover { |
| | background: #5a67d8; |
| | } |
| | .logits-display { |
| | font-family: monospace; |
| | font-size: 1.1em; |
| | background: #f0f0f0; |
| | padding: 10px; |
| | border-radius: 5px; |
| | margin: 10px 0; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <h1>🤖 LLM Decoding Strategies Demo</h1> |
| | |
| | <div class="vocab-section"> |
| | <h2>📚 Vocabulary</h2> |
| | <p><strong>Tokens:</strong> ["the", "cat", "dog", "runs", "jumps", "quickly", ".", "and"]</p> |
| | <p><strong>Indices:</strong> [0, 1, 2, 3, 4, 5, 6, 7]</p> |
| | </div> |
| |
|
| | <div class="controls"> |
| | <h2>🎛️ Controls</h2> |
| | <div class="control-group"> |
| | <label>Temperature:</label> |
| | <input type="number" id="temperature" value="1.0" step="0.1" min="0.1" max="3.0"> |
| | </div> |
| | <div class="control-group"> |
| | <label>Top-k:</label> |
| | <input type="number" id="topk" value="3" min="1" max="8"> |
| | </div> |
| | <div class="control-group"> |
| | <label>Top-p:</label> |
| | <input type="number" id="topp" value="0.8" step="0.1" min="0.1" max="1.0"> |
| | </div> |
| | <button onclick="generateNewLogits()">🎲 Generate New Logits</button> |
| | </div> |
| |
|
| | <div class="logits-section"> |
| | <h2>📊 Current Logits</h2> |
| | <div id="logits-display" class="logits-display"></div> |
| | </div> |
| |
|
| | <div id="strategies-container"></div> |
| | </div> |
| |
|
| | <script> |
| | const vocab = ["the", "cat", "dog", "runs", "jumps", "quickly", ".", "and"]; |
| | let currentLogits = []; |
| | |
| | function generateRandomLogits() { |
| | return Array.from({length: 8}, () => (Math.random() - 0.5) * 6); |
| | } |
| | |
| | function softmax(logits, temperature = 1.0) { |
| | const scaledLogits = logits.map(x => x / temperature); |
| | const maxLogit = Math.max(...scaledLogits); |
| | const expLogits = scaledLogits.map(x => Math.exp(x - maxLogit)); |
| | const sumExp = expLogits.reduce((a, b) => a + b, 0); |
| | return expLogits.map(x => x / sumExp); |
| | } |
| | |
| | function greedyDecoding(logits) { |
| | const probs = softmax(logits); |
| | const maxIndex = probs.indexOf(Math.max(...probs)); |
| | return { |
| | selectedToken: vocab[maxIndex], |
| | selectedIndex: maxIndex, |
| | probs: probs, |
| | method: "Selected highest probability token" |
| | }; |
| | } |
| | |
| | function temperatureSampling(logits, temperature) { |
| | const probs = softmax(logits, temperature); |
| | const selectedIndex = sampleFromDistribution(probs); |
| | return { |
| | selectedToken: vocab[selectedIndex], |
| | selectedIndex: selectedIndex, |
| | probs: probs, |
| | method: `Temperature = ${temperature}, then sampled` |
| | }; |
| | } |
| | |
| | function topKSampling(logits, k) { |
| | const probs = softmax(logits); |
| | const indexed = probs.map((p, i) => ({prob: p, index: i})); |
| | indexed.sort((a, b) => b.prob - a.prob); |
| | |
| | const topK = indexed.slice(0, k); |
| | const topKProbs = new Array(vocab.length).fill(0); |
| | const sumTopK = topK.reduce((sum, item) => sum + item.prob, 0); |
| | |
| | topK.forEach(item => { |
| | topKProbs[item.index] = item.prob / sumTopK; |
| | }); |
| | |
| | const selectedIndex = sampleFromDistribution(topKProbs); |
| | return { |
| | selectedToken: vocab[selectedIndex], |
| | selectedIndex: selectedIndex, |
| | probs: topKProbs, |
| | originalProbs: probs, |
| | method: `Filtered to top-${k} tokens, then sampled` |
| | }; |
| | } |
| | |
| | function topPSampling(logits, p) { |
| | const probs = softmax(logits); |
| | const indexed = probs.map((prob, i) => ({prob, index: i})); |
| | indexed.sort((a, b) => b.prob - a.prob); |
| | |
| | let cumSum = 0; |
| | let cutoff = 0; |
| | for (let i = 0; i < indexed.length; i++) { |
| | cumSum += indexed[i].prob; |
| | if (cumSum >= p) { |
| | cutoff = i + 1; |
| | break; |
| | } |
| | } |
| | |
| | const nucleus = indexed.slice(0, cutoff); |
| | const nucleusProbs = new Array(vocab.length).fill(0); |
| | const sumNucleus = nucleus.reduce((sum, item) => sum + item.prob, 0); |
| | |
| | nucleus.forEach(item => { |
| | nucleusProbs[item.index] = item.prob / sumNucleus; |
| | }); |
| | |
| | const selectedIndex = sampleFromDistribution(nucleusProbs); |
| | return { |
| | selectedToken: vocab[selectedIndex], |
| | selectedIndex: selectedIndex, |
| | probs: nucleusProbs, |
| | originalProbs: probs, |
| | method: `Nucleus sampling with p=${p} (${cutoff} tokens)` |
| | }; |
| | } |
| | |
| | function sampleFromDistribution(probs) { |
| | const r = Math.random(); |
| | let cumSum = 0; |
| | for (let i = 0; i < probs.length; i++) { |
| | cumSum += probs[i]; |
| | if (r <= cumSum) { |
| | return i; |
| | } |
| | } |
| | return probs.length - 1; |
| | } |
| | |
| | function createProbabilityTable(probs, selectedIndex, originalProbs = null, title = "Probabilities") { |
| | let html = `<table class="probs-table"> |
| | <thead> |
| | <tr><th>Token</th><th>Index</th><th>${title}</th></tr> |
| | </thead> |
| | <tbody>`; |
| | |
| | probs.forEach((prob, i) => { |
| | let className = ''; |
| | if (i === selectedIndex) className = 'selected'; |
| | else if (originalProbs && probs[i] === 0) className = 'filtered'; |
| | |
| | html += `<tr class="${className}"> |
| | <td>${vocab[i]}</td> |
| | <td>${i}</td> |
| | <td>${prob.toFixed(4)}</td> |
| | </tr>`; |
| | }); |
| | |
| | html += '</tbody></table>'; |
| | return html; |
| | } |
| | |
| | function displayStrategy(title, result, description) { |
| | const hasOriginal = result.originalProbs !== undefined; |
| | |
| | let html = `<div class="strategy"> |
| | <h3>${title}</h3> |
| | <p><strong>Method:</strong> ${result.method}</p> |
| | <p>${description}</p>`; |
| | |
| | if (hasOriginal) { |
| | html += createProbabilityTable(result.originalProbs, -1, null, "Original Probs"); |
| | html += createProbabilityTable(result.probs, result.selectedIndex, result.originalProbs, "Filtered Probs"); |
| | } else { |
| | html += createProbabilityTable(result.probs, result.selectedIndex); |
| | } |
| | |
| | html += `<div class="result"> |
| | <strong>🎯 Selected Token:</strong> "${result.selectedToken}" (index: ${result.selectedIndex}) |
| | </div> |
| | </div>`; |
| | |
| | return html; |
| | } |
| | |
| | function runAllStrategies() { |
| | const temperature = parseFloat(document.getElementById('temperature').value); |
| | const k = parseInt(document.getElementById('topk').value); |
| | const p = parseFloat(document.getElementById('topp').value); |
| | |
| | const greedy = greedyDecoding(currentLogits); |
| | const tempSampling = temperatureSampling(currentLogits, temperature); |
| | const topK = topKSampling(currentLogits, k); |
| | const topP = topPSampling(currentLogits, p); |
| | |
| | let html = ''; |
| | |
| | html += displayStrategy( |
| | "🎯 Greedy Decoding", |
| | greedy, |
| | "Always selects the token with the highest probability. Deterministic and safe, but can be repetitive." |
| | ); |
| | |
| | html += displayStrategy( |
| | "🌡️ Temperature Sampling", |
| | tempSampling, |
| | "Applies temperature scaling to logits before sampling. Lower temperature = more focused, higher temperature = more random." |
| | ); |
| | |
| | html += displayStrategy( |
| | "🔝 Top-k Sampling", |
| | topK, |
| | "Only considers the k most probable tokens, zeros out the rest, then samples from the filtered distribution." |
| | ); |
| | |
| | html += displayStrategy( |
| | "🎯 Top-p (Nucleus) Sampling", |
| | topP, |
| | "Dynamically selects the smallest set of tokens whose cumulative probability exceeds p, then samples from them." |
| | ); |
| | |
| | document.getElementById('strategies-container').innerHTML = html; |
| | } |
| | |
| | function generateNewLogits() { |
| | currentLogits = generateRandomLogits(); |
| | document.getElementById('logits-display').innerHTML = |
| | `<strong>Raw Logits:</strong> [${currentLogits.map(x => x.toFixed(2)).join(', ')}]`; |
| | runAllStrategies(); |
| | } |
| | |
| | |
| | generateNewLogits(); |
| | |
| | |
| | document.getElementById('temperature').addEventListener('input', runAllStrategies); |
| | document.getElementById('topk').addEventListener('input', runAllStrategies); |
| | document.getElementById('topp').addEventListener('input', runAllStrategies); |
| | </script> |
| | </body> |
| | </html> |
