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 FastAPI 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.


Talk Python's Mastodon Michael Kennedy's Mastodon