fix(demos): Resolve JavaScript errors across multiple demos

Fixes issue #32

- Demo 02: Use encode()+decode() instead of non-existent tokenize()
- Demo 04: Align Transformers.js version to 2.17.1
- Demo 05: Switch OrbitControls CDN to jsdelivr for reliability
- Demo 10: Switch Compromise NLP CDN to jsdelivr
- Demo 13: Add proper ES module import for Transformers.js

Root causes addressed:
- Transformers.js requires ES module imports, not window globals
- Unreliable CDNs replaced with jsdelivr
- Corrected API method usage for tokenizers

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: jeremymanning

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

@@ -148,21 +148,32 @@ async function tokenizeText(text) {
 
 // Process individual tokenizer
 async function processTokenizer(name, text, tokenizer) {
+    // encode() returns the token IDs as an array
     const encoded = await tokenizer.encode(text);
-    const tokens = await tokenizer.tokenize(text);
+
+    // Get token strings by decoding each ID individually
+    // This works around the fact that tokenize() may not be available
+    const tokens = [];
+    for (let i = 0; i < encoded.length; i++) {
+        const tokenStr = tokenizer.decode([encoded[i]], { skip_special_tokens: false });
+        tokens.push(tokenStr);
+    }
 
     const outputDiv = document.getElementById(`${name}-output`);
     const idsDiv = document.getElementById(`${name}-ids`);
     const tokenCountSpan = document.getElementById(`${name}-token-count`);
     const ratioSpan = document.getElementById(`${name}-ratio`);
 
-    // Clear previous output
-    outputDiv.innerHTML = '';
+    // Clear previous output using safe DOM method
+    while (outputDiv.firstChild) {
+        outputDiv.removeChild(outputDiv.firstChild);
+    }
 
     // Display tokens with colors
     tokens.forEach((token, idx) => {
         const span = document.createElement('span');
         span.className = `token token-${idx % 8}`;
+        // Clean up special characters for display
         span.textContent = token.replace(/▁/g, '·').replace(/Ġ/g, '·');
         span.title = `Token ID: ${encoded[idx]}`;
         outputDiv.appendChild(span);
@@ -183,7 +194,10 @@ async function processTokenizer(name, text, tokenizer) {
 // Clear all outputs
 function clearOutputs() {
     ['gpt2', 'bert', 't5'].forEach(name => {
-        document.getElementById(`${name}-output`).innerHTML = '';
+        const outputEl = document.getElementById(`${name}-output`);
+        while (outputEl.firstChild) {
+            outputEl.removeChild(outputEl.firstChild);
+        }
         document.getElementById(`${name}-ids`).textContent = '';
         document.getElementById(`${name}-token-count`).textContent = 'Tokens: -';
         document.getElementById(`${name}-ratio`).textContent = 'Ratio: -';

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

@@ -3,7 +3,7 @@
  * Uses Transformers.js to load models and retrieve attention patterns
  */
 
-import { pipeline, AutoTokenizer, AutoModel } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected].2';
+import { pipeline, AutoTokenizer, AutoModel } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected].1';
 
 export class AttentionExtractor {
     constructor() {

demos/05-transformer/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="../shared/css/demo-styles.css">
     <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://threejs.org/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/10-pos-tagging/index.html

@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="../shared/css/demo-styles.css">
     <link rel="stylesheet" href="css/pos.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/builds/compromise.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/builds/compromise.min.js"></script>
 </head>
 <body>
     <nav class="demo-nav">

demos/13-bert-mlm/js/bert-model.js

@@ -3,6 +3,9 @@
  * Handles masked language modeling and attention extraction
  */
 
+// Import Transformers.js at module level
+import { pipeline, AutoTokenizer, AutoModelForMaskedLM, Tensor } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
+
 export class BERTModel {
     constructor(modelId = 'bert-base-uncased') {
         this.modelId = modelId;
@@ -18,8 +21,6 @@ export class BERTModel {
         console.log(`Loading model: ${this.modelId}`);
 
         try {
-            // Import Transformers.js
-            const { pipeline, AutoTokenizer, AutoModelForMaskedLM } = window.Transformers;
 
             // Load tokenizer
             this.tokenizer = await AutoTokenizer.from_pretrained(this.modelId);
@@ -88,8 +89,7 @@ export class BERTModel {
             maskedInputIds[idx] = this.maskTokenId;
         });
 
-        // Create input tensor
-        const { Tensor } = await import('https://cdn.jsdelivr.net/npm/@xenova/[email protected]');
+        // Create input tensor (Tensor is now imported at module level)
         const inputs = {
             input_ids: new Tensor('int64', BigInt64Array.from(maskedInputIds.map(id => BigInt(id))), [1, maskedInputIds.length]),
             attention_mask: new Tensor('int64', BigInt64Array.from(maskedInputIds.map(() => BigInt(1))), [1, maskedInputIds.length])
@@ -231,8 +231,6 @@ export class BERTModel {
      * Fill mask using the fill-mask pipeline (alternative method)
      */
     async fillMaskPipeline(text) {
-        const { pipeline } = window.Transformers;
-
         const unmasker = await pipeline('fill-mask', this.modelId);
         const results = await unmasker(text);
 

notes/2026-01-01-js-fixes-issue32.md

@@ -0,0 +1,94 @@
+# Session Notes: JavaScript Error Fixes (Issue #32)
+
+## Date: 2026-01-01
+
+## Summary
+
+Fixed JavaScript errors in multiple LLM course demos as documented in GitHub issue #32.
+
+## Changes Made
+
+### 1. Demo 02 (Tokenization) - `tokenizer.tokenize is not a function`
+**File:** `demos/02-tokenization/js/tokenizer-comparison.js`
+
+**Issue:** The `tokenizer.tokenize()` method doesn't exist in Transformers.js AutoTokenizer. Only `encode()` and `decode()` are available.
+
+**Fix:** Changed the implementation to:
+1. Use `tokenizer.encode(text)` to get token IDs
+2. Decode each token ID individually with `tokenizer.decode([id])` to get token strings
+3. Also fixed innerHTML usage to use safe DOM methods (removeChild loop)
+
+### 2. Demo 04 (Attention) - Version Inconsistency
+**File:** `demos/04-attention/js/attention-extractor.js`
+
+**Issue:** Used Transformers.js version @2.17.2 while other demos use @2.17.1
+
+**Fix:** Changed import to use consistent version @2.17.1
+
+### 3. Demo 05 (Transformer) - OrbitControls Error
+**File:** `demos/05-transformer/index.html`
+
+**Issue:** OrbitControls was loaded from `https://threejs.org/examples/js/controls/OrbitControls.js` which may not be available or have CORS issues.
+
+**Fix:** Changed to use jsdelivr CDN: `https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js`
+
+### 4. Demo 10 (POS Tagging) - `nlp is not defined`
+**File:** `demos/10-pos-tagging/index.html`
+
+**Issue:** Compromise.js was loaded from unpkg CDN which may have reliability issues.
+
+**Fix:** Changed from `https://unpkg.com/[email protected]/builds/compromise.min.js` to `https://cdn.jsdelivr.net/npm/[email protected]/builds/compromise.min.js`
+
+### 5. Demo 13 (BERT MLM) - Transformers.js Not Loading
+**File:** `demos/13-bert-mlm/js/bert-model.js`
+
+**Issue:** The code tried to destructure `{ pipeline, AutoTokenizer, AutoModelForMaskedLM }` from `window.Transformers`, but the Transformers.js script tag doesn't set a global `window.Transformers` object.
+
+**Fix:**
+1. Added ES module import at top of file: `import { pipeline, AutoTokenizer, AutoModelForMaskedLM, Tensor } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]'`
+2. Removed references to `window.Transformers`
+3. Moved `Tensor` import to module level instead of dynamic import
+
+## Demos Analyzed But Not Changed
+
+The following demos were analyzed and found to have correct code structure. Their issues are likely environment-related:
+
+### Demo 01 (ELIZA) - Path Error
+- Code correctly loads from `data/eliza-rules.json`
+- The JSON file exists at the correct path
+- Issue may be CORS/local file access when not using a web server
+
+### Demo 03, 12, 14 (Embeddings, Semantic Search, Embeddings Comparison) - ES Module Issues
+- All three demos already have `type="module"` on script tags
+- Code correctly uses ES module syntax
+- Dynamic imports use proper CDN URLs
+- Issue may be CORS or CDN availability
+
+### Demo 07 (RAG) - Model Loading Fails
+- Uses dynamic import for Transformers.js (correct approach)
+- Data file `wikipedia-articles.json` exists (5MB)
+- Issue is likely network-related (large model download, CDN availability)
+
+### Demo 11 (Analogies) - Plotly 3D Cameraposition Error
+- Visualization code uses correct Plotly layout syntax
+- Camera configuration is properly structured: `camera: { eye: { x, y, z } }`
+- Error may be intermittent or browser-specific
+
+## Root Causes Identified
+
+1. **CDN Reliability:** unpkg and threejs.org direct links can be unreliable. jsdelivr is more consistent.
+
+2. **Transformers.js API:**
+   - No `window.Transformers` global - must use ES module imports
+   - `tokenizer.tokenize()` doesn't exist - use `encode()` + `decode()`
+
+3. **Three.js OrbitControls:** Must use versioned CDN URL that matches Three.js version
+
+4. **ES Modules:** Script tags must have `type="module"` for import/export syntax
+
+## Files Changed
+- `demos/02-tokenization/js/tokenizer-comparison.js`
+- `demos/04-attention/js/attention-extractor.js`
+- `demos/05-transformer/index.html`
+- `demos/10-pos-tagging/index.html`
+- `demos/13-bert-mlm/js/bert-model.js`