Build & Integrate your own custom chatbot to a website (Python & JavaScript)

hi everyone in this video you will learn how you can create your own custom chat bot and then deploy it to a website so this is the end result that we're going to build and here we can open and close this chat window with this nice little animation and then we can talk to it so i can say hi and then i get a greeting response as well and i can ask what do you sell and then we get an answer we sell coffee and tea can i pay with paypal and then i get an answer we accept most major credit cards and paypal and i can say thanks and i can also say bye and yeah so in this example i trained this to be like a chat support for a e-commerce website but you can customize it to whatever you want and yeah so this is what we're going to build and we use flask for this as the back end so right now this flask app is running here in the background and for the front and we also use javascript this time so this is the first time i'm going to use javascript on my channel so let's do this alright so i already prepared some starter files for you and you can find the link to this github repository below the video so this video this chat bot is based on a previous tutorial series that i did so you can also find the link to this in the github repository and in this video series we will learn how you can create a chat bot from scratch with pytorch and nlp so if you're interested in this you can check this out and now in this video we built on top of this and then you learn how we can integrate this using flask and also javascript and there are two deployment options we can use we can either use this just to use a single flask app where we use ginger templates and then all of this happens internally or we can just build a flask rest api and then we can create a completely separate html and javascript website that then talks to this api so you can deploy this completely separate from the flask app then and there are just minimal changes you have to do to for these two approaches so i will show you what you have to change in the end and now let's start by setting this up so now all we have to do is follow the setup instructions so you want to clone the repository of course and then cd into it so i already did this and then you want to create a virtual environment with these commands so let's do this let's head over to this um to my command line so in here this is the starter repository and now i'm going to create a virtual environment and then i activate it with dot v and bin activate so by the way on windows the command might be slightly different but i'm sure that you can figure this out and now we are in our environment so you can see this here in my terminal and now you want to install all the dependencies so we say pip install and we need flask then we need torch torch vision and nltk for the natural language processing alright so this is done so now you also might install a nltk package that is called punk so we want to start python by saying python then we can import nltk and see if this works and then you want to execute nltk.download point and then this will install this punk package so in this case it's already up to date and now we can train our chat bots so we go over the file structure in a moment where i explain how this is going to be trained so for now let's um sorry let's quit our python application program again and now we say pythontrain.pi this will start the training and will take a few moments and now it's already done so now it says training complete so now we can start talking to it by saying python uh let me check this again python chats dot pi and now with this command we can start talking to it in the console so here i can say hi and then i get hey i can also ask what do you sell again and i get we have coffee and tea and if i type quit then it will exit so this works so now our chatbot is trained and ready to be integrated so now we can open our editor of choice and start coding our flask app all right so here i have the starter repository open in my editor and now we will go over the file structure very briefly and i will explain you what everything is doing so first of all we have the model dot pi so this is our pi torch model this is a simple neural network with a few linear layers then we have nltk utils.pi where we have some utility functions to work with natural language then we have our train dot pi so here happens our pi touch training loop to train the model so this is what we just did and this will then dump the data.pth file so this is our trained model so all of this i explained in this tutorial series so you can learn about more about this if you check out these videos and now so after training we can use this chat dot pi and in here we load our model again and then we have one function get response where we put in a message and then we execute our model and then we get the response back and then so like this we can talk to our chatbot so yeah these are the important files and the way you can customize your chat bot is with the intense.json file so you can modify this however you want so but you need to keep this structure so you define different intents here and each intent has a tag so for example the tag greeting then you put in different example patterns for a greeting for example hi hey how are you these are all greetings and then you define possible fixed responses that the chatbot can then choose if it detects that this is a intent with the tag greeting and then it randomly selects one of these responses so you can modify this to whatever you want to do with your chat bot and yeah so this these are all the important files for the chat bot and now to deploy this we have to implement the app.pi um file so this is where we start coding our flask app so before we do this i also already put in some starter files for the template and some static files for the javascript file and also the css for the styling so you have the base html this is just the base template that we need and then we have a javascript file this is also empty so we have to write this as well and so the styling is also already done for you so you can simply get this from the repository so now let's start coding our flask app so first of all we say of course from flask we want to import flask then we also need the render template function we also want to have the request and we want to have chase sonified to return a json response then we also say from chat import get response so this is what i showed you in this file so here we have this one function where we put in a message and then we get back a response so this will return a string and now like always with flask we set up our app by saying app equals flask and with the convention underscore name and now we want to define two routes so we define a index get route and so here we simply return render template where we return our base html base dot html and we also have to decorate this so here we say at app dots and this should be a get requests so you can say get and then just a forward slash and by the way this syntax is new in flask 2.0 so make sure that you use flask 2.0 or newer otherwise you have to use the old syntax where we have to say app dot route and then just the forward slash and then here we also have to define the allowed method so we can do it like this methods equals and then as an array or as a list here we say get so this is the old method and if you use flask 2.0 or newer then we can simply do it like this so yeah here we have only one home page that renders our base html and then also we want one route to do the prediction so let's create another function and create this i call this predict and here we want to make this a post request so here we say at app dot and now this should be a post request and the route that we are going to use we use forward slash and then predict and now let's implement this so this is also straightforward so we get the text by saying text equals and then here we get our flask request and then here we can call the get json function and then in our json we define this is called the message so you will see how we set up this later in javascript so now we have the text and then we simply have to call the function where we call our model so what i'm not going to do here is to do some error checking so check if text is valid so here i just assume this json is valid and our message is valid so you can do this yourself and then we say response equals get response from our text and now we have to put this back to the user so we have to chase sonify this so we say our message equals and now we create a dictionary with the key let's call this this is the answer and then here we put in the response this is a string and then we say return jsonify our message and yeah this is basically everything we need for our flask app so now we can also say if name equals equals and then underscore main and then we can start our app and test this so we can say app dot run and we also want to say debug equals true for testing and yeah so this is everything we need for the app.pi file and now let's start running this and see if this works so now we see that our flask app is running at localhost port 5000 so now if we go to this website we see this um that there's almost nothing in there so here in the bottom right this is our chat window but right now if we click on this then nothing will happen because right now this is not yet connected to our javascript so but this works our app is up and running without errors so let's continue okay so now we have to implement the app.js file and before we do this let's go over the structure again briefly so the way it works is that if we go to our home page then we render the base html so if we have a look at the base html here we simply have html code where we have a hat and then a body and here we define our chat window and these classes are important so these are important for the css for the styling and also for the javascript later so you will see what i mean in a moment and to include the styling so the css here we used this typical syntax with the double curly braces and then the url4 function and this is in our static folder and then this is the file name so like you can see here i already have this static folder and then here i have the static and css and the static javascript so this is how our css is connected and then after our html code down here we have this still in the within the body tag we have these two scripts definitions and the first one is a little trick that we know that this is our script root so you will also see what i mean when we do this in in javascript and the second one is the script definition to include our app.js file again with this url4 function so yeah this is how everything is connected and yeah by the way if you want to run this completely separate and not as a ginger template then this is basically still the same html code except that here we can include this the normal way without this url for syntax and i also show you how this code looks like at the very end so yeah so now all we still have to do is implement this app.javascript file so let's do this so let's create a class in javascript and call this chat box and in here first we want to create a constructor so let me simply copy and paste this so that it's quicker so we define a constructor and in here we define different arguments so we want a open button a chat box and a send button and here we use this document dot query selector and then here we use these different selectors so we have the chat box underscore underscore button the chat box support and the chat box sorry the send button and these um selectors refer to the class names we used in our html so here you can see we have this chat box underscore support so this means and then we get this whole diff with this class name then we also have these chat box uh let's go back again we have the chat box button and the send button here we have this button or this diff with the button and this is our chat box button so this is to open and close the whole chat box and then here we have the send button so this is to send the messages within our chat window so yeah this is how we access these and then we define a state if our chat box is open or closed and in the beginning it's closed and then here we have an array to store our messages then we create one function to display the messages so again i simply copy and paste this in here and go over this code now so we have one display function then here we extract our arguments and then we add two event listeners by calling at event listener and we um listen to the click event and when we click on the open button then we want to execute this function so we call this toggle state and when we click on the send button then we want to send a message with this function so we have to implement these and then for convenience i also listen to the key up so basically um here we also listen to if we hit the enter button and then we also want to send a message so now we have to implement the toggle state and the on send button function so let's do this first of all let's implement the toggle state so here we toggle the state so it the state is now not state so if it's true then it's false and vice versa and now here we simply add or remove this um chatbot active class and this is then defined in our css file so if we search for chatbot a chat box active then here we see that if this is um set then our opacity is one and otherwise our opacity is zeros and now this is not visible so yeah this is the toggle state and now here we define our on send button so let's go over this so here we extract the text from the user input by using this query selector then we check if our text is empty and if so then we simply return and otherwise we continue it now we want to send this message to our chatbot so here we define a dictionary where we put in the name is user and the message is text so in javascript this is not a dictionary this is called an object and this message key must be the same that we accessed then in our python code so in our app.pi here we extracted json and then we call get message so here we have the same key so be careful here then we push this object to our messages array that we store internally here and now we want to send a post request to this endpoint so if we hard code this then is it's at our localhost 5000 slash predict so again remember here we defined our predict function with the route slash predict so we used the same here and we can use this little trick with the script root so this is just a variable that we defined in our html so yeah you just put the snippet here and then you can know your script root so then you don't have to hard code your localhost like this and yeah so now we also define this is a post method then we stringify this to a json object then we want to allow cross origin resource sharing and again we specify this is json and this might not be important here if you just use this internally in your flask app but if you deploy your flask app separately and then call this from any website then you have to allow this so you will see this in the example at the very end where i simply use a completely separate html file so yeah just put this here and then you're good to go and then so after sending the post request we wait for the response and we get a chase and back so we can extract this json and then here we want to send the message back to the user so we want to display it so here we again define a object here we say now this time it's the name sam and the message is the answer so here again we call answer and if we have in a look at the python file then here we use the key answer for our json object so again this has to be the same and then we push this message back to our array again and then we want to update the chat text so this is going to be a separate function and otherwise yeah we simply catch an error and then return or show nothing so now all that's missing is the update jet text function so let's implement this here so here we define our function and here what we have to do is we want to go over all these messages and then we modify the inner html code by checking if this is our user or our chatbot so if this is the name sam this is the name of our chat bot then we modify this class we call this item visitor and otherwise we modify this class so this is the item operator and then we create our new html text and then we set the inner html and yeah so this is all we need for the javascript so now that we have implemented this we can go back to our app and actually we can also go back to our um localhost 5000 since this is um in debug mode and hot reloading this should work so now if we click on this then it's still not working and this is because in our javascript file so here we defined the class but then of course we never used it so down here we have to create an object so we say const chat box and then we create a new chatbot object and then we want to say chatbots.display and the display function will initialize these event listeners so now if we go back to the site and click on here then yeah now it's working so let's start talking to it and hi and we get the response so let's ask what do you sell and yeah so this works if we have a look at the locks from our app then we also see that we the predict endpoint is working so yeah basically that's everything we need so now we have set up our flask app and now i want to show you one more thing so what we have to change if we want to run this completely separate so to run this completely separate and not within flask itself as a template and we have to allow this cross origin resource resource sharing that i mentioned um in here so in our javascript we have to allow this and then in our flask app we also have to set this up and in flask we can do this by installing another simple package so we say pip in stall sorry pip in stall and then this is called flask course and now here we install this and then we have to import this so we say from flask course we import course and capital letters and then after setting up our app we call this so we say course app and now this is everything we need to allow cross origin resource surf sharing and now um yeah so basically we don't need this anymore so now we simply need our post um post route so the predict route and now we can again run this and now this is running in the background and now i will open a completely separate front end so now here let's our flask is running in the background and now here i have a completely separate front end so here we just have html css and javascript and our image and now the only difference is that in the html code we can use the normal syntax and simply include this with the normal href and the same for our app.json at sorry app.javascript and then in our app.javascript so in here we in this case i hard coded now the route so this is the localhost 5000 slash predict and now if i start this front and so i can click on go live here this will open my browser and then i can open the base html and now here this should work and if i say hi then i get a response and now if i have a look back at my back end then here you see we get this um predict um post request and um it returned 200 so this works and yeah so again um in order to make this work you have to allow this cross origin resource sharing otherwise this will throw an error or we will say that this is not allowed and yeah that's why you have to set this up as well if you want to have this completely separate as back end and front end and again i can put the um separate front end code in the github repo as well and yeah so this is everything we need i hope you enjoyed this tutorial and then i hope to see you in the next video bye

Channel: Python Engineer

Views: 3,783

Rating: 4.9815669 out of 5

Keywords: Python, PyTorch, Flask, Chatbot, python chatbot, pytorch chatbot, chatbot deployment, pytorch deployment, deep learning deployment, javascript & python

Id: a37BL0stIuM

Length: 29min 51sec (1791 seconds)

Published: Thu Sep 23 2021