Build An Audio AI App Transcripts
Chapter: Feature 1: Transcripts
Lecture: Using the Transcript in the UI
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Are you ready for the grand finale? So what happens if we click this transcript button?
0:07
It turns out the website already knows how to take the thing in the database and render it. Let's give it a click. What? There it is. Okay.
0:15
So a new cloud computing paradigm at Python Bytes.
0:18
In this episode, we switch everything over to like one giant Docker cluster for 15 apps instead of a bunch of servers.
0:24
It's a lot of fun, but let's look at this. So notice the little green bar goes over this and we have a different time.
0:31
If I click, no place for podcasting. Not a place for podcasting. Not a place for podcasting. So I'm hanging out here downtown in a... How about that?
0:41
If I click here, but Michael, what do you want to tell us? But... Michael. Michael, do you want to tell us why you're... You want to tell us why?
0:47
You probably can't hear that playing back very well, but it plays right wherever you are. You just go in here and you click it. Boom.
0:55
And you can see how accurate the transcripts are by just clicking around. That is a super cool feature. Let's just review real quick how that works.
1:04
So over here you can see the URL is podcast transcript podcast name episode episode number. Right there.
1:14
So all it does is comes in and create one of these episode view models, loads it up, and then renders it out on this piece here.
1:23
Most of the magic is right here. This constructor just stores the value, but it's where load data happens that it gets interesting.
1:30
So we just get the podcast by what's passed in, the episode by number that's passed in. There's a summary. We grab that.
1:37
We don't have the summary right now. That's another feature coming, but so this is empty.
1:42
And then it just says, give us the transcript text for an episode. So let's jump over and see that.
1:48
This is going to return a sentence which has a start time and text. So you can see basically one of those lines there in the green.
1:57
It also caches it so it can be faster over and over if it asks for the same thing again. So it comes in and says, give us the words.
2:07
This just goes to the database and pulls back that transcript record we saved
2:11
and just returns just the words in an efficient way, not selecting other things.
2:16
And then down here it just goes through and it basically says, I'm working on a sentence right now. And then ask, is this word the end of a sentence?
2:27
If it is, we're going to finalize the sentence and store it and then start over. Otherwise, just keep piling on active words.
2:36
So down here, is it the end of a sentence? So it just says, does the thing end in punctuation?
2:45
So is it a period, a question mark, or an exclamation point? If it is any of those, the last character, then it must be the end of a sentence.
2:54
There's probably a more advanced way we could do this, but actually it looks pretty darn good, doesn't it? I mean, look at this.
3:02
It was 13, now it's 18 degrees Fahrenheit, so negative 9 Celsius if you prefer. Boom, period, new line.
3:08
Celsius, no power, four or five days, period, new line, new sentence. So that's what this does.
3:15
And then this UI here just loops over, show the time, show the text, and then it has a little JavaScript that says,
3:22
play this thing at whatever time in seconds that is. Remember, we can convert it from milliseconds to seconds.
3:29
End to end, I think we've got a really cool feature. We're over here, we're checking out our podcast that we're following.
3:35
I didn't follow that one yet. Maybe I'll go ahead and follow it. Now it's followed. Come over here and I see a look.
3:42
This one has a transcript. Let's view it. There it is. Back out of the database straight away. So really, really cool feature.
3:50
I really like how this came together.
3:52
It's only a little bit of what you can do with Assembly AI, but it's going to be the foundation of what we're doing.
3:58
Later on we'll do some summaries and chats, but often those are going to be based on the transcript.
4:03
Like I said, it's the foundation for adding more than just show notes and episode names to our story of our X-Ray podcast.
4:12
It's where the X-Ray comes from.