Learn How to Build a Chatbot with Flask - Step-by-Step Tutorial with HTML, CSS, and JavaScript

in today's tutorial we will create a chatbot website using Microsoft's Stylo GPT medium to start off we'll open our Visual Studio code that's the code editor I'm going with you can open up any code editor you like sublime or atom so firstly we need to download the starting code repository hosted on the binary hoods GitHub Channel so let's go to the buy new hoods GitHub so the URL is also in the video's description and you can copy this URL and download the starting code using the download zip or you can open up open it up in the GitHub desktop let's go back into our vs code and create a new file called and firstly let's just save it and we're going to name it app.pi and we're going to write some python code so flask is written in Python so let from flask we're going to import flask and we're going to also import the render templates and we're going to import request and we're going to import jsonify so yeah and now we're gonna name it app is equals to floss so this is needed to because we're creating a flask application so double underscore and then the same and it's just gonna give you a prompt and you're gonna now we're gonna do the app dot routing so when the application is launched so add the applications link the URL so which HTML page we need to display so for the home page for the main page we're going to display the index that will be the that will show our chart so we're going to say Define the function in Python we do Def and then we're going to name the function name index and open curly brackets and we're gonna use the python syntax and do this and just go in the indentation and we're going to return the name of our uh HTML file that we already have in our starting code so we're gonna name it uh chat with your that's the name of the file is chat.html and we're going to use the render template and we're going to call chat dot HTML file and come out of the indentation and we're going to name the we're going to use another Apple routing when we send the message to our chatbot so this will route for that so for this one we're gonna create our own and we're gonna use some methods because for this we need to get and send the response to the chatbot and get the response from the chatbot so we're going to use the HTTP protocols so the get and post protocol you may be familiar with when we are creating websites we need these two things these are necessary and there is another thing also with them that's put when you're updating something on the server but we're not going to use that in this one because we're not updating anything on the chatbot server so we're going to create the function called chat and foreign [Music] from our HTML input field so I'll just show you what I meant when we open the HTML file so we're going to use the request that we imported from flask and we're going to say request.form so the form is from the HTML and we're gonna get the input so the name of the field will be MSG in the HTML so we're gonna get that filled uh text and save it into MSG and now we'll just change it and say input we're just gonna change the m and this is just a duplication and we're gonna return get chat response and we're gonna say the in we're gonna pass in the input so we're going to create this function now so we're gonna we're gonna create this function now and so let's create this function so get chat response and we're gonna pass in the parenthesis text and now what we need is the code for the chat bot what the chatbot will do so as you already read the readme.tx readme.md file so in that readme file I listed out what we are going to which chatbot we're going to use is the chatbot that we're going to use in this video is Microsoft's Stylo GPT medium so we're going to go into the hugging face website so if you come onto the readme readme file you're gonna see the link that I gave so you're just going to copy that and paste it in the uh your browser and if you come on to the hugging face website you'll see the code that have provided us this they have provided us these code Snippets this is the chat bot that we're going to use this is quite popular and it's been downloaded over a hundred thousand times in the last month and they basically train it on their own data and they have authentic user response and so we're gonna copy the code and press on this two button copy it and come back to your code and basically we're going to paste it over here so we're gonna use these two to put in the top where we have all of our inputs and then we're just gonna indent this thing in our code yes so now we have our code for this but we are not returning anything because over here we need to return some uh we're returning this response but we need we don't want to print it so we need to return it so we need to change some things over here so we need to first of all change this to Str because we don't want to input we just want to basically we already get the response from the user in the field and we're just going to string that over here and we're gonna convert the string into text and over here now we just need to return and we just need to change these things we need to remove this part and we need to remove this and now we will have the function ready so now to run make this executable we need to define something at the end and this is the syntax that we need so and underscore main underscore underscore and we're just gonna say app.run and now we have our app.pi file basically that will that is going to run the uh HTML and get and post to our chat bot and receive these messages but we need to Now display these messages in the HTML file so we're going to go into the HTML file now so we're going to save this now and come into the welcome folder and we're going to open folder and we're going to go into templates and we're going to open this chat.html file so now as you see we have all of our starting code so this has the form but in this we don't have any code where we will basically render when the user sends the message or the chat or is received how we will render we will do that with the JavaScript JavaScript so let's do that so now once we have our chat or HTML this has all the necessary code for our starting uh chatbot template so this has the form where we have the input message so the input field name will be message that we defined in our app.pi file so the message over here and we also have a button which when we press submit then we want to basically do something and render our HTML and so we will create script tags underneath the last div tag so and we'll create a function so to create a function we'll do document you need to come already create a function and in that function now we will use jQuery basically to get hold of the form view form ID so do that you need to basically with the string and press hash to get the ID and do message area and not on submits we want to that's when we said on submit we want to render this function will have our event so make sure that the name is the same as message area if this is the same then it wouldn't do anything so now we need to create the date variable so const hour will be date dot get hours so this is the function that comes in the date object so we have the same for the minutes or get minutes so it has plural so make sure it's the same function that I'm using and now we'll create string time so we'll say our so and we'll say minutes now we will get the text field so we'll say raw text for the text that the user enters in this text view so we have this ID text so that's we'll use this ID to get the text value so we'll use dollar sign and we'll say hash text and we'll say the value so now we have the text now we need to create the user HTML so user HTML basically will put this text into the HTML we will create and basically we need to append this into this form so so the HTML is quite big so I've already put I've already uh uh put it into the readme file so we'll go into the GitHub and copy it so it's this one the user HTML copy this and basically paste it over here so make sure that this one is in line and now we need to change some Fields so basically user inputs is our raw text so so I just put it over there because I wanted I knew that user input would go ahead so we'll put raw text over here and in time we'll do string time so this has our message container and then we put the message and then we have our logo of our user so this is quite big so I didn't want you guys to basically write so long so you guys get the idea so now we need to basically append this in the form so we'll do dollar sign and we'll do hash we will do hash and we'll say message Form 8 so make sure it's the same one as this so copy it that's would be better idea that would be a good idea and say dot append and do user HTML so that we already have and do comma so now we have the user HTML and we will display it in our form what we need to do with same with the bot HTML but we need to send this raw text to our bot so we will do we'll do that with the Ajax property so we'll do dollar dot Ajax and Ajax is a jQuery type so we'll do data that we have and the data from the message and and the raw text yes and we'll do comma and make sure that it is correct and follow what I'm doing so don't make any mistakes over here so because when we run the code finally it would if you don't have the same code as mine it wouldn't run so make sure it's the same so we'll use post request because we're posting it to the chatbot server and where are the Microsoft data GPT medium and make sure the URL is the same so the URL is this one the get this get so and this will basically send the message to this so so if it makes sense to you so we'll do get and now if uh you have the command you have to say dot done and you have to say function so in this function parenthesis we'll have our data that the data that will come back from our chatbot so this is the response so now we need to get back the bot HTML copy this and come back and paste both HTML now we need to change this one into Data and this one into the Str time and we need now need to append it into the form so the message area Form 8 this one make sure it's the same and we will do append but we need to change the date we have to pass it into HTML this time so we'll do dot parse HTML and do the bot HTML so now we have our code but we need to just make it to default so the event handler so when the user sends messages again it goes back and then again and again again it just goes back to its default when the user has stopped messaging so now we need to run the requirements requirements.txt file to download all the uh necessary components that we need so come back into our desktop and where we have this and open this so we need to download these floss Transformer torch so you need to come over here and download if you don't have python first of all and pip you need to download using these two links download Python and pip and if you have checked your if you have it run these two commands and if they are successful then basically we will run this command in our terminal to run our requirements.txt so we will open up our terminal so and I'm gonna change my directory copy this and I'm going to list out all the files using LS command and now I have the requirements.txt file over here so to run the requirements.txt file as I told you you need pip and python so I'm going to copy this command and I'm going to paste it over here and it will basically run and download so I already have these requirements installed so if it's not installed for you it will take some time once it does you'll come back and run this command so python so I'm going to clear out this first using player command and I'm going to do python app dot pi and it will take some time so I'll wait once it's loaded loads the server and runs the file so now when it's running we'll copy the command we'll copy the URL shine command Z and paste it over here so this is what a chatbot looks like now so we can send messages and uh when we press hello it's gonna use the app.pi file and whatever we did it's gonna it's gonna get the response from the chatbot function that we created and the script file when we press the button the on submit Handler will go in and the the date functions that we created everything will go in let's see what happens so there must be an error that something didn't happen so go back and open our file and see what is going on so over over here in our terminal we can see that uh this 200 request that it is getting the message back from the chatbot so so we know that our app.pi file is working okay so there must be something going wrong in the HTML file so computer science so the computer science is Lang is a world of debugging so we need to debug it so let's debug our code so we'll see what happens from here from the start so constate is so first mistake is over here so we haven't even we haven't initial initialized the date object properly so we need to do new date and uh everything is fine so uh there is a mistake over here we are not appending it it's comma so you must have appended rights and there is another thing that I haven't done over here so we need to basically uh make our text value uh go empty string once we have used it so let's do that so you have to dollar text and we have to say dot val and this time we will give it empty strings so now let's save this and Ctrl C to stop running the server and run it again so now once it's running we already have the URL in our so just go back so press hello and now we'll type our message let's see so yes now it displays we can ask it any questions what is your name and uh something like tell me a joke or let's ask who is the prime minister of the UK foreign it says David Cameron even though it's Rishi Suna so we'll take that uh that this chatbot is really far back in 2014 but it does the work and it says uh chatbot that works you can basically it's a stepping stone for us and we can learn and use different chatbot apis so now you know how to use apis and so this was a tutorial uh for the chatbot and uh if you like the video and if you followed along the video please like the video and subscribe to our Channel or subscribe to Binary hood and uh thank you once again and if you want to learn how to build iOS applications there are two videos that I've uploaded before these this video so make sure to check those videos out and uh more videos are coming out and let me know what which uh web-based projects that I should do in future or which iOS application I should make let me know in the comment section thank you you guys subscribe to buy new hood bye bye see you soon

Channel: Binaryhood

Views: 130,457

Keywords: Chatbot, Flask, Python, Dialogpt, HTML, CSS, JavaScript, Website, Web, Developer, OpenAI, ChatGPT, microservices

Id: 70H_7C0kMbI

Length: 24min 7sec (1447 seconds)

Published: Fri Mar 31 2023