Few weeks back I wrote a post Build your first ChatBot in 5 minutes.
That bot was cool and you can talk through terminal. Today, let’s try to build the same bot with Flask.
So, we will use ChatterBot which is a machine learning, conversational dialog engine for creating chat bots.
If you haven’t read my previous post go here
Install ChatterBot
$ pip install ChatterBot
Install Flask
$ pip install Flask
Create a file
app.py and open it
#import files
from flask import Flask, render_template, request
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer
from chatterbot.trainers import ListTrainer
Create a flask app
app = Flask(__name__)
and as we have seen in my previous post
bot = ChatBot("Candice")
bot.set_trainer(ListTrainer)
bot.set_trainer(ChatterBotCorpusTrainer)
bot.train("chatterbot.corpus.english")
and after this
@app.route("/")
def home():
return render_template("home.html")
@app.route("/get")
def get_bot_response():
userText = request.args.get('msg')
return str(bot.get_response(userText))
if __name__ == "__main__":
app.run()
So, as we can see we need to create a home.html file as a frontend.
Create a folder “templates” and inside that create a file home.html.
templates/home.html
Open home.html
<!DOCTYPE html>
<html>
<title>Candice</title>
<body>
<center>
<h1>
Your Personal ChatBot
</h1>
</center>
<div>
<p>
<center><span>Hi! I'm Candice your personal ChatBot</span></center>
</p>
</div>
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message" />
</div>
</body>
</html>
So, this is just a basic structure let’s add some css to it. We are not creating another file for css, we are just adding style into home.html
<head>
<link
rel="shortcut icon"
type="image/x-icon"
href="https://user-images.githubusercontent.com/20112458/49326597-773b7280-f57a-11e8-853d-20ed61d18b0d.png"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
font-family: monospace;
}
h1 {
background-color: yellow;
display: inline-block;
font-size: 3em;
margin: 0;
padding: 14px;
}
h3 {
color: black;
font-size: 20px;
margin-top: 3px;
text-align: center;
}
#chatbox {
margin-left: auto;
margin-right: auto;
width: 40%;
margin-top: 60px;
}
#userInput {
margin-left: auto;
margin-right: auto;
width: 40%;
margin-top: 60px;
}
#textInput {
width: 90%;
border: none;
border-bottom: 3px solid black;
font-family: monospace;
font-size: 17px;
}
.userText {
color: white;
font-family: monospace;
font-size: 17px;
text-align: right;
line-height: 30px;
}
.userText span {
background-color: #808080;
padding: 10px;
border-radius: 2px;
}
.botText {
color: white;
font-family: monospace;
font-size: 17px;
text-align: left;
line-height: 30px;
}
.botText span {
background-color: #4169e1;
padding: 10px;
border-radius: 2px;
}
#tidbit {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
}
.boxed {
margin-left: auto;
margin-right: auto;
width: 78%;
margin-top: 60px;
border: 1px solid green;
}
.box {
border: 2px solid black;
}
</style>
</head>
Now, after that let’s change body structure.
<body>
<center>
<h1>
<img
src="https://user-images.githubusercontent.com/20112458/49326597-773b7280-f57a-11e8-853d-20ed61d18b0d.png"
alt="CANDICE"
style="width:40px;height:40px;"
/>Your Personal ChatBot
</h1>
</center>
<div class="box"></div>
<div class="boxed">
<div>
<div id="chatbox">
<img
src="https://user-images.githubusercontent.com/20112458/49326597-773b7280-f57a-11e8-853d-20ed61d18b0d.png"
alt="CANDICE"
style="width:40px;height:40px;"
/>
<p class="botText">
<span>Hi! I'm Candice your personal ChatBot</span>
</p>
</div>
<div id="userInput">
<input id="textInput" type="text" name="msg" placeholder="Message" />
</div>
</div>
</div>
</body>
Now, if we type something nothing will happen. So, let’s add some script
<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) {
getBotResponse();
}
});
</script>
Now, you will see whatever you write will be shown on the ChatBox but your chatbot will not give any reply.
So, to do that let’s run your app.py
$ python app.py
So, go to the link and chat with your personal ChatBot
You can find the full source code on my Github.
Discussion
You might enjoy Stream's react components: getstream.io/chat/react-chat/tutor...
We have a lot of AI related tutorials coming up btw. Message me if you're interested in doing some freelance writing.
Great.
You can mail the details at: sahil.rajput.0196@gmail.com
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\chatterbot\chatterbot.py", line 35, in init
self.storage = utils.initialize_class(storage_adapter, **kwargs)
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\chatterbot\utils.py", line 54, in initialize_class
return Class(*args, **kwargs)
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\chatterbot\storage\sql_storage.py", line 22, in init
from sqlalchemy import create_engine
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\sqlalchemy_init.py", line 8, in
from . import util as _util # noqa
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\sqlalchemy\util__init_.py", line 14, in
from ._collections import coerce_generator_arg # noqa
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\sqlalchemy\util_collections.py", line 16, in
from .compat import binary_types
File "C:\Users\sangv\AppData\Local\Programs\Python\Python38\lib\site-packages\sqlalchemy\util\compat.py", line 264, in
time_func = time.clock
AttributeError: module 'time' has no attribute 'clock'
C:\Users\sangv\Desktop>python app.py
Traceback (most recent call last):
File "app.py", line 5, in
from time import clock
ImportError: cannot import name 'clock' from 'time' (unknown location)
C:\Users\sangv\Desktop>python
Python 3.8.2 (tags/v3.8.2:7b3ab59, Feb 25 2020, 23:03:10) [MSC v.1916 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
THIS ERROR IS OCCURING WHILE RUNNING
PLEASE TELL ME WHAT SHOULD I DO?
Downgrade to python 3.7 time package does not work in python 3.8
This error showen here Please help me!
Can you please explain the script???
I am having the below error.
Traceback (most recent call last):
File "app.py", line 9, in
bot.set_trainer(ListTrainer)
AttributeError: 'ChatBot' object has no attribute 'set_trainer'
Use
trainer = ChatterBotCorpusTrainer(bot)
trainer.train('chatterbot.corpus.english')
which versions you have used ?
i am getting error while installing chatterbot.
please reply soon.
thank you
stop your antivirus, and start installing the module again
Can you please explain the code written inside the
That's good but one suggestion is when the user clicks the link please provide open in a new tab mode so that the users will read your entire post.