Merge pull request #117 from unkwnownGriot/no-api-key-error500-fixed

Fix the servor 500 error and show error message to client

.gitignore

@@ -108,7 +108,7 @@ venv/
 ENV/
 env.bak/
 venv.bak/
-
+.flaskenv
 # Spyder project settings
 .spyderproject
 .spyproject

application/app.py

@@ -9,7 +9,7 @@ from langchain import OpenAI, VectorDBQA, HuggingFaceHub, Cohere
 from langchain.chains.question_answering import load_qa_chain
 from langchain.embeddings import OpenAIEmbeddings, HuggingFaceHubEmbeddings, CohereEmbeddings, HuggingFaceInstructEmbeddings
 from langchain.prompts import PromptTemplate
-
+from error import bad_request
 # os.environ["LANGCHAIN_HANDLER"] = "langchain"
 
 if os.getenv("LLM_NAME") is not None:
@@ -74,6 +74,7 @@ def api_answer():
     data = request.get_json()
     question = data["question"]
     history = data["history"]
+    print('-'*5)
     if not api_key_set:
         api_key = data["api_key"]
     else:
@@ -83,6 +84,8 @@ def api_answer():
     else:
         embeddings_key = os.getenv("EMBEDDINGS_KEY")
 
+    # use try and except  to check for exception
+    try:
 
         # check if the vectorstore is set
         if "active_docs" in data:
@@ -125,6 +128,7 @@ def api_answer():
 
         chain = VectorDBQA(combine_documents_chain=qa_chain, vectorstore=docsearch, k=4)
 
+        
         # fetch the answer
         result = chain({"query": question})
         print(result)
@@ -139,6 +143,9 @@ def api_answer():
         #     "sources": ["https://en.wikipedia.org/wiki/42_(number)", "https://en.wikipedia.org/wiki/42_(number)"]
         # }
         return result
+    except Exception as e:
+        print(str(e))
+        return bad_request(500,str(e))
 
 
 @app.route("/api/docs_check", methods=["POST"])

application/error.py

@@ -0,0 +1,13 @@
+from flask import jsonify
+from werkzeug.http import HTTP_STATUS_CODES
+
+def response_error(code_status,message=None):
+    payload = {'error':HTTP_STATUS_CODES.get(code_status,"something went wrong")}
+    if message:
+        payload['message'] = message
+    response = jsonify(payload)
+    response.status_code = code_status
+    return response
+
+def bad_request(status_code=400,message=''):
+    return response_error(code_status=status_code,message=message)

application/static/src/chat.js

@@ -1,9 +1,17 @@
-var el = document.getElementById('message-form');
-if (el) {
-    el.addEventListener("submit", function (event) {
-        console.log("submitting")
+var form = document.getElementById('message-form');
+var errorModal = document.getElementById('error-alert')
+document.getElementById('close').addEventListener('click',()=>{
+    errorModal.classList.toggle('hidden')
+})
+
+
+function submitForm(event){
     event.preventDefault()
     var message = document.getElementById("message-input").value;
+    console.log(message.length)
+    if(message.length === 0){
+        return
+    }
     msg_html = '<div class="bg-blue-500 text-white p-2 rounded-lg mb-2 self-end"><p class="text-sm">'
     msg_html += message
     msg_html += '</p></div>'
@@ -17,6 +25,7 @@ if (el) {
         localStorage.setItem('activeDocs', 'default')
     }
 
+    
     fetch('/api/answer', {
         method: 'POST',
         headers: {
@@ -28,28 +37,37 @@ if (el) {
             embeddings_key: localStorage.getItem('apiKey'),
             history: localStorage.getItem('chatHistory'),
             active_docs: localStorage.getItem('activeDocs')}),
-        })
-            .then(response => response.json())
+    }).then((response)=> response.json())
     .then(data => {
             console.log('Success:', data);
+            if(data.error){
+            document.getElementById('text-error').textContent = `Error : ${JSON.stringify(data.message)}`
+            errorModal.classList.toggle('hidden')
+            }
+            if(data.answer){
             msg_html = '<div class="bg-indigo-500 text-white p-2 rounded-lg mb-2 self-start"><code class="text-sm">'
             msg_html += data.answer
             msg_html += '</code></div>'
             document.getElementById("messages").innerHTML += msg_html;
             let chatWindow = document.getElementById("messages-container");
             chatWindow.scrollTop = chatWindow.scrollHeight;
+            }
             document.getElementById("button-submit").innerHTML = 'Send';
             document.getElementById("button-submit").disabled = false;
-                let chatHistory = [message, data.answer];
+            let chatHistory = [message, data.answer || ''];
             localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+
+            
+
+
         })
         .catch((error) => {
             console.error('Error:', error);
-                console.log(error);
-                document.getElementById("button-submit").innerHTML = 'Send';
-                document.getElementById("button-submit").disabled = false;
-            });
-
+            // console.log(error);
+            // document.getElementById("button-submit").innerHTML = 'Send';
+            // document.getElementById("button-submit").disabled = false;
 
         });
 }
+
+window.addEventListener('submit',submitForm)

application/templates/index.html

@@ -28,6 +28,17 @@
         {% endif %}
             </div>
     </header>
+
+  
+ <!-- Alert Info  -->
+ <div class="border flex justify-between 
+  w-auto px-4 py-3 rounded relative 
+  hidden" style="background-color: rgb(197, 51, 51);color: white;" id="error-alert" role="alert">
+  <span class="block sm:inline" id="text-error"></span>
+  <strong class="text-xl align-center alert-del" style="cursor: pointer;" id="close">&times;</strong>
+</div>
+
+
     <div class="lg:flex ml-2 mr-2">
       <div class="lg:w-3/4 min-h-screen max-h-screen">
         <div class="w-full flex flex-col h-5/6">
@@ -60,6 +71,8 @@ This will return a new DataFrame with all the columns from both tables, and only
         </div>
 
         
+
+
     </div>
         </div>
         <div class="lg:w-1/4 p-2 sm:max-lg:hidden">
@@ -78,10 +91,15 @@ This will return a new DataFrame with all the columns from both tables, and only
 
   <div class="flex items-center justify-center h-full">
     
+ 
 </div>
 
+
+
+
 {% if not api_key_set %}
-<div class="fixed z-10 overflow-y-auto top-0 w-full left-0 hidden" id="modal">
+
+<div class="fixed z-10 overflow-y-auto top-0 w-full left-0 show" id="modal">
   <div class="flex items-center justify-center min-height-100vh pt-4 px-4 pb-20 text-center sm:block sm:p-0">
     <div class="fixed inset-0 transition-opacity">
       <div class="absolute inset-0 bg-gray-900 opacity-75" />
@@ -105,6 +123,9 @@ This will return a new DataFrame with all the columns from both tables, and only
   </div>
 </div>
 {% endif %}
+
+
+
       <script>
           function docsIndex() {
                 // loads latest index from https://raw.githubusercontent.com/arc53/DocsHUB/main/combined.json