Merge pull request #14 from ContextLab/claude/fix-demos-XIOn4

Fix critical bugs in Demos 4, 5, and 6 - all demos now fully functional

Author: jeremymanning

demos/01-eliza/index.html

@@ -165,12 +165,13 @@ <h3>Example Pattern</h3>
   </div>
 
   <!-- Load JavaScript modules -->
-  <script src="js/pattern-matcher.js?v=1766709790"></script>
-  <script src="js/eliza-engine.js?v=1766709800"></script>
   <script src="js/rule-editor.js?v=1766709790"></script>
 
   <!-- Main Application Script -->
-  <script>
+  <script type="module">
+    import { ElizaEngine } from './js/eliza-engine.js';
+    import { PatternMatcher } from './js/pattern-matcher.js';
+
     // Initialize ELIZA
     let eliza;
     let ruleEditor;

demos/01-eliza/js/eliza-engine.js

@@ -2,7 +2,9 @@
  * ELIZA Engine - Main chatbot logic
  */
 
-class ElizaEngine {
+import { PatternMatcher } from './pattern-matcher.js';
+
+export class ElizaEngine {
   constructor() {
     this.patternMatcher = new PatternMatcher();
     this.rules = null;

demos/01-eliza/js/pattern-matcher.js

@@ -2,7 +2,7 @@
  * Pattern Matcher - Handles pattern matching and decomposition for ELIZA
  */
 
-class PatternMatcher {
+export class PatternMatcher {
   constructor() {
     this.debugMode = false;
   }

demos/02-tokenization/js/tokenizer-comparison.js

@@ -163,7 +163,7 @@ async function processTokenizer(name, text, tokenizer) {
     tokens.forEach((token, idx) => {
         const span = document.createElement('span');
         span.className = `token token-${idx % 8}`;
-        span.textContent = token.replace('▁', '·').replace('Ġ', '·');
+        span.textContent = token.replace(/▁/g, '·').replace(/Ġ/g, '·');
         span.title = `Token ID: ${encoded[idx]}`;
         outputDiv.appendChild(span);
     });

demos/03-embeddings/index.html

@@ -568,8 +568,9 @@ <h3>Add Custom Texts</h3>
             if (!app.currentData) return;
 
             document.getElementById('stat-total').textContent = app.currentData.texts.length;
-            document.getElementById('stat-dim').textContent = app.currentData.embeddings[0].length;
-            document.getElementById('stat-reduced').textContent = app.reducedData ?
+            document.getElementById('stat-dim').textContent = app.currentData.embeddings && app.currentData.embeddings.length > 0 ?
+                app.currentData.embeddings[0].length : '-';
+            document.getElementById('stat-reduced').textContent = app.reducedData && app.reducedData.length > 0 ?
                 app.reducedData[0].length : '-';
 
             const uniqueCategories = new Set(app.currentData.labels).size;

demos/04-attention/js/attention-extractor.js

@@ -34,7 +34,9 @@ export class AttentionExtractor {
             });
 
             console.log('Running model inference...');
-            const outputs = await this.currentModel(inputs);
+            const outputs = await this.currentModel(inputs, {
+                output_attentions: true
+            });
 
             // Extract attention weights
             // Transformers.js returns attentions as a list of tensors
@@ -73,10 +75,8 @@ export class AttentionExtractor {
             // Load tokenizer
             this.currentTokenizer = await AutoTokenizer.from_pretrained(modelName);
 
-            // Load model with attention output enabled
-            this.currentModel = await AutoModel.from_pretrained(modelName, {
-                output_attentions: true
-            });
+            // Load model (attention output is requested during inference)
+            this.currentModel = await AutoModel.from_pretrained(modelName);
 
             this.currentModelName = modelName;
             console.log(`Model ${modelName} loaded successfully`);

demos/05-transformer/index.html

@@ -6,7 +6,7 @@
     <title>Interactive Transformer Architecture Explorer</title>
     <link rel="stylesheet" href="css/transformer.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
 </head>

demos/05-transformer/js/component-explorer.js

@@ -504,6 +504,27 @@ class TransformerExplorer {
     }
 
     init() {
+        // Check for required dependencies
+        if (typeof THREE === 'undefined') {
+            alert('Error: Three.js library failed to load. Please refresh the page.');
+            return;
+        }
+
+        if (typeof THREE.OrbitControls === 'undefined') {
+            alert('Error: OrbitControls failed to load. Please refresh the page.');
+            return;
+        }
+
+        if (typeof d3 === 'undefined') {
+            alert('Error: D3.js library failed to load. Please refresh the page.');
+            return;
+        }
+
+        if (typeof anime === 'undefined') {
+            alert('Error: Anime.js library failed to load. Please refresh the page.');
+            return;
+        }
+
         // Initialize 3D architecture
         this.architecture3D = new Architecture3D('scene-container');
         this.architecture3D.init();

demos/06-gpt-playground/js/text-generator.js

@@ -261,66 +261,113 @@ class TextGenerationPlayground {
         promptSpan.textContent = prompt;
         this.elements.generatedText.appendChild(promptSpan);
 
-        // Since Transformers.js doesn't expose raw logits easily in streaming mode,
-        // we'll use a workaround: generate token by token and simulate the process
-
-        let currentText = prompt;
-        let generatedCount = 0;
-
-        while (generatedCount < maxLength && !this.shouldStop) {
-            // Generate next token
-            const output = await this.model(currentText, {
-                max_new_tokens: 1,
-                temperature: strategy === 'greedy' ? 0.001 : temperature,
+        try {
+            // Generate all tokens at once for better performance
+            // Note: Transformers.js doesn't expose raw logits, so we simulate probabilities
+            const output = await this.model(prompt, {
+                max_new_tokens: maxLength,
+                temperature: strategy === 'greedy' ? 0.1 : temperature,
                 top_k: strategy === 'topk' || strategy === 'combined' ? topK : 0,
                 top_p: strategy === 'topp' || strategy === 'combined' ? topP : 1.0,
                 repetition_penalty: repetitionPenalty,
-                return_full_text: false
+                do_sample: strategy !== 'greedy',
+                num_return_sequences: 1
             });
 
-            if (!output || output.length === 0) break;
+            if (!output || output.length === 0) {
+                throw new Error('Model returned no output');
+            }
 
             const generatedText = output[0].generated_text;
-            if (!generatedText) break;
+            if (!generatedText) {
+                throw new Error('Generated text is empty');
+            }
 
-            // Extract new token
-            const newToken = generatedText;
-            currentText += newToken;
+            // Split the generated text into tokens (approximate)
+            // This is a simple approximation since we don't have access to the actual tokenization
+            const fullText = generatedText.substring(prompt.length);
+            const tokens = this.approximateTokenize(fullText);
 
-            // Simulate token info (since we don't have direct access to logits)
-            const tokenInfo = this.simulateTokenInfo(newToken, strategy, {
-                temperature,
-                topK,
-                topP
-            });
+            // Display tokens with simulated animations
+            for (let i = 0; i < tokens.length && !this.shouldStop; i++) {
+                const token = tokens[i];
 
-            // Update display
-            this.displayToken(newToken, tokenInfo);
+                // Simulate token info (since we don't have direct access to logits)
+                const tokenInfo = this.simulateTokenInfo(token, strategy, {
+                    temperature,
+                    topK,
+                    topP
+                });
 
-            // Update statistics
-            this.updateStatistics(tokenInfo);
+                // Update display
+                this.displayToken(token, tokenInfo);
 
-            // Update visualizations
-            if (this.elements.showProbabilities.checked) {
-                this.visualizer.displayTokenProbabilities(tokenInfo, generatedCount + 1);
-            }
+                // Update statistics
+                this.updateStatistics(tokenInfo);
 
-            if (this.elements.showAlternatives.checked) {
-                this.visualizer.displayAlternatives(tokenInfo.topTokens);
-            }
+                // Update visualizations
+                if (this.elements.showProbabilities.checked) {
+                    this.visualizer.displayTokenProbabilities(tokenInfo, i + 1);
+                }
+
+                if (this.elements.showAlternatives.checked) {
+                    this.visualizer.displayAlternatives(tokenInfo.topTokens);
+                }
 
-            if (this.elements.showEntropy.checked) {
-                this.visualizer.updateEntropyChart(tokenInfo.entropy);
+                if (this.elements.showEntropy.checked) {
+                    this.visualizer.updateEntropyChart(tokenInfo.entropy);
+                }
+
+                // Small delay for visualization effect
+                await new Promise(resolve => setTimeout(resolve, 50));
             }
 
-            generatedCount++;
+            // Final statistics update
+            this.updateFinalStats();
 
-            // Small delay for visualization
-            await new Promise(resolve => setTimeout(resolve, 50));
+        } catch (error) {
+            console.error('Generation error:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Approximate tokenization for visualization
+     * Splits text into word-like tokens for display
+     * @param {string} text - Text to tokenize
+     * @returns {Array} Array of token strings
+     */
+    approximateTokenize(text) {
+        // Simple approximation: split on spaces and punctuation boundaries
+        // This is not the real BPE tokenization, but good enough for visualization
+        const tokens = [];
+        let currentToken = '';
+
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+
+            if (char === ' ' || char === '\n' || char === '\t') {
+                if (currentToken) {
+                    tokens.push(currentToken);
+                    currentToken = '';
+                }
+                tokens.push(char);
+            } else if (/[.,!?;:]/.test(char)) {
+                if (currentToken) {
+                    tokens.push(currentToken);
+                    currentToken = '';
+                }
+                tokens.push(char);
+            } else {
+                currentToken += char;
+            }
+        }
+
+        if (currentToken) {
+            tokens.push(currentToken);
         }
 
-        // Final statistics update
-        this.updateFinalStats();
+        return tokens;
     }
 
     /**
@@ -461,8 +508,8 @@ class TextGenerationPlayground {
         const maxLength = parseInt(this.elements.maxLength.value);
 
         const strategies = [
-            { name: 'Greedy', value: 'greedy', temp: 0.001 },
-            { name: 'Temperature (1.0)', value: 'temperature', temp: 1.0 }
+            { name: 'Greedy', value: 'greedy', temp: 0.1, doSample: false },
+            { name: 'Temperature (1.0)', value: 'temperature', temp: 1.0, doSample: true }
         ];
 
         document.getElementById('strategyAName').textContent = strategies[0].name;
@@ -471,8 +518,8 @@ class TextGenerationPlayground {
         const outputA = document.getElementById('outputA');
         const outputB = document.getElementById('outputB');
 
-        outputA.textContent = prompt;
-        outputB.textContent = prompt;
+        outputA.innerHTML = `<span style="color: #94a3b8;">${prompt}</span>`;
+        outputB.innerHTML = `<span style="color: #94a3b8;">${prompt}</span>`;
 
         this.elements.generateBtn.disabled = true;
 
@@ -482,17 +529,26 @@ class TextGenerationPlayground {
                 this.model(prompt, {
                     max_new_tokens: maxLength,
                     temperature: strategies[0].temp,
-                    return_full_text: false
+                    do_sample: strategies[0].doSample,
+                    num_return_sequences: 1
                 }),
                 this.model(prompt, {
                     max_new_tokens: maxLength,
                     temperature: strategies[1].temp,
-                    return_full_text: false
+                    do_sample: strategies[1].doSample,
+                    num_return_sequences: 1
                 })
             ]);
 
-            outputA.textContent = prompt + (resultA[0]?.generated_text || '');
-            outputB.textContent = prompt + (resultB[0]?.generated_text || '');
+            if (resultA && resultA[0]) {
+                const textA = resultA[0].generated_text.substring(prompt.length);
+                outputA.innerHTML = `<span style="color: #94a3b8;">${prompt}</span>${textA}`;
+            }
+
+            if (resultB && resultB[0]) {
+                const textB = resultB[0].generated_text.substring(prompt.length);
+                outputB.innerHTML = `<span style="color: #94a3b8;">${prompt}</span>${textB}`;
+            }
 
         } catch (error) {
             console.error('Comparison generation error:', error);

demos/07-rag/css/rag.css

@@ -139,6 +139,15 @@ header p {
     background: #059669;
 }
 
+.btn-warning {
+    background: var(--warning-color);
+    color: white;
+}
+
+.btn-warning:hover {
+    background: #d97706;
+}
+
 .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;