1
00:00:01,950 --> 00:00:02,820
Hey, welcome back.

2
00:00:02,850 --> 00:00:07,650
In this video, we'll connect to the chat bot window class to the chat bot class.

3
00:00:07,650 --> 00:00:08,910
So in other words.

4
00:00:09,790 --> 00:00:19,030
The chat bot window will be populated with the chat area here and the send button will function correctly.

5
00:00:20,190 --> 00:00:21,330
So let's do that.

6
00:00:21,810 --> 00:00:24,270
This is the code that creates a chat bot window.

7
00:00:24,300 --> 00:00:27,720
This is the code that creates the chat bot itself.

8
00:00:28,110 --> 00:00:30,990
So I've opened them both side by side.

9
00:00:32,320 --> 00:00:33,970
So where should we start?

10
00:00:34,000 --> 00:00:34,960
What do you think?

11
00:00:34,990 --> 00:00:36,700
This is a chat between them.

12
00:00:37,510 --> 00:00:42,070
Well, I'll say we start by thinking from the user perspective.

13
00:00:42,070 --> 00:00:43,910
So the user is censoring something here.

14
00:00:43,930 --> 00:00:46,970
Hey, tell me a joke.

15
00:00:46,990 --> 00:00:48,330
Nothing happens now.

16
00:00:48,340 --> 00:00:52,210
So what we need to do first is we need to capture the user input.

17
00:00:53,400 --> 00:00:55,020
When the button is pressed.

18
00:00:55,020 --> 00:00:57,510
So let's locate that send button.

19
00:00:57,600 --> 00:00:58,470
Where is it?

20
00:00:58,500 --> 00:00:59,730
It's here, right?

21
00:01:00,570 --> 00:01:01,870
That's where we create it.

22
00:01:01,890 --> 00:01:08,160
We set the geometry and then self dot button dot clicked.

23
00:01:08,160 --> 00:01:12,660
So if it's clicked, we connect it to self.

24
00:01:12,660 --> 00:01:16,170
Dot sent message perhaps.

25
00:01:16,170 --> 00:01:19,530
So this is a method we need to create now.

26
00:01:20,160 --> 00:01:22,710
Let me create it in here.

27
00:01:22,710 --> 00:01:27,560
So we are inside the chat bot window class, right?

28
00:01:27,570 --> 00:01:33,570
So we will create a method for that class send message.

29
00:01:36,050 --> 00:01:38,930
This method methods will get the user input.

30
00:01:38,930 --> 00:01:45,650
So whatever the user typed in in that field we get, it's using self dot.

31
00:01:47,540 --> 00:01:56,410
Input field that text and we strip it out from any trailing spaces.

32
00:01:56,420 --> 00:02:00,110
So that will make sure that we have access to user input.

33
00:02:00,410 --> 00:02:01,050
Right.

34
00:02:01,070 --> 00:02:02,360
Let me try this.

35
00:02:02,360 --> 00:02:03,770
So run the code.

36
00:02:04,670 --> 00:02:08,360
Hello present send and hello is printed out.

37
00:02:08,660 --> 00:02:12,290
So that was working well.

38
00:02:12,290 --> 00:02:18,500
So we have access to user inputs within this send message method.

39
00:02:18,530 --> 00:02:21,530
Then next to what we need to do next is.

40
00:02:22,640 --> 00:02:25,670
So the user enters something in here, they press send.

41
00:02:25,700 --> 00:02:26,960
What happens next?

42
00:02:27,380 --> 00:02:32,450
Well, next, we need to display this immediately in the chat area.

43
00:02:33,450 --> 00:02:38,700
So we need to say, Oh, the user said hello and we need to print that out in here.

44
00:02:38,700 --> 00:02:40,290
So let's do that.

45
00:02:40,500 --> 00:02:41,850
Close the window.

46
00:02:42,960 --> 00:02:47,790
So we're talking about self dot chat area.

47
00:02:48,650 --> 00:02:50,030
This widget.

48
00:02:50,280 --> 00:02:53,210
That's the widget that will contain the chat area.

49
00:02:53,810 --> 00:02:54,920
So.

50
00:02:55,690 --> 00:03:03,280
We can use the append methods, which is a method of of a Q text added object.

51
00:03:03,550 --> 00:03:08,110
And this gets a string as an argument.

52
00:03:09,060 --> 00:03:10,830
And this could be an F string.

53
00:03:10,830 --> 00:03:19,800
So you can see me set something like user input, Right?

54
00:03:20,160 --> 00:03:25,230
And we also want to clear the input field.

55
00:03:26,490 --> 00:03:33,720
So once the user presses the button, we want to clear the input field and we want to display that in

56
00:03:33,720 --> 00:03:34,500
the chat area.

57
00:03:34,500 --> 00:03:35,580
So let's see.

58
00:03:36,960 --> 00:03:37,920
Hello here.

59
00:03:38,070 --> 00:03:45,150
Send me Hello goes there and this is ready for the next input, Right.

60
00:03:45,150 --> 00:03:46,080
What's next?

61
00:03:46,680 --> 00:03:53,580
Well, next is we need to send the user query to the chat bot.

62
00:03:54,240 --> 00:03:55,530
So let's do that.

63
00:03:57,520 --> 00:04:09,310
So first of all, we need to create a chat bot instance using the chat bot class which needs to be imported

64
00:04:09,310 --> 00:04:10,140
first.

65
00:04:10,150 --> 00:04:20,920
So from let me see the name of the file from back end import chat bot.

66
00:04:20,950 --> 00:04:22,660
That's the name of the class.

67
00:04:22,660 --> 00:04:28,330
So back end and main that one needs to be in the same directory for this to work.

68
00:04:29,110 --> 00:04:37,690
And then you instantiate chat bots here and after that you want to get the response from the chat bot

69
00:04:37,720 --> 00:04:40,510
using chat bots.

70
00:04:40,960 --> 00:04:50,830
So the chat bot instance dot the GetResponse response methods or the chat bot class, right?

71
00:04:50,830 --> 00:05:01,000
And user input goes as the value of this GetResponse method argument.

72
00:05:01,000 --> 00:05:04,330
So in our case, hello, we'll go here.

73
00:05:05,680 --> 00:05:06,640
To this variable.

74
00:05:06,640 --> 00:05:08,620
And from here it will go here.

75
00:05:08,650 --> 00:05:09,100
Right.

76
00:05:09,100 --> 00:05:17,980
And then from there it will go to the open API servers and that those servers will return the response

77
00:05:17,980 --> 00:05:21,850
and we will store the response in the response variable here.

78
00:05:22,710 --> 00:05:28,890
So this will happen every time that the user presses that send button.

79
00:05:28,890 --> 00:05:32,280
But there is a crucial improvement we could do here.

80
00:05:32,280 --> 00:05:39,030
Instead of instantiating chat bots in here, we would better instantiated.

81
00:05:40,610 --> 00:05:43,310
In the in it method of chat but window.

82
00:05:43,820 --> 00:05:46,610
So here on top why.

83
00:05:48,420 --> 00:05:49,350
Well, because.

84
00:05:50,370 --> 00:05:55,350
You only need to instantiate the chat bot once the class, right?

85
00:05:55,470 --> 00:05:57,570
And then from the chat bot instance.

86
00:05:57,570 --> 00:05:58,390
So that's a chat.

87
00:05:58,410 --> 00:06:01,950
But think of it as, as like an individual.

88
00:06:01,950 --> 00:06:08,790
So that's person that chat bot you, you can ask many times, but you don't have to call that person

89
00:06:08,790 --> 00:06:09,420
all the time.

90
00:06:09,420 --> 00:06:12,660
You can just start a conversation and then keep asking questions.

91
00:06:12,660 --> 00:06:17,220
So this is the way to do that.

92
00:06:18,740 --> 00:06:27,350
So you can make that a an attribute of the chat bot and then you can access it with self dot chat bot

93
00:06:27,350 --> 00:06:28,300
in here as well.

94
00:06:28,310 --> 00:06:29,980
So that's the response.

95
00:06:29,990 --> 00:06:35,540
Let's print out the response just to make sure we are doing well up to now.

96
00:06:37,470 --> 00:06:38,280
So run.

97
00:06:40,200 --> 00:06:42,870
Tell me a joke Prison sent.

98
00:06:46,990 --> 00:06:48,530
So there we go.

99
00:06:48,550 --> 00:06:50,560
I saw the joke somewhere in here.

100
00:06:52,570 --> 00:06:55,050
So that's the other joke of the chat boat.

101
00:06:55,060 --> 00:06:56,320
So it's working fine.

102
00:06:56,320 --> 00:07:01,480
But now with the response, we don't want to print it in the command line, but we want to display it

103
00:07:01,690 --> 00:07:03,010
on the chat area.

104
00:07:03,130 --> 00:07:11,860
To do that we say self chat area dot the pen, so we use that pen method again.

105
00:07:12,580 --> 00:07:17,800
This time we'll be but this will be an F string.

106
00:07:17,800 --> 00:07:22,060
And then after that, the placeholder and here goes the response.

107
00:07:22,390 --> 00:07:24,130
Let's see how that goes.

108
00:07:26,880 --> 00:07:28,890
Tell me a joke.

109
00:07:29,380 --> 00:07:30,510
Prison sent.

110
00:07:31,960 --> 00:07:32,830
There is a lag.

111
00:07:32,830 --> 00:07:34,750
We will try to fix that.

112
00:07:35,530 --> 00:07:36,610
So there we go.

113
00:07:36,610 --> 00:07:40,390
But and then we have some brake lines in here.

114
00:07:40,570 --> 00:07:44,230
So the output is not optimal.

115
00:07:44,230 --> 00:07:45,850
We need to fix that.

116
00:07:46,420 --> 00:07:52,090
And a good way to fix that is to use HTML in the strings.

117
00:07:52,090 --> 00:08:00,220
So instead of playing strings, what we'll do is I'll use a paragraph P with a style of.

118
00:08:03,050 --> 00:08:10,940
Color in single codes, so the color will be like a dark gray.

119
00:08:11,210 --> 00:08:15,720
So three, three, three, three, three, three, six times three.

120
00:08:15,740 --> 00:08:17,650
Close the paragraph tag.

121
00:08:17,670 --> 00:08:20,360
So that's the paragraph tag, right?

122
00:08:21,260 --> 00:08:26,660
And then we write the closing paragraph tag, as will at the end here.

123
00:08:26,660 --> 00:08:28,790
P like that.

124
00:08:28,820 --> 00:08:32,690
Let's also apply some style in the box area.

125
00:08:33,289 --> 00:08:37,890
So P Style is equal to quotes.

126
00:08:37,909 --> 00:08:43,610
Color will be the text, color will be the same, but we'll change the background color.

127
00:08:43,610 --> 00:08:45,140
So six times three.

128
00:08:45,140 --> 00:08:47,450
One, two, three, four, five, six.

129
00:08:49,340 --> 00:08:50,390
Semicolon.

130
00:08:51,350 --> 00:09:03,590
Background color a color and the color will be some light gray, like e, nine, e, 9e9, three times

131
00:09:03,590 --> 00:09:04,400
e nine.

132
00:09:04,790 --> 00:09:07,670
And let me close the paragraph tag in here.

133
00:09:07,850 --> 00:09:09,620
Yeah, let's try it.

134
00:09:12,700 --> 00:09:14,840
Tell me a joke.

135
00:09:14,860 --> 00:09:16,000
Present.

136
00:09:20,910 --> 00:09:23,190
Apparently it's not working.

137
00:09:23,190 --> 00:09:29,910
Let's see why we haven't closed this first tag, which should be closed.

138
00:09:30,900 --> 00:09:34,350
And here before the boat.

139
00:09:35,880 --> 00:09:36,960
Let's try again.

140
00:09:39,480 --> 00:09:41,810
Tell me a joke.

141
00:09:41,820 --> 00:09:42,870
Press and send.

142
00:09:45,780 --> 00:09:45,990
Yeah.

143
00:09:46,020 --> 00:09:46,770
There we go.

144
00:09:46,980 --> 00:09:48,480
So it's looking better now.

145
00:09:48,720 --> 00:09:49,980
That's the boat.

146
00:09:51,450 --> 00:09:53,760
What did the fish say when it hit the wall?

147
00:09:53,790 --> 00:09:58,830
The answer is, -- right it's working.

148
00:10:00,120 --> 00:10:05,010
So the functionality looks fine to me, but there's one improvement we could make here.

149
00:10:05,160 --> 00:10:07,860
And perhaps you have noticed it already.

150
00:10:07,860 --> 00:10:13,140
So what happens is that when we type in some text here, when is the.

151
00:10:15,520 --> 00:10:18,370
Christmas market in Germany, for example.

152
00:10:18,370 --> 00:10:23,220
So you press on sense and this is not being printed out in the chat area immediately.

153
00:10:23,230 --> 00:10:32,890
So it waits for the response of the chat bot of the open AI API, and then both of them are printed

154
00:10:32,890 --> 00:10:34,300
out at the same time.

155
00:10:34,300 --> 00:10:39,880
So a better user experience would be to send this directly.

156
00:10:40,680 --> 00:10:48,120
To the chat area and then wait for the user for the chat bot response and then print out the chat bot

157
00:10:48,120 --> 00:10:50,430
response on the chat area when it's ready.

158
00:10:50,550 --> 00:10:57,810
We can implement this using threading, so let's import the threading module.

159
00:10:57,810 --> 00:11:01,530
It's a standard module, so no need to install anything.

160
00:11:02,930 --> 00:11:07,950
So what we'll do now is we first get the user input, right?

161
00:11:07,970 --> 00:11:11,240
We append it to the chat area.

162
00:11:12,110 --> 00:11:21,800
We clear the text field and then we will not start this process because this takes time.

163
00:11:22,040 --> 00:11:27,080
It's getting a response from the remote API, from the remote server.

164
00:11:27,110 --> 00:11:28,490
This takes time.

165
00:11:28,490 --> 00:11:32,300
So before we start this process, what we'll do is.

166
00:11:33,760 --> 00:11:35,560
We create a threads here.

167
00:11:35,560 --> 00:11:44,590
So thread is equal to threading dot for threat class with a target of self.

168
00:11:44,590 --> 00:11:48,490
Don't get both response.

169
00:11:49,120 --> 00:11:53,560
So that's a method we will add to our class.

170
00:11:53,560 --> 00:11:55,360
So we are in the chat window.

171
00:11:55,360 --> 00:11:57,910
Class the class.

172
00:11:57,910 --> 00:12:01,780
So define get both response.

173
00:12:03,690 --> 00:12:04,370
Right.

174
00:12:04,380 --> 00:12:10,620
And inside here, we will place this response object.

175
00:12:10,650 --> 00:12:11,430
Right.

176
00:12:11,850 --> 00:12:13,290
And also this.

177
00:12:13,710 --> 00:12:20,490
So we get the response and we append it to the chat area inside this method.

178
00:12:20,730 --> 00:12:26,730
So now the get both response methods will be called in a separate thread.

179
00:12:26,760 --> 00:12:29,760
So that's more efficient for the processor.

180
00:12:29,910 --> 00:12:32,140
So things will work faster.

181
00:12:32,160 --> 00:12:35,220
So that's what the threading module does.

182
00:12:35,250 --> 00:12:41,550
So inside thread you, you place a target, which is this method, and then this needs an argument.

183
00:12:41,550 --> 00:12:50,200
So you want to also specify ARX is equal to and you specify the arguments here.

184
00:12:50,220 --> 00:12:53,460
In our case, it's only user input.

185
00:12:54,090 --> 00:12:57,540
So this is a tuple, so make sure to have a comma there.

186
00:12:58,140 --> 00:13:00,180
So a tuple with one item.

187
00:13:00,660 --> 00:13:06,120
And so what will happen is that this will call this method.

188
00:13:06,150 --> 00:13:10,950
So now this method expects the user input argument.

189
00:13:10,950 --> 00:13:18,390
So this argument will be passed to this method, all the background by Python, by the threads in module.

190
00:13:19,440 --> 00:13:21,600
And then you do threads that start.

191
00:13:22,380 --> 00:13:24,840
And yeah, that's basically it.

192
00:13:25,050 --> 00:13:27,570
Let me do some housekeeping here.

193
00:13:27,830 --> 00:13:28,890
Looks fine.

194
00:13:29,280 --> 00:13:30,510
Let's run.

195
00:13:32,460 --> 00:13:35,580
Tell me a joke about ducks.

196
00:13:37,600 --> 00:13:38,770
Press on that button.

197
00:13:38,780 --> 00:13:42,820
Yeah, we got the message directly printed out there and then we wait for the response.

198
00:13:42,820 --> 00:13:46,180
So I think this is a better user experience.

199
00:13:47,110 --> 00:13:56,680
One last improvement is that we want to implement the Enter key, so to have the input field listen

200
00:13:56,680 --> 00:13:57,790
to our keyboard.

201
00:13:57,790 --> 00:14:05,170
So when the user presses on, enter on their keyboard, we want to send that to this window and get

202
00:14:05,170 --> 00:14:08,350
the user response just like we do when we press send.

203
00:14:09,130 --> 00:14:10,120
Let's do that.

204
00:14:10,420 --> 00:14:16,810
So we're talking about the functionality, a functionality that belongs to the queue line.

205
00:14:16,810 --> 00:14:18,840
Edit widget, right?

206
00:14:18,850 --> 00:14:24,670
This is the widgets, the input field widget where the user is typing that text.

207
00:14:24,670 --> 00:14:33,610
So you want to say self that input field dot three turn pressed dot connect.

208
00:14:34,860 --> 00:14:44,820
And you simply provide cells that send message, which is the method that gets the user message and

209
00:14:44,820 --> 00:14:45,690
appends that.

210
00:14:45,720 --> 00:14:51,000
So the method we were working on, so that's the same method that is triggered by the button here,

211
00:14:51,570 --> 00:14:54,990
That's the button and there's the input field.

212
00:14:55,560 --> 00:14:59,340
Let's try this one more time and we're done with this video.

213
00:15:05,200 --> 00:15:06,960
That's a good question for Chad, but.

214
00:15:12,260 --> 00:15:15,800
And that looks like a good answer for a chat bot as well.

215
00:15:17,060 --> 00:15:18,590
So I hope you had fun with this.

216
00:15:18,590 --> 00:15:20,460
And yeah, I'll talk to you in the next video.

217
00:15:20,540 --> 00:15:21,260
Thanks a lot.