DEV Community

Cover image for Build a Chatbot using Flask in 5 minutes
Sahil Rajput
Sahil Rajput

Posted on • Originally published at dev.to

Build a Chatbot using Flask in 5 minutes

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


Enter fullscreen mode Exit fullscreen mode

Create a flask app



app = Flask(__name__)


Enter fullscreen mode Exit fullscreen mode

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")


Enter fullscreen mode Exit fullscreen mode

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()


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

So, go to the link and chat with your personal ChatBot

You can find the full source code on my Github.

Top comments (14)

Collapse
 
tschellenbach profile image
Thierry

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.

Collapse
 
sahilrajput profile image
Sahil Rajput

Great.
You can mail the details at: sahil.rajput.0196@gmail.com

Collapse
 
arthsangvai profile image
arthsangvai
bot = ChatBot("Candice")
Enter fullscreen mode Exit fullscreen mode

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?

Collapse
 
dennis0914 profile image
dennis0914

Downgrade to python 3.7 time package does not work in python 3.8

Collapse
 
ketan_patil profile image
Ketan Patil

Upgrading to the current version of SQLAlchemy (1.3.18 as of now) fixed the problem

pip install sqlalchemy --upgrade

Collapse
 
sprakingleaf profile image
GovtVacancy.Net

Nice Explanation Thank You

  1. Write the following numbers in the Indian system of numeration: - GovtVacancy.Net
  2. Write each of the following numbers in the International system of numeration: - GovtVacancy.Net
  3. Rewrite each of the following numerals with proper commas in the international system of numeration
  4. Write each of the following numbers in digits by using international place value chart.
  5. Fill in the blank: (i) 1 lakh = Ten thousand (ii) 1 lakh = Thousand - GovtVacancy.Net
  6. Write all possible 3-digit numbers using the digits 6, 0, 4 when - GovtVacancy.Net
  7. How many different 3-digit numbers can be formed by using the digits 0, 2, 5 without repeating
  8. Which digits have the same face value and place value in 92078634? - GovtVacancy.Net
  9. Determine the difference between the place value and the face value of 5 in 78654321
  10. Determine the difference of the place values of two 7’s in 257839705. - GovtVacancy.Net
  11. Determine the product of the place values of two fives in 450758. - GovtVacancy.Net
  12. Find the place value of the digit 4 in each of the following: - GovtVacancy.Net
  13. Write the corresponding numeral for each of the following: - GovtVacancy.Net
  14. Write each of the following in expanded notation: - GovtVacancy.Net
  15. Insert commas in the correct positions to separate periods and write the following numbers in words:
  16. Write the following numbers in words in the Indian system of numeration: - GovtVacancy.Net
  17. Write each of the following in numeral form: - GovtVacancy.Net
  18. Maharani Ahilyabai Holkar - Biography - GovtVacancy.Net
  19. Ajijan Begum - The freedom struggle of 1857 - GovtVacancy.Net
  20. भारत के लिए गगनयान मिशन के महत्व पर चर्चा करें। - GovtVacancy.Net
  21. मृदा अपरदन और इसके विभिन्न प्रकारों को परिभाषित कीजिए। - GovtVacancy.Net
  22. सैनिकों की भर्ती के लिए अग्निपथ योजना - GovtVacancy.Net
  23. The Agnipath Scheme for Recruiting Soldiers - GovtVacancy.Net
  24. भारत में प्राचीन काल में कानून बनाने की प्रक्रिया क्या थी? - GovtVacancy.Net
  25. अरैयर कौन था? (Who was Araiyar?) [araiyar kaun tha?]
  26. Major mass movements were held from time to time in the state of Uttarakhand - GovtVacancy.Net
  27. Medieval Period - History of Uttarakhand - GovtVacancy.Net
  28. Modern History of Uttarakhand - GovtVacancy.Net
  29. Ancient Period History of Uttarakhand - GovtVacancy.Net
  30. Prehistoric Period - History of Uttarakhand - GovtVacancy.Net
  31. Indian Independence Act 1947
  32. Government of India Act 1935
  33. Simon Commission 1927
  34. Rowlatt Act 1919
Collapse
 
muziburrukon profile image
Muziburrukon
  • Running on 127.0.0.1:5000/ (Press CTRL+C to quit) [2019-09-18 21:05:34,441] ERROR in app: Exception on / [GET] Traceback (most recent call last): File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 2292, in wsgi_app response = self.full_dispatch_request() File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1815, in full_dispatch_request rv = self.handle_user_exception(e) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1718, in handle_user_exception reraise(exc_type, exc_value, tb) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/_compat.py", line 35, in reraise raise value File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1813, in full_dispatch_request rv = self.dispatch_request() File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1799, in dispatch_request return self.view_functionsrule.endpoint File "/home/muzibur/PycharmProjects/corpus/venv/app.py", line 13, in home return render_template("index.html") File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/templating.py", line 134, in render_template return _render(ctx.app.jinja_env.get_or_select_template(template_name_or_list), File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/environment.py", line 869, in get_or_select_template return self.get_template(template_name_or_list, parent, globals) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/environment.py", line 830, in get_template return self._load_template(name, self.make_globals(globals)) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/environment.py", line 804, in _load_template template = self.loader.load(self, name, globals) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/loaders.py", line 113, in load source, filename, uptodate = self.get_source(environment, name) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/templating.py", line 58, in get_source return self._get_source_fast(environment, template) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/templating.py", line 86, in _get_source_fast raise TemplateNotFound(template) jinja2.exceptions.TemplateNotFound: index.html 127.0.0.1 - - [18/Sep/2019 21:05:35] "GET / HTTP/1.1" 500 - 127.0.0.1 - - [18/Sep/2019 21:05:39] "GET /favicon.ico HTTP/1.1" 404 - [2019-09-18 21:17:03,880] ERROR in app: Exception on / [GET] Traceback (most recent call last): File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 2292, in wsgi_app response = self.full_dispatch_request() File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1815, in full_dispatch_request rv = self.handle_user_exception(e) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1718, in handle_user_exception reraise(exc_type, exc_value, tb) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/_compat.py", line 35, in reraise raise value File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1813, in full_dispatch_request rv = self.dispatch_request() File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/app.py", line 1799, in dispatch_request return self.view_functionsrule.endpoint File "/home/muzibur/PycharmProjects/corpus/venv/app.py", line 13, in home return render_template("index.html") File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/templating.py", line 134, in render_template return _render(ctx.app.jinja_env.get_or_select_template(template_name_or_list), File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/environment.py", line 869, in get_or_select_template return self.get_template(template_name_or_list, parent, globals) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/environment.py", line 830, in get_template return self._load_template(name, self.make_globals(globals)) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/environment.py", line 804, in _load_template template = self.loader.load(self, name, globals) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/jinja2/loaders.py", line 113, in load source, filename, uptodate = self.get_source(environment, name) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/templating.py", line 58, in get_source return self._get_source_fast(environment, template) File "/home/muzibur/anaconda3/envs/Chatbot/lib/python3.7/site-packages/flask/templating.py", line 86, in _get_source_fast raise TemplateNotFound(template) jinja2.exceptions.TemplateNotFound: index.html 127.0.0.1 - - [18/Sep/2019 21:17:03] "GET / HTTP/1.1" 500 -

This error showen here Please help me!

Collapse
 
shraddhapawar20 profile image
shraddha-pawar20

Can you please explain the script???

Collapse
 
shraddhapawar20 profile image
shraddha-pawar20

Can you please explain the code written inside the

Collapse
 
rahulrathod6203 profile image
rahulrathod6203

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'

Collapse
 
kpspersonal profile image
kpspersonal

Use
trainer = ChatterBotCorpusTrainer(bot)
trainer.train('chatterbot.corpus.english')

Collapse
 
rahulrathod6203 profile image
rahulrathod6203

which versions you have used ?

i am getting error while installing chatterbot.
please reply soon.

thank you

Collapse
 
saguamit profile image
saguamit

stop your antivirus, and start installing the module again

Some comments may only be visible to logged-in visitors. Sign in to view all comments.