remove RAG components from Chatbot component

CambioML · Sep 20, 2023 · a147d2b · a147d2b
1 parent 76dde5c
commit a147d2b
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 183 deletions.
diff --git a/example/chatbot/demo_launch_app_cpu_openai.py b/example/chatbot/demo_launch_app_cpu_openai.py
@@ -2,12 +2,12 @@
 Demo for launching a chatbot UI (with database) from an OpenAI model.
 
 - Prerequisites:
-    To run this jupyter notebook, you need a `pykoi` environment with the `rag` option.  
-    You can follow [the installation guide](https://github.com/CambioML/pykoi/tree/install#option-1-rag-cpu) 
-    to set up the environment. 
+    To run this jupyter notebook, you need a `pykoi` environment with the `rag` option.
+    You can follow [the installation guide](https://github.com/CambioML/pykoi/tree/install#option-1-rag-cpu)
+    to set up the environment.
 - Run the demo:
     1. Enter your OpenAI API key in the `api_key` below.
-    2. On terminal and `~/pykoi` directory, run 
+    2. On terminal and `~/pykoi` directory, run
         ```
         python -m example.chatbot.demo_launch_app_cpu_openai
         ```
@@ -23,7 +23,7 @@
 # Creating an OpenAI model (requires an OpenAI API key) #
 ##########################################################
 # enter openai api key here
-api_key = ""
+api_key = "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"
 
 # Creating an OpenAI model
 model = ModelFactory.create_model(

diff --git a/pykoi/application.py b/pykoi/application.py
@@ -358,14 +358,7 @@ async def retrieve_qa_table(
         ):
             try:
                 rows = component["component"].database.retrieve_all_question_answers()
-                modified_rows = []
-                for row in rows:
-                    row_list = list(row)  # Convert the tuple to a list
-                    row_list[5] = row_list[5].split(QA_LIST_SEPARATOR)
-                    row_list[6] = row_list[6].split(QA_LIST_SEPARATOR)
-                    row_list[7] = row_list[7].split(QA_LIST_SEPARATOR)
-                    modified_rows.append(row_list)  # Append the modified list to the new list
-                return {"rows": modified_rows, "log": "Table retrieved", "status": "200"}
+                return {"rows": rows, "log": "Table retrieved", "status": "200"}
             except Exception as ex:
                 return {"log": f"Table retrieval failed: {ex}", "status": "500"}
 

diff --git a/pykoi/frontend/dist/assets/index-6e8a727f.css b/pykoi/frontend/dist/assets/index-6e8a727f.css
diff --git a/pykoi/frontend/dist/assets/index-7e1d34ae.js b/pykoi/frontend/dist/assets/index-7e1d34ae.js
diff --git a/pykoi/frontend/dist/assets/index-902bbaf3.css b/pykoi/frontend/dist/assets/index-902bbaf3.css
diff --git a/pykoi/frontend/dist/assets/index-e352a05f.js b/pykoi/frontend/dist/assets/index-e352a05f.js
diff --git a/pykoi/frontend/dist/index.html b/pykoi/frontend/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Svelte</title>
-    <script type="module" crossorigin src="/assets/index-7e1d34ae.js"></script>
-    <link rel="stylesheet" href="/assets/index-902bbaf3.css">
+    <script type="module" crossorigin src="/assets/index-e352a05f.js"></script>
+    <link rel="stylesheet" href="/assets/index-6e8a727f.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte b/pykoi/frontend/src/lib/Chatbots/Chatbot.svelte
@@ -4,7 +4,6 @@
   import { select } from "d3-selection";
   import { slide } from "svelte/transition";
   import { writable } from "svelte/store";
-  import Dropdown from "./Components/Dropdown.svelte";
   import { tooltip } from "../../utils.js";
 
   export let feedback = false;
@@ -15,27 +14,11 @@
   let mymessage = "";
   let messageplaceholder = "";
   let chatLoading = false;
-  let show_content = [];
 
   onMount(() => {
     getDataFromDB();
-    loadRetrievalFiles();
   });
 
-  async function loadRetrievalFiles() {
-    // /retrieval/file/get
-    const response = await fetch("/retrieval/file/get");
-    const data = await response.json();
-    console.log("data", data["files"]);
-    const fileData = data["files"];
-    const fileNames = fileData.map((row, index) => ({
-      id: String(index),
-      name: row.name,
-    }));
-    console.log("files", fileNames);
-    $uploadedFiles = [...fileNames];
-  }
-
   async function getDataFromDB() {
     const response = await fetch("/chat/qa_table/retrieve");
     const data = await response.json();
@@ -45,9 +28,7 @@
       question: row[1],
       answer: row[2],
       vote_status: row[3],
-      rag_sources: ["doc1.pdf", "doc2.pdf", "doc3.pdf"],
     }));
-    show_content = new Array(formattedRows.length).fill(false);
     $chatLog = [...formattedRows];
   }
 
@@ -60,10 +41,7 @@
       id: $chatLog.length + 1,
       question: mymessage,
       answer: "Loading...",
-      rag_sources: ["doc1.pdf", "doc2.pdf", "doc3.pdf"],
       vote_status: "na",
-      source: "Loading...",
-      source_content: "Loading...",
     };
     $chatLog = [...$chatLog, currentEntry];
 
@@ -91,10 +69,7 @@
       const data = await response.json();
       console.log("response data", data);
       currentEntry["answer"] = data["answer"];
-      currentEntry["source"] = data["source"];
-      currentEntry["source_content"] = data["source_content"];
       // $chatLog[$chatLog.length - 1] = currentEntry;
-      show_content.push(false);
       chatLog.update((state) => {
         state[state.length - 1] = currentEntry;
         return state;
@@ -160,12 +135,6 @@
   let chatLetters = [...Array(10).keys()].map((i) =>
     String.fromCharCode(65 + i)
   );
-  function getRAGSources(message) {
-    if (message.rag_sources.length === 0) return "All";
-    const ragSources = message.rag_sources;
-    const ragSourcesString = ragSources.join(", ");
-    return ragSourcesString;
-  }
 </script>
 
 <div class="ranked-feedback-container">
@@ -195,11 +164,6 @@
                 <div class="question">
                   <h5 class="bold">Question:</h5>
                   <p>{message.question}</p>
-                  <div class="rag-sources">
-                    <p class="bold" use:tooltip={getRAGSources(message)}>
-                      ℹ️ RAG Sources
-                    </p>
-                  </div>
                 </div>
                 <div class="answers">
                   <div class="answer">
@@ -218,26 +182,6 @@
                       </div>
                     {/if}
                   </div>
-                  <div class="source">
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <div
-                      class="source_tab"
-                      on:click={() =>
-                        (show_content[index] = !show_content[index])}
-                    >
-                      <p class="bold">📖 Source: {message.source}</p>
-                      {#if show_content[index]}
-                        <p>&#8963;</p>
-                      {:else}
-                        <p>&#8964;</p>
-                      {/if}
-                    </div>
-                    {#if show_content[index]}
-                      <div class="source_content" transition:slide>
-                        <p class="bold">{message.source_content}</p>
-                      </div>
-                    {/if}
-                  </div>
                 </div>
               </div>
             </div>
@@ -247,21 +191,17 @@
     </section>
 
     <div class="chat-input-holder">
-      <div class="chat-and-question">
-        <Dropdown documents={$uploadedFiles} />
-
-        <form on:submit={askModel} class="chat-input-form">
-          <input
-            bind:value={messageplaceholder}
-            class="chat-input-textarea"
-            placeholder="Type Question Here"
-          />
-          <button
-            class="btnyousend {messageplaceholder === '' ? '' : 'active'}"
-            type="submit">{chatLoading ? dots : "Send"}</button
-          >
-        </form>
-      </div>
+      <form on:submit={askModel} class="chat-input-form">
+        <input
+          bind:value={messageplaceholder}
+          class="chat-input-textarea"
+          placeholder="Type Question Here"
+        />
+        <button
+          class="btnyousend {messageplaceholder === '' ? '' : 'active'}"
+          type="submit">{chatLoading ? dots : "Send"}</button
+        >
+      </form>
       <p class="message">Note - may produce inaccurate information.</p>
     </div>
   </div>
@@ -463,28 +403,6 @@
     border: 1px solid var(--black);
   }
 
-  .message-content .source {
-    text-align: left;
-    border: 1px solid var(--grey);
-    padding: 5px;
-    background-color: var(--lightGrey);
-    color: var(--darkGrey);
-    box-sizing: border-box;
-  }
-
-  .source_tab {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .source_content {
-    background-color: white;
-    border: 1pt solid var(--grey);
-    padding: 5px;
-  }
-
   .message-content .answers {
     display: grid;
     grid-template-columns: 100%;
@@ -493,10 +411,6 @@
     margin: auto;
   }
 
-  .rag-sources {
-    display: flex;
-  }
-
   :global(.tooltip) {
     white-space: nowrap;
     position: relative;