add random noise

README.md

@@ -1,5 +1,5 @@
 ---
-title: Fgsm Project
+title: FGSM Project
 emoji: 📈
 colorFrom: gray
 colorTo: green
@@ -7,4 +7,16 @@ sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This repository was developed inside a [devcontainer](https://containers.dev/). 
+
+If you are after speed, you can run this application locally. 
+
+1. Clone the repository
+
+`git clone https://huggingface.co/spaces/niniack/fgsm-project`
+
+2. Open up the project inside a devcontainer. Check [this](https://code.visualstudio.com/docs/devcontainers/containers) for instructions with VS Code.
+
+3. Start the application
+
+`panel serve /path/to/app.py/ --dev`

app.py

@@ -52,6 +52,7 @@ def run_forward_backward(image: Image, epsilon):
     )
 
     # Grab input
+    processor.crop_pct = 1
     input_tensor = processor(image, return_tensors="pt")["pixel_values"]
     input_tensor.requires_grad_(True)
 
@@ -70,11 +71,18 @@ def run_forward_backward(image: Image, epsilon):
     # Denormalize input
     mean = torch.tensor(processor.image_mean).view(1, -1, 1, 1)
     std = torch.tensor(processor.image_std).view(1, -1, 1, 1)
-    input_tensor_denorm = input_tensor.detach() * std + mean
+    input_tensor_denorm = input_tensor.clone().detach() * std + mean
+
+    # Add noise to input
+    random_noise = torch.sign(torch.randn_like(input_tensor)) * 0.02
+    input_tensor_denorm_noised = torch.clamp(input_tensor_denorm + random_noise, 0, 1)
+    # input_tensor_denorm_noised = input_tensor_denorm
 
     # FGSM attack
     adv_input_tensor_denorm = fgsm_attack(
-        image=input_tensor_denorm, epsilon=epsilon, data_grad=input_tensor.grad.data
+        image=input_tensor_denorm_noised,
+        epsilon=epsilon,
+        data_grad=input_tensor.grad.data,
     )
 
     # Normalize adversarial input tensor back to the input range
@@ -84,7 +92,6 @@ def run_forward_backward(image: Image, epsilon):
     adv_output = model(adv_input_tensor)
     adv_output = adv_output.logits
 
-
     return (
         output,
         adv_output,
@@ -109,10 +116,10 @@ async def process_inputs(button_event, image_data: bytes, epsilon: float):
         try:
             # Open the image using PIL
             pil_img = Image.open(BytesIO(image_data))
-                
+
             # Run forward + FGSM
-            clean_logits, adv_logits, input_tensor, adv_input_tensor = run_forward_backward(
-                image=pil_img, epsilon=epsilon
+            clean_logits, adv_logits, input_tensor, adv_input_tensor = (
+                run_forward_backward(image=pil_img, epsilon=epsilon)
             )
 
         except Exception as e:
@@ -121,21 +128,37 @@ async def process_inputs(button_event, image_data: bytes, epsilon: float):
 
         img = pn.pane.Image(
             to_pil_image(input_tensor, do_rescale=True),
-            height=350,
+            height=300,
             align="center",
         )
 
         # Convert image for visualizing
+        adv_img_pil = to_pil_image(adv_input_tensor, do_rescale=True)
         adv_img = pn.pane.Image(
-            to_pil_image(adv_input_tensor, do_rescale=True),
-            height=350,
+            adv_img_pil,
+            height=300,
             align="center",
         )
 
+        # Download image button
+        adv_img_bytes = io.BytesIO()
+        adv_img_pil.save(adv_img_bytes, format="PNG")
+        # download = pn.widgets.FileDownload(
+        #     to_pil_image(adv_img_bytes, do_rescale=True),
+        #     embed=True,
+        #     filename="adv_img.png",
+        #     button_type="primary",
+        #     button_style="outline",
+        #     width_policy="min",
+        # )
+
         # Build the results column
         k_val = 5
         results = pn.Column(
-            pn.Row("###### Uploaded", "###### Adversarial"), pn.Row(img, adv_img), f" ###### Top {k_val} class predictions",
+            pn.Row("###### Uploaded", "###### Adversarial"),
+            pn.Row(img, adv_img),
+            # pn.Row(pn.Spacer(), download),
+            f" ###### Top {k_val} class predictions",
         )
 
         # Get likelihoods
@@ -150,43 +173,43 @@ async def process_inputs(button_event, image_data: bytes, epsilon: float):
             # Get top k values and indices
             vals_topk_clean, idx_topk_clean = torch.topk(likelihood_tensor, k=k_val)
             label_bars = pn.Column()
-            
+
             for idx, val in zip(idx_topk_clean, vals_topk_clean):
                 prob = val.item()
                 row_label = pn.widgets.StaticText(
-                    name=f"{classes[idx]}", 
-                    value=f"{prob:.2%}", 
-                    align="center"
+                    name=f"{classes[idx]}", value=f"{prob:.2%}", align="center"
                 )
                 row_bar = pn.indicators.Progress(
                     value=int(prob * 100),
                     sizing_mode="stretch_width",
-                    bar_color="success" if prob > 0.7 else "warning",  # Dynamic color based on value
+                    bar_color="success"
+                    if prob > 0.7
+                    else "warning",  # Dynamic color based on value
                     margin=(0, 10),
                     design=pn.theme.Material,
                 )
                 label_bars.append(pn.Column(row_label, row_bar))
 
-        # for likelihood_tensor in likelihoods:
-        #     # Get top
-        #     vals_topk_clean, idx_topk_clean = torch.topk(likelihood_tensor, k=k_val)
-        #     label_bars = pn.Column()
-        #     for idx, val in zip(idx_topk_clean, vals_topk_clean):
-        #         prob = val.item()
-        #         row_label = pn.widgets.StaticText(
-        #             name=f"{classes[idx]}", value=f"{prob:.2%}", align="center"
-        #         )
-        #         row_bar = pn.indicators.Progress(
-        #             value=int(prob * 100),
-        #             sizing_mode="stretch_width",
-        #             bar_color="secondary",
-        #             margin=(0, 10),
-        #             design=pn.theme.Material,
-        #         )
-        #         label_bars.append(pn.Column(row_label, row_bar))
+            # for likelihood_tensor in likelihoods:
+            #     # Get top
+            #     vals_topk_clean, idx_topk_clean = torch.topk(likelihood_tensor, k=k_val)
+            #     label_bars = pn.Column()
+            #     for idx, val in zip(idx_topk_clean, vals_topk_clean):
+            #         prob = val.item()
+            #         row_label = pn.widgets.StaticText(
+            #             name=f"{classes[idx]}", value=f"{prob:.2%}", align="center"
+            #         )
+            #         row_bar = pn.indicators.Progress(
+            #             value=int(prob * 100),
+            #             sizing_mode="stretch_width",
+            #             bar_color="secondary",
+            #             margin=(0, 10),
+            #             design=pn.theme.Material,
+            #         )
+            #         label_bars.append(pn.Column(row_label, row_bar))
 
             label_bars_rows.append(label_bars)
-    
+
         results.append(label_bars_rows)
 
         yield results
@@ -194,7 +217,7 @@ async def process_inputs(button_event, image_data: bytes, epsilon: float):
     except Exception as e:
         yield f"##### Something went wrong! \n {e}"
         return
-    
+
     finally:
         main.disabled = False
 
@@ -213,37 +236,68 @@ file_input = pn.widgets.FileInput(name="Upload a PNG image", accept=".png,.jpg")
 
 # Epsilon
 epsilon_slider = pn.widgets.FloatSlider(
-    name=r"$$\epsilon$$", start=0, end=0.1, step=0.005, value=0.05, format='1[.]000'
+    name=r"$$\epsilon$$ parameter for FGSM",
+    start=0,
+    end=0.1,
+    step=0.005,
+    value=0.000,
+    format="1[.]000",
+    align="center",
+    max_width=500,
+    width_policy="max",
 )
 
-# Upload button widget
-upload_image = pn.widgets.Button(name="Upload image", align="end")
-
+# alpha_slider = pn.widgets.FloatSlider(
+#     name=r"$$\alpha$$ parameter for Gaussian noise",
+#     start=0,
+#     end=0.1,
+#     step=0.005,
+#     value=0.000,
+#     format="1[.]000",
+#     align="center",
+#     max_width=500,
+#     width_policy="max"
+
+# )
+
+# Regenerate button
+regenerate = pn.widgets.Button(
+    name="Regenerate",
+    button_type="primary",
+    width_policy="min",
+    max_width=105,
+)
 ############################################
 
 # Organize widgets in a column
 input_widgets = pn.Column(
     """
-    ###### Classify an image with a pre-trained [ResNet18](https://huggingface.co/microsoft/resnet-18) and generate an adversarial example.\n
+    ###### Classify an image (png/jpeg) with a pre-trained [ResNet18](https://huggingface.co/microsoft/resnet-18) and generate an adversarial example.\n
+    
+    Wondering where the class names come from? Find the list of ImageNet-1K classes [here.](https://deeplearning.cms.waikato.ac.nz/user-guide/class-maps/IMAGENET/)
 
-    Please be patient with the application, it is running on a low-resource device.
+    *Please be patient with the application, it is running on a low-resource device.*
     """,
     file_input,
-    epsilon_slider,
+    pn.Row(epsilon_slider, pn.Spacer(width_policy="min", max_width=25), regenerate),
 )
 
 # Add interactivity
 interactive_result = pn.panel(
     pn.bind(
-        process_inputs, upload_image, file_input.param.value, epsilon_slider.param.value
+        process_inputs,
+        regenerate,
+        file_input.param.value,
+        epsilon_slider.param.value,
     ),
     height=600,
 )
 
 footer = pn.pane.Markdown(
     """
-    <br><br><br><br>
-    Wondering where the class names come from? Find the full list [here](https://deeplearning.cms.waikato.ac.nz/user-guide/class-maps/IMAGENET/)
+    <br><br>
+
+    If the application is too slow for you, head over to the README to get this running locally.
     """
 )
 
@@ -259,7 +313,7 @@ title = "Adversarial Sample Generation"
 pn.template.BootstrapTemplate(
     title=title,
     main=main,
-    main_max_width="min(50%, 698px)",
+    main_max_width="min(75%, 698px)",
     header_background="#101820",
 ).servable(title=title)