Updated app to support gradio v4.7.1

app.py

@@ -1,23 +1,7 @@
-# ---
-# jupyter:
-#   jupytext:
-#     text_representation:
-#       extension: .py
-#       format_name: light
-#       format_version: '1.5'
-#       jupytext_version: 1.15.2
-#   kernelspec:
-#     display_name: Python 3
-#     language: python
-#     name: python3
-# ---
-
-# # Gradio Example <a name="XAITK-Saliency-Gradio-Example"></a>
-# This notebook makes use of the saliency generation example found in the base ``xaitk-saliency`` repo [here](https://github.com/XAITK/xaitk-saliency/blob/master/examples/OcclusionSaliency.ipynb), and explores integrating ``xaitk-saliency`` with ``Gradio`` to create an interactive interface for computing saliency maps.
-#
-# ## Test Image <a name="Test-Image-Gradio"></a>
-
-# +
+## Gradio Example
+
+# This app makes use of the saliency generation example found in the base ``xaitk-saliency`` repo [here](https://github.com/XAITK/xaitk-saliency/blob/master/examples/OcclusionSaliency.ipynb), and explores integrating ``xaitk-saliency`` with ``Gradio`` to create an interactive interface for computing saliency maps.
+
 import os
 import PIL.Image
 import matplotlib.pyplot as plt  # type: ignore
@@ -27,11 +11,10 @@ import numpy as np
 import gradio as gr
 from gradio import (  # type: ignore
     AnnotatedImage, Button, Column, Image, Label,  # type: ignore
-    Number, Plot, Row, TabItem, Tab, Tabs  # type: ignore
+    Number, Plot, Row, TabItem, Tab, Tabs,  # type: ignore
+    Checkbox, Dropdown, Slider, Textbox  # type: ignore
 )
-from gradio import components as gr_components  # type: ignore
 
-# +
 # State variables for Image Classification
 from gr_component_state import ( # type: ignore
     img_cls_model_name, img_cls_saliency_algo_name, window_size_state, stride_state, debiased_state,
@@ -65,25 +48,16 @@ from gr_component_state import ( # type: ignore
 import torch
 import torchvision.transforms as transforms
 import torchvision.models as models
+import torch.nn.functional
 
 from smqtk_detection.impls.detect_image_objects.resnet_frcnn import ResNetFRCNN
 from xaitk_saliency.impls.gen_image_classifier_blackbox_sal.slidingwindow import SlidingWindowStack
 from xaitk_saliency.impls.gen_image_classifier_blackbox_sal.rise import RISEStack
 from xaitk_saliency.impls.gen_object_detector_blackbox_sal.drise import RandomGridStack, DRISEStack
-
-import torch.nn.functional
-from smqtk_classifier.interfaces.classify_image import ClassifyImage
-
-import numpy as np
-from gradio import (  # type: ignore
-    Checkbox, Dropdown, SelectData, Slider, Textbox  # type: ignore
-)
-from gradio import processing_utils as gr_processing_utils  # type: ignore
 from xaitk_saliency.interfaces.gen_object_detector_blackbox_sal import GenerateObjectDetectorBlackboxSaliency
 from smqtk_detection.interfaces.detect_image_objects import DetectImageObjects
+from smqtk_classifier.interfaces.classify_image import ClassifyImage
 
-# Use JPEG format for inline visualizations here.
-# %config InlineBackend.figure_format = "jpeg"
 
 os.makedirs('data', exist_ok=True)
 test_image_filename = 'data/catdog.jpg'
@@ -91,15 +65,6 @@ urllib.request.urlretrieve('https://farm1.staticflickr.com/74/202734059_fcce636d
 plt.figure(figsize=(12, 8))
 plt.axis('off')
 _ = plt.imshow(PIL.Image.open(test_image_filename))
-# -
-
-# ## Initialize state variables for Gradio components <a name="Global-State-Gradio"></a>
-# Gradio expects either a list or dict format to maintain state variables based on the use case. The cell below initializes the state variables from the ``gr_component_state.py`` file for the various components in our gradio demo.
-
-
-
-# ## Helper Functions <a name="Helper-Functions-Gradio"></a>
-# The functions defined in the cell below are used to set up the model, saliency algorithm, class labels and image transforms needed for the demo.
 
 CUDA_AVAILABLE = torch.cuda.is_available()
 
@@ -273,31 +238,31 @@ sal_obj_labels, sal_obj_idxs = get_det_sal_labels(obj_classes_file)
 # Modify textbox parameters based on chosen saliency algorithm
 def show_textbox_parameters(choice):
     if choice == 'RISE':
-        return Textbox.update(visible=False), Textbox.update(visible=False), Textbox.update(visible=True), Textbox.update(visible=True), Textbox.update(visible=True)
+        return Textbox(visible=False), Textbox(visible=False), Textbox(visible=True), Textbox(visible=True), Textbox(visible=True)
     elif choice == 'SlidingWindowStack':
-        return Textbox.update(visible=True), Textbox.update(visible=True), Textbox.update(visible=False), Textbox.update(visible=False), Textbox.update(visible=False)
+        return Textbox(visible=True), Textbox(visible=True), Textbox(visible=False), Textbox(visible=False), Textbox(visible=False)
     elif choice == "RandomGridStack":
-        return Textbox.update(visible=True), Textbox.update(visible=False), Textbox.update(visible=True), Textbox.update(visible=True)
+        return Textbox(visible=True), Textbox(visible=False), Textbox(visible=True), Textbox(visible=True)
     elif choice == "DRISE":
-        return Textbox.update(visible=True), Textbox.update(visible=True), Textbox.update(visible=True), Textbox.update(visible=False)
+        return Textbox(visible=True), Textbox(visible=True), Textbox(visible=True), Textbox(visible=False)
     else:
         raise Exception("Unknown Input")
 
 # Modify slider parameters based on chosen saliency algorithm
 def show_slider_parameters(choice):
     if choice == 'RISE' or choice == 'RandomGridStack' or choice == 'DRISE':
-        return Slider.update(visible=True), Slider.update(visible=True)
+        return Slider(visible=True), Slider(visible=True)
     elif choice == 'SlidingWindowStack':
-        return Slider.update(visible=True), Slider.update(visible=False)
+        return Slider(visible=True), Slider(visible=False)
     else:
         raise Exception("Unknown Input")
     
 # Modify checkbox parameters based on chosen saliency algorithm
 def show_debiased_checkbox(choice):
     if choice == 'RISE':
-        return Checkbox.update(visible=True)
+        return Checkbox(visible=True)
     elif choice == 'SlidingWindowStack' or choice == 'RandomGridStack' or choice == 'DRISE':
-        return Checkbox.update(visible=False)
+        return Checkbox(visible=False)
     else:
         raise Exception("Unknown Input")
 
@@ -313,7 +278,7 @@ def predict(x,top_n_classes):
     labels = list(zip(sal_class_labels, class_conf[sal_class_idxs].tolist()))
     final_labels = dict(sorted(labels, key=lambda t: t[1],reverse=True)[:top_n_classes])
     
-    return final_labels, Dropdown(choices=list(final_labels),label="Class to compute saliency",interactive=True,visible=True)
+    return final_labels, Dropdown(choices=list(final_labels))
 
 # Interpretation function for image classification that implements the selected saliency algorithm and generates the class-wise saliency map visualizations
 def interpretation_function(image: np.ndarray, 
@@ -390,7 +355,7 @@ def run_detect(input_img: np.ndarray, num_detections: int):
     
     bboxes_list = bboxes[:,:].astype(int).tolist()
 
-    return (input_img, list(zip([f for f in bboxes_list], [l for l in final_label]))[:num_detections]), Dropdown(choices=[l for l in final_label][:num_detections],label="Detection to compute saliency",interactive=True,visible=True)
+    return (input_img, list(zip([f for f in bboxes_list], [l for l in final_label]))[:num_detections]), Dropdown(choices=[l for l in final_label][:num_detections])
 
 # Run saliency algorithm on the object detect predictions and generate corresponding visualizations
 def run_detect_saliency(input_img: np.ndarray, 
@@ -456,11 +421,6 @@ def gen_det_saliency(input_img: np.ndarray,
 
     return sal_maps
 
-# Event handler that populates the dropdown list of classes based on the Label/AnnotatedImage components' output
-def map_labels(evt: SelectData):
-
-    return str(evt.value)
-
 with gr.Blocks() as demo:
     with Tab("Image Classification"):
         with Row():
@@ -471,19 +431,19 @@ with gr.Blocks() as demo:
         with Row():
             with Column(scale=0.33):
                 window_size = Textbox(value=window_size_state[-1],label="Tuple of window size values (Press Enter to submit the input)",interactive=True,visible=False)
-                masks = Number(value=num_masks_state[-1],label="Number of Random Masks (Press Enter to submit the input)",interactive=True,visible=False,precision=0)
+                masks = Number(value=num_masks_state[-1],label="Number of Random Masks (Press Enter to submit the input)",interactive=True,visible=True,precision=0)
             with Column(scale=0.33):
                 stride = Textbox(value=stride_state[-1],label="Tuple of stride values (Press Enter to submit the input)" ,interactive=True,visible=False)
-                spatial_res = Number(value=spatial_res_state[-1],label="Spatial Resolution of Masking Grid (Press Enter to submit the input)" ,interactive=True,visible=False,precision=0)
+                spatial_res = Number(value=spatial_res_state[-1],label="Spatial Resolution of Masking Grid (Press Enter to submit the input)" ,interactive=True,visible=True,precision=0)
             with Column(scale=0.33):
-                threads = Slider(value=threads_state[-1],label="Threads",interactive=True,visible=False)
+                threads = Slider(value=threads_state[-1],label="Threads",interactive=True,visible=True)
         with Row():
             with Column(scale=0.33):
-                seed = Number(value=seed_state[-1],label="Seed (Press Enter to submit the input)",interactive=True,visible=False,precision=0)
+                seed = Number(value=seed_state[-1],label="Seed (Press Enter to submit the input)",interactive=True,visible=True,precision=0)
             with Column(scale=0.33):
-                p1 = Slider(value=p1_state[-1],label="P1",interactive=True,visible=False, minimum=0,maximum=1,step=0.1)
+                p1 = Slider(value=p1_state[-1],label="P1",interactive=True,visible=True, minimum=0,maximum=1,step=0.1)
             with Column(scale=0.33):
-                debiased = Checkbox(value=debiased_state[-1],label="Debiased", interactive=True, visible=False)
+                debiased = Checkbox(value=debiased_state[-1],label="Debiased", interactive=True, visible=True)
         with Row():
             with Column():
                 input_img = Image(label="Saliency Map Generation", width=640, height=480)
@@ -515,14 +475,14 @@ with gr.Blocks() as demo:
                 drop_list_detect_sal = Dropdown(value=obj_det_saliency_algo_name[-1],choices=["RandomGridStack","DRISE"],label="Choose Saliency Algorithm",interactive="True")
         with Row():
             with Column(scale=0.33):
-                masks_detect = Number(value=num_masks_state[-1],label="Number of Random Masks (Press Enter to submit the input)",interactive=True,visible=False,precision=0)
+                masks_detect = Number(value=num_masks_state[-1],label="Number of Random Masks (Press Enter to submit the input)",interactive=True,visible=True,precision=0)
                 occlusion_grid_size = Textbox(value=occlusion_grid_state[-1],label="Tuple of occlusion grid size values (Press Enter to submit the input)",interactive=True,visible=False)
-                spatial_res_detect = Number(value=spatial_res_state[-1],label="Spatial Resolution of Masking Grid (Press Enter to submit the input)" ,interactive=True,visible=False,precision=0)
+                spatial_res_detect = Number(value=spatial_res_state[-1],label="Spatial Resolution of Masking Grid (Press Enter to submit the input)" ,interactive=True,visible=True,precision=0)
             with Column(scale=0.33):
-                seed_detect = Number(value=seed_state[-1],label="Seed (Press Enter to submit the input)",interactive=True,visible=False,precision=0)
-                p1_detect = Slider(value=p1_state[-1],label="P1",interactive=True,visible=False, minimum=0,maximum=1,step=0.1)
+                seed_detect = Number(value=seed_state[-1],label="Seed (Press Enter to submit the input)",interactive=True,visible=True,precision=0)
+                p1_detect = Slider(value=p1_state[-1],label="P1",interactive=True,visible=True, minimum=0,maximum=1,step=0.1)
             with Column(scale=0.33):
-                threads_detect = Slider(value=threads_state[-1],label="Threads",interactive=True,visible=False)
+                threads_detect = Slider(value=threads_state[-1],label="Threads",interactive=True,visible=True)
         with Row():
             with Column():
                 input_img_detect = Image(label="Saliency Map Generation", width=640, height=480)
@@ -565,7 +525,6 @@ with gr.Blocks() as demo:
 
     # Image Classification prediction and saliency generation event listeners
     classify.click(predict, [input_img, num_classes], [class_label,class_name])
-    class_label.select(map_labels,None,class_name)
     generate_saliency.click(interpretation_function, [input_img, class_label, class_name, img_alpha, sal_alpha, min_sal_range, max_sal_range], [interpretation_plot])
 
     # Object Detection dropdown list event listeners
@@ -584,7 +543,6 @@ with gr.Blocks() as demo:
 
     # Object detection prediction, class selection and saliency generation event listeners
     detection.click(run_detect, [input_img_detect, num_detections], [detect_label,class_name_det])
-    detect_label.select(map_labels, None, class_name_det)
     generate_det_saliency.click(run_detect_saliency,[input_img_detect, num_detections, class_name_det, img_alpha_det, sal_alpha_det, min_sal_range_det, max_sal_range_det],det_saliency_plot)
 
 demo.launch()