committed

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml

.idea/AI Chatbot.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/venv" />
+    </content>
+    <orderEntry type="jdk" jdkName="Python 3.8 (Child Flask App)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/inspectionProfiles/Project_Default.xml

+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="Keras" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredErrors">
+        <list>
+          <option value="N806" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file

.idea/inspectionProfiles/profiles_settings.xml

+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.12 (Child Flask App)" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.8 (Child Flask App)" project-jdk-type="Python SDK" />
+  <component name="PyCharmProfessionalAdvertiser">
+    <option name="shown" value="true" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/AI Chatbot.iml" filepath="$PROJECT_DIR$/.idea/AI Chatbot.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

app.py

+import webbrowser
+
+import nltk
+import requests
+
+nltk.download('popular')
+from nltk.stem import WordNetLemmatizer
+
+lemmatizer = WordNetLemmatizer()
+import pickle
+import numpy as np
+
+from keras.models import load_model
+import json
+import random
+
+model = load_model('model.h5')
+intents = json.loads(open('data.json').read())
+words = pickle.load(open('texts.pkl', 'rb'))
+classes = pickle.load(open('labels.pkl', 'rb'))
+
+
+def clean_up_sentence(sentence):
+    # tokenize the pattern - split words into array
+    sentence_words = nltk.word_tokenize(sentence)
+    # stem each word - create short form for word
+    sentence_words = [lemmatizer.lemmatize(word.lower()) for word in sentence_words]
+    return sentence_words
+
+
+# return bag of words array: 0 or 1 for each word in the bag that exists in the sentence
+
+def bow(sentence, words, show_details=True):
+    # tokenize the pattern
+    sentence_words = clean_up_sentence(sentence)
+    # bag of words - matrix of N words, vocabulary matrix
+    bag = [0] * len(words)
+    for s in sentence_words:
+        for i, w in enumerate(words):
+            if w == s:
+                # assign 1 if current word is in the vocabulary position
+                bag[i] = 1
+                if show_details:
+                    print("found in bag: %s" % w)
+    return (np.array(bag))
+
+
+def predict_class(sentence, model):
+    # filter out predictions below a threshold
+    p = bow(sentence, words, show_details=False)
+    res = model.predict(np.array([p]))[0]
+    ERROR_THRESHOLD = 0.25
+    results = [[i, r] for i, r in enumerate(res) if r > ERROR_THRESHOLD]
+    # sort by strength of probability
+    results.sort(key=lambda x: x[1], reverse=True)
+    return_list = []
+    for r in results:
+        return_list.append({"intent": classes[r[0]], "probability": str(r[1])})
+    return return_list
+
+
+def getResponse(ints, intents_json):
+    tag = ints[0]['intent']
+    list_of_intents = intents_json['intents']
+    for i in list_of_intents:
+        if (i['tag'] == tag):
+            result = random.choice(i['responses'])
+            break
+    return result
+
+
+def chatbot_response(msg):
+    ints = predict_class(msg, model)
+    res = getResponse(ints, intents)
+    return res
+
+
+from flask import Flask, render_template, request
+from flask import Flask, request, jsonify
+import joblib
+import pandas as pd
+
+app = Flask(__name__)
+app.static_folder = 'static'
+
+# Load the saved model
+loaded_model = joblib.load('rf_model_learning_style.pkl')
+
+
+@app.route("/")
+def home():
+    return render_template("index.html")
+
+@app.route("/learning_style")
+def learningStyle():
+    return render_template("learningStyle.html")
+
+@app.route("/teaching_style")
+def teachingStyle():
+    return render_template("teachingStyle.html")
+
+@app.route("/behavior")
+def behavior():
+    return render_template("behavior.html")
+
+
+@app.route("/get")
+def get_bot_response():
+    userText = request.args.get('msg')
+    return chatbot_response(userText)
+
+
+
+@app.route('/predict_learning_style', methods=['POST'])
+def predict_learning_style():
+    try:
+        # Get the input data from the POST request
+        data = request.json
+        input_list = data['input']
+
+        # Prepare the input data for prediction
+        input_df = pd.DataFrame([input_list])
+
+        # Make predictions using the loaded model
+        predictions = loaded_model.predict(input_df)
+
+        # Define a label mapping
+        label_mapping = {0: 'Auditory', 1: 'Kinesthetic', 2: 'Read/Write', 3: 'Read/Write', 4: 'Visual'}
+
+        # Map the predictions to labels
+        predicted_labels = [label_mapping[prediction] for prediction in predictions]
+
+        print(predicted_labels)
+
+        # Return the predicted labels as JSON response
+        return jsonify({'predicted_labels': predicted_labels})
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 400
+
+loaded_modelT = joblib.load('predicting_teaching_style.pkl')
+
+@app.route('/predict_teaching_style', methods=['POST'])
+def predict_teaching_style():
+    try:
+        # Get the input data from the POST request
+        data = request.json
+        input_list = data['input']
+
+        # Prepare the input data for prediction
+        input_df = pd.DataFrame([input_list])
+
+        # Make predictions using the loaded model
+        predictions = loaded_modelT.predict(input_df)
+
+        # Define a label mapping
+        label_mapping = {
+            0: 'HANDS ON EXPERIENCE',
+            1: 'INDIVIDUALIZED SUPPORT',
+            2: 'MULTISENSORY INSTRUCTION',
+            3: 'PLAY BASED LEARNING',
+            4: 'WHOLE GROUP AND SMALL GROUP INSTRUCTION'
+        }
+
+        # Map the predictions to labels
+        predicted_labels = [label_mapping[prediction] for prediction in predictions]
+
+        # Return the predicted labels as JSON response
+        return jsonify({'predicted_labels': predicted_labels})
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 400
+
+loaded_modelB = joblib.load('behaviour_prediction.pkl')
+
+@app.route('/predict_behavior', methods=['POST'])
+def predict_behavior():
+    try:
+        # Get the input data from the POST request
+        data = request.json
+        input_list = data['input']
+
+        # Prepare the input data for prediction
+        input_df = pd.DataFrame([input_list])
+
+        # Make predictions using the loaded model
+        predictions = loaded_modelB.predict(input_df)
+
+        # Define a label mapping
+        label_mapping = {
+            0: 'Aggressive',
+            1: 'Hyperactive',
+            2: 'Oppositional',
+            3: 'Tantrum',
+            4: 'Withdrawal'
+        }
+
+        # Map the predictions to labels
+        predicted_labels = [label_mapping[prediction] for prediction in predictions]
+
+        # Return the predicted labels as JSON response
+        return jsonify({'predicted_labels': predicted_labels})
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 400
+
+
+
+if __name__ == "__main__":
+    app.run()

requirements.txt

 absl-py==1.2.0

static/styles/style.css

+:root {
+  --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  --msger-bg: #fff;
+  --border: 2px solid #ddd;
+  --left-msg-bg: #ececec;
+  --right-msg-bg: #579ffb;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: var(--body-bg);
+  font-family: Helvetica, sans-serif;
+}
+
+.msger {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 867px;
+  margin: 25px 10px;
+  height: calc(100% - 50px);
+  border: var(--border);
+  border-radius: 5px;
+  background: var(--msger-bg);
+  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
+}
+
+.msger-header {
+  /* display: flex; */
+  font-size: medium;
+  justify-content: space-between;
+  padding: 10px;
+  text-align: center;
+  border-bottom: var(--border);
+  background: #eee;
+  color: #666;
+}
+
+.msger-chat {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+.msger-chat::-webkit-scrollbar {
+  width: 6px;
+}
+.msger-chat::-webkit-scrollbar-track {
+  background: #ddd;
+}
+.msger-chat::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+}
+.msg {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 10px;
+}
+
+.msg-img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+  background: #ddd;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border-radius: 50%;
+}
+.msg-bubble {
+  max-width: 450px;
+  padding: 15px;
+  border-radius: 15px;
+  background: var(--left-msg-bg);
+}
+.msg-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.msg-info-name {
+  margin-right: 10px;
+  font-weight: bold;
+}
+.msg-info-time {
+  font-size: 0.85em;
+}
+
+.left-msg .msg-bubble {
+  border-bottom-left-radius: 0;
+}
+
+.right-msg {
+  flex-direction: row-reverse;
+}
+.right-msg .msg-bubble {
+  background: var(--right-msg-bg);
+  color: #fff;
+  border-bottom-right-radius: 0;
+}
+.right-msg .msg-img {
+  margin: 0 0 0 10px;
+}
+
+.msger-inputarea {
+  display: flex;
+  padding: 10px;
+  border-top: var(--border);
+  background: #eee;
+}
+.msger-inputarea * {
+  padding: 10px;
+  border: none;
+  border-radius: 3px;
+  font-size: 1em;
+}
+.msger-input {
+  flex: 1;
+  background: #ddd;
+}
+.msger-send-btn {
+  margin-left: 10px;
+  background-color: red;
+  color: #fff;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.23s;
+}
+.msger-send-btn:hover {
+  background: rgb(0, 180, 50);
+}
+
+.msger-chat {
+  background-color: #fcfcfe;
+ }
\ No newline at end of file

templates/behavior.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Behavior Prediction</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+        }
+
+        h1 {
+            text-align: center;
+            background-color: #a00028;
+            color: #fff;
+            padding: 20px;
+        }
+
+        form {
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 5px;
+        }
+
+        input[type="number"],
+        select {
+            width: 95%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        button[type="button"] {
+            background-color: #a00028;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            margin-left: 40%;
+        }
+
+        #prediction-result {
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        #predicted-labels {
+            font-size: 25px;
+        }
+
+        #activity-info {
+            background-color: #e0e0e0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 10px;
+            font-size: 22px;
+            margin-top: 20px;
+            text-align: left;
+        }
+    </style>
+</head>
+<body>
+    <h1>Behavior Prediction</h1>
+    <form id="prediction-form">
+        <label for="input1">Gender:</label>
+        <select name="input1" id="input1">
+            <option value="0">Female</option>
+            <option value="1">Male</option>
+        </select><br>
+
+        <label for="input2">Colouring a Picture Assessment Score:</label>
+        <input type="number" name="input2" id="input2" step="0.01"><br>
+
+        <label for="input3">Colouring Picture while Playing a Song:</label>
+        <input type="number" name="input3" id="input3" step="0.01"><br>
+
+        <label for="input4">Request and Get the Response - Response Rate:</label>
+        <select name="input4" id="input4">
+            <option value="0">Accepted</option>
+            <option value="1">Denied</option>
+            <option value="2">Moderate</option>
+        </select><br>
+
+
+        <label for="input5">How Much Child Displays Positive Social Interaction - Withdrawal Rate:</label>
+        <select name="input5" id="input5">
+            <option value="0">Always</option>
+            <option value="1">Often</option>
+            <option value="2">Rarely</option>
+            <option value="3">Sometimes</option>
+        </select><br>
+
+
+        <label for="input6">Ability to Follow the Instruction - Oppositional Rate:</label>
+        <select name="input6" id="input6">
+            <option value="0">Average</option>
+            <option value="1">Excellent</option>
+            <option value="2">Good</option>
+            <option value="3">Poor</option>
+        </select><br>
+
+        <label for="input7">Child React to Change in the Classroom Routine - Adapt Rate:</label>
+        <select name="input7" id="input7">
+            <option value="0">Easily</option>
+            <option value="1">Eventually</option>
+            <option value="2">Struggle</option>
+        </select><br>
+
+
+        <label for="input8">Behavior of Children During Their Play Time - Aggressive Rate:</label>
+        <select name="input8" id="input8">
+            <option value="1">Mild</option>
+            <option value="2">Moderate</option>
+            <option value="3">Severe</option>
+        </select><br>
+
+
+        <button type="button" id="predict-button">Predict</button>
+    </form>
+
+    <div id="prediction-result">
+        <h2>Predicted Behavior:</h2>
+        <p id="predicted-labels"></p>
+        <p id="activity-info"></p> <!-- Information about suitable activities -->
+    </div>
+
+    <script>
+        // JavaScript code to handle the prediction
+        document.getElementById('predict-button').addEventListener('click', () => {
+            const inputData = {
+                input1: parseFloat(document.getElementById('input1').value),
+                input2: parseFloat(document.getElementById('input2').value) / 100,
+                input3: parseFloat(document.getElementById('input3').value) / 100,
+                input4: parseFloat(document.getElementById('input4').value),
+                input5: parseFloat(document.getElementById('input5').value),
+                input6: parseFloat(document.getElementById('input6').value),
+                input7: parseFloat(document.getElementById('input7').value),
+                input8: parseFloat(document.getElementById('input8').value),
+            };
+
+            // Send a POST request to your Flask API
+            fetch('/predict_behavior', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ input: Object.values(inputData) }),
+            })
+            .then((response) => response.json())
+            .then((data) => {
+                const predictedLabels = data.predicted_labels;
+                const predictedLabelsElement = document.getElementById('predicted-labels');
+                predictedLabelsElement.textContent = predictedLabels.join(', ');
+
+                // Add suitable activity information based on predicted behavior
+                const activityInfoElement = document.getElementById('activity-info');
+                activityInfoElement.textContent = getActivityInfo(predictedLabels);
+            })
+            .catch((error) => console.error('Error:', error));
+        });
+
+        // Function to provide suitable activity information based on predicted behavior
+        function getActivityInfo(predictedLabels) {
+            // Define suitable activities based on behavior predictions
+            const behaviorActivities = {
+                    'Aggressive': 'Aggressive behavior may indicate that the child is struggling with self-control and emotional regulation. Engaging in activities that teach anger management, empathy, and conflict resolution can be beneficial. Examples include role-playing scenarios, deep breathing exercises, and mindfulness activities.',
+
+                    'Hyperactive': 'Hyperactive behavior suggests that the child has excess energy to burn. Physical activities that encourage movement and exercise can help channel this energy in a positive way. Consider activities like running, jumping, dancing, or participating in sports.',
+
+                    'Oppositional': 'Oppositional behavior may stem from a desire for independence and control. Activities that promote cooperation, problem-solving, and effective communication can be effective. Encourage group activities that require teamwork, negotiation, and compromise.',
+
+                    'Tantrum': 'Tantrums often indicate frustration or emotional distress. Calming and relaxation activities can help manage these emotions. Try activities like guided meditation, storytelling, or creating a calming sensory corner with soothing objects.',
+
+                    'Withdrawal': 'Withdrawal behavior suggests a reluctance to engage socially. Encourage social interaction activities to help the child build social skills and confidence. Activities like group games, art projects, or collaborative storytelling can be helpful.'
+                };
+
+            // Generate the activity information
+            let activityInfo = 'Suitable Activities: ';
+            predictedLabels.forEach((label, index) => {
+                if (index > 0) {
+                    activityInfo += ', ';
+                }
+                activityInfo += behaviorActivities[label];
+            });
+
+            return activityInfo;
+        }
+    </script>
+</body>
+</html>

templates/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Chatbot</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+</head>
+
+<body>
+  <!-- partial:index.partial.html -->
+  <section class="msger">
+    <header class="msger-header">
+      <div class="msger-header-title">
+        <i class="fas fa-bug"></i> Chatbot <i class="fas fa-bug"></i>
+      </div>
+    </header>
+
+    <main class="msger-chat">
+      <div class="msg left-msg">
+        <div class="msg-img"></div>
+
+        <div class="msg-bubble">
+          <div class="msg-info">
+            <div class="msg-info-name">Chatbot</div>
+            <div class="msg-info-time">12:45</div>
+          </div>
+
+          <div class="msg-text">
+            Hi, welcome to ChatBot! Go ahead and send me a message. 😄
+          </div>
+        </div>
+      </div>
+
+    </main>
+
+    <form class="msger-inputarea">
+      <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
+      <button type="submit" class="msger-send-btn">Send</button>
+    </form>
+  </section>
+  <!-- partial -->
+  <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
+  <script>
+
+    const msgerForm = get(".msger-inputarea");
+    const msgerInput = get(".msger-input");
+    const msgerChat = get(".msger-chat");
+
+
+    // Icons made by Freepik from www.flaticon.com
+    const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
+    const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
+    const BOT_NAME = "    ChatBot";
+    const PERSON_NAME = "You";
+
+    msgerForm.addEventListener("submit", event => {
+      event.preventDefault();
+
+      const msgText = msgerInput.value;
+      if (!msgText) return;
+
+      appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
+      msgerInput.value = "";
+      botResponse(msgText);
+    });
+
+    function appendMessage(name, img, side, text) {
+      //   Simple solution for small apps
+      const msgHTML = `
+<div class="msg ${side}-msg">
+  <div class="msg-img" style="background-image: url(${img})"></div>
+
+  <div class="msg-bubble">
+    <div class="msg-info">
+      <div class="msg-info-name">${name}</div>
+      <div class="msg-info-time">${formatDate(new Date())}</div>
+    </div>
+
+    <div class="msg-text">${text}</div>
+  </div>
+</div>
+`;
+
+      msgerChat.insertAdjacentHTML("beforeend", msgHTML);
+      msgerChat.scrollTop += 500;
+    }
+
+    function botResponse(rawText) {
+
+      // Bot Response
+      $.get("/get", { msg: rawText }).done(function (data) {
+        console.log(rawText);
+        console.log(data);
+        const msgText = data;
+        appendMessage(BOT_NAME, BOT_IMG, "left", msgText);
+
+      });
+
+    }
+
+
+    // Utils
+    function get(selector, root = document) {
+      return root.querySelector(selector);
+    }
+
+    function formatDate(date) {
+      const h = "0" + date.getHours();
+      const m = "0" + date.getMinutes();
+
+      return `${h.slice(-2)}:${m.slice(-2)}`;
+    }
+
+
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file

templates/search.html

+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Data in table</title>
+	<style>
+		.body2 {
+			font-family: Arial, sans-serif;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			height: 100vh;
+			margin: 0;
+		}
+
+		.search-container {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-bottom: 20px;
+		}
+
+		#searchInput {
+			padding: 10px;
+			font-size: 16px;
+			margin-bottom: 10px;
+			border: 1px solid #ccc;
+			border-radius: 5px;
+			width: 250px; /* Adjust the width as needed */
+			text-align: center; /* Center the text inside the input */
+		}
+
+		#searchButton {
+			padding: 10px 20px;
+			font-size: 16px;
+			border: none;
+			background-color: #4caf50;
+			color: white;
+			border-radius: 5px;
+			cursor: pointer;
+		}
+
+		table {
+			width: 100%; /* Set the width of the table as desired */
+			border-collapse: collapse;
+			margin-top: 20px;
+			text-align: center; /* Center the text inside table cells */
+		}
+
+		th, td {
+			border: 1px solid #dddddd;
+			padding: 8px;
+		}
+
+		th {
+			background-color: #f2f2f2;
+		}
+
+		tr:nth-child(even) {
+			background-color: #f2f2f2;
+		}
+	</style>
+</head>
+<body class="body2">
+
+	<div class="search-container">
+        <input type="text" id="searchInput" placeholder="Enter name...">
+        <button onclick="searchByName()" id="searchButton">Search</button>
+    </div>
+	<table id="dataTable" style="display: none;">
+		<thead>
+			<th>Name</th>
+			<th>Read & Write Score</th>
+			<th>Kinesthetic Score</th>
+			<th>Listening Score</th>
+			<th>Visual Based Score</th>
+		</thead>
+		<tbody id="tbody1"></tbody>
+	</table>
+
+		<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
+		<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
+		<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>
+		<script id= "MainScript">
+
+		var allScores = [];
+        var kinestheticScores = [];
+        var listeningScores = [];
+        var visualScores = [];
+
+		const firebaseConfig = {
+		  apiKey: "AIzaSyCmM5ohhH6-4YQfgxlFLxmpHXEmjDD6gyU",
+		  authDomain: "childchild-44346.firebaseapp.com",
+		  projectId: "childchild-44346",
+		  storageBucket: "childchild-44346.appspot.com",
+		  messagingSenderId: "811280854309",
+		  appId: "1:811280854309:web:1796dd5ca7ed046006fecc",
+		  measurementId: "G-CGZDM1PQP4"
+		};
+
+		firebase.initializeApp(firebaseConfig);
+		let db = firebase.firestore();
+
+		function searchByName() {
+			var searchValue = document.getElementById('searchInput').value.toLowerCase();
+			var filteredScores = allScores.filter(function (score) {
+				return score.name.toLowerCase().includes(searchValue);
+			});
+			updateTable(filteredScores);
+
+			// Show the table after search
+			document.getElementById('dataTable').style.display = 'block';
+		}
+
+		function updateTable(scoresDocList) {
+            tbody.innerHTML = "";
+            scoresDocList.forEach(element => {
+                var kinestheticScore = kinestheticScores.find(item => item.name === element.name);
+                var kinestheticScoreValue = kinestheticScore ? kinestheticScore.score : 'N/A';
+                var listeningScore = listeningScores.find(item => item.name === element.name);
+                var listeningScoreValue = listeningScore ? listeningScore.score : 'N/A';
+                var visualScore = visualScores.find(item => item.name === element.name);
+                var visualScoreValue = visualScore ? visualScore.score : 'N/A';
+                AddItem(element.name, element.score, kinestheticScoreValue, listeningScoreValue, visualScoreValue);
+            });
+        }
+
+		function GetAllData() {
+			var promises = [];
+
+			var collections = ["scores", "vscores", "lscores", "kscores"];
+
+			collections.forEach(collection => {
+				var promise = db.collection(collection).get().then((querySnapshot) => {
+					var scores = [];
+					querySnapshot.forEach(doc => {
+						scores.push(doc.data());
+					});
+					return { collection, scores };
+				});
+				promises.push(promise);
+			});
+
+			Promise.all(promises).then(data => {
+				kinestheticScores = data.find(item => item.collection === 'kscores').scores;
+				listeningScores = data.find(item => item.collection === 'lscores').scores;
+				visualScores = data.find(item => item.collection === 'vscores').scores;
+				allScores = data.filter(item => item.collection === 'scores')[0].scores;
+				AddAllItems(allScores, kinestheticScores, listeningScores, visualScores);
+			});
+		}
+
+
+		var tbody = document.getElementById('tbody1');
+
+		function AddItem(name, readWriteScore, kinestheticScore, listeningScore, visualScore){
+			var trow = document.createElement('tr');
+			var td1 = document.createElement('td');
+			var td2 = document.createElement('td');
+			var td3 = document.createElement('td');
+			var td4 = document.createElement('td');
+			var td5 = document.createElement('td');
+
+			td1.innerHTML = name;
+			td2.innerHTML = readWriteScore * 10;
+			td3.innerHTML = kinestheticScore * 10;
+			td4.innerHTML = listeningScore * 10;
+			td5.innerHTML = visualScore * 10;
+
+			trow.appendChild(td1);
+			trow.appendChild(td2);
+			trow.appendChild(td3);
+			trow.appendChild(td4);
+			trow.appendChild(td5);
+
+			tbody.appendChild(trow);
+		}
+
+		function AddAllItems(scoresDocList, kinestheticScores, listeningScores, visualScores){
+			IdNo=0;
+			tbody.innerHTML="";
+			scoresDocList.forEach(element => {
+				var kinestheticScore = kinestheticScores.find(item => item.name === element.name);
+				var kinestheticScoreValue = kinestheticScore ? kinestheticScore.score  : 'N/A';
+				var listeningScore = listeningScores.find(item => item.name === element.name);
+				var listeningScoreValue = listeningScore ? listeningScore.score : 'N/A';
+				var visualScore = visualScores.find(item => item.name === element.name);
+				var visualScoreValue = visualScore ? visualScore.score : 'N/A';
+				AddItem(element.name, element.score, kinestheticScoreValue, listeningScoreValue, visualScoreValue);
+			});
+		}
+
+		window.onload = GetAllData;
+	</script>
+
+</body>
+</html>

templates/teachingStyle.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teaching Style Prediction</title>
+    <style>
+        /* Add some basic styling */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+        }
+
+        h1 {
+            text-align: center;
+            background-color: #a00028;
+            color: #fff;
+            padding: 20px;
+        }
+
+        form {
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 5px;
+        }
+
+        input[type="number"],
+        select {
+            width: 95%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        button[type="button"] {
+            background-color: #a00028;
+            color: #fff;
+            border: none;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            margin-left: 40%;
+        }
+
+        #prediction-result {
+            margin-top: 20px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h1>Teaching Style Prediction</h1>
+    <form id="prediction-form">
+        <label for="input1">TEACHER'S AGE:</label>
+        <input type="number" name="input1" id="input1" step="0.01"><br>
+
+        <label for="input2">GENDER:</label>
+        <select name="input2" id="input2">
+            <option value="0">Female</option>
+            <option value="1">Male</option>
+        </select><br>
+
+        <label for="input3">TEACHING EXPERIENCE:</label>
+        <input type="number" name="input3" id="input3" step="0.01"><br>
+
+        <label for="input4">CHOICE OF TEACHING MATERIALS:</label>
+        <select name="input4" id="input4">
+            <option value="0">ART SUPPLIES</option>
+            <option value="1">GAMES</option>
+            <option value="2">MUSIC AND MOVEMENT PROPS</option>
+            <option value="3">VISUAL AIDS</option>
+            <option value="4">WORK BOOKS</option>
+        </select><br>
+
+        <label for="input5">POSITIVE LEARNING ENVIRONMENT:</label>
+        <select name="input5" id="input5">
+            <option value="0">Average</option>
+            <option value="1">No</option>
+            <option value="2">Yes</option>
+        </select><br>
+
+        <label for="input6">Does the teacher prefer individual or group-based teaching:</label>
+        <select name="input6" id="input6">
+            <option value="0">GROUP</option>
+            <option value="1">INDIVIDUAL</option>
+        </select><br>
+
+        <label for="input7">Does the teacher prefer when questions are raised by children:</label>
+        <select name="input7" id="input7">
+            <option value="0">No</option>
+            <option value="1">Yes</option>
+        </select><br>
+
+        <button type="button" id="predict-button">Predict</button>
+    </form>
+
+    <div id="prediction-result">
+        <h2>Predicted Teaching Style:</h2>
+        <ul id="predicted-labels" style="font-size: 18px;"></ul>
+    </div>
+
+    <script>
+        // JavaScript code to handle the prediction
+        document.getElementById('predict-button').addEventListener('click', () => {
+            const inputData = {
+                input1: parseFloat(document.getElementById('input1').value),
+                input2: parseFloat(document.getElementById('input2').value),
+                input3: parseFloat(document.getElementById('input3').value),
+                input4: parseFloat(document.getElementById('input4').value),
+                input5: parseFloat(document.getElementById('input5').value),
+                input6: parseFloat(document.getElementById('input6').value),
+                input7: parseFloat(document.getElementById('input7').value),
+            };
+
+            // Send a POST request to your Flask API
+            fetch('/predict_teaching_style', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ input: Object.values(inputData) }),
+            })
+            .then((response) => response.json())
+            .then((data) => {
+                const predictedLabels = data.predicted_labels;
+                const predictedLabelsElement = document.getElementById('predicted-labels');
+                predictedLabelsElement.textContent = predictedLabels.join(', ');
+            })
+            .catch((error) => console.error('Error:', error));
+        });
+    </script>
+</body>
+</html>

training.py

+import nltk
+from nltk.stem import WordNetLemmatizer
+import json
+import pickle
+import numpy as np
+from keras.models import Sequential
+from keras.layers import Dense, Activation, Dropout
+from keras.optimizers import SGD
+import random
+
+
+lemmatizer = WordNetLemmatizer()
+words = []
+classes = []
+documents = []
+ignore_words = ['?', '!']
+data_file = open('data.json').read()
+intents = json.loads(data_file)
+
+for intent in intents['intents']:
+    for pattern in intent['patterns']:
+
+        # tokenize each word
+        w = nltk.word_tokenize(pattern)
+        words.extend(w)
+        # add documents in the corpus
+        documents.append((w, intent['tag']))
+
+        # add to our classes list
+        if intent['tag'] not in classes:
+            classes.append(intent['tag'])
+
+# lemmaztize and lower each word and remove duplicates
+words = [lemmatizer.lemmatize(w.lower()) for w in words if w not in ignore_words]
+words = sorted(list(set(words)))
+# sort classes
+classes = sorted(list(set(classes)))
+# documents = combination between patterns and intents
+print(len(documents), "documents")
+# classes = intents
+print(len(classes), "classes", classes)
+# words = all words, vocabulary
+print(len(words), "unique lemmatized words", words)
+
+pickle.dump(words, open('texts.pkl', 'wb'))
+pickle.dump(classes, open('labels.pkl', 'wb'))
+
+# create our training data
+training = []
+# create an empty array for our output
+output_empty = [0] * len(classes)
+# training set, bag of words for each sentence
+for doc in documents:
+    # initialize our bag of words
+    bag = []
+    # list of tokenized words for the pattern
+    pattern_words = doc[0]
+    # lemmatize each word - create base word, in attempt to represent related words
+    pattern_words = [lemmatizer.lemmatize(word.lower()) for word in pattern_words]
+    # create our bag of words array with 1, if word match found in current pattern
+    for w in words:
+        bag.append(1) if w in pattern_words else bag.append(0)
+
+    # output is a '0' for each tag and '1' for current tag (for each pattern)
+    output_row = list(output_empty)
+    output_row[classes.index(doc[1])] = 1
+
+    training.append([bag, output_row])
+# shuffle our features and turn into np.array
+random.shuffle(training)
+training = np.array(training)
+# create train and test lists. X - patterns, Y - intents
+train_x = list(training[:, 0])
+train_y = list(training[:, 1])
+print("Training data created")
+
+# Create model - 3 layers. First layer 128 neurons, second layer 64 neurons and 3rd output layer contains number of neurons
+# equal to number of intents to predict output intent with softmax
+model = Sequential()
+model.add(Dense(128, input_shape=(len(train_x[0]),), activation='relu'))
+model.add(Dropout(0.5))
+model.add(Dense(64, activation='relu'))
+model.add(Dropout(0.5))
+model.add(Dense(len(train_y[0]), activation='softmax'))
+
+# Compile model. Stochastic gradient descent with Nesterov accelerated gradient gives good results for this model
+sgd = SGD(lr=0.01, decay=1e-6, momentum=0.9, nesterov=True)
+model.compile(loss='categorical_crossentropy', optimizer=sgd, metrics=['accuracy'])
+
+# fitting and saving the model
+hist = model.fit(np.array(train_x), np.array(train_y), epochs=200, batch_size=5, verbose=1)
+model.save('model.h5', hist)
+
+print("model created")
\ No newline at end of file