Hey, welcome back.
In this video, we'll connect to the chat bot window class to the chat bot class.
So in other words.
The chat bot window will be populated with the chat area here and the send button will function correctly.
So let's do that.
This is the code that creates a chat bot window.
This is the code that creates the chat bot itself.
So I've opened them both side by side.
So where should we start?
What do you think?
This is a chat between them.
Well, I'll say we start by thinking from the user perspective.
So the user is censoring something here.
Hey, tell me a joke.
Nothing happens now.
So what we need to do first is we need to capture the user input.
When the button is pressed.
So let's locate that send button.
Where is it?
It's here, right?
That's where we create it.
We set the geometry and then self dot button dot clicked.
So if it's clicked, we connect it to self.
Dot sent message perhaps.
So this is a method we need to create now.
Let me create it in here.
So we are inside the chat bot window class, right?
So we will create a method for that class send message.
This method methods will get the user input.
So whatever the user typed in in that field we get, it's using self dot.
Input field that text and we strip it out from any trailing spaces.
So that will make sure that we have access to user input.
Right.
Let me try this.
So run the code.
Hello present send and hello is printed out.
So that was working well.
So we have access to user inputs within this send message method.
Then next to what we need to do next is.
So the user enters something in here, they press send.
What happens next?
Well, next, we need to display this immediately in the chat area.
So we need to say, Oh, the user said hello and we need to print that out in here.
So let's do that.
Close the window.
So we're talking about self dot chat area.
This widget.
That's the widget that will contain the chat area.
So.
We can use the append methods, which is a method of of a Q text added object.
And this gets a string as an argument.
And this could be an F string.
So you can see me set something like user input, Right?
And we also want to clear the input field.
So once the user presses the button, we want to clear the input field and we want to display that in
the chat area.
So let's see.
Hello here.
Send me Hello goes there and this is ready for the next input, Right.
What's next?
Well, next is we need to send the user query to the chat bot.
So let's do that.
So first of all, we need to create a chat bot instance using the chat bot class which needs to be imported
first.
So from let me see the name of the file from back end import chat bot.
That's the name of the class.
So back end and main that one needs to be in the same directory for this to work.
And then you instantiate chat bots here and after that you want to get the response from the chat bot
using chat bots.
So the chat bot instance dot the GetResponse response methods or the chat bot class, right?
And user input goes as the value of this GetResponse method argument.
So in our case, hello, we'll go here.
To this variable.
And from here it will go here.
Right.
And then from there it will go to the open API servers and that those servers will return the response
and we will store the response in the response variable here.
So this will happen every time that the user presses that send button.
But there is a crucial improvement we could do here.
Instead of instantiating chat bots in here, we would better instantiated.
In the in it method of chat but window.
So here on top why.
Well, because.
You only need to instantiate the chat bot once the class, right?
And then from the chat bot instance.
So that's a chat.
But think of it as, as like an individual.
So that's person that chat bot you, you can ask many times, but you don't have to call that person
all the time.
You can just start a conversation and then keep asking questions.
So this is the way to do that.
So you can make that a an attribute of the chat bot and then you can access it with self dot chat bot
in here as well.
So that's the response.
Let's print out the response just to make sure we are doing well up to now.
So run.
Tell me a joke Prison sent.
So there we go.
I saw the joke somewhere in here.
So that's the other joke of the chat boat.
So it's working fine.
But now with the response, we don't want to print it in the command line, but we want to display it
on the chat area.
To do that we say self chat area dot the pen, so we use that pen method again.
This time we'll be but this will be an F string.
And then after that, the placeholder and here goes the response.
Let's see how that goes.
Tell me a joke.
Prison sent.
There is a lag.
We will try to fix that.
So there we go.
But and then we have some brake lines in here.
So the output is not optimal.
We need to fix that.
And a good way to fix that is to use HTML in the strings.
So instead of playing strings, what we'll do is I'll use a paragraph P with a style of.
Color in single codes, so the color will be like a dark gray.
So three, three, three, three, three, three, six times three.
Close the paragraph tag.
So that's the paragraph tag, right?
And then we write the closing paragraph tag, as will at the end here.
P like that.
Let's also apply some style in the box area.
So P Style is equal to quotes.
Color will be the text, color will be the same, but we'll change the background color.
So six times three.
One, two, three, four, five, six.
Semicolon.
Background color a color and the color will be some light gray, like e, nine, e, 9e9, three times
e nine.
And let me close the paragraph tag in here.
Yeah, let's try it.
Tell me a joke.
Present.
Apparently it's not working.
Let's see why we haven't closed this first tag, which should be closed.
And here before the boat.
Let's try again.
Tell me a joke.
Press and send.
Yeah.
There we go.
So it's looking better now.
That's the boat.
What did the fish say when it hit the wall?
The answer is, -- right it's working.
So the functionality looks fine to me, but there's one improvement we could make here.
And perhaps you have noticed it already.
So what happens is that when we type in some text here, when is the.
Christmas market in Germany, for example.
So you press on sense and this is not being printed out in the chat area immediately.
So it waits for the response of the chat bot of the open AI API, and then both of them are printed
out at the same time.
So a better user experience would be to send this directly.
To the chat area and then wait for the user for the chat bot response and then print out the chat bot
response on the chat area when it's ready.
We can implement this using threading, so let's import the threading module.
It's a standard module, so no need to install anything.
So what we'll do now is we first get the user input, right?
We append it to the chat area.
We clear the text field and then we will not start this process because this takes time.
It's getting a response from the remote API, from the remote server.
This takes time.
So before we start this process, what we'll do is.
We create a threads here.
So thread is equal to threading dot for threat class with a target of self.
Don't get both response.
So that's a method we will add to our class.
So we are in the chat window.
Class the class.
So define get both response.
Right.
And inside here, we will place this response object.
Right.
And also this.
So we get the response and we append it to the chat area inside this method.
So now the get both response methods will be called in a separate thread.
So that's more efficient for the processor.
So things will work faster.
So that's what the threading module does.
So inside thread you, you place a target, which is this method, and then this needs an argument.
So you want to also specify ARX is equal to and you specify the arguments here.
In our case, it's only user input.
So this is a tuple, so make sure to have a comma there.
So a tuple with one item.
And so what will happen is that this will call this method.
So now this method expects the user input argument.
So this argument will be passed to this method, all the background by Python, by the threads in module.
And then you do threads that start.
And yeah, that's basically it.
Let me do some housekeeping here.
Looks fine.
Let's run.
Tell me a joke about ducks.
Press on that button.
Yeah, we got the message directly printed out there and then we wait for the response.
So I think this is a better user experience.
One last improvement is that we want to implement the Enter key, so to have the input field listen
to our keyboard.
So when the user presses on, enter on their keyboard, we want to send that to this window and get
the user response just like we do when we press send.
Let's do that.
So we're talking about the functionality, a functionality that belongs to the queue line.
Edit widget, right?
This is the widgets, the input field widget where the user is typing that text.
So you want to say self that input field dot three turn pressed dot connect.
And you simply provide cells that send message, which is the method that gets the user message and
appends that.
So the method we were working on, so that's the same method that is triggered by the button here,
That's the button and there's the input field.
Let's try this one more time and we're done with this video.
That's a good question for Chad, but.
And that looks like a good answer for a chat bot as well.
So I hope you had fun with this.
And yeah, I'll talk to you in the next video.
Thanks a lot.