Duplicate from taquynhnga/CNNs-interpretation-visualization

Co-authored-by: Hanna Ta Quynh Nga <[email protected]>

.gitattributes

@@ -0,0 +1,4 @@
+*.pkl filter=lfs diff=lfs merge=lfs -text
+.csv filter=lfs diff=lfs merge=lfs -text
+data/** filter=lfs diff=lfs merge=lfs -text
+Visual-Explanation-Methods-PyTorch/** filter=lfs diff=lfs merge=lfs -text

.github/workflows/sync_to_huggingface_hub.yml

@@ -0,0 +1,19 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push --force https://taquynhnga:[email protected]/spaces/taquynhnga/CNNs-interpretation-visualization main

.gitignore

@@ -0,0 +1,183 @@
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+# Local History for Visual Studio Code
+.history/
+
+# Common credential files
+**/credentials.json
+**/client_secrets.json
+**/client_secret.json
+*creds*
+*.dat
+*password*
+*.httr-oauth*
+
+# Private Node Modules
+node_modules/
+creds.js
+
+# Private Files
+# *.json
+# *.csv
+# *.csv.gz
+# *.tsv
+# *.tsv.gz
+# *.xlsx
+git-large-file
+deta_drive.py
+secret_keys.py
+
+# Large files
+# data/preprocessed_image_net/
+# data/activation/*.pkl
+# data/activation/*.json
+# data/layer_infos/*.pkl
+# data/layer_infos/*.json
+
+# Mac/OSX
+.DS_Store
+
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "python.analysis.extraPaths": [
+        "./Visual-Explanation-Methods-PyTorch"
+    ]
+}

Home.py

@@ -0,0 +1,43 @@
+import streamlit as st
+from frontend.footer import add_footer
+
+st.set_page_config(layout='wide')
+# st.set_page_config(layout='centered')
+
+st.title('About')
+
+# INTRO
+intro_text = """Convolutional neural networks (ConvNets) have evolved at a rapid speed from the 2010s. 
+Some of the representative ConvNets models are VGGNet, Inceptions, ResNe(X)t, DenseNet, MobileNet, EfficientNet and RegNet, which focus on various factors of accuracy, efficiency, and scalability. 
+In the year 2020, Vision Transformers (ViT) was introduced as a Transformer model solving the computer vision problems. 
+Larger model and dataset sizes allow ViT to perform significantly better than ResNet, however, ViT still encountered challenges in generic computer vision tasks such as object detection and semantic segmentation. 
+Swin Transformer’ s success made Transformers be adopted as a generic vision backbone and showed outstanding performance in a wide range of computer vision tasks. 
+Nevertheless, rather than the intrinsic inductive biases of convolutions, the success of this approach is still primarily attributed to Transformers’ inherent superiority. 
+
+In 2022, Zhuang Liu et. al. proposed a pure convolutional model dubbed ConvNeXt, discovered from the modernization of a standard ResNet towards the design of Vision Transformers and claimed to outperform them. 
+
+The project aims to interpret the ConvNeXt model by several visualization techniques. 
+After that, a web interface would be built to demonstrate the interpretations, helping us look inside the deep ConvNeXt model and answer the questions:
+> “What patterns maximally activated this filter (channel) in this layer?”\n
+> “Which features are responsible for the current prediction?”.
+
+Due to the limitation in time and resources, the project only used the tiny-sized ConvNeXt model, which was trained on ImageNet-1k at resolution 224x224 and used 50,000 images in validation set of ImageNet-1k for demo purpose.
+
+In this web app, two visualization techniques were implemented and demonstrated, they are **Maximally activating patches** and **SmoothGrad**. 
+Besides, this web app also helps investigate the effect of **adversarial attacks** on ConvNeXt interpretations. 
+Last but not least, there is a last webpage that stores 50,000 images in the **ImageNet-1k** validation set, facilitating the two web pages above in searching and referencing. 
+"""
+st.write(intro_text)
+
+# 4 PAGES
+st.subheader('Features')
+sections_text = """Overall, there are 4 features in this web app:
+1) Maximally activating patches: The visualization method in this page answers the question “what patterns maximally activated this filter (channel)?”.
+2) SmoothGrad: This visualization method in this page answers the question “which features are responsible for the current prediction?”.
+3) Adversarial attack: How adversarial attacks affect ConvNeXt interpretation?
+4) ImageNet1k: The storage of 50,000 images in validation set.
+"""
+st.write(sections_text)
+
+
+add_footer('Developed with ❤ by ', 'Hanna Ta Quynh Nga', 'https://www.linkedin.com/in/ta-quynh-nga-hanna/')

README.md

@@ -0,0 +1,19 @@
+---
+title: CNNs Interpretation Visualization
+emoji: 💡
+colorFrom: blue
+colorTo: green
+sdk: streamlit
+sdk_version: 1.17.0
+app_file: Home.py
+pinned: false
+duplicated_from: taquynhnga/CNNs-interpretation-visualization
+---
+
+# Visualizing Interpretations of CNN models: ConvNeXt, ResNet and MobileNet
+
+To be change name: CNNs-interpretation-visualization
+
+This app was built with Streamlit. To run the app, `streamlit run Home.py` in the terminal.
+
+This repo lacks one more folder `data/preprocessed_image_net` which contains 50,000 preprocessed imagenet validation images saved in 5 pickle files.

Visual-Explanation-Methods-PyTorch

@@ -0,0 +1 @@
+Subproject commit 5cb88902729af1d9d85259879b47cb238b841881

backend/adversarial_attack.py

@@ -0,0 +1,100 @@
+import PIL
+from PIL import Image
+import numpy as np
+from matplotlib import pylab as P
+import cv2
+
+import torch
+from torch.utils.data import TensorDataset
+from torchvision import transforms
+import torch.nn.functional as F
+
+from transformers.image_utils import IMAGENET_DEFAULT_MEAN, IMAGENET_DEFAULT_STD
+
+from torchvex.base import ExplanationMethod
+from torchvex.utils.normalization import clamp_quantile
+
+from backend.utils import load_image, load_model
+from backend.smooth_grad import generate_smoothgrad_mask
+
+import streamlit as st
+
+IMAGENET_DEFAULT_MEAN = np.asarray(IMAGENET_DEFAULT_MEAN).reshape([1,3,1,1])
+IMAGENET_DEFAULT_STD = np.asarray(IMAGENET_DEFAULT_STD).reshape([1,3,1,1])
+
+def deprocess_image(image_inputs):
+    return (image_inputs * IMAGENET_DEFAULT_STD + IMAGENET_DEFAULT_MEAN) * 255
+
+
+def feed_forward(input_image):
+    model, feature_extractor = load_model('ConvNeXt')
+    inputs = feature_extractor(input_image, do_resize=False, return_tensors="pt")['pixel_values']
+    logits = model(inputs).logits
+    prediction_prob = F.softmax(logits, dim=-1).max()                   # prediction probability
+    # prediction class id, start from 1 to 1000 so it needs to +1 in the end
+    prediction_class = logits.argmax(-1).item()                 
+    prediction_label = model.config.id2label[prediction_class]  # prediction class label
+    return prediction_prob, prediction_class, prediction_label
+
+# FGSM attack code
+def fgsm_attack(image, epsilon, data_grad):
+    # Collect the element-wise sign of the data gradient and normalize it
+    sign_data_grad = torch.gt(data_grad, 0).type(torch.FloatTensor) * 2.0 - 1.0
+    perturbed_image = image + epsilon*sign_data_grad
+    return perturbed_image
+
+# perform attack on the model
+def perform_attack(input_image, target, epsilon):
+    model, feature_extractor = load_model("ConvNeXt")
+    # preprocess input image
+    inputs = feature_extractor(input_image, do_resize=False, return_tensors="pt")['pixel_values']
+    inputs.requires_grad = True
+    
+    # predict
+    logits = model(inputs).logits
+    prediction_prob = F.softmax(logits, dim=-1).max()
+    prediction_class = logits.argmax(-1).item()
+    prediction_label = model.config.id2label[prediction_class]
+    
+    # Calculate the loss
+    loss = F.nll_loss(logits, torch.tensor([target]))
+
+    # Zero all existing gradients
+    model.zero_grad()
+
+    # Calculate gradients of model in backward pass
+    loss.backward()
+    
+    # Collect datagrad
+    data_grad = inputs.grad.data
+    
+    # Call FGSM Attack
+    perturbed_data = fgsm_attack(inputs, epsilon, data_grad)
+    
+    # Re-classify the perturbed image
+    new_prediction = model(perturbed_data).logits
+    new_pred_prob = F.softmax(new_prediction, dim=-1).max()
+    new_pred_class = new_prediction.argmax(-1).item()
+    new_pred_label = model.config.id2label[new_pred_class]
+
+    return perturbed_data, new_pred_prob.item(), new_pred_class, new_pred_label
+
+
+def find_smallest_epsilon(input_image, target):
+    epsilons = [i*0.001 for i in range(1000)]
+
+    for epsilon in epsilons:
+        perturbed_data, new_prob, new_id, new_label = perform_attack(input_image, target, epsilon)
+        if new_id != target:
+            return perturbed_data, new_prob, new_id, new_label, epsilon
+    return None
+
+# @st.cache_data
+@st.cache(allow_output_mutation=True)
+def generate_images(image_id, epsilon=0):
+    model, feature_extractor = load_model("ConvNeXt")
+    original_image_dict = load_image(image_id)
+    image = original_image_dict['image']
+    return generate_smoothgrad_mask(
+        image, 'ConvNeXt',
+        model, feature_extractor, num_samples=10, return_mask=True)

backend/load_file.py

@@ -0,0 +1,41 @@
+import json
+import pickle
+import numpy as np
+from collections import OrderedDict
+
+def load_pickle(filename):
+    with open(filename, 'rb') as file:
+        data = pickle.load(file)
+    return data
+
+def save_pickle_to_json(filename):
+    ordered_dict = load_pickle(filename)
+    json_obj = json.dumps(ordered_dict, cls=NumpyEncoder)
+    with open(filename.replace('.pkl', '.json'), 'w') as f:
+        f.write(json_obj)
+
+def load_json(filename):
+    with open(filename, 'r') as read_file:
+        loaded_dict = json.loads(read_file.read())
+    loaded_dict = OrderedDict(loaded_dict)
+    for k, v in loaded_dict.items():
+        if type(v) == list:
+            loaded_dict[k] = np.asarray(v)
+        else:
+            for k_, v_ in v.items():
+                v[k_] = np.asarray(v_)
+    return loaded_dict
+
+class NumpyEncoder(json.JSONEncoder):
+    def default(self, obj):
+        if isinstance(obj, np.ndarray):
+            return obj.tolist()
+        return json.JSONEncoder.default(self, obj)
+
+# save_pickle_to_json('data/layer_infos/convnext_layer_infos.pkl')
+# save_pickle_to_json('data/layer_infos/resnet_layer_infos.pkl')
+# save_pickle_to_json('data/layer_infos/mobilenet_layer_infos.pkl')
+
+# file = load_json('data/layer_infos/convnext_layer_infos.json')
+# print(type(file))
+# print(type(file['embeddings.patch_embeddings']))

backend/maximally_activating_patches.py

@@ -0,0 +1,45 @@
+import pickle
+import streamlit as st
+
+from backend.load_file import load_json
+
+
+@st.cache(allow_output_mutation=True)
+# st.cache_data
+def load_activation(filename):
+    activation = load_json(filename)
+    return activation
+
+@st.cache(allow_output_mutation=True)
+# @st.cache_data
+def load_dataset(data_index):
+    with open(f'./data/preprocessed_image_net/val_data_{data_index}.pkl', 'rb') as file:
+        dataset = pickle.load(file)
+    return dataset
+
+def load_layer_infos(filename):
+    layer_infos = load_json(filename)
+    return layer_infos
+
+def get_receptive_field_coordinates(layer_infos, layer_name, idx_x, idx_y):
+    """
+    layer_name: as in layer_infos keys (eg: 'encoder.stages[0].layers[0]')
+    idx_x: integer coordinate of width axis in feature maps. must < n
+    idx_y: integer coordinate of height axis in feature maps. must < n
+    """
+    layer_name = layer_name.replace('.dwconv', '').replace('.layernorm', '')
+    layer_name = layer_name.replace('.pwconv1', '').replace('.pwconv2', '').replace('.drop_path', '')
+    n = layer_infos[layer_name]['n']
+    j = layer_infos[layer_name]['j']
+    r = layer_infos[layer_name]['r']
+    start = layer_infos[layer_name]['start']
+    assert idx_x < n, f'n={n}'
+    assert idx_y < n, f'n={n}'
+
+    # image tensor (N, H, W, C) or (N, C, H, W) => image_patch=image[y1:y2, x1:x2]
+    center = (start + idx_x*j, start + idx_y*j)
+    x1, x2 = (max(center[0]-r/2, 0), max(center[0]+r/2, 0))
+    y1, y2 = (max(center[1]-r/2, 0), max(center[1]+r/2, 0))
+    x1, x2, y1, y2 = int(x1), int(x2), int(y1), int(y2)
+
+    return x1, x2, y1, y2

backend/smooth_grad.py

@@ -0,0 +1,235 @@
+import PIL
+from PIL import Image
+import numpy as np
+from matplotlib import pylab as P
+import cv2
+
+import torch
+from torch.utils.data import TensorDataset
+from torchvision import transforms
+
+# dirpath_to_modules = './Visual-Explanation-Methods-PyTorch'
+# sys.path.append(dirpath_to_modules)
+
+from torchvex.base import ExplanationMethod
+from torchvex.utils.normalization import clamp_quantile
+
+def ShowImage(im, title='', ax=None):
+    image = np.array(im)
+    return image
+
+def ShowGrayscaleImage(im, title='', ax=None):
+    if ax is None:
+        P.figure()
+    P.axis('off')
+    P.imshow(im, cmap=P.cm.gray, vmin=0, vmax=1)
+    P.title(title)
+    return P
+
+def ShowHeatMap(im, title='', ax=None):
+    im = im - im.min()
+    im = im / im.max()
+    im = im.clip(0,1)
+    im = np.uint8(im * 255)
+    
+    im = cv2.resize(im, (224,224))
+    image = cv2.resize(im, (224, 224))
+
+    # Apply JET colormap
+    color_heatmap = cv2.applyColorMap(image, cv2.COLORMAP_HOT)
+    # P.imshow(im, cmap='inferno')
+    # P.title(title)
+    return color_heatmap
+    
+def ShowMaskedImage(saliency_map, image, title='', ax=None):
+    """ 
+    Save saliency map on image.
+    
+    Args:
+        image: Tensor of size (H,W,3)
+        saliency_map: Tensor of size (H,W,1)
+    """
+    
+    # if ax is None:
+    #     P.figure()
+    # P.axis('off')
+
+    saliency_map = saliency_map - saliency_map.min()
+    saliency_map = saliency_map / saliency_map.max()
+    saliency_map = saliency_map.clip(0,1)
+    saliency_map = np.uint8(saliency_map * 255)
+    
+    saliency_map = cv2.resize(saliency_map, (224,224))
+    image = cv2.resize(image, (224, 224))
+
+    # Apply JET colormap
+    color_heatmap = cv2.applyColorMap(saliency_map, cv2.COLORMAP_HOT)
+    
+    # Blend image with heatmap
+    img_with_heatmap = cv2.addWeighted(image, 0.4, color_heatmap, 0.6, 0)
+
+    # P.imshow(img_with_heatmap)
+    # P.title(title)
+    return img_with_heatmap
+
+def LoadImage(file_path):
+    im = PIL.Image.open(file_path)
+    im = im.resize((224, 224))
+    im = np.asarray(im)
+    return im
+
+
+def visualize_image_grayscale(image_3d, percentile=99):
+    r"""Returns a 3D tensor as a grayscale 2D tensor.
+    This method sums a 3D tensor across the absolute value of axis=2, and then
+    clips values at a given percentile.
+    """
+    image_2d = np.sum(np.abs(image_3d), axis=2)
+
+    vmax = np.percentile(image_2d, percentile)
+    vmin = np.min(image_2d)
+
+    return np.clip((image_2d - vmin) / (vmax - vmin), 0, 1)
+
+def visualize_image_diverging(image_3d, percentile=99):
+    r"""Returns a 3D tensor as a 2D tensor with positive and negative values.
+    """
+    image_2d = np.sum(image_3d, axis=2)
+
+    span = abs(np.percentile(image_2d, percentile))
+    vmin = -span
+    vmax = span
+
+    return np.clip((image_2d - vmin) / (vmax - vmin), -1, 1)
+
+
+class SimpleGradient(ExplanationMethod):
+    def __init__(self, model, create_graph=False,
+                 preprocess=None, postprocess=None):
+        super().__init__(model, preprocess, postprocess)
+        self.create_graph = create_graph
+
+    def predict(self, x):
+        return self.model(x)
+
+    @torch.enable_grad()
+    def process(self, inputs, target):
+        self.model.zero_grad()
+        inputs.requires_grad_(True)
+
+        out = self.model(inputs)
+        out = out if type(out) == torch.Tensor else out.logits
+
+        num_classes = out.size(-1)
+        onehot = torch.zeros(inputs.size(0), num_classes, *target.shape[1:])
+        onehot = onehot.to(dtype=inputs.dtype, device=inputs.device)
+        onehot.scatter_(1, target.unsqueeze(1), 1)
+
+        grad, = torch.autograd.grad(
+            (out*onehot).sum(), inputs, create_graph=self.create_graph
+        )
+
+        return grad
+
+
+class SmoothGradient(ExplanationMethod):
+    def __init__(self, model, stdev_spread=0.15, num_samples=25,
+                 magnitude=True, batch_size=-1,
+                 create_graph=False, preprocess=None, postprocess=None):
+        super().__init__(model, preprocess, postprocess)
+        self.stdev_spread = stdev_spread
+        self.nsample = num_samples
+        self.create_graph = create_graph
+        self.magnitude = magnitude
+        self.batch_size = batch_size
+        if self.batch_size == -1:
+            self.batch_size = self.nsample
+
+        self._simgrad = SimpleGradient(model, create_graph)
+
+    def process(self, inputs, target):
+        self.model.zero_grad()
+
+        maxima = inputs.flatten(1).max(-1)[0]
+        minima = inputs.flatten(1).min(-1)[0]
+
+        stdev = self.stdev_spread * (maxima - minima).cpu()
+        stdev = stdev.view(inputs.size(0), 1, 1, 1).expand_as(inputs)
+        stdev = stdev.unsqueeze(0).expand(self.nsample, *[-1]*4)
+        noise = torch.normal(0, stdev)
+
+        target_expanded = target.unsqueeze(0).cpu()
+        target_expanded = target_expanded.expand(noise.size(0), -1)
+
+        noiseloader = torch.utils.data.DataLoader(
+            TensorDataset(noise, target_expanded), batch_size=self.batch_size
+        )
+
+        total_gradients = torch.zeros_like(inputs)
+        for noise, t_exp in noiseloader:
+            inputs_w_noise = inputs.unsqueeze(0) + noise.to(inputs.device)
+            inputs_w_noise = inputs_w_noise.view(-1, *inputs.shape[1:])
+            gradients = self._simgrad(inputs_w_noise, t_exp.view(-1))
+            gradients = gradients.view(self.batch_size, *inputs.shape)
+            if self.magnitude:
+                gradients = gradients.pow(2)
+            total_gradients = total_gradients + gradients.sum(0)
+
+        smoothed_gradient = total_gradients / self.nsample
+        return smoothed_gradient
+
+
+def feed_forward(model_name, image, model=None, feature_extractor=None):
+    if model_name in ['ConvNeXt', 'ResNet']:
+        inputs = feature_extractor(image, return_tensors="pt")
+        logits = model(**inputs).logits
+        prediction_class = logits.argmax(-1).item()
+    else:
+        transform_images = transforms.Compose([
+        transforms.Resize(224),
+        transforms.ToTensor(),
+        transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])])
+        input_tensor = transform_images(image)
+        inputs = input_tensor.unsqueeze(0)
+
+        output = model(inputs)
+        prediction_class = output.argmax(-1).item()
+    #prediction_label = model.config.id2label[prediction_class]
+    return inputs, prediction_class
+
+def clip_gradient(gradient):
+    gradient = gradient.abs().sum(1, keepdim=True)
+    return clamp_quantile(gradient, q=0.99)
+
+def fig2img(fig):
+    """Convert a Matplotlib figure to a PIL Image and return it"""
+    import io
+    buf = io.BytesIO()
+    fig.savefig(buf)
+    buf.seek(0)
+    img = Image.open(buf)
+    return img
+
+def generate_smoothgrad_mask(image, model_name, model=None, feature_extractor=None, num_samples=25, return_mask=False):
+    inputs, prediction_class = feed_forward(model_name, image, model, feature_extractor)
+
+    smoothgrad_gen = SmoothGradient(
+        model, num_samples=num_samples, stdev_spread=0.1,
+        magnitude=False, postprocess=clip_gradient)
+
+    if type(inputs) != torch.Tensor:
+        inputs = inputs['pixel_values']
+
+    smoothgrad_mask = smoothgrad_gen(inputs, prediction_class)
+    smoothgrad_mask = smoothgrad_mask[0].numpy()
+    smoothgrad_mask = np.transpose(smoothgrad_mask, (1, 2, 0))
+
+    image = np.asarray(image)
+    # ori_image = ShowImage(image)
+    heat_map_image = ShowHeatMap(smoothgrad_mask)
+    masked_image = ShowMaskedImage(smoothgrad_mask, image)
+
+    if return_mask:
+        return heat_map_image, masked_image, smoothgrad_mask
+    else:
+        return heat_map_image, masked_image

backend/utils.py

@@ -0,0 +1,379 @@
+import streamlit as st
+import pickle
+
+import io
+from typing import List, Optional
+
+import markdown
+import matplotlib
+import matplotlib.pyplot as plt
+import pandas as pd
+import plotly.graph_objects as go
+import streamlit as st
+from plotly import express as px
+from plotly.subplots import make_subplots
+from tqdm import trange
+
+import torch
+from transformers import AutoFeatureExtractor, AutoModelForImageClassification
+
+@st.cache(allow_output_mutation=True)
+# @st.cache_resource
+def load_dataset(data_index):
+    with open(f'./data/preprocessed_image_net/val_data_{data_index}.pkl', 'rb') as file:
+        dataset = pickle.load(file)
+    return dataset
+
+@st.cache(allow_output_mutation=True)
+# @st.cache_resource
+def load_dataset_dict():
+    dataset_dict = {}
+    progress_empty = st.empty()
+    text_empty = st.empty()
+    text_empty.write("Loading datasets...")
+    progress_bar = progress_empty.progress(0.0)
+    for data_index in trange(5):
+        dataset_dict[data_index] = load_dataset(data_index)
+        progress_bar.progress((data_index+1)/5)
+    progress_empty.empty()
+    text_empty.empty()
+    return dataset_dict
+
+
+# @st.cache_data
+@st.cache(allow_output_mutation=True)
+def load_image(image_id):
+    dataset = load_dataset(image_id//10000)
+    image = dataset[image_id%10000]
+    return image
+
+# @st.cache_data
+@st.cache(allow_output_mutation=True)
+def load_images(image_ids):
+    images = []
+    for image_id in image_ids:
+        image = load_image(image_id)
+        images.append(image)
+    return images
+
+
+@st.cache(allow_output_mutation=True, suppress_st_warning=True, show_spinner=False)
+# @st.cache_resource
+def load_model(model_name):
+    with st.spinner(f"Loading {model_name} model! This process might take 1-2 minutes..."):
+        if model_name == 'ResNet':
+            model_file_path = 'microsoft/resnet-50'
+            feature_extractor = AutoFeatureExtractor.from_pretrained(model_file_path, crop_pct=1.0)
+            model = AutoModelForImageClassification.from_pretrained(model_file_path)
+            model.eval()
+        elif model_name == 'ConvNeXt':
+            model_file_path = 'facebook/convnext-tiny-224'
+            feature_extractor = AutoFeatureExtractor.from_pretrained(model_file_path, crop_pct=1.0)
+            model = AutoModelForImageClassification.from_pretrained(model_file_path)
+            model.eval()
+        else:
+            model = torch.hub.load('pytorch/vision:v0.10.0', 'mobilenet_v2', pretrained=True)
+            model.eval()
+            feature_extractor = None
+    return model, feature_extractor
+
+
+def make_grid(cols=None,rows=None):
+    grid = [0]*rows
+    for i in range(rows):
+        with st.container():
+            grid[i] = st.columns(cols)
+    return grid
+
+
+def use_container_width_percentage(percentage_width:int = 75):
+    max_width_str = f"max-width: {percentage_width}%;"
+    st.markdown(f""" 
+                <style> 
+                .reportview-container .main .block-container{{{max_width_str}}}
+                </style>    
+                """, 
+                unsafe_allow_html=True,
+    )
+
+matplotlib.use("Agg")
+COLOR = "#31333f"
+BACKGROUND_COLOR = "#ffffff"
+
+
+def grid_demo():
+    """Main function. Run this to run the app"""
+    st.sidebar.title("Layout and Style Experiments")
+    st.sidebar.header("Settings")
+    st.markdown(
+        """
+# Layout and Style Experiments
+
+The basic question is: Can we create a multi-column dashboard with plots, numbers and text using
+the [CSS Grid](https://gridbyexample.com/examples)?
+
+Can we do it with a nice api?
+Can have a dark theme?
+"""
+    )
+
+    select_block_container_style()
+    add_resources_section()
+
+    # My preliminary idea of an API for generating a grid
+    with Grid("1 1 1", color=COLOR, background_color=BACKGROUND_COLOR) as grid:
+        grid.cell(
+            class_="a",
+            grid_column_start=2,
+            grid_column_end=3,
+            grid_row_start=1,
+            grid_row_end=2,
+        ).markdown("# This is A Markdown Cell")
+        grid.cell("b", 2, 3, 2, 3).text("The cell to the left is a dataframe")
+        grid.cell("c", 3, 4, 2, 3).plotly_chart(get_plotly_fig())
+        grid.cell("d", 1, 2, 1, 3).dataframe(get_dataframe())
+        grid.cell("e", 3, 4, 1, 2).markdown(
+            "Try changing the **block container style** in the sidebar!"
+        )
+        grid.cell("f", 1, 3, 3, 4).text(
+            "The cell to the right is a matplotlib svg image"
+        )
+        grid.cell("g", 3, 4, 3, 4).pyplot(get_matplotlib_plt())
+
+
+def add_resources_section():
+    """Adds a resources section to the sidebar"""
+    st.sidebar.header("Add_resources_section")
+    st.sidebar.markdown(
+        """
+- [gridbyexample.com] (https://gridbyexample.com/examples/)
+"""
+    )
+
+
+class Cell:
+    """A Cell can hold text, markdown, plots etc."""
+
+    def __init__(
+        self,
+        class_: str = None,
+        grid_column_start: Optional[int] = None,
+        grid_column_end: Optional[int] = None,
+        grid_row_start: Optional[int] = None,
+        grid_row_end: Optional[int] = None,
+    ):
+        self.class_ = class_
+        self.grid_column_start = grid_column_start
+        self.grid_column_end = grid_column_end
+        self.grid_row_start = grid_row_start
+        self.grid_row_end = grid_row_end
+        self.inner_html = ""
+
+    def _to_style(self) -> str:
+        return f"""
+.{self.class_} {{
+    grid-column-start: {self.grid_column_start};
+    grid-column-end: {self.grid_column_end};
+    grid-row-start: {self.grid_row_start};
+    grid-row-end: {self.grid_row_end};
+}}
+"""
+
+    def text(self, text: str = ""):
+        self.inner_html = text
+
+    def markdown(self, text):
+        self.inner_html = markdown.markdown(text)
+
+    def dataframe(self, dataframe: pd.DataFrame):
+        self.inner_html = dataframe.to_html()
+
+    def plotly_chart(self, fig):
+        self.inner_html = f"""
+<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<body>
+    <p>This should have been a plotly plot.
+    But since *script* tags are removed when inserting MarkDown/ HTML i cannot get it to workto work.
+    But I could potentially save to svg and insert that.</p>
+    <div id='divPlotly'></div>
+    <script>
+        var plotly_data = {fig.to_json()}
+        Plotly.react('divPlotly', plotly_data.data, plotly_data.layout);
+    </script>
+</body>
+"""
+
+    def pyplot(self, fig=None, **kwargs):
+        string_io = io.StringIO()
+        plt.savefig(string_io, format="svg", fig=(2, 2))
+        svg = string_io.getvalue()[215:]
+        plt.close(fig)
+        self.inner_html = '<div height="200px">' + svg + "</div>"
+
+    def _to_html(self):
+        return f"""<div class="box {self.class_}">{self.inner_html}</div>"""
+
+
+class Grid:
+    """A (CSS) Grid"""
+
+    def __init__(
+        self,
+        template_columns="1 1 1",
+        gap="10px",
+        background_color=COLOR,
+        color=BACKGROUND_COLOR,
+    ):
+        self.template_columns = template_columns
+        self.gap = gap
+        self.background_color = background_color
+        self.color = color
+        self.cells: List[Cell] = []
+
+    def __enter__(self):
+        return self
+
+    def __exit__(self, type, value, traceback):
+        st.markdown(self._get_grid_style(), unsafe_allow_html=True)
+        st.markdown(self._get_cells_style(), unsafe_allow_html=True)
+        st.markdown(self._get_cells_html(), unsafe_allow_html=True)
+
+    def _get_grid_style(self):
+        return f"""
+<style>
+    .wrapper {{
+    display: grid;
+    grid-template-columns: {self.template_columns};
+    grid-gap: {self.gap};
+    background-color: {self.color};
+    color: {self.background_color};
+    }}
+    .box {{
+    background-color: {self.color};
+    color: {self.background_color};
+    border-radius: 0px;
+    padding: 0px;
+    font-size: 100%;
+    text-align: center;
+    }}
+    table {{
+        color: {self.color}
+    }}
+</style>
+"""
+
+    def _get_cells_style(self):
+        return (
+            "<style>"
+            + "\n".join([cell._to_style() for cell in self.cells])
+            + "</style>"
+        )
+
+    def _get_cells_html(self):
+        return (
+            '<div class="wrapper">'
+            + "\n".join([cell._to_html() for cell in self.cells])
+            + "</div>"
+        )
+
+    def cell(
+        self,
+        class_: str = None,
+        grid_column_start: Optional[int] = None,
+        grid_column_end: Optional[int] = None,
+        grid_row_start: Optional[int] = None,
+        grid_row_end: Optional[int] = None,
+    ):
+        cell = Cell(
+            class_=class_,
+            grid_column_start=grid_column_start,
+            grid_column_end=grid_column_end,
+            grid_row_start=grid_row_start,
+            grid_row_end=grid_row_end,
+        )
+        self.cells.append(cell)
+        return cell
+
+
+def select_block_container_style():
+    """Add selection section for setting setting the max-width and padding
+    of the main block container"""
+    st.sidebar.header("Block Container Style")
+    max_width_100_percent = st.sidebar.checkbox("Max-width: 100%?", False)
+    if not max_width_100_percent:
+        max_width = st.sidebar.slider("Select max-width in px", 100, 2000, 1200, 100)
+    else:
+        max_width = 1200
+    dark_theme = st.sidebar.checkbox("Dark Theme?", False)
+    padding_top = st.sidebar.number_input("Select padding top in rem", 0, 200, 5, 1)
+    padding_right = st.sidebar.number_input("Select padding right in rem", 0, 200, 1, 1)
+    padding_left = st.sidebar.number_input("Select padding left in rem", 0, 200, 1, 1)
+    padding_bottom = st.sidebar.number_input(
+        "Select padding bottom in rem", 0, 200, 10, 1
+    )
+    if dark_theme:
+        global COLOR
+        global BACKGROUND_COLOR
+        BACKGROUND_COLOR = "rgb(17,17,17)"
+        COLOR = "#fff"
+
+    _set_block_container_style(
+        max_width,
+        max_width_100_percent,
+        padding_top,
+        padding_right,
+        padding_left,
+        padding_bottom,
+    )
+
+
+def _set_block_container_style(
+    max_width: int = 1200,
+    max_width_100_percent: bool = False,
+    padding_top: int = 5,
+    padding_right: int = 1,
+    padding_left: int = 1,
+    padding_bottom: int = 10,
+):
+    if max_width_100_percent:
+        max_width_str = f"max-width: 100%;"
+    else:
+        max_width_str = f"max-width: {max_width}px;"
+    st.markdown(
+        f"""
+<style>
+    .reportview-container .main .block-container{{
+        {max_width_str}
+        padding-top: {padding_top}rem;
+        padding-right: {padding_right}rem;
+        padding-left: {padding_left}rem;
+        padding-bottom: {padding_bottom}rem;
+    }}
+    .reportview-container .main {{
+        color: {COLOR};
+        background-color: {BACKGROUND_COLOR};
+    }}
+</style>
+""",
+        unsafe_allow_html=True,
+    )
+
+
+# @st.cache
+# def get_dataframe() -> pd.DataFrame():
+#     """Dummy DataFrame"""
+#     data = [
+#         {"quantity": 1, "price": 2},
+#         {"quantity": 3, "price": 5},
+#         {"quantity": 4, "price": 8},
+#     ]
+#     return pd.DataFrame(data)
+
+
+# def get_plotly_fig():
+#     """Dummy Plotly Plot"""
+#     return px.line(data_frame=get_dataframe(), x="quantity", y="price")
+
+
+# def get_matplotlib_plt():
+#     get_dataframe().plot(kind="line", x="quantity", y="price", figsize=(5, 3))

data/ImageNet_metadata.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e53b0fc17cd5c8811ca08b7ff908cd2bbd625147686ef8bc020cb85a5a4546e5
+size 3027633

data/activation/convnext_activation.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0354b28bcca4e3673888124740e3d82882cbf38af8cd3007f48a7a5db983f487
+size 33350177

data/activation/mobilenet_activation.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5abc76e9318fadee18f35bb54e90201bf28699cf75140b5d2482d42243fad302
+size 13564581

data/activation/resnet_activation.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:668bea355a5504d74f79d20d02954040ad572f50455361d7d17125c7c8b1561c
+size 23362905

data/dot_architectures/convnext_architecture.dot

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:41a258a40a93615638ae504770c14e44836c934badbe48f18148f5a750514ac9
+size 9108

data/layer_infos/convnext_layer_infos.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3e82ea48865493107b97f37da58e370f0eead5677bf10f25f237f10970aedb6f
+size 1678

data/layer_infos/mobilenet_layer_infos.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a11df5f0b23040d11ce817658a989c8faf19faa06a8cbad727b635bac824e917
+size 3578

data/layer_infos/resnet_layer_infos.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21e1787382f1e1c206b81d2c4fe207fb6d41f4cf186d5afc32fc056dd21e10d6
+size 5155

data/preprocessed_image_net/val_data_0.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2698bdc240555e2a46a40936df87275bc5852142d30e921ae0dad9289b0f576f
+size 906108480

data/preprocessed_image_net/val_data_1.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21780d77e212695dbee84d6d2ad17a5a520bc1634f68e1c8fd120f069ad76da1
+size 907109023

data/preprocessed_image_net/val_data_2.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2cfc83b78420baa1b2c3a8da92e7fba1f33443d506f483ecff13cdba2035ab3c
+size 907435149

data/preprocessed_image_net/val_data_3.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2f5e2c7cb4d6bae17fbd062a0b46f2cee457ad466b725f7bdf0f8426069cafee
+size 906089333

data/preprocessed_image_net/val_data_4.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ed53c87ec8b9945db31f910eb44b7e3092324643de25ea53a99fc29137df854
+size 905439763

frontend/__init__.py

@@ -0,0 +1,6 @@
+import streamlit.components.v1 as components
+
+on_click_graph = components.declare_component(
+    "on_click_graph",
+    path="./frontend"
+)

frontend/footer.py

@@ -0,0 +1,32 @@
+import streamlit as st
+
+footer="""<style>
+a:link , a:visited{
+background-color: transparent;
+# text-decoration: underline;
+}
+
+a:hover,  a:active {
+color: orange;
+background-color: transparent;
+text-decoration: underline;
+}
+
+.footer {
+position: fixed;
+left: 0;
+bottom: 0;
+width: 100%;
+background-color: white;
+text-align: center;
+}
+</style>
+
+<div class="footer">
+<p>USER_DEFINED_TEXT <a href="LINK" target="_blank" color="blue">LINKED_TEXT</a></p>
+</div>
+"""
+
+def add_footer(text, linked_text, link):
+    custom_footer = footer.replace('USER_DEFINED_TEXT', text).replace('LINKED_TEXT', linked_text).replace('LINK', link)
+    st.markdown(custom_footer, unsafe_allow_html=True)

frontend/index.html

@@ -0,0 +1,204 @@
+<html>
+
+<head>
+  <style type="text/css">
+  </style>
+</head>
+
+<!--
+----------------------------------------------------
+Your custom static HTML goes in the body:
+-->
+
+<body>
+</body>
+
+<script type="text/javascript">
+  // Helper function to send type and data messages to Streamlit client
+
+  const SET_COMPONENT_VALUE = "streamlit:setComponentValue"
+  const RENDER = "streamlit:render"
+  const COMPONENT_READY = "streamlit:componentReady"
+  const SET_FRAME_HEIGHT = "streamlit:setFrameHeight"
+  var HIGHTLIGHT_COLOR;
+  var original_colors;
+
+  function _sendMessage(type, data) {
+    // copy data into object
+    var outboundData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+    }, data)
+
+    if (type == SET_COMPONENT_VALUE) {
+      console.log("_sendMessage data: ", SET_COMPONENT_VALUE)
+      // console.log("_sendMessage data: " + JSON.stringify(data))
+      // console.log("_sendMessage outboundData: " + JSON.stringify(outboundData))
+    }
+
+    window.parent.postMessage(outboundData, "*")
+  }
+
+  function initialize(pipeline) {
+
+    // Hook Streamlit's message events into a simple dispatcher of pipeline handlers
+    window.addEventListener("message", (event) => {
+      if (event.data.type == RENDER) {
+        // The event.data.args dict holds any JSON-serializable value
+        // sent from the Streamlit client. It is already deserialized.
+        pipeline.forEach(handler => {
+          handler(event.data.args)
+        })
+      }
+    })
+
+    _sendMessage(COMPONENT_READY, { apiVersion: 1 });
+
+    // Component should be mounted by Streamlit in an iframe, so try to autoset the iframe height.
+    window.addEventListener("load", () => {
+      window.setTimeout(function () {
+        setFrameHeight(document.documentElement.clientHeight)
+      }, 0)
+    })
+
+    // Optionally, if auto-height computation fails, you can manually set it
+    // (uncomment below)
+    setFrameHeight(0)
+  }
+
+  function setFrameHeight(height) {
+    _sendMessage(SET_FRAME_HEIGHT, { height: height })
+  }
+
+  // The `data` argument can be any JSON-serializable value.
+  function notifyHost(data) {
+    _sendMessage(SET_COMPONENT_VALUE, data)
+  }
+
+  function changeButtonColor(button, color) {
+    pol = button.querySelectorAll('polygon')[0]
+    pol.setAttribute('fill', color)
+    pol.setAttribute('stroke', color)
+  }
+
+  function getButtonColor(button) {
+    pol = button.querySelectorAll('polygon')[0]
+    return pol.getAttribute('fill')
+  }
+  // ----------------------------------------------------
+  // Your custom functionality for the component goes here:
+
+  function toggle(button) {
+    group = 'node'
+    let button_color;
+    nodes = window.parent.document.getElementsByClassName('node')
+    console.log("nodes.length = ", nodes.length)
+    // for (let i = 0; i < nodes.length; i++) {
+    //   console.log(nodes.item(i))
+    // }
+    console.log("selected button ", button, button.getAttribute('class'), button.id)
+
+    for (let i = 0; i < nodes.length; i++) {
+      polygons = nodes.item(i).querySelectorAll('polygon')
+      if (polygons.length == 0) {
+        continue
+      }
+      if (button.id == nodes.item(i).id & button.getAttribute('class').includes("off")) {
+        button.setAttribute('class', group + " on")
+        button_color = original_colors[i]
+        
+      } else if (button.id == nodes.item(i).id & button.getAttribute('class').includes("on")) {
+        button.setAttribute('class', group + " off")
+        button_color = original_colors[i]
+      } else if (button.id == nodes.item(i).id) {
+        button.setAttribute('class', group + " on")
+        button_color = original_colors[i]
+        
+      } else if (button.id != nodes.item(i).id & nodes.item(i).getAttribute('class').includes("on")) {
+        nodes.item(i).className = group + " off"
+      } else {
+        nodes.item(i).className = group + " off"
+      }
+    }
+
+    nodes = window.parent.document.getElementsByClassName('node')
+    actions = []
+    for (let i = 0; i < nodes.length; i++) {
+      polygons = nodes.item(i).querySelectorAll('polygon')
+      if (polygons.length == 0) {
+        continue
+      }
+      btn = nodes.item(i)
+      ori_color = original_colors[i]
+      color = btn.querySelectorAll('polygon')[0].getAttribute('fill')
+      actions.push({ "action": btn.getAttribute("class").includes("on"), "original_color": ori_color, "color": color})
+    }
+
+    states = {}
+    states['choice'] = {
+      "node_title": button.querySelectorAll("title")[0].innerHTML,
+      "node_id": button.id,
+      "state": {
+        "action": button.getAttribute("class").includes("on"),
+        "original_color": button_color,
+        "color": button.querySelectorAll('polygon')[0].getAttribute('fill')
+      }
+    }
+    states["options"] = {"states": actions }
+
+    notifyHost({
+      value: states,
+      dataType: "json",
+    })
+  }
+
+  // ----------------------------------------------------
+  // Here you can customize a pipeline of handlers for 
+  // inbound properties from the Streamlit client app
+
+  // Set initial value sent from Streamlit!
+  function initializeProps_Handler(props) {
+    HIGHTLIGHT_COLOR = props['hightlight_color']
+    original_colors = []
+    // nodes = document.getElementsByClassName('node')
+    nodes = window.parent.document.getElementsByClassName('node')
+    console.log(nodes)
+    for (let i = 0; i < nodes.length; i++) {
+      // color = nodes.item(i).getElementsByTagName('POLYGON')[0].getAttribute("fill")
+      // nodes.item(i).addEventListener("click", toggle)
+      polygons = nodes.item(i).querySelectorAll('polygon')
+      if (polygons.length == 0) {
+        original_colors.push('none')
+        continue
+      }
+      
+      color = polygons[0].getAttribute("fill")
+      if (!nodes.item(i).hasAttribute('color')) {
+        nodes.item(i).setAttribute("color", color)
+        original_colors.push(color)
+      } else {
+        original_colors.push(nodes.item(i).getAttribute("color"))
+      }
+      nodes.item(i).addEventListener("click", function (event) {toggle(this)})
+    }
+    // console.log("original colors:", original_colors)
+  }
+  // Access values sent from Streamlit!
+  function dataUpdate_Handler(props) {
+    console.log('dataUpdate_Handler...........')
+    let msgLabel = document.getElementById("message_label")
+  }
+  // Simply log received data dictionary
+  function log_Handler(props) {
+    console.log("Received from Streamlit: " + JSON.stringify(props))
+  }
+
+  let pipeline = [initializeProps_Handler, dataUpdate_Handler, log_Handler]
+
+  // ----------------------------------------------------
+  // Finally, initialize component passing in pipeline
+  initialize(pipeline)
+
+</script>
+
+</html>

pages/1_Maximally_activating_patches.py

@@ -0,0 +1,166 @@
+import streamlit as st
+import numpy as np
+
+from plotly.subplots import make_subplots
+import plotly.graph_objects as go
+
+import graphviz
+
+from backend.maximally_activating_patches import load_layer_infos, load_activation, get_receptive_field_coordinates
+from frontend import on_click_graph
+from backend.utils import load_dataset_dict
+
+HIGHTLIGHT_COLOR = '#e7bcc5'
+st.set_page_config(layout='wide')
+
+
+st.title('Maximally activating image patches')
+st.write('> **What patterns maximally activate this channel in ConvNeXt model?**')
+st.write("""The maximally activating image patches method is a technique used in visualizing the interpretation of convolutional neural networks. 
+It works by identifying the regions of the input image that activate a particular neuron in the convolutional layer, 
+thus revealing the features that the neuron is detecting. To achieve this, the method generates image patches then feeds into the model while monitoring the neuron's activation. 
+The algorithm then selects the patch that produces the highest activation and overlays it on the original image to visualize the features that the neuron is responding to.
+""")
+
+# -------------------------- LOAD DATASET ---------------------------------
+dataset_dict = load_dataset_dict()
+
+# -------------------------- LOAD GRAPH -----------------------------------
+
+def load_dot_to_graph(filename):
+    dot = graphviz.Source.from_file(filename)
+    source_lines = str(dot).splitlines()
+    source_lines.pop(0)
+    source_lines.pop(-1)
+    graph = graphviz.Digraph()
+    graph.body += source_lines
+    return graph, dot
+    
+
+# st.header('ConvNeXt')
+convnext_dot_file = './data/dot_architectures/convnext_architecture.dot'
+convnext_graph = load_dot_to_graph(convnext_dot_file)[0]
+
+convnext_graph.graph_attr['size'] = '4,40'
+
+# -------------------------- DISPLAY GRAPH -----------------------------------
+
+def chosen_node_text(clicked_node_title):
+    clicked_node_title = clicked_node_title.replace('stage ', 'stage_').replace('block ', 'block_')
+    stage_id = clicked_node_title.split()[0].split('_')[1] if 'stage' in clicked_node_title else None
+    block_id = clicked_node_title.split()[1].split('_')[1] if 'block' in clicked_node_title else None
+    layer_id = clicked_node_title.split()[-1]
+    
+    if 'embeddings' in layer_id:
+        display_text = 'Patchify layer'
+        activation_key = 'embeddings.patch_embeddings'
+    elif 'downsampling' in layer_id:
+        display_text = f'Stage {stage_id} > Downsampling layer'
+        activation_key = f'encoder.stages[{stage_id}].downsampling_layer[1]'
+    else:
+        display_text = f'Stage {stage_id} > Block {block_id} > {layer_id} layer'
+        activation_key = f'encoder.stages[{int(stage_id)-1}].layers[{int(block_id)-1}].{layer_id}'
+    return display_text, activation_key
+
+
+props = {
+    'hightlight_color': HIGHTLIGHT_COLOR,
+    'initial_state': {
+        'group_1_header': 'Choose an option from group 1',
+        'group_2_header': 'Choose an option from group 2'
+    }
+}
+
+
+col1, col2 = st.columns((2,5))
+col1.markdown("#### Architecture")
+col1.write('')
+col1.write('Click on a layer below to generate top-k maximally activating image patches')
+col1.graphviz_chart(convnext_graph)
+
+with col2:
+    st.markdown("#### Output")
+    nodes = on_click_graph(key='toggle_buttons', **props)
+
+# -------------------------- DISPLAY OUTPUT -----------------------------------
+
+if nodes != None:
+    clicked_node_title = nodes["choice"]["node_title"]
+    clicked_node_id = nodes["choice"]["node_id"]
+    display_text, activation_key = chosen_node_text(clicked_node_title)
+    col2.write(f'**Chosen layer:** {display_text}')
+    # col2.write(f'**Activation key:** {activation_key}')
+
+    hightlight_syle = f'''
+        <style>
+            div[data-stale]:has(iframe) {{
+                height: 0;
+            }}
+            #{clicked_node_id}>polygon {{
+                fill: {HIGHTLIGHT_COLOR};
+                stroke: {HIGHTLIGHT_COLOR};
+            }}
+        </style>
+    '''
+    col2.markdown(hightlight_syle, unsafe_allow_html=True)
+
+    with col2:
+        layer_infos = None
+        with st.form('top_k_form'):
+            activation_path = './data/activation/convnext_activation.json'
+            activation = load_activation(activation_path)
+            num_channels = activation[activation_key].shape[1]
+
+            top_k = st.slider('Choose K for top-K maximally activating patches', 1,20, value=10)
+            channel_start, channel_end = st.slider(
+                'Choose channel range of this layer (recommend to choose small range less than 30)',
+                1, num_channels, value=(1, 30))
+            summit_button = st.form_submit_button('Generate image patches')
+            if summit_button:
+                
+                activation = activation[activation_key][:top_k,:,:]
+                layer_infos = load_layer_infos('./data/layer_infos/convnext_layer_infos.json')
+                # st.write(channel_start, channel_end)
+                # st.write(activation.shape, activation.shape[1])
+
+        if layer_infos != None:
+            num_cols, num_rows = top_k, channel_end - channel_start + 1
+            # num_rows = activation.shape[1]
+            top_k_coor_max_ = activation
+            st.markdown(f"#### Top-{top_k} maximally activating image patches of {num_rows} channels ({channel_start}-{channel_end})")
+
+            for row in range(channel_start, channel_end+1):
+                if row == channel_start:
+                    top_margin = 50
+                    fig = make_subplots(
+                        rows=1, cols=num_cols, 
+                        subplot_titles=tuple([f"#{i+1}" for i in range(top_k)]), shared_yaxes=True)
+                else:
+                    top_margin = 0
+                    fig = make_subplots(rows=1, cols=num_cols, shared_yaxes=True)
+                for col in range(1, num_cols+1):
+                    k, c = col-1, row-1
+                    img_index = int(top_k_coor_max_[k, c, 3])
+                    activation_value = top_k_coor_max_[k, c, 0]
+                    img = dataset_dict[img_index//10_000][img_index%10_000]['image']
+                    class_label = dataset_dict[img_index//10_000][img_index%10_000]['label']
+                    class_id = dataset_dict[img_index//10_000][img_index%10_000]['id']
+
+                    idx_x, idx_y = top_k_coor_max_[k, c, 1], top_k_coor_max_[k, c, 2]
+                    x1, x2, y1, y2 = get_receptive_field_coordinates(layer_infos, activation_key, idx_x, idx_y)
+                    img = np.array(img)[y1:y2, x1:x2, :]
+                    
+                    hovertemplate = f"""Top-{col}<br>Activation value: {activation_value:.5f}<br>Class Label: {class_label}<br>Class id: {class_id}<br>Image id: {img_index}"""
+                    fig.add_trace(go.Image(z=img, hovertemplate=hovertemplate), row=1, col=col)
+                    fig.update_xaxes(showticklabels=False, showgrid=False)
+                    fig.update_yaxes(showticklabels=False, showgrid=False)
+                    fig.update_layout(margin={'b':0, 't':top_margin, 'r':0, 'l':0})
+                    fig.update_layout(showlegend=False, yaxis_title=row)
+                    fig.update_layout(height=100, plot_bgcolor='rgba(0,0,0,0)', paper_bgcolor='rgba(0,0,0,0)')
+                    fig.update_layout(hoverlabel=dict(bgcolor="#e9f2f7"))
+                st.plotly_chart(fig, use_container_width=True)
+
+
+else:
+    col2.markdown(f'Chosen layer: <code>None</code>', unsafe_allow_html=True)
+    col2.markdown("""<style>div[data-stale]:has(iframe) {height: 0};""", unsafe_allow_html=True)

pages/2_SmoothGrad.py

@@ -0,0 +1,124 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+import random
+from backend.utils import make_grid, load_dataset, load_model, load_images
+
+from backend.smooth_grad import generate_smoothgrad_mask, ShowImage, fig2img
+from transformers import AutoFeatureExtractor, AutoModelForImageClassification
+import torch
+
+from matplotlib.backends.backend_agg import RendererAgg
+_lock = RendererAgg.lock
+
+st.set_page_config(layout='wide')
+BACKGROUND_COLOR = '#bcd0e7'
+
+
+st.title('Feature attribution visualization with SmoothGrad')
+st.write("""> **Which features are responsible for the current prediction of ConvNeXt?**
+
+In machine learning, it is helpful to identify the significant features of the input (e.g., pixels for images) that affect the model's prediction. 
+If the model makes an incorrect prediction, we might want to determine which features contributed to the mistake. 
+To do this, we can generate a feature importance mask, which is a grayscale image with the same size as the original image. 
+The brightness of each pixel in the mask represents the importance of that feature to the model's prediction.
+
+There are various methods to calculate an image sensitivity mask for a specific prediction. 
+One simple way is to use the gradient of a class prediction neuron concerning the input pixels, indicating how the prediction is affected by small pixel changes. 
+However, this method usually produces a noisy mask. 
+To reduce the noise, the SmoothGrad technique as described in [SmoothGrad: Removing noise by adding noise](https://arxiv.org/abs/1706.03825) by Daniel _et al_ is used, 
+which adds Gaussian noise to multiple copies of the image and averages the resulting gradients.
+""")
+
+instruction_text = """Users need to input the model(s), type of image set and image set setting to use this functionality.
+1. Choose model: Users can choose one or more models for comparison. 
+There are 3 models supported: [ConvNeXt](https://huggingface.co/facebook/convnext-tiny-224), 
+[ResNet](https://huggingface.co/microsoft/resnet-50) and [MobileNet](https://pytorch.org/hub/pytorch_vision_mobilenet_v2/). 
+These 3 models have similar number of parameters. 
+\n2. Choose type of Image set: There are 2 types of Image set. They are _User-defined set_ and _Random set_. 
+\n3. Image set setting: If users choose _User-defined set_ in Image set, 
+users need to enter a list of image IDs separated by commas (,). For example, `0,1,4,7` is a valid input.
+Check the page [ImageNet1k](/ImageNet1k) to see all the Image IDs.
+If users choose _Random set_ in Image set, users just need to choose the number of random images to display here.
+"""
+with st.expander("See more instruction", expanded=False):
+    st.write(instruction_text)
+    
+
+imagenet_df = pd.read_csv('./data/ImageNet_metadata.csv')
+
+# --------------------------- LOAD function -----------------------------
+
+
+images = []
+image_ids = []
+# INPUT ------------------------------
+st.header('Input')
+with st.form('smooth_grad_form'):
+    st.markdown('**Model and Input Setting**')
+    selected_models = st.multiselect('Model', options=['ConvNeXt', 'ResNet', 'MobileNet'])
+    selected_image_set = st.selectbox('Image set', ['User-defined set', 'Random set'])
+    
+    summit_button = st.form_submit_button('Set')
+    if summit_button:
+        setting_container = st.container()
+        # for id in image_ids:
+        #     images = load_images(image_ids)
+
+with st.form('2nd_form'):
+    st.markdown('**Image set setting**')
+    if selected_image_set == 'Random set':
+            no_images = st.slider('Number of images', 1, 50, value=10)
+            image_ids = random.sample(list(range(50_000)), k=no_images)
+    else:
+        text = st.text_area('Specific Image IDs', value='0')
+        image_ids = list(map(lambda x: int(x.strip()), text.split(',')))
+
+    run_button = st.form_submit_button('Display output')
+    if run_button:
+        for id in image_ids:
+            images = load_images(image_ids)
+    
+st.header('Output')
+
+models = {}
+feature_extractors = {}
+        
+for i, model_name in enumerate(selected_models):
+    models[model_name], feature_extractors[model_name] = load_model(model_name)
+
+
+# DISPLAY ----------------------------------
+if run_button:
+    header_cols = st.columns([1, 1] + [2]*len(selected_models))
+    header_cols[0].markdown(f'<div style="text-align: center;margin-bottom: 10px;background-color:{BACKGROUND_COLOR};"><b>Image ID</b></div>', unsafe_allow_html=True)
+    header_cols[1].markdown(f'<div style="text-align: center;margin-bottom: 10px;background-color:{BACKGROUND_COLOR};"><b>Original Image</b></div>', unsafe_allow_html=True)
+    for i, model_name in enumerate(selected_models):
+        header_cols[i + 2].markdown(f'<div style="text-align: center;margin-bottom: 10px;background-color:{BACKGROUND_COLOR};"><b>{model_name}</b></div>', unsafe_allow_html=True)
+    
+    grids = make_grid(cols=2+len(selected_models)*2, rows=len(image_ids)+1)
+
+
+@st.cache(allow_output_mutation=True)
+# @st.cache_data
+def generate_images(image_id, model_name):
+    j = image_ids.index(image_id)
+    image = images[j]['image']
+    return generate_smoothgrad_mask(
+        image, model_name,
+        models[model_name], feature_extractors[model_name], num_samples=10)
+
+with _lock:
+    for j, (image_id, image_dict) in enumerate(zip(image_ids, images)):
+        grids[j][0].write(f'{image_id}. {image_dict["label"]}')
+        image = image_dict['image']
+        ori_image = ShowImage(np.asarray(image))
+        grids[j][1].image(ori_image)
+
+        for i, model_name in enumerate(selected_models):
+            # ori_image, heatmap_image, masked_image = generate_smoothgrad_mask(image,
+            # model_name, models[model_name], feature_extractors[model_name], num_samples=10)
+            heatmap_image, masked_image = generate_images(image_id, model_name)
+            # grids[j][1].image(ori_image)
+            grids[j][i*2+2].image(heatmap_image)
+            grids[j][i*2+3].image(masked_image)

pages/3_Adversarial_attack.py

@@ -0,0 +1,215 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+import random
+from backend.utils import make_grid, load_dataset, load_model, load_image
+
+from backend.smooth_grad import generate_smoothgrad_mask, ShowImage, fig2img, LoadImage, ShowHeatMap, ShowMaskedImage
+from transformers import AutoFeatureExtractor, AutoModelForImageClassification
+import torch
+
+from matplotlib.backends.backend_agg import RendererAgg
+
+from backend.adversarial_attack import *
+
+_lock = RendererAgg.lock
+
+st.set_page_config(layout='wide')
+BACKGROUND_COLOR = '#bcd0e7'
+SECONDARY_COLOR = '#bce7db'
+
+
+st.title('Adversarial Attack')
+st.write('> **How adversarial attacks affect ConvNeXt interpretation?**')
+st.write("""Adversarial examples are inputs crafted to confuse neural networks, causing them to misclassify a given input. 
+These examples are not distinguishable by humans but cause the network to fail to recognize the image content. 
+One type of such attack is the fast gradient sign method (FGSM) attack, which is a white box attack that aims to ensure misclassification. 
+A white box attack is where the attacker has full access to the model being attacked.
+
+The FGSM attack is one of the earliest and most popular adversarial attacks. 
+It is described by Goodfellow _et al_ in their work on [Explaining and Harnessing Adversarial Examples](https://arxiv.org/abs/1412.6572). 
+The attack is simple yet powerful, using the gradients that neural networks use to learn. 
+Instead of adjusting the weights based on the backpropagated gradients to minimize loss, the attack adjusts the input data to maximize the loss using the gradient of the loss with respect to the input data.
+""")
+
+instruction_text = """Instruction to input:
+1. Choosing image: Users can choose a specific image by entering **Image ID** and hit the _Choose the defined image_ button or can generate an image randomly by hitting the _Generate a random image_ button.
+2. Choosing epsilon: **Epsilon** is the amount of perturbation on the original image under attack. The higher the epsilon is, the more pertubed the image is, the more confusion made to the model. 
+Users can choose a specific epsilon by engtering **Epsilon** and hit the _Choose the defined epsilon_ button.
+Users can also let the algorithm find the smallest epsilon automatically by hitting the _Find the smallest epsilon automatically_ button.
+The underlying algorithm will iterate through a set of epsilon in ascending order until reaching the **maximum value of epsilon**.
+After each iteration, the epsilon will increase by an amount equal to **step** variable.
+Users can change the default values of the two variable value optionally.
+"""
+st.write("To use the functionality below, users need to input the **image** and the **epsilon**.")
+with st.expander("See more instruction", expanded=False):
+    st.write(instruction_text)
+
+    
+
+imagenet_df = pd.read_csv('./data/ImageNet_metadata.csv')
+image_id = None
+
+if 'image_id' not in st.session_state:
+    st.session_state.image_id = 0
+
+# def on_change_random_input():
+#     st.session_state.image_id = st.session_state.image_id
+
+# ----------------------------- INPUT ----------------------------------
+st.header('Input')
+input_col_1, input_col_2, input_col_3 = st.columns(3)
+# --------------------------- INPUT column 1 ---------------------------
+with input_col_1:
+    with st.form('image_form'):
+        
+        # image_id = st.number_input('Image ID: ', format='%d', step=1)
+        st.write('**Choose or generate a random image**')
+        chosen_image_id_input = st.empty()
+        image_id = chosen_image_id_input.number_input('Image ID:', format='%d', step=1, value=st.session_state.image_id)
+        
+        choose_image_button = st.form_submit_button('Choose the defined image')
+        random_id = st.form_submit_button('Generate a random image')
+
+        if random_id:
+            image_id = random.randint(0, 50000)
+            st.session_state.image_id = image_id
+            chosen_image_id_input.number_input('Image ID:', format='%d', step=1, value=st.session_state.image_id)
+            
+        if choose_image_button:
+            image_id = int(image_id)
+            st.session_state.image_id = int(image_id)
+        # st.write(image_id, st.session_state.image_id)
+
+# ---------------------------- SET UP OUTPUT ------------------------------
+epsilon_container = st.empty()
+st.header('Output')
+st.subheader('Perform attack')
+
+# perform attack container
+header_col_1, header_col_2, header_col_3, header_col_4, header_col_5 = st.columns([1,1,1,1,1])
+output_col_1, output_col_2, output_col_3, output_col_4, output_col_5 = st.columns([1,1,1,1,1])
+
+# prediction error container
+error_container = st.empty()
+smoothgrad_header_container = st.empty()
+
+# smoothgrad container
+smooth_head_1, smooth_head_2, smooth_head_3, smooth_head_4, smooth_head_5 = st.columns([1,1,1,1,1])
+smoothgrad_col_1, smoothgrad_col_2, smoothgrad_col_3, smoothgrad_col_4, smoothgrad_col_5 = st.columns([1,1,1,1,1])
+
+original_image_dict = load_image(st.session_state.image_id)
+input_image = original_image_dict['image']
+input_label = original_image_dict['label']
+input_id = original_image_dict['id']
+
+# ---------------------------- DISPLAY COL 1 ROW 1 ------------------------------
+with output_col_1:
+    pred_prob, pred_class_id, pred_class_label = feed_forward(input_image)
+    # st.write(f'Class ID {input_id} - {input_label}: {pred_prob*100:.3f}% confidence')
+    st.image(input_image)
+    header_col_1.write(f'Class ID {input_id} - {input_label}: {pred_prob*100:.1f}% confidence')
+
+
+
+if pred_class_id != (input_id-1):
+    with error_container.container():
+        st.write(f'Predicted output: Class ID {pred_class_id} - {pred_class_label} {pred_prob*100:.1f}% confidence')
+        st.error('ConvNeXt misclassified the chosen image. Please choose or generate another image.',
+            icon = "🚫")
+
+# ----------------------------- INPUT column 2 & 3 ----------------------------
+with input_col_2:
+    with st.form('epsilon_form'):
+        st.write('**Set epsilon or find the smallest epsilon automatically**')
+        chosen_epsilon_input = st.empty()
+        epsilon = chosen_epsilon_input.number_input('Epsilon:', min_value=0.001, format='%.3f', step=0.001)
+
+        epsilon_button = st.form_submit_button('Choose the defined epsilon')
+        find_epsilon = st.form_submit_button('Find the smallest epsilon automatically')
+
+
+with input_col_3:
+    with st.form('iterate_epsilon_form'):
+        max_epsilon = st.number_input('Maximum value of epsilon (Optional setting)', value=0.500, format='%.3f')
+        step_epsilon = st.number_input('Step (Optional setting)', value=0.001, format='%.3f')
+        setting_button = st.form_submit_button('Set iterating mode')
+
+
+# ---------------------------- DISPLAY COL 2 ROW 1 ------------------------------
+if pred_class_id == (input_id-1) and (epsilon_button or find_epsilon or setting_button):
+    with output_col_3:
+        if epsilon_button:
+            perturbed_data, new_prob, new_id, new_label = perform_attack(input_image, input_id-1, epsilon)
+        else:
+            epsilons = [i*step_epsilon for i in range(1, 1001) if i*step_epsilon <= max_epsilon]
+            with epsilon_container.container():
+                epsilon_container_text = 'Checking epsilon'
+                st.write(epsilon_container_text)
+                st.progress(0)
+        
+            for i, e in enumerate(epsilons):
+                
+                perturbed_data, new_prob, new_id, new_label = perform_attack(input_image, input_id-1, e)
+                with epsilon_container.container():
+                    epsilon_container_text = f'Checking epsilon={e:.3f}. Confidence={new_prob*100:.1f}%'
+                    st.write(epsilon_container_text)
+                    st.progress(i/len(epsilons))
+                
+                epsilon = e
+
+                if new_id != input_id - 1:
+                    epsilon_container.empty()
+                    st.balloons()
+                    break
+                if i == len(epsilons)-1:
+                    epsilon_container.error(f'FGSM failed to attack on this image at epsilon={e:.3f}. Set higher maximum value of epsilon or choose another image',
+                                            icon = "🚫")
+
+        perturbed_image = deprocess_image(perturbed_data.detach().numpy())[0].astype(np.uint8).transpose(1,2,0)
+        perturbed_amount = perturbed_image - input_image
+        header_col_3.write(f'Pertubed amount - epsilon={epsilon:.3f}')
+        st.image(ShowImage(perturbed_amount))
+    
+    with output_col_2:
+        # st.write('plus sign')
+        st.image(LoadImage('frontend/images/plus-sign.png'))
+    
+    with output_col_4:
+        # st.write('equal sign')
+        st.image(LoadImage('frontend/images/equal-sign.png'))
+
+    # ---------------------------- DISPLAY COL 5 ROW 1 ------------------------------
+    with output_col_5:
+        # st.write(f'ID {new_id+1} - {new_label}: {new_prob*100:.3f}% confidence')
+        st.image(ShowImage(perturbed_image))
+    header_col_5.write(f'Class ID {new_id+1} - {new_label}: {new_prob*100:.1f}% confidence')
+
+    # -------------------------- DISPLAY SMOOTHGRAD ---------------------------
+    smoothgrad_header_container.subheader('SmoothGrad visualization')
+
+    with smoothgrad_col_1:
+        smooth_head_1.write(f'SmoothGrad before attacked')
+        heatmap_image, masked_image, mask = generate_images(st.session_state.image_id, epsilon=0)
+        st.image(heatmap_image)
+        st.image(masked_image) 
+    with smoothgrad_col_3:
+        smooth_head_3.write('SmoothGrad after attacked')
+        heatmap_image_attacked, masked_image_attacked, attacked_mask= generate_images(st.session_state.image_id, epsilon=epsilon)
+        st.image(heatmap_image_attacked)
+        st.image(masked_image_attacked)
+    
+    with smoothgrad_col_2:
+        st.image(LoadImage('frontend/images/minus-sign-5.png'))
+
+    with smoothgrad_col_5:
+        smooth_head_5.write('SmoothGrad difference')
+        difference_mask = abs(attacked_mask-mask)
+        st.image(ShowHeatMap(difference_mask))
+        masked_image = ShowMaskedImage(difference_mask, perturbed_image)
+        st.image(masked_image)
+
+    with smoothgrad_col_4:
+        st.image(LoadImage('frontend/images/equal-sign.png'))
+
+

pages/4_ImageNet1k.py

@@ -0,0 +1,56 @@
+import streamlit as st
+import pandas as pd
+
+from backend.utils import load_dataset, use_container_width_percentage
+
+st.set_page_config(layout='wide')
+
+st.title('ImageNet-1k')
+st.markdown('This page shows the summary of 50,000 images in the validation set of [ImageNet-1k](https://huggingface.co/datasets/imagenet-1k)')
+
+# SCREEN_WIDTH, SCREEN_HEIGHT = 2560, 1664
+
+with st.spinner("Loading dataset..."):
+    dataset_dict = {}
+    for data_index in range(5):
+        dataset_dict[data_index] = load_dataset(data_index)
+        
+imagenet_df = pd.read_csv('./data/ImageNet_metadata.csv')
+
+class_labels = imagenet_df.ClassLabel.unique().tolist()
+class_labels.sort()
+selected_classes = st.multiselect('Class filter: ', options=['All'] + class_labels)
+if not ('All' in selected_classes or len(selected_classes) == 0):
+    imagenet_df = imagenet_df[imagenet_df['ClassLabel'].isin(selected_classes)]
+# st.write(class_labels)
+
+col1, col2 = st.columns([2, 1])
+with col1:
+    st.dataframe(imagenet_df)
+    use_container_width_percentage(100)
+
+with col2:
+    st.text_area('Type anything here to copy later :)')
+    image = None
+    with st.form("display image"):
+        img_index = st.text_input('Image ID to display')
+    
+        submitted = st.form_submit_button('Display this image')
+        error_container = st.empty()
+
+        if submitted:
+            try:
+                img_index = int(img_index)
+                if img_index > 50000-1 or img_index < 0:
+                    error_container.error('The Image ID must be in range from 0 to 49999', icon="🚫")
+                else:
+                    image = dataset_dict[img_index//10_000][img_index%10_000]['image']
+                    class_label = dataset_dict[img_index//10_000][img_index%10_000]['label']
+                    class_id = dataset_dict[img_index//10_000][img_index%10_000]['id']
+            except ValueError:
+                error_container.error('Please enter an integer number for Image ID', icon = "🚫")
+            
+    if image != None:
+        st.image(image)
+        st.write('**Class label:** ', class_label)
+        st.write('\n**Class id:** ', str(class_id))

requirements.txt

@@ -0,0 +1,17 @@
+captum==0.5.0
+graphviz==0.20.1
+Markdown==3.4.1
+matplotlib==3.6.2
+numpy==1.22.3
+opencv_python_headless==4.6.0.66
+pandas==1.5.2
+Pillow==9.4.0
+plotly==5.11.0
+scipy==1.10.1
+setuptools==65.5.0
+streamlit==1.19.0
+torch==1.10.1
+torchvision==0.11.2
+tqdm==4.64.1
+transformers==4.25.1
+git+https://github.com/vlue-c/Visual-Explanation-Methods-PyTorch.git