I am creating a simple chatbot in Flask using the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Flask Chatterbot Example</h1>
<h3>A web implementation of <a href="https://github.com/gunthercox/ChatterBot">ChatterBot</a> using Flask.</h3>
<div>
<div id="chatbox">
<p class="botText"><span>Hi! I'm Chatterbot.</span></p>
</div>
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message">
<input id="buttonInput" type="submit" value="Send">
</div>
<script>
function getBotResponse() {
var rawText = $("#textInput").val();
var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
$("#textInput").val("");
$("#chatbox").append(userHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
$.get("/get", { msg: rawText }).done(function(data) {
var botHtml = '<p class="botText"><span>' + data + '</span></p>';
$("#chatbox").append(botHtml);
document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
});
}
$("#textInput").keypress(function(e) {
if ((e.which == 13) && document.getElementById("textInput").value != "" ){
getBotResponse();
}
});
$("#buttonInput").click(function() {
if (document.getElementById("textInput").value != "") {
getBotResponse();
}
})
</script>
</div>
</body>
</html>
which is from https://github.com/chamkank/flask-chatterbot/blob/master/templates/index.html.
I would like to give the user the possibility of evaluating the responses of the chatbot by reacting to them, for example with a thumbs up or a thumbs down.
Can anyone help me understand how to add it to the code? Thanks!