Added summarisation

app.py

@@ -230,21 +230,66 @@ context = "My name is Merve and I live in İstanbul."
 qa_model(question = question, context = context)
 ## {{'answer': 'İstanbul', 'end': 39, 'score': 0.953, 'start': 31}}
     </pre>
+</div>
 """
 
-SUMMARISATION = ""
+SUMMARISATION = f"""
+<div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
+    <h1>Summarisation (Hugging Face)</h1>
+    <p>
+        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}
+    <h1>About Summarisation</h1>
+    <h2>Use Cases</h2>
+    <h3>Research Paper Summarization 🧐</h3>
+    <p>
+        Research papers can be summarized to allow researchers to spend less time selecting which articles to read. 
+        There are several approaches you can take for a task like this:
+        <ol>
+            <li>Use an existing extractive summarization model on the Hub to do inference.</li>
+            <li>Pick an existing language model trained for academic papers. This model can then be trained in a process called fine-tuning so it can solve the summarization task.</li>
+            <li>Use a sequence-to-sequence model like T5 for abstractive text summarization.</li>
+        </ol>
+    </p>
+    <h3>Inference</h3>
+    <p>
+        You can use the 🤗 Transformers library summarization pipeline to infer with existing Summarization models. 
+        If no model name is provided the pipeline will be initialized with <a href="https://huggingface.co/sshleifer/distilbart-cnn-12-6">sshleifer/distilbart-cnn-12-6</a>.
+    </p>
+    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+from transformers import pipeline
+
+classifier = pipeline("summarization")
+classifier("Paris is the capital and most populous city of France, with an estimated population of 2,175,601 residents as of 2018, in an area of more than 105 square kilometres (41 square miles). The City of Paris is the centre and seat of government of the region and province of Île-de-France, or Paris Region, which has an estimated population of 12,174,880, or about 18 percent of the population of France as of 2017.")
+## [{{ "summary_text": " Paris is the capital and most populous city of France..." }}]
+    </pre>
+
+    <p>
+        You can use <a href="https://github.com/huggingface/huggingface.js">huggingface.js</a> to infer summarization models on Hugging Face Hub.
+    </p>
+    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+import {{ InferenceClient }} from "@huggingface/inference";
+
+const inference = new InferenceClient(HF_TOKEN);
+const inputs =
+    "Paris is the capital and most populous city of France, with an estimated population of 2,175,601 residents as of 2018, in an area of more than 105 square kilometres (41 square miles). The City of Paris is the centre and seat of government of the region and province of Île-de-France, or Paris Region, which has an estimated population of 12,174,880, or about 18 percent of the population of France as of 2017.";
+
+await inference.summarization({{
+    model: "sshleifer/distilbart-cnn-12-6",
+    inputs,
+}});
+    </pre>
+</div>    
+"""
 
 # ---- Placeholder HTML pages ----
 TEXT_GENERATION_HTML = TEXT_GENERATION
 
 QUESTION_ANSWER_HTML = QUESTION_ANSWER
 
-SUMMARISATION_HTML = """
-<div style="max-width: 800px; margin: auto;">
-    <h1>Summarisation</h1>
-    <p>Summarisation content goes here...</p>
-</div>
-"""
+SUMMARISATION_HTML = SUMMARISE
 
 IMAGE_GENERATION_HTML = """
 <div style="max-width: 800px; margin: auto;">
@@ -258,7 +303,7 @@ def switch_content(choice):
 
     pages = {
         "Text Generation": TEXT_GENERATION_HTML,
-        "Question and Answer": QUESTION_ANSWER_HTML,
+        "Question Answering": QUESTION_ANSWER_HTML,
         "Summarisation": SUMMARISATION_HTML,
         "Image Generation": IMAGE_GENERATION_HTML,
     }