Upload 17 files
Browse files- app.py +31 -0
- cahtbott.py +28 -0
- data.pth +3 -0
- intents.json +34 -0
- source_data.py +65 -0
- standalone-frontend/app.js +91 -0
- standalone-frontend/base.html +39 -0
- standalone-frontend/style.css +200 -0
- static/app.js +104 -0
- static/base.html +44 -0
- static/chatbox-icon.png +0 -0
- static/chatgpt_background.jpg +0 -0
- static/images/chatbox-icon.svg +3 -0
- static/new.png +0 -0
- static/style.css +205 -0
- templates/base.html +44 -0
- train.py +131 -0
app.py
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
from flask import Flask, render_template, request, jsonify
|
| 2 |
+
# from flask_cors import CORS
|
| 3 |
+
from source_data import get_response
|
| 4 |
+
from flask_limiter import Limiter
|
| 5 |
+
from flask_limiter.util import get_remote_address
|
| 6 |
+
from cahtbott import send_message
|
| 7 |
+
app = Flask(__name__)
|
| 8 |
+
# CORS(app)
|
| 9 |
+
limiter = Limiter(app)
|
| 10 |
+
|
| 11 |
+
# Comment out @app.get and index_get() if you are using CORS(app) for standalone frontend and uncomment all other commented lines
|
| 12 |
+
@app.get("/")
|
| 13 |
+
@limiter.limit("3/second; 200/minute; 1200/hour")
|
| 14 |
+
def index_get():
|
| 15 |
+
return render_template("base.html")
|
| 16 |
+
|
| 17 |
+
@app.post("/predict")
|
| 18 |
+
def predict():
|
| 19 |
+
text = request.get_json().get("message")
|
| 20 |
+
if len(text) > 100:
|
| 21 |
+
message = {"answer": "I'm sorry, your query has too many characters for me to process. If you would like to speak to a live agent, say 'I would like to speak to a live agent'"}
|
| 22 |
+
return jsonify(message)
|
| 23 |
+
response = get_response(text)
|
| 24 |
+
message = {"answer": response}
|
| 25 |
+
return jsonify(message)
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
if __name__ == "__main__":
|
| 29 |
+
app.run(debug = True)
|
| 30 |
+
# from waitress import serve
|
| 31 |
+
# serve(app, host="0.0.0.0", port=8080)
|
cahtbott.py
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import openai
|
| 2 |
+
from openai import Completion
|
| 3 |
+
import speech_recognition as sr
|
| 4 |
+
import pyttsx3
|
| 5 |
+
import webbrowser
|
| 6 |
+
import time
|
| 7 |
+
|
| 8 |
+
# Set up the OpenAI API client
|
| 9 |
+
openai.api_key = "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"
|
| 10 |
+
|
| 11 |
+
|
| 12 |
+
|
| 13 |
+
def send_message(message):
|
| 14 |
+
# Use the OpenAI API to get a response from ChatGPT
|
| 15 |
+
response = Completion.create(
|
| 16 |
+
engine="text-davinci-003",
|
| 17 |
+
prompt=message,
|
| 18 |
+
max_tokens=1024,
|
| 19 |
+
temperature=0.5,
|
| 20 |
+
)
|
| 21 |
+
return response.get('choices')[0].get('text')
|
| 22 |
+
|
| 23 |
+
|
| 24 |
+
|
| 25 |
+
|
| 26 |
+
|
| 27 |
+
|
| 28 |
+
|
data.pth
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
version https://git-lfs.github.com/spec/v1
|
| 2 |
+
oid sha256:d5740e8791085fc5ebb320a0229be52802887ec12814a865f7e5f8307acd4339
|
| 3 |
+
size 3671
|
intents.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{"intents": [
|
| 2 |
+
{"tag": "options",
|
| 3 |
+
"patterns": ["show me options", "options", "what can you do", "what are my options"],
|
| 4 |
+
"responses": ["These are the options please choose one and tell me: 1-Coding, 2-Blog writing, 3-product marketing, 4-Website creating, 5-Digital marketing, 6-Social media content creating", "please choose one and tell me: 1-Coding, 2-Blog writing, 3-product marketing, 4-Website creating, 5-Digital marketing, 6-Social media content creating"]
|
| 5 |
+
|
| 6 |
+
},
|
| 7 |
+
{"tag": "Coding",
|
| 8 |
+
"patterns": ["Coding", "1-coding", "Code","programming"],
|
| 9 |
+
"responses": ["You can ask for 1-telegram bot, 2-discord bot, 3-Deep neural network in pytorch, 4-Deep neural network in tensorflow, 5-Classification model in pytorch, 6-Classification model in tensorflow, 7-Regression model in pytorch, 8-Complete working regression flow, 9-Pytorch chatbot, 10-Chatterbot chatbot", "You can ask: 1-telegram bot, 2-discord bot, 3-Deep neural network in pytorch, 4-Deep neural network in tensorflow, 5-Classification model in pytorch, 6-Classification model in tensorflow, 7-Regression model in pytorch, 8-Complete working regression flow, 9-Pytorch chatbot, 10-Chatterbot chatbot"]
|
| 10 |
+
},
|
| 11 |
+
{"tag": "telegram bot",
|
| 12 |
+
"patterns": ["telegram bot", "telegram", "1-telegram bot"],
|
| 13 |
+
"responses": ["Can you help me create a Telegram bot with Python code?", "I need a Telegram bot and I was wondering if you could provide me with some code to get started?", "I'm looking to create a Telegram bot using code, can you assist me with that?","Do you have any tips or resources for creating a Telegram bot with programming code?","I want to build a Telegram bot using code, can you guide me on the process and provide me with some example code?"]
|
| 14 |
+
},
|
| 15 |
+
{"tag": "discord bot",
|
| 16 |
+
"patterns": ["discord bot", "2-discord bot", "discord"],
|
| 17 |
+
"responses": ["Could you help me create a Discord bot using code in Python/JavaScript?", "I'm interested in building a Discord bot, do you have any resources or example code to help me get started","Can you assist me in creating a Discord bot with code? I'm not sure where to begin","I would like to create a Discord bot using programming code, can you provide me with guidance and some sample code?"]
|
| 18 |
+
},
|
| 19 |
+
{"tag": "Blog writing",
|
| 20 |
+
"patterns": ["blog writing", "Blog","writing"],
|
| 21 |
+
"responses": ["You can ask for: 1-health blog, 2-gaming blog", "You can ask for chatgpt: 1-health blog, 2-gaming blog"]
|
| 22 |
+
},
|
| 23 |
+
{"tag": "health blog",
|
| 24 |
+
"patterns": ["health", "health blog"],
|
| 25 |
+
"responses": ["I'm interested in having a health blog created, would you be able to help me with that?", "Can you assist me in building a health blog that covers various topics related to fitness, nutrition, and mental health?","I need a health blog created and I would like it to be informative and engaging, can you help me with that?"]
|
| 26 |
+
|
| 27 |
+
},
|
| 28 |
+
{"tag": "gaming blog",
|
| 29 |
+
"patterns": ["gaming blog", "gaming"],
|
| 30 |
+
"responses": ["I would like to create a blog focused on gaming and esports, can you help me get started?", "I'm looking to start a gaming blog and I need someone to create it for me, can you provide me with guidance and create a blog that meets my needs?","Can you assist me in building a gaming blog that covers various topics related to gaming news, reviews, and strategies?"]
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
]
|
| 34 |
+
}
|
source_data.py
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import random
|
| 2 |
+
import json
|
| 3 |
+
|
| 4 |
+
import torch
|
| 5 |
+
|
| 6 |
+
from model import NeuralNet
|
| 7 |
+
from nltk_utils import bag_of_words, tokenize
|
| 8 |
+
|
| 9 |
+
# Prompt three most commonly asked FAQs
|
| 10 |
+
samples = ""
|
| 11 |
+
|
| 12 |
+
device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
|
| 13 |
+
|
| 14 |
+
with open('intents.json', 'r') as json_data:
|
| 15 |
+
intents = json.load(json_data)
|
| 16 |
+
|
| 17 |
+
FILE = "data.pth"
|
| 18 |
+
data = torch.load(FILE)
|
| 19 |
+
|
| 20 |
+
input_size = data["input_size"]
|
| 21 |
+
hidden_size = data["hidden_size"]
|
| 22 |
+
output_size = data["output_size"]
|
| 23 |
+
all_words = data['all_words']
|
| 24 |
+
tags = data['tags']
|
| 25 |
+
model_state = data["model_state"]
|
| 26 |
+
|
| 27 |
+
model = NeuralNet(input_size, hidden_size, output_size).to(device)
|
| 28 |
+
model.load_state_dict(model_state)
|
| 29 |
+
model.eval()
|
| 30 |
+
|
| 31 |
+
bot_name = "chatgpt prompt bot"
|
| 32 |
+
|
| 33 |
+
|
| 34 |
+
def get_response(msg):
|
| 35 |
+
sentence = tokenize(msg)
|
| 36 |
+
X = bag_of_words(sentence, all_words)
|
| 37 |
+
X = X.reshape(1, X.shape[0])
|
| 38 |
+
X = torch.from_numpy(X).to(device)
|
| 39 |
+
|
| 40 |
+
output = model(X)
|
| 41 |
+
_, predicted = torch.max(output, dim=1)
|
| 42 |
+
|
| 43 |
+
tag = tags[predicted.item()]
|
| 44 |
+
|
| 45 |
+
probs = torch.softmax(output, dim=1)
|
| 46 |
+
prob = probs[0][predicted.item()]
|
| 47 |
+
if prob.item() > 0.85: # Increasing specifisity to reduce incorrect classifications
|
| 48 |
+
for intent in intents['intents']:
|
| 49 |
+
if tag == intent["tag"]:
|
| 50 |
+
return random.choice(intent['responses'])
|
| 51 |
+
|
| 52 |
+
return f"I'm sorry, but I cannot understand your query. {samples} "
|
| 53 |
+
|
| 54 |
+
|
| 55 |
+
if __name__ == "__main__":
|
| 56 |
+
print("Please enter options (type 'quit' to exit)")
|
| 57 |
+
while True:
|
| 58 |
+
# sentence = "do you use credit cards?"
|
| 59 |
+
sentence = input("You: ")
|
| 60 |
+
if sentence == "quit":
|
| 61 |
+
break
|
| 62 |
+
|
| 63 |
+
resp = get_response(sentence)
|
| 64 |
+
print(resp)
|
| 65 |
+
|
standalone-frontend/app.js
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class Chatbox {
|
| 2 |
+
constructor() {
|
| 3 |
+
this.args = {
|
| 4 |
+
openButton: document.querySelector('.chatbox__button'),
|
| 5 |
+
chatBox: document.querySelector('.chatbox__support'),
|
| 6 |
+
sendButton: document.querySelector('.send__button')
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
+
this.state = false;
|
| 10 |
+
this.messages = [];
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
display() {
|
| 14 |
+
const {openButton, chatBox, sendButton} = this.args;
|
| 15 |
+
|
| 16 |
+
openButton.addEventListener('click', () => this.toggleState(chatBox))
|
| 17 |
+
|
| 18 |
+
sendButton.addEventListener('click', () => this.onSendButton(chatBox))
|
| 19 |
+
|
| 20 |
+
const node = chatBox.querySelector('input');
|
| 21 |
+
node.addEventListener("keyup", ({key}) => {
|
| 22 |
+
if (key === "Enter") {
|
| 23 |
+
this.onSendButton(chatBox)
|
| 24 |
+
}
|
| 25 |
+
})
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
toggleState(chatbox) {
|
| 29 |
+
this.state = !this.state;
|
| 30 |
+
|
| 31 |
+
// show or hides the box
|
| 32 |
+
if(this.state) {
|
| 33 |
+
chatbox.classList.add('chatbox--active')
|
| 34 |
+
} else {
|
| 35 |
+
chatbox.classList.remove('chatbox--active')
|
| 36 |
+
}
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
onSendButton(chatbox) {
|
| 40 |
+
var textField = chatbox.querySelector('input');
|
| 41 |
+
let text1 = textField.value
|
| 42 |
+
if (text1 === "") {
|
| 43 |
+
return;
|
| 44 |
+
}
|
| 45 |
+
|
| 46 |
+
let msg1 = { name: "User", message: text1 }
|
| 47 |
+
this.messages.push(msg1);
|
| 48 |
+
|
| 49 |
+
fetch('http://127.0.0.1:5000/predict', {
|
| 50 |
+
method: 'POST',
|
| 51 |
+
body: JSON.stringify({ message: text1 }),
|
| 52 |
+
mode: 'cors',
|
| 53 |
+
headers: {
|
| 54 |
+
'Content-Type': 'application/json'
|
| 55 |
+
},
|
| 56 |
+
})
|
| 57 |
+
.then(r => r.json())
|
| 58 |
+
.then(r => {
|
| 59 |
+
let msg2 = { name: "Sam", message: r.answer };
|
| 60 |
+
this.messages.push(msg2);
|
| 61 |
+
this.updateChatText(chatbox)
|
| 62 |
+
textField.value = ''
|
| 63 |
+
|
| 64 |
+
}).catch((error) => {
|
| 65 |
+
console.error('Error:', error);
|
| 66 |
+
this.updateChatText(chatbox)
|
| 67 |
+
textField.value = ''
|
| 68 |
+
});
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
updateChatText(chatbox) {
|
| 72 |
+
var html = '';
|
| 73 |
+
this.messages.slice().reverse().forEach(function(item, index) {
|
| 74 |
+
if (item.name === "Sam")
|
| 75 |
+
{
|
| 76 |
+
html += '<div class="messages__item messages__item--visitor">' + item.message + '</div>'
|
| 77 |
+
}
|
| 78 |
+
else
|
| 79 |
+
{
|
| 80 |
+
html += '<div class="messages__item messages__item--operator">' + item.message + '</div>'
|
| 81 |
+
}
|
| 82 |
+
});
|
| 83 |
+
|
| 84 |
+
const chatmessage = chatbox.querySelector('.chatbox__messages');
|
| 85 |
+
chatmessage.innerHTML = html;
|
| 86 |
+
}
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
|
| 90 |
+
const chatbox = new Chatbox();
|
| 91 |
+
chatbox.display();
|
standalone-frontend/base.html
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<link rel="stylesheet" href="style.css">
|
| 4 |
+
|
| 5 |
+
<head>
|
| 6 |
+
<meta charset="UTF-8">
|
| 7 |
+
<title>Chatbot</title>
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div class="container">
|
| 11 |
+
<div class="chatbox">
|
| 12 |
+
<div class="chatbox__support">
|
| 13 |
+
<div class="chatbox__header">
|
| 14 |
+
<div class="chatbox__image--header">
|
| 15 |
+
<img src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png" alt="image">
|
| 16 |
+
</div>
|
| 17 |
+
<div class="chatbox__content--header">
|
| 18 |
+
<h4 class="chatbox__heading--header">Chat support</h4>
|
| 19 |
+
<p class="chatbox__description--header">Hi. My name is Sam. How can I help you?</p>
|
| 20 |
+
</div>
|
| 21 |
+
</div>
|
| 22 |
+
<div class="chatbox__messages">
|
| 23 |
+
<div></div>
|
| 24 |
+
</div>
|
| 25 |
+
<div class="chatbox__footer">
|
| 26 |
+
<input type="text" placeholder="Write a message...">
|
| 27 |
+
<button class="chatbox__send--footer send__button">Send</button>
|
| 28 |
+
</div>
|
| 29 |
+
</div>
|
| 30 |
+
<div class="chatbox__button">
|
| 31 |
+
<button><img src="./images/chatbox-icon.svg" /></button>
|
| 32 |
+
</div>
|
| 33 |
+
</div>
|
| 34 |
+
</div>
|
| 35 |
+
|
| 36 |
+
<script src="./app.js"></script>
|
| 37 |
+
|
| 38 |
+
</body>
|
| 39 |
+
</html>
|
standalone-frontend/style.css
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
* {
|
| 2 |
+
box-sizing: border-box;
|
| 3 |
+
margin: 0;
|
| 4 |
+
padding: 0;
|
| 5 |
+
}
|
| 6 |
+
|
| 7 |
+
body {
|
| 8 |
+
font-family: 'Nunito', sans-serif;
|
| 9 |
+
font-weight: 400;
|
| 10 |
+
font-size: 100%;
|
| 11 |
+
background: #F1F1F1;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
*, html {
|
| 15 |
+
--primaryGradient: linear-gradient(93.12deg, #581B98 0.52%, #9C1DE7 100%);
|
| 16 |
+
--secondaryGradient: linear-gradient(268.91deg, #581B98 -2.14%, #9C1DE7 99.69%);
|
| 17 |
+
--primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
|
| 18 |
+
--secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
|
| 19 |
+
--primary: #581B98;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
/* CHATBOX
|
| 23 |
+
=============== */
|
| 24 |
+
.chatbox {
|
| 25 |
+
position: absolute;
|
| 26 |
+
bottom: 30px;
|
| 27 |
+
right: 30px;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
/* CONTENT IS CLOSE */
|
| 31 |
+
.chatbox__support {
|
| 32 |
+
display: flex;
|
| 33 |
+
flex-direction: column;
|
| 34 |
+
background: #eee;
|
| 35 |
+
width: 300px;
|
| 36 |
+
height: 350px;
|
| 37 |
+
z-index: -123456;
|
| 38 |
+
opacity: 0;
|
| 39 |
+
transition: all .5s ease-in-out;
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
/* CONTENT ISOPEN */
|
| 43 |
+
.chatbox--active {
|
| 44 |
+
transform: translateY(-40px);
|
| 45 |
+
z-index: 123456;
|
| 46 |
+
opacity: 1;
|
| 47 |
+
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
/* BUTTON */
|
| 51 |
+
.chatbox__button {
|
| 52 |
+
text-align: right;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.send__button {
|
| 56 |
+
padding: 6px;
|
| 57 |
+
background: transparent;
|
| 58 |
+
border: none;
|
| 59 |
+
outline: none;
|
| 60 |
+
cursor: pointer;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
|
| 64 |
+
/* HEADER */
|
| 65 |
+
.chatbox__header {
|
| 66 |
+
position: sticky;
|
| 67 |
+
top: 0;
|
| 68 |
+
background: orange;
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
/* MESSAGES */
|
| 72 |
+
.chatbox__messages {
|
| 73 |
+
margin-top: auto;
|
| 74 |
+
display: flex;
|
| 75 |
+
overflow-y: scroll;
|
| 76 |
+
flex-direction: column-reverse;
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
.messages__item {
|
| 80 |
+
background: orange;
|
| 81 |
+
max-width: 60.6%;
|
| 82 |
+
width: fit-content;
|
| 83 |
+
}
|
| 84 |
+
|
| 85 |
+
.messages__item--operator {
|
| 86 |
+
margin-left: auto;
|
| 87 |
+
}
|
| 88 |
+
|
| 89 |
+
.messages__item--visitor {
|
| 90 |
+
margin-right: auto;
|
| 91 |
+
}
|
| 92 |
+
|
| 93 |
+
/* FOOTER */
|
| 94 |
+
.chatbox__footer {
|
| 95 |
+
position: sticky;
|
| 96 |
+
bottom: 0;
|
| 97 |
+
}
|
| 98 |
+
|
| 99 |
+
.chatbox__support {
|
| 100 |
+
background: #f9f9f9;
|
| 101 |
+
height: 450px;
|
| 102 |
+
width: 350px;
|
| 103 |
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
|
| 104 |
+
border-top-left-radius: 20px;
|
| 105 |
+
border-top-right-radius: 20px;
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
+
/* HEADER */
|
| 109 |
+
.chatbox__header {
|
| 110 |
+
background: var(--primaryGradient);
|
| 111 |
+
display: flex;
|
| 112 |
+
flex-direction: row;
|
| 113 |
+
align-items: center;
|
| 114 |
+
justify-content: center;
|
| 115 |
+
padding: 15px 20px;
|
| 116 |
+
border-top-left-radius: 20px;
|
| 117 |
+
border-top-right-radius: 20px;
|
| 118 |
+
box-shadow: var(--primaryBoxShadow);
|
| 119 |
+
}
|
| 120 |
+
|
| 121 |
+
.chatbox__image--header {
|
| 122 |
+
margin-right: 10px;
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
.chatbox__heading--header {
|
| 126 |
+
font-size: 1.2rem;
|
| 127 |
+
color: white;
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
.chatbox__description--header {
|
| 131 |
+
font-size: .9rem;
|
| 132 |
+
color: white;
|
| 133 |
+
}
|
| 134 |
+
|
| 135 |
+
/* Messages */
|
| 136 |
+
.chatbox__messages {
|
| 137 |
+
padding: 0 20px;
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
.messages__item {
|
| 141 |
+
margin-top: 10px;
|
| 142 |
+
background: #E0E0E0;
|
| 143 |
+
padding: 8px 12px;
|
| 144 |
+
max-width: 70%;
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
.messages__item--visitor,
|
| 148 |
+
.messages__item--typing {
|
| 149 |
+
border-top-left-radius: 20px;
|
| 150 |
+
border-top-right-radius: 20px;
|
| 151 |
+
border-bottom-right-radius: 20px;
|
| 152 |
+
}
|
| 153 |
+
|
| 154 |
+
.messages__item--operator {
|
| 155 |
+
border-top-left-radius: 20px;
|
| 156 |
+
border-top-right-radius: 20px;
|
| 157 |
+
border-bottom-left-radius: 20px;
|
| 158 |
+
background: var(--primary);
|
| 159 |
+
color: white;
|
| 160 |
+
}
|
| 161 |
+
|
| 162 |
+
/* FOOTER */
|
| 163 |
+
.chatbox__footer {
|
| 164 |
+
display: flex;
|
| 165 |
+
flex-direction: row;
|
| 166 |
+
align-items: center;
|
| 167 |
+
justify-content: space-between;
|
| 168 |
+
padding: 20px 20px;
|
| 169 |
+
background: var(--secondaryGradient);
|
| 170 |
+
box-shadow: var(--secondaryBoxShadow);
|
| 171 |
+
border-bottom-right-radius: 10px;
|
| 172 |
+
border-bottom-left-radius: 10px;
|
| 173 |
+
margin-top: 20px;
|
| 174 |
+
}
|
| 175 |
+
|
| 176 |
+
.chatbox__footer input {
|
| 177 |
+
width: 80%;
|
| 178 |
+
border: none;
|
| 179 |
+
padding: 10px 10px;
|
| 180 |
+
border-radius: 30px;
|
| 181 |
+
text-align: left;
|
| 182 |
+
}
|
| 183 |
+
|
| 184 |
+
.chatbox__send--footer {
|
| 185 |
+
color: white;
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
+
.chatbox__button button,
|
| 189 |
+
.chatbox__button button:focus,
|
| 190 |
+
.chatbox__button button:visited {
|
| 191 |
+
padding: 10px;
|
| 192 |
+
background: white;
|
| 193 |
+
border: none;
|
| 194 |
+
outline: none;
|
| 195 |
+
border-top-left-radius: 50px;
|
| 196 |
+
border-top-right-radius: 50px;
|
| 197 |
+
border-bottom-left-radius: 50px;
|
| 198 |
+
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
|
| 199 |
+
cursor: pointer;
|
| 200 |
+
}
|
static/app.js
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class Chatbox {
|
| 2 |
+
constructor() {
|
| 3 |
+
this.args = {
|
| 4 |
+
openButton: document.querySelector('.chatbox__button'),
|
| 5 |
+
chatBox: document.querySelector('.chatbox__support'),
|
| 6 |
+
sendButton: document.querySelector('.send__button')
|
| 7 |
+
}
|
| 8 |
+
|
| 9 |
+
this.state = false;
|
| 10 |
+
this.messages = [];
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
display() {
|
| 14 |
+
const {openButton, chatBox, sendButton} = this.args;
|
| 15 |
+
|
| 16 |
+
this.prompt(chatBox)
|
| 17 |
+
|
| 18 |
+
openButton.addEventListener('click', () => this.toggleState(chatBox))
|
| 19 |
+
|
| 20 |
+
sendButton.addEventListener('click', () => this.onSendButton(chatBox))
|
| 21 |
+
|
| 22 |
+
const node = chatBox.querySelector('input');
|
| 23 |
+
node.addEventListener("keyup", ({key}) => {
|
| 24 |
+
if (key === "Enter") {
|
| 25 |
+
this.onSendButton(chatBox)
|
| 26 |
+
}
|
| 27 |
+
})
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
prompt(chatbox) {
|
| 31 |
+
this.messages.push({ name: "Bot", message: "Hi! I'm Chatgpt prompt assistant. Please type 'options' " });
|
| 32 |
+
this.updateChatText(chatbox)
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
toggleState(chatbox) {
|
| 36 |
+
this.state = !this.state;
|
| 37 |
+
// show or hides the box
|
| 38 |
+
if(this.state) {
|
| 39 |
+
chatbox.classList.add('chatbox--active')
|
| 40 |
+
} else {
|
| 41 |
+
chatbox.classList.remove('chatbox--active')
|
| 42 |
+
}
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
onSendButton(chatbox) {
|
| 46 |
+
var textField = chatbox.querySelector('input');
|
| 47 |
+
let text1 = textField.value
|
| 48 |
+
if (text1 === "") {
|
| 49 |
+
return;
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
+
let msg1 = { name: "User", message: text1 }
|
| 53 |
+
this.messages.push(msg1);
|
| 54 |
+
|
| 55 |
+
fetch($SCRIPT_ROOT + '/predict', {
|
| 56 |
+
method: 'POST',
|
| 57 |
+
body: JSON.stringify({ message: text1 }),
|
| 58 |
+
mode: 'cors',
|
| 59 |
+
headers: {
|
| 60 |
+
'Content-Type': 'application/json'
|
| 61 |
+
},
|
| 62 |
+
})
|
| 63 |
+
.then(r => r.json())
|
| 64 |
+
.then(r => {
|
| 65 |
+
let msg2 = { name: "Bot", message: r.answer };
|
| 66 |
+
this.messages.push(msg2);
|
| 67 |
+
this.updateChatText(chatbox)
|
| 68 |
+
textField.value = ''
|
| 69 |
+
|
| 70 |
+
}).catch((error) => {
|
| 71 |
+
console.error('Error:', error);
|
| 72 |
+
this.updateChatText(chatbox)
|
| 73 |
+
textField.value = ''
|
| 74 |
+
});
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
updateChatText(chatbox) {
|
| 78 |
+
var html = '';
|
| 79 |
+
this.messages.slice().reverse().forEach(function(item, index) {
|
| 80 |
+
if (item.name === "Bot")
|
| 81 |
+
{
|
| 82 |
+
html += '<div class="messages__item messages__item--visitor">' + item.message + '</div>'
|
| 83 |
+
}
|
| 84 |
+
else
|
| 85 |
+
{
|
| 86 |
+
html += '<div class="messages__item messages__item--operator">' + item.message + '</div>'
|
| 87 |
+
}
|
| 88 |
+
});
|
| 89 |
+
|
| 90 |
+
const chatmessage = chatbox.querySelector('.chatbox__messages');
|
| 91 |
+
chatmessage.innerHTML = html;
|
| 92 |
+
}
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
|
| 96 |
+
const chatbox = new Chatbox();
|
| 97 |
+
chatbox.display();
|
| 98 |
+
|
| 99 |
+
// let promise = new Promise(chatbox.display(resolve, reject) {
|
| 100 |
+
// // the function is executed automatically when the promise is constructed
|
| 101 |
+
|
| 102 |
+
// // after 1 second signal that the job is done with the result "done"
|
| 103 |
+
// setTimeout(() => resolve("Done"), 1000);
|
| 104 |
+
// });
|
static/base.html
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
| 4 |
+
|
| 5 |
+
<head>
|
| 6 |
+
<meta charset="UTF-8">
|
| 7 |
+
<title>Chatbot</title>
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
|
| 11 |
+
<h2 align="center"></h2>
|
| 12 |
+
<div class="container">
|
| 13 |
+
<div class="chatbox">
|
| 14 |
+
<div class="chatbox__support">
|
| 15 |
+
<div class="chatbox__header">
|
| 16 |
+
<div class="chatbox__image--header">
|
| 17 |
+
<img src="https://img.icons8.com/color/48/000000/circled-user-female-skin-type-5--v1.png" alt="image">
|
| 18 |
+
</div>
|
| 19 |
+
<div class="chatbox__content--header">
|
| 20 |
+
<h4 class="chatbox__heading--header">Chatgpt prompt assistant</h4>
|
| 21 |
+
|
| 22 |
+
</div>
|
| 23 |
+
</div>
|
| 24 |
+
<div class="chatbox__messages">
|
| 25 |
+
<div></div>
|
| 26 |
+
</div>
|
| 27 |
+
<div class="chatbox__footer">
|
| 28 |
+
<input type="text" placeholder="Write a message...">
|
| 29 |
+
<button class="chatbox__send--footer send__button">Send</button>
|
| 30 |
+
</div>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="chatbox__button">
|
| 33 |
+
<button><img src="{{ url_for('static', filename='images/chatbox-icon.svg') }}" /></button>
|
| 34 |
+
</div>
|
| 35 |
+
</div>
|
| 36 |
+
</div>
|
| 37 |
+
|
| 38 |
+
<script>
|
| 39 |
+
$SCRIPT_ROOT = {{ request.script_root|tojson }};
|
| 40 |
+
</script>
|
| 41 |
+
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
|
| 42 |
+
|
| 43 |
+
</body>
|
| 44 |
+
</html>
|
static/chatbox-icon.png
ADDED
|
|
static/chatgpt_background.jpg
ADDED
|
static/images/chatbox-icon.svg
ADDED
|
|
static/new.png
ADDED
|
static/style.css
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
* {
|
| 2 |
+
box-sizing: border-box;
|
| 3 |
+
margin: 0;
|
| 4 |
+
padding: 0;
|
| 5 |
+
}
|
| 6 |
+
|
| 7 |
+
body {
|
| 8 |
+
font-family: 'Nunito', sans-serif;
|
| 9 |
+
font-weight: 400;
|
| 10 |
+
font-size: 100%;
|
| 11 |
+
background-image: url('new.png');
|
| 12 |
+
background-repeat: no-repeat;
|
| 13 |
+
background-size: cover;
|
| 14 |
+
|
| 15 |
+
}
|
| 16 |
+
|
| 17 |
+
/* rest of your code */
|
| 18 |
+
|
| 19 |
+
*, html {
|
| 20 |
+
--primaryGradient: linear-gradient(93.12deg, #1d4791 0.52%, #008aff 100%);
|
| 21 |
+
--secondaryGradient: linear-gradient(268.91deg, #1d4791 -2.14%, #008aff 99.69%);
|
| 22 |
+
--primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
|
| 23 |
+
--secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
|
| 24 |
+
--primary: #1b2398;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
/* CHATBOX
|
| 28 |
+
=============== */
|
| 29 |
+
.chatbox {
|
| 30 |
+
position: absolute;
|
| 31 |
+
bottom: 30px;
|
| 32 |
+
right: 30px;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
/* CONTENT IS CLOSE */
|
| 36 |
+
.chatbox__support {
|
| 37 |
+
display: flex;
|
| 38 |
+
flex-direction: column;
|
| 39 |
+
background: #369df8;
|
| 40 |
+
width: 300px;
|
| 41 |
+
height: 350px;
|
| 42 |
+
z-index: -123456;
|
| 43 |
+
opacity: 0;
|
| 44 |
+
transition: all .5s ease-in-out;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
/* CONTENT ISOPEN */
|
| 48 |
+
.chatbox--active {
|
| 49 |
+
transform: translateY(-40px);
|
| 50 |
+
z-index: 123456;
|
| 51 |
+
opacity: 1;
|
| 52 |
+
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
/* BUTTON */
|
| 56 |
+
.chatbox__button {
|
| 57 |
+
text-align: right;
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
.send__button {
|
| 61 |
+
padding: 6px;
|
| 62 |
+
background: transparent;
|
| 63 |
+
border: none;
|
| 64 |
+
outline: none;
|
| 65 |
+
cursor: pointer;
|
| 66 |
+
}
|
| 67 |
+
|
| 68 |
+
|
| 69 |
+
/* HEADER */
|
| 70 |
+
.chatbox__header {
|
| 71 |
+
position: sticky;
|
| 72 |
+
top: 0;
|
| 73 |
+
background: white;
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
/* MESSAGES */
|
| 77 |
+
.chatbox__messages {
|
| 78 |
+
margin-top: auto;
|
| 79 |
+
display: flex;
|
| 80 |
+
overflow-y: scroll;
|
| 81 |
+
flex-direction: column-reverse;
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
.messages__item {
|
| 85 |
+
background: white;
|
| 86 |
+
max-width: 60.6%;
|
| 87 |
+
width: fit-content;
|
| 88 |
+
}
|
| 89 |
+
|
| 90 |
+
.messages__item--operator {
|
| 91 |
+
margin-left: auto;
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
.messages__item--visitor {
|
| 95 |
+
margin-right: auto;
|
| 96 |
+
}
|
| 97 |
+
|
| 98 |
+
/* FOOTER */
|
| 99 |
+
.chatbox__footer {
|
| 100 |
+
position: sticky;
|
| 101 |
+
bottom: 0;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
.chatbox__support {
|
| 105 |
+
background: #008aff;
|
| 106 |
+
height: 450px;
|
| 107 |
+
width: 350px;
|
| 108 |
+
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
|
| 109 |
+
border-top-left-radius: 20px;
|
| 110 |
+
border-top-right-radius: 20px;
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
/* HEADER */
|
| 114 |
+
.chatbox__header {
|
| 115 |
+
background: 'white';
|
| 116 |
+
display: flex;
|
| 117 |
+
flex-direction: row;
|
| 118 |
+
align-items: center;
|
| 119 |
+
justify-content: center;
|
| 120 |
+
padding: 15px 20px;
|
| 121 |
+
border-top-left-radius: 20px;
|
| 122 |
+
border-top-right-radius: 20px;
|
| 123 |
+
box-shadow: var(--primaryBoxShadow);
|
| 124 |
+
}
|
| 125 |
+
|
| 126 |
+
.chatbox__image--header {
|
| 127 |
+
margin-right: 10px;
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
.chatbox__heading--header {
|
| 131 |
+
font-size: 1.2rem;
|
| 132 |
+
color: #008aff;
|
| 133 |
+
}
|
| 134 |
+
|
| 135 |
+
.chatbox__description--header {
|
| 136 |
+
font-size: .9rem;
|
| 137 |
+
color: #008aff
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
/* Messages */
|
| 141 |
+
.chatbox__messages {
|
| 142 |
+
padding: 0 20px;
|
| 143 |
+
}
|
| 144 |
+
|
| 145 |
+
.messages__item {
|
| 146 |
+
margin-top: 10px;
|
| 147 |
+
background: 'white';
|
| 148 |
+
padding: 8px 12px;
|
| 149 |
+
max-width: 70%;
|
| 150 |
+
}
|
| 151 |
+
|
| 152 |
+
.messages__item--visitor,
|
| 153 |
+
.messages__item--typing {
|
| 154 |
+
border-top-left-radius: 20px;
|
| 155 |
+
border-top-right-radius: 20px;
|
| 156 |
+
border-bottom-right-radius: 20px;
|
| 157 |
+
}
|
| 158 |
+
|
| 159 |
+
.messages__item--operator {
|
| 160 |
+
border-top-left-radius: 20px;
|
| 161 |
+
border-top-right-radius: 20px;
|
| 162 |
+
border-bottom-left-radius: 20px;
|
| 163 |
+
background: 'white';
|
| 164 |
+
color: 'white';
|
| 165 |
+
}
|
| 166 |
+
|
| 167 |
+
/* FOOTER */
|
| 168 |
+
.chatbox__footer {
|
| 169 |
+
display: flex;
|
| 170 |
+
flex-direction: row;
|
| 171 |
+
align-items: center;
|
| 172 |
+
justify-content: space-between;
|
| 173 |
+
padding: 20px 20px;
|
| 174 |
+
background: var(--secondaryGradient);
|
| 175 |
+
box-shadow: var(--secondaryBoxShadow);
|
| 176 |
+
border-bottom-right-radius: 10px;
|
| 177 |
+
border-bottom-left-radius: 10px;
|
| 178 |
+
margin-top: 20px;
|
| 179 |
+
}
|
| 180 |
+
|
| 181 |
+
.chatbox__footer input {
|
| 182 |
+
width: 80%;
|
| 183 |
+
border: none;
|
| 184 |
+
padding: 10px 10px;
|
| 185 |
+
border-radius: 30px;
|
| 186 |
+
text-align: left;
|
| 187 |
+
}
|
| 188 |
+
|
| 189 |
+
.chatbox__send--footer {
|
| 190 |
+
color: #008aff;
|
| 191 |
+
}
|
| 192 |
+
|
| 193 |
+
.chatbox__button button,
|
| 194 |
+
.chatbox__button button:focus,
|
| 195 |
+
.chatbox__button button:visited {
|
| 196 |
+
padding: 10px;
|
| 197 |
+
background: #008aff;
|
| 198 |
+
border: none;
|
| 199 |
+
outline: none;
|
| 200 |
+
border-top-left-radius: 50px;
|
| 201 |
+
border-top-right-radius: 50px;
|
| 202 |
+
border-bottom-left-radius: 50px;
|
| 203 |
+
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
|
| 204 |
+
cursor: pointer;
|
| 205 |
+
}
|
templates/base.html
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
| 4 |
+
|
| 5 |
+
<head>
|
| 6 |
+
<meta charset="UTF-8">
|
| 7 |
+
<title>Chatbot</title>
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
|
| 11 |
+
<h2 align="center"></h2>
|
| 12 |
+
<div class="container">
|
| 13 |
+
<div class="chatbox">
|
| 14 |
+
<div class="chatbox__support">
|
| 15 |
+
<div class="chatbox__header">
|
| 16 |
+
<div class="chatbox__image--header">
|
| 17 |
+
<img src="chatbox-icon.png" alt="image">
|
| 18 |
+
</div>
|
| 19 |
+
<div class="chatbox__content--header">
|
| 20 |
+
<h4 class="chatbox__heading--header">Chatgpt prompt assistant</h4>
|
| 21 |
+
|
| 22 |
+
</div>
|
| 23 |
+
</div>
|
| 24 |
+
<div class="chatbox__messages">
|
| 25 |
+
<div></div>
|
| 26 |
+
</div>
|
| 27 |
+
<div class="chatbox__footer">
|
| 28 |
+
<input type="text" placeholder="Write a message...">
|
| 29 |
+
<button class="chatbox__send--footer send__button">Send</button>
|
| 30 |
+
</div>
|
| 31 |
+
</div>
|
| 32 |
+
<div class="chatbox__button">
|
| 33 |
+
<button><img src="{{ url_for('static', filename='images/chatbox-icon.svg') }}" /></button>
|
| 34 |
+
</div>
|
| 35 |
+
</div>
|
| 36 |
+
</div>
|
| 37 |
+
|
| 38 |
+
<script>
|
| 39 |
+
$SCRIPT_ROOT = {{ request.script_root|tojson }};
|
| 40 |
+
</script>
|
| 41 |
+
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
|
| 42 |
+
|
| 43 |
+
</body>
|
| 44 |
+
</html>
|
train.py
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import numpy as np
|
| 2 |
+
import random
|
| 3 |
+
import json
|
| 4 |
+
|
| 5 |
+
import torch
|
| 6 |
+
import torch.nn as nn
|
| 7 |
+
from torch.utils.data import Dataset, DataLoader
|
| 8 |
+
|
| 9 |
+
from nltk_utils import bag_of_words, tokenize, stem
|
| 10 |
+
from model import NeuralNet
|
| 11 |
+
|
| 12 |
+
# Make sure you run this file as many times as it takes to get a low value for loss ~0.0004, so that gibberish words will not be misinterpreted
|
| 13 |
+
with open('intents.json', 'r') as f:
|
| 14 |
+
intents = json.load(f)
|
| 15 |
+
|
| 16 |
+
all_words = []
|
| 17 |
+
tags = []
|
| 18 |
+
xy = []
|
| 19 |
+
# loop through each sentence in our intents patterns
|
| 20 |
+
for intent in intents['intents']:
|
| 21 |
+
tag = intent['tag']
|
| 22 |
+
# add to tag list
|
| 23 |
+
tags.append(tag)
|
| 24 |
+
for pattern in intent['patterns']:
|
| 25 |
+
# tokenize each word in the sentence
|
| 26 |
+
w = tokenize(pattern)
|
| 27 |
+
# add to our words list
|
| 28 |
+
all_words.extend(w)
|
| 29 |
+
# add to xy pair
|
| 30 |
+
xy.append((w, tag))
|
| 31 |
+
|
| 32 |
+
# stem and lower each word
|
| 33 |
+
ignore_words = ['?', '.', '!']
|
| 34 |
+
all_words = [stem(w) for w in all_words if w not in ignore_words]
|
| 35 |
+
# remove duplicates and sort
|
| 36 |
+
all_words = sorted(set(all_words))
|
| 37 |
+
tags = sorted(set(tags))
|
| 38 |
+
|
| 39 |
+
print(len(xy), "patterns")
|
| 40 |
+
print(len(tags), "tags:", tags)
|
| 41 |
+
print(len(all_words), "unique stemmed words:", all_words)
|
| 42 |
+
|
| 43 |
+
# create training data
|
| 44 |
+
X_train = []
|
| 45 |
+
y_train = []
|
| 46 |
+
for (pattern_sentence, tag) in xy:
|
| 47 |
+
# X: bag of words for each pattern_sentence
|
| 48 |
+
bag = bag_of_words(pattern_sentence, all_words)
|
| 49 |
+
X_train.append(bag)
|
| 50 |
+
# y: PyTorch CrossEntropyLoss needs only class labels, not one-hot
|
| 51 |
+
label = tags.index(tag)
|
| 52 |
+
y_train.append(label)
|
| 53 |
+
|
| 54 |
+
X_train = np.array(X_train)
|
| 55 |
+
y_train = np.array(y_train)
|
| 56 |
+
|
| 57 |
+
# Hyper-parameters
|
| 58 |
+
num_epochs = 1000
|
| 59 |
+
batch_size = 8
|
| 60 |
+
learning_rate = 0.001
|
| 61 |
+
input_size = len(X_train[0])
|
| 62 |
+
hidden_size = 8
|
| 63 |
+
output_size = len(tags)
|
| 64 |
+
print(input_size, output_size)
|
| 65 |
+
|
| 66 |
+
|
| 67 |
+
class ChatDataset(Dataset):
|
| 68 |
+
|
| 69 |
+
def __init__(self):
|
| 70 |
+
self.n_samples = len(X_train)
|
| 71 |
+
self.x_data = X_train
|
| 72 |
+
self.y_data = y_train
|
| 73 |
+
|
| 74 |
+
# support indexing such that dataset[i] can be used to get i-th sample
|
| 75 |
+
def __getitem__(self, index):
|
| 76 |
+
return self.x_data[index], self.y_data[index]
|
| 77 |
+
|
| 78 |
+
# we can call len(dataset) to return the size
|
| 79 |
+
def __len__(self):
|
| 80 |
+
return self.n_samples
|
| 81 |
+
|
| 82 |
+
|
| 83 |
+
dataset = ChatDataset()
|
| 84 |
+
train_loader = DataLoader(dataset=dataset,
|
| 85 |
+
batch_size=batch_size,
|
| 86 |
+
shuffle=True,
|
| 87 |
+
num_workers=0)
|
| 88 |
+
|
| 89 |
+
device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
|
| 90 |
+
|
| 91 |
+
model = NeuralNet(input_size, hidden_size, output_size).to(device)
|
| 92 |
+
|
| 93 |
+
# Loss and optimizer
|
| 94 |
+
criterion = nn.CrossEntropyLoss()
|
| 95 |
+
optimizer = torch.optim.Adam(model.parameters(), lr=learning_rate)
|
| 96 |
+
|
| 97 |
+
# Train the model
|
| 98 |
+
for epoch in range(num_epochs):
|
| 99 |
+
for (words, labels) in train_loader:
|
| 100 |
+
words = words.to(device)
|
| 101 |
+
labels = labels.to(dtype=torch.long).to(device)
|
| 102 |
+
|
| 103 |
+
# Forward pass
|
| 104 |
+
outputs = model(words)
|
| 105 |
+
# if y would be one-hot, we must apply
|
| 106 |
+
# labels = torch.max(labels, 1)[1]
|
| 107 |
+
loss = criterion(outputs, labels)
|
| 108 |
+
|
| 109 |
+
# Backward and optimize
|
| 110 |
+
optimizer.zero_grad()
|
| 111 |
+
loss.backward()
|
| 112 |
+
optimizer.step()
|
| 113 |
+
|
| 114 |
+
if (epoch + 1) % 100 == 0:
|
| 115 |
+
print(f'Epoch [{epoch + 1}/{num_epochs}], Loss: {loss.item():.4f}')
|
| 116 |
+
|
| 117 |
+
print(f'final loss: {loss.item():.4f}')
|
| 118 |
+
|
| 119 |
+
data = {
|
| 120 |
+
"model_state": model.state_dict(),
|
| 121 |
+
"input_size": input_size,
|
| 122 |
+
"hidden_size": hidden_size,
|
| 123 |
+
"output_size": output_size,
|
| 124 |
+
"all_words": all_words,
|
| 125 |
+
"tags": tags
|
| 126 |
+
}
|
| 127 |
+
|
| 128 |
+
FILE = "data.pth"
|
| 129 |
+
torch.save(data, FILE)
|
| 130 |
+
|
| 131 |
+
print(f'training complete. file saved to {FILE}')
|