lighter color for basis decision boundary, pyodide status bar, tooltip error and weighted error

README.md

@@ -26,7 +26,7 @@ Use `{}` or an empty box for sklearn defaults. Use JSON `true`, `false`, and `nu
 
 Each Add trains one real sklearn estimator. Python implements the incremental ensemble orchestration so removal restores the retained ensemble exactly, and additions remain possible after a perfect learner. Bagging trains on bootstrap samples and combines majority votes. Multiclass AdaBoost (SAMME) trains with sample weights, computes weighted votes, and rejects learners that cannot beat chance. Perfect learners receive a finite capped vote weight. Some classifiers require both classes or enough samples in each bootstrap sample; sklearn reports a training error if a sample does not meet those requirements.
 
-Dot area represents the sample weight for the next boosting step. Hover a point for its coordinates and weight. Hover or keyboard-focus a model chip to preview its boundary over the ensemble. Grid predictions are computed in Python on a 160 × 160 mesh; training accuracy and sample weights use exact training predictions. Arrow keys and Space/Enter add points on the focused canvas.
+Dot area represents the sample weight for the next boosting step. Hover a point for its coordinates and weight. Hover or keyboard-focus a model chip to temporarily replace the ensemble boundary with that learner’s filled decision regions, using the same colors. Moving away restores the ensemble. Grid predictions are computed in Python on a 160 × 160 mesh; training accuracy and sample weights use exact training predictions. Arrow keys and Space/Enter add points on the focused canvas.
 
 Editing data or configuration clears the ensemble. Results from an in-progress fit are discarded if the data or settings change. Limits: 1,500 points and 100 learners. Accuracy is training accuracy, not held-out accuracy.
 

app.js

@@ -2,6 +2,7 @@ const $=id=>document.getElementById(id);
 let points=[],models=[],label=-1,drawing=false,last=null,keyboard={x:.5,y:.5},showCursor=false;
 const colors={'-1':'#557cd4','1':'#e39a57','2':'#42a58b'};
 const classNames={'-1':'A','1':'B','2':'C'},regionColors={'-1':'#e1e9fb','1':'#fae8d8','2':'#dbf1e9'};
+const modelRegionColors={'-1':'#eaf0fc','1':'#fcefe4','2':'#e6f5f0'};
 let hoveredModel=null,backendReady=false,busy=false,revision=0,classifiers=[];
 let backend;
 function sampleWeights(){return $('method').value==='boosting'&&points.length?Ensemble.weightsFor(points,models):null;}
@@ -38,29 +39,13 @@ function paint(canvas,boundary=false) {
   const ctx=canvas.getContext('2d');
   ctx.setTransform(bufferWidth/w,0,0,bufferHeight/h,0,0);
   ctx.clearRect(0,0,w,h);
+  const preview=hoveredModel===null?null:models[hoveredModel];
   if(boundary&&models.length) for(let x=0;x<w;x+=6) for(let y=0;y<h;y+=6) {
-    ctx.fillStyle=regionColors[Ensemble.vote(models,{x:x/w,y:1-y/h})];ctx.fillRect(x,y,6,6);
+    const point={x:x/w,y:1-y/h};
+    ctx.fillStyle=preview?modelRegionColors[Ensemble.predict(preview.tree,point)]:regionColors[Ensemble.vote(models,point)];ctx.fillRect(x,y,6,6);
   }
   ctx.strokeStyle='#e9edf4';ctx.lineWidth=1;
   for(let i=1;i<10;i++){ctx.beginPath();ctx.moveTo(i*w/10,0);ctx.lineTo(i*w/10,h);ctx.moveTo(0,i*h/10);ctx.lineTo(w,i*h/10);ctx.stroke();}
-  if(hoveredModel!==null&&models[hoveredModel]){
-    const model=models[hoveredModel].tree,step=3;
-    // Trace class transitions, keeping the ensemble's filled regions visible underneath.
-    ctx.strokeStyle='#873fc5';ctx.lineWidth=2;ctx.beginPath();
-    for(let x=0;x<w;x+=step) for(let y=0;y<h;y+=step){
-      const prediction=Ensemble.predict(model,{x:(x+step/2)/w,y:1-(y+step/2)/h});
-      if(x+step<w&&prediction!==Ensemble.predict(model,{x:(x+1.5*step)/w,y:1-(y+step/2)/h})){
-        ctx.moveTo(x+step,y);ctx.lineTo(x+step,Math.min(h,y+step));
-      }
-      if(y+step<h&&prediction!==Ensemble.predict(model,{x:(x+step/2)/w,y:1-(y+1.5*step)/h})){
-        ctx.moveTo(x,y+step);ctx.lineTo(Math.min(w,x+step),y+step);
-      }
-    }
-    ctx.stroke();
-    ctx.fillStyle='#ffffffeb';ctx.fillRect(8,8,220,28);
-    ctx.fillStyle='#873fc5';ctx.font='12px system-ui';
-    ctx.fillText(`Model ${hoveredModel+1} boundary${model.grid.every(v=>v===model.grid[0])?' · constant prediction':''}`,16,26);
-  }
   const weights=sampleWeights();
   points.forEach((p,i)=>{
     // Circle area is proportional to sample weight; uniform weights keep the default size.
@@ -78,10 +63,13 @@ function render(message) {
   $('class-count').textContent=[-1,1,2].map(c=>`${classNames[c]}: ${points.filter(p=>p.label===c).length}`).join(' · ');
   $('remove').disabled=busy||!models.length;$('undo').disabled=!points.length;$('clear').disabled=!points.length;
   $('add').disabled=busy||!backendReady||new Set(points.map(p=>p.label)).size<2||models.length>=100||($('method').value==='boosting'&&!classifiers.find(c=>c.name===$('base').value)?.weighted);
-  $('method-badge').textContent={boosting:'Boosting',bagging:'Bagging',random_forest:'Random Forest',extra_trees:'Extra Trees'}[$('method').value];
+  $('method-badge').textContent={boosting:'AdaBoost',bagging:'Bagging',random_forest:'Random Forest',extra_trees:'Extra Trees'}[$('method').value];
   $('models').replaceChildren(...models.map((m,i)=>{
     const el=document.createElement('span');el.className='model-chip';el.tabIndex=0;
-    el.textContent=`${m.forest?'Tree':'Model'} ${i+1}`;el.title=`Vote weight: ${m.alpha.toFixed(3)}. Hover or focus to preview boundary.`;
+    const errorRate=100*points.filter((p,j)=>m.predictions[j]!==p.label).length/points.length;
+    const weights=$('method').value==='boosting'?Ensemble.weightsFor(points,models.slice(0,i)):null;
+    const weightedError=weights?100*points.reduce((sum,p,j)=>sum+(m.predictions[j]!==p.label?weights[j]:0),0):errorRate;
+    el.textContent=`${m.forest?'Tree':'Model'} ${i+1}`;el.title=`Training error: ${errorRate.toFixed(1)}%\nWeighted error: ${weightedError.toFixed(1)}%\nVote weight: ${m.alpha.toFixed(3)}`;
     el.onmouseenter=el.onfocus=()=>previewModel(i);
     el.onmouseleave=el.onblur=()=>previewModel(null);
     return el;
@@ -146,9 +134,19 @@ if(typeof ResizeObserver!=='undefined') {
   new ResizeObserver(()=>paint($('boundary'),true)).observe($('boundary'));
 }
 
+function setRuntimeStatus(state,text){
+  $('runtime-status').setAttribute('data-state',state);
+  $('runtime-status-text').textContent=text;
+}
+setRuntimeStatus('loading','Loading Pythong runtime...');
 backend=new PythonBackend(message=>{if(!backendReady)$('status').textContent=message;});
 $('status').textContent='Loading Python and scikit-learn… You can draw while they load.';
 backend.ready.then(available=>{
   classifiers=available;backendReady=true;$('base').disabled=false;updateClassifiers();
+  setRuntimeStatus('ready','Python runtime ready');
   render('scikit-learn is ready. Draw at least two classes and add a model.');
-}).catch(error=>render(`Could not load Python: ${error.message} Serve this app over HTTP and reload to retry.`));
+}).catch(error=>{
+  backendReady=false;
+  setRuntimeStatus('error','Python runtime failed to load');
+  render(`Could not load Python: ${error.message} Serve this app over HTTP and reload to retry.`);
+});

app.test.js

@@ -6,25 +6,36 @@ const Ensemble=require('./ensemble.js');
 
 test('async training ignores stale results, accepts parameters and preserves hover/removal',async()=>{
   const elements=new Map(),calls=[];
-  const ctx=new Proxy({}, {get:()=>()=>{}});
+  const fills=[];
+  const ctx=new Proxy({}, {get:(target,key)=>key==='fillRect'?()=>fills.push(target.fillStyle):(key in target?target[key]:()=>{})});
   const document={
     getElementById(id){
       if(!elements.has(id)) elements.set(id,{
         width:6,height:6,value:id==='method'?'boosting':id==='params'?'{}':'DecisionTreeClassifier',
         getContext:()=>ctx,addEventListener(){},replaceChildren(...children){this.children=children;},
-        setAttribute(){},removeAttribute(){},style:{},offsetWidth:240,offsetHeight:60,
+        setAttribute(key,value){this[key]=value;},removeAttribute(){},style:{},offsetWidth:240,offsetHeight:60,
       });
       return elements.get(id);
     },querySelectorAll:()=>[],createElement:()=>({}),
   };
+  let resolveReady;
   class PythonBackend{
-    ready=Promise.resolve([{name:'DecisionTreeClassifier',weighted:true}]);
+    ready=new Promise(resolve=>{resolveReady=resolve;});
     add(request){return new Promise(resolve=>calls.push({request,resolve}));}
   }
   const sandbox=vm.createContext({document,Ensemble,PythonBackend,window:{innerWidth:1000,innerHeight:800}});
   vm.runInContext(fs.readFileSync(require.resolve('./app.js'),'utf8'),sandbox);
-  await Promise.resolve();
   const get=id=>document.getElementById(id);
+  assert.equal(get('runtime-status')['data-state'],'loading');
+  assert.equal(get('runtime-status-text').textContent,'Loading Pythong runtime...');
+  get('example').onclick();
+  assert.equal(get('add').disabled,true);
+  resolveReady([{name:'DecisionTreeClassifier',weighted:true}]);
+  await Promise.resolve();
+  assert.equal(get('runtime-status')['data-state'],'ready');
+  assert.equal(get('runtime-status-text').textContent,'Python runtime ready');
+  assert.equal(get('add').disabled,false);
+  assert.equal(get('method-badge').textContent,'AdaBoost');
   vm.runInContext('points=[{x:.2,y:.2,label:-1},{x:.8,y:.8,label:1}]; reset();',sandbox);
   const model={tree:{size:2,grid:[-1,-1,1,1]},predictions:[-1,1],alpha:1,perfect:true};
   let pending=get('add').onclick();
@@ -37,6 +48,7 @@ test('async training ignores stale results, accepts parameters and preserves hov
     calls[i].resolve(model);await pending;
     assert.equal(get('count').textContent,i);assert.equal(get('add').disabled,false);
   }
+  assert.match(get('models').children[0].title,/Training error: 0\.0%/);
   get('models').children[0].onmouseenter();assert.equal(vm.runInContext('hoveredModel',sandbox),0);
   get('models').children[0].onmouseleave();assert.equal(vm.runInContext('hoveredModel',sandbox),null);
   get('remove').onclick();assert.equal(get('count').textContent,1);
@@ -45,4 +57,24 @@ test('async training ignores stale results, accepts parameters and preserves hov
   assert.match(get('point-tooltip').textContent,/Sample weight: 0.5000/);
   get('params').value='[]';await get('add').onclick();
   assert.match(get('status').textContent,/Invalid arguments/);
+  // The hovered learner disagrees with the ensemble across the entire plot.
+  vm.runInContext('models=[{classes:[-1,1,2],alpha:1,predictions:[2,2],tree:{size:1,grid:[2]}},{classes:[-1,1,2],alpha:2,predictions:[1,1],tree:{size:1,grid:[1]}}]; render();',sandbox);
+  assert.equal(fills.at(-1),'#fae8d8');
+  assert.match(get('models').children[0].title,/Training error: 100\.0%/);
+  assert.match(get('models').children[1].title,/Training error: 50\.0%/);
+  fills.length=0;get('models').children[0].onmouseenter();
+  assert.ok(fills.length>0);assert.ok(fills.every(color=>color==='#e6f5f0'));
+  fills.length=0;get('models').children[0].onmouseleave();
+  assert.ok(fills.every(color=>color==='#fae8d8'));
+  fills.length=0;get('models').children[0].onfocus();
+  assert.ok(fills.every(color=>color==='#e6f5f0'));
+  get('models').children[0].onblur();
+  // Each model's weighted error uses only the learners preceding it.
+  vm.runInContext('models=[{alpha:Math.log(3),predictions:[1,1],tree:{size:1,grid:[1]}},{alpha:2,predictions:[1,1],tree:{size:1,grid:[1]}}]; render();',sandbox);
+  assert.equal(get('models').children[0].title,'Training error: 50.0%\nWeighted error: 50.0%\nVote weight: 1.099');
+  assert.equal(get('models').children[1].title,'Training error: 50.0%\nWeighted error: 75.0%\nVote weight: 2.000');
+  get('method').value='bagging';
+  vm.runInContext('render();',sandbox);
+  assert.equal(get('models').children[1].title,'Training error: 50.0%\nWeighted error: 50.0%\nVote weight: 2.000');
+
 });

index.html

@@ -2,13 +2,14 @@
 <html lang="en">
 <head>
   <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Ensemble playground</title><link rel="stylesheet" href="style.css?v=multiclass-1">
+  <title>Ensemble playground</title><link rel="stylesheet" href="style.css?v=runtime-status-1">
 </head>
 <body>
 <main>
   <div class="intro"><h1>Ensemble playground</h1><p>Draw a dataset. Build an ensemble. Watch the boundary evolve.</p></div>
+  <div id="runtime-status" class="runtime-status" role="status" aria-live="polite" data-state="loading"><span class="runtime-dot" aria-hidden="true"></span><span id="runtime-status-text">Loading Pythong runtime...</span></div>
   <div class="layout">
-    <section class="card result"><div class="card-heading"><div><h2>Decision boundary</h2></div><span id="method-badge" class="badge">Boosting</span></div>
+    <section class="card result"><div class="card-heading"><div><h2>Decision boundary</h2></div><span id="method-badge" class="badge">AdaBoost</span></div>
       <div class="plot"><canvas id="boundary" width="600" height="600" tabindex="0" aria-label="Draw training points and view the ensemble decision boundary. Click or drag to add the selected class. Arrow keys move the keyboard cursor; Space or Enter adds a point."></canvas><span class="axis x">Feature 1 →</span><span class="axis y">Feature 2 →</span><div id="empty">Choose a class on the right, then click or drag here to draw points</div></div>
       <div class="stats"><div><span>BASE MODELS</span><strong id="count">0</strong></div><div><span>TRAINING ACCURACY</span><strong id="accuracy">—</strong></div><div><span>DATA POINTS</span><strong id="points">0</strong></div></div>
       <div id="models" class="models" aria-label="Added base models"></div>
@@ -19,7 +20,7 @@
       <div class="canvas-caption">Draw on the decision-boundary plot · <span id="class-count">A: 0 · B: 0 · C: 0</span></div>
       <div class="dataset-actions"><button id="example">Load example</button><button id="undo">Undo point</button><button id="clear">Clear</button></div>
       <div class="divider"></div><h3><span class="step">2</span> Configure the ensemble</h3>
-      <label for="method">Ensemble method</label><select id="method"><option value="boosting">Boosting (AdaBoost)</option><option value="bagging">Bagging</option><option value="random_forest">Random Forest</option><option value="extra_trees">Extra Trees</option></select>
+      <label for="method">Ensemble method</label><select id="method"><option value="boosting">AdaBoost</option><option value="bagging">Bagging</option><option value="random_forest">Random Forest</option><option value="extra_trees">Extra Trees</option></select>
       <label for="base">scikit-learn classifier</label><select id="base" disabled>
         <option value="DecisionTreeClassifier">DecisionTreeClassifier</option>
       </select>
@@ -32,5 +33,5 @@
       <p id="status" role="status" aria-live="polite"></p>
     </aside>
   </div>
-</main><div id="point-tooltip" role="tooltip" hidden></div><script src="ensemble.js?v=multiclass-1"></script><script src="backend-client.js?v=multiclass-1"></script><script src="app.js?v=multiclass-1"></script>
+</main><div id="point-tooltip" role="tooltip" hidden></div><script src="ensemble.js?v=multiclass-1"></script><script src="backend-client.js?v=multiclass-1"></script><script src="app.js?v=weighted-error-1"></script>
 </body></html>

style.css

@@ -40,3 +40,8 @@ textarea[aria-invalid="true"]{border-color:#c24d4d}
 .green{background:#42a58b}
 .toolbar{gap:6px}
 .class-button{padding:9px 10px;gap:6px}
+
+.runtime-status{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-shrink:0;margin-bottom:7px;font-size:11px;color:#6c788a}
+.runtime-dot{width:8px;height:8px;border-radius:50%;background:#e39a57;flex-shrink:0}
+.runtime-status[data-state="ready"] .runtime-dot{background:#42a58b}
+.runtime-status[data-state="error"] .runtime-dot{background:#c24d4d}