Build An Audio AI App Transcripts
Chapter: Feature 4: Chat Q and A
Lecture: Enable Chat UI
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Here we are back on one of the podcast episodes, and we have Create Transcript, Create Summary, both of which are well known to you at this point.
0:09
We've implemented those features, we've used them a lot, but look at this, Enable AI Q&A, Question and Answer. So this is where we're focusing
0:19
so that we can create some new part of this web app where we talk to the LLM. It's not super different, actually, than this Create Summary one,
0:31
or maybe even the Create Transcript. So our first task here is going to be to go in and make this button dynamic,
0:41
whether or not it actually is enabled for AI or whether it is not. Right now, it doesn't matter. It just always looks like this
0:47
'cause it's just static HTML, okay? And what does it need to be enabled for AI? Well, honestly, it just needs to have a transcript,
0:56
but the user don't, they don't care about like the implementation details. They don't necessarily wanna go and say,
1:02
Well, first I know that if I wanna talk to it, first I need to create a transcript. And is it better if I make a summary or not? I don't know.
1:08
And then we just want them to push this button if there's no transcript, and then we'll take them over to chat, okay?
1:15
So that's what we're gonna do as the very first thing here. And that's in this episode HTML page right here.
1:25
So if we look at this, here's the create transcript one. There's two parts, and this is it. The first one says we have this indigo button,
1:33
and it says we're gonna kick it off, and we're only gonna show this enable or create the transcript feature
1:41
if there's not already a transcript that we're linking to. On the other hand, we have this just simple straight button that says view transcript if,
1:50
this is how condition right here, if we already have it done. So same basic thing down here. I'll copy this so it looks kind of the same.
1:59
So down here, let's put this BR at the end of either of these. Well, first let's do this kicking off of this chat. So it's gonna be very, very similar
2:12
to transcription, isn't it? So down here, we're gonna put, get instead of start transcribe this podcast, this episode.
2:21
Remember, this is actually a variable we're passing. So we'll just say chat. That's the third action.
2:26
Okay, and this will, that should do it right there. And then the other one is we want to, when this is actually done,
2:36
and when there actually is a chat to go to, we don't wanna go to the transcript URL. Let's just go to,
2:44
we'll make it look the same as viewing the transcript, which is, I'll just bar it over here so it looks exactly the same. So what do we have there?
2:53
We had podcast transcript. So here let's have podcast/chat, and the rest goes like that. And view transcript, no, we'll just say chat with episode.
3:08
Now, look back over here in the services. You see the background service, I added this ability to say worker enable chat.
3:17
And if we go to there, it just says actually do the chat. So very much like the transcript, we should be able to click this button.
3:23
It should go through the same process and then just say it's done immediately. All right, so let's go and run that and see what happens.
3:31
Back over here, refresh, nothing happened. So right now, should be able to do this. It should do their HTMX kickoff, preparing chat. Hang tight.
3:45
Awesome, it's done. Why did it say preparing chat? Why did it already know that? Let's see over here in the view models,
3:52
we have our AI start job down here. Right, if the job action is transcribing, it does that. If it's summarizing, it does that.
4:01
If it's preparing, it does that. And then in the check, similarly, the response that we said is start chatting and it's podcast/chat, just like we did.
4:11
So over here, it says start chatting. Now, this link will actually take us somewhere. I'm not gonna have you write that HTML. It's not really worth it.
4:20
However, we don't actually have the work done 'cause if I refresh it, it doesn't stick, right? So we didn't actually do any work.
4:29
As you saw, it says actually prepare the chat for an episode at Assembly AI. So we've gotta do that next, but we've got our UI structure in place.
4:39
This sort of workflow here of kick a thing off with HTMX, pull it, and then express like that's done or reload to do it or go view it, whatever.
4:49
We've been doing that this whole course. This is the third feature we added. So no mystery there, but I just didn't wanna drop that in with you
4:57
without you being familiar with it. So there we go. That's step one to getting our AI chat kicked off.