added templates and index view

Dockerfile

@@ -13,4 +13,4 @@ COPY --chown=user ./requirements.txt requirements.txt
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 
 COPY --chown=user . /app
-CMD ["gunicorn", "-b", "0.0.0.0:7860" , "main:app"]
+CMD ["gunicorn", "-b", "0.0.0.0:7860" , "app:app"]

app.py

@@ -22,7 +22,7 @@ from langchain_community.retrievers import PineconeHybridSearchRetriever
 
 from langchain_groq import ChatGroq
 
-from flask import Flask, request
+from flask import Flask, request, render_template
 from flask_cors import CORS
 from flask_limiter import Limiter
 from flask_limiter.util import get_remote_address
@@ -143,7 +143,7 @@ def handle_message(data):
     chain = conversational_rag_chain.pick("answer")
     
     try:
-        for chunk in conversational_rag_chain.stream(
+        for chunk in chain.stream(
                 {"input": question},
                 config={
                     "configurable": {"session_id": "abc123"}
@@ -151,7 +151,7 @@ def handle_message(data):
             ):
                 emit('response', chunk, room=request.sid)
     except:
-        for chunk in conversational_rag_chain.stream(
+        for chunk in chain.stream(
                 {"input": question},
                 config={
                     "configurable": {"session_id": "abc123"}
@@ -159,5 +159,9 @@ def handle_message(data):
             ):
                 emit('response', chunk, room=request.sid)
 
+app.route("/")
+def index_view():
+    render_template('chat.html') 
+
 if __name__ == '__main__': 
     socketio.run(app, debug=True)

static/script.js

@@ -0,0 +1,50 @@
+const socket = io.connect('http://' + document.baseURI + ':' + location.port);
+
+const chatBox = document.getElementById('chat-box');
+const chatInput = document.getElementById('chat-input');
+const sendButton = document.getElementById('send-button');
+var converter = new showdown.Converter();
+var response="";
+
+function appendMessage(message, sender) {
+    last_message_ele = chatBox.children[chatBox.children.length - 2];
+    response += message;
+    message = converter.makeHtml(response);
+    if(last_message_ele && last_message_ele.classList.contains('bot')){
+        last_message_ele.lastChild.innerHTML  = message;
+    }else{
+        if(sender == 'bot'){
+            document.getElementById("loader").classList.add('hidden');
+        }
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('chat-message', sender);
+        messageElement.innerHTML = `<span>${message}</span>`;
+        if(sender == 'bot'){
+            chatBox.append(messageElement);
+        }else{
+            chatBox.prepend(messageElement);
+        }
+        chatBox.scrollTop = chatBox.scrollHeight;
+    }
+}
+
+sendButton.addEventListener('click', () => {
+    const message = chatInput.value.trim();
+    if (message) {
+        appendMessage(message, 'user');
+        document.getElementById("loader").classList.remove('hidden');
+        socket.emit('message', { question: message, session_id: 'abc123' });
+        chatInput.value = '';
+        response = "";
+    }
+});
+
+chatInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') {
+        sendButton.click();
+    }
+});
+
+socket.on('response', (response) => {
+    appendMessage(response, 'bot');
+});

static/styles.css

@@ -0,0 +1,129 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: scroll;
+}
+
+.chat-container {
+    max-width: 800px;
+    max-height: 1200px;
+    width: 100%;
+    height: 70vh;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.chat-box {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    border-bottom: 1px solid #ddd;
+}
+
+.chat-message {
+    margin-bottom: 15px;
+}
+
+.chat-message.user {
+    text-align: right;
+}
+
+.chat-message.user span {
+    background-color: #007bff;
+    color: #fff;
+    padding: 10px;
+    border-radius: 8px;
+    display: inline-block;
+    max-width: 70%;
+}
+
+.chat-message.bot span {
+    background-color: #e0e0e0;
+    color: #333;
+    padding: 10px;
+    border-radius: 8px;
+    display: inline-block;
+    max-width: 70%;
+}
+
+.input-container {
+    display: flex;
+    padding: 15px;
+    background-color: #f4f4f4;
+}
+
+#chat-input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+}
+
+#send-button {
+    padding: 10px 15px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-left: 10px;
+    font-size: 16px;
+}
+
+#send-button:hover {
+    background-color: #0056b3;
+}
+
+/* Dot Loader styles */
+.dot-loader {
+    background-color: #e0e0e0;
+    color: #333;
+    padding: 10px;
+    border-radius: 8px;
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.dot-loader div {
+    width: 5px;
+    height: 5px;
+    margin: 0 5px;
+    background-color: #8a8a8a;
+    border-radius: 50%;
+    animation: dot 1.2s infinite ease-in-out;
+}
+
+.dot-loader div:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.dot-loader div:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes dot {
+    0%, 80%, 100% {
+        transform: scale(0);
+    }
+    40% {
+        transform: scale(1);
+    }
+}
+
+.hidden {
+    display: none;
+}

templates/chat.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat with LLM</title>
+    <link rel="stylesheet" href="../static/styles.css">
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-box" id="chat-box">
+
+            
+            <!-- Dot Loader element -->
+            <div id="loader" class="dot-loader hidden">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+        </div>
+        <div class="input-container">
+            <input type="text" id="chat-input" placeholder="Type your message here...">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js" integrity="sha512-LhccdVNGe2QMEfI3x4DVV3ckMRe36TfydKss6mJpdHjNFiV07dFpS2xzeZedptKZrwxfICJpez09iNioiSZ3hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="../static/script.js"></script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,13 @@
+<!-- templates/home.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+</head>
+<body>
+    <h1>Welcome to the Flask Chat App</h1>
+    <p><a href="/chat">Go to Chat</a></p>
+</body>
+</html>