Fix css

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

app.py

@@ -26,6 +26,19 @@ device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 
 css = """
 
+.custom-text {
+    --text-md: 20px !important;
+    --text-sm: 18px !important;
+    --block-info-text-size: var(--text-sm);
+    --block-label-text-size: var(--text-sm);
+    --block-title-text-size: var(--text-md);
+    --body-text-size: var(--text-md);
+    --button-small-text-size: var(--text-md);
+    --checkbox-label-text-size: var(--text-md);
+    --input-text-size: var(--text-md);
+    --prose-text-size: var(--text-md);
+    --section-header-text-size: var(--text-md);
+}
 .input-image { margin: auto !important }
 .plot-padding { padding: 20px; }
 .eta-bar.svelte-1occ011.svelte-1occ011 {
@@ -192,7 +205,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
     import art
     text = art.__version__
     
-    with gr.Row():
+    with gr.Row(elem_classes="custom-text"):
         with gr.Column(scale=1,):
             gr.Image(value="./art_lfai.png", show_label=False, show_download_button=False, width=100, show_share_button=False)
         with gr.Column(scale=2):
@@ -213,7 +226,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
     gr.Markdown('''<hr/>''')
     
     
-    with gr.Row(elem_classes='larger-gap'):
+    with gr.Row(elem_classes=["larger-gap", "custom-text"]):
         with gr.Column(scale=1):
             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>''')
@@ -235,19 +248,19 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                             <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):
-            gr.Gallery(label="CIFAR-10", preview=True, value=sample_CIFAR10())
+            gr.Gallery(label="CIFAR-10", preview=True, value=sample_CIFAR10(), height=420)
             
     gr.Markdown('''<hr/>''')
     
-    gr.Markdown('''<p style="text-align: justify">ℹ️ Now as a responsible AI expert, you wish to assert that your model is not vulnerable to
+    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, ships become classified as birds. To do this, you will run deploy
                 adversarial attacks against your own model and assess its performance.</p>''')
     
-    gr.Markdown('''<p style="text-align: justify">ℹ️ Below are two common types of evasion attack. Both create adversarial images, which at first glance, seem the same as the original images,
+    gr.Markdown('''<p style="text-align: justify; font-size: 18px">ℹ️ Below are two common types of evasion attack. Both create adversarial images, which at first glance, seem the same as the original images,
                 however they contain subtle changes which cause the AI model to make incorrect predictions.</p><br/>''')
-    
+
         
-    with gr.Accordion("Projected Gradient Descent", open=False):
+    with gr.Accordion("Projected Gradient Descent", open=False, elem_classes="custom-text"):
         gr.Markdown('''This attack uses the PGD optimization algorithm to identify the optimal perturbations
                     to add to an image (i.e. changing pixel values) to cause the model to misclassify images. See more 
                     <a href="https://github.com/Trusted-AI/adversarial-robustness-toolbox"
@@ -289,7 +302,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
     
     gr.Markdown('''<br/>''')
       
-    with gr.Accordion("Adversarial Patch", open=False):
+    with gr.Accordion("Adversarial Patch", open=False, elem_classes="custom-text"):
         gr.Markdown('''This attack optimizes pixels in a patch which can be overlayed on an image, causing a model to misclassify. See more 
                     <a href="https://github.com/Trusted-AI/adversarial-robustness-toolbox"
                     target="blank_">here</a>.''')
@@ -309,7 +322,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
             with gr.Column(scale=3):
                 with gr.Row(elem_classes='symbols'):
                     with gr.Column(scale=10):
-                        gr.Markdown('''<p style="font-size: 18px"><i>The unmodified, original CIFAR-10 images, with model predictions.</i></p><br>''')
+                        gr.Markdown('''<p style="font-size: 18px"><i>The unmodified, original CIFAR-10 images, with model predictions.</i></p><br><br>''')
                         original_gallery = gr.Gallery(label="Original", preview=False, show_download_button=True)
                         clean_accuracy = gr.Number(label="Clean Accuracy", precision=2)
                     
@@ -317,7 +330,7 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
                         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>''')
+                        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'):
@@ -338,11 +351,11 @@ with gr.Blocks(css=css, theme='Tshackelton/IBMPlex-DenseReadable') as demo:
 if __name__ == "__main__":
     
     # For development
-    '''demo.launch(show_api=False, debug=True, share=False,
+    demo.launch(show_api=False, debug=True, share=False,
                 server_name="0.0.0.0", 
                 server_port=7777, 
                 ssl_verify=False,
-                max_threads=20)'''
+                max_threads=20)
                 
     # For deployment
-    demo.launch(share=True, ssl_verify=False)
+    '''demo.launch(share=True, ssl_verify=False)'''