Build An Audio AI App Transcripts
Chapter: Feature 3: Summarize
Lecture: Web UI for Summarize
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's go ahead and add this AI summarize feature to our app. Now, we've already done most of the work
0:09
or worked through almost an identical example previously with our transcripts and those sorts of things. So we're gonna apply the new ideas,
0:17
but in a really similar framework. Let's go and just pick one of these. Let's suppose we wanna follow Fresh Air.
0:24
And we go over and check it out and we're like, oh, what do Americans really think about race? Okay, this is interesting.
0:30
And I would, maybe it's interesting. I don't mean these show notes. I don't know how Fresh Air gets away
0:35
with calling themselves a professional organization and having two sentences, but you know, whatever. This is not enough. I need a summary.
0:43
What are the key things they talked about? Is it relevant or no? So I'm gonna click on create summary. Wait a minute.
0:49
Remember it just has summarize, #summarize, so that I could do a thing. We could create the transcript, but we're not gonna.
0:57
We just wanna get this create summary thing going. All right, well, we need to add the UI elements here. Let's jump back into PyCharm.
1:06
We're in a new project here, 03 feature summary, and I've got a new virtual environment active, pip installed all the things. So it's good to go.
1:16
Now, those three buttons we were looking at are right here. Yes, there's four things on the screen, but only three are shown at any given moment,
1:23
and three are fewer in a minute. So this is the button that says create the transcript, and it goes to AI start transcribe,
1:32
podcast ID, episode, episode number. And it has that with HX, which is HTMX, right? So this is only shown if there's no transcript.
1:44
And if there is a transcript, it just says view it, right? So this section, those two kind of play the role of either being able to create
1:51
or navigate to that transcript. Now we wanna do something similar down here, although even simpler still. So let's go down here.
2:02
And right now we just have this hash summarize, which we saw does zip, nothing. So we're going to go and add the same type of deal.
2:13
We have somebody clicks on it, we wanna run a thing. And where are we gonna go? Well, it turns out, let's go look over the AI views here.
2:23
The router is AI start action, not transcribe specifically, but what do you wanna do? Earlier we asked to transcribe this podcast, that episode,
2:34
but this is a action that is a job action. Let's navigate over here. And you can see it's transcribe, summarize, or chat. Sweet.
2:44
So in fact, what we should be able to do is take this, change this from transcribe to summarize, and get rid of that extra stray character down there.
2:56
And this should do it. This should actually come over here and kick off this job. Remember, what is it gonna do?
3:03
It's going to return this job is running, it's gonna check for the job to be completed. And in the view model, if the action comes in as summarize,
3:12
it'll say it's summarizing and view summary rather than transcribing and view transcript. Now it's not going to do this yet. It's not gonna do it
3:20
'cause we haven't written the code to summarize anything, but it will flow through the system theoretically. Let's see how that works.
3:28
We go back here and refresh. And now what happens if we click create summary? Let me make this little down here so you can see.
3:36
Oh, before let's go ahead and set up the search. Don't forget to set up the search in the new one. Remember just over here, run this.
3:46
Skipping ahead, try again. All right, we got it running again. And let's see. What we're gonna do is click create summary.
4:01
And down here you should see that the job is starting. This UI should be replaced with hang tight. We're summarizing it. Let's see how it goes.
4:08
Summarizing, hang tight. Awesome. Guess what? It's done. No, no, it's not. It's done. The summary is done. All you gotta do is reload it.
4:17
And it's not done. So when it's completed, what we're gonna do is before the show notes, we're gonna show the AI summary, right? And this will go away.
4:27
But since we haven't created it, it's not stored in the database. When we reloaded it, it looked, said, no, there is no summary here. Keep it here.
4:34
Keep it like this. So our next action will be to go and actually write the code that uses the assembly AI API or SDK to make the summary happen,
4:48
set it on the record in the database. Then when we reload, we'll get the nice cool view of it. But look how easy that was.
4:55
We already wrote this section here to how to start an arbitrary job, any of them that is a valid job action. And then we already got the running
5:04
and the checking for complete. It's actually cool. I told you we'd be able to leverage a ton of stuff we did before and sure enough, we can.