Build An Audio AI App Transcripts
Chapter: Feature 2: Search
Lecture: Search in Full Glory
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, those results were fun and it shows, oh my goodness, this really is working. Let's go and make this look a little bit nicer.
0:09
Okay, so I have some pre-designed HTML I'm going to put in here that is basically the same thing. Let me just show you.
0:17
It says up at the top, if there's no episodes and you are trying to search for something, well, that means there's just no results.
0:28
And we'll make sure that there's at least some results here, which is any of the episodes. And then we'll go through each podcast.
0:34
We send over the podcast separately and we do this cool little design with the image of the podcast, the title and its subtitle.
0:42
And then same thing, episodes for each one of those, we put in a little bit of information about them.
0:47
And at the very end, we say how long it took for the search to run.
0:51
Just so you get a sense of like how fast is this cool little search engine that doesn't even need a separate server.
0:58
Okay, and now the server side to make that go is we're not going to do this raw results.
1:02
Instead, we're going to say view model equals search results view model. And what goes in here?
1:09
Well, you guessed it, there's a request one can spell and search text. So we got to do that.
1:18
And then we say await VM dot load, turn VM dot to dictionary, right? This is all the data that the search results that HTML needs.
1:28
Let's just real quick look at this. It's doing the same thing.
1:32
Although it's storing the time, it runs the search just like we did stores those two values,
1:38
creates a little lookup for when you're iterating over the episodes.
1:43
And you have only the episode ID, or sorry, the podcast ID, not the podcast itself. You want the title, for example.
1:48
So it creates this little dictionary to make that super fast and easy. And then it talks about how long it takes. Let's try it again.
1:55
This should be interesting. I should not even need to refresh the page. I'm just going to put FastAPI and see what happens. It's so good.
2:06
HTML is so good. All right, look at that. There's the podcast, goes a little image.
2:12
And there's the subtitle that we've registered with iTunes or from the RSS feed.
2:16
And then these are the episodes that talk about FastAPI, which ones talked about post Gris. There you go.
2:23
Look at that, 26 milliseconds to search all that data. What about Emma? There's this best of Emma Stone.
2:33
Let's go over here and we can actually, oh, it already has the transcript. Great. So this will let us do something really interesting here.
2:40
We could come over and check this out. Let's just grab a random section. Show that we're actually using the transcripts.
2:49
The golden rule is extremely applicable to me this day. I'm going to copy that. And over here, you'll see Emma Stone.
3:00
If we just look down, the original show notes have nothing about this. Let's go over to the search and we can search for Emma again. There they are.
3:11
But let's search actually for that exact phrase that came up in the speech. The golden rule is extremely applicable to me this day. Check that out.
3:21
We can put Emma, not that, Emma. There you go. That appears in one part of the podcast. This exact phrase appears in the transcripts.
3:29
And there you go, 36 milliseconds. We went through everything, searched all these keywords and found it. So good. Yeah, really, really nice here.
3:39
One final thing I don't like when it's empty that says, if I refresh it, that search results here. That was just while we were playing with it.
3:48
So let's just go and take that out. Now you do this. If you put, look at that. But if you have no results, like that, it'll just say no results found.
4:02
Perfect. I would say the search feature is done. And you can see how FastAPI, HTMX make it awesome. But the real heart of it, well, and MongoDB.
4:12
But the real heart of it is that we have all this data beyond just what shows up in the silly episode pages. Although we have pretty good show notes.
4:20
There's not even here, there's not that much in the show notes here, is there? I guess it's a little bit of a short one.
4:26
But generally, even with that, it's just a few paragraphs. So all the extra stuff we can bring in really makes the X-Ray podcast app live up to its
4:36
name, right?