Added all images

app.py

@@ -8,6 +8,31 @@ with open("HFImage.png", "rb") as f:
 
 IMAGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'
 
+with open("QuestionAnswerTeaser.png", "rb") as f:
+    encoded = base64.b64encode(f.read()).decode()
+
+QA_IMAGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'
+
+with open("SummarisationTeaser.png", "rb") as f:
+    encoded = base64.b64encode(f.read()).decode()
+
+SUMMARISATION_IMAGGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'
+
+with open("Text2ImageTeaser.png", "rb") as f:
+    encoded = base64.b64encode(f.read()).decode()
+
+TEXT2IMAGE_IMAGE_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'
+
+with open("SyntheticImage.png", "rb") as f:
+    encoded = base64.b64encode(f.read()).decode()
+
+SYNTHETIC_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'
+
+with open("RealImage.jpeg", "rb") as f:
+    encoded = base64.b64encode(f.read()).decode()
+
+REAL_HTML = f'<img src="data:image/png;base64,{encoded}" style="width:100%; border-radius:8px; margin-bottom:20px;" />'
+
 client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
 
 # ---- GPT explanation backend ----
@@ -191,7 +216,7 @@ QUESTION_ANSWER = f"""
         Question Answering models can retrieve the answer to a question from a given text, which is useful for searching for an answer in a document. 
         Some question answering models can generate answers without context!
     </p>
-    {IMAGE_HTML}
+    {QA_IMAGE_HTML}
     <h1>About Question Answering</h1>
     <h2>Use Cases</h2>
     <h3>Frequently Asked Questions</h3>
@@ -240,7 +265,7 @@ SUMMARISATION = f"""
         Summarization is the task of producing a shorter version of a document while preserving its important information. 
         Some models can extract text from the original input, while other models can generate entirely new text.
     </p>
-    {IMAGE_HTML}
+    {SUMMARISATION_IMAGGE_HTML}
     <h1>About Summarisation</h1>
     <h2>Use Cases</h2>
     <h3>Research Paper Summarization 🧐</h3>
@@ -290,6 +315,7 @@ TEXT_2_IMAGGE = f"""
     <p>
         Text-to-image is the task of generating images from input text. These pipelines can also be used to modify and edit images based on text prompts.
     </p>
+    {TEXT2IMAGE_IMAGE_HTML}
     <h1>About Text-to-Image</h1>
     <h2>Use Cases</h2>
     <h3>Data Generation</h3>
@@ -317,9 +343,11 @@ TEXT_2_IMAGGE = f"""
         <ul>
             <li><b>Synthetic image editing:</b> Adjusting images that were initially created using an input prompt while preserving the overall meaning or context of the original image.</li>
         </ul>
+        {SYNTHETIC_HTML}
         <ul>
             <li>Real image editing: Similar to synthetic image editing, except we're using real photos/images. This task is usually more complex.</li>
         </ul>
+        {REAL_HTML}
     </p>
     <h3>Personalization</h3>
     <p>