Build AI Talking Bot using OpenAI Api | Chatgpt model | React JS | Node Js

can you please introduce yourself send hello I am an AI assistant here to help you with any questions or tasks you may have feel free to ask me anything and I will do my best to assist you okay I'm traveling to New Zealand tomorrow can you please tell me the important things that I should never miss in my luggage be short and concise in your answer because I don't like long answers at all send passport travel insurance local currency weather appropriate clothing camera Chargers adapters toiletries any necessary medication delete I have no work tomorrow so can you please give me some ideas what should I do on my weekend I'm based in Christ Church New Zealand be short and concise in your answer send one visit the botanic gardens and enjoy a leisurely stroll two explore the beautiful beaches of suar or New Brighton three take a scenic drive to acaro for a day trip four go for a hike in the Port Hills for stunning views of the city five check out the local market for Unique crafts and produce six enjoy a wine tasting tour in the nearby wiara Valley seven visit the Canter museum for a dose of local history and culture eight have a picnic in Hagley Park and relax by the Avon River nine try out some delicious Cuisine 10 attend a live music or cultural event happening in the city delete tell my audience to subscribe to this Channel and leave a like on this video s if you enjoy the content on this channel I highly recommend subscribing to stay updated with all the latest videos don't forget to also leave a like on this video if you found it helpful or entertaining your support means a lot and helps the channel grow thank you for watching so guys in this video we will be building this AI talking chatbot to build this project we will be using open AI API and we will be using the same models that open AI Chad GPT is using so AI models that are important to build this project are going to be text to speech and the usual GPT 4 text generation AI model so this is going to be the first stack project on the front end we will be using reactjs and on the back end we are going to be using node J s to build this simple application so this is going to be very interesting project so stay tuned till the end of the video now without wasting any time we should go to visual studio code and start building this project so guys here I am in my visual studio code I have a new folder open here so in this folder we are going to initialize a new nodejs project and we'll be working on the back end of the project first and then we will go to react application and build a front end so let's initialize a nodejs project in this folder by running a command that is npm in it so now this project is initialized with the package.json so here I'm just going to create a new file that is going to be server. MJS and we are going to be using a nodon in this project to start the server so I'm just going to install npm install nmon I just go to my pack P ag. Json and here in the script I'm just going to add a new start script here and this is going to say nodon server. MJS so now the basic setup is ready I can go and start my server here in my terminal by running a command that is npm start so we are going to be creating a Express server by using a package that is Express so I'm just going to install Express in this project and I'm just going to import Express from Express and we are going to create a new app using a Express server and this app is going to be listening on Port 3000 and it's just going to say server is running so if I save this and check my terminal I should be able to see that my server is running fine here so now we have a basic nodejs setup ready so guys in the next step we have to build a Endo that is going to be a post endpoint and this endpoint is going to receive a text input from the front end and it's just going to create a response by using a chat GPT model based on whatever input text has been passed to the chat GPT model when we get a response from the chat GPT model in the form of text we are going to convert it into audio and return it to the front end and on the front end we will be able to use this audio file to play live on the website as we have seen in the sample project so before we start building the endpoint we are going to need access to open AI API so before we do that we are going to go to browser and explore the open AI documentation so guys here in the the browser I'm just going to search for open AI API and this will take me to the link open AI API overview I can go to that link so I already have account on open AI so I can directly access the open AI dashboard if you don't have account on open a then create account and you should be able to access this dashboard after creating an account so as of now open a API is a paid API which means you have to set up a billing in this account to set up a billing you can go to the settings and here in the the link section you can add your card details and add some credit balance there is no monthly subscription to this it's going to charge you based on the number of calls you'll be making to the chat GPT AI model so once you have created account on open Ai and set up the billing details so here in the dashboard you can go to the API keys and create your own API key here I've already created the API keys for this project so I'm just going to be using this API key in this project so guys now we know how to set up the account and generate the API keys and we have access to our API Keys it's time to go to the API documentation and look at the models that we are going to use in this project so guys here in chat JT there are different endpoints that are available and we are going to be using two endpoints in this project one is the chat endpoint and other is audio which we are going to use to convert text to audio so if you look at the chat endpoint so here they have provided the chunk of code that we can use for our nodejs project and we can choose any chat GPT model that we wish to use in this project so in this project I'll be using a 3.5 turbo model and I'm just going to copy this main function which they have provided here and go back to my nodejs application and use this function here so guys in this function we can see that they are using the open AI modules so I'm just going to open a new terminal and and install open AI by using a command that is npm install open a so guys now open a has been installed in this application so I'm just going to import open a from from open Ai and using the open a module I'm just going to create a cost variable that is open AI using the module openi and here I'm just going to be passing my API key to pass the API key here we are going to create a new file in the njs project and this is going to be EnV file and in the EnV file I'm just going to create a variable that is API key and here I'll be passing my API key as of now I'm just leaving it blank but you can pass your own API key here so so we'll be using a EnV module in this project to read the environment variables into this project so I'm just going to install EnV by using a command npm install EnV so now EnV has been installed in the project I'm just going to import EnV from EnV and here in the project I can just mention env. config this will help us read environment variables from the EnV file so here in the API key I can just mention it as process. env. API key so guys now I have updated my API key inmv file so now we should be able to run this main function so here at the bottom I'm just going to call my main function and run it here to see how it responds so if I run this main function I can see that this chat gbt model is responding me something like how can I assist you today and we can see that it's an object with some information the main thing that we are going to need from this object is the content so here I can console log dot message. content and if I run this again so we can see that we are passing a text to chat JT model that you are a helpful assistant and Chad GPT is responding us with a message how can I assist you today so I'm just going to change the message that we are passing to Chad GPT so here I can say tell me something about New Zealand in 60 characters so if I save this so here in the console I can see the response New Zealand is known for its stunning scenery outdoor activities and friendly locals so we can see that are model is working fine so whatever text we are going to pass to the chat jpt it's going to respond to our messages here through the main function so here we don't want to call the main function directly here I'm just going to create a Endo here that is going to be the get end point is going to receive a request and the response and here in the get end point I'll be able to call my main function and here in the main function I'll be passing whatever text I want to pass to the main function and here I'm just going to make some changes in my main function I can pass text as a parameter to this main function and here in the content I can replace it with the whatever text I'm passing from my get end point and from my get Endo I'm also going to pass the response variable here so here we can say response. Json so whatever response we are going to receive from chat GPT we are going to respond to this get end point so as of now we haven't defined the text here so I'm just going to Define my text here so we can say let text is equal to tell me something about New Zealand in 160 characters so if I save this now this function is not running directly but if I try to go to my browser and call this get end point it should be responding us with the message whatever chat GPT is going to respond so if I go to my browser and I go to Local Host 3000 so we are getting an error that response is not defined in the main function so here in the main function I can pass my response as a parameter if I save this again and go back to my browser and try to run this again so now we can see that whatever chat GPT is responding we are able to return that response to the get end point here so basically in this get end point whatever text we are going to be passing to the main function it's going to pass that text to our chat GPT model and we are responding the response from the chat GPT model to our get end point so guys it's working fine as of now whatever response we are receiving from the chat GPT we are sending it to a get end point but now I just want to add one more step here so when we receive the response from the chat GPT before we return it to our get end point we are going to convert this text response to audio response so basically whatever chat GPT is responding we are going to convert it into audio and we are going to return audio file to the get endpoint so as of now if I go to the get endpoint my get endpoint is receiving a text response but now we'll convert this text response to audio and return audio to our get endpoint and to do that we will be using another endpoint from our open a API that is a audio endpoint so if I go to the audio endpoint here I'll be able to find the chunk of code for nodejs so here they have explained how we can convert any kind of input to speech using this audio endpoint from open a API so I'm just going to copy this chunk of code from here and go back to my main function so here after I receive a response from chat GPT I'm just going to paste it here so here they are passing some input but we are going to pass the input that we are receiving back from chat GPT in the form of text I'm just going to make a change here so here I'm passing whatever response I'm receiving from chat GPT and then this is going to convert the response to the audio buffer and here in the response this time I'm not going to respond with the text message I'm just going to respond with the audio buffer here so here I can say that whatever buffer in the form of MP3 I'm receiving from this audio endpoint I'm just going to send it back to my get endpoint here so basically in this get endpoint I'm passing some text based on this text we are receiving a response from the chat GPT and then using the audio API we are converting that response to the audio MP3 file and then we are responding it to our get end point probably we don't even need the speech file here so I'm just going to remove this line because we are receiving it in the form of MP3 and then we are converting it to MP3 and returning it to our get end point so if I save this and try to run this Endo again so now you see that it has downloaded some files so I'll go to the downloads and try to open this file and I'm going to open it in VLC media player known for its stunning natural landscapes vibrant Mai culture and Outdoor Adventures like hiking skiing and bungee choing so now we can see that we are getting the response the same response but not in the form of text instead we are receiving the MP3 file of the response and that is what we are going to need on the front end so our back end end point is almost ready so last thing we want to do here is that we want to convert this Endo to post Endo because we want to receive this text from the front end whatever user will be sending from the front end we are not going to hardcode this text here instead we are going to be receiving this text from the front end so here I can Define the text again but this time it's going to be request do body do text and we are going to be receiving this text from the front end because we are using a post end point in this nodejs application so I'm just going to install two more packages that are going to be course and body parser so these two packages are going to help us receive the text from the front end in the form of Json file so now these two packages are installed in the application here at the top I can just import code course from course and I can also import body parser from body parser and here after I have defined the app I can just use them as a middleware so I'm just going to say app.use course and I can also say app. use body parser do Json so that's all we are going to need on the back end our back end is ready we have a post end point which can receive a text from the front end and get a response from the chat jpt and send it back to the front end in the form of audio so our back end is totally ready now we can move on to the front end go to the react application and call this endpoint on the front end so guys here I have a new react application running on my Local Host 3001 so if we go to the browser so that's my new react application so to start building the front end the first thing that we are going to do is to install all the required packages that we are going to need in this application so in this application I'm using a package that is material UI so I'm just going to install material UI in this application so here on the link I be able to find the commands to install material UI so I'm just going to copy this command from here go back to my application open a new terminal and install material UI so I'm also going to be using material UI icons in this project so let's go to the browser back again and if I scroll down so here I can find the command to install material UI icon so I'm just going to copy that and install it in my application so now material UI has been installed in this application there is one more package that we are going to need in this application because we are building a talking AI chat bot so we need a package that is react speech recognition so I can search here in the browser react speech recognition I can go to the npm module so that's the command we are going to use to install react speech recognition I'm just going to copy it from here go back to my application and install react speech recognition into my project so this package is basically it can record the sounds from the microphone and it can convert it into speech so basically this package on the front end can convert audio into text and we are going to implement this package in this application I'm just going to show you step by step how to implement this package now let's go to the react application and here I'm just going to remove all the default code first and put hello world to see if my application is running fine so if I save this and I can also look at my terminal so if I go back to the browser and see my application so I can see that my Hello World application is running fine and we are ready to start building AI talking chatbot so guys if I look at the documentation of react speech recognition package so here if I scroll down a little bit I can see that they have provided an entire component that we can use from here so I'm just going to copy this react component and use it in my application I'm going to customize it later based on my requirements but for now let's copy this entire component go back to our application so here under the source I can create a new new component I can name it as a recorder. JS so here in the recorder. JS I'm just going to copy this entire component I'm just going to change the name of this component to recorder and at the bottom I can change it back to recorder so if I save this now we have a recorder component in our application which is from the speech recognition package so in the app.js I'm just going to import my recorder and I'm going to place it here in place of hello world and here I'm just going to remove the class name and put some styling like I'm just going to make display as flex and here I can justify content to Center align the items to Center and I can mention the height of this diff tag which is going to be 100 VH so if I save all this and go back to the browser to have a look at my application so here I can see that they have a start button they have a stop button and reset so guys basically this start button is to start the recording from the microphone and stop button is to stop the recording and reset is going to clear all the recording it has recorded So Far So that's all the buttons we have in this application and they are coming by default from the speech recognition component that we have copied from their documentation but to make it work we have to make some changes here so I'm just going to go back to my application here in the recorder component I'm just going to make some changes here so here we can see that on the click of a start button they calling the function that is start listening so basically we need to make some changes in the start listening function so here and I'm just going to Define this start listening function at the top so here I'm just going to make some change here here I can say start listening is equal to speech recognition. start listening and here I'm just going to pass a parameter that is continues through by passing this parameter I'm just saying that once you start listening so keep listening continuously so now I have defined a start listening here on the top so what I'm going to do is I'm just going to remove all these buttons I don't need all these buttons anymore I'm just going to redesign this l lay out so I'm just going to comment all this buttons and if I save all this and go back to my application so if I refresh it so you can see that it's already listening to me because I mentioned continues to true so it's listening whatever I'm talking and it's able to convert it into text and it's displaying it here on the application because here if you look at the layout we are displaying the transcript here so that's all good we are going to make some changes in this application so what I'm going to do here is I'm just going to add recorder symbol recorder icon in this application which I am going to pull from Material UI we have already installed material UI so I'm just going to go open a new tab and search for material UI icons so if I go to the icons here and try to find an icon that is a recorder icon so here I have a recorder icon which I can use I'm just going to copy this recorder icon go back to my application so here because we have removed all the buttons now so in place of buttons I'm just going to add a recorder icon here and I can assign a font size to this so the font size of this recorder I icon can be 100 pixels so if I save this go back to my application so now I have a recorder icon here but we are going to try and move all this content in the center of the page so let's mention a width of 300 pixels so if I do that it's going to compress the width I think 500 pixels should be a good width and we are going to make the display as Flex Flex direction is going to be column and we are going to justify the content to Center and we can also align all the items in the center so if I apply all this styling now I can see that this icon is in the center of the page it's still listening to whatever I'm speaking here and typing everything here so that's all good I'm just going to increase the size of the icon a little bit more so I would like this icon to be 200 pixels so now we can see that it's recording everything whatever I'm speaking and it's able to save all the recording in this transcript variable which is here so it's all good so far it's able to listen to whatever we are speaking and it's able to record it in the transcript which is good so guys our recorder component is working fine it's able to record whatever we speak in the microphone and it's able to convert that into text so now what I want is I want this recorder to listen to my commands for example if I say delete it should delete all the recordings and if I give it a command that is send in that case it should send my request to the back end with all the transcript that it has recorded from the microphone so I'm just going to make it to listen to my commands to do that I'm just going to create a variable here that is going to be commands so in this commands it's an array of commands and each element in this array is a object where we Define what is going to be the command for example if I say delete it's going to call a function that is reset transcript and if I say send it's going to call a function that is handle download audio so let's create this function here that is handle download audio so for now I'm just going to alert in this function that your transcript has been sent which means that it has already sent the transcript to the back end so to make it work I've created this variable so now I have to go to the use speech recognition hook which is coming from the package and pass the commands here in the speech recognition so if I save this and go back to my application now it's recording whatever I'm saying delete so now you see that it has deleted all the commands because I said delete so I'm just going to say something now and send so now you can see that it's calling the handle download audio function that's uh we see this alert your transcript has been sent so it's able to listen to our commands now and now if we go back to our application so now we see that when we whenever we speak send it's just going to call this function so in this function we are going to make a call to our back end and get the audio file from the back end and we are going to add a audio tag here in the HTML and try to play that audio on the screen so guys let's make a change in this handle download audio function we don't want to alert any anything here but we want to make a call to our back end and get the audio file from our back end so to make a call to the back end we are going to be using xos so I'm just going to install xos by running a command npm install xos so now xos has been installed in the application so here at the top I can import hexio from exos and here in the handle download function I'm just going to call my backend endpoint which is going to be x. poost and we are going to be calling Local Host 3000 so my server is still running on Local Host 3000 and here we are going to be passing the object in the body which is going to be text and in the text we are going to be passing the transcript because all the recording is being saved in the transcript variable here so we are going to be passing the transcript here and the response that we are going to receive from the back end should be in the blob format now let's make this function as async function and here we can say let audio is equal to await so it's just to Avid the response from the back end so once we have a response from the back end which is going to be the audio file we are going to create a URL by using window. url. Create object URL and here we are going to be passing audio do data so once I have the URL of the audio file I'm just going to save it in my state variable so for that I have to create a state variable that is going to be data comma set data so here we are creating a state variable for this this and as soon as I have generated the URL I'm just going to set my data to URL so here at the bottom in the HTML after my transcript I'm just going to add a audio tag and let's make this audio tag as a self closing tag and here we can pass the source which is going to be data and we can make this audio tag as autop playay and controls should be visible on the audio tag so basically whenever I'm going to give it a command send it's just going to call the handle download audio so handle download audio is going to make a call to my back end and get a audio file from the back end and here by using a audio tag I'll be playing my audio file here on the screen so let's save this and now we are going to test it in our application so if I go back to the browser and if I refresh my application tell me something about New Zealand in 160 characters send Zealand was inhabited by the mai people in the 13th century European exploration and colonization followed in the 18th century leading to modern day Multicultural Society so guys that's all I wanted to cover in this video if you found a value in this video subscribe to the channel leave a like on this video and I'll see you in the next one

Channel: Mitter - Your Tech Mate

Views: 425

Keywords: react js, build chatgpt, openai api nodejs, openai api tutorial, openai api key, openai api javascript, react js ai projects, react js ai chatbot, node js, node js express, react js course, react website development, reactjs for beginners

Id: djqi9PTuIGQ

Length: 25min 10sec (1510 seconds)

Published: Mon Jun 24 2024