Using Flask to Build a Rule-based Chatbot in Python

What Exactly is a Chatbot?

Chatbots are computer programs designed to simulate or emulate human interactions through artificial intelligence. You can converse with chatbots the same way you would have a conversation with another person. They are used for various purposes, including customer service, information services, and entertainment, just to name a few.

What is a Rule-based chatbot?

A rule-based chatbot is a chatbot that is guided in a sequence; they are straightforward; compared to Artificial Intelligence-based chatbots, this rule-based chatbot has specific rules.

We will use a straightforward and short method to build a rule-based chatbot.

Advantages of Rule-based chatbot

• Very easy to develop.
• Time-saving.

Disadvantages of Rule-based chatbot

• Not power and advance as AI-based Chatbot.
• Requires a large number of codes to make a full-scale chatbot.

Project Prerequisites:

In this Python project, you just need to know basic Python. That includes.

• Python print() function
• Python Input / Output function
• Python Flask framework
• Python functions
• Basic HTML/CSS

What will you learn?

• End to End development of Python chatbot.
• Basic Input/Output implementation.
• Flask Framework Basic

Getting Started

First, let make a very basic chatbot using basic Python skills like input/output and basic condition statements, which will take basic information from the user and print it accordingly.

Step 1: First, we will variables store user information.

User_Name  = None
User_Age  = None
User_Job = None

Step 2: Then, we will take input from the user.

print("Hello, I'm a Chatbot \n")
User_Name =  input("What is your name? ")
print("How are you {0}. \n".format(User_Name))

User_Age = input("What is your age? ")
print("Oh, so your age is {0}. \n".format(User_Age))

User_Job = input("What is your job profile? ")
print("So you're a  {0}. \n".format(User_Job))

When we run the above program, we will get the following output:

Hello, I'm a Chatbot 
What is your name? pythonscholar
How are you pythonscholar. 
What is your age? 26
Oh, so your age is 26. 
What is your job profile? python developer
So you're a python developer.

So now, let’s start creating a real chatbot and deploy it on Flask.

We will use the ChatterBot Python library, which is mainly developed for building chatbots.

What is ChatterBot, and how does it work?

ChatterBot is a machine learning library that helps to generate an automatic response based on the user’s input. It uses a Natural Language Processing-based algorithm to generate repossessed based on the user’s contexts.

You guys can refer to ChatterBot's official documents for more information, or you can see the GitHub code for it. Also, you can see the below flow chart to understand better how ChatterBot works.

How To Install ChatterBot In Python?

Installing ChatterBot in Python is very easy; it can be done using the pip command in the following steps. Type below command in terminal:

pip install chatterbot chatterbot_corpus

If you guys are using Google Colaboratory notebook, you need to use the below command to install it on Google Colab.

!pip install chatterbot chatterbot_corpus

So let’s start building a chatbot by following the below steps.

Step 1: First, we will import the ChatterBot library into our Python file.

from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTraine

Step 2: Then, we will name our chatbot. It can be anytime as per our need.

chatbot=ChatBot('Pythonscholar')

Step 3: We will start training our chatbot using its pre-defined dataset.

# Create a new trainer for the chatbot
trainer = ChatterBotCorpusTrainer(chatbot)

# Now, let us train our bot with multiple corpus
trainer.train("chatterbot.corpus.english.greetings",
              "chatterbot.corpus.english.conversations" )

chatterbot.corpus.english.greetings and chatterbot.corpus.english.conversations are the pre-defined dataset used to train small talks and everyday conversational to our chatbot.

Step 4: Then, we will check how our chatbot is responding to our question using the below code.

response = chatbot.get_response("How are you?")
print(response)

Now let’s run the whole code and see what our chatbot responds to.

Whole Source Code:

from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

chatbot=ChatBot('Pythonscholar')

# Create a new trainer for the chatbot
trainer = ChatterBotCorpusTrainer(chatbot)

# Now let us train our bot with multiple corpus
trainer.train("chatterbot.corpus.english.greetings",
              "chatterbot.corpus.english.conversations" )
response = chatbot.get_response("How are you?")
print(response)

The Output will be as follow:

I am doing well.

How to deploy a chatbot on Flask

First, we will install the Flask library in our system using the below command:

pip install flask

And for Google Colab use the below command, mostly Flask comes pre-install on Google Colab.

!pip install flask

But first, let’s understand what the Flask framework in Python is.

What is Python Flask?

The Flask is a Python micro-framework used to create small web applications and websites using Python. Flask works on a popular templating engine called Jinja2, a web templating system combined with data sources to the dynamic web pages.

Now start developing the Flask framework based on the above ChatterBot in the above steps.

We have already installed the Flask in the system, so we will import the Python methods we require to run the Flask microserver.

Step 1: Import necessary methods of Flask and ChatterBot.

from flask import Flask, render_template, request
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

Step 2: Then, we will initialize the Flask app by adding the below code.

#Flask initialisation
app = Flask(__name__)

Flask(name) is used to create the Flask class object so that Python code can initialize the Flask server.

Step 3: Now, we will give the name to our chatbot.

chatbot=ChatBot('Pythonscholar')

Step 4: Add training code for a chatbot.

# Create a new trainer for the chatbot
trainer = ChatterBotCorpusTrainer(chatbot)

# Now, let us train our bot with multiple corpus
trainer.train("chatterbot.corpus.english.greetings",
              "chatterbot.corpus.english.conversations" )

Step 5: We will create the Flask decorator and a route in this step.

@app.route("/")
def index():
	render_template("index.html")

The route() is a function of a Flask class used to define the URL mapping associated with the function.

Then we make an index function to render the HTML code associated with the index.html file using the render_template function.

In the next step, we will make a response function that will take the input from the user, and also, it will return the result or response from our trained chatbot.

Step 6: Create a function to take input from the user and respond accordingly.

@app.route("/get", methods=["POST"])
def chatbot_response():
	msg = request.form["msg"]
	response = chatbot.get_response(msg)
	return response

Step 7: Then, we will add the final code that will start the Flask server after interpreting the whole code.

if __name__ == "__main__":
    app.run()

The complete code will look like this:

from flask import Flask, render_template, request
from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

#Flask initialization
app = Flask(__name__)

chatbot=ChatBot('Pythonscholar')

# Create a new trainer for the chatbot
trainer = ChatterBotCorpusTrainer(chatbot)

# Now let us train our bot with multiple corpus
trainer.train("chatterbot.corpus.english.greetings",
              "chatterbot.corpus.english.conversations" )

@app.route("/")
def index():
	
	return render_template("index.html")



@app.route("/get", methods=["GET","POST"])
def chatbot_response():
    msg = request.form["msg"]
    response = chatbot.get_response(msg)
    return str(response)

if __name__ == "__main__":
    app.run()

As per Jinja2 implementation, we have to create two folders for storing HTML and CSS files; while working with the Jinja2 engine, it is necessary to make a folder with a name template to add HTML files, and for other files like CSS, javascript, or image we have to make a folder with the name static but it optional but creating template folder is compulsory.

First, we will make an HTML file called index.html inside the template folder.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div class="row">
        <div class="col-md-10 mr-auto ml-auto">
    <h1>Pythonscholar ChatBot</h1>
    <form>
        <div id="chatbox">
            <div class="col-md-8 ml-auto mr-auto">
                <p class="botText"><span>Hi! I'm Pythonscholar.</span></p>
            </div>
        </div>
        <div id="userInput" class="row">
            <div class="col-md-10">
                <input id="text" type="text" name="msg" placeholder="Message" class="form-control">
                <button type="submit" id="send" class="btn btn-warning">Send</button>
            </div>
        </div>
    </form>
</div>
</div>

<script>
    $(document).ready(function() {
        $("form").on("submit", function(event) {
            var rawText = $("#text").val();
            var userHtml = '<p class="userText"><span>' + rawText + "</span></p>";
            $("#text").val("");
            $("#chatbox").append(userHtml);
            document.getElementById("userInput").scrollIntoView({
                block: "start",
                behavior: "smooth",
            });
            $.ajax({
                data: {
                    msg: rawText,
                },
                type: "POST",
                url: "/get",
            }).done(function(data) {
                var botHtml = '<p class="botText"><span>' + data + "</span></p>";
                $("#chatbox").append($.parseHTML(botHtml));
                document.getElementById("userInput").scrollIntoView({
                    block: "start",
                    behavior: "smooth",
                });
            });
            event.preventDefault();
        });
    });
</script>
</body>

</html>

We will not understand HTML and jquery code as jquery is a vast topic.

We will create a style.css file, save it in the static folder, and use the below code.

body {
    font-family: Garamond;
}

h1 {
    color: black;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    font-size: 40px;
}

h3 {
    color: black;
    font-size: 20px;
    margin-top: 3px;
    text-align: center;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.ml-auto{
    margin-left:auto !important;
}
.mr-auto{
    margin-right:auto !important;
}

.col-md-10,.col-md-8,.col-md-4{
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-md-8{flex:0 0 66.666667%;max-width:66.666667%}
.col-md-4{flex:0 0 33.333333%;max-width:33.333333%}
.col-md-10{flex:0 0 83.333333%;max-width:83.333333%}

.form-control {
    background: no-repeat bottom,50% calc(100% - 1px);
    background-image: none, none;
    background-size: auto, auto;
    background-size: 0 100%,100% 100%;
    border: 0;
    height: 36px;
    transition: background 0s ease-out;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    font-size: 14px;
}
.form-control {
    display: block;
    width: 100%;
    padding: .4375rem 0;
    padding-right: 0px;
    padding-left: 0px;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    border:none;
    background-color: transparent;
    background-clip: padding-box;
    border-bottom: 1px solid #d2d2d2;
    box-shadow: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn {
    float: left;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .46875rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-warning {
    color: #fff;
    background-color: #f08f00;
    border-color: #c27400;
}
.btn.btn-warning:active, .btn.btn-warning:focus, .btn.btn-warning:hover {
    box-shadow: 0 14px 26px -12px rgba(255,152,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(255,152,0,.2);
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow:visible;
}
#chatbox {
    background-color: cyan;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    min-height: 70px;
    margin-top: 60px;
}

#userInput {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    margin-top: 60px;
}

#textInput {
    width: 87%;
    border: none;
    border-bottom: 3px solid #009688;
    font-family: monospace;
    font-size: 17px;
}

#buttonInput {
    padding: 3px;
    font-family: monospace;
    font-size: 17px;
}

.userText {
    color: white;
    font-family: monospace;
    font-size: 17px;
    text-align: right !important;
    line-height: 30px;
    margin: 5px;
}

.userText span {
    background-color: #009688;
    padding: 10px;
    border-radius: 2px;
}

.botText {
    color: white;
    font-family: monospace;
    font-size: 17px;
    text-align: left;
    line-height: 30px;
    margin: 5px;
}

.botText span {
    background-color: #ef5350;
    padding: 10px;
    border-radius: 2px;
}

#tidbit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
}

We are all set to run our Flask application.

So let’s start our chatbot by running a Python file. Once you run the Python file it will create a local server with the address http://127.0.0.1:5000/, and when you open this URL on the browser, you can see the user interface of our chatbot.

This is our Chatbot output.

Congratulations, we have successfully built a chatbot using Python and Flask.

Also, you guys can check our other articles below.

• How to Create Mad Libs game in Python
• What Is Python? 11 Things To Know Before Python Programming
  

Also published on: https://pythonscholar.com/python-projects/rule-based-chatbot-in-python-using-flask/