Hello there and welcome back to a new tutorial. In the previous article I have showed you how to train a Chatterbot with your Messanger chat. In this article I will walk you through the process of integrating the Chatterbot into a Flask app and deploying it on Heroku. First, here is the live demo of the app we are building, and here is the full source code of the app.

Note: I like my Flask applications to follow what is known as the Flask App Factory Pattern. What that means is that whether we are creating a small app with one endpoint, or a whole bigger application, we will follow the same pattern. I advise you learn more on that, but for now what you need to know is that Application Factories are good for a few reasons. I quote from the Flask docs:

1 - Testing. You can have instances of the application with different settings to test every case.

2 - Multiple instances. Imagine you want to run different versions of the same application. Of course you could have multiple instances with different configs set up in your web server, but if you use factories, you can have multiple instances of the same application running in the same application process which can be handy.

In addition, the Application Factories along with Modular Applications with Blueprints are a great way to organize your Flask apps. If you would like to learn more on why blueprints, please refer to here. We are doing all this so we could easily develop and grow our app in the future.

1. On the Structure of our Application

Now let us get to work. Here is the structure of out app:

├── app
│   ├── chatbot
│   │   ├── __init__.py
│   │   └── routes.py
│   ├── errors
│   │   ├── handlers.py
│   │   └── __init__.py
│   ├── factory.py
│   ├── __init__.py
│   ├── main
│   │   ├── __init__.py
│   │   └── routes.py
│   ├── private_bot.py
│   ├── pwa
│   │   ├── __init__.py
│   │   └── routes.py
│   ├── static
│   │   ├── css
│   │   ├── favicon.ico
│   │   ├── images
│   │   ├── js
│   │   ├── manifest.json
│   │   └── sw.js
│   └── templates
│       ├── chatterbot.html
│       ├── errors
│       ├── hire_me.html
│       ├── layout.html
│       ├── main
│       └── underscore
├── config.py
├── db.sqlite3
├── nltk.txt
├── Procfile
├── requirements.txt
├── runtime.txt
└── wsgi.py

A little more on the defined blueprints, our chatbot blueprint contains endpoint that are responsible for interacting with our Chatterbot at private_bot.py

if you check the chatbot blueprint, you will see the following:

# -*- coding: utf-8 -*-
from flask import (Flask, current_app, flash, 
    render_template, request, 
    redirect, url_for, jsonify)

from app.factory import is_empty, kill_html
from app.chatbot import chatbot
from app.private_bot import PrivateBot


title = "Lang & Code - Chatterbot"
private_bot = PrivateBot("Adam")

@chatbot.route("/", methods=["GET", "POST"])
def index():
    return render_template('chatterbot.html', title=title)

@chatbot.route('/chat', methods=['POST', 'GET'])
def chat():
    if request.method=="POST":
        try:
            _csrf_token = request.form.get("_csrf_token")
            message = request.form.get('message')
            if message != "" and message is not None:
                response = private_bot.get_response(message)
                response = response.text
                return jsonify(
                    response=response, 
                    sent=kill_html(message)
                    )
            return jsonify(
                response="You cannot send empty messages", 
                sent=kill_html(message)
                )
        except Exception as e:
            print(e)
            return jsonify(
                response="Something went wrong and now the world will end", 
                sent=kill_html(message)
                )

Mainly two endpoints, one at the index of the blueprint rendering a template named chatterbot.html that contains the interface to interacting with the chatbot from the frontend. The second endpoint /chat that is responsible for handling the user input and passing it to our instance of the chatbot and get a response through the get_response() method. Of course we jsonify our response as our frontend expects a JSON object. You could also notice a method named kill_html() that is imported from our factory module. This method uses the Bleach library to clean the user input from any possible harmful code (not to the backend, but mainly to the frontend when the send input is rendered).

The main blueprint contains a couple of endpoint (one for the landing page, and another to a /hire_me page) which both you could build on or delete as you wish as I have added them as a reference on how to define and use more than one blueprint. The errors blueprint defines some errors that our app could run into such as 404 or 500 etc.

The pwa blueprint contains two endpoints that both return a file for each:

from flask import Blueprint, make_response, send_from_directory
from app.pwa import pwa

@pwa.route('/manifest.json')
def manifest():
    return send_from_directory('static', 'manifest.json')

@pwa.route('/sw.js')
def service_worker():
    response = make_response(send_from_directory('static', 'sw.js'))
    response.headers['Cache-Control'] = 'no-cache'
    return response

The two files are called by the front-end. The manifest.json is included in the head of the .html file, and the sw.js (short for serviceWorker) is called by app.js within the static/js folder. manifest.json, sw.js, app.js and how the html head is defined make our app a PWA (Progressive Web App) that can be installed on a machine such as a phone, tablet, computer etc. This is thanks to the ServiceWorker. To learn more about PWA and ServiceWork, please refer to here Moving on, our config.py file contains some simple configs for our app to use:

"""Flask config class."""
import os
from dotenv import load_dotenv

basedir = os.path.abspath(os.path.dirname(__file__))

class Config(object):
	"""Set Flask configuration vars."""

	# General Config
	TESTING = False
	DEBUG = False
	SQLALCHEMY_TRACK_MODIFICATIONS = False
	LOG_TO_STDOUT = os.environ.get('LOG_TO_STDOUT')
	SECRET_KEY = os.environ.get('SECRET_KEY') or b'some_long_key_@_2020'

class Development(Config):

	TESTING = os.environ.get('TESTING') or False
	DEBUG = os.environ.get('DEBUG') or True
	LOG_TO_STDOUT = os.environ.get('LOG_TO_STDOUT')
	SECRET_KEY = os.environ.get('SECRET_KEY') or b'DevelopmentKey468djkj475641;::454574551fdkJNdy'

Those variables could be changed as you see fit and of course you could add more that are useful for your application, such as API keys or such, but please be sure not to hard-code your sensitive data into the config file and always use environment variables. For example to define an environment variable named SECRET_KEY on a Linux machine, just:

export SECRET_KEY="some key"

On a Windows machine, use the keyword "set" instead of "export".

set SECRET_KEY="some key"

Our __init__.py file is where our app is created along with its blueprints and the proper configs and its also where we define our extensions if any.

import logging, os
from logging.handlers import SMTPHandler, RotatingFileHandler
from flask import Flask
from flask_seasurf import SeaSurf
from config import Config, Development

seasurf = SeaSurf()

def create_app(config_class=Development):
    """Construct the core application."""
    app = Flask(__name__, instance_relative_config=True, static_url_path='')

    # Application Configuration
    app.config.from_object(config_class)
    with app.app_context():
        # Initialize Plugins
        seasurf.init_app(app)
        # Register Blueprints
        # MAIN BP
        from app.main import main as main_blueprint
        app.register_blueprint(main_blueprint)
        # CHATBOT BP
        from app.chatbot import chatbot as chatbot_blueprint
        app.register_blueprint(chatbot_blueprint, url_prefix='/chatbot')
        # ERRORS BP
        from app.errors import errors as errors_blueprint
        app.register_blueprint(errors_blueprint)
        # Configute Debugging
        if app.debug or app.testing:
            if app.config['LOG_TO_STDOUT']:
                stream_handler = logging.StreamHandler()
                stream_handler.setLevel(logging.INFO)
                app.logger.addHandler(stream_handler)
            else:
                if not os.path.exists('logs'):
                    os.mkdir('logs')
                file_handler = RotatingFileHandler('logs/app.log',
                                                   maxBytes=20480, backupCount=20)
                file_handler.setFormatter(logging.Formatter(
                    '%(asctime)s %(levelname)s: %(message)s '
                    '[in %(pathname)s:%(lineno)d]'))
                file_handler.setLevel(logging.INFO)
                app.logger.addHandler(file_handler)
            app.logger.setLevel(logging.INFO)
            app.logger.info('app startup')
        return app

When deploying the app, you just pass the Config object to the config_class in the create_app() method, this will use the Config variables defined in our config.py

2. Deploying our Application

To deploy our app to Heroku, you ought to have a few things set up first:

An account on Heroku
The Heroku CLI installed on your machine
The GIT version control installed on your machine (installed by default on most Linux/GNU based systems, to check just type git into your terminal: git --version if you see a version, that means you are good to go, if you see "command not found" you will have to install it)

If you have successfully set up and installed the above packages, then in a terminal:

heroku login

This will prompt you to enter your Heroku credentials or open a new window on your browser. After you have successfully authenticated, it's time to make our app into a GIT. You can either clone my app repository on Github using the following:

clone https://github.com/MurphyAdam/flask-chatbot
cd flask-chatbot

or initiate a new git in your personal or modified version of the app using the following in the root directory of your app:

git init .
git add .
git commit -am "Chatbot deployment to Heroku"

Please make sure to check out the following files: Procfile, runtime.txt and requirements.txt. in the Procfile, you will see the following:

web: gunicorn wsgi:app

which basically runs a dyno of type web using the gunicorn webserver running of course a wsgi app (because Flask is a of course a wsgi micro-framework)

In the runtime.txt, you will see a Python version. Essentially version 3.8.1, the latest version. You could choose a version of your choice, but I would recommend using a version >= 3.0 as the support for version two has been dropped and you'll likely run into issues with this very code using version 2.

python-3.8.1

In the requirements.txt, you will find the dependencies of our app.

gunicorn
bleach
pyyaml<5.2,>=5.1
chatterbot
chatterbot-corpus
python-dotenv
Flask
Flask-SeaSurf

Now, let's create our Heroku app:

heroku apps:create flask-chatbotx
Creating flask-chatbotx... done
https://flask-chatbotx.herokuapp.com/ | https://git.heroku.com/flask-chatbotx.git

As I have already taken the name flask-chatbotx, you will need to have a different name for your app.

If your application is created correctly, it's time to push our app to Heroku, if you have made any changes to the app, make sure you commit them as we did above:

git add .
git commit -am "some UI changes"

Now we push our app like the following:

git push heroku master

now you application should be deployed, if you get any errors, just run the following command to see the logs:

heroku logs --tail

Once you have determined the source of error and hopefully fixed it, you just run the same push three commands again:

git add .
git commit -am "some UI changes"
git push heroku master

If you have successfully deployed your app, and you should if you followed through this tutorial, you will now see something like this:

Congratulations on finishing this tutorial and on deploying your Chatterbot Flask app. If you have any questions or remarks about this tutorial or the code, please leave them below in the comments. Thank you and see you soon.

Flask PWA Chatterbot: Deployment on Heroku

Majdi Mahfoud