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.

Talk Python's Mastodon Michael Kennedy's Mastodon