check why im not getting a reply from my chatbot app
##app.py
# Create flask app.py
from flask import Flask, render_template, request, jsonify
import random
import json
import pickle
import numpy as np
import nltk
nltk.download('punkt')
nltk.download('wordnet')
from nltk.tokenize import word_tokenize
from nltk.stem import WordNetLemmatizer
import tensorflow as tf

app = Flask(__name__, static_folder='static')

# Load the model, words, classes, and intents
model = tf.keras.models.load_model("E:\\Projects\\chatbot\\models\\new_chat_model.h5")
data = pickle.load(open("E:\\Projects\\chatbot\\models\\chat_data.pkl", "rb"))
words = data["words"]
classes = data["classes"]
intents = json.load(open("E:\Projects\chatbot\data\data.json",'r'))["intents"]

def bag_of_words(sentence):
    bag = [0] * len(words)
    lemmatizer = WordNetLemmatizer()
    sentence_words = word_tokenize(sentence)
    sentence_words = [lemmatizer.lemmatize(word.lower()) for word in sentence_words]

    for word in sentence_words:
        if word.lower() in words:
            bag[words.index(word.lower())] = 1

    return np.array(bag)

def chatbot_response(message):
    results = model.predict(np.array([bag_of_words(message)]))
    results_index = np.argmax(results)
    tag = classes[results_index]

    for intent in intents:
        if intent["tag"] == tag:
            response = random.choice(intent["responses"])
            return response

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/get")
def get_bot_response():
    user_text = request.args.get("message")
    response = chatbot_response(user_text)
    return jsonify({"response": response})

if __name__ == "__main__":
    app.run(debug=True)

##index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="{{ url_for('static', filename='images/icon.ico') }}">
    <title>MindMate - Mental health chatbot</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <style>
      body {
        background-image: url("{{ url_for('static', filename='images/peakpx.jpg') }}");
        background-size: cover;
        background-position: center;
      }
    </style>
  
  </head>

  <body id="body-area">
    <div id="chat-container">
      <div id="chat-header">
        <h1 id="logo"><img src="{{ url_for('static', filename='images/logo.ico')}}" alt="logo" >MindMate</h1>
      </div>
      <div id="chat-area"></div>
      <div id="input-container">
        <input type="text" id="user-input" placeholder="Type your message..." onkeydown="if(event.keyCode===13) sendMessage()">
        <button id="send-btn" onclick="sendMessage()" type="button">Send</button>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      function sendMessage() {
        var message = $("#user-input").val();
        $("#chat-area").append('<div class="user-msg"><span class="msg">' + message + '</span></div>');
        $.get("/get", {msg: message}).done(function(data) {
          $("#chat-area").append('<div class="bot-msg"><span class="msg">' + data + '</span></div>');
          $("#chat-area").scrollTop($("#chat-area")[0].scrollHeight);
        });
        $("#user-input").val("");
      }
    </script>
  </body>
</html>


##script.js
document.addEventListener("DOMContentLoaded", function(event) {
    // Selecting DOM elements
    const chatForm = document.getElementById("chat-form");
    const chatInput = document.getElementById("user-input");
    const chatbotMessages = document.getElementById("chatbot-messages");
    const sendBtn = document.getElementById("send-btn");
  
    
  
    //Event listener for the chat form submit
chatForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const userInput = chatInput.value;
      addUserMessage(userInput);
      sendUserMessage(userInput);
      chatInput.value = "";
      scrollToBottom();
    });
  
    //Event listener for the send button click
sendBtn.addEventListener("click", () => {
      const userInput = chatInput.value;
      addUserMessage(userInput);
      sendUserMessage(userInput);
      chatInput.value = "";
      scrollToBottom();
    });
  
    // Function to add a user message to the chat area
function addUserMessage(message) {
      const userMessageElement = `
        <div class="user-message">
          <p>${message}</p>
        </div>
      `;
      chatbotMessages.insertAdjacentHTML("beforeend", userMessageElement);
      scrollToBottom();
    }
  
    // Function to send user message to server and get response
function sendUserMessage(message) {
      showChatbotLoader();
      fetch("/get-response", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ message }),
      })
        .then((response) => response.json())
        .then((data) => {
          const chatbotMessage = data.message;
          addChatbotMessage(chatbotMessage);
          hideChatbotLoader();
          scrollToBottom();
        })
        .catch((error) => {
          console.log("Error:", error);
          hideChatbotLoader();
        });
    }
  
    // Function to add a chatbot message to the chat area
function addChatbotMessage(message) {
      const chatbotMessageElement = `
        <div id="chatbot-message" class="chat-message">
          <p>${message}</p>
        </div>
      `;
      chatbotMessages.insertAdjacentHTML(
        "beforeend",
        chatbotMessageElement
      );
      scrollToBottom();
    }
  // Function to scroll to the bottom of the chat container

function scrollToBottom() {
    const scrollContainer = document.getElementById('chat-area');
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }
  
  
    // Function to hide the chatbot loader
function hideChatbotLoader() {
      const loaderElement = document.querySelector(".loader");
      if (loaderElement) {
        loaderElement.remove();
      }
    }
  
    // Add an event listener to the input field
    chatInput.addEventListener("keydown", function(event) {
      // Check if the key pressed is the enter key (key code 13)
      if (event.key === 'Enter') {
        // Prevent the default behavior of the enter key (submitting the form)
        event.preventDefault();

        // Trigger the click event on the send button
        document.getElementById("send-btn").click();
        scrollToBottom();
      }
    }); 

});

##style.css
#chat-container {
        width:112vh;
        height: 92vh;
        margin: 0 auto;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 30px rgb(65, 63, 63);
        background-color: rgba(0,0,0,0.7);
        display: flex;
        flex-direction: column;
      }

    
    
#chat-header {
        text-align: center;
        position: relative; /* Add position property */
      }
      
#chat-header h1 {
        margin-top: 0;
        font-size: 40px;
        font-weight: bold;
        color: rgba(255, 252, 252, 0.5);
        position: relative;
        border: 5px solid rgba(255, 252, 252, 0.5);
        border-radius: 10px;
        padding: 20px;
        z-index: 1; 
        background-color: rgba(0,0,0,0.5); 
        box-shadow: 0px 0px 15px grey;
      }  
   
#chat-header img {
        position: absolute;
        top: 50%;
        right: 200px;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background-color: transparent;
        /*border-radius: 60%;*/
        z-index: 1; /* Add z-index property */
      }
      
#chat-area {
        height: 50vh;
        padding-bottom: 20px; /* change to desired height */
        overflow-y: scroll;
        flex-grow: 1;
        /* Add the following line to scroll down to the bottom of the chat area */
        scroll-behavior: smooth;
                
      }
      
.user-msg,
.bot-msg {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
      }
      
.user-msg .msg,
.bot-msg .msg {
        max-width: 70%;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #aaaaaa;
      }
      
.user-msg .msg {
        background-color: #007bff;
        color: #ffffff;
        margin-right: 10px;
        margin-left: auto;
      }
      
.bot-msg .msg {
        background-color: #f2f2f2;
        color: #333333;
        margin-right: auto;
        margin-left: 10px;
      }
      
#input-container {
        display: flex;
        margin-top: 30px;
        
      }
      
#user-input {
        flex-grow: 1;
        padding: 10px;
        border-radius: 5px;
        border: none;
        box-shadow: 0px 0px 5px #aaaaaa;
        font-size: 16px;
        margin-right: 10px;
      }
      
      /* Style for the chatbot send button */
#send-btn {
        padding: 10px;
        border-radius: 5px;
        border: none;
        box-shadow: 0px 0px 5px #aaaaaa;
        background-color: #007bff;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.2s;
      }
      
#send-btn:hover {
        background-color: #0062cc;
      }
      
      /* Style for the chatbot input field */
#chatbot-input {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: none;
        box-shadow: 0px 0px 5px #aaaaaa;
        margin-top: 10px;
        margin-bottom: 10px;
      }
#chatbot-messages {
        height: auto;
        overflow-y: scroll;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #aaaaaa;
        margin-top: 20px;
        }
        
.chatbot-message {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px;
        }
        
.chatbot-message p {
        max-width: 80%;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #aaaaaa;
        background-color: #f2f2f2;
        color: #333333;
        margin-left: 10px;
        margin-right: auto;
        }
        
.chatbot-message img {
        max-width: 80%;
        border-radius: 5px;
        box-shadow: 0px 0px 5px #aaaaaa;
        margin-left: 10px;
        margin-right: auto;
        }
        
@media only screen and (max-width: 768px) {
#chat-container {
        max-width: 100%;
        height: auto;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px;
        }
        
#chat-header h1 {
                margin-top: 0;
                font-size: 40px;
                font-weight: bold;
                color: #aaaaaa;
                position: relative;
                display: inline-block; /* add this property to allow the logo to sit next to the title */
                padding: 20px;
                border: 5px solid gray;
                border-radius: 10px;
              }
        
#chat-header img {
                position: absolute;
                top: 50%; /* adjust the value to move the logo up or down */
                right: calc(100% + 10px); /* adjust the value to move the logo closer or farther from the title */
                transform: translateY(-50%);
                width: 50px;
                height: 50px;
                background: #555;
                border-radius: 50%;
              }
        
#user-input {
        margin-right: 0;
        margin-bottom: 10px;
        }
        
#send-btn {
        margin-left: 0;
        margin-bottom: 10px;
        }
        
#chatbot-messages {
        margin-top: 10px;
        }
        }

