Added blue evaluate button

Signed-off-by: Kieran Fraser <[email protected]>

app.py

@@ -41,9 +41,7 @@ css = """
 .center-text { text-align: center !important }
 .larger-gap { gap: 100px !important; }
 .symbols { text-align: center !important; margin: auto !important; }
-div.svelte-15lo0d8>*, div.svelte-15lo0d8>.form > * {
-    min-width: 0px !important;
-}
+.cust-width { min-width: 250px !important;}
 .eval-bt { background-color: #3b74f4; color: white; }
 """
 
@@ -224,13 +222,13 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
     
     
     with gr.Row(elem_classes=["larger-gap", "custom-text"]):
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, elem_classes="cust-width"):
             gr.Markdown('''<p style="font-size: 20px; text-align: justify">ℹ️ First lets set the scene. You have a dataset of images, such as CIFAR-10.</p>''')
             gr.Markdown('''<p style="font-size: 18px; text-align: justify"><i>Note: CIFAR-10 images are low resolution images which span 10 different categories as shown.</i></p>''')
             gr.Markdown('''<p style="font-size: 20px; text-align: justify">ℹ️ Your goal is to have an AI model capable of classifying these images. So you 
                         train a model on this dataset, or use a pre-trained model from Hugging Face,
                         such as Meta's Distilled Data-efficient Image Transformer.</p>''')
-        with gr.Column(scale=1): 
+        with gr.Column(scale=1, elem_classes="cust-width"): 
             gr.Markdown('''
                             <p style="font-size: 20px;"><b>Hugging Face dataset:</b> 
                             <a href="https://huggingface.co/datasets/cifar10" target="_blank">CIFAR-10</a></p>
@@ -244,7 +242,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                             <br/>
                             <p style="font-size: 20px;">👀 take a look at the sample images from the CIFAR-10 dataset and their respective labels.</p>
                         ''')
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, elem_classes="cust-width"):
             gr.Gallery(label="CIFAR-10", preview=True, value=sample_CIFAR10(), height=420)
             
     gr.Markdown('''<hr/>''')
@@ -270,7 +268,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                 max_iter = gr.Slider(minimum=1, maximum=10, label="Max iterations", value=4)
                 eps = gr.Slider(minimum=0.0001, maximum=1, label="Epslion", value=0.3) 
                 eps_steps = gr.Slider(minimum=0.0001, maximum=1, label="Epsilon steps", value=0.03) 
-                bt_eval_pgd = gr.Button("Evaluate", elem_classes="eval-bt")
+                bt_eval_pgd = gr.Button("Evaluate ✨", elem_classes="eval-bt")
                 
             # Evaluation Output. Visualisations of success/failures of running evaluation attacks.
             with gr.Column(scale=5):
@@ -280,12 +278,12 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                         original_gallery = gr.Gallery(label="Original", preview=False, show_download_button=True)
                         benign_output = gr.Label(num_top_classes=3, visible=False)
                         clean_accuracy = gr.Number(label="Clean Accuracy", precision=2)
-                    with gr.Column(scale=1, min_width='0px', elem_classes='symbols'):
+                    with gr.Column(scale=1, min_width=0, elem_classes='symbols'):
                         gr.Markdown('''➕''')
                     with gr.Column(scale=10):
-                        gr.Markdown('''<p style="font-size: 18px"><i>Visual representation of the calculated perturbations for attacking the model (black pixels indicate little to no perturbation).</i></p>''')
+                        gr.Markdown('''<p style="font-size: 18px"><i>Visual representation of the calculated perturbations for attacking the model.</i></p><br>''')
                         delta_gallery = gr.Gallery(label="Added perturbation", preview=False, show_download_button=True)
-                    with gr.Column(scale=1, min_width='0px'):
+                    with gr.Column(scale=1, min_width=0):
                         gr.Markdown('''🟰''', elem_classes='symbols')
                     with gr.Column(scale=10):
                         gr.Markdown('''<p style="font-size: 18px"><i>The original image (with optimized perturbations applied) gives us an adversarial image which fools the model.</i></p>''')
@@ -313,7 +311,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                 y_location = gr.Slider(minimum=1, maximum=32, label="Location (y)", value=1) 
                 patch_height = gr.Slider(minimum=1, maximum=32, label="Patch height", value=12) 
                 patch_width = gr.Slider(minimum=1, maximum=32, label="Patch width", value=12) 
-                eval_btn_patch = gr.Button("Evaluate", elem_classes="eval-bt")
+                eval_btn_patch = gr.Button("Evaluate ✨", elem_classes="eval-bt")
                 
             # Evaluation Output. Visualisations of success/failures of running evaluation attacks.
             with gr.Column(scale=3):
@@ -323,14 +321,14 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                         original_gallery = gr.Gallery(label="Original", preview=False, show_download_button=True)
                         clean_accuracy = gr.Number(label="Clean Accuracy", precision=2)
                     
-                    with gr.Column(scale=1, min_width='0px', elem_classes='symbols'):
+                    with gr.Column(scale=1, min_width=0, elem_classes='symbols'):
                         gr.Markdown('''➕''')
                         
                     with gr.Column(scale=10):
                         gr.Markdown('''<p style="font-size: 18px"><i>Visual representation of the optimized patch for attacking the model.</i></p><br><br>''')
                         delta_gallery = gr.Gallery(label="Patches", preview=True, show_download_button=True)
                         
-                    with gr.Column(scale=1, min_width='0px'):
+                    with gr.Column(scale=1, min_width=0):
                         gr.Markdown('''🟰''', elem_classes='symbols')
                         
                     with gr.Column(scale=10):