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.