Update app.py & readme.md

README.md

@@ -9,4 +9,15 @@ app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# PwnAI Demo
+
+## Overview
+PwnAI is an educational event that explores adversarial machine learning techniques, specifically focusing on attacking Image Classifiers and Language Model (LM) Prompt Injections. This repository contains a demo showcasing how adversarial attacks can be applied to image classifiers.
+
+## Demo Description
+The demo includes two example pictures that appear very similar but are classified differently. Users can interact with the demo by submitting both pictures for inference, allowing them to observe how the machine learning model's classification can be manipulated through adversarial attacks. Users can also submit their own pictures to play around.
+
+## Performance Note
+Please note that this demo runs on a free-tier CPU, so its performance may be slow.

app.py

@@ -27,11 +27,81 @@ def predict(img):
   label_confidences = {label: prob for label, prob in zip(top_10_labels, top_10_probabilities)}
   return label_confidences
 
-demo = gr.Interface(
-  fn=predict,
-  inputs=gr.Image(),
-  outputs=gr.Label(),
-  examples=examples
-)
+css = '''
+.gradio-container {
+  width: 85% !important;
+}
+h1 {
+  width: 100% !important;
+} 
+p {
+  margin-left: 30px !important; 
+  margin-right: 30px !important;
+  font-size: 1.1rem !important;
+}
+'''
+
+title = r"""
+<h1>GDSC: PwnAI Image Classifier Demo</h1>
+"""
+description = r"""
+<p>PwnAI is an educational event that explores adversarial machine learning. It aims to help students learn about LLM Prompt Injection and Fooling Image Classifiers.</p>
+<p>In this demo, there are two example pictures. They may look very similar to us, but they are classified differently. Try it out yourself by submitting both pictures for inference and observing the results.</p>
+<p>Try it out yourself by experimenting with the image on the left to see if you can cause a misclassification.</p>
+<h2>What to Expect</h2>
+<p>Participants will explore these concepts through interactive demos and hands-on workshops, gaining insights into applying adversarial attacks to machine learning models.</p>
+<h2>NOTE</h2>
+<p>This demo runs on a free-tier CPU, so its performance is slow.</p>
+<h2>What can this AI Classify</h2>
+<p>1. Bread</p>
+<p>2. Dairy</p>
+<p>3. Dessert</p>
+<p>4. Egg</p>
+<p>5. Fried Food</p>
+<p>6. Fruit</p>
+<p>7. Meat</p>
+<p>8. Noodles</p>
+<p>9. Rice</p>
+<p>10. Seafood</p>
+<p>11. Soup</p>
+<p>12. Vegetable</p>
+"""
+
+Ending = r"""
+<p>Woahhhh. Is this steganography???? Who knows? Come for the event to find out!</p>
+"""
+
+Footer = r"""
+---
+Challenge Created By Chai Cheng Xun
+"""
+
+with gr.Blocks(css=css, title="PwnAI: Image Classifier Demo") as demo:
+  gr.Markdown(title)
+  gr.Markdown(description)
+
+  with gr.Row():
+    with gr.Column():
+      img_file = gr.Image(label="Upload a photo to be classfied")
+      submit = gr.Button("Submit", variant="primary")
+
+
+    with gr.Column():
+      output = gr.Label()
+
+    submit.click(
+      fn=predict,
+      inputs=img_file,
+      outputs=output,
+    )
+
+
+  gr.Examples(
+    examples=examples,
+    inputs=[img_file],
+  )
+  
+  gr.Markdown(Ending)
+  gr.Markdown(Footer)
 
 demo.launch()