Build An Audio AI App Transcripts
Chapter: Feature 4: Chat Q and A
Lecture: Chat with Episode UI

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Next up, let's add some URL. Remember, over in our template on the podcast, we said, ""Hey, guess what?
0:12 When this exists, you can go to this URL right there and you should be able to start chatting, podcast/chat/detailsaboutit.
0:25 But if we go to the podcast views, no, there's not actually such a thing. So our goal here is going to be to add that functionality.
0:36 So there actually is an endpoint here. Some of this is done for us, but not all of it. Now, I'm gonna place it off this transcript,
0:44 view another transcript, 'cause it turns out to be real, real similar. Let's save us some typing. So this is gonna be podcast/chat, like that.
0:53 And I'll call this with chat with episode. And notice over here, because we're not doing everything from scratch,
1:03 it would take, we've already spent a lot of time working on these features, right? It would take way longer to do all the web design and stuff.
1:09 And it's not germane really to what we're doing. So if we look over here, there's a chatwithepisode.html. So chat dash, chat with episode, like that.
1:25 So this will actually go ahead and pull things up. And just like I've done the HTML, I've also created a view model
1:31 that knows how to exchange the data with it. And that is going to be a chat, episode chat view model, like that. And we can look at it real quick.
1:42 Basically, it stores the podcast and the episode number, and then it pulls those in for us, stores the question,
1:49 and it will pull the answer out of a form that we're gonna give them in a second. Okay, so nothing new there.
1:58 We're loading the data and we're returning it. There's nowhere to process the question, but this will let us actually show it.
2:04 So let's see what we get here. We come over, now it says we can chat with episode. Let's click and see if we got this right.
2:13 No, no, no, we have not podcast chat such and such. What have we missed in our URL? Podcasts.
2:22 Which I guess all the other ones are podcasts, aren't they? You know what, I'm gonna change it here. I like that to be consistent. Go back, refresh.
2:35 Oh, it works this time, hooray. Well, there it is. This is our UI that I built for us. It says AI chat with episode. It has a little question mark
2:46 because, hey, what's your question? What do you wanna know about, notice this will navigate you around. What do you wanna know about Python bytes
2:53 and the episode, this one that we just shipped open source? Here's your question, let's ask it. Nothing, nothing, we got nothing. Why?
3:04 Well, that part's not written yet. You can see down here, there's a 404 not found to some htmx thing that we're trying to do.
3:14 All right, we're gonna work on that in a second and that will be pretty close to finishing things up. But let's look at this chat really quick
3:25 and just understand how this UI works. So we've got this summary information above, we've got a text area for broad,
3:37 larger than just a couple of words questions, and we have this ask a question. So up here at the top, this is just the summary.
3:45 What do you wanna know about this podcast? Don't worry about that. But here's where it gets interesting.
3:49 We have a form and instead of having a post or an action, it says htmx is gonna handle this form for us.
3:58 So what that will do is we can type in here and say, I want to know the meaning of life. And you ask a question and it'll come down here.
4:09 You could say, actually, I wanna change this to something else, I wanna know the meaning of fun. And you ask it again, right?
4:16 It won't refresh, it'll just stay right there and you can't see it right now, but in the bottom, there's a little section where those results go.
4:22 So that's why we're using htmx here. Hopefully you're finding an awesome appreciation for htmx. The target is not this form because we want it to stay,
4:32 but is in fact down here where we have results. We also have a spinning indicator. So instead of having the reload and then you go
4:44 and click a button when the job is done effectively as we have been, this will just show an activity indicator while we're waiting.
4:51 And that's right here, the indicator is that. And other than that, it's just a basic form, right? So our text area just has an idea question,
5:02 it has some rows, it auto focuses, all those kinds of things. When htmx loads, we wanna delete the old answer while it's thinking.
5:11 So that's kind of a little nice UI bit. And then the button is just a submit button and there's no htmx magic, it's the form that does everything.
5:19 So that is the UI that we're working with. And when I clicked it, you might have seen some flicker down there, maybe there that time.
5:27 That's the activity indicator, but it so quickly says 404 that the activity indicator just goes away.
5:34 All right, so our job is going to be to write the endpoint that handles this form submission right there over to the server.
5:45 And then we're actually gonna call Lemur from there, create that new chat like we did, set the answer, and then return the answer to the user.
5:53 And that'll be the entire AI chat feature, which is going to be amazing. I'm gonna have so much fun with it.

Talk Python's Mastodon Michael Kennedy's Mastodon