Build An Audio AI App Transcripts
Chapter: Feature 1: Transcripts
Lecture: Add the Transcript Actions
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now, we want to run our main file, of course. This may just run in PyCharm. Let's see if I hit run.
0:08
It turns out that I had to install a security update, so I have not yet restarted MongoDB. You must have MongoDB running.
0:14
So let's do that again real quick. Run this command. It's up and going. Perfect. Looks like everything is back and running just fine.
0:28
One thing you may need to do is, it's going to help out a lot, is if you go over here
0:32
and you right click and you say mark directory as, hiding down here, mark directory as, come on, sources root.
0:42
What that does is basically when you say something like from db import mongo setup, it's going
0:49
to look here and say, oh, I see there's a folder called db and in there there's a mongo setup.
0:56
If you don't have that set, then it's going to be a problem. Basically you want this to be the working directory, whatever editor you're using.
1:06
This is up and running. That's great. So it's up and running. Go here, take this off. We want to go just check out any old podcasts.
1:16
I'm logged in and I'm following Talk Python. That one's going to be fine. So let's go over to this parallel Python apps with sub-interpreters.
1:25
It says to do episode action buttons. So what we want to do is we just want to put those buttons there. They're not going to do anything at first.
1:34
We're going to add that functionality, but let's just add that little bit of UI here
1:38
so that we can add those action buttons and then click it together with HTMX into the assembly AI API calls. Okay.
1:47
So what we need to do is go to the details template in the podcast section. Remember my organization over here. So notice this is not colored.
1:57
You can sometimes do a little bit better if you mark this directory as a template folder. And what we're using is the chameleon language.
2:07
I know a lot of people use Jinja. We'll talk about chameleon and Jinja in a sec, but I'm using chameleon because I think it's much, much nicer.
2:15
All right. And over here, we're going to go to episode because this is episode details, not podcast details.
2:22
And in here somewhere is a to-do and it says, all right, what we want is this episode actions.
2:29
We're going to put, replace that section with some plain old HTML. Let's get some room here so we can see it.
2:38
So we're going to have a couple of things. We're going to have a button, a rounded button. It's going to be indigo.
2:44
And we have a hashtag transcribe that doesn't really apply or do anything, but having something
2:50
in the URL means that you get a pointer instead of an arrow when you hover over it. So it looks clickable. It thinks it's clickable.
2:56
We'll wire that up to a JavaScript event in a second. And in chameleon, the way you do if statements is through what's called this towel template
3:07
attribute language where you have conditionals and loops and stuff.
3:11
So we're going to say, if there is no transcript that already exists, we want to show the button that says create transcript.
3:18
But if it's the case that there is a transcript, this will be hidden and we can just say view transcript. So this is where the action is going to be.
3:27
And then later we're going to be able to interact with the transcript there.
3:30
And here's stuff about creating the summary and enabling AI chat or question and answer sort of thing. We'll come back to that later.
3:38
So it's just these first two parts for now. I just put it all together. So we have the pieces there. Let's see what we get if we refresh it. Boom.
3:47
And sure enough, create transcript, create summary and create Q&A because the hashtags they have like little links looking things there.
3:54
Step one, done.