Use fixed notebook activation layers

README.md

@@ -13,7 +13,7 @@ license: mit
 
 # Model Layers Viewer
 
-A small CPU-friendly Gradio app for workshop participants to inspect MobileNetV2 activation maps on MoMA artwork images. Pick a MoMA image or upload your own image, then watch how the neural net's layer activations change as the pixels move through the model.
+A small CPU-friendly Gradio app for workshop participants to inspect MobileNetV2 activation maps on MoMA artwork images. Pick a MoMA image or upload your own image, then watch pixel activations at the same intermediate layers used in the workshop notebook: 0, 2, 4, 7, 14, and 18.
 
 The UMAP tab shows how the MoMA images relate after MobileNetV2 processes them, including the closest and farthest images in feature space.
 

app.py

@@ -29,10 +29,11 @@ HEADERS = {
 }
 MOMA_SAMPLE_SIZE = 36
 MOMA_CANDIDATES = 140
-DEFAULT_LAYER = "14: InvertedResidual"
-DEFAULT_CHANNELS = 8
+NOTEBOOK_LAYERS = [0, 2, 4, 7, 14, 18]
+CHANNELS_PER_LAYER = 8
+OVERLAY_LAYER = 14
 PREVIEW_SIZE = 360
-TILE_SIZE = 240
+TILE_SIZE = 120
 
 
 def stage_name(layer_index):
@@ -109,13 +110,6 @@ def layer_choices():
     return [f"{index}: {layer.__class__.__name__}" for index, layer in enumerate(model.features)]
 
 
-def parse_layer_index(layer_label):
-    try:
-        return int(str(layer_label).split(":", 1)[0])
-    except Exception:
-        return 14
-
-
 def rgb_image(image):
     if image is None:
         return None
@@ -293,62 +287,63 @@ def strongest_channels(activation, count):
     return [(channel, fmap[channel].numpy()) for channel in channel_ids]
 
 
-def layer_overview_gallery(activations):
+def channel_grid_image(activation, count=CHANNELS_PER_LAYER):
+    selected = strongest_channels(activation, count)
+    cols = 4
+    rows = math.ceil(len(selected) / cols)
+    label_h = 20
+    grid = Image.new("RGB", (cols * TILE_SIZE, rows * (TILE_SIZE + label_h)), (248, 248, 246))
+    draw = ImageDraw.Draw(grid)
+
+    for position, (channel, values) in enumerate(selected):
+        x = (position % cols) * TILE_SIZE
+        y = (position // cols) * (TILE_SIZE + label_h)
+        tile = colorize(values, "viridis").resize((TILE_SIZE, TILE_SIZE), Image.Resampling.BILINEAR)
+        grid.paste(tile, (x, y))
+        draw.text((x + 6, y + TILE_SIZE + 3), f"channel {channel}", fill=(35, 39, 47))
+
+    return grid
+
+
+def fixed_layer_gallery(activations):
     choices = layer_choices()
     outputs = []
 
-    for index, activation in enumerate(activations):
+    for layer_index in NOTEBOOK_LAYERS:
+        activation = activations[layer_index]
         _, channels, height, width = activation.shape
-        energy = activation_energy(activation)
-        activation_map = colorize(energy, "magma").resize((TILE_SIZE, TILE_SIZE), Image.Resampling.BILINEAR)
         caption = (
-            f"Layer {index}\n"
-            f"{choices[index].split(': ', 1)[1]} | {channels} maps | {height}x{width}"
+            f"Layer {layer_index}: {stage_name(layer_index)}\n"
+            f"torch.Size([1, {channels}, {height}, {width}])\n"
+            f"{choices[layer_index].split(': ', 1)[1]} | {CHANNELS_PER_LAYER} channel maps"
         )
-        outputs.append((activation_map, caption))
+        outputs.append((channel_grid_image(activation), caption))
 
     return outputs
 
 
-def feature_map_gallery(activation, count):
-    cards = []
-
-    for channel, values in strongest_channels(activation, count):
-        heat = colorize(values, "viridis").resize((TILE_SIZE, TILE_SIZE), Image.Resampling.BILINEAR)
-        cards.append((heat, f"channel {channel}"))
-
-    return cards
-
-
-def layer_summary(layer_index, activation, count):
-    _, channels, height, width = activation.shape
-    selected_count = min(int(count), channels)
+def layer_summary():
     return (
-        f"### Layer {layer_index}: {stage_name(layer_index)}\n"
-        f"{stage_explanation(layer_index)}\n\n"
-        f"This layer outputs **{channels} activation maps** on a **{height}x{width}** grid. "
-        f"The gallery below shows **{selected_count} channels** from this layer. "
-        "Bright areas are where that channel is responding most strongly."
+        "### Pixel activations through the model\n"
+        "These are the same intermediate layers checked in the notebook: 0, 2, 4, 7, 14, and 18. Each panel is one layer. "
+        "Inside each panel are several channel maps from that layer: bright pixels are places where that map activated strongly."
     )
 
 
-def analyze_image(image, layer_label=DEFAULT_LAYER, channels=DEFAULT_CHANNELS):
+def analyze_image(image):
     image = rgb_image(image)
     if image is None:
         items, _ = load_moma_items()
         image = items[0]["img"]
 
-    layer_index = parse_layer_index(layer_label)
     activations = collect_activations(image)
-    layer_index = max(0, min(layer_index, len(activations) - 1))
-    selected = activations[layer_index]
+    overlay_activation = activations[OVERLAY_LAYER]
 
     return (
         image,
-        layer_overview_gallery(activations),
-        feature_map_gallery(selected, channels),
-        overlay_heatmap(fit_image(image), activation_energy(selected), alpha=0.48, cmap_name="magma"),
-        layer_summary(layer_index, selected, channels),
+        fixed_layer_gallery(activations),
+        overlay_heatmap(fit_image(image), activation_energy(overlay_activation), alpha=0.48, cmap_name="magma"),
+        layer_summary(),
     )
 
 
@@ -378,17 +373,12 @@ def make_umap_plot(selected_index=0):
 def initialize():
     items, _ = load_moma_items()
     selected_index = 0
-    selected_image, layer_gallery, channels_gallery, overlay, summary = analyze_image(
-        items[selected_index]["img"],
-        DEFAULT_LAYER,
-        DEFAULT_CHANNELS,
-    )
+    selected_image, layer_gallery, overlay, summary = analyze_image(items[selected_index]["img"])
     umap_plot, relation, closest_gallery, farthest_gallery = make_umap_plot(selected_index)
     return (
         gallery_items(),
         selected_image,
         layer_gallery,
-        channels_gallery,
         overlay,
         summary,
         umap_plot,
@@ -399,40 +389,27 @@ def initialize():
     )
 
 
-def select_moma(layer_label, channels, evt: gr.SelectData):
+def select_moma(evt: gr.SelectData):
     index = evt.index if isinstance(evt.index, int) else 0
     items, _ = load_moma_items()
     index = max(0, min(index, len(items) - 1))
-    selected_image, layer_gallery, channels_gallery, overlay, summary = analyze_image(
-        items[index]["img"],
-        layer_label,
-        channels,
-    )
+    selected_image, layer_gallery, overlay, summary = analyze_image(items[index]["img"])
     umap_plot, relation, closest_gallery, farthest_gallery = make_umap_plot(index)
-    return selected_image, layer_gallery, channels_gallery, overlay, summary, umap_plot, relation, closest_gallery, farthest_gallery, index
+    return selected_image, layer_gallery, overlay, summary, umap_plot, relation, closest_gallery, farthest_gallery, index
 
 
-def analyze_upload(image, layer_label, channels):
-    selected_image, layer_gallery, channels_gallery, overlay, summary = analyze_image(image, layer_label, channels)
+def analyze_upload(image):
+    selected_image, layer_gallery, overlay, summary = analyze_image(image)
     umap_plot, relation, closest_gallery, farthest_gallery = make_umap_plot(0)
     relation = (
         "### Uploaded image\n"
         "The UMAP tab is built from the MoMA image set. Uploaded images are shown in the layer viewer, "
         "but are not inserted into the precomputed MoMA map."
     )
-    return selected_image, layer_gallery, channels_gallery, overlay, summary, umap_plot, relation, closest_gallery, farthest_gallery, -1
-
-
-def update_layer_view(image, selected_index, layer_label, channels):
-    selected_image, layer_gallery, channels_gallery, overlay, summary = analyze_image(image, layer_label, channels)
-    umap_plot, relation, closest_gallery, farthest_gallery = make_umap_plot(selected_index if selected_index is not None and selected_index >= 0 else 0)
-    return selected_image, layer_gallery, channels_gallery, overlay, summary, umap_plot, relation, closest_gallery, farthest_gallery
+    return selected_image, layer_gallery, overlay, summary, umap_plot, relation, closest_gallery, farthest_gallery, -1
 
 
 def build_app():
-    choices = layer_choices()
-    selected_layer = DEFAULT_LAYER if DEFAULT_LAYER in choices else choices[-1]
-
     theme = gr.themes.Soft(
         primary_hue="blue",
         secondary_hue="pink",
@@ -451,8 +428,8 @@ def build_app():
 
         gr.Markdown(
             "# Model Layers Viewer\n"
-            "Choose a MoMA image or upload your own. The app runs MobileNetV2 on CPU and shows the activation maps "
-            "the neural network produces at each layer.\n\n"
+            "Choose a MoMA image or upload your own. The app runs MobileNetV2 on CPU and shows pixel activation maps "
+            "at the same intermediate layers used in the workshop notebook.\n\n"
             "Inspired by [Small ML: The Art of Data Discovery]"
             "(https://colab.research.google.com/drive/1_8GasNHKJpO8x-AAt93D3LfrvCLGzsbj?usp=sharing), "
             "a workshop by Sam Keene at [ITP Camp 2026](https://itp.nyu.edu/camp/2026/session/205)."
@@ -469,28 +446,18 @@ def build_app():
                     elem_classes=["moma-gallery"],
                 )
                 upload = gr.Image(label="Upload your own image", type="pil", sources=["upload", "clipboard"])
-                with gr.Row():
-                    layer = gr.Dropdown(choices=choices, value=selected_layer, label="Layer to inspect")
-                    channels = gr.Slider(4, 16, value=DEFAULT_CHANNELS, step=4, label="Feature maps to show")
 
             with gr.Column(scale=2, min_width=520):
                 with gr.Tabs():
                     with gr.Tab("Layer activations"):
                         with gr.Row(equal_height=False):
                             selected_image = gr.Image(label="Selected image", type="pil", interactive=False)
-                            selected_overlay = gr.Image(label="Single selected-layer overlay", type="pil", interactive=False)
+                            selected_overlay = gr.Image(label="One overlay: layer 14 activation over image", type="pil", interactive=False)
                         layer_summary_md = gr.Markdown()
-                        channel_explanations = gr.Gallery(
-                            label="Selected layer feature maps",
-                            columns=2,
-                            height=520,
-                            object_fit="contain",
-                            elem_classes=["activation-gallery"],
-                        )
                         layer_progression = gr.Gallery(
-                            label="Activation maps as the image moves through the model",
-                            columns=3,
-                            height=760,
+                            label="Notebook layers: activation maps across channels",
+                            columns=2,
+                            height=860,
                             object_fit="contain",
                             elem_classes=["activation-gallery"],
                         )
@@ -523,7 +490,6 @@ def build_app():
                 moma_gallery,
                 selected_image,
                 layer_progression,
-                channel_explanations,
                 selected_overlay,
                 layer_summary_md,
                 umap_plot,
@@ -536,11 +502,10 @@ def build_app():
         )
         moma_gallery.select(
             select_moma,
-            inputs=[layer, channels],
+            inputs=None,
             outputs=[
                 selected_image,
                 layer_progression,
-                channel_explanations,
                 selected_overlay,
                 layer_summary_md,
                 umap_plot,
@@ -553,11 +518,10 @@ def build_app():
         )
         upload.change(
             analyze_upload,
-            inputs=[upload, layer, channels],
+            inputs=[upload],
             outputs=[
                 selected_image,
                 layer_progression,
-                channel_explanations,
                 selected_overlay,
                 layer_summary_md,
                 umap_plot,
@@ -568,39 +532,6 @@ def build_app():
             ],
             show_progress="minimal",
         )
-        layer.change(
-            update_layer_view,
-            inputs=[selected_image, selected_index, layer, channels],
-            outputs=[
-                selected_image,
-                layer_progression,
-                channel_explanations,
-                selected_overlay,
-                layer_summary_md,
-                umap_plot,
-                relation_md,
-                closest_gallery,
-                farthest_gallery,
-            ],
-            show_progress="minimal",
-        )
-        channels.change(
-            update_layer_view,
-            inputs=[selected_image, selected_index, layer, channels],
-            outputs=[
-                selected_image,
-                layer_progression,
-                channel_explanations,
-                selected_overlay,
-                layer_summary_md,
-                umap_plot,
-                relation_md,
-                closest_gallery,
-                farthest_gallery,
-            ],
-            show_progress="minimal",
-        )
-
     return demo