Adding HyDE and updating the colors

app.py

@@ -24,6 +24,11 @@ env = Environment(loader=FileSystemLoader(proj_dir / 'templates'))
 template = env.get_template('template.j2')
 template_html = env.get_template('template_html.j2')
 
+# Examples
+examples = ['What is the capital of China, I think its Shanghai?',
+            '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,13 +36,18 @@ def add_text(history, text):
     return history, gr.Textbox(value="", interactive=False)
 
 
-def bot(history, system_prompt=""):
+def bot(history, hyde=False):
     top_k = 4
     query = history[-1][0]
 
     logger.warning('Retrieving documents...')
     # Retrieve documents relevant to query
     document_start = perf_counter()
+    if hyde:
+        complete_output = ""
+        generator = generate(f"Write a wikipedia article intro paragraph to answer this query: {query}", history)
+        for output_chunk in generator:
+            complete_output += output_chunk
     documents = qd_retriever.retrieve(query, top_k=top_k)
     document_time = document_start - perf_counter()
     logger.warning(f'Finished Retrieving documents in {round(document_time, 2)} seconds...')
@@ -45,7 +55,6 @@ def bot(history, system_prompt=""):
     # Create Prompt
     prompt = template.render(documents=documents, query=query)
     prompt_html = template_html.render(documents=documents, query=query)
-    logger.warning(prompt)
 
     history[-1][1] = ""
     for character in generate(prompt, history[:-1]):
@@ -54,7 +63,7 @@ def bot(history, system_prompt=""):
 
 
 with gr.Blocks() as demo:
-    with gr.Tab("Application"):
+    with gr.Tab("RAGDemo"):
         chatbot = gr.Chatbot(
                 [],
                 elem_id="chatbot",
@@ -75,7 +84,7 @@ with gr.Blocks() as demo:
             txt_btn = gr.Button(value="Submit text", scale=1)
 
         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])
 
@@ -89,9 +98,46 @@ 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)
+        # Examples
+        gr.Examples(examples, txt)
+
+    with gr.Tab("RAGDemo + 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)
+
+        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(
+                bot, 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(
+                bot, 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
+        gr.Examples(examples, hyde_txt)
 
 demo.queue()
 demo.launch(debug=True)

templates/template_html.j2

@@ -1,7 +1,65 @@
+<!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";
+        }
+
+        .dark {
+            background: #111;
+            color: white;
+        }
+
+        .doc-box {
+            padding: 10px;
+            margin-top: 10px;
+            background-color: #baecc2;
+            border-radius: 6px;
+            color: #111;
+            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;
+            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;
+            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 style="color: #FF00FF;">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="color: #FF00FF; font-weight: bold;">don't try to make up an answer.</span></span><br>
+    <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">
@@ -12,22 +70,9 @@ Below is the prompt that is given to the model. <hr>
     </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>
+    <h2>Query</h2>
+    <span class="query">{{ query }}</span>
+</div>
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
@@ -45,3 +90,5 @@ document.addEventListener("DOMContentLoaded", function() {
     });
 });
 </script>
+</body>
+</html>