WEBVTT 00:00.570 --> 00:02.430 -: Hey, I'm gonna show you 00:02.430 --> 00:04.800 how to create a basic web app 00:04.800 --> 00:08.190 that calls OpenAI and does some AI tasks. 00:08.190 --> 00:11.460 So the stack we're using is Flask in HTMX. 00:11.460 --> 00:14.130 I find it's the simplest, it's all in Python, 00:14.130 --> 00:16.560 so it's much easier for people who have 00:16.560 --> 00:19.170 primarily been coding in Jupyter Notebooks. 00:19.170 --> 00:23.220 So this is the application which gonna say, put in a topic 00:23.220 --> 00:26.008 and it'll generate a joke or generate three jokes 00:26.008 --> 00:27.960 and then you can rate them. 00:27.960 --> 00:29.550 Here's some jokes about religion. 00:29.550 --> 00:31.860 You can say, no, that's not very funny. 00:31.860 --> 00:33.660 That one is, that one's not funny. 00:33.660 --> 00:36.030 And that will all go into a database. 00:36.030 --> 00:38.580 So you'll see what are the likes and the dislikes, 00:38.580 --> 00:42.000 and you can also see what topics people had used. 00:42.000 --> 00:43.530 That's the application. 00:43.530 --> 00:46.320 And you can see it's in real time as well, which is nice. 00:46.320 --> 00:48.270 We're not refreshing the page. 00:48.270 --> 00:51.377 If we just say travel, it's spinning. 00:51.377 --> 00:53.610 We're not refreshing the page here. 00:53.610 --> 00:55.470 And then it's pulling in three new jokes 00:55.470 --> 00:57.420 and updating the HTML for me. 00:57.420 --> 00:59.370 This is very similar to React, 00:59.370 --> 01:01.380 but without any of the real overhead. 01:01.380 --> 01:03.300 You don't have to learn JavaScript, which is nice. 01:03.300 --> 01:05.190 And you can see when I click on these things, 01:05.190 --> 01:08.760 then they are also automatically updating. 01:08.760 --> 01:09.593 Really helpful. 01:09.593 --> 01:12.330 Now let's see the code. 01:12.330 --> 01:14.970 I'm just gonna explain how the code works 01:14.970 --> 01:17.820 and you'll be able to use this code as the base 01:17.820 --> 01:19.500 for whatever it is you want. 01:19.500 --> 01:21.393 The first thing, first thing's first, 01:22.449 --> 01:26.880 we have an app.py, and that's where all the logic happens. 01:26.880 --> 01:28.830 So this is where you put all your functions. 01:28.830 --> 01:31.470 We get in an OpenAI client 01:31.470 --> 01:34.260 and we create a connection to SQLite, 01:34.260 --> 01:36.428 which is this database.db 01:36.428 --> 01:40.740 and that's how we save jokes to the database. 01:40.740 --> 01:42.780 This is the simplest possible database. 01:42.780 --> 01:45.090 I have asked ChatGPT to write all of this code. 01:45.090 --> 01:46.230 It's very straightforward. 01:46.230 --> 01:48.210 If you want to modify this, you can just paste in 01:48.210 --> 01:50.820 and say, okay, I want something that would 01:50.820 --> 01:52.830 do something else. 01:52.830 --> 01:54.690 If you wanted to change it from jokes 01:54.690 --> 01:57.540 or whatever, you could ask ChatGPT if you don't know SQL. 01:57.540 --> 01:59.860 But basically this just creates the table 02:00.960 --> 02:02.160 if it doesn't exist, 02:02.160 --> 02:05.580 and then we have different routes for the homepage 02:05.580 --> 02:07.320 or generate jokes or whatever. 02:07.320 --> 02:11.640 So the form takes in a topic and then we call OpenAI 02:11.640 --> 02:13.440 and we get the response. 02:13.440 --> 02:14.730 This is where you put your prompt. 02:14.730 --> 02:16.680 And so this is a very simple prompt. 02:16.680 --> 02:19.020 Tell me three jokes about topics separated by dash. 02:19.020 --> 02:20.910 And then I have very simple passing here. 02:20.910 --> 02:23.460 This just splits of jokes by dashes 02:23.460 --> 02:26.910 and then it saves them into the database. 02:26.910 --> 02:29.700 And by default we're just saving them without any 02:29.700 --> 02:30.960 likes or dislikes. 02:30.960 --> 02:33.480 But then when you click on Great Joke, 02:33.480 --> 02:34.890 then that's where it's gonna update it. 02:34.890 --> 02:38.130 So it's gonna update that joke with the joke ID 02:38.130 --> 02:40.230 and it's going to increment the likes 02:40.230 --> 02:43.440 or increment the dislikes for that joke. 02:43.440 --> 02:46.003 So that is how it works. 02:46.003 --> 02:49.860 Now where HTMX comes in, which is super interesting, 02:49.860 --> 02:52.620 is that with HTMX, you don't use JavaScript 02:52.620 --> 02:56.280 to update the page, you just send back the updated HTML. 02:56.280 --> 02:59.100 You see here I'm rendering a template called like.html, 02:59.100 --> 03:01.470 it's underscored, and these are called partials. 03:01.470 --> 03:03.450 This is the I Liked It button. 03:03.450 --> 03:06.030 This is different from the actual button itself. 03:06.030 --> 03:07.590 If we look at, say like a joke, 03:07.590 --> 03:10.932 here we have this button here, rate_joke, 03:10.932 --> 03:14.370 and it's an unhappy, that's a thumbs down. 03:14.370 --> 03:16.140 And then this one's the thumbs up, 03:16.140 --> 03:18.900 and they both go to the rate_joke endpoint. 03:18.900 --> 03:20.850 So this is part of HTMX. 03:20.850 --> 03:24.014 We're saying, okay, let's post to rate_joke 03:24.014 --> 03:29.014 and we're going to give it the ID of loop.index. 03:29.130 --> 03:31.380 So that's the ID of the joke. 03:31.380 --> 03:34.230 And then we're gonna give it a rating. 03:34.230 --> 03:36.260 So it's gonna pass that through to HTMX 03:36.260 --> 03:39.963 and then HTMX is gonna, in here, if we look, 03:39.963 --> 03:43.440 it's going to update that when it hits the rate_joke, 03:43.440 --> 03:45.330 it's gonna get the ID and the rating 03:45.330 --> 03:48.510 and then it's gonna update that into the database. 03:48.510 --> 03:51.870 And then it's gonna send back the updated HTML. 03:51.870 --> 03:55.170 So you can see, this is the updated HTML. 03:55.170 --> 03:57.270 That's a button that has been liked. 03:57.270 --> 04:01.890 And if we, maybe we just open up our console here 04:01.890 --> 04:03.063 so we can see. 04:04.042 --> 04:05.640 If we go to network, 04:05.640 --> 04:09.150 you can see what HTMX is giving back here. 04:09.150 --> 04:12.240 So here we go, liked or disliked or whatever. 04:12.240 --> 04:14.190 When you click into that, 04:14.190 --> 04:16.950 you can see there's the HTML that it got back. 04:16.950 --> 04:17.783 Cool. 04:17.783 --> 04:20.013 And that's how it knows that this is liked or disliked. 04:22.350 --> 04:26.670 That is how a HTMX works and Flask, and it's really simple. 04:26.670 --> 04:29.370 We just have the app.py has the different pages 04:29.370 --> 04:32.850 and different routes and then it saves into a database. 04:32.850 --> 04:35.160 If you want to run this, you just press, 04:35.160 --> 04:38.962 you just install Flask, pip install flask, 04:38.962 --> 04:43.860 and openai, and then that should be all you need. 04:43.860 --> 04:47.550 And then you should be able to just type flask run 04:47.550 --> 04:49.170 and it will run on the survey. 04:49.170 --> 04:52.200 You just visit this URL and then you have it running. 04:52.200 --> 04:55.350 So hopefully that is giving you a bit of a sense 04:55.350 --> 04:58.110 of how to make a simple prototype 04:58.110 --> 05:01.221 for the type of thing that you are doing. 05:01.221 --> 05:04.291 You need an OpenAI key as well, 05:04.291 --> 05:07.530 or you can set that up in the .env file. 05:07.530 --> 05:11.340 So you just have OPENAI_API_KEY equals, 05:11.340 --> 05:13.470 and then your API key saved in .env. 05:13.470 --> 05:16.260 And then load_dotenv is gonna pull that in 05:16.260 --> 05:17.400 for you further down. 05:17.400 --> 05:21.992 So really straightforward in order to get the API key, 05:21.992 --> 05:25.230 that's to make it work with your own stuff. 05:25.230 --> 05:27.810 Yeah, nothing really else to say about this 05:27.810 --> 05:30.960 apart from if you wanted to look at the database, 05:30.960 --> 05:34.405 I recommend going to DB browser for SQLite 05:34.405 --> 05:37.350 and then you can open up the database here. 05:37.350 --> 05:42.350 So if I go to the project and click on database.db, 05:43.243 --> 05:46.200 and you can see all the different data. 05:46.200 --> 05:48.630 So you can see all the jokes that have been told 05:48.630 --> 05:50.700 and then all their likes and dislikes. 05:50.700 --> 05:51.780 Cool. 05:51.780 --> 05:54.845 That is a really quick whistle stop tour 05:54.845 --> 05:56.700 introduction to that code. 05:56.700 --> 06:00.660 I'm gonna share this code for you to use as your basis, 06:00.660 --> 06:02.880 like you can make your own if needed. 06:02.880 --> 06:06.510 But yeah, this is a pretty easy stack to learn. 06:06.510 --> 06:08.640 This isn't a fully fledged tutorial 06:08.640 --> 06:11.400 because you have to know a little bit about Flask 06:11.400 --> 06:13.110 or a little bit about SQL, 06:13.110 --> 06:15.330 but I'll save those topics for another day. 06:15.330 --> 06:17.340 Hopefully this just gives you the mental model of 06:17.340 --> 06:21.023 how you could easily make an AI webpage 06:21.023 --> 06:24.210 that returns something whether it's, 06:24.210 --> 06:25.740 this isn't a chat app obviously, 06:25.740 --> 06:28.560 but it's using some sort of AI workload 06:28.560 --> 06:30.150 and then saving that into a database 06:30.150 --> 06:31.680 and then displaying it dynamically. 06:31.680 --> 06:34.530 I think this is just a useful stack to learn. 06:34.530 --> 06:35.630 Hopefully that's good.