files added

.env

@@ -0,0 +1 @@
+OPENAI_API_KEY='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'

README.md

@@ -1 +1,7 @@
-# Chatbot_With_GUI
+# Chatbot_With_GUI
+
+Simple chatbot with a web interface built to assist financial analysts with up-to-date information on the financial market.
+
+The chatbot leverages openai LLM for user query comprehension as well as RAG inorder to answer queries on current status of the dynamic financial market.
+
+Tools Used: LangChain framework for user query synthesis and reply generation, Flask for web gui and web scrapping for up-to-date information retrieval.

app.py

@@ -1,4 +1,6 @@
 from flask import Flask, render_template, request, jsonify
+from backend import response
+
 
 app = Flask(__name__)
 
@@ -10,11 +12,9 @@ def index():
 @app.route('/chat', methods=['GET', 'POST'])
 def chat():
     message = request.form['msg']
-    return get_response(message)
+    return response(message)
 
-def get_response(text):
-    return
 
 
 if __name__ == '__main__':
-    app.run()
+    app.run() 

backend.py

@@ -0,0 +1,68 @@
+import os
+import bs4
+from langchain import hub
+from dotenv import load_dotenv
+from langchain_community.vectorstores import Chroma
+from langchain_openai import ChatOpenAI, OpenAIEmbeddings
+from langchain_core.messages import HumanMessage, SystemMessage
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain_community.document_loaders import WebBaseLoader
+from langchain_core.output_parsers import StrOutputParser
+from langchain_core.runnables import RunnablePassthrough
+from langchain_core.prompts import PromptTemplate
+from langchain.schema import (
+    SystemMessage,
+    HumanMessage,
+    AIMessage
+)
+
+def response(user_query):
+
+    # Load environment and get your openAI api key
+    load_dotenv()
+    openai_api_key = os.getenv("OPENAI_API_KEY")
+
+
+    # Select a webpage to load the context information from
+    loader = WebBaseLoader(
+        web_paths=("https://www.linkedin.com/pulse/insights-post-pandemic-economy-our-2024-global-market-rob-sharps-jcnmc/",),
+    )
+    docs = loader.load()
+
+
+    # Restructure to process the info in chunks
+    text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=200)
+    splits = text_splitter.split_documents(docs)
+    vectorstore = Chroma.from_documents(documents=splits, embedding=OpenAIEmbeddings())
+
+
+    # Retrieve info from chosen source
+    retriever = vectorstore.as_retriever(search_type="similarity")
+    prompt = hub.pull("rlm/rag-prompt")
+    llm = ChatOpenAI(model_name="gpt-3.5-turbo", temperature=0, openai_api_key=openai_api_key)
+
+    def format_docs(docs):
+        return "\n\n".join(doc.page_content for doc in docs)
+
+
+
+    template = """Use the following pieces of context to answer the question at the end.
+    Say that you don't know when asked a question you don't know, donot make up an answer. Be precise and concise in your answer.
+
+    {context}
+
+    Question: {question}
+
+    Helpful Answer:"""
+
+    # Add the context to your user query
+    custom_rag_prompt = PromptTemplate.from_template(template)
+
+    rag_chain = (
+        {"context": retriever | format_docs, "question": RunnablePassthrough()}
+        | custom_rag_prompt
+        | llm
+        | StrOutputParser()
+    )
+
+    return rag_chain.invoke(user_query) 

static/style.css

@@ -148,7 +148,7 @@ border-radius: 0 0 15px 15px !important;
 	margin-bottom: auto;
 	margin-left: 10px;
 	border-radius: 25px;
-	background-color: rgb(82, 172, 255);
+	background-color: white;
 	padding: 10px;
 	position: relative;
 }
@@ -218,4 +218,34 @@ border-radius: 0 0 15px 15px !important;
 	.contacts_card{
 	margin-bottom: 15px !important;
 }
-}
+}
+
+
+.loader {
+	border: 4px solid #f3f3f3;
+	border-radius: 50%;
+	border-top: 8px solid black;
+	width: 30px;
+	height: 30px;
+	-webkit-animation: spin 2s linear infinite; /* Safari */
+	animation: spin 2s linear infinite;
+	display: none;
+  }
+
+  .loading{
+	margin: auto;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+  }
+
+  /* Safari */
+  @-webkit-keyframes spin {
+	0% { -webkit-transform: rotate(0deg); }
+	100% { -webkit-transform: rotate(360deg); }
+  }
+
+  @keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+  } 

templates/index.html

@@ -32,13 +32,13 @@
 						</div>
 						<div id="messageFormeight" class="card-body msg_card_body">
 
-
 						</div>
+						<div class="loading"><div id="loading" class="loader" ></div></div>
 						<div class="card-footer">
 							<form id="messageArea" class="input-group">
                                 <input type="text" id="text" name="msg" placeholder="Type your message..." autocomplete="off" class="form-control type_msg" required/>
 								<div class="input-group-append">
-									<button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button>
+									<button type="submit" id="send" class="input-group-text send_btn" onclick="loading()"><i class="fas fa-location-arrow"></i></button>
 								</div>
 							</form>
 						</div>
@@ -66,15 +66,22 @@
 							msg: rawText,	
 						},
 						type: "POST",
-						url: "/get",
+						url: "/chat",
 					}).done(function(data) {
 						var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
 						$("#messageFormeight").append($.parseHTML(botHtml));
-					});
+						hideLoading();
+						})
 					event.preventDefault();
 				});
 			});
+
+			function loading(){
+				$("#loading").show();
+				};
+
+			function hideLoading() {$("#loading").hide()}
 		</script>
 
     </body>
-</html>
+</html>