Spaces:

Deepakraj2006
/

RAG

Runtime error

App Files Files Community

Deepakraj2006 commited on Mar 2

Commit

7ffcd85

verified ·

1 Parent(s): ebc892a

Upload 5 files

Browse files

Files changed (5) hide show

index.html +69 -0
script.js +204 -0
server.py +55 -0
style.css +219 -0
worker_huggingFace.py +83 -0

index.html ADDED Viewed

	@@ -0,0 +1,69 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <link
+            rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+            integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
+            crossorigin="anonymous"
+    />
+    <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link rel="stylesheet" href="../static/style.css"/>
+    <link
+            rel="stylesheet"
+            href="{{ url_for('static', filename='style.css') }}"
+    />
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="../static/script.js"></script>
+</head>
+<body>
+    <div class="container d-flex flex-column vh-100">
+        <div class="row">
+            <div class="col-12" style="margin-top: 2rem">
+                <h1 class="text-center mb-3">Personal Data Assistant</h1>
+            </div>
+            <div class="col-12 text-center">
+                <div class="custom-control custom-switch mb-3">
+                    <input type="checkbox" class="custom-control-input" id="light-dark-mode-switch" />
+                    <label class="custom-control-label" for="light-dark-mode-switch">Toggle light/dark mode</label>
+                </div>
+            </div>
+        </div>
+        <div class="row flex-grow-1 overflow-auto">
+            <div class="col-12 col-md-8 mx-auto d-flex flex-column">
+                <div id="chat-window" class="p-3">
+                <div id="message-list"></div>
+                <div class="loading-animation my-loading">
+                    <div class="loading-dots my-loading">
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                    </div>
+                </div>
+                <div class="loading-animation">
+                    <div class="loading-dots">
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                    </div>
+                </div>
+                </div>
+                <div class="input-group mt-1">
+                    <input type="text" id="message-input" class="form-control" placeholder="Type your message here..." />
+                    <div class="input-group-append">
+                        <button id="send-button" class="btn btn-primary send">
+                            <i class='fa fa-paper-plane'></i>
+                        </button>
+                        <button id="reset-button" class="btn btn-primary reset">
+                            <i class="fa fa-refresh"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,204 @@

+let lightMode = true;
+let recorder = null;
+let recording = false;
+const responses = [];
+const botRepeatButtonIDToIndexMap = {};
+const userRepeatButtonIDToRecordingMap = {};
+const baseUrl = window.location.origin
+async function showBotLoadingAnimation() {
+  await sleep(200);
+  $(".loading-animation")[1].style.display = "inline-block";
+  document.getElementById('send-button').disabled = true;
+}
+function hideBotLoadingAnimation() {
+  $(".loading-animation")[1].style.display = "none";
+  if(!isFirstMessage){
+    document.getElementById('send-button').disabled = false;
+  }
+}
+async function showUserLoadingAnimation() {
+  await sleep(100);
+  $(".loading-animation")[0].style.display = "flex";
+}
+function hideUserLoadingAnimation() {
+  $(".loading-animation")[0].style.display = "none";
+}
+const processUserMessage = async (userMessage) => {
+  let response = await fetch(baseUrl + "/process-message", {
+    method: "POST",
+    headers: { Accept: "application/json", "Content-Type": "application/json" },
+    body: JSON.stringify({ userMessage: userMessage }),
+  });
+  response = await response.json();
+  console.log(response);
+  return response;
+};
+const cleanTextInput = (value) => {
+  return value
+    .trim() // remove starting and ending spaces
+    .replace(/[\n\t]/g, "") // remove newlines and tabs
+    .replace(/<[^>]*>/g, "") // remove HTML tags
+    .replace(/[<>&;]/g, ""); // sanitize inputs
+};
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+const scrollToBottom = () => {
+  // Scroll the chat window to the bottom
+  $("#chat-window").animate({
+    scrollTop: $("#chat-window")[0].scrollHeight,
+  });
+};
+const populateUserMessage = (userMessage, userRecording) => {
+  // Clear the input field
+  $("#message-input").val("");
+  // Append the user's message to the message list
+    $("#message-list").append(
+      `<div class='message-line my-text'><div class='message-box my-text${
+        !lightMode ? " dark" : ""
+      }'><div class='me'>${userMessage}</div></div></div>`
+    );
+  scrollToBottom();
+};
+let isFirstMessage = true;
+const populateBotResponse = async (userMessage) => {
+  await showBotLoadingAnimation();
+  let response;
+  let uploadButtonHtml = '';
+  if (isFirstMessage) {
+    response = { botResponse: "Hello there! I'm your friendly data assistant, ready to answer any questions regarding your data. Could you please upload a PDF file for me to analyze?"};
+    uploadButtonHtml = `
+        <input type="file" id="file-upload" accept=".pdf" hidden>
+        <button id="upload-button" class="btn btn-primary btn-sm">Upload File</button>
+    `;
+  } else {
+    response = await processUserMessage(userMessage);
+  }
+  renderBotResponse(response, uploadButtonHtml)
+  // Event listener for file upload
+  if (isFirstMessage) {
+    $("#upload-button").on("click", function () {
+      $("#file-upload").click();
+    });
+    $("#file-upload").on("change", async function () {
+      const file = this.files[0];
+      await showBotLoadingAnimation();
+      // Create a new FormData instance
+      const formData = new FormData();
+      // Append the file to the FormData instance
+      formData.append('file', file);
+      // Now send this data to /process-document endpoint
+      let response = await fetch(baseUrl + "/process-document", {
+        method: "POST",
+        headers: { Accept: "application/json" }, // "Content-Type" should not be explicitly set here, the browser will automatically set it to "multipart/form-data"
+        body: formData, // send the FormData instance as the body
+      });
+      if (response.status !== 400) {
+           document.querySelector('#upload-button').disabled = true;
+      }
+      response = await response.json();
+      console.log('/process-document', response)
+      renderBotResponse(response, '')
+    });
+    isFirstMessage = false; // after the first message, set this to false
+  }
+};
+const renderBotResponse = (response, uploadButtonHtml) => {
+  responses.push(response);
+  hideBotLoadingAnimation();
+  $("#message-list").append(
+    `<div class='message-line'><div class='message-box${!lightMode ? " dark" : ""}'>${response.botResponse.trim()}<br>${uploadButtonHtml}</div></div>`
+  );
+  scrollToBottom();
+}
+populateBotResponse()
+$(document).ready(function () {
+  //start the chat with send button disabled
+  document.getElementById('send-button').disabled = true;
+  // Listen for the "Enter" key being pressed in the input field
+  $("#message-input").keyup(function (event) {
+    let inputVal = cleanTextInput($("#message-input").val());
+    if (event.keyCode === 13 && inputVal != "") {
+      const message = inputVal;
+      populateUserMessage(message, null);
+      populateBotResponse(message);
+    }
+    inputVal = $("#message-input").val();
+  });
+  // When the user clicks the "Send" button
+  $("#send-button").click(async function () {
+  // Get the message the user typed in
+  const message = cleanTextInput($("#message-input").val());
+  populateUserMessage(message, null);
+  populateBotResponse(message);
+  });
+  //reset chat
+  // When the user clicks the "Reset" button
+    $("#reset-button").click(async function () {
+      // Clear the message list
+      $("#message-list").empty();
+      // Reset the responses array
+      responses.length = 0;
+      // Reset isFirstMessage flag
+      isFirstMessage = true;
+      document.querySelector('#upload-button').disabled = false;
+      // Start over
+      populateBotResponse();
+    });
+  // handle the event of switching light-dark mode
+  $("#light-dark-mode-switch").change(function () {
+    $("body").toggleClass("dark-mode");
+    $(".message-box").toggleClass("dark");
+    $(".loading-dots").toggleClass("dark");
+    $(".dot").toggleClass("dark-dot");
+    lightMode = !lightMode;
+  });
+});

server.py ADDED Viewed

	@@ -0,0 +1,55 @@

+import logging
+import os
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+import worker  # Import the worker module
+# Initialize Flask app and CORS
+app = Flask(__name__)
+cors = CORS(app, resources={r"/*": {"origins": "*"}})
+app.logger.setLevel(logging.ERROR)
+# Define the route for the index page
+@app.route('/', methods=['GET'])
+def index():
+    return render_template('index.html')  # Render the index.html template
+# Define the route for processing messages
+@app.route('/process-message', methods=['POST'])
+def process_message_route():
+    user_message = request.json['userMessage']  # Extract the user's message from the request
+    print('user_message', user_message)
+    bot_response = worker.process_prompt(user_message)  # Process the user's message using the worker module
+    # Return the bot's response as JSON
+    return jsonify({
+        "botResponse": bot_response
+    }), 200
+# Define the route for processing documents
+@app.route('/process-document', methods=['POST'])
+def process_document_route():
+    # Check if a file was uploaded
+    if 'file' not in request.files:
+        return jsonify({
+            "botResponse": "It seems like the file was not uploaded correctly, can you try "
+                           "again. If the problem persists, try using a different file"
+        }), 400
+    file = request.files['file']  # Extract the uploaded file from the request
+    file_path = file.filename  # Define the path where the file will be saved
+    file.save(file_path)  # Save the file
+    worker.process_document(file_path)  # Process the document using the worker module
+    # Return a success message as JSON
+    return jsonify({
+        "botResponse": "Thank you for providing your PDF document. I have analyzed it, so now you can ask me any "
+                       "questions regarding it!"
+    }), 200
+# Run the Flask app
+if __name__ == "__main__":
+    app.run(debug=True, port=8000, host='0.0.0.0')

style.css ADDED Viewed

	@@ -0,0 +1,219 @@

+/* Light mode */
+body {
+  background-color: #d6ddec;
+  color: #121717;
+}
+/* Dark mode */
+.dark-mode {
+  background-color: #121717;
+  color: #c9c9c9;
+}
+#chat-window {
+  position: relative;
+  height: 70vh;
+  overflow: auto;
+}
+.message-line {
+  padding-bottom: 8px;
+  width: 70%;
+  word-break: break-word;
+  display: flex;
+}
+.message-box {
+  padding: 12px;
+  border-radius: 15px;
+  display: inline-block;
+  position: relative;
+  background-color: #efefef;
+  min-width: 26px;
+  border-top-left-radius: 0;
+  word-wrap: break-word;
+  flex-grow: 0;
+}
+.message-line.my-text {
+  flex-direction: row-reverse;
+  width: 100%;
+}
+.message-box.my-text {
+  transform: rotateY(180deg);
+  background-color: #e7f9d8;
+  margin-left:150px;
+}
+.me {
+  transform: scale(-1, 1);
+}
+.message-box.my-text.dark {
+  background-color: #0f4c9e;
+}
+.message-box.dark {
+  background-color: #263443;
+}
+/* Input container */
+#message-input {
+  bottom: 0;
+  width: 100%;
+  flex-grow: 1;
+  font-size: 16px;
+  box-sizing: border-box;
+  border: none;
+  padding: 10px 0 10px 12px;
+  border-radius: 40px 0 0 40px;
+  background-color: transparent;
+  height: auto;
+}
+#send-button {
+  border: none;
+  font: inherit;
+  background-color: transparent;
+  margin: 0;
+  appearance: none;
+  padding: 10px 12px;
+  cursor: pointer;
+  font-size: 24px;
+  display: flex;
+}
+#reset-button {
+  border: none;
+  font: inherit;
+  background-color: transparent;
+  margin: 0;
+  appearance: none;
+  padding: 10px 12px;
+  cursor: pointer;
+  font-size: 24px;
+  display: flex;
+}
+#repeat-button {
+  border: none;
+  background-color: transparent;
+  margin: 0 0 2px 0;
+  padding: 0 10px;
+  font-size: 24px;
+}
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  width: 100%;
+  border-radius: 40px;
+  border: 1px solid #2d2d2d;
+}
+#upload-button {
+  color: white;
+  background-color: #007bff;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-top: 12px;
+}
+#upload-button:hover {
+  background-color: #0056b3;
+}
+.send i {
+  display: block;
+  width: 25px;
+  color: #125ee5;
+}
+.reset i {
+  display: block;
+  width: 25px;
+  color: #125ee5;
+}
+.loading-animation {
+  padding-bottom: 8px;
+  word-break: break-word;
+  display: none;
+  width: 70%;
+}
+.loading-animation.my-loading {
+  flex-direction: row-reverse;
+  width: 100%;
+}
+.loading-dots {
+  padding: 12px;
+  border-radius: 15px;
+  position: relative;
+  background-color: #efefef;
+  min-width: 26px;
+  border-top-left-radius: 0;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  width: fit-content;
+}
+.loading-dots.my-loading {
+  transform: rotateY(180deg);
+  background-color: #e7f9d8;
+  float: right;
+}
+.dot {
+  width: 7px;
+  height: 7px;
+  margin: 0 2px;
+  border-radius: 50%;
+  animation: bounce 1.5s ease-in-out infinite;
+  background: #5a5a5a;
+}
+.loading-dots.my-loading.dark {
+  background-color: #0e4d9e;
+}
+.dark {
+  background-color: #263443;
+}
+.dark-dot {
+  background: #c9c9c9;
+}
+.dot:nth-of-type(1) {
+  margin-left: 5px;
+  animation-delay: 0s;
+}
+.dot:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.dot:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+@keyframes bounce {
+  0%,
+  40% {
+    transform: translateY(0);
+  }
+  20% {
+    transform: translateY(-10px);
+  }
+}

worker_huggingFace.py ADDED Viewed

	@@ -0,0 +1,83 @@

+import os
+import torch
+from langchain import PromptTemplate
+from langchain.chains import RetrievalQA
+from langchain.embeddings import HuggingFaceInstructEmbeddings
+from langchain.document_loaders import PyPDFLoader
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain.vectorstores import Chroma
+from langchain.llms import HuggingFaceHub
+# Check for GPU availability and set the appropriate device for computation.
+DEVICE = "cuda:0" if torch.cuda.is_available() else "cpu"
+# Global variables
+conversation_retrieval_chain = None
+chat_history = []
+llm_hub = None
+embeddings = None
+# Function to initialize the language model and its embeddings
+def init_llm():
+    global llm_hub, embeddings
+    # Set up the environment variable for HuggingFace and initialize the desired model.
+    os.environ["HUGGINGFACEHUB_API_TOKEN"] = "YOUR API KEY"
+    # repo name for the model
+    model_id = "tiiuae/falcon-7b-instruct"
+    # load the model into the HuggingFaceHub
+    llm_hub = HuggingFaceHub(repo_id=model_id, model_kwargs={"temperature": 0.1, "max_new_tokens": 600, "max_length": 600})
+    #Initialize embeddings using a pre-trained model to represent the text data.
+    embeddings = HuggingFaceInstructEmbeddings(
+        model_name="sentence-transformers/all-MiniLM-L6-v2", model_kwargs={"device": DEVICE}
+    )
+# Function to process a PDF document
+def process_document(document_path):
+    global conversation_retrieval_chain
+    # Load the document
+    loader = PyPDFLoader(document_path)
+    documents = loader.load()
+    # Split the document into chunks
+    text_splitter = RecursiveCharacterTextSplitter(chunk_size=1024, chunk_overlap=64)
+    texts = text_splitter.split_documents(documents)
+    # Create an embeddings database using Chroma from the split text chunks.
+    db = Chroma.from_documents(texts, embedding=embeddings)
+    # --> Build the QA chain, which utilizes the LLM and retriever for answering questions.
+    # By default, the vectorstore retriever uses similarity search.
+    # If the underlying vectorstore support maximum marginal relevance search, you can specify that as the search type (search_type="mmr").
+    # You can also specify search kwargs like k to use when doing retrieval. k represent how many search results send to llm
+    conversation_retrieval_chain = RetrievalQA.from_chain_type(
+        llm=llm_hub,
+        chain_type="stuff",
+        retriever=db.as_retriever(search_type="mmr", search_kwargs={'k': 6, 'lambda_mult': 0.25}),
+        return_source_documents=False,
+        input_key = "question"
+     #   chain_type_kwargs={"prompt": prompt} # if you are using prompt template, you need to uncomment this part
+    )
+# Function to process a user prompt
+def process_prompt(prompt):
+    global conversation_retrieval_chain
+    global chat_history
+    # Query the model
+    output = conversation_retrieval_chain({"question": prompt, "chat_history": chat_history})
+    answer = output["result"]
+    # Update the chat history
+    chat_history.append((prompt, answer))
+    # Return the model's response
+    return answer
+# Initialize the language model
+init_llm()