Test

app.py

@@ -0,0 +1,73 @@
+import pandas as pd
+from sentence_transformers import SentenceTransformer, util
+from flask import Flask, render_template, request, jsonify
+from nltk.corpus import stopwords
+stop = stopwords.words('english')
+
+
+def text_preprocessing(text):
+    # make all words with lower letters
+    text = text.lower()
+    # getting rid of any punctution
+    # text = text.replace('http\S+|www.\S+|@|%|:|,|', '', case=False)
+    # spliting each sentence to words to apply previous funtions on them
+    word_tokens = text.split(' ')
+    keywords = [item for item in word_tokens if item not in stop]
+    # assemble words of each sentence again and assign them in new column
+
+    return ' '.join(keywords)
+
+def df_to_text(df):
+    text = []
+    for data in df:
+        text.append(f"Product ID: {data["ProductID"]} \n \
+            Product Name: {data["ProductName"]} \n \
+            Brand: {data["ProductBrand"]} \n \
+            Gender: {data["Gender"]} \n \
+            Price (INR): {data["Price (INR)"]} \n \
+            Description: {data["Description"]} \n \
+            Primary color: {data["PrimaryColor"]}")
+    return '\n\n'.join(text)
+
+
+df = pd.read_csv("data/dataset.csv").reset_index(drop=True)
+embedding_df = pd.read_csv("data/embedding.csv", header=None)
+docs = embedding_df.values
+text = input("Your search: ")
+# text = "a white shirt for men"
+
+model = SentenceTransformer("bert-base-nli-mean-tokens")
+
+
+app = Flask(__name__)
+
+
+@app.route("/")
+def index():
+    return render_template("chat.html")
+
+
+@app.route("/chat", methods=["POST"])
+def chat():
+    data = request.get_json()
+    msg = data.get("msg")
+    try:
+        output_df = get_chat_response(msg)
+        output_text = df_to_text(output_df)
+        return jsonify({"response": True, "message": output_text})
+    except Exception as e:
+        print(e)
+        error_message = f'Error: {str(e)}'
+        return jsonify({"message": error_message, "response": False})
+
+
+def get_chat_response(text):
+    query_vector = model.encode(text_preprocessing(text)).astype(float)
+    results = util.pytorch_cos_sim(query_vector, docs)
+    top_n = 3
+    sort_idx = results.argsort(descending=True, axis=1)[0][:top_n]
+    return df.iloc[sort_idx]
+
+
+if __name__ == "__main__":
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,4 @@
+flask
+torch==2.0.0
+sentence_transformers
+nltk

static/css/style.css

@@ -0,0 +1,196 @@
+* {
+	box-sizing: border-box;
+  }
+  
+  body {
+	background-color: #edeff2;
+	font-family: "Calibri", "Roboto", sans-serif;
+  }
+  
+  .chat_window {
+	position: absolute;
+	width: calc(100% - 20px);
+	max-width: 800px;
+	height: 500px;
+	border-radius: 10px;
+	background-color: #fff;
+	left: 50%;
+	top: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+	background-color: #f8f8f8;
+	overflow: hidden;
+  }
+  
+  .top_menu {
+	background-color: #fff;
+	width: 100%;
+	padding: 20px 0 15px;
+	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
+  }
+  .top_menu .buttons {
+	margin: 3px 0 0 20px;
+	position: absolute;
+  }
+  .top_menu .buttons .button {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 10px;
+	position: relative;
+  }
+  .top_menu .buttons .button.close {
+	background-color: #f5886e;
+  }
+  .top_menu .buttons .button.minimize {
+	background-color: #fdbf68;
+  }
+  .top_menu .buttons .button.maximize {
+	background-color: #a3d063;
+  }
+  .top_menu .title {
+	text-align: center;
+	color: #bcbdc0;
+	font-size: 20px;
+  }
+  
+  .messages {
+	position: relative;
+	list-style: none;
+	padding: 20px 10px 0 10px;
+	margin: 0;
+	height: 347px;
+	overflow: scroll;
+  }
+  .messages .message {
+	clear: both;
+	overflow: hidden;
+	margin-bottom: 20px;
+	transition: all 0.5s linear;
+	opacity: 0;
+  }
+  .messages .message.left .avatar {
+	background-color: #f5886e;
+	float: left;
+  }
+  .messages .message.left .text_wrapper {
+	background-color: #ffe6cb;
+	margin-left: 20px;
+  }
+  .messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
+	right: 100%;
+	border-right-color: #ffe6cb;
+  }
+  .messages .message.left .text {
+	color: #c48843;
+  }
+  .messages .message.right .avatar {
+	background-color: #fdbf68;
+	float: right;
+  }
+  .messages .message.right .text_wrapper {
+	background-color: #c7eafc;
+	margin-right: 20px;
+	float: right;
+  }
+  .messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
+	left: 100%;
+	border-left-color: #c7eafc;
+  }
+  .messages .message.right .text {
+	color: #45829b;
+  }
+  .messages .message.appeared {
+	opacity: 1;
+  }
+  .messages .message .avatar {
+	width: 60px;
+	height: 60px;
+	border-radius: 50%;
+	display: inline-block;
+  }
+  .messages .message .text_wrapper {
+	display: inline-block;
+	padding: 20px;
+	border-radius: 6px;
+	width: calc(100% - 85px);
+	min-width: 100px;
+	position: relative;
+  }
+  .messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
+	top: 18px;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+  }
+  .messages .message .text_wrapper::after {
+	border-width: 13px;
+	margin-top: 0px;
+  }
+  .messages .message .text_wrapper::before {
+	border-width: 15px;
+	margin-top: -2px;
+  }
+  .messages .message .text_wrapper .text {
+	font-size: 18px;
+	font-weight: 300;
+  }
+  
+  .bottom_wrapper {
+	position: relative;
+	width: 100%;
+	background-color: #fff;
+	padding: 20px 20px;
+	position: absolute;
+	bottom: 0;
+  }
+  .bottom_wrapper .message_input_wrapper {
+	display: inline-block;
+	height: 50px;
+	border-radius: 25px;
+	border: 1px solid #bcbdc0;
+	width: calc(100% - 160px);
+	position: relative;
+	padding: 0 20px;
+  }
+  .bottom_wrapper .message_input_wrapper .message_input {
+	border: none;
+	height: 100%;
+	box-sizing: border-box;
+	width: calc(100% - 40px);
+	position: absolute;
+	outline-width: 0;
+	color: gray;
+  }
+  .bottom_wrapper .send_message {
+	width: 140px;
+	height: 50px;
+	display: inline-block;
+	border-radius: 50px;
+	background-color: #a3d063;
+	border: 2px solid #a3d063;
+	color: #fff;
+	cursor: pointer;
+	transition: all 0.2s linear;
+	text-align: center;
+	float: right;
+  }
+  .bottom_wrapper .send_message:hover {
+	color: #a3d063;
+	background-color: #fff;
+  }
+  .bottom_wrapper .send_message .text {
+	font-size: 18px;
+	font-weight: 300;
+	display: inline-block;
+	line-height: 48px;
+  }
+  
+  .message_template {
+	display: none;
+  }
+  

static/js/script.js

@@ -0,0 +1,81 @@
+(function () {
+    let Message;
+    Message = function (arg) {
+        this.text = arg.text, this.message_side = arg.message_side;
+        this.draw = function (_this) {
+            return function () {
+                let $message;
+                $message = $($('.message_template').clone().html());
+                $message.addClass(_this.message_side).find('.text').html(_this.text);
+                $('.messages').append($message);
+                return setTimeout(function () {
+                    return $message.addClass('appeared');
+                }, 0);
+            };
+        }(this);
+        return this;
+    };
+
+    let get_response = async(msg) => {
+        const response = await fetch("http://127.0.0.1:5000/chat", {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ msg: msg })
+
+
+            });
+        let json = await response.json();
+        let message = json.message;
+        return message.toString();
+
+    };
+    var Response;
+    Response = async function(arg) {
+        this.msg = arg.msg;
+        sendMessage(this.msg, 'right');
+        bot_res = await get_response(this.msg);
+        sendMessage(bot_res, 'left');
+    };
+
+    let sendMessage;
+    sendMessage = function (text, side) {
+        var $messages, message;
+        if (text === '') {
+            return;
+        }
+        $('.message_input').val('');
+        $messages = $('.messages');
+        let message_side;
+        message_side = message_side === 'left' ? 'right' : 'left';
+        message = new Message({
+            text: text,
+            message_side: side
+        });
+        message.draw();
+        return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
+    };
+    $(function () {
+        var getMessageText;
+        message_side = 'right';
+        getMessageText = function () {
+            var $message_input;
+            $message_input = $('.message_input');
+            return $message_input.val();
+        };
+        
+        let msg;
+        $('.send_message').click(function (e) {
+            msg = getMessageText();
+            return Response({"msg": msg});
+        });
+        $('.message_input').keyup(function (e) {
+            if (e.which === 13) {
+                msg = getMessageText();
+                return Response({"msg": msg});
+            }
+        });
+        sendMessage('Hi there', 'left');
+    });
+}.call(this));

templates/chat.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Autochat Bot</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js"></script>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
+    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+</head>
+
+<body>
+    
+    <!------ Include the above in your HEAD tag ---------->
+    <div class="chat_window">
+        <div class="top_menu">
+            <div class="buttons">
+                <div class="button close"></div>
+                <div class="button minimize"></div>
+                <div class="button maximize"></div>
+            </div>
+            <div class="title">Chat</div>
+        </div>
+        <ul class="messages"></ul>
+        <div class="bottom_wrapper clearfix">
+            <div class="message_input_wrapper">
+                <input class="message_input" placeholder="Type your message here..." />
+            </div>
+            <div class="send_message">
+                <div class="icon"></div>
+                <div class="text">Send</div>
+            </div>
+        </div>
+    </div>
+    <div class="message_template">
+        <li class="message">
+            <div class="avatar"></div>
+            <div class="text_wrapper">
+                <div class="text"></div>
+            </div>
+        </li>
+    </div>
+    
+</body>
+
+</html>