consistent palette (blue=focus, red=past only); tooltip shows % + raw mean attn value

app.py

@@ -84,8 +84,9 @@ def build_tree(image):
     tree = {"g": g, "nleaves": nleaves, "maxdepth": maxdepth,
             "nodes": [{"id": i, "x": round(xpos[i], 3), "depth": n["depth"], "parent": n["parent"],
                        "leaf": len(n["children"]) == 0, "n": len(n["leaves"]),
-                       "att": round(float(att_pct[n["leaves"]].sum()), 1),
-                       "attm": round(float(att_pct[n["leaves"]].mean()), 4),
+                       "att": round(float(att_pct[n["leaves"]].sum()), 1),       # % of total attention
+                       "attm": round(float(att_pct[n["leaves"]].mean()), 4),     # mean attention % per patch (reveal order)
+                       "attmv": round(float(att[n["leaves"]].mean()), 5),        # raw mean attention value per patch
                        "tau": n["split_tau"], "patches": n["leaves"]} for i, n in enumerate(nodes)]}
     buf = io.BytesIO(); img.save(buf, "PNG")
     return tree, base64.b64encode(buf.getvalue()).decode()

reveal_widget.html

@@ -79,11 +79,11 @@ function renderImage(f){
   ctx.font=Math.round(cell*0.46)+'px monospace'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.lineWidth=2;
   for(let p=0;p<P;p++){ const x=(p%G)*cell+cell/2, y=(Math.floor(p/G))*cell+cell/2;
     ctx.strokeStyle='rgba(0,0,0,0.85)'; ctx.strokeText(pd[p],x,y);
-    ctx.fillStyle=pcl[p]?'#ffffff':'#ff5050'; ctx.fillText(pd[p],x,y); }
-  // red outline of the segment currently being looked at
+    ctx.fillStyle=pcl[p]?'#ffffff':'#cfd4e0'; ctx.fillText(pd[p],x,y); }
+  // blue outline of the segment currently being looked at (matches the "present" node)
   const present=(f>=1&&f<=N)?ORDER[f-1]:null;
   if(present!=null){ const ps=NODES[present].patches, set=new Set(ps);
-    ctx.strokeStyle='rgba(255,40,40,0.95)'; ctx.lineWidth=2;
+    ctx.strokeStyle='rgba(91,156,246,0.95)'; ctx.lineWidth=2;
     ps.forEach(p=>{ const r=Math.floor(p/G),c=p%G;
       [[r-1,c],[r+1,c],[r,c-1],[r,c+1]].forEach(([rr,cc])=>{
         if(rr<0||rr>=G||cc<0||cc>=G||!set.has(rr*G+cc)){

tree_widget.html

@@ -47,7 +47,7 @@ function sizeImage(){
 // attention color (low=blue, high=orange)
 function attColor(a){
   const t=Math.min(1, a/25); // 25% saturates
-  const c1=[91,156,246], c2=[244,162,97];
+  const c1=[150,158,176], c2=[244,162,97];   // attention heat: grey(low) -> orange(high)
   return `rgb(${Math.round(c1[0]+(c2[0]-c1[0])*t)},${Math.round(c1[1]+(c2[1]-c1[1])*t)},${Math.round(c1[2]+(c2[2]-c1[2])*t)})`;
 }
 function highlight(node){
@@ -56,7 +56,7 @@ function highlight(node){
   ctx.fillStyle='rgba(8,10,18,0.72)'; ctx.fillRect(0,0,S,S);
   const set=new Set(node.patches);
   node.patches.forEach(p=>{ const r=Math.floor(p/G), c=p%G; ctx.clearRect(c*cell,r*cell,cell,cell); });
-  ctx.strokeStyle='rgba(255,255,255,0.9)'; ctx.lineWidth=1.5;
+  ctx.strokeStyle='rgba(91,156,246,0.95)'; ctx.lineWidth=1.5;   // blue = "focused" region
   // outline boundary of the lit region
   node.patches.forEach(p=>{ const r=Math.floor(p/G), c=p%G;
     const nb=[[r-1,c],[r+1,c],[r,c-1],[r,c+1]];
@@ -89,7 +89,7 @@ function drawTree(){
   circles.forEach(el=>{
     const n=NODES[+el.dataset.id];
     el.addEventListener('mouseenter',e=>{ highlight(n);
-      tip.style.opacity=1; tip.innerHTML=`level ${n.depth} · ${n.n} patches · ${n.att}% attn · ${n.attm}%/patch mean`+(n.tau!=null?` · splits at τ=${n.tau}`:' · leaf');
+      tip.style.opacity=1; tip.innerHTML=`level ${n.depth} · ${n.n} patches · ${n.att}% of attention · mean attn ${n.attmv}`+(n.tau!=null?` · splits at τ=${n.tau}`:' · leaf');
     });
     el.addEventListener('mousemove',e=>{ const b=right.getBoundingClientRect();
       tip.style.left=(e.clientX-b.left-tip.offsetWidth-12)+'px'; tip.style.top=(e.clientY-b.top+12)+'px'; });