Build An Audio AI App Transcripts
Chapter: Tour of Starter App
Lecture: Tour of Code
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
All right, let's get our bearings in this code and see how everything works, and then we'll start adding features.
0:05
Notice we have our virtual environment still active on the right. I'll dive over there and cover it back up.
0:11
Get out of the way of the project view on the left. We have a couple of important moving parts. We saw that we're working with MongoDB
0:19
based on Beanie and Pydantic. We're working with FastAPI and Assembly AI SDK. Most of the FastAPI apps start this way. They have a main.py.
0:31
Close this up for a sec. And it even includes the way to start it up here as well if you don't have the readme. So there's a couple of things we do
0:38
to configure our API app here. Say configure routing. We want to be able to serve web pages, not just APIs out of FastAPI,
0:48
so we mount a static route for things like CSS and images and so on. Then we have home views. We have account views and podcast views.
0:58
This is a way to categorize and break up our code so it's not just one stupid big main.py or app.py with everything in it.
1:07
No, we're gonna have stuff to do with APIs and AI. We'll have stuff to do with home pages and podcast views, all that stuff organized.
1:17
And these live over in the view section. So for example, let's go to the podcast view down here. If you just go to /podcasts,
1:25
this is gonna give you a list of, I think the ones that are popular, and then /podcasts/followed, so this is Discover.
1:34
This is the ones that you follow. And here's the host. If you're on the Discover and you submit a new one, you can see it's coming in and it says,
1:46
we're gonna try to find whatever URL you specified. And we have this service that is quite intense that goes, discovers the HTML page,
1:56
pulls out the RSS feed meta tag, then uses the meta tag to get the RSS feed XML itself, and then parses that with a whole bunch of variations
2:06
'cause there's standards that nobody can agree on, apparently. So that's what we got going over there. And then for example, here we have this HX.
2:17
I'm just using HX to tell me what it's about. This is a HTMX request. Remember when I click the little follow button,
2:23
it turned into followed or following. It ran this code behind the scenes kind of magically the way it did. Okay, so we have these different ways
2:32
of organizing our code and these, you know, like the home page, this is just slash index. And then we're using a template over here
2:41
in the templates folder. And each categorization of the views, like home or podcast or whatever, gets their own section.
2:49
So over home, we have an index and podcast. We have details, episodes, following, discover and so on, right? Here's the HTML for that.
2:59
So our templates match very much close to our views. And you also saw inside the views, like in the podcast one here,
3:04
there's a complex data exchange that happens sometimes, especially when we're passing in data. So instead of making this code super disgusting
3:16
and just busy and full of details, I'm following what I'm calling a view model pattern. And again, organized like the templates, view models,
3:24
and then in the view models, we have podcasts. So we go to the podcast and then the URL is followed. So we have followed podcasts view model.
3:32
And in here, this thing is storing the data that's exchanged between the HTML and the Python. Now, normally this would probably have all of it
3:43
just happening in the constructor, but because Python cannot have asynchronous constructors in our data layer, as well as fast API forms
3:53
that must be asynchronous, we had to break this into two sections, okay? So it'll do things like go to the form that was posted and get the URL.
4:01
And if there's not a URL, it says, you can't follow a podcast, discover a new podcast that has no URL, stuff like that.
4:08
So view models organized like this, views, drive templates and drive view models, they're registered through routes in the main.
4:16
Then we have a couple other things, grab bag of stuff like cookie authentication and just convert to web URLs,
4:24
store the secrets that we put in our settings file. We have our data layer. For example, here's what a podcast looks like in Beanie.
4:33
A Beanie document is just a pedantic document if you haven't seen that. So it has an ID, a title, a created date
4:39
and the last updated date that is defaults. And then it has a bunch of details about it. And then they also have episodes
4:46
and an episode has things like an episode good, episode number, but they're not always there. So it's optional and so on. And then we just say, look,
4:55
this is where it goes in the database. This is our, it's indices and so on. So really nice, clean way for us to work with that.
5:01
And then the last thing is the services. And these are not services like APIs or HTTP services. These are just parts of our code that provide services
5:15
through the rest of it, I guess. Like there's stuff grouped around AI and there's stuff grouped around search.
5:21
And users, so for example, the user service, it can create an account. So instead of putting that code somewhere, we just say, what do you need?
5:29
You need a name, email, password, whether or not it's an admin. And then, and it comes and it goes
5:34
and creates one of these users that goes in our database. And then it calls save, says it was created
5:39
and then it gets back the value out of the database. Technically, this should be good enough to just return,
5:45
but there's like a really fresh new version of it exactly as the database sees it. And it'll run queries like find me an account by email.
5:54
And here's what a database query looks like for MongoDB in Beanie. User.find1, user.email equals email. Of course, we normalize that to be lowercase
6:05
and without spaces if they typed in extra spaces. All right, so that's the services. And we'll play with those later as well. Well, that's it.
6:13
And I don't know how much more there really is to show you. We'll get into some other pieces like how does a little HTMX work
6:20
when we actually put it into place for probably transcripts is gonna be the first thing that we're gonna use HTMX for
6:27
the further background work that we're gonna have to run. But few things we didn't cover, but this is the code. You can start it up and play with it
6:35
or you'd rather just follow along. We'll do that really soon. We'll get on to adding our first feature.