Chat Engine io
DocumentationProject Tutorials
Generate Your First Professional Chat Engine ioT PROJECT & Get Your BUSINESS 2 Another Level.
Building a Fullstack Chat Application with ChatGPT
Transcript
0:00
hey guys this is Ed row I know it's been quite some time since I last posted but
0:06
I have been sick with covet for a very long time and I'm just now close to
0:12
being fully recovered I'm so glad and excited to come back and bring you guys
0:17
some content again but anyways today we are going to be building this complete full stack chat application along with
0:24
chat GPT and open AI integration and we're going to be building all of this from scratch alright so in this
0:31
application we have this interface we have a list of chats that we are a part
0:37
of and then we have a chat section where we can see the messages we can say hey
0:42
and we can post it and other users in this section can see and we can also send an image across and we can open it
0:50
and we have a little preview over here we can cancel it if we want to but let's
0:55
actually add it and we can go and send our image and once we have this image over here it
1:02
will be posted so everyone else can see also we're going to have more AI
1:08
integration so if I go over here into AI chats underscore test let's say I'm
1:14
going how is everything going so if I ask a message and I send
1:21
it we can actually see we have Mr AI bot
1:26
named Steve to be answering everything is going well thank you for asking we're talking to the open AI API and he is
1:34
responding back so we have this integration but not only that we can go to this section which has
1:40
AI code and we can just say give me a function that gives me random number
1:48
JavaScript and let's say we send that and here he's going to give us a message
1:55
that's going to give us a random number a function in JavaScript and then from
2:00
here we can go to AI assist and in this case we're going to be using this to autocomplete so if if I say how to do
2:09
and then if I wait just a little bit after typing it's going to give me an autocomplete suggestion so I have all of
2:16
this and if I hit tab or enter all of this is going to be filled out also not only that we can go to our login page so
2:23
this is a previous page and we can write test user five one two three four we can hit
2:30
register once we've registered we can choose whether we want to log in and
2:36
once we hit login we are now signed in as a new user so for the Technologies we'll be using
2:42
for this particular application will range from front end to back end so the front end will consist of chat engine or
2:48
chat application Redux toolkit for Estate Management Redux toolkit query for making API calls react router for
2:56
navigation and hero icons for the icons for the back end we'll be using node.js
3:02
as a runtime express.js as our backend framework and open AI for AI integration
3:07
with our chat now I'll show you how to build this application from the ground up and as
3:12
with all my other videos I'm dedicating this tutorial for both beginners who
3:17
need step-by-step process of how to build everything and experience developers who just want to learn most
3:24
of the best practices and understanding how to use certain packages and finally with all my apps this
3:31
website is completely designed all by me I've created all of this ground up so you're free to use parts or even the
3:37
whole project for your portfolio I hope you enjoy this application so let's get started the first thing we're
Frontend Installations and Packages
3:44
going to do is we're going to be installing node.js so you can go to the description or the link in the
3:50
description below to this website and you can download whatever is recommended
3:56
for you for mine is Mac I've already had this installed so I'm not going to do that but node.js is basically it allows
4:03
developers to build and run server-side applications using JavaScript which is traditionally used for client-side
4:09
scripting and web browsers but we can use this for our server-side applications
4:15
and then after that we're going to be installing npx so also a link in the
4:21
description you can go here and you can do npmi-g npx so this is a package that will
4:28
execute npm binaries for us and it's something we'll be using and finally if you don't have a code
4:36
editor or like a text editor for writing code you can go to another Link in the
4:41
description for vs code and you can go to this website download the vs code version that you will need
4:49
and this will allow us to use our text editor and after installing those we're going to be using something called Vite
4:55
so if you know create react app Vite is an alternative to that which is growing in popularity it's basically like create
5:02
react app it doesn't have as many pre-configurations and opinions as great
5:07
react app does but it is a lot faster when you do hot module replacement
5:12
basically when you load up the server it's going to be a lot faster compared to react create react app but there are
5:20
some things that you do have to kind of set up all right with that having being explained we're going to be installing
5:26
Vite and we're going to be doing that I'm going to go into our terminal of vs code I'm going to write npm create Vite
5:32
at latest so we have that it's going to ask you
5:38
for a project name and I'm going to call this client I'm going to choose react over here I'm
5:44
going to choose JavaScript as well and what I'm going to do from here I'm going to do CD client
5:50
and I'm going to run npm I we're going to wait for that to finish after that's installed I want you guys
5:58
to install some vs code extensions which I'll be using and if you go to this
6:03
button right here it says extensions we're going to click over you're going to be installing this one
6:08
es7 plus react slash Radix react native Snippets we're going to be using this to
6:14
create boilerplate code for us for react components it makes it pretty easy
6:19
and then from here we're also going to install prettier if you haven't already but prettier is a nice extension that
6:25
will format our JavaScript and typescript and we'll make sure our package will be utilizing prettier to
6:31
format our code and then from here we're going to be installing some packages by the way if
6:37
you see this dot vs code this is some extra settings that I set this is more for me personally when I record so you
6:44
don't have to worry about this you probably won't have this but I'll need it in my case so I'm going to close this
6:50
and we're going to be installing certain packages so we're going to be installing react Redux and
6:58
Redux JS toolkit so to explain what this is doing this is a state management
7:04
library and Redux toolkit is probably by far the most recommended State
7:10
Management library that I suggest you guys use you can use something like Joe tie or you can use zest stand those are
7:17
all very popular and very simple to use but Redux by far is one of the most
7:22
established libraries and it's good because a lot of people have used it and a lot of edge cases are
7:29
being utilized and making sure they're taken care of so that's why you recommend Redux but on top of that
7:35
toolkit which is just basically code on top of Redux that makes it much
7:40
more easy to write so that's why I highly recommend it and then from here we're going to be
7:46
installing hero icon slash react so this is basically I think it's by Tailwind but
7:53
basically it's an icon library that we can use for different use cases and I'm going to install react router
8:00
Dom and this will allow us to route to different pages of react
8:06
and also I'm going to install actually this should not be at so be careful
8:11
making sure you don't have that now I'm going to install react drop zone so this
8:17
will allow me to add files into our into our Pages for later for the chat
8:26
and then we're going to finally install react chat engine Advanced so this is a
8:32
chat package library that we'll be using so make sure you have this written
8:38
correctly and potentially if in the future I don't think any of these will change too much but make sure you have
8:46
the correct versions and I will show you if you have any kind of installation problems I'll show you the package.json
8:53
that will show you the correct versions and you can install them you can install those versions directly
9:00
by doing for example react Redux something like npmi react Redux at
9:09
whatever version you want so for example in my case react Dash
9:15
Redux I'm using at 8.0 5
9:20
if in the future these versions get upgraded to a higher version and it
9:26
breaks then you can go back and install this and it will fix your problems so
9:31
just be aware of that sometimes I have no control over what these packages change as opposed to like what they
9:38
upgrade you can go directly to those versions but a lot of times especially
9:43
with these older established libraries like most of these I would say they will not cause you to break maybe
9:51
reaction chat engine if he Updates this particular package then you might want
9:57
to use this particular version so it just depends on your use case now after we have downloaded those
10:02
packages we're going to go up open our folder directory and we're going to go into clients and in our
10:09
source directory we're going to go to app CSS and we're actually just going to delete this because we don't need that
10:16
then we can go to app jsx and over here I'm going to just delete
10:23
everything inside here I'm just going to write app and change this to a lowercase
10:29
remove the count in use state and remove all of the Imports in this
10:35
file and then from here I'm going to go to index.css I'm going to select
10:42
everything over here and I'm going to save it we don't need
10:47
anything in here actually we're just going to rename this to scss as well
10:54
and then if you go into a link in the description below I have a link to the GitHub page where it includes all the
11:00
CSS and all you have to do is copy all the CSS in that file and we're just
11:06
going to paste it in here so this includes all the styling we're
11:11
going to need for this entire application now the reason why I'm not focusing on CSS and any kind of styling
11:18
for this project is because I really want to focus on the chat engine I want to focus on uh basically a chat GPT and
11:25
the open AI Integrations as well as the chat application itself so this video
11:30
does not focus on any kind of CSS or styling now after copying the CSS into this file
11:37
we're going to be going to main.jsx and we're going to change this to scss
11:43
because we change the name of the file and we're going to save that and also we're going to open up our terminal and
11:49
we're going to make sure we run this once so we're going to run npm run Dev so with that Vite is going to be able to
11:57
show you that it's running on this port or this URL so we're gonna
12:02
hit command or control click to open it up
12:08
and if you look we do have a problem with dependency SAS not found so we're going to be installing that so we're
12:15
forgetting one thing to install so I'm gonna cancel out of this with Ctrl C
12:23
and over here I'm going to write npm I Dash D s a s s so that means we're using this
12:31
scss file which is SAS and we're installing the dependency of SAS into
12:37
our package Json so over here you can see now we have SAS and we're going to rerun the server
12:45
I'm going to click open and now we can see we have our app written from the app
12:51
jsx file like over here so everything is working as expected and
12:57
we're going to close out and we're going to be doing some installation and setup for our react component chat app
Main Chat Application and React Chat Engine Setup
13:07
so the next thing we're going to be installing is going to be chat engine so basically chat engine is a package
13:12
which simplifies the process of building chat services so if you were to build a chat
13:18
application from scratch there's a lot of infrastructure and complications when it comes to setting up communications
13:24
and connecting users to other users so using a service like this generally
13:31
helps your project that makes it very easy to create chat applications with
13:37
minimal effort so with having said that you can go to the link in the description below to go to this website
13:43
and what we're going to do is we're going to hit up sign up and we're going to sign up to whatever email you want
13:52
now once you signed in you'll see this dashboard and from here we can create new project
13:59
and we can create our own title and here I'm just going to say chat app and if
14:06
you look at this we have free trials that last 30 days and plans start at seven dollars per month however I have a
14:12
promo code and by the way I do receive commission for this but if you use this promo code that I have and you just
14:18
write Edward right here you'll get a free trial that will last forever so
14:23
make sure you use this promo code or else your trial will last 30 days
14:29
so we're going to be creating a project like that and once we have it set up we're going
14:35
to have an app that's set up with a basic and will be led to this page and we'll
14:40
have a project ID as well as a private key The Next Step would be to create a
14:46
user and we're just going to call this test user and the secret I'm just going
14:52
to say one two three four one two three four doesn't really matter I'm not going to fill any of this out I
14:57
don't need much of it maybe I can choose an avatar and once I have it Avatar I'm just going to hit create person
15:05
and this is going to be a user that we've created in our project now once we
15:10
here we can see our chats if we want to create a new chat and we can probably
15:16
just do that and call this test chat something like that and we'll have a chat in our application all right and
15:23
then with that we can go and I'm going to show you some of the documentation before we start I want to show you
15:29
where to find the documentation so if I go back to chat engine you can go over here and you can see the documentation
15:35
over here however there is an updated version of this so you want to go to
15:40
react chat engine and we're going to go reactant engine Advanced and this will provide us a little more functionality
15:46
and a little more um customizability in our application using this one so this is the
15:52
documentation you can go in the link below make sure you see doc slash react V2 and that's over here
16:00
once we have that you can also go to this link this is the rest API of chat
16:05
engine so in cases where you want to use the API and call chat engine directly
16:12
for more customized usability you can go to this particular website with rest and
16:18
I'll show you the API documentation that you can use if some of the opponents are
16:23
not doing what you need and then over here you can go to storybook and you can see all the
16:29
components that this is consisting of and I'll show you all the props of each
16:35
component but for each one I will show you what we're going to be using so don't worry about that unless you want
16:40
to really look at this now before we start coding I want to show you one last thing which is the
16:46
customize UI section of the documentation so if you want to change the styling or customize how the chat
16:54
engine looks which is what something I already did you can go to this link over here with custom CSS there's multiple
17:00
ways to do it with render function you can just use their pre-made render functions inside the component itself
17:07
or you can change the components and replace the components as you need or you can just modify the CSS and for my
17:16
case or for our cases I customize a CSS itself as you can see in the SAS file
17:23
it has a lot of different CSS classes that I've customized to make
17:29
our website look nice so if you want to customize it for your own needs you can do it over here all
17:35
right now apologize for all that explaining but we need to get that out of the way so we can actually start coding so we're going to go to our app
17:42
jsx file and we're going to start writing our Imports so I'm going to do import
17:49
use State now notice I'm writing you state over here this pops up which is intellisense and
17:56
once you click it it's automatically going to write your Imports for you so always make sure you're using
18:02
intellisense if you haven't watched my videos I'm very big on it make sure you use intellisense because it prevents
18:07
typos if you accidentally type it wrong yourself and also saves you the headache
18:12
of writing the code sometime so from here I'm going to do import browser
18:18
router with routes I don't know why intellisense doesn't pick this up for react router Dom but
18:25
we're just gonna have to write it manually sometimes it just doesn't work I'm not exactly sure why so we're going
18:31
to do react router Dom so we're going to have that so now we're going to be doing authentication but we'll be doing it
18:36
later in the video so we're going to start with more of the chat application and some of the UI first and then we'll
18:43
cover some of the authentication parts so from here inside our app we're going to go to div class name app and inside
18:50
here I'm going to set up browser router like so and inside here actually I'm
18:57
going to save it so we get proper intellisense or proper linting and over here I'm going to set
19:03
routes and inside here I'm going to set up our route
19:10
and I'm going to set path is equal to slash chat and we're going to set element to equal
19:19
in component that we have not created and we're going to call this chat like this
19:25
and I'm going to close that so what this is doing we're using react router Dom you need to set up the browser router
19:31
over here to surround the routes that we want to use and then inside our route
19:37
this is the URLs that we can go and this is the element that will be rendered when we go to this particular path
19:44
and now from here we're going to be actually creating our environment variables so I'm going to create a file
19:50
called dot EnV .local so now if you're not used to Vite
19:56
technically uses.emv.local because git ignore we're
20:02
going to be ignoring the local files but we don't ignore dot EMV so you got to be careful we're going to be using this for
20:09
our local directory and what we're going to write is we're going to do Vite base URL
20:16
and we are going to set this to a URL that we're going to set the back
20:22
end to but we haven't created the back end but the port is going to be on one three three seven so this is the URL
20:29
that we will call to reach our back end and then from here we're going to create
20:35
our Vite project ID so now this is a project ID that
20:40
we're going to grab from chat engine and that's how we're going to grab the URL so if I go to my
20:47
projects back on our chat application we can go to our settings and you can make
20:53
sure you copy your project ID over here make sure you don't copy mine so just
20:58
use your own API key over here so we're going to have that and we can save it as well
21:03
all right with that being set up we can go back to our app and I want to show you one thing and this is going to be cool to set up so if you have if you
21:11
race route we don't get like the big uh intellisense that tells you that this
21:17
is incorrect right here with the import it just gives you a three dot showing that it might be incorrect now we want a
21:24
better intellisense so what we're going to do is we're going to install something and we're going to open up our terminal
21:31
we're going to do npmi Dash D E S lint and then eslint
21:39
config react app so we're going to make sure we install
21:44
this so basically we're installing the eslint configurations that create react
21:50
app has light does not have default es link configurations so we want to make sure
21:57
we have this and also make sure if you don't have it installed already you want to install eslint
22:04
this particular extension into vs code so that you have the proper eslinting
22:10
going on so we're going to close that I'm going to go to our directory again
22:15
and there's also one file that I do need to create and I'm going to create a new
22:20
file and then call this dot ES lint or c
22:25
dot Json and we're gonna I need to move this into the client make sure it's in the client folder not the
22:31
outside folder and we're going to have a Json object over here I'm going to write
22:37
extends colon react app like so
22:44
and we're going to save that and now over here now you can see all
22:49
these warnings and errors that actually pop up now we can see chat has not been defined and we are going to be creating
22:56
that but we just haven't gotten to that but our eslint is now showing and these are
23:02
showing the warnings that this is not never use it's just being read same with
23:07
this so eslint will help us with a lot of problems that we might have
23:13
so with our intellisense set up now we can create our component but before we do that let me explain some code
23:19
architecture so here in our client folder we're gonna inside our source directory I'm going to create a folder
23:25
called components now typically in a normal code base I usually have a folder
23:30
called components and then scenes and then the state we're not going to have a scenes folder because
23:36
this this code base is not going to be so complicated we need those separations
23:43
but generally you can just have a components folder if your code base is small enough because just remember
23:48
codebase architecture just because one app is set up in this particular way doesn't mean it's the right fit for
23:55
another application just remember that architect and code bases is as simple as
24:01
make it easy to find what you're looking for so the whole idea is if you have lots
24:08
and lots of files let's imagine you have a thousand files and components and you they're on all on one level of
24:15
components and not they're not nested that would make it very difficult to find a component you're looking for if
24:20
there's like a thousand files in here so you wanna in that case you can create more folders
24:26
to separate and organize what you're looking for however if
24:33
you have other cases where you're nesting too many files into each other you're gonna have to dig deep into 20
24:41
different folders just to find what you're looking for that's also a problem so you always want to make sure that
24:47
your components has a decent length or decent number of files but not too many
24:53
it's always a balance between too many files and too many folders you don't
24:59
want to over organize you don't want to under organize so you always want to make sure you have that right balance
25:04
and that's the basis of code architecture and generally you split code architecture between UI components
25:11
which is like the front-facing elements versus the state components things that
25:16
hold the data because those require separation of architecture and helps
25:23
manager to stay so hopefully that makes sense I know I'm not giving you any visual examples here but it's kind of
25:29
hard to show that but either way in our code base right here we're just going to create a folder
25:35
called components and I'm going to create a folder in here and we're going to call this chat
25:42
and in here you can see that's kind of nested if I open this up you can see that's kind of nested for the sake of my
25:47
own Saturday I like not having to deal with that so I'm just going to create another folder called login which is
25:53
something we'll create later I'm not going to touch it right now but now you can see we have a components folder and we can see the chat right here
25:59
and inside here I'm going to call this index.jsx and this will be our chat application so
26:07
now if you remember our vs code extension if I do rfce this will pop up
26:13
a default component based on the file name and we're going to call this
26:18
actually chat all right and then from here we're just going to make sure we test it um I want to just make sure we see the
26:25
components from here so we're going to go to app.jsx so I'm going to import chat from
26:32
component slash chat and we're going to save it and I want to see if we go to let's make
26:39
sure our server oh yeah make sure your server is running so we're going to do npm run Dev
26:47
you run our server it seems like we are seeing nothing
26:53
and I think that's actually expected yeah that is expected because we are using
26:58
react router Dom and routes are not set up for the default page but if we go to
27:05
slash chat we can now see our chat component like this
27:11
so voila everything's working now if you see this URL this is fine
27:16
like this is not hard to read for the import but we can make this easier to
27:22
always start from the source directory so sometimes we might have a situation where it goes like this goes like this
27:28
you need to constantly just go through different folders just to figure out what you're looking for and that's kind
27:33
of very messy so we're going to be setting up one last thing for our Vite configuration and that is going to be
27:40
setting Alias for our default path so the way to do this
27:45
is I'm going to close out our terminal so we're going to cancel this out over here
27:50
make sure we're clear so we have nothing in there I want to show you that we can install
27:56
npm I Dash D at types slash node
28:03
make sure it closes so it's not very distracting so this will allow us to go to our Vite
28:11
config over here and we can import path from path like this
28:19
and once we have that we can go to resolve actually let me close this so we have more space
28:25
you guys can see better so we have resolve over here and I'm going to write alias
28:31
and over here I'm going to do square brackets and then curly braces I'm going to do find Colon at replacement
28:40
colon path.resolve dashed underscore underscore is what this is
28:47
called if you have two underscores their name comma source
28:53
now it's a little complicated but basically all it's doing is we're just going to find anytime we see an at
29:00
configuration we're going to replace it with our current folder directory that
29:06
leads up to our source directory that's all it's doing we're going to save that we're going to
29:13
save that and then we're going to go and create a new file inside our client directory and we're
29:19
going to call this jsconfig.js Json and inside here
29:26
all I need to do is do compiler options colon and then we're going to set paths
29:34
colon and do at slash star
29:39
colon dot slash Source comma or slash store
29:48
so this will set up our path so that we can go to app.jsx and I can do this with
29:54
an at instead so now we if we have a lot of nested folders this will help us
30:00
significantly all right and once we have that I'm just going to run our server just to make sure everything's working
30:06
so I go to this page we can see our chat is still there so it's working as
30:11
expected I'm going to open up the console in our uh web dev inspector make
30:16
sure there's no errors so make sure you see that and check there's no errors over there
30:22
we're going to close this and we're going to move on to the next thing all right then from here I'm going to close out all of this except for index.jsx and
30:30
over here in our track component we're going to be importing a number of things so I'm going to import
30:37
use multi chat logic so as I mentioned react chat engine Advanced is where we
30:44
are getting this from so in our documentation this is what we need and we're also going to import multi-chat
30:52
socket and multi-chat window
30:57
and I'll show you what each of these will do so over here I'm going to create
31:02
the chat prompts using use multi-chat logic like this
31:09
and inside here we need to pass in a few things so the first thing I'm going to import is a project ID we set up in the
31:16
dot env.local over here so Vite project ID so the way to import using Vite is
31:24
going to be import meta Dot env.vite
31:29
project ID so this will configure or this will grab this environment variable
31:36
over here oops and it'll allow us to use that in our
31:41
use multi-chat logic and then from here we need the user of
31:48
the react chat engine that we created and in our case we're going to have it
31:53
Dynamic later on once we have authentication but for now just to see we have our test user we're going to be
32:00
using this so we're going to set this to be oops test
32:06
user like so we're going to hard code this for now so we can have access and create the chat application first and
32:13
then the third argument that this takes is going to be the pass word of this
32:19
user so I just made it simple one two three four so this will give us the chat props and authentication that we need to
32:25
connect to our chat engine project all right and then from here I'm going
32:33
to do the one styling I do need is I'm going to set this Flex basis to be
32:38
a hundred percent and I'll I'll cover what this will do so we can take the
32:44
full width of the entire window and inside here
32:50
I'm going to erase the chat and I'm gonna put multi chat socket
32:57
like so and the only thing we actually need to pass into this socket is for us
33:03
to connect and we're just going to pass in chat props so this will render our
33:08
component and it'll give us authentication that will provide us to connect to react chat engine website
33:15
and then from here I'm going to create multi-chat window and this is where we're going to actually do a lot more
33:21
logic with creating the components and styling it so I'm also going to pass in chat props
33:28
because this one also needs it and if you take a look we're just going to have a style
33:33
and we're going to set the height to be a hundred viewport height so it takes the entire height of the application
33:43
and we're going to do render chat header and this will basically allow us to
33:50
customize the header of our component so I'm going to go over here I'm going to
33:55
write Heather like that and we're going to pass in we're actually going to pass in the chat
34:02
prop that this passes in from here all right so now you may be wondering
34:08
where I'm getting all this information and how I can how you can customize it if you want to customize it yourself and
34:14
we're just going to go back and I have all the links loaded up over here if you go back to the react chat engine
34:20
Advanced section you can see in the overview tab you have the component and
34:27
the socket so I have the socket over here and then the component over here so generally with the socket you don't have
34:34
to do that much but with the chat window this is where we can do much more styling and customization of how it
34:40
looks and how it works so this part right here render chat header
34:46
you can get that information over here when you see how it works
34:52
you can see there's a lot more information on how to do this but you can also go to the components list to
34:58
show you what each part represents so if I go down you can see render chat header
35:04
that represents this section and if I want to customize it I can do render
35:10
chat header and I can customize my own version and that's exactly what we're going to be doing with this header
35:17
component over here so this will replace this particular component we'll
35:23
have a lot of the same things so we don't have to render and customize every part of this chat application but we're
35:29
going to be customizing parts of it so we can use all right so with that I'm going to go back to our app
Chat Custom Header
35:36
give us more space over here and I'm going to import
35:41
header from at slash components
35:48
slash Heather we haven't created this yet but as you can see with the at again
35:53
that means we always start from the source so we don't have to do something messy that looks like this
35:59
we can just always start from at so we know where it starts from it's just a
36:04
cleaner way to do these things and sometimes it can get very complex when you have very a big code base
36:11
so here I'm going to create a new folder I'm going to call this custom
36:17
header and inside this file I'm going to call this
36:23
index.jsx again
36:30
and actually this should be yeah this should actually be custom
36:35
header like that so make sure you fix that so we can go over here and it represents it goes to this location so
36:42
over here I'm going to do rfce again to get r
36:47
get our base get our component basically so in here we're going to import a
36:54
number of things and now we installed react hero icons
37:02
and we're going to be using some of the icons that they have so I'm going to use chat bubble left right
37:08
Icon phone icon and we're gonna grab it from oops
37:16
at hero icons slash react slash 24 slash
37:21
solid so now where I'm getting this from is you can get this from heroicons.com
37:27
and you can check what we're looking at over here so chat bubble Left Right icon so I'm using this one
37:35
right here so the way to do this is always just copy the text
37:41
of the name left right and then you just have to add an icon and you can
37:48
import depending on whether you want solid or outline so I'm using the solid
37:53
version so I'm over here making sure you're importing from the solid and this is the size of the icon that you're
38:00
using so inside here I'm going to run and add
38:05
some divs like so and I'm going to give this a class name
38:12
of chat header so now again just a reminder I have all this styled
38:20
for us so chat Heather so dot chat header is going to
38:25
represent a lot of items of flex Center space between padding I'm not going to cover
38:31
this you can look at the CSS that you've copied over and you can see what's
38:36
happening with that and over here I'm going to set the class name to be Flex between which is
38:42
essentially doing a flex and making sure everything's aligned separately from each other
38:48
and I'm going to pass in chat bubble Left Right icon and give this a class name of Icon chat
38:56
like so and over here I'm going to set the H3 like this with a class name of Heather
39:03
text and pass in over here we're actually this is
39:10
something I've forgotten we want to make sure we're passing in chat over here and
39:15
with that we can access to chat dot title using that particular prop
39:24
and then from here I'm going to create another div and we're going to create a class name of flex between
39:30
like this and I'm going to pass in phone icon class name
39:37
with icon phone like this
39:42
and give this a paragraph tag I'm going to call this class name Heather text
39:48
and I'm going to say chat dot description like so
39:56
also one thing we want to do because of some warnings that we don't really need to worry about we're going to go to our
40:03
main.jsx and we're going to remove the strict mode we don't really need stroke mode and it
40:08
has no bearing on what the application will do so we're going to get rid of that now we can get rid of that so if we go
40:16
to our Vite application you're going to see that in small screens we're going to
40:21
have this configuration but on bigger screens we can now see our chat
40:26
application if you look at this everything is similar to what you would see on the
40:33
documentation very similar we just changed some of the colors or at least I change the colors
40:38
with the CSS so we have a darker theme there are some
40:43
or there are some nuances that we'll need to fix but if you take a look here this is our header
40:49
and that is everything we set up here when we when to app.js or sorry uh
40:57
index.jsx this is what this header is representing it customize this replace
41:03
the header and now we can render out this particular thing now with this one of the weird things
41:09
about our header right now is because of these these little arrows so basically this shows up when you haven't selected
41:16
the chat so we're gonna have to kind of customize what we're doing so I'm going to use console log chat and
41:22
I'm going to say chat description just to see what we're dealing with so description like so
41:29
and we're going to save it so by the way the way I did this I'm using something I'm using a console log extension and I
41:36
believe it's called Rocket something rocket I believe
41:43
oh sorry turbo console log so this is what you're looking for and what it allows you to do is just
41:50
highlight over here I'm just going to press Ctrl alt L and that will console
41:55
log whatever you're highlighting over so make sure you have that if you want to use what I'm doing
42:00
and once I have that saved I'm going to open up our terminal or our console log over here and we can see
42:08
that we kind of have some of these arrows as our text so what we're going
42:13
to do is I'm going to write chat dot description
42:19
if that's equal to or arrows like this
42:25
or at least if it's not equal to or arrows then we render out
42:31
what we've already written so let me actually close this so we have more
42:36
space and we're going to do a ternary operator
42:42
and I'm going to write close it like that so if it's not equal to this then we
42:49
render out our description otherwise what we're going to do is we're going to
42:54
show p over here and we're just going to
43:01
write no chat selected
43:08
like so we're going to save that and I need to make sure we close
43:15
and then we can see we have no chat selected over here
43:21
so now you can probably have a more elegant solution to make it look better on smaller screens but generally you
43:28
don't have to worry about that since generally they'll have like a full screen that they're using so it's going
43:33
to look more like this all right then from here I'm going to erase our console log I'm going to save
Chat Custom Message Form
43:39
it I'm going to close our our app GSX as well as a custom header and now we can
43:44
go back to our index.jsx and we're going to be customizing another component so
43:50
this is where it's going to be most of the functionality so we want to be able to do
43:56
a lot more things for our message Forum but we're going to first style it out
44:02
first so we're going to do render message form like this
44:07
and this one is going to take a props value
44:15
and here I'm going to return something called standard
44:21
message form so this is a component that we have not
44:27
created yet but we will so we're going to do props over here I'm going to pass in props here but we also
44:34
need to know the active chat we want to have the props and the
44:41
information of the currently active chat so to do that we're going to do active chat like so and I'm going to pass in
44:49
chat props dot chat like so and this is where we are going to create
44:56
our component so I'm going to go over here I'm going to import standard
45:01
message form from at slash components
45:08
slash custom message form
45:13
plural I'm going to do standard message form we're going to have
45:19
multiple of these forms and they're going to be different forms for different purposes and like I mentioned in the intro we're
45:27
going to have ai generated messages or AI response by an AI bot
45:35
all right the first thing is I'm going to create a folder in the components directory actually make sure I save this
45:42
so I'm going to create a new folder over here call this custom message forms
45:49
and I'm going to create a file called standard message form
45:54
jsx the reason why this is not index.jsx is because we're going to have multiple of these custom message forms so we're
46:01
going to have multiple of these files so I'm going to use rfce again with standard message form and we're
46:08
going to make sure we have this all set up and it's working so I'm going to save
46:13
it and it seems like it doesn't seem to exist all right so I
46:21
found out why it's showing that and I just restarted it I saved it I restarted
46:27
if you need to you can restart the server this is the one thing I don't like about fight sometimes it just
46:32
doesn't reload properly at I'm not exactly sure create react app never had this problem
46:38
but basically I just saved this I restarted it and then it's now working so make sure you can
46:46
restart it because this this URL was correct all right with this we can double check
46:52
our application it's having our standard message form existing over here and now we can see it
46:59
however we want to customize this to look a little bit different so we're going to have this is our final
47:04
application we have a send a message we're going to have an attachment that we can add files and then we have a send
47:10
so it's styled a little bit differently but we're also going to customize the submit so it can do
47:15
various things so we're going to go back to our code
47:21
I'm going to close this close that close our terminal over here and inside
47:27
our application I'm going to do const message set message so this will save
47:34
the message that we are going to be using I'm going to pass in use State over here so again
47:40
use intellisense for that
47:45
and we can just pass in a string inside U State and over here I'm going to do const attachment and then set attachment
47:54
like so I'm going to pass in use State again
48:00
and pass in an empty string over here now I'm going to save it
48:07
I'm also going to have one more we're going to set preview and then set preview so this will be the preview
48:14
image that we want and this will be an empty string as well
48:21
over here I'm going to say class name with a message form
48:27
container so this will be the outer container to contain our div
48:33
and we're going to start by adding the preview so we're gonna implement the preview section so
48:42
what I'm looking for I'm going to go back to our image over here I'm gonna
48:49
I'm gonna choose a random image of these speakers over here and now you can see our little preview and it has an x mark that we can cancel
48:56
out if we want so this is our preview and what it's doing so if I go back to my code I can go to
49:02
our preview I'm going to write div and I'm going to close this div as well
49:10
and inside here I'm going to say class name message form preview
49:19
inside here I'm going to pass the image and we're going to do class name
49:25
with message form preview image and again this is not a CSS video
49:34
so we're going to do Source preview in Brackets like that
49:39
actually it should be singular and I'm going to do on load
49:45
we're going to pass in url dot revoke object URL
49:52
preview I'm going to close this like that
49:59
so now what this onload is basically doing is it just frees up resources when you don't need the image anymore so this
50:07
is just kind of a Nuance when you're using it for something like the preview so we want to make sure we have that and
50:13
now we're getting a warning and thankfully with our tone sets it's going to tell us that we need an ALT tag
50:20
and I'm just going to have this as the same as the class and we're actually just going to remove
50:25
the image so I'm going to save that and now it's going to be split onto
50:31
different lines and then we don't have a warning anymore I'm gonna
50:37
get an import icon from xmark icon so that's the close icon
50:44
I'm going to close this I'm going to pass in a class name message form icon X like so
50:54
I'm going to write on click we are going to remove the preview like so
51:02
and we're also going to remove the attachment and we're going to save that so that
51:08
should establish our preview of our image I'm going to save that
51:14
so right now if you look at the website um we have nothing right now and that's because we don't have anything for our
51:20
preview so what we can do instead is we're going to create a div and here is where we're
51:26
going to actually have logic we're just going to miser form something like that and you can see it's already placing our
51:33
text over here um we're going to go back but we don't really need this for now so I'm going to
51:39
say class name message form like this
51:45
and I'm going to pass in another div and this is going to represent the input so
51:51
this is where we're going to be able to type so I'm going to write class name message form input
52:00
container and inside here I'm going to write input
52:06
like so and we're going to give it a number of props so I'm going to write class name
52:12
is equal to message form Dash input so again all the styling is done with all
52:17
these class I'm going to give this a type of text and the value of the message
52:25
that we created earlier so right here from the U state
52:30
and over here I'm going to do on change
52:36
and right here I'm going to set e like this we're going to set the message
52:41
over here so we're going to set e dot Target dot value
52:48
and you want I actually want this to be separated out into a different function so I'm going to call this handle change
52:54
I'm going to move this up here I'm going to write const handle change I'm going to pass that in just like that
53:02
so now it's separated from our component
53:08
and then from here I'm going to go over here I'm going to write place
53:13
holder and all right send a message dot dot
53:20
and now I'm going to save that and we are going to double check on our website
53:25
that we have that so now the styling is not as is expected but we'll be handling
53:32
it we can still type so once we have the other icons this is going to be a lot
53:39
bigger and then from here we're going to create another div over here
53:45
and this is going to have class name of message
53:51
form icons like that and inside here we're actually going to
53:57
do the attachment so we're going to use react drop zone so basically this is a
54:03
package that will allow you to drop any kind of file and in this case we're going to drop like an image
54:09
and you're going to be able to drag it onto the UI and it's going to be able to
54:15
accept that image and we can then upload it so here it's going to take accepted
54:22
files and we're going to say dot jpg
54:28
Dot JPEG and dot PNG
54:35
I'm going to make sure we close Drop Zone but we're going to add a few more props so we're going to make sure we
54:41
can't add multiple so we're going to say multiple is equal to false we're going to say no
54:47
click is equal to true and we're going to run a function called
54:53
on drop so this is the function that will be running once we drop a file onto this
55:02
particular component and it will give us an argument of accepted files so it's
55:08
going to give us the file that we dropped onto it and we're going to set the attachment
55:16
as accepted files zero and we're gonna place it in that
55:22
state and also we're going to set preview and if you remember we did URL dot
55:30
revoke object URL but here this is we're going to use URL
55:36
create object URL so this is what you have to do when you want to create some kind of
55:43
object for preview we're going to add the accepted files over here
55:49
and then we remove it once we exit out where when we click on the X
56:00
and actually we're going to make sure this is we're going to have like an inner
56:06
component over here as a child
56:13
and we're going to have get root props
56:18
get input props and then open like so
56:25
and inside here we're going to have a div I'm going to make sure that's closed
56:31
then we're going to have dot dot dot get root props close that
56:37
and inside here I'm going to have input I'm going to put dot dot dot get input
56:44
props like this and close it
56:50
so if you're not familiar with react Drop Zone this is essentially what you have to do to
56:56
work with this particular component but this is basically the default and then from here we can kind of customize and
57:02
what we're going to add is that we're going to add a paper clip icon from react hero icons make sure you
57:09
use the intellisense to grab the import I'm going to do a class name of message
57:14
form icon clip and on click we're going to have it open
57:21
and we're going to make sure we close this and we are going to save it
57:30
and with that we can actually check if this is working so over here we can see we have our input we have an attachment
57:37
icon and we can click it once we click it let's add some random engine image
57:42
doesn't matter where we can see the preview now so it's being saved in our state and then we can close it by
57:49
clicking the x button so perfect and then from here below our Drop Zone
57:56
we just want to add a little horizontal line so we're going to do HR class name
58:03
horizontal rule basically gives us a line but we're going to do it vertically and we do that with CSS so we're going
58:10
to set this vertical dash line so it's pretty simple and then from here I'm going to add another
58:18
icon and this is going to be paper airplane icon so make sure you use intellisense so we have the import so
58:25
we're going to have a class name of message form icon
58:30
airplane and I'm going to say on click
58:36
we have this running and then we could say set preview
58:44
and then we can pass in an empty string because we want to clear out the preview once we hit this submit button
58:51
and then we're going to have a function called handle submit like that we haven't created this
58:57
function yet but let's comment that out let's make sure everything is working
59:03
so over here we go over here we can write a message we can add
59:10
some random image and we can hit submit and it's going to clear it out we haven't cleared out this in particular
59:17
but we can change that in the handle submit so we can go back over here
59:23
and now we are going to be creating our handle submit function so we can create
59:29
it up here at this top let me close this we're going to have const handle submit
59:37
and what we're going to do is we're going to do some asynchronous calls to the back end
59:42
so we're going to have this labeled as async and before we go and run this function I
59:48
want to I want to add some props over here so
59:54
I'm going to add the props and the active chat so if you go back if you remember into our chat component we have
1:00:02
the props being passed as well as the active chat and for your sake we're just gonna
1:00:09
console log both of these out so we can see what's happening
1:00:14
so if I save it and open it up
1:00:21
right now we don't have a particular active chat but we do have props
1:00:26
we have the on submit function so this is the on submit function that we're gonna we're going to need to save and
1:00:33
send our message to the back end so right now
1:00:40
we can create our own chat we're going to call this test chat
1:00:46
and we're going to have our new chat over here and you can see that I am a member so over here
1:00:52
we're going to go back and you can see I'm a member over here and now if you take a look at our active
1:00:58
chat prop you can see that we now have information and this
1:01:05
represents the current chat that we're wondering so admin is basically me
1:01:11
or the user which is test user and we don't have any attachment blah blah blah
1:01:17
and people it includes our personal user right now
1:01:22
so right now this is working but if I click this button it's not going to do anything because we aren't handling that
1:01:29
function so to handle submit we're going to be using this particular prop over
1:01:34
here if you see on their props maybe I can zoom this in so you guys can see a
1:01:40
little better so over here we have props and on submit this is the function that
1:01:47
we need to call so that we can save the message so even if I send anything
1:01:52
nothing happens so we want to make sure that's going to work so to do this
1:01:59
I'm going to remove this and in handle submit I'm going to create a new date
1:02:06
so on submit requires a few properties it's going to include
1:02:14
attachments created sender username text and active chat ID so that's what on
1:02:21
submit is needing so the first thing we're going to do is we're going to create a date
1:02:27
so we're going to say new date like this and we're going to do we're going to change this to ISO string so we're going
1:02:34
to make sure we're formatting this in the proper way and I am going to replace the T when it
1:02:40
comes from this ISO string now you can probably use a date library for this but
1:02:46
doing this manually is fine too we're going to replace also Z as well
1:02:53
and we're going to add a time to it so we're going to say math
1:03:00
dot floor math dot random and we're going to multiply this by a thousand
1:03:07
and I'm going to say plus 0 0 colon 0 0.
1:03:13
and actually this should be on the outside of the curly braces so like right there
1:03:19
so once you save it it's going to format it so we have it on separate lines
1:03:24
make sure I close this and then we're also going to create an attachment
1:03:31
so we're gonna I'm just going to call this at instead I'm going to say if we do have an attachment
1:03:38
we actually need to format this into a particular format like this this is just what chat engine accepts we
1:03:46
need to add the attachment to something called blob and then file is going to be the
1:03:52
attachment name so that will allow us to attach it to
1:03:58
the handle submit and I'm going to put an empty brackets if it doesn't exist or else
1:04:05
it'll error out and then finally I'm going to create the form which is just an object and I'm
1:04:12
going to say attachments and the pass in at with created
1:04:17
and we're going to pass in the date and we're going to say sender user name
1:04:23
props.username we're going to say text colon message
1:04:29
and then active chat ID and we're going to give it activechat dot ID
1:04:35
so if you're wondering where I'm getting this information it's all in the basically the rest API over here you can
1:04:42
find the on submit and it'll give you some examples of what to send so going
1:04:48
back to our code here I'm going to call the on submit
1:04:53
which is on our props so Props dot on submit and we are going to pass in the form
1:05:01
and after we submit the form we also want to make sure our message gets emptied out
1:05:07
like so I'm also going to set the attachment to empty string like so
1:05:16
and then finally I'm going to go down since handle submit is not being called we are going to make
1:05:22
sure we call that and with that I'm going to be saving it and now we're going to check if
1:05:28
everything works so we're going to go back I'm just going to clear everything so
1:05:34
clear should clear our console and over here we're going to do test
1:05:41
and I can submit and our message gets saved so perfect I
1:05:46
can also add an image let's add this
1:05:52
test image and I can send and our image will load and there we go
1:05:58
we can see our image so perfect everything is working as expected
1:06:04
so now what we just did if I go back to the code what we just did is basically we created our new component and we
1:06:11
styled it a little bit differently from the main chat engine and the reason why
1:06:17
we're not we're doing that is not because so we can just style it a little bit differently it's so that
1:06:22
we are going to be using we're going to have a chat like a chat a particular
1:06:28
chat where we can talk to open Ai and the open AI will respond to our chat
1:06:34
message and by doing so we need to create our custom component and create
1:06:39
our own handle submit and we'll do this in a little bit but we're going to have
1:06:44
to Now set up the back end to do so with that being said before we create our backend let's actually go to open AI so
What is OpenAI and how is it related to ChatGPT
1:06:53
now open AI is kind of part of chat GPT it's the company behind chat gbt however they
1:07:00
have their own website where you can deal with their API instead of chat GPT
1:07:06
is more of a front-end modified version fine-tuned version of
1:07:12
GPT model but open AI has their GPT 3
1:07:18
Model that allows us to use their basic machine learning or their machine
1:07:23
learning capabilities and we can use it through in API versus just a front-end
1:07:29
interface now note that chat gbt is built on GPT 3.5 which is not available
1:07:36
in the documentation just yet however they are opening up
1:07:44
GPT 3.5 very very soon so this is currently the documentation for GPT
1:07:50
three but GPT 3.5 is the underlying
1:07:55
underlying API that powers chat GPT so it'll be very close to what you would
1:08:01
see hey this is Ed Rogue from the future I'm doing a little bit of a post editing because as soon as I say gbt 3.5 was not
1:08:09
available it becomes available a week after I record so we now have gbt 3.5
1:08:15
available through the API so we have the power of chat GPT through the API
1:08:21
documentation if you go to this particular blog it's going to tell you all about it and you can go to chat
1:08:27
completion on open AI documentation and this is the documentation for chat GPT
1:08:33
API so if you go down you're going to see some slight differences I will show you how to do them in the final GitHub
1:08:40
repo there will be another file and I'll show you where that file is so that you can use the newer version however this
1:08:48
recording is still going to be using the older version but switching over to the newer version will be easy I suggest
1:08:55
just following the video and at the end you can change the file and you can see the differences the result will be the
1:09:02
same except it'll just be a more powerful version of what you see in the
1:09:07
completed app of the current recording anyways back to the video
1:09:13
so now make sure you sign up and log in I have a link in the description below
1:09:18
and you can get a free trial from my understanding the free trial gives you like 18 Worth or something like that I
1:09:25
don't know if it's still the same but that's what happened when I got it so you can use it for free and the 18 is a
1:09:30
lot but make sure you realize it expires for me it expired so now I am
1:09:36
paying for the usage but the usage is extremely cheap like there's no way if
1:09:42
you even make it to one dollars a payment it you've used the API quite a bit so even if you use it quite a bit
1:09:49
you can see I've I've I haven't even managed to use one dollars worth so right here I used
Backend Installations and Packages
1:09:56
one cent so far and I've used it a number of times just for developer purposes I'm not using it extensively
1:10:03
but still you're you're not going to pay that much if you're paying so if you go back over here you can see
1:10:09
the API Keys now the secret key if you create a new secret key you can go like this
1:10:15
and I'll show you the secret create don't worry I'm going to be deleting this so I'm going to copy this this is a
1:10:23
secret key you'll get these and once you have the secret key you can never
1:10:29
um see the secret key again you have to copy it at that point in time so if I have this secret key I can never
1:10:36
see this so if you just mess up you can just obviously revoke the key you're also going to have to have like at least
1:10:42
one secret key but um you can just delete whichever one you want so I'm going to regenerate delete
1:10:48
this key I'm going to be using this just for purposes of you you can use this
1:10:55
so once we go in now that we have the secret key now we can set up our back end
1:11:00
all right with that I'm going to open up the terminal and I'm going to close the server for
1:11:05
now and I'm going to do CD dot dot so I can go into the Parent Directory of this folder and I'm going to create a
1:11:13
folder called server I'm going to go into that server for my
1:11:18
terminal and here I'm going to run npm init Dash y
1:11:24
so this will initialize our npm packages so we have a package.json and then Dash
1:11:30
y represents saying yes to every prompt that it gives you because there you were just using the defaults of the prompts
1:11:40
okay and then from here I want to create a DOT EMV file
1:11:49
dot EnV and I'm going to set the port to be one three three seven so now if you remember
1:11:56
back in the dot emv.local we set the Local Host to be one three three seven
1:12:01
this is the gonna be the port that we're going to be using
1:12:06
and over here we can create our open API key like this and I'm going to copy
1:12:14
and paste what we had for the opening eye key over here and this is the secret key that we're
1:12:21
going to be using to connect to our open AI or open AI API
1:12:28
and I'm going to save it and over here I'm also going to create a new file called dot get ignore
1:12:36
so that when we push this repo up we do not want this to be exposed publicly so
1:12:44
we want to make sure this is getting ignored so we're going to have to add the environment variables on whatever
1:12:50
hosting platform we set up later on but this is for local usage only and we need
1:12:57
to make sure we ignore that and we do that by the dot EMB we also want to ignore node modules because usually
1:13:04
that's too big of a package and we just the user can install them the packages
1:13:10
themselves okay and then from here I'm going to
1:13:15
install a number of packages for the back end so I'm going to install Express
1:13:22
which is a backend framework for our apis body parser which is a simple package
1:13:28
that will allow us to grab requests and be able to parse our bodies and then
1:13:34
from course is going to be allowing cross-origin resource sharing
1:13:40
we're allowing that to happen dot EMV will allow us to read the environment variables that we just created
1:13:47
helmet is just going to be giving us a little more Security on our apis Morgan will allow us to log anytime the
1:13:55
API gets called it's just going to automatically give us information and those are the packages that we want
1:14:02
to start by installing and while it's installing we can go to
1:14:07
package.json and we can add some Scripts
1:14:12
or we can change we can add type colon module so generally when you have
1:14:20
a node you can only use what was it require because es5 because that's es5 syntax
1:14:28
but type module allows to use es6 which is using the import I mean not necessarily es6 per se but it allows us
1:14:35
to use the importing system that es6 has
1:14:41
and then from here we have the scripts and I can write Dev like so and I can write nodemon
1:14:49
index.js so we haven't installed known men which is the next thing I want to do so I'm going to do npmi Dash capital D
1:14:56
so we want to install this as a Dev dependency so it only exists in the
1:15:01
development environment so here I'm going to write node Mount like that so the packages will be
1:15:08
created in a separate little property over here and it seems like okay so I did mess up
1:15:16
I'm going to not save this because I installed it but also change this so I
1:15:21
have to rewrite the type like this yeah the reason why that happened is
1:15:28
because I installed it and then it added Dev dependency over here but I also tried to change it at the same time so
1:15:34
it's going to cause a conflict so I'm rewriting what I wrote so Dev and I'm
1:15:40
going to have node men index.js so now I can save it this will be able to run our index.js
1:15:48
file that we have not created yet so that's what we're going to be doing so create a new file and call this
1:15:56
index.js and in here I'm going to do a lot of
1:16:01
imports and I'm going to be setting up our server so to do that
1:16:09
let's do import Express from Express like so
1:16:15
and then I'm going to import body parser from body parser and we should use
1:16:21
intellisense so import course from Chorus this one doesn't seem to pop
1:16:28
up I'm going to import dot EnV IR from dot Envy
1:16:35
import helmet
1:16:41
from the helmet package import Morgan on the Morgan package like that and then
1:16:48
also I'm gonna create a comment say configurations and I'm going to use Dot env.config
1:16:58
I'm going to run our app so this is a lot of just boilerplate code that you
1:17:03
generally just have to write it's generally the same usually every single time especially for these packages
1:17:09
but these are one of those things you just have to set up once and then your package or
1:17:14
your server or app is basically ready to go sorry you app using express.json and
1:17:21
then we're gonna set up helmet like so
1:17:29
and then for helmet we need to configure cross origin resource policy or else
1:17:35
we'll be denied access to access from the same
1:17:41
or from a different server
1:17:47
then app.use Morgan and we're just going to set the settings
1:17:52
to be common so this sets up the Morgan settings
1:17:58
body parser has to be set up as well we're going to set this as Json we're
1:18:05
going to set a limit of 30 megabytes and we're going to say extended is going to be true
1:18:13
and then we're also going to have to set up the body parser that URL encoded
1:18:20
and I'm going to set this a limit of 30 megabytes as well and then we're going to set extended to
1:18:27
be true and then I'm going to do app.use course
1:18:38
and then from here we're going to make sure we start the server so to start our server with Express
1:18:45
I'm going to set the port like this set process.env.port so that is the
1:18:52
environment variable over here and sometimes the environment variable
1:18:57
might not exist so we just want to make sure we have a backup so 9000 will be the backup Port but primarily we're
1:19:03
going to use 1337 as our main and then we're going to do app.listen
1:19:09
I'm going to set this as port with a callback function over here I'm going to say console log
1:19:17
I'm going to put this in template strings I'm going to say example app listening
1:19:24
at http colon slash localhost and we're going to set our
1:19:31
Port so this is just a console log showing that our server is running at this point
1:19:38
so to do this I want to make sure our server is being run so I'm going to open up our terminal and then we can run the
1:19:45
command that we wrote so npm run Dev
1:19:50
and as you can see we have our console log everything's running so now this there's no point going to it because
1:19:57
it's going to show nothing there's nothing there so we can just cancel it for now we just want to make sure
1:20:02
there's no errors so make sure you don't have any errors going from now another thing we want to set up is
1:20:09
going to be open Ai and making sure we're connecting to our index.js with that so I'm going to close this terminal
1:20:14
and there's a package that we want to use for node and it's a link in the description below you're going to go to
1:20:21
this GitHub with openai node.js and we're going to be installing open AI so this gives us
1:20:28
more refined access to using open Ai and it's
1:20:33
kind of how they want you to use it so I'm going to do npmi with our terminal
1:20:40
open AI while that's installing we can go back
1:20:46
to the GitHub and we can essentially copy most of this I'm just going to copy
1:20:51
these two lines this is what we're going to be using in our routes but we're just
1:20:57
going to ignore that for now so open AI setup is pretty pretty simple so over here I'm going to just say open AI
1:21:05
configuration and I'm going to paste what I had so
AI Chat
1:21:11
this is basically the import so I'm going to move this up and I'm going to be changing this to an import instead so
1:21:18
I'm going to do import configuration and this should be
1:21:23
from openai get rid of the the prints so we have that imported
1:21:31
and over here we have this and we also have our open AI API key which is
1:21:37
essentially did I is that correct open AI API key
1:21:43
no that is not correct so make sure you have the same environment variables and we're going to pass that in over here
1:21:52
and then from here we have new open a configuration this will allow us to basically call our routes anytime we
1:21:59
need so using that we can save that and we can be using open AI for our
1:22:06
configurations and one thing to note I want to make
1:22:11
sure this is exported we're going to be using this particular variable in or in
1:22:16
another folder or another file we're going to create a route file for that and so to do that let me close this
1:22:22
terminal I'm going to close all these files it's a little messy close all of this and I'm going to go
1:22:28
back to index.js and then I want to create a new folder and we're going to call this routes
1:22:35
and one of the route files we're going to have is going to be open ai.js so this will represent all the
1:22:42
routes that will point to open AI typically we're gonna usually have
1:22:49
another folder called controllers so that's like the standard best practice where you can
1:22:54
put the functions of the routes or what the routes are doing into another file
1:23:00
and place all the functions that are relevant over there but because this is a much simpler app it's much better to
1:23:06
just have the routes over here we don't really need to decouple the routes and
1:23:12
the controllers in this case so we're just going to have that all in one section and again if you remember the
1:23:18
code architecture like I mentioned your code architecture is very dependent on
1:23:24
how big your application is how many files and what best suits the application
1:23:30
so in this case we don't need to create more files for no reason so we're going to import Express
1:23:37
from Express like so oops
1:23:43
so this will allow us to use a router and I'm going to import
1:23:50
axios from axial so we have not installed axios so I'm going to do that
1:23:56
I'm going to do npm I axios like so
1:24:03
we'll close that so axios is basically a way to call apis
1:24:09
this is a convenient way to do so I'm going to pass in dot EMV because
1:24:14
we're going to need to use the environment variables and you always need to configure it for each file
1:24:19
and I'm also going to import open AI so this will grab the open AI file from the
1:24:25
index.js so I'm not exactly sure I think you need to
1:24:31
be very direct with what you import but I
1:24:37
might be wrong but either way this will for sure work and then we're gonna
1:24:42
configure our DOT EnV over here and then from here I'm going to set up
1:24:47
our router and this is going to be Express dot rather like so so this will allow us to use our routes in a
1:24:54
different file so I'm going to do router dot post and the route that we want to use for this
1:25:00
I'm going to call this text so this endpoint will have a slash text
1:25:05
to call and we're going to have an async function
1:25:10
because this is going to require some API calls and I'm going to do a try catch block
1:25:18
over here I'm going to say error over here and I'm going to say console Dot
1:25:26
error it's an error like that along with passing the error message
1:25:35
just in case it doesn't work out and I'm going to do res dot status 500.
1:25:41
I'm going to pass in dot Json and I'm going to pass our error message
1:25:47
in our response so this will return an error if this part doesn't work
1:25:56
and what we want from the body is going to be the text and the active chat ID
1:26:02
and I'll come back to what this will will be doing but before that we have
1:26:09
this router.post text we also need to export
1:26:15
our router because we'll be using this in our index.js to make sure we connect it
1:26:22
and then once we go to our index.js file I'm going to have a routes section
1:26:30
and I'm going to say app.use slash open AI comma
1:26:38
open AI routes which is something we haven't defined just yet
1:26:43
and I'm going to go up here and I'm going to import open AI
1:26:50
routes from the routes file so slash routes
1:26:56
and then open AI dot JS make sure when you're viewing this you need to identify
1:27:02
the file type it is not like with fight you don't have to ignore this but you do have to keep
1:27:09
these to work so once you do that we have this route basically set up and actually I messed
1:27:17
up the capitalization so make sure these are correct so open AI routes like that
1:27:24
so when you want to hit this particular route right here
1:27:29
you're going to have to call HTTP colon slash localhost
1:27:35
colon1337 slash open AI and then slash text that's how you hit
1:27:42
this particular route so anytime you have this and it opens up to routers
1:27:48
this will be the parent route so this is always going to be a prefixed prior to
1:27:55
this right here and whatever routes we want to add later
1:28:00
and for now we're just going to keep it like this and we're going to keep it simple I want to make sure we
1:28:07
console log the text when we get it back and also I'm just going to return
1:28:15
the text that we get just for testing purposes and we're going to be doing
1:28:20
other stuff with it so I'm just going to pass in text like that so we're just basically returning the text that gets
1:28:26
inputted so I'm going to save that and save this as well all right so from here for now I'm going
1:28:34
to create a new folder in our source directory I'm going to call this state and inside the state folder we're going
1:28:41
to create a file called api.js so what we're going to be doing is we're
1:28:47
going to be using Redux toolkit and Redux toolkit query for that matter so
1:28:53
what this essentially does is we are basically using Redux except
1:28:58
Redux toolkit is basically a way to abstract out all the complicated
1:29:04
all the complicated boilerplate so it's like it shortens the amount of boil pick code that you have to write and then the
1:29:11
Redux toolkit query allows us to make API calls in a very simple way and store
1:29:17
it in our Redux store so by using redox toolkit and Redux
1:29:22
toolkit query we can make very simple API requests and then save those values
1:29:28
into Redux toolkit with you know some differences there's going to be some
1:29:33
differences but it makes it makes it pretty convenient so in our file api.js I'm going to be
1:29:42
importing create API fetch base query as well
1:29:49
and we're gonna grab it from at reduxjs slash toolkit query slash react
1:29:59
and then from here I'm going to do export const API I'm going to create the API so
1:30:06
essentially we're creating the slice that's what they call the store in
1:30:11
basically like a section of the store in the Redux Redux store basically
1:30:19
so we're going to have create API that allows us to do that and then we're going to have a base query so this will
1:30:25
give us the base URL and if you remember we're going to be using the
1:30:31
environment variable that consists of the base URL we created before so I'm going to do import dot meta dot
1:30:39
EnV dot Vite base URL
1:30:44
so by providing this we can make API calls with this particular
1:30:50
URL starting from here so we can do the base URL localhost and then we can
1:30:56
do slash open AI right here in the routes and then we can also hit
1:31:04
the slash text as well so we'll be doing that in the following lines so I'm going
1:31:10
to say reducer path and we're going to call this main so reducer path represents the name
1:31:15
of this particular slice and then tag types represent where the
1:31:20
files or where the text or like the data that we're going to be saving but in
1:31:26
this case we don't really need to save any kind of data it's just going to be automatically posted into
1:31:33
the backend servers so we don't really need to store any data on the front end really
1:31:40
we just have to retrieve the information from their API
1:31:45
and then from here I can do post I'm going to call this endpoint post AI text
1:31:52
so this is basically the query call that we'll be using to make an API request
1:31:58
over here and we're going to use build dot mutation now I know these are all these
1:32:05
fancy terms for Redux took a query and that's the one thing I don't like about Redux toolkit Corey per se is because of
1:32:11
all the abstraction it's not quite evident of what some of these things do
1:32:16
in the documentation I will say is a little bit confusing despite being comprehensive
1:32:22
this is essentially any time we're using like a post call that's why I prefix this post build mutation will allow us
1:32:30
to make a post API call to the back end and we're going to call this query over here and the query will give us a payload so
1:32:38
we can pass in whatever payload and I'll show you when we use this we can pass this in over here
1:32:44
I'm going to create the URL and we're going to say open AI slash text so that
1:32:49
represents the URL we just I was mentioning before the base URL will be prefixed onto this
1:32:56
and this is the URL endpoint that it calls and we're going to call this method
1:33:02
post like so and we're going to give the body of the payload that we will send to the back
1:33:09
end I'm going to save that so we have that particular endpoint and all we have to
1:33:15
do is if we want to actually use this API so this is not actually calling the
1:33:20
API this is just creating basically the function that will call the API so we
1:33:26
need to have a hook so used post
1:33:32
AI text mutation and it's going to come from our API
1:33:39
component so now actually if you just did this first you can just do use post and now it will
1:33:46
automatically pop up but anytime you use a post mutation it's
1:33:51
gonna it's going to start with use NB suffix with mutation
1:33:57
if you're using a get it'll be a little bit different so just be aware of that it's different
1:34:03
for using a mutation versus like a get request
1:34:10
I'm going to close all this and then from here I'm going to go to our main file
1:34:16
and we're going to be setting up the last parts of Redux toolkit so this is the only thing we really have to set up
1:34:22
once and it's pretty short so first I'm going to import provider
1:34:27
from react Redux and then I'm going to import configure store from redux.js toolkit
1:34:36
and I'm going to import setup listeners as you notice I'm writing it over here not in curly braces because if you do
1:34:42
curly braces the intellisense doesn't pick it up so if I do that it pops up
1:34:49
and this actually should be from my understanding no dist like that and then I'm going to import
1:34:56
API from our DOT slash state
1:35:01
API but I'm going to just do at because we configured our path before
1:35:08
and then from here I'm going to do export const store and we're going to configure
1:35:14
the store and we're going to pass the reducer
1:35:20
of the API dot reducer path that we created like this
1:35:25
and we want to just pass in the reducer from the API so this will set up the reducer that we have
1:35:32
and then middleware is we're going to pass in get default
1:35:38
and we just need to do get default Dot concat
1:35:44
API Dot middleware so these are just setups that you want to use and this is by default what you
1:35:50
need to do for Redux toolkit and using Redux toolkit query so we just want to pass it in to our reducer just like that
1:36:00
set up listeners and we're going to do store dot dispatch and the last thing is around this app
1:36:10
we're going to set provider store is equal to store like this
1:36:17
I'm going to make sure we close this over here and once we save it this
1:36:24
will essentially allow us to use Redux toolkit so not even that bad we've already set up Redux toolkit but
1:36:30
just creating this API slice we created an endpoint that we want to call and then we are setting up this
1:36:37
configuration of the store and that's all we need to do and now if I go to our components
1:36:44
we can then use this particular hook
1:36:49
and make an API call essentially we're going to be using this use post AI text
1:36:54
mutation in a new component over here I'm going to call this ai.jsx and I'm going to use rfce to
1:37:03
create our code for this and what we want to do is we're going to have most
1:37:08
of the jsx and the UI elements from the standard message form and we're going to
1:37:14
be reusing them in the aigsx however there's going to be some custom logic
1:37:19
that we don't want from this same component for example the handle submit we want our own handle submit that's
1:37:26
going to hit our backend instead of the chat engine back end and we want to be able to call open AI on our back end
1:37:33
using our own version of the handle submit so to do that we are going to
1:37:40
take out most of this these elements and we're going to create a new component as well and we're going to call this
1:37:46
message form ui.jsx and we're also going to use the
1:37:52
rfce to create the boilerplate so I'm going to save that so now if you're
1:37:58
thinking about reusability and reusability with components in react this is like a prime use case because
1:38:03
we're going to be using this particular standard message form in multiple locations now I always recommend some
1:38:10
people when you first start the Temptation is to make everything reusable but you have to understand when
1:38:17
you make something reusable it's very time consuming and takes a lot of effort to make components reusable especially
1:38:24
if you're using like some massive form and you have a second massive form and you're trying to make that massive
1:38:30
form reusable even though the forms are very different then you're going to
1:38:36
waste time trying to make that one component that's extremely reusable and
1:38:41
then if you never use that component again you just waste a lot of time so you always have to consider when you're
1:38:48
truly reusing a component I've seen so many people just waste so much time just
1:38:53
by trying to make things reusable I've been I've had to build tables that are
1:38:59
reusable in like 20 different locations but sometimes it would have just been better to just build Separate Tables for
1:39:06
certain situations sometimes making things reusable is not as easy as it seems so it doesn't always save you time
1:39:14
so you have to be very careful of what you make reusable people over abstract and it's a huge
1:39:20
problem I've seen it's always over as I keep your code dry that's one thing but
1:39:25
trying to make everything dry as possible is not always the best option
1:39:31
anyways forget my rent let's go to message form UI I'm going to go and
1:39:37
paste everything that was in our standard message form over here in our message form UI
1:39:43
so now we just have a lot of squiggly errors so we're gonna have to go back and we're just going to go and
1:39:51
copy and paste everything up here so I'm just gonna paste it we have you
1:39:57
stay we have all of these but now in this we want to be able to pass some
1:40:04
props in here so that we can definitely change and have different
1:40:10
versions of the message form UI depending on the component that we want so we're going to do set attachment
1:40:17
message handle change handle submit
1:40:25
so we want to be able to show all of this but also I'm going to pass in
1:40:30
preview inside because this is going to be Universal throughout multiple components so I'm going to do use State
1:40:37
like that and pass that in and we shouldn't have any errors after that so
1:40:43
notice I didn't change anything in here particularly I just added some props over here so we can pass them in so if
1:40:50
we're going to use message form UI we can pass in the proper properties
1:40:56
so notice I'm passing and handle submit so that we can have different handle
1:41:01
submits depending on the component that we're using so over here what I'm going to do
1:41:08
is I'm going to import message form UI
1:41:13
and I'm going to just grab all of this
1:41:19
and place in our message form UI like this and what we want to do is going to pass
1:41:26
in set attachment message as well
1:41:32
and then handle change I'm going to pass in the handle change
1:41:37
we had like so and then handle submit
1:41:43
as well as handle submit over here so we're going to keep this handle submit the same
1:41:48
and everything else we're just passing in we do not need preview anymore so we could just delete that and then the
1:41:54
standard message should be exactly what it was before now we do have some warnings so we'll just get rid
1:42:02
of this because we're not using them in this particular component anymore and I'm going to save that I'm going to
1:42:07
open up my terminal right now my website is running so I'm going to go
1:42:13
back I'm going to refresh and make sure we don't have any errors in our console
1:42:19
so let's go back to console we can see no errors everything is working as
1:42:24
expected is it working and let's send it and as you can see it's still working
1:42:31
all right so I'm going to close this out and now I want to do the same exact thing for AI right here so now we can
1:42:39
use the same component that we've done or we used before and we could just pretty much go down over here in our
1:42:46
standard message form I'm going to copy this I'm going to
1:42:51
close this over here and I'm going to paste it inside our
1:42:56
return and I'm going to make sure we import message form UI as well
1:43:02
and for now I'm going to go back I'm just going to copy and paste all of this
1:43:14
and we can just make sure we have a react and use State over here
1:43:20
we're going to paste paste that in so now we'll have most of what we need so
1:43:26
we also need to pass in the AI and the components and the props
1:43:32
because if you see standard message form has these props over here we need to make sure we pass that in
1:43:39
so now we haven't used this particular component or it's not being
1:43:44
rendered out anywhere so what we're going to do and to pass that in so we're going to go
1:43:50
over here or we're going to make sure we save it we want to go to the chat folder go to our index.jsx and we want to take
1:43:58
a look over return this is rendering out our standards meshes form but we need a
1:44:03
conditional where we render out this particular component AI component instead in certain conditions so
1:44:11
the way we are going to do it is we're going to depend depending on the chat
1:44:16
title like the name of the chat room we're going to render out different
1:44:22
components so the way we do this is we're going to grab the chat props
1:44:28
dot chat if it exists we need that conditional just in case and then we do
1:44:33
starts with AI chat so if the title of the chat room
1:44:41
starts with AI chat then we're going to render out our AI component so depending
1:44:47
on the title we are going to have a different component or different functionality for our send function
1:44:55
and we also make sure we have to pass in our props as well as our active chat
1:45:03
now of course you can change the functionality depending on whatever your use case or whatever you would like to
1:45:09
do but in this case we're just going to go by the title which makes it kind of easy
1:45:15
so from here I'm going to import AI from Custom message forms now I'm going
1:45:22
to change this to even though it's a little longer I'm going to change this to components like that because this is
1:45:29
cleaner that way without all the dots it's hard to know where it's coming from but with the at slash components it
1:45:35
makes it kind of easy to understand what's happening so we're going to save that and as you
1:45:42
can see with the handle submit we still haven't changed anything over here
1:45:47
so now what we're going to do is we're going to use the use post AI text
1:45:52
mutation finally we haven't done any API calls yet but this is how
1:45:58
we can make an API call using this particular hook so what I'm going to do is I'm going to
1:46:04
say const trigger and I'm going to set use post AI text mutation making sure
1:46:12
I'm using the intellisense to import it as well
1:46:18
so when you so there's a difference between if you use Redux toolkit query
1:46:23
this is a little different if you're using a get call or a get query or something that just reads information
1:46:30
this will look a little different it'll just be like use get something query
1:46:35
instead and it will instead of returning an array where you destructure an array you would be the
1:46:42
structuring object instead and it'll be called Data so you would grab the data information however we're using mutation
1:46:48
so that we have a trigger and this is a function that will trigger the actual call and we want to be able to trigger
1:46:55
that call in our handle submit function and so most of this is going to remain
1:47:03
the same so we're going to have blob attachment
1:47:09
we're going to pass that into our attachment over here with the date the username message and active chat ID
1:47:18
the only difference is that we're going to both submit our message but we're also going to trigger
1:47:25
our API call and our API call in the back end if you remember we're going to be calling open
1:47:31
Ai and open AI will submit a message or we are going to get openai to grab a
1:47:38
message or respond to the message that we have and then send them back and post it as
1:47:46
another like a chat bot user and I'll show you what I mean so if I go back to
1:47:52
my completed application over here so if I go to AI chat test
1:47:57
I would say how's it going
1:48:03
if you wait a little bit AI bot Steve responds is going well thanks for asking so basically this is a response coming
1:48:10
from openai so basically what I'm doing is I'm grabbing this information I'm submitting it to open Ai and then open
1:48:17
AI will come back with the response and in the back end we are going to post
1:48:22
this as a different user and submit a message on the chat application so it
1:48:28
feels like you're talking to open AI or a bot but before we create the chat room and
1:48:35
test that out we need to create the logic on the back end now but first i'm going to say we trigger and we want to
1:48:42
submit the form to the back end and just to test if that is working so essentially what we're doing right here
1:48:49
is we're grabbing this form we're sending it with the trigger which means it triggers this particular endpoint in
1:48:55
the API file and it's sending the payload to our URL so in the body of our
1:49:01
post API call we're sending the form data so but we're basically sending this
1:49:08
particular form information to the back end and let's make sure everything is working so we're going to go and open up
1:49:14
our terminal make sure our server is running with npm run Dev
1:49:20
and let's go and create a new chat form and
1:49:25
we're going to call this AI chat so it's case sensitive so I got to
1:49:32
make sure everything's correct so if you go back to chat I said AI chat
1:49:38
underscore so that needs to start with that and test we're just going to create it
1:49:45
and we have our test application and we're just going to say hello and we're gonna it's gonna create the
1:49:52
message but also we should be hitting the back end as well so right now
1:49:58
we're essentially grabbing let's see
1:50:04
yeah if I open over here we're just grabbing the text for now so that's all we're sending to the back end at the
1:50:11
moment actually sorry it's not that's not all we're sending but I mean we're just
1:50:16
grabbing the text from our form so this form is it provides all this information but we
1:50:23
don't need all this information we just need essentially the text and the active chat ID
1:50:30
so right now everything is working as expected and as you can see right here this is just a response from malter or
1:50:39
sorry Morgan sorry Morgan Morgan is logging these messages it shows you when
1:50:44
it the API endpoint has been hit and the status code is 200 which means
1:50:50
it's a success so it shows you which endpoints we're hitting and gives you information so it's pretty useful to
1:50:56
have that on hey guys this is Ed bro from the future again with some post editing so the
1:51:03
following section you're going to see is you're going to see me build this openai.js file and you're going to see
1:51:09
something like this await open AI that create completion just note that this is old GPT 3
1:51:16
versioning now if you want to use gbt 3.5 in the routes folder I have a file
1:51:22
called openai new DOT JS so in this file I have a comment
1:51:30
right here that you can uncommon out and this is basically everything you see in
1:51:35
the video except upgraded for 3.5 now most of the code is
1:51:41
pretty much the same there's going to be slight differences like create chat completion versus crate completion and
1:51:46
you're going to see model and you're going to see messages I wrote a lot of notes that you can see and read to see
1:51:52
the differences that you might see with gbt 3.5 now the video is going to go
1:51:58
through using gpt3 you can follow that but at the end you can just copy this
1:52:04
over on the GitHub repo replace this file with this code and it should work
1:52:11
exactly the same so most of the code is going to be the same with minor changes and what you'll see in the result is
1:52:19
that there if you see right here what I did I did some testing and this is essentially right here this is a result
1:52:26
of some of the chat GPT version so there are much more
1:52:33
it explains things much more clearly and a lot with a lot more detail versus hi
1:52:38
how's it going over here and it says go it's going well thanks for asking this is the old version it's much more straightforward and it doesn't really
1:52:45
spend the time to explain things so this verbose model is the newer chat GPT
1:52:52
version and they do they it does sound a little more cheeky in my opinion so
1:52:58
you can do some stuff with that but anyways let's go back to the video just wanted you to note that this is what's
1:53:05
going to happen in the future sections all right so in our code in our backend
1:53:11
we're now going to make the open Ai call or we're going to be writing the code that will make the call so I'm just
1:53:17
going to delete this console log and over here I'm going to write response is going to be equal to a weight
1:53:24
open AI dot create completion so this is coming from the package open
1:53:30
AI that we created earlier so this is basically going to make our API call to
1:53:36
open AI for us and all we need to do is submit the properties that we need to
1:53:42
complete this response and the first thing we want to do is get the model so text DaVinci
1:53:50
zero zero three so now I'll give you a brief rundown of some of the open Ai and
1:53:55
the parameters that you're going to have to send so over here if you go to the
1:54:00
playground section of open AI so this is right now I'm in the docs if you go to the playground section you can see all
1:54:07
the models that are available to us that we can use now the difference between all of these
1:54:13
models is pretty subtle but the text DaVinci 003 is gpt3 and basically it is
1:54:20
the one that you most likely want it is the most accurate and most recent version so if you use c da Vinci zero
1:54:27
zero two that means it's an older version now these other ones Curie Babbage Ada
1:54:33
now these are all in a way a more inferior version of DaVinci however
1:54:40
these do have use cases because they're cheaper so if you ever use a situation where you're just classifying something
1:54:46
or doing different things these are the models that you would use so you can save more money on these models and you
1:54:53
can even show more models and see other versions but these are generally not what they recommend
1:54:59
but you can see all their information on the models section of these
1:55:04
documentations so it'll explain what you use every single one for but for the most part if you're just experimenting
1:55:11
text DaVinci zero zero three is the one you want it is the most expensive most expensive but it's still quite cheap
1:55:18
and then from here the next thing we're going to add is going to be the prompt which is just a string so this is the
1:55:23
string that we're going to be using and then over here the next element is going to be temperature
1:55:30
so temperature is pretty easy to understand so if you have higher values it'll make
1:55:35
it more random or low lower values will be more focused now if you understand machine learning
1:55:42
generally it you can kind of see it as a creativity Factor but it's not always a
1:55:49
creativity factor it's just more random when it comes to higher values and lower values is just
1:55:55
you're more likely to get repeated values and a more strict definition of
1:56:00
like a more accurate version of what you would like uh
1:56:06
response it will directly answer your question or it will directly
1:56:11
address your concerns so it won't try to be creative or it won't try to do anything random as
1:56:18
well and then Max tokens is the next thing we're going to have but Max tokens
1:56:24
determines how long you need the context so for
1:56:29
example the response the length of it is going to determine how much Max tokens there is a limit to how much you can get
1:56:36
so 4096 is the maximum amount in our case we're just going to use
1:56:42
2048. and then top Dash top underscore p is
1:56:49
very similar to temperature you can only use one or the other um
1:56:56
but you generally I mean you could put both but you generally don't want to change both
1:57:04
and then there's also let's see frequency penalty this is the one that you just don't want to make sure like
1:57:11
you tell it not to repeat itself as much as possible presence penalty is another thing we do
1:57:18
uh penalize new tickets but based on whether they appear in the text so far so
1:57:24
these all indicate whether you want your responses so now a lot of these parameters you can play around with it I
1:57:30
would say they give a decent change but some most of the time it's dependent on the prompt
1:57:36
so the prompt is by far the most impact of what you can get so we're going to
1:57:41
start by writing our prompt I'm going to write text so we're passing in the text that we're grabbing from the
1:57:47
front end we're going to pass in temperature we're going to set that to 0.5 we're going to
1:57:53
set max tokens to be 2048 and notice it's in snake case so underscore instead
1:58:00
and then we're going to do top p and we're just going to set this to 1. we're going to grab frequency penalty and
1:58:06
we're going to set that to 0.5 presence penalty to be zero
1:58:12
so that is basically open the eye and how we make an API call
1:58:18
and after that we're going to await and we're going to use axios and the reason
1:58:24
why we're doing this is to make an API call to the handle submit function
1:58:31
so we're essentially doing what the handle submit is was doing originally over here with the
1:58:38
on submit but we're using it from the back end so if you ever wanted to take a look you
1:58:44
can go over here this is over here and the rest page this is where you can find
1:58:50
the information and if we go back
1:58:57
I'm going to grab https
1:59:02
API chat engine dot IO slash chats and I'm going to pass in active chat ID
1:59:10
slash messages slash and then comma I'm going to pass in text as well
1:59:18
and if you ever look at the response it's kind of like the response structure is a little
1:59:24
like it's quite nested so we usually do response.data which is pretty standard but then we
1:59:31
have choices and we want to grab the first choice and
1:59:36
we're just going to grab the text so that's how you grab the text of the response
1:59:42
and then over here we're going to pass in some headers and we need to pass in
1:59:49
project ID username and user Secret so I'm going to say project
1:59:56
Dash ID and we haven't Define these environment variables just
2:00:02
yet but I will do it shortly so essentially
2:00:07
a lot of these will be
2:00:13
similar to what we wrote in the first or in the front end
2:00:18
so this is going to be user Secret and again this like
2:00:25
this is all mentioned in the docs so you can take a look if you need so bot user secret like this
2:00:35
and we're going to go to our environment variables and we're going to be setting this up
2:00:44
so over here I'm going to say project ID is equal to we're going to go back to
2:00:49
the dot in v.local grab the project ID over here
2:00:55
and pass that in and we're going to create a bot user
2:01:00
name and I'm just going to call this AI but
2:01:06
Steve just to know that this is the bot name and then from here I'm going to say bot
2:01:12
user Secret let's say one two three four like that
2:01:20
so what we need to do is I'm going to grab the username go back to chat engine
2:01:29
over here I'm going to go to users and we want to be able to create a new user we're going to call them
AI Code
2:01:36
Steve with one two three four one two three four and create this person so now this user
2:01:43
exists and no one's going to be able to log into this particular one I mean I guess
2:01:48
you can but you probably should have this like a different Secret
2:01:54
but essentially this bot will be pasting information coming from open AI
2:01:59
automatically once we have the settings configured
2:02:04
and then once we have that information we also want to make sure we just send the text that we get from open AI
2:02:13
and return it in our API call even though we're probably we're not going to use that it's more that we just want to
2:02:19
know that this is a response we get from the text and but with that let's actually test
2:02:25
everything is working as expected so I'm going to grab this I'm going to write console.log
2:02:31
I'm just gonna paste that in over here I'm just going to say response data like that to make sure we can see
2:02:40
what's happening and also I can probably just console log rec.body so I'm going to do that just so we can
2:02:47
see what's happening so I'm going to save that and now we can go to the front end let's go
2:02:54
over here and we are in the AI chat Hey how
2:03:00
is everything I'm going to send it and let's double check everything is
2:03:06
working so we do have a 500 error it seems so
2:03:12
let's open it this up something is not quite working all right
2:03:18
so the reason why it's not working is there was a missing slash so it was original like this so want to make sure
2:03:25
you have that slash the uncomment the console error and I'm
2:03:30
going to save it we have a active chat ID there's one thing to note that if you
2:03:37
go to I have a second one but you need to add your user so
2:03:42
we're going to do let's go back I forgot his name so if I go to dot EnV
2:03:48
AI underscore bot Steve like that you want to make sure you have that user in that particular
2:03:56
chat so if I go over here AI chat underscore test and I say how is your
2:04:03
day going I'm going to send it
2:04:08
my day is going well thank you for asking how about yours so perfect so now we have the AI bot talking to us perfect
2:04:15
so if I go under here I'm going to make sure now I can just delete everything if you
2:04:21
take a look my date is going well this is the response that you're getting from openai and you know how to grab the text
2:04:28
with response.data.choices like this so I'm going to delete that now I'm going to
2:04:33
save it everything should work as expected with this particular endpoint
2:04:39
now and so with that we basically have our AI chat room where we can talk to open
2:04:45
AI bot is pretty simple not that bad we're calling open Ai and making sure
2:04:50
that message gets posted as a different user so that is perfect so now the next
2:04:56
thing we're going to do is we're going to look at the AI code so the next thing is going to be the code
2:05:02
chat room so basically it's going to be the same thing but it's going to respond with code and complete our code if we
2:05:09
need to so if I do like function
2:05:14
um capitalize all
2:05:20
all letters if I just do that something like this and I send it
2:05:27
let's wait and see return function if input so we basically
2:05:34
have all of this now this is not um organized and formatted but basically
2:05:39
this will give us the code and it'll just basically uppercase everything so this is how we can use this chat
2:05:46
chat room to write code for us all right so let's get started so now everything else already set up
2:05:53
um the AI code is very very similar to what we just did with text but I want to
2:05:58
show you how easy it is to set up everything now that all of this like Redux toolkit query all the back end is
2:06:04
set up once you want to add a new API we'll you'll see how easy it is now so
2:06:11
once we have over here we can just go back to the API file and we can just do
2:06:16
the same exact thing we could actually just copy this paste it over here and we're just going to call this AI code
2:06:23
like this and then we're just going to change the text to code
2:06:29
and keep everything the same and over here I'm going to do use post AI code
2:06:35
mutation and in our custom message forms I'm
2:06:41
going to create a new file I'm going to call this AI code.jsx
2:06:47
inside here I'm going to do instead of actually using the template we're actually just going to copy and
2:06:53
paste over here everything that we have for AI
2:06:59
I'm going to change the name though so AI over here make sure I oops
2:07:06
select both of these I'm selecting both of them with alt or option depending on your machine so AI code will be set up
2:07:14
like that now the only difference is going to be this is going to be use post code
2:07:22
mutation so we're just going to change that actually I'm just gonna
2:07:29
select both of them and write code mutation like so and save it
2:07:36
and over here in our chat we're going to be adding the same exact thing except
2:07:44
this should be called AI oops AI code like that
2:07:51
and this should be AI code like so make sure we pass that in we're
2:07:57
going to change this to at slash components and we're going to pass that in as well
2:08:05
and this file everything should essentially be the same thing so we still have trigger we
2:08:13
can change this to trigger code if we wanted this like really differentiate this name can be anything really
2:08:19
and we should essentially be hitting our code endpoint however we have not created that endpoint so we're going to
2:08:26
go to our routes over here and we're going to copy the slash text
2:08:32
endpoint and paste it over here and this can just be code instead
2:08:42
and then from here this model should be code right here
2:08:47
we're keeping the name text even though it might be sending code since they're
2:08:53
both the same format and we're going to make the same kind of post as well
2:09:00
and we're just going to keep everything the same so this should be code the only thing that really changed is the model
2:09:06
itself so I'm going to save that and
2:09:11
let's make sure all our servers are running we can go back we can see over here let's create a new chat room
2:09:20
AI Code test once we have that we need to make sure
2:09:25
our bot is in that application so I'm going to refresh this particular page we're going to see AI code underscore
2:09:32
test and we want to add our members so now I know we have to do this manually but this is kind of
2:09:39
how you would do it because the chat room is just No One's Gonna automate adding the bot
2:09:46
so I'm going to grab the bot username over here I'm going to paste it and then
2:09:51
I'm going to save it so now that user should be in here I'm just going to
2:09:58
make sure we have ai bot Steve we could have added it over here actually but it's fine
2:10:06
so once we're over here I'm going to say function
2:10:11
make snake case
2:10:18
and let's see what it responds with and actually we do seem to have an error
2:10:26
let's look at the request fill with status code let's make sure so now just
2:10:32
remember if you have any network issues you can just go to the network tab in our inspector
2:10:39
and just you can check everything that's happening so open AI slash code seems to
2:10:44
be the correct route and we have a post and we're getting a 500 internal server
2:10:49
error so now we can go to our application and it does seem we're getting some kind of error when we're
2:10:56
hitting this so let's double check what is happening so to debug this let's actually just
2:11:05
console log what's happening with our response and I'm just going to copy this instead so we can see the text to see if
2:11:12
this is actually happening also I want to make sure we have a text over here so when you're debugging you
2:11:18
always want to figure out where the error is happening so we have three points of
AI Assist
2:11:25
possible errors right here here and here we always want a console log after each
2:11:30
part just to see where which console log we are not getting and finished Quest so
2:11:37
we just want to make sure we can see what's happening now if you look at the console log we have this very big long
2:11:43
error and that's coming from this console.error I'm just gonna comment that out so we can actually just
2:11:49
see where this is having issues
2:11:55
so let's double check and I'm just going to copy this again and let's actually see
2:12:01
we're going to error out again but this time we can see what's where we get to so we have text function make case and
2:12:10
it seems like we don't even hit this particular response so we haven't even got to this point so let's actually
2:12:16
debug what's happening so now the error that was given giving us back it was saying 404 are not found basically it
2:12:23
was not able to find what uh it was not able to make this request
2:12:28
successfully because it could not find it and I wanted to I made a lot of messages over here just to see what's
2:12:35
happening just to see what the error is all about so I went over here I did console.air I showed
2:12:42
error.respons.data.air and I was able to grab that from this big object over here that originally
2:12:51
I was console erroring like this and I was able to find the error message just
2:12:57
to see what's happening and I wanted to show you guys what that is I already knew what the answer was I just wanted
2:13:02
to show you the message over here and it was that the model does not exist and I
2:13:07
realized this over here model code DaVinci zero zero three it should actually be zero
2:13:13
zero two instead just to see what's happening or like just to tell
2:13:19
you that the model needs to be zero zero three there's no zero zero three version
2:13:24
of the code model so I'm going to go and pass this over here I'm going to be sending it
2:13:31
and we are going to see that there is no error and we're waiting for a response it
2:13:38
seems and there we go we have a really ridiculous long
2:13:44
function so if I were just well they added a lot of comments and it
2:13:51
seems like it's cut off so if I were to go back and I did function make snake
2:13:56
case I would it would look like something like this
2:14:04
or a snake interesting I don't know what
2:14:09
oh I don't know what it's giving me over here but we do have make snake case make camel case and it seems like there's
2:14:17
some kind of extra configuration that it's sent but let's
2:14:23
just delete everything over here I just wanted to show you what it's returning so we're gonna return and as you can see
2:14:30
after all that debugging we were able to figure out what the problem was with that we finished the code section I'm
2:14:36
just gonna delete all these console logs because we don't need them anymore because we verified it is currently
2:14:41
working so I'm going to save that and just close this out all right so the final thing we're going
2:14:47
to be building is going to be the AI assist so this chat room is going to allow us to have an autocomplete of what
2:14:55
you're trying to write so if I write can you help me with my and then I just
2:15:03
hold off it's going to give us information that will autocomplete and if I hit tab it's going to complete it
2:15:09
and grab that information would you be and then if I do it again
2:15:16
and I press backspace it's going to remove that other suggestion
2:15:24
so this one's a little more involved so if I go back I'm going to start with the API file
2:15:30
and over here I'm going to copy this I'm going to call this
2:15:36
post AI assist and change this to assist over here
2:15:43
and I'm going to change this to use post AI assist mutation if I save it
2:15:49
we can go on to our custom message form so to create our component I'm going to go to our custom message form I'm going
2:15:55
to create a new file called AI assist dot jsx like so and what I'm
2:16:03
going to do is I'm going to grab the information from AI code copy everything and paste it over here
2:16:10
and I'm going to grab this AI code section change this to AI assist
2:16:18
I'm going to go back up change this used post AI code mitation I'm going to change this to
2:16:26
assist to grab the information that we're using and this is going to be
2:16:31
trigger assist so this one's going to be a little bit different from the other ones but we
2:16:38
should be able to do what we need to do all right so the way this is going to work is that when we type a few
2:16:45
characters we're going to wait for the user to stop typing for a little bit for
2:16:50
it to Auto Complete because we don't want to send an API request on every
2:16:56
key press that the user does we want to make sure that after a few seconds and
2:17:01
making sure when they stop typing that's when we'll send an API request so we're going to use something called debouncing
2:17:07
to do this so the first thing we're going to do is I'm actually going to go back to our code I'm going to remove trigger code
2:17:14
form because we're not doing anything with handle submit this should be what you would normally do by default
2:17:23
however we're going to create a new value called debounced
2:17:29
value and we're going to use a hook that we will create and we're going to call it use debounce and we're going to send
2:17:36
the message every a thousand seconds
2:17:41
and up here we're going to create a function and we're going to call this use the
2:17:47
balance and it's going to have a value and a delay to represent this is the message and
2:17:54
this is the delay and in this use hook we're going to do debalanced value like so we're going to
2:18:02
set debalanced value and we're going to have use state
2:18:09
and I'm going to pass in the value so this is the value that will be debalanced and the message we sent
2:18:17
and then from here I'm going to use use effect
2:18:22
and make sure we use intellisense and inside here we'll have a call
2:18:29
and we're going to say const Handler so we're going to set timeout
2:18:36
and inside this it's going to be another callback function and we're going to set debounced value
2:18:43
of the value and we're going to have it delay every few seconds like this
2:18:49
so this is the Handler function and this is basically what's going to allow us to debounce
2:18:55
however whenever you create a use effect for something like this we also want to return and we want to make sure we clear
2:19:01
the timeout so we're going to use Clear timeout and we're going to pass in our Handler so
2:19:07
this is so we don't have any problems when we don't close it out
2:19:15
and over here I'm going to pass in the value and delay for use effect trigger
2:19:20
any times these two values change after this I'm going to return the
2:19:26
debalanced value as well so this is our use to balance function that will handle the set timeout
2:19:38
and then from here I'm going to go down I'm going to have a use effect
2:19:46
another one as well and if debounced value does not exist
2:19:52
we're not going to do anything otherwise we're going to grab the form
2:19:59
and we're going to put it into an object the form that we need and
2:20:04
we're going to use trigger assist to pass this form in so making sure if once
2:20:10
we have a debounce value that's when we're going to make an API call
2:20:16
and we want to make sure we trigger this with the debounce value as well
2:20:23
now we're missing a few dependencies but we only want this to happen when the debounce value occurs so instead we're
2:20:32
just going to do es lint disable line
2:20:38
and we can write exhausted depths but I forgot what the particular linting error
2:20:45
is so that is our debouncing however that
2:20:52
still won't cover the extra text that pops up so if I write can you help me
2:21:01
there is a string that pops up behind the behind this input and it's in uh
2:21:08
basically grayed out characters so the way to do this is that
2:21:14
we're basically having two inputs right on top of each other
2:21:19
it's just one of them is in front which is this one this is in the back
2:21:25
and this second one has the added extra information otherwise the second one has
2:21:32
the identical it also has can you help me so we are positioning it in the correct spot but
2:21:39
the understand is added onto the second one well the first
2:21:44
one just has can you help me so that's kind of how this kind of works so it's a little tricky with CSS you
2:21:51
need to place something on top of each other and you're having two inputs right on top of each other
2:21:57
um masking one of them essentially so the way we do this
2:22:03
we're also going to have to handle the handle key down basically when you hit tab or enter we are going to
2:22:12
use that other complete message so we're grabbing the second one we're replacing the first one with the second one that's
2:22:18
what we do when we hit enter and tab so the way to do this is we're going to
2:22:23
have a function called handle key down and this will
2:22:30
effectively be put on the input and we will pass in into the on handle key
2:22:36
Handler and in this we're going to have an event
2:22:42
and we're going to say handle enter and tab and basically
2:22:48
in this function we're going to grab the event handler and it's going to be e dot
2:22:54
key code is equal to 9. and E dot key code is equal to 13. so
2:23:01
these two characters of enter and tab is represented by 9 and
2:23:07
then 13. and we also want to make sure that the
2:23:13
page doesn't refresh so we're going to do e dot prevent default and we are going to set the message
2:23:19
which we haven't created yet actually we did I believe we did yeah so
2:23:25
we have the original message over here we're going to set the message to be a message
2:23:32
plus a second text and it's going to be append text like this
2:23:39
so a pen text is going to be another state that we're going to add so if I have come over here I can do
2:23:46
append text set append text
2:23:54
and this is going to be the extra appended text to our input
2:24:00
so when we hit enter and tab we're adding this appended text to that
2:24:06
particular input so that will help us add the autocomplete functionality
2:24:13
and then after this we're going to set the appendatex to be empty
2:24:19
to clear it out and then finally we're going to have
2:24:25
another final use effect and it's okay to have like multiple use effects
2:24:31
this is this serves one purpose which is the debouncing this serves the append
2:24:36
text purpose and we're going to say if result
2:24:43
assist dot data dot text if that exists
2:24:50
we're going to set append text to be that particular value
2:24:57
so I'm going to grab this and pass it in there and over here
2:25:04
I'm going to have result assist like so
2:25:09
and I'm going to do eslint disable line
2:25:19
like so so now what is result assist
2:25:25
so now what this result assist is is going to come back from our back end
2:25:30
so right here in our use post assist mutation we can grab the result that
2:25:38
comes back from our back end using result assist so when we trigger the assist
2:25:45
we're going to wait for the response to come back with information and we're going to use this information
2:25:52
to replace our append text so this is going to be the completed result from
2:25:58
open AI once we grab it from the back end and
2:26:04
then we can append that to the original message using handle key
2:26:10
down so this is where we set it
2:26:16
so hopefully that makes sense it's there's a lot of steps to this it's a little more confusing than
2:26:21
you would think but it's a cool effect so we're gonna write a pen text and we're going to pass this in so
2:26:29
now we did not add this to message form UI message form UI does not have this
2:26:37
functionality where we pass in the append text and we have a second input behind but we're going to be handling
2:26:43
that now and we also need to pass and handle key down
2:26:50
so basically we've created these functionalities but we do need to pass them in to message form UI
2:26:57
and only in the situation where we actually have that information that's when we pass it in
2:27:04
so over here we're going to do a pen text I'm going to say handle
2:27:10
key down and over here we're going to go to our
2:27:16
input and I want to pass in on key down
2:27:22
I'm going to say handle key down so that will pass in a function that we created
2:27:28
that will run this command enter and tab and I'll provide that functionality to this particular input
2:27:35
and then also we only have one input but we don't have the input for the autocomplete before we hit enter or tab
2:27:43
so we want to say hey if there is in the pen text in this component that's being
2:27:49
passed down we are going to give another input like so
2:27:56
and I'm going to give it a class name of message form assist so this basically
2:28:03
will color it slightly different and making it a little more gray we're going to say type is equal to text
2:28:11
we're going to say disabled so disabled will give it so that you can't really type on it and that's how
2:28:17
we can mimic the input without it interfering with the original input
2:28:24
and then here we're going to pass in the value and we're going to pass in message
Authentication and Authorization
2:28:29
with pent text like so
2:28:35
so this one will actually have the message and the append text attached together
2:28:41
so with that I'm going to save it and now I'm going to work on the back
2:28:48
end for this so basically we're going to run and
2:28:54
handle this particular endpoint open AI slash assist and we're going to create that in the back end so if I go back to
2:29:00
our routes we can basically
2:29:05
let's copy the text route so router.post slash text
2:29:11
I'm going to go down and under our code I'm going to have an endpoint called
2:29:17
assist [Music] and then over here
2:29:23
in the prompt instead of just having a text I'm going to tell this is basically
2:29:29
prompt engineering but I'm just going to tell chat GPT or basically open AI that
2:29:36
we want we want them to finish my thought so this is very explicit and tells the machine what we want it to do
2:29:44
and in this case we don't have to have two thousand 48 Max tokens we can
2:29:49
shorten this to 1024 we'll just keep everything else the same
2:29:55
and in this case we don't really need to post on like an AI bot we're just posting as
2:30:02
our own regular user so we can just get rid of that second API call
2:30:07
and we're going to save that let's open up our terminal make sure we don't have any problems
2:30:13
so if we go back [Music] oh yeah we are missing one last thing
2:30:20
and that is if I go to chat index we are
2:30:25
not properly adding AI assist so we're going to do the same thing we done before except this should be AI assist
2:30:35
and then this should be AI assist and make sure we have the intellisense
2:30:40
change the components like this pass that in
2:30:47
and we should this is the complete of that but this is the app we're currently working on so let's open up our console
2:30:55
just in case there is any errors and what I'm going to do I'm going to
2:31:01
create a chat room I'm going to call this AI assist
2:31:06
and hit enter and over here let's open up our Network tab just to
2:31:12
see if we have any errors while we do this say can you help
2:31:19
and let's see if it works help me understand and it works perfectly so if I just send now we have
2:31:26
what we need perfect also what is
2:31:33
and let's see if it what is important to remember is that okay and then if I don't want to
2:31:40
I can just press like forward error and it'll just disappear
2:31:46
and with that we have pretty much all the functionality we need the last thing we are going to run
2:31:52
through is going to be focusing on auth login and sign up so we should be able
2:31:58
to create our own user and then log that log them in as well all right so for the
2:32:04
auth and login this is the final build basically what we want to be able to do is if I'm a new user I want to be able
2:32:11
to go test user 2 or something like that and then
2:32:16
we can add a password that we want we're just going to say one two three four we're going to hit register now there's
2:32:23
no indication that um some of this has already done anything so if we go
2:32:29
back and register we can hit log in and now we should be able to log in to our new user with nothing over here so if I
2:32:37
go back the user is now fully logged in so we're going to be doing that there is
2:32:45
I just want to mention that this is probably not like fully full authentication where you have all
2:32:51
of the security all of the benefits and everything that you can think of when you're dealing with authentication and
2:32:57
security but this will do like the very minimal basics of logging in registering it and
2:33:05
making sure that they're signed in so we're just doing the very basics of such so I'm going to go over here I'm going
2:33:12
to close out everything we don't need those we can go to app jsx
2:33:18
and in here we are going to
2:33:23
add our user over here and like I said most of this is not secure so don't use
2:33:29
this in a production app but I just want to give you a brief rundown of the basics of how we can create a user in
2:33:36
our chat application so we're going to have a user set user and we're going to set it to null at the
2:33:42
beginning we're also going to have a secret with set secret as well I'm going to set this as use State and
2:33:48
I'm going to set this null and by using those we want to make sure
2:33:54
if the user is authenticated for certain routes so I'm going to do Boolean is
2:33:59
going to be set to user and as well as Boolean is going to be secret now you
2:34:04
don't have to set the Boolean but sometimes it is better to be very explicit about what type this is and
2:34:10
Boolean forces it to be a true or false value
2:34:15
so over here we have a path of chat and element of chat something like this
2:34:23
what we want to do is we're going to set the element we should only allow the user to go to
2:34:29
our chat application if they're authenticated so you have something like we can set is auth
2:34:37
and if they're uh authenticated we can pass the user
2:34:42
into our component as well as the secret into our component
2:34:48
and once we have that we can also set the navigate component that we created over here from
2:34:55
react router Dom so this should be actually a component like so and we are going to force them to go to
2:35:02
the slash route if they're not signed in so if we save that we're going to have
2:35:08
this setup so basically if we navigate to chat we're going to see this page if
2:35:14
they're authenticated already otherwise we're going to force them to go back to the original home page
2:35:22
so when we pass this in so if I go over here
2:35:28
we want to grab this user and the secret as well
2:35:33
and now we're just going to pass the user in over here instead and the secret as well so we don't have
2:35:39
hard-coded values anymore for our login
2:35:46
and we're going to go back to our app jsx file all right and then also we need a route
2:35:51
for the login page so the route for the login page will be different so we're going to set route
2:35:57
and we're going to say path is equal to slash and we are going to render out our login
2:36:03
element that we have not created so again like before I'm going to have an is off like this
2:36:10
and I'm going to say navigate to I'm going to say dot slash chat like so
2:36:20
I'm going to create a component called login I'm going to set user
2:36:26
like so and then set secret like so so the login and the user is going to
2:36:33
set this basically State and we can use that information once they're logged in
2:36:42
and then I need to make sure I close this out and this is not created so I'm going to
2:36:48
go up here I'm going to import login from at slash components slash login
2:36:58
actually yeah so over here I'm going to create a new file called index.jsx
2:37:05
and here I'm going to do rfce make sure this is properly sound and we're gonna
2:37:11
have this information so we're going to go and open up right here we have failed to load URL
2:37:18
does this file exist so we basically just created it so we are linking back
2:37:23
to this section so I'm just going to restart the server sometimes it has
2:37:28
issues if you're not doing that so I'm going to go over here and open it up
2:37:36
yep and as you can see we have the login page so this is currently the login page and we have to add the logic but before
2:37:43
that what we're going to do is we're going to go to our state file in the API and we're going to make our
2:37:50
API requests so the way I'm going to do it I'm going to change this to post
2:37:59
login I'm going to change this to auth slash login because we're going to create
2:38:05
another file and router as well I'm going to keep everything the same
2:38:11
and I'm just going to copy this again and this is going to be sign up as well
2:38:18
so sign up like that auth sign up
2:38:24
over here and in here I'm going to do use post
2:38:29
login mutation and use post sign up mutation
2:38:37
and with that we're going to go back to our login component and we're going to start
2:38:43
from here so inside our login component I am going to do import
2:38:49
use state and use effect as well
2:38:56
and I'm also going to import the apis that we just made so use post
2:39:02
login mutation and use post sign up mutation
2:39:09
and inside here I'm going to do const is register and we're going to do set is register
2:39:16
like so I'm going to do use state I'm going to set this to be false
2:39:23
and I'm also going to set the username and we're going to do set username
2:39:28
with use state with an empty string now I capitalize this so make sure you
2:39:36
fix that it should be lowercase with the n then I'm going to do password
2:39:41
as well set password and I'm going to set the use State over
2:39:47
here and what we're going to do is we're going to say trigger login so this is
2:39:54
going to be the use post login mutation and we're going to be
2:40:01
grabbing this so we can trigger the login and we're going to do the same thing for
2:40:06
trigger sign up and we're going to do use post sign up
2:40:12
mutation now this is also going to require us to
2:40:17
use result login so we're going to grab information from this login once we get
2:40:23
information returned and I'm also going to create just like a
2:40:29
wrapper function so we can just pass that in easily so handle login I'm going to pass in trigger
2:40:36
login as well username and password like so
2:40:41
and then the accounts handle register
2:40:48
and the trigger sign up
2:40:53
and pass in username password like this
2:41:02
and over here I'm going to do use effect I'm going to say if result login data
2:41:12
dot response so essentially if we have a response from the result login we're
2:41:17
just going to set the user so we're just going to update the username just making sure if
2:41:23
we log in and it's correct oops and we want to set the path
2:41:29
password as well actually this should be
2:41:35
this should be password this
2:41:40
and we only want to trigger this when result login dot data seems to come back yes lint
2:41:51
disable apply
2:41:57
all right so now let's actually build the component and over here I'm going to do div
2:42:03
and I'm going to pass in the class name of login page and just remember I've
2:42:11
already set up all the classes so we're just going to have to handle the jsx so
2:42:16
I'm going to do div class name login container
2:42:24
and I'm going to have H2 with a class name of title
2:42:30
and I'm going to call this chat gbt app
2:42:37
I'm going to give it a paragraph tag I'm going to give this class name
2:42:42
of register change and on click
2:42:49
I'm going to pass in set is register and I'm going to give it a Boolean like
2:42:55
so and flip the paragraph tag and I'm going to say is register
2:43:02
like this and we're going to say already a user
2:43:09
and if not are you a new user so basically this is a Boolean determining whether we're on
2:43:17
the register page or a login page so you can flip the Boolean depending on these criteria
2:43:24
and then from here I'm going to create a div and in here I'm going to give it an input of class name
2:43:32
of login input type of text with a place
2:43:37
holder of user name a value of
2:43:44
username and on change
2:43:50
I'm going to set e is equal to set username I'm going to boot e.target
2:43:59
dot value and I'm going to close this like so
2:44:08
and over here I'm going to do another input I'm actually just going to go and copy this
2:44:13
and this will be slightly different so we're going to do login input this will be password instead so it's
2:44:20
hiding the value we're going to say password and I'm going to say a password over
2:44:26
here and then this should be set
2:44:35
set secret or set password yeah
2:44:48
so actually I realized something so this actually should be set user and set Secret
2:44:56
like this and the reason why we need to pass this into login so set user and set
2:45:02
secret so if you remember if you go back to app.jsx we're passing in the set user and set
2:45:09
secret over here so that gets inputted over here and it's different from the password over here so this is just a
2:45:16
temporary store of the username and the user password but the set user and set
2:45:21
secret is the actual login information that we sent to the chat engine app
2:45:31
so be careful of that confusion and over here I'm going to create a div
2:45:37
and this will be the action buttons so we're almost done with the form so these are the two inputs these will be the
2:45:44
buttons to log in or register so I'm going to say login
2:45:49
actions and over here I'm going to say is register
2:45:56
and I'm going to say button type is equal to button on
2:46:02
on click and we're going to say handle register
2:46:10
I'm gonna write register over here
2:46:15
side this I'm going to have a button I'm going to say type of button like this I'm going to write on click I'm going to
2:46:22
say handle actually this should be like so handle login and we're going to have login over here
2:46:29
and we're going to save it and with this this should be pretty much
2:46:35
our entire login page now let's double check if we can see
2:46:42
that and this is our current build perfect so chat GP tab or your new user so if I
2:46:49
click that we see this change to register and already a user we can go back
2:46:54
so this is a very very simple login page and usually you want to make this a little more complex and have more
2:47:00
interactivity and maybe even have a different form for register versus login but we're just trying to keep it simple
2:47:08
so over here we created our front end now we're going to have to deal with the back end as well so I'm going to go down
2:47:16
I'm going to go to our index.js first and in here I'm going to create the
2:47:21
routes for r auth login so this is going to start with
2:47:27
slash auth and we're going to have the auth routes
2:47:34
and up here I'm going to import open or sorry auth routes from dot slash
2:47:42
routes slash auth j s like that I'm going to save it and in
2:47:49
our routes folder we're going to create that file I'm going to call this auth Js
2:47:56
and essentially we can closely copy most of what we have in
2:48:02
open AI we're just we don't really need some of this configuration so let me just
2:48:10
so we don't really need open AI like that we don't need the dot
2:48:16
EMV as well so we just need this I'm going to set up our router cons router
2:48:22
is equal to express dot rather like so
2:48:27
and then at the end I'm going to have export default of router
2:48:36
and then from here I'm going to go and copy this in the open AI file and paste it over
2:48:44
here and we're just going to erase majority of this we just need to keep
2:48:51
the errors like that and the res status right here and we want to change this to a login
2:48:59
instead and you know it would probably make more sense to start with sign up because
2:49:06
that's what it's what we start with so we're going to do sign up as well so I'm going to copy this over now
2:49:13
and our sign up takes in two values the username and password
2:49:20
from rec.body so now let me just clarify how do we get this information of
2:49:26
username and password so if I go back to our API file we have a sign up
2:49:33
and the sign up takes a payload that we don't know what we're identifying it with but if you take a look here
2:49:40
trigger sign up is coming from that post query we're passing in username and
2:49:46
password and that gets sent to our backend over here and we can grab the username and password right here
2:49:56
and then from here we are going to send the username and password to chat engine
2:50:03
and we're going to say chat engine response and we're going to say await axios.post
2:50:09
and what we're going to do is we're going to
2:50:15
find the API where we have chat engine and we are going to pass it into our
2:50:21
users URL over here and I'm going to say username we're
2:50:27
passing in the username over here same with secret so even though it's a
2:50:34
password we're going to have to pass it as Secret and again it's on the API rest
2:50:39
documentation like I showed you before so if you want more information on how these things work
2:50:46
so now what we also need for logging in we're going to say private key
2:50:53
so now we haven't used this just yet we're going to say process.env dot
2:51:00
private key like so however we have not identified this over
2:51:05
here in the dot EMV file so if I go back to our code
2:51:11
and actually go to our chat engine the way we get the private key is over here
2:51:17
now I'll be deleting this project once this is done but if you want to take a look this is the private key you can
2:51:23
copy that to a clipboard and we can write this in our section we can say
2:51:29
private key and we paste that in and we're going to save it and over here we will be using
2:51:37
that particular private key and instead of this response.data.choices
2:51:45
text I want to call this response and we're going to say chat engine response
2:51:52
dot data to grab our information so this is what's going to be returned
2:52:03
actually this should be error message like that so this is more explicit so you'll have a big object
2:52:13
so now I usually would test it but let's go with login because this is the process is very simple and we could
2:52:19
just test the entire workflow after so we're going to go over here we're going to have the same username
2:52:26
password for rec.body and if you remember again we go back to our login
2:52:31
page this is username password over here being passed in
2:52:36
and so we go to our username we can just grab the chat engine response again
2:52:43
and we're going to pass it over here and this is going to be a get call because we're doing login now and we're
2:52:50
going to say users slash me and instead of passing it oops instead
2:52:58
of passing it like this we just need the headers and we're just
2:53:03
going to change this to what we did before when we made an API call
2:53:10
to um send a message so this would be project actually I'll show you we can go to open
2:53:17
AI to the this file in the routes we can just copy this entire thing over
2:53:23
here because this is what we need and we just need to change a few things
2:53:31
and instead of the bot username we are going to pass in our username over here as well as our password
2:53:39
and again I'm going to go down once we have that I'm just going to copy what we had
2:53:46
before for the sign up I'm going to grab this paste it over
2:53:51
here and I'm going to save it and with that let's see
2:53:57
that we have everything so we have the server running the server and the client both running
2:54:03
so we can go to the front and let's just refresh just in case
2:54:09
and let's say I'm a new user test user three
Complete Build Fullstack Chat Applaction
2:54:15
and then one two three four let's make sure we're making a request so we have a sign up
2:54:21
and we get a response so this is what chat engine is giving us right here with
2:54:26
all of this information we have a response as well we have our password and the username
2:54:32
coming in and then from here after we registered
2:54:38
we can say are you a new user since it's already signed up we can do login over here
2:54:44
and now we have our new chat perfect everything is working as expected and if
2:54:51
I wanted to just create my own something like that a new chat
2:54:58
app and say hey how's it going I can send it
2:55:04
and the bot should pretty much represent okay so if I do that I do need to add
2:55:12
the particular bot actually I can go over here
2:55:18
add a member yeah
2:55:23
so I added the bot again because we're getting an error because I did not add the bot and I just say hey how's it
2:55:29
going and there you go pretty good how about you so that's how we created a new user
2:55:35
and we created a new chat making sure that they're all there and logged in
2:55:41
perfect so to just recap of our login and auth process if we go back what we
2:55:47
did was we first created the endpoints post login post sign up so we have both of these API requests we created the
2:55:55
login page and we're handling the login and the register depending on the response and we're also setting the user
2:56:02
and the secret so we can have a proper navigation over here so if the user has
2:56:09
an auth and a secret we will navigate them to the appropriate location
2:56:16
and once we're on the open AI side of things or sorry not the open AI auth JS
2:56:21
side of things you meaning the back end we have the username and password
2:56:27
getting sent to the chat engine application where we are storing it for
2:56:33
sign up once we sign up and also when we log in and we also have to create a pro
2:56:39
we have to use our private key to register a user and then we want to log
2:56:46
them in as well and just to make sure and just to
2:56:51
reiterate one more time there this is not fully secure it's very close to being secure but there are some steps of
2:56:58
having like a password on the front being exposed and it can be intercepted things like that so don't use this in a
2:57:05
product production level I want to just do very basic authentication just so you know how you can log into the chat
2:57:11
engine so you just have to be wary of that and with that now you have a fully
2:57:17
built chat application that we used chat engine and then we also used open AI to
2:57:23
have ai assisted text as well as AI code and text completion so we can also log
2:57:32
in onto our application once we have a user
2:57:37
and once we're logged in we have we have regular chat where we can just
2:57:43
post the message and it will communicate whoever is in that particular
2:57:48
you know chat room and then from here we can also do AI chat where we can talk
2:57:55
hey how's your night going we can talk to AI bot Steve
2:58:02
using open Ai and it'll give us a message he'll be responding to you
2:58:07
and then we also have ai code where we can say give me a random function
2:58:14
random number function so if I tell that it's going to give me some code that
2:58:20
will represent what I'm sending over here we have a function and it'll allow us to
2:58:27
use functions so this is a different language so you just want to say give me a random number function JavaScript if you wanted
2:58:33
and then from here we can do AI assist so if over here what is and then you can just wait for
2:58:41
the response and it'll give us something that will auto complete so what is the meaning of life that is a question that
2:58:46
has been asked throughout history so we can just use that as an autocompletion tool for our chat messaging application
2:58:55
and that was it that was everything we have done for this chat application and
2:59:01
this is a pretty cool project we used open AI to give us AI assistant code and
2:59:08
then we also did mern full stack so essentially we've done a lot of both server routes and client routes we did
2:59:15
everything that will consist of an application we even did authentication we even logged
2:59:22
into a chat engine application as well and we made that and integrated that with AI so I hope you enjoyed please
2:59:29
like And subscribe and I'll see you next time
110,774 views 6 Mar 2023 Web Development
110,774 views • 6 Mar 2023 • Web Development
Build a Chat Application with ChatEngine and OpenAI and ChatGPT integration tutorial. The frontend will consist of ChatEngine for our chat application, Redux Toolkit for our state management, Redux Toolkit Query for making api calls, Hero icons for our Icons and React Router for Navigation. For the backend we will be using Node Js as our runtime, Express Js as our backend framework, and OpenAI for Ai integration with our chat. We will be able to talk through our chat application like with ChatGPT.
Important*
When using Chat Engine and creating a new project, if you want your project to be hosted free forever, in the Promo Code type 'edward'. I do receive commission if you upgrade to get more features but it is not necessary to purchase for it to be hosted forever.
Links:
node: https://nodejs.org/en/download/
npx: https://www.npmjs.com/package/npx
vscode: https://code.visualstudio.com/download
nodemon: https://github.com/remy/nodemon
vite: https://vitejs.dev/guide/
react router: https://reactrouter.com/en/v6.3.0/get...
react dropzone: https://github.com/react-dropzone/rea...
redux toolkit: https://redux-toolkit.js.org/introduc...
redux toolkit query: https://redux-toolkit.js.org/rtk-quer...
hero icons: https://heroicons.com/
dotenv: https://github.com/motdotla/dotenv
chatengine docs: https://chatengine.io/docs/react/v2
chatengine storybook: https://chatengine-io.github.io/react...
chatengine api: https://rest.chatengine.io/
chatengine styling: https://chatengine.io/docs/react/v1/c...
openai node npm: https://github.com/openai/openai-node
openai completion docs: https://platform.openai.com/docs/api-...
openai playground: https://platform.openai.com/playground
openai api chatgpt update new: https://openai.com/blog/introducing-c...
openai api gpt-3.5 docs: https://platform.openai.com/docs/guid...
Completed Code:
github: https://github.com/ed-roh/chat-app
css: https://github.com/ed-roh/chat-app/bl...
code for openai-updated: https://github.com/ed-roh/chat-app/bl...
Chapters:
0:00 Building a Fullstack Chat Application with ChatGPT
3:44 Frontend Installations and Packages
13:06 Main Chat Application and React Chat Engine Setup
35:33 Chat Custom Header
43:35 Chat Custom Message Form
1:06:47 What is OpenAI and how is it related to ChatGPT
1:09:50 Backend Installations and Packages
1:21:10 AI Chat
2:01:30 AI Code
2:11:25 AI Assist
2:28:27 Authentication and Authorization
2:54:15 Complete Build Fullstack Chat Applaction
———————————
Subscribe to my channel: / @edrohdev for more web development and web 3.0 blockchain tutorials!
My NEW Discord: https://discord.gg/N58wa7JmDB
———————————
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.
Type
Name
Latest commit message
Commit time
2 years ago
Reconnect only when tab is open again
5 months ago
1.11.27 hack localStorage cleanup
5 months ago
3 years ago
init create-react-library@3.1.1
3 years ago
init create-react-library@3.1.1
3 years ago
init create-react-library@3.1.1
3 years ago
2 years ago
init create-react-library@3.1.1
3 years ago
2 years ago
init create-react-library@3.1.1
3 years ago
2 years ago
2 years ago
3 years ago
4 months ago
Code clean - work on reconnect spammer
5 months ago
Chat Engine is a free serverless chat API.
Try our free plan at chatengine.io
Add serverless chat to your React app in 3 minutes.
Register then create a project and user at chatengine.io
Collect the public key, username and user password
Install yarn add react-chat-engine
Import the ChatEngine component and pass in publicKey, userName, and userSecret props
Voila! You're done
EXAMPLE: Your implementation should look like the following
import React from 'react'
import { ChatEngine } from 'react-chat-engine'
export function App() {
return (
<ChatEngine
publicKey={'b75e5bd5-cd84-404c-b820-06feff8c98c0'}
userName={'john_smith'}
userSecret={'secret_1234'}
/>
)
}
Authenticate users
Subscribe (connect) to incoming chats and messages
Create chats and messages
Add and remove people from chats
Edit and delete chat and message data
publicKey (UUID REQUIRED) - Public API key for your chatengine.io project
userName (String REQUIRED) - Username of a person in this project
userSecret (String REQUIRED) - Set a secret for this person and use it to authenticate.
onConnect (Function) - Callback when the connection/authentication is complete
onFailAuth (Function) - Callback when the connection/authentication fails
onGetChats (Function) Callback when the person fetches their chats array
onNewChat (Function) - Callback when the person creates a new chat
onEditChat (Function) - Callback when the person edits a chat title
onDeleteChat (Function) - Callback when the person deletes one of their chats (must the chat's admin)
onAddPerson (Function) - Callback when a person is added to a chat
onRemovePerson (Function) - Callback when a person is removed/deleted from a chat
onGetMessages (Function) - Callback when the person gets a chat's messages
onNewMessage (Function) - Callback when a person posts a new message in one of the chats
onEditMessage (Function) - Callback when a person edits a new message in one of the chats
onDeleteMessage (Function) - Callback when a person deletes a new message in one of the chats
hideUI (Boolean) - Hides all UI components for a custom implementation (Warning: Advanced)
import { functionName } from 'react-chat-engine'
...
functionName(conn, args)
getChats (conn) => void - Get a person's array of chats
newChat (conn, title) => void - Create a new chat with this person as admin
editChat (conn, chatId, chatObj) => void - Edit the title of an existing chat
deleteChat (conn, chatId) => void - If you're admin, delete this existing chat
addPerson (props, chatId, userName) => void - Add an existing person (in the project) to an existing chat
removePerson (props, chatId, userName) => void - If you're admin, remove this user from an existing chat
getMessages (props, chatId) => void - Get the messages for an existing chat
sendMessage (props, chatId, messageObj) => void - Send a new message object into this chat
editMessage (props, chatId, messageId, messageObj) => void - Edit an exiting message object in this chat
deleteMessage (props, chatId, messageId) => void - Delete an exiting message object from this chat
id (int) - Unique primary key to identify this chat
admin (String) - Unique username of the person who created this chat
title (String) - Optional title of this chat
created (Datetime) - Date-time of chat creation
people (Array) - Array of people added to this chat
{
"id": 1,
"admin": "john_smith",
"title": "Canada Day Party!",
"created": "2020-09-05T20:28:22.352373Z",
"people": [
{
"person": "john_smith"
}
]
}
person (String) - Unique username of a person involved in this chat
{ person: "john_smith" }
id (int) - Unique primary key to identify this message
sender (String) - Unique username of the person who sent this message
text (String) - Contents of the message sent
created (Datetime) - Date-time of message creation
{
"id": 1,
"sender": "john_smith",
"text": "Hey let's party!",
"created": "2020-09-07T13:20:26.936400Z"
}
react-chat-enginePublic
React component for a cheap and easy chat API
Chat Engine's react components done the right way...
Chat Application using Django and ReactJS
JavaScript 1
Django & React chat tutorial project
JavaScript
Chat Engine io
DocumentationProject Tutorials
This is going to be a huge tutorial series for those interested in React. We will be building a complete Chat application using Chatengine.io, Firebase, React, and we will be deploying it to Vercel. So you'll have the opportunity to work through the entire development lifecycle!
likes
replies
10.8 GEEK
This is going to be a huge tutorial series for those interested in React. We will be building a complete Chat application using Chatengine.io, Firebase, React, and we will be deploying it to Vercel. So you’ll have the opportunity to work through the entire development lifecycle!
0:00 Intro
11:50 Part 1: Setup
42:15 Part 2: Routing
50:25 Part 3: Serverless Functions
1:07:17 Part 4: Formik
1:43:02 Part 5: Firebase
2:20:05 Part 6: Context API
2:36:15 Part 7: Chatengine
2:46:26 Part 8: Chat List
3:28:51 Part 9: Adding Users
3:59:12 Part 10: Sending Messages
4:33:14 Part 11: Sending Images
4:50:14 Part 12: Uploading Avatars
5:06:14 Part 13: Deploying To Vercel
GitHub Repo: https://github.com/portexe/react-chatengine-demo
Below are the individual resources for each individual part of the course:
Part 1:
In this video we will clone the boilerplate react app and install the dependencies. We have to set up out chatengine.io and firebase accounts, and go through the initial setup of the project.
Part 2:
First thing we need to do is set up the React Router so that we can easily route between the different pages in our single page application.
Part 3:
We don’t want to expose our private key to the client. This would bring huge security issues. In this video we set up a serverless function that utilizes the app secret to create new chat users.
Part 4:
Formik allows us to handle forms in a very elegant and easy-to-understand way. Alongside Formik we will be using Yup for our login and signup form validations.
Part 5:
Now is a great time to go ahead and hook up our login/signup forms to Firebase and Chatengine. We will use Firebase to handle authentication and then we will use the firebase callback to handle the API call to our createUser serverless function.
Part 6:
We’ll create a shared Context using the React Context API in order to share state across multiple components.
Part 7:
Here we will begin hooking into the Chat engine events
Download The Image Here: https://github.com/portexe/react-chatengine-demo/blob/master/public/img/pointLeft.png
Part 8:
Now that we have the framework laid out, we can begin updating our UI with our chat data. Today we will focus on displaying a list of chats for the logged in user.
Part 9:
Before we start sending chat messages, we need the ability to search for users and add them to chats
Part 10:
Now we can begin sending chat messages between users. Things are starting to come together!
Part 11:
We can send text chat messages, but now we will create the ability for users to send images
Part 12:
To finish up, we want to be able to let users upload an avatar. We will use Firebase to store the user avatars.
Part 13:
Finally let’s push this project to production via Vercel!
#react #javascript #web-development
HELLO AND WELCOME TO THE
5 STAR AI.IOT TOOLS FOR YOUR BUSINESS
ARE NEW WEBSITE IS ABOUT 5 STAR AI and io’t TOOLS on the net.
We prevaid you the best
Artificial Intelligence tools and services that can be used to create and improve BUSINESS websites AND CHANNELS .
This site is includes tools for creating interactive visuals, animations, and videos.
as well as tools for SEO, marketing, and web development.
It also includes tools for creating and editing text, images, and audio. The website is intended to provide users with a comprehensive list of AI-based tools to help them create and improve their business.
https://studio.d-id.com/share?id=078f9242d5185a9494e00852e89e17f7&utm_source=copy
This website is a collection of Artificial Intelligence (AI) tools and services that can be used to create and improve websites. It includes tools for creating interactive visuals, animations, and videos, as well as tools for SEO, marketing, and web development. It also includes tools for creating and editing text, images, and audio. The website is intended to provide users with a comprehensive list of AI-based tools to help them create and improve their websites.
אתר זה הוא אוסף של כלים ושירותים של בינה מלאכותית (AI) שניתן להשתמש בהם כדי ליצור ולשפר אתרים. הוא כולל כלים ליצירת ויזואליה אינטראקטיבית, אנימציות וסרטונים, כמו גם כלים לקידום אתרים, שיווק ופיתוח אתרים. הוא כולל גם כלים ליצירה ועריכה של טקסט, תמונות ואודיו. האתר נועד לספק למשתמשים רשימה מקיפה של כלים מבוססי AI שיסייעו להם ליצור ולשפר את אתרי האינטרנט שלהם.
Hello and welcome to our new site that shares with you the most powerful web platforms and tools available on the web today
All platforms, websites and tools have artificial intelligence AI and have a 5-star rating
All platforms, websites and tools are free and Pro paid
The platforms, websites and the tool's are the best for growing your business in 2022/3
שלום וברוכים הבאים לאתר החדש שלנו המשתף אתכם בפלטפורמות האינטרנט והכלים החזקים ביותר הקיימים היום ברשת. כל הפלטפורמות, האתרים והכלים הם בעלי בינה מלאכותית AI ובעלי דירוג של 5 כוכבים. כל הפלטפורמות, האתרים והכלים חינמיים ומקצועיים בתשלום הפלטפורמות, האתרים והכלים באתר זה הם הטובים ביותר והמועילים ביותר להצמחת ולהגדלת העסק שלך ב-2022/3
A guide to improving your existing business application of artificial intelligence
מדריך לשיפור היישום העסקי הקיים שלך בינה מלאכותית
What is Artificial Intelligence and how does it work? What are the 3 types of AI? The 3 types of AI are: General AI: AI that can perform all of the intellectual tasks a human can. Currently, no form of AI can think abstractly or develop creative ideas in the same ways as humans. Narrow AI: Narrow AI commonly includes visual recognition and natural language processing (NLP) technologies. It is a powerful tool for completing routine jobs based on common knowledge, such as playing music on demand via a voice-enabled device. Broad AI: Broad AI typically relies on exclusive data sets associated with the business in question. It is generally considered the most useful AI category for a business. Business leaders will integrate a broad AI solution with a specific business process where enterprise-specific knowledge is required. How can artificial intelligence be used in business? AI is providing new ways for humans to engage with machines, transitioning personnel from pure digital experiences to human-like natural interactions. This is called cognitive engagement. AI is augmenting and improving how humans absorb and process information, often in real-time. This is called cognitive insights and knowledge management. Beyond process automation, AI is facilitating knowledge-intensive business decisions, mimicking complex human intelligence. This is called cognitive automation. What are the different artificial intelligence technologies in business? Machine learning, deep learning, robotics, computer vision, cognitive computing, artificial general intelligence, natural language processing, and knowledge reasoning are some of the most common business applications of AI. What is the difference between artificial intelligence and machine learning and deep learning? Artificial intelligence (AI) applies advanced analysis and logic-based techniques, including machine learning, to interpret events, support and automate decisions, and take actions. Machine learning is an application of artificial intelligence (AI) that provides systems the ability to automatically learn and improve from experience without being explicitly programmed. Deep learning is a subset of machine learning in artificial intelligence (AI) that has networks capable of learning unsupervised from data that is unstructured or unlabeled. What are the current and future capabilities of artificial intelligence? Current capabilities of AI include examples such as personal assistants (Siri, Alexa, Google Home), smart cars (Tesla), behavioral adaptation to improve the emotional intelligence of customer support representatives, using machine learning and predictive algorithms to improve the customer’s experience, transactional AI like that of Amazon, personalized content recommendations (Netflix), voice control, and learning thermostats. Future capabilities of AI might probably include fully autonomous cars, precision farming, future air traffic controllers, future classrooms with ambient informatics, urban systems, smart cities and so on. To know more about the scope of artificial intelligence in your business, please connect with our expert.
מהי בינה מלאכותית וכיצד היא פועלת? מהם 3 סוגי הבינה המלאכותית? שלושת סוגי הבינה המלאכותית הם: בינה מלאכותית כללית: בינה מלאכותית שיכולה לבצע את כל המשימות האינטלקטואליות שאדם יכול. נכון לעכשיו, שום צורה של AI לא יכולה לחשוב בצורה מופשטת או לפתח רעיונות יצירתיים באותן דרכים כמו בני אדם. בינה מלאכותית צרה: בינה מלאכותית צרה כוללת בדרך כלל טכנולוגיות זיהוי חזותי ועיבוד שפה טבעית (NLP). זהו כלי רב עוצמה להשלמת עבודות שגרתיות המבוססות על ידע נפוץ, כגון השמעת מוזיקה לפי דרישה באמצעות מכשיר התומך בקול. בינה מלאכותית רחבה: בינה מלאכותית רחבה מסתמכת בדרך כלל על מערכי נתונים בלעדיים הקשורים לעסק המדובר. זה נחשב בדרך כלל לקטגוריית הבינה המלאכותית השימושית ביותר עבור עסק. מנהיגים עסקיים ישלבו פתרון AI רחב עם תהליך עסקי ספציפי שבו נדרש ידע ספציפי לארגון. כיצד ניתן להשתמש בבינה מלאכותית בעסק? AI מספקת דרכים חדשות לבני אדם לעסוק במכונות, ומעבירה את הצוות מחוויות דיגיטליות טהורות לאינטראקציות טבעיות דמויות אדם. זה נקרא מעורבות קוגניטיבית. בינה מלאכותית מגדילה ומשפרת את האופן שבו בני אדם קולטים ומעבדים מידע, לעתים קרובות בזמן אמת. זה נקרא תובנות קוגניטיביות וניהול ידע. מעבר לאוטומציה של תהליכים, AI מאפשר החלטות עסקיות עתירות ידע, תוך חיקוי אינטליגנציה אנושית מורכבת. זה נקרא אוטומציה קוגניטיבית. מהן טכנולוגיות הבינה המלאכותית השונות בעסק? למידת מכונה, למידה עמוקה, רובוטיקה, ראייה ממוחשבת, מחשוב קוגניטיבי, בינה כללית מלאכותית, עיבוד שפה טבעית וחשיבת ידע הם חלק מהיישומים העסקיים הנפוצים ביותר של AI. מה ההבדל בין בינה מלאכותית ולמידת מכונה ולמידה עמוקה? בינה מלאכותית (AI) מיישמת ניתוח מתקדמות וטכניקות מבוססות לוגיקה, כולל למידת מכונה, כדי לפרש אירועים, לתמוך ולהפוך החלטות לאוטומטיות ולנקוט פעולות. למידת מכונה היא יישום של בינה מלאכותית (AI) המספק למערכות את היכולת ללמוד ולהשתפר מניסיון באופן אוטומטי מבלי להיות מתוכנתים במפורש. למידה עמוקה היא תת-קבוצה של למידת מכונה בבינה מלאכותית (AI) שיש לה רשתות המסוגלות ללמוד ללא פיקוח מנתונים שאינם מובנים או ללא תווית. מהן היכולות הנוכחיות והעתידיות של בינה מלאכותית? היכולות הנוכחיות של AI כוללות דוגמאות כמו עוזרים אישיים (Siri, Alexa, Google Home), מכוניות חכמות (Tesla), התאמה התנהגותית לשיפור האינטליגנציה הרגשית של נציגי תמיכת לקוחות, שימוש בלמידת מכונה ואלגוריתמים חזויים כדי לשפר את חווית הלקוח, עסקאות בינה מלאכותית כמו זו של אמזון, המלצות תוכן מותאמות אישית (Netflix), שליטה קולית ותרמוסטטים ללמידה. יכולות עתידיות של AI עשויות לכלול כנראה מכוניות אוטונומיות מלאות, חקלאות מדויקת, בקרי תעבורה אוויריים עתידיים, כיתות עתידיות עם אינפורמטיקה סביבתית, מערכות עירוניות, ערים חכמות וכן הלאה. כדי לדעת יותר על היקף הבינה המלאכותית בעסק שלך, אנא צור קשר עם המומחה שלנו.
Application Programming Interface(API):
An API, or application programming interface, is a set of rules and protocols that allows different software programs to communicate and exchange information with each other. It acts as a kind of intermediary, enabling different programs to interact and work together, even if they are not built using the same programming languages or technologies. API's provide a way for different software programs to talk to each other and share data, helping to create a more interconnected and seamless user experience.
Artificial Intelligence(AI):
the intelligence displayed by machines in performing tasks that typically require human intelligence, such as learning, problem-solving, decision-making, and language understanding. AI is achieved by developing algorithms and systems that can process, analyze, and understand large amounts of data and make decisions based on that data.
Compute Unified Device Architecture(CUDA):
CUDA is a way that computers can work on really hard and big problems by breaking them down into smaller pieces and solving them all at the same time. It helps the computer work faster and better by using special parts inside it called GPUs. It's like when you have lots of friends help you do a puzzle - it goes much faster than if you try to do it all by yourself.
The term "CUDA" is a trademark of NVIDIA Corporation, which developed and popularized the technology.
Data Processing:
The process of preparing raw data for use in a machine learning model, including tasks such as cleaning, transforming, and normalizing the data.
Deep Learning(DL):
A subfield of machine learning that uses deep neural networks with many layers to learn complex patterns from data.
Feature Engineering:
The process of selecting and creating new features from the raw data that can be used to improve the performance of a machine learning model.
Freemium:
You might see the term "Freemium" used often on this site. It simply means that the specific tool that you're looking at has both free and paid options. Typically there is very minimal, but unlimited, usage of the tool at a free tier with more access and features introduced in paid tiers.
Generative Art:
Generative art is a form of art that is created using a computer program or algorithm to generate visual or audio output. It often involves the use of randomness or mathematical rules to create unique, unpredictable, and sometimes chaotic results.
Generative Pre-trained Transformer(GPT):
GPT stands for Generative Pretrained Transformer. It is a type of large language model developed by OpenAI.
GitHub:
GitHub is a platform for hosting and collaborating on software projects
Google Colab:
Google Colab is an online platform that allows users to share and run Python scripts in the cloud
Graphics Processing Unit(GPU):
A GPU, or graphics processing unit, is a special type of computer chip that is designed to handle the complex calculations needed to display images and video on a computer or other device. It's like the brain of your computer's graphics system, and it's really good at doing lots of math really fast. GPUs are used in many different types of devices, including computers, phones, and gaming consoles. They are especially useful for tasks that require a lot of processing power, like playing video games, rendering 3D graphics, or running machine learning algorithms.
Large Language Model(LLM):
A type of machine learning model that is trained on a very large amount of text data and is able to generate natural-sounding text.
Machine Learning(ML):
A method of teaching computers to learn from data, without being explicitly programmed.
Natural Language Processing(NLP):
A subfield of AI that focuses on teaching machines to understand, process, and generate human language
Neural Networks:
A type of machine learning algorithm modeled on the structure and function of the brain.
Neural Radiance Fields(NeRF):
Neural Radiance Fields are a type of deep learning model that can be used for a variety of tasks, including image generation, object detection, and segmentation. NeRFs are inspired by the idea of using a neural network to model the radiance of an image, which is a measure of the amount of light that is emitted or reflected by an object.
OpenAI:
OpenAI is a research institute focused on developing and promoting artificial intelligence technologies that are safe, transparent, and beneficial to society
Overfitting:
A common problem in machine learning, in which the model performs well on the training data but poorly on new, unseen data. It occurs when the model is too complex and has learned too many details from the training data, so it doesn't generalize well.
Prompt:
A prompt is a piece of text that is used to prime a large language model and guide its generation
Python:
Python is a popular, high-level programming language known for its simplicity, readability, and flexibility (many AI tools use it)
Reinforcement Learning:
A type of machine learning in which the model learns by trial and error, receiving rewards or punishments for its actions and adjusting its behavior accordingly.
Spatial Computing:
Spatial computing is the use of technology to add digital information and experiences to the physical world. This can include things like augmented reality, where digital information is added to what you see in the real world, or virtual reality, where you can fully immerse yourself in a digital environment. It has many different uses, such as in education, entertainment, and design, and can change how we interact with the world and with each other.
Stable Diffusion:
Stable Diffusion generates complex artistic images based on text prompts. It’s an open source image synthesis AI model available to everyone. Stable Diffusion can be installed locally using code found on GitHub or there are several online user interfaces that also leverage Stable Diffusion models.
Supervised Learning:
A type of machine learning in which the training data is labeled and the model is trained to make predictions based on the relationships between the input data and the corresponding labels.
Unsupervised Learning:
A type of machine learning in which the training data is not labeled, and the model is trained to find patterns and relationships in the data on its own.
Webhook:
A webhook is a way for one computer program to send a message or data to another program over the internet in real-time. It works by sending the message or data to a specific URL, which belongs to the other program. Webhooks are often used to automate processes and make it easier for different programs to communicate and work together. They are a useful tool for developers who want to build custom applications or create integrations between different software systems.
ממשק תכנות יישומים (API): API, או ממשק תכנות יישומים, הוא קבוצה של כללים ופרוטוקולים המאפשרים לתוכנות שונות לתקשר ולהחליף מידע ביניהן. הוא פועל כמעין מתווך, המאפשר לתוכניות שונות לקיים אינטראקציה ולעבוד יחד, גם אם הן אינן בנויות באמצעות אותן שפות תכנות או טכנולוגיות. ממשקי API מספקים דרך לתוכנות שונות לדבר ביניהן ולשתף נתונים, ועוזרות ליצור חווית משתמש מקושרת יותר וחלקה יותר. בינה מלאכותית (AI): האינטליגנציה שמוצגת על ידי מכונות בביצוע משימות הדורשות בדרך כלל אינטליגנציה אנושית, כגון למידה, פתרון בעיות, קבלת החלטות והבנת שפה. AI מושגת על ידי פיתוח אלגוריתמים ומערכות שיכולים לעבד, לנתח ולהבין כמויות גדולות של נתונים ולקבל החלטות על סמך הנתונים הללו. Compute Unified Device Architecture (CUDA): CUDA היא דרך שבה מחשבים יכולים לעבוד על בעיות קשות וגדולות באמת על ידי פירוקן לחתיכות קטנות יותר ופתרון כולן בו זמנית. זה עוזר למחשב לעבוד מהר יותר וטוב יותר על ידי שימוש בחלקים מיוחדים בתוכו הנקראים GPUs. זה כמו כשיש לך הרבה חברים שעוזרים לך לעשות פאזל - זה הולך הרבה יותר מהר מאשר אם אתה מנסה לעשות את זה לבד. המונח "CUDA" הוא סימן מסחרי של NVIDIA Corporation, אשר פיתחה והפכה את הטכנולוגיה לפופולרית. עיבוד נתונים: תהליך הכנת נתונים גולמיים לשימוש במודל למידת מכונה, כולל משימות כמו ניקוי, שינוי ונימול של הנתונים. למידה עמוקה (DL): תת-תחום של למידת מכונה המשתמש ברשתות עצביות עמוקות עם רבדים רבים כדי ללמוד דפוסים מורכבים מנתונים. הנדסת תכונות: תהליך הבחירה והיצירה של תכונות חדשות מהנתונים הגולמיים שניתן להשתמש בהם כדי לשפר את הביצועים של מודל למידת מכונה. Freemium: ייתכן שתראה את המונח "Freemium" בשימוש לעתים קרובות באתר זה. זה פשוט אומר שלכלי הספציפי שאתה מסתכל עליו יש אפשרויות חינמיות וגם בתשלום. בדרך כלל יש שימוש מינימלי מאוד, אך בלתי מוגבל, בכלי בשכבה חינמית עם יותר גישה ותכונות שהוצגו בשכבות בתשלום. אמנות גנרטיבית: אמנות גנרטיבית היא צורה של אמנות שנוצרת באמצעות תוכנת מחשב או אלגוריתם ליצירת פלט חזותי או אודיו. לרוב זה כרוך בשימוש באקראיות או בכללים מתמטיים כדי ליצור תוצאות ייחודיות, בלתי צפויות ולעיתים כאוטיות. Generative Pre-trained Transformer(GPT): GPT ראשי תיבות של Generative Pre-trained Transformer. זהו סוג של מודל שפה גדול שפותח על ידי OpenAI. GitHub: GitHub היא פלטפורמה לאירוח ושיתוף פעולה בפרויקטי תוכנה
Google Colab: Google Colab היא פלטפורמה מקוונת המאפשרת למשתמשים לשתף ולהריץ סקריפטים של Python בענן Graphics Processing Unit(GPU): GPU, או יחידת עיבוד גרפית, הוא סוג מיוחד של שבב מחשב שנועד להתמודד עם המורכבות חישובים הדרושים להצגת תמונות ווידאו במחשב או במכשיר אחר. זה כמו המוח של המערכת הגרפית של המחשב שלך, והוא ממש טוב לעשות הרבה מתמטיקה ממש מהר. GPUs משמשים סוגים רבים ושונים של מכשירים, כולל מחשבים, טלפונים וקונסולות משחקים. הם שימושיים במיוחד למשימות הדורשות כוח עיבוד רב, כמו משחקי וידאו, עיבוד גרפיקה תלת-ממדית או הפעלת אלגוריתמים של למידת מכונה. מודל שפה גדול (LLM): סוג של מודל למידת מכונה שאומן על כמות גדולה מאוד של נתוני טקסט ומסוגל ליצור טקסט בעל צליל טבעי. Machine Learning (ML): שיטה ללמד מחשבים ללמוד מנתונים, מבלי להיות מתוכנתים במפורש. עיבוד שפה טבעית (NLP): תת-תחום של AI המתמקד בהוראת מכונות להבין, לעבד וליצור שפה אנושית רשתות עצביות: סוג של אלגוריתם למידת מכונה המבוססת על המבנה והתפקוד של המוח. שדות קרינה עצביים (NeRF): שדות קרינה עצביים הם סוג של מודל למידה עמוקה שיכול לשמש למגוון משימות, כולל יצירת תמונה, זיהוי אובייקטים ופילוח. NeRFs שואבים השראה מהרעיון של שימוש ברשת עצבית למודל של זוהר תמונה, שהוא מדד לכמות האור שנפלט או מוחזר על ידי אובייקט. OpenAI: OpenAI הוא מכון מחקר המתמקד בפיתוח וקידום טכנולוגיות בינה מלאכותית שהן בטוחות, שקופות ומועילות לחברה. Overfitting: בעיה נפוצה בלמידת מכונה, שבה המודל מתפקד היטב בנתוני האימון אך גרועים בחדשים, בלתי נראים. נתונים. זה מתרחש כאשר המודל מורכב מדי ולמד יותר מדי פרטים מנתוני האימון, כך שהוא לא מכליל היטב. הנחיה: הנחיה היא פיסת טקסט המשמשת לתכנון מודל שפה גדול ולהנחות את הדור שלו Python: Python היא שפת תכנות פופולרית ברמה גבוהה הידועה בפשטות, בקריאות ובגמישות שלה (כלי AI רבים משתמשים בה) למידת חיזוק: סוג של למידת מכונה שבה המודל לומד על ידי ניסוי וטעייה, מקבל תגמולים או עונשים על מעשיו ומתאים את התנהגותו בהתאם. מחשוב מרחבי: מחשוב מרחבי הוא השימוש בטכנולוגיה כדי להוסיף מידע וחוויות דיגיטליות לעולם הפיזי. זה יכול לכלול דברים כמו מציאות רבודה, שבה מידע דיגיטלי מתווסף למה שאתה רואה בעולם האמיתי, או מציאות מדומה, שבה אתה יכול לשקוע במלואו בסביבה דיגיטלית. יש לו שימושים רבים ושונים, כמו בחינוך, בידור ועיצוב, והוא יכול לשנות את האופן שבו אנו מתקשרים עם העולם ואחד עם השני. דיפוזיה יציבה: דיפוזיה יציבה מייצרת תמונות אמנותיות מורכבות המבוססות על הנחיות טקסט. זהו מודל AI של סינתזת תמונות בקוד פתוח הזמין לכולם. ניתן להתקין את ה-Stable Diffusion באופן מקומי באמצעות קוד שנמצא ב-GitHub או שישנם מספר ממשקי משתמש מקוונים הממנפים גם מודלים של Stable Diffusion. למידה מפוקחת: סוג של למידת מכונה שבה נתוני האימון מסומנים והמודל מאומן לבצע תחזיות על סמך היחסים בין נתוני הקלט והתוויות המתאימות. למידה ללא פיקוח: סוג של למידת מכונה שבה נתוני האימון אינם מסומנים, והמודל מאומן למצוא דפוסים ויחסים בנתונים בעצמו. Webhook: Webhook הוא דרך של תוכנת מחשב אחת לשלוח הודעה או נתונים לתוכנית אחרת דרך האינטרנט בזמן אמת. זה עובד על ידי שליחת ההודעה או הנתונים לכתובת URL ספציפית, השייכת לתוכנית האחרת. Webhooks משמשים לעתים קרובות כדי להפוך תהליכים לאוטומטיים ולהקל על תוכניות שונות לתקשר ולעבוד יחד. הם כלי שימושי למפתחים שרוצים לבנות יישומים מותאמים אישית או ליצור אינטגרציות בין מערכות תוכנה שונות.
WELCOME TO THE