Adding beautiful formatting

app.py

@@ -1,3 +1,4 @@
+from functools import partial
 import logging
 from pathlib import Path
 from time import perf_counter
@@ -24,6 +25,11 @@ template_html = env.get_template('template_html.j2')
 # Initialize tokenizer
 tokenizer = AutoTokenizer.from_pretrained('derek-thomas/jais-13b-chat-hf')
 
+# Examples
+examples = ['What is the capital of China?',
+            'Why is the sky blue?',
+            'Who won the mens world cup in 2014?', ]
+
 
 def add_text(history, text):
     history = [] if history is None else history
@@ -31,15 +37,24 @@ def add_text(history, text):
     return history, gr.Textbox(value="", interactive=False)
 
 
-def bot(history, system_prompt=""):
+def bot(history, hyde=False):
     top_k = 5
     query = history[-1][0]
 
     logger.warning('Retrieving documents...')
     # Retrieve documents relevant to query
     document_start = perf_counter()
-    documents = retriever(query, top_k=top_k)
-    document_time = document_start - perf_counter()
+    if hyde:
+        hyde_document = ""
+        generator = generate(f"Write a wikipedia article intro paragraph to answer this query: {query}")
+        for output_chunk in generator:
+            hyde_document = output_chunk
+
+        logger.warning(hyde_document)
+        documents = retriever(hyde_document, top_k=top_k)
+    else:
+        documents = retriever(query, top_k=top_k)
+    document_time = perf_counter() - document_start
     logger.warning(f'Finished Retrieving documents in {round(document_time, 2)} seconds...')
 
     
@@ -67,8 +82,8 @@ def bot(history, system_prompt=""):
 
 
 with gr.Blocks() as demo:
-    with gr.Tab("Application"):
-        output = gr.Textbox(check_endpoint_status, label="Endpoint Status (send chat to wake up)", every=1)
+    endpoint_status = gr.Textbox(check_endpoint_status, label="Endpoint Status (send chat to wake up)", every=1)
+    with gr.Tab("Arabic-RAG"):
         chatbot = gr.Chatbot(
                 [],
                 elem_id="chatbot",
@@ -88,8 +103,9 @@ with gr.Blocks() as demo:
                     )
             txt_btn = gr.Button(value="Submit text", scale=1)
 
+        gr.Examples(examples, txt)
         prompt_html = gr.HTML()
-        # Turn off interactivity while generating if you hit enter
+        # Turn off interactivity while generating if you click
         txt_msg = txt_btn.click(add_text, [chatbot, txt], [chatbot, txt], queue=False).then(
                 bot, chatbot, [chatbot, prompt_html])
 
@@ -103,9 +119,44 @@ with gr.Blocks() as demo:
         # Turn it back on
         txt_msg.then(lambda: gr.Textbox(interactive=True), None, [txt], queue=False)
 
-    gr.Examples(['What is the capital of China, I think its Shanghai?',
-                 'Why is the sky blue?',
-                 'Who won the mens world cup in 2014?',], txt)
+
+    with gr.Tab("Arabic-RAG + HyDE"):
+        hyde_chatbot = gr.Chatbot(
+                [],
+                elem_id="chatbot",
+                avatar_images=('https://aui.atlassian.com/aui/8.8/docs/images/avatar-person.svg',
+                               'https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg'),
+                bubble_full_width=False,
+                show_copy_button=True,
+                show_share_button=True,
+                )
+
+        with gr.Row():
+            hyde_txt = gr.Textbox(
+                    scale=3,
+                    show_label=False,
+                    placeholder="Enter text and press enter",
+                    container=False,
+                    )
+            hyde_txt_btn = gr.Button(value="Submit text", scale=1)
+
+        gr.Examples(examples, hyde_txt)
+        hyde_prompt_html = gr.HTML()
+        # Turn off interactivity while generating if you click
+        hyde_txt_msg = hyde_txt_btn.click(add_text, [hyde_chatbot, hyde_txt], [hyde_chatbot, hyde_txt], queue=False).then(
+                partial(bot, hyde=True), [hyde_chatbot], [hyde_chatbot, hyde_prompt_html])
+
+        # Turn it back on
+        hyde_txt_msg.then(lambda: gr.Textbox(interactive=True), None, [hyde_txt], queue=False)
+
+        # Turn off interactivity while generating if you hit enter
+        hyde_txt_msg = hyde_txt.submit(add_text, [hyde_chatbot, hyde_txt], [hyde_chatbot, hyde_txt], queue=False).then(
+                partial(bot, hyde=True), [hyde_chatbot], [hyde_chatbot, hyde_prompt_html])
+
+        # Turn it back on
+        hyde_txt_msg.then(lambda: gr.Textbox(interactive=True), None, [hyde_txt], queue=False)
+
+        # Examples
 
 demo.queue()
 demo.launch(debug=True)

requirements.txt

@@ -1,6 +1,5 @@
 wikiextractor==3.0.6
 sentence-transformers>2.2.0
-qdrant-haystack==1.0.10
 ipywidgets==8.1.1
 tqdm==4.66.1
 aiohttp==3.8.6

templates/template_html.j2

@@ -1,47 +1,111 @@
-<h2>Prompt</h2>
-Below is the prompt that is given to the model. <hr>
-<h2>Instruction:</h2>
-<span style="color: #FF00FF;">Use the following unique documents in the Context section to answer the Query at the end. If you don't know the answer, just say that you don't know, <span style="color: #FF00FF; font-weight: bold;">don't try to make up an answer.</span></span><br>
-<h2>Context</h2>
-{% for doc in documents %}
-    <details class="doc-box">
-        <summary>
-            <b>Doc {{ loop.index }}:</b> <span class="doc-short">{{ doc.content[:100] }}...</span>
-        </summary>
-        <div class="doc-full">{{ doc.content }}</div>
-    </details>
-{% endfor %}
-
-<h2>Query</h2> <span style="color: #801616;">{{ query }}</span>
-
-<style>
-    .doc-box {
-        padding: 10px;
-        margin-top: 10px;
-        background-color: #48a3ff;
-        border: none;
-    }
-    .doc-short, .doc-full {
-        color: white;
-    }
-    summary::-webkit-details-marker {
-        color: white;
-    }
-</style>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Information Page</title>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&amp;display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&amp;display=swap">
+    <style>
+        * {
+            font-family: "Source Sans Pro";
+        }
+
+        .instructions > * {
+            color: #111 !important;
+        }
+
+        details.doc-box * {
+            color: #111 !important;
+        }
+
+        details.doc-box a {
+            color: #0000EE !important; /* This is a common blue color for links */
+            text-decoration: underline; /* This underlines the link */
+        }
+
+        .dark {
+            background: #111;
+            color: white;
+        }
+
+        .doc-box {
+            padding: 10px;
+            margin-top: 10px;
+            background-color: #baecc2;
+            border-radius: 6px;
+            color: #111 !important;
+            max-width: 700px;
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
+        }
+
+        .doc-full {
+            margin: 10px 14px;
+            line-height: 1.6rem;
+        }
+
+        .instructions {
+            color: #111 !important;
+            background: #b7bdfd;
+            display: block;
+            border-radius: 6px;
+            padding: 6px 10px;
+            line-height: 1.6rem;
+            max-width: 700px;
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
+        }
+
+        .query {
+            color: #111 !important;
+            background: #ffbcbc;
+            display: block;
+            border-radius: 6px;
+            padding: 6px 10px;
+            line-height: 1.6rem;
+            max-width: 700px;
+            box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
+        }
+    </style>
+</head>
+<body>
+<div class="prose svelte-1ybaih5" id="component-6">
+    <h2>Prompt</h2>
+    Below is the prompt that is given to the model.
+    <hr>
+    <h2>Instructions</h2>
+    <span class="instructions">Use the following pieces of context to answer the question at the end.<br>If you don't know the answer, just say that you don't know, <span
+            style="font-weight: bold;">don't try to make up an answer.</span></span><br>
+    <h2>Context</h2>
+    {% for doc in documents %}
+        <details class="doc-box" dir="rtl">
+            <summary>
+                <b>وثيقة_{{ loop.index }} | <a href="{{ doc.meta.url }}">{{ doc.meta.title }}</a>:</b> <span
+                    class="doc-short">{{ doc.content[:50] }}...</span>
+            </summary>
+            <div class="doc-full"><a href="{{ doc.meta.url }}">{{ doc.meta.title }}</a>: {{ doc.content }}</div>
+        </details>
+    {% endfor %}
+
+    <h2>Query</h2>
+    <span class="query">{{ query }}</span>
+</div>
 
 <script>
-document.addEventListener("DOMContentLoaded", function() {
-    const detailsElements = document.querySelectorAll('.doc-box');
-
-    detailsElements.forEach(detail => {
-        detail.addEventListener('toggle', function() {
-            const docShort = this.querySelector('.doc-short');
-            if (this.open) {
-                docShort.style.display = 'none';
-            } else {
-                docShort.style.display = 'inline';
-            }
+    document.addEventListener("DOMContentLoaded", function () {
+        const detailsElements = document.querySelectorAll('.doc-box');
+
+        detailsElements.forEach(detail => {
+            detail.addEventListener('toggle', function () {
+                const docShort = this.querySelector('.doc-short');
+                if (this.open) {
+                    docShort.style.display = 'none';
+                } else {
+                    docShort.style.display = 'inline';
+                }
+            });
         });
     });
-});
 </script>
+</body>
+</html>