Sync explorer_app.py and clip_utils.py from main repo

scripts/explorer_app.py

@@ -557,6 +557,57 @@ def make_image_grid_html(images_info, title, cols=9):
     return html
 
 
+def make_compare_aggregations_html(top_infos, mean_infos, p75_infos, feat, n_each=5):
+    """Paper-ready side-by-side comparison of Top / Mean / 75th-percentile aggregations.
+
+    Each method gets its own column with a styled header.  Images are shown at a
+    reduced size so all three columns fit comfortably for a screenshot.
+    """
+    col_thumb = min(THUMB, 160)
+
+    sections = [
+        ("Top (Max Activation)", "#2563a8", top_infos),
+        ("Mean Activation",      "#1a7a4a", mean_infos),
+        ("75th Percentile",      "#7a3a9a", p75_infos),
+    ]
+
+    html = (
+        '<div style="font-family:Arial,Helvetica,sans-serif;background:#ffffff;'
+        'padding:14px 16px 10px 16px;border:1px solid #d0d0d0;border-radius:6px;'
+        'display:inline-block;box-shadow:0 1px 4px rgba(0,0,0,0.08)">'
+        f'<div style="font-size:12px;color:#666;margin-bottom:10px;letter-spacing:0.2px">'
+        f'<b>Feature {feat}</b> — aggregation method comparison</div>'
+        '<div style="display:flex;gap:20px;align-items:flex-start">'
+    )
+
+    for method_name, color, infos in sections:
+        html += (
+            '<div style="min-width:0">'
+            f'<div style="background:{color};color:#ffffff;font-size:12px;font-weight:bold;'
+            f'text-align:center;padding:5px 14px;border-radius:4px;margin-bottom:8px;'
+            f'letter-spacing:0.5px">{method_name}</div>'
+            '<div style="display:flex;gap:6px;flex-wrap:wrap">'
+        )
+        shown = (infos or [])[:n_each]
+        if not shown:
+            html += '<div style="color:#aaa;font-style:italic;font-size:11px;padding:8px">No images</div>'
+        for img, caption in shown:
+            url = pil_to_data_url(img)
+            parts = caption.split('<br>')
+            cap_html = '<br>'.join(parts)
+            html += (
+                f'<div style="text-align:center">'
+                f'<img src="{url}" width="{col_thumb}" height="{col_thumb}"'
+                f' style="border:1px solid #ccc;border-radius:3px;display:block"/>'
+                f'<div style="font-size:9px;color:#555;margin-top:2px;line-height:1.35">'
+                f'{cap_html}</div></div>'
+            )
+        html += '</div></div>'
+
+    html += '</div></div>'
+    return html
+
+
 # ---------- UMAP data source ----------
 # live_mask / live_indices / freq / mean_act / log_freq / umap_backup are all
 # already set by _apply_dataset_globals(0) above — just build the source from them.
@@ -699,6 +750,7 @@ mean_heatmap_div = Div(text="", width=900)
 mean_zoom_div = Div(text="", width=900)
 p75_heatmap_div = Div(text="", width=900)
 p75_zoom_div = Div(text="", width=900)
+compare_agg_div = Div(text="", width=1400)   # side-by-side aggregation comparison
 
 # Name editing widget (defined here so update_feature_display can reference it)
 name_input = TextInput(
@@ -786,7 +838,8 @@ def update_feature_display(feature_idx):
             'dead', f'Feature {feat} is dead — it never activated on the precompute set.')
         for div in [top_heatmap_div, top_zoom_div,
                     mean_heatmap_div, mean_zoom_div,
-                    p75_heatmap_div, p75_zoom_div]:
+                    p75_heatmap_div, p75_zoom_div,
+                    compare_agg_div]:
             div.text = ""
         return
 
@@ -879,6 +932,10 @@ def update_feature_display(feature_idx):
         p75_zoom_div.text = make_image_grid_html(
             p75_zm_infos, f"75th Percentile — Zoomed to peak patch (feature {feat})")
 
+        # Side-by-side aggregation comparison (paper-ready screenshot view)
+        compare_agg_div.text = make_compare_aggregations_html(
+            heatmap_infos, mean_hm_infos, p75_hm_infos, feat)
+
         status_div.text = _status_html('ok', f'&#x2713; Feature {feat} ready.')
         _update_view_visibility()
 
@@ -888,13 +945,14 @@ def update_feature_display(feature_idx):
 # ---------- View visibility ----------
 def _update_view_visibility():
     v = view_select.value
-    compare_all = (v == "Compare aggregations")
-    top_heatmap_div.visible = compare_all or (v == "Top (max activation)")
-    top_zoom_div.visible    = compare_all or (v == "Top (max activation)")
-    mean_heatmap_div.visible = compare_all or (v == "Mean activation")
-    mean_zoom_div.visible    = compare_all or (v == "Mean activation")
-    p75_heatmap_div.visible  = compare_all or (v == "75th percentile")
-    p75_zoom_div.visible     = compare_all or (v == "75th percentile")
+    is_compare = (v == "Compare aggregations")
+    top_heatmap_div.visible  = (v == "Top (max activation)")
+    top_zoom_div.visible     = (v == "Top (max activation)")
+    mean_heatmap_div.visible = (v == "Mean activation")
+    mean_zoom_div.visible    = (v == "Mean activation")
+    p75_heatmap_div.visible  = (v == "75th percentile")
+    p75_zoom_div.visible     = (v == "75th percentile")
+    compare_agg_div.visible  = is_compare
 
 view_select.on_change('value', lambda attr, old, new: _update_view_visibility())
 _update_view_visibility()  # set initial state
@@ -1727,6 +1785,7 @@ middle_panel = column(
     stats_div,
     name_panel,
     row(view_select, zoom_slider, heatmap_alpha_slider),
+    compare_agg_div,
     top_heatmap_div, top_zoom_div,
     mean_heatmap_div, mean_zoom_div,
     p75_heatmap_div, p75_zoom_div,