Creating a Resume ChatBot using Chatterbot and Flask.

What is ChatBot?

A chatbot is a computer program that simulates a conversation between a human user and a computer. It can act as a virtual assistant to customers of the business website. Basically, a chatbot is a computer program specifically trained for imitating the way humans converse about a particular topic.

ChatBot

Using Chatbot we can do the following things efficiently:

  • Communicate with customers
  • Solve their doubts and queries
  • Automate customer requests
  • Offers multilingual support
  • Save time and improve customer support services

How does a chatbot work?

Chatbot basically interprets user’s words and sentences, processes it, and gives an instant answer. Generally, chatbots have an application layer, a database, APIs, and a User Interface (UI).

Two main types of ChatBots:

  • Self Learning chatbots

These self-learning chatbots are majorly dependent on Artificial Intelligence or Machine Learning technologies.

  • Rule Based chatbots

These rules based chatbots simply search for keywords in the user’s input and figure out which action the user intends to perform. Then it answers with the predefined response for the particular action.

We will be building a resume chatbot at the end of this tutorial. We will use a prebuilt library Python library ‘ChatterBot’ to create our chatbot.

ChatterBot:

ChatterBot

This ChatterBot is a Python library that makes it easy to generate automated responses to a user’s input. Chatterbot uses machine learning algorithms to predict the responses to the user’s inputs.

Initial Setups: 

We need to install the Python setup and some python libraries. Run the following commands in the terminal.

>>pip install flask
>>pip install chatterbot

Steps to create our chatbot:

Step 1:

Create an app.py file and open it in your text editor. After creating the file, now we will start writing our python code in the app.py file. First of all, we need to import the required libraries in our project.

Step 2:

Add the following libraries at the top of app.py file.

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

 Here we have imported Flask, render_template, and request modules from the flask library. We have also imported ChatBot and ChatBot trainers from the chatterbot library.

Step 3:

Now as we have imported all the required modules, let’s create a flask app. Add the following code in your file.

app = Flask(__name__)

We have created a flask app named ‘app’ using the above code.

Step 4:

It’s time to create an instance of ChatBot. Using the following code chatbot instance and chatbot trainer will be created.

bot = ChatBot("Sunanda's Resume ChatBot")
trainer = ListTrainer(bot)
trainer.train(conversation)

We have created an instance of chatbot using ChatBot() function and passed the name of chatbot as “Sunanda’s Resume Chatbot”. The ListTrainer function is used to train our chatbot. In the last line, we are passing a conversation to the train function, on which our chatbot will be trained.

Step 5:

Now we have to create this conversation. So let’s create a “file.txt” file and add a conversation to that file. The conversation in the file.txt will look like this.

 "Hello",
    "Hi, there!",
    "Hi",
    "Hi!",
    "How are you doing?",
    "I'm doing great.",
    "That is good to hear",
    "Thank you.",
    "You're welcome.",
    'What is your name?', 'My name is Resume ChatBot',
    'Who created you?', 'Sunanda'
    "Tell me about yourself",
    "My name is Sunanda Somwase.I am a third-year computer    engineering student at PVGCOET",
    "Contact",
    "Email : [email protected], 
     Mobile number : +91 1234567890
     Location : Pune, Maharashtra",
    "Education",
    "Bachelor of Engineering (B.E), '\n'
    Computer Science & Engineering\n 
    Pune Vidyarthi Grihas College Of Engineering And Technology Pune '\n'
    2018 - 2022 '\n'
    CGPA: 8.84/10 '\n'
    Senior Secondary (XII), Science
    Sir Parashurambhau College Pune Maharashtra
    (MAHARASHTRA STATE BOARD board)
    Year of completion: 2018
    Percentage: 88.40%
    Secondary (X)
    Sant Meera School Aurangabad
    (MAHARASHTRA STATE BOARF board)
    Year of completion: 2016
    Percentage: 96.20%",

This is the conversation I have created for my resume chatbot.

Step 6:

Now assign this content of file.txt to the conversation variable from trainer.train(conversation).

with open('file.txt','r') as file:
    conversation = file.read()

Add this code before the instance of the chatbot. This will read content from the file and assign it to the conversation variable.

Step 7:

Now it’s time to create the UI of our chatbot using the flask app. Let us add the home template of our app in app.py file.

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

Here we have added home.html file as a template, but we need to create this file. To add this file in our project, create a new folder called templates in root directory and create home.html within templates folder.

Step 8:

Let us write the html code we need for our chatbot in this home template. 

<!DOCTYPE html>
<html>
     <title>Sunanda’s Resume Chatbot</title>
     <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.mi n.js">
          </script>

     </head>

<body>
     <img />
     <center>
     <h1>
     <img
src="https://www.logolynx.com/images/logolynx/s_b9/b9075efd5754f8eb0b28894bbff5f1f0.jpeg"
alt="CANDICE"
     style="width:50px;height:50px;"
     />Sunanda's Resume ChatBot
     </h1>
     </center>
     <div class="box"></div>
     <div class="boxed">
          <div>
          <div id="chatbox">
               <img
src="https://www.logolynx.com/images/logolynx/s_b9/b9075efd5754f8eb0b28894bbff5f1f0.jpeg"
               alt="CANDICE"
               style="width:50px;height:50px;"
               />
               <p class="botText">
                    <span>Hello there! I am Sunanda's Resume  ChatBot</span>
               </p>
         </div>
         <div id="userInput">
         <input id="textInput" type="text" name="msg"  placeholder="Message" />
         </div>
         </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) {
            getBotResponse();
          }
        });
      </script>
     </div>
</body>
</html>

We have added html code of our chatbot template. Let’s make this UI beautiful by adding some CSS to our code.

<style>
      body {
        font-family: monospace;
      }
      h1 {
        background-color: #FFC9BE;
        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: black;
        font-family: monospace;
        font-size: 17px;
        text-align: right;
        line-height: 30px;
      }
      .userText span {
        background-color: #FDFF60;
        padding: 10px;
        border-radius: 2px;
      }
      .botText {
        color: black;
        font-family: monospace;
        font-size: 17px;
        text-align: left;
        line-height: 30px;
      }
      .botText span {
        background-color: #BEE3FF;
        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>

This the HTML template file and it will look like this.

ChatBot UI

After adding the home template to our chatbot we will finally write the code for the request and response system of the chatbot. Let’s add the following code at the bottom of our app.py file.

@app.route("/get")
def get_bot_response():
    userText = request.args.get('msg')
    return str(bot.get_response(userText))
if __name__ == "__main__":
    app.run()

Now run the following command in cmd to run this python file.

>>python app.py

You can see the following output:

ChatBot OutPut

This is how we can create a simple resume chatbot using Chatterbot, Flask, and Python. I hope you’ll find this tutorial useful. Thank You!