Added some question answer

app.py

@@ -52,10 +52,14 @@ YOUR_WORK_HTML = """
 """
 
 # ---- Hugging Face reference content ----
-HF_REFERENCE_HTML = f"""
+TEXT_GENERATION = f"""
 <div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
+    <h1>Text Generation (Hugging Face)</h1>
+    <p>
+        Generating text is the task of generating new text given another text. 
+        These models can, for example, fill in incomplete text or paraphrase.
+    </p>
     {IMAGE_HTML}
-    <h1>Text Generation (Hugging Face Reference)</h1>
     <h1>About Text Generation</h1>
     <p>
         This task covers guides on both <a href="https://huggingface.co/models?pipeline_tag=text-generation&sort=downloads">text-generation</a> and <a href="https://huggingface.co/models?other=text2text-generation&sort=downloads">text-to-text generation</a> models. 
@@ -179,9 +183,27 @@ await inference.conversational({
             Thanks to the template, you can deploy your own instance based on a large language model with only a few clicks and customize it. Learn more about it here and create your large language model instance here.
 </div>
 """
-    
+
+QUESTION_ANSWER = f"""
+<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
+    <h1>Question Answering (Hugging Face)</h1>
+    <p>
+        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}
+    <h1>About Question Answering</h1>
+    <h2>Use Cases</h2>
+    <h3>Frequently Asked Questions</h3>
+    <p>
+        You can use Question Answering (QA) models to automate the response to frequently asked questions by using a knowledge base (documents) as context. 
+        Answers to customer questions can be drawn from those documents.
+        ⚡⚡ If you’d like to save inference time, you can first use <a href="https://huggingface.co/tasks/sentence-similarity">passage ranking</a> models to see which document might contain the answer to the question and iterate over that document with the QA model instead.
+    </p>
+"""
+
 # ---- Placeholder HTML pages ----
-TEXT_GENERATION_HTML = HF_REFERENCE_HTML
+TEXT_GENERATION_HTML = TEXT_GENERATION
 
 QUESTION_ANSWER_HTML = """
 <div style="max-width: 800px; margin: auto;">