Updated to be responsive on mobile. Button colour updated.

app.py

@@ -48,16 +48,14 @@ css = """
 .larger-gap { gap: 100px !important; }
 .symbols { text-align: center !important; margin: auto !important; }
 
-div.svelte-15lo0d8>*, div.svelte-15lo0d8>.form > * {
-    min-width: 0px !important;
-}
+.eval-bt { background-color: #3b74f4 !important; color: white !important; }
+.cust-width { min-width: 250px !important;}
 """
 
 global model 
 model = transformers.AutoModelForImageClassification.from_pretrained(
         'facebook/deit-tiny-distilled-patch16-224',
         ignore_mismatched_sizes=True,
-        force_download=True,
         num_labels=10
     )
 
@@ -270,13 +268,13 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
     gr.Markdown('''<hr/>''')
     
     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 Imagenette.</p>''')
             gr.Markdown('''<p style="font-size: 18px; text-align: justify"><i>Note: Imagenette is a subset of 10 easily classified classes from Imagenet 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 
                         find a pre-trained model from Hugging Face,
                         such as Meta's Distilled Data-efficient Image Transformer, which has been trained on this data (or so you think ☠️).</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/frgfm/imagenette" target="_blank">Imagenette</a></p>
@@ -289,14 +287,14 @@ 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 Imagenette dataset and their respective labels.</p>
                         ''')
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, elem_classes="cust-width"):
             gr.Gallery(label="Imagenette", preview=False, value=sample_imagenette(), height=420)
             
     gr.Markdown('''<hr/>''')
     
     gr.Markdown('''<p style="text-align: justify; font-size: 18px">ℹ️ Now as a responsible AI expert, you wish to assert that your model is not vulnerable to
                 attacks which might manipulate the prediction. For instance, fish become classified as dogs or golf balls. To do this, you will deploy
-                a backdoor poisoning attack against your own model and assess its performance.</p>''')
+                a backdoor poisoning attack against your own model and assess its performance. Click the button below 👇 to evaluate a poisoned model.</p>''')
 
     with gr.Row(elem_classes="custom-text"):
         with gr.Column(scale=6):
@@ -311,15 +309,15 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                                         'gas pump',
                                         'golf ball',
                                         'parachutte',], value='church')
-            eval_btn_patch = gr.Button("Evaluate")
+            eval_btn_patch = gr.Button("Evaluate ✨", elem_classes="eval-bt")
         with gr.Column(scale=10):
             clean_gallery = gr.Gallery(label="Clean", preview=False, show_download_button=True, height=600)
             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=3, elem_classes='symbols'):
             trigger_image = gr.Image(label="Trigger",  value="./baby-on-board.png", interactive=False)
-        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):
             poison_gallery = gr.Gallery(label="Poisoned", preview=False, show_download_button=True, height=600)