tooltip: left of cursor + add mean attention; rename to Visual Tree

README.md

@@ -1,5 +1,5 @@
 ---
-title: DINO Hierarchies
+title: Visual Tree
 emoji: 🌳
 colorFrom: blue
 colorTo: indigo

app.py

@@ -108,7 +108,7 @@ def process(image):
 
 if gr is not None:
     with gr.Blocks(title="DINO Hierarchies", theme=gr.themes.Base()) as demo:
-        gr.Markdown("# 🌳 DINO Hierarchies\nUpload an image → get its **condensed tree** (hover a node) "
+        gr.Markdown("# 🌳 Visual Tree\nUpload an image → get its **condensed tree** (hover a node) "
                     "and the **reveal animation** (best-first by CLS attention). Runs DINOv3 ViT-L/16.")
         with gr.Row():
             inp = gr.Image(type="pil", label="Upload an image", height=300)

tree_widget.html

@@ -89,10 +89,10 @@ 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.tau!=null?` · splits at τ=${n.tau}`:' · leaf');
+      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');
     });
     el.addEventListener('mousemove',e=>{ const b=right.getBoundingClientRect();
-      tip.style.left=(e.clientX-b.left+12)+'px'; tip.style.top=(e.clientY-b.top+12)+'px'; });
+      tip.style.left=(e.clientX-b.left-tip.offsetWidth-12)+'px'; tip.style.top=(e.clientY-b.top+12)+'px'; });
     el.addEventListener('mouseleave',()=>{ clearHL(); tip.style.opacity=0; });
   });
 }