-: Hey, I'm gonna show you
how to create a basic web app
that calls OpenAI and does some AI tasks.
So the stack we're using is Flask in HTMX.
I find it's the simplest, it's all in Python,
so it's much easier for people who have
primarily been coding in Jupyter Notebooks.
So this is the application which gonna say, put in a topic
and it'll generate a joke or generate three jokes
and then you can rate them.
Here's some jokes about religion.
You can say, no, that's not very funny.
That one is, that one's not funny.
And that will all go into a database.
So you'll see what are the likes and the dislikes,
and you can also see what topics people had used.
That's the application.
And you can see it's in real time as well, which is nice.
We're not refreshing the page.
If we just say travel, it's spinning.
We're not refreshing the page here.
And then it's pulling in three new jokes
and updating the HTML for me.
This is very similar to React,
but without any of the real overhead.
You don't have to learn JavaScript, which is nice.
And you can see when I click on these things,
then they are also automatically updating.
Really helpful.
Now let's see the code.
I'm just gonna explain how the code works
and you'll be able to use this code as the base
for whatever it is you want.
The first thing, first thing's first,
we have an app.py, and that's where all the logic happens.
So this is where you put all your functions.
We get in an OpenAI client
and we create a connection to SQLite,
which is this database.db
and that's how we save jokes to the database.
This is the simplest possible database.
I have asked ChatGPT to write all of this code.
It's very straightforward.
If you want to modify this, you can just paste in
and say, okay, I want something that would
do something else.
If you wanted to change it from jokes
or whatever, you could ask ChatGPT if you don't know SQL.
But basically this just creates the table
if it doesn't exist,
and then we have different routes for the homepage
or generate jokes or whatever.
So the form takes in a topic and then we call OpenAI
and we get the response.
This is where you put your prompt.
And so this is a very simple prompt.
Tell me three jokes about topics separated by dash.
And then I have very simple passing here.
This just splits of jokes by dashes
and then it saves them into the database.
And by default we're just saving them without any
likes or dislikes.
But then when you click on Great Joke,
then that's where it's gonna update it.
So it's gonna update that joke with the joke ID
and it's going to increment the likes
or increment the dislikes for that joke.
So that is how it works.
Now where HTMX comes in, which is super interesting,
is that with HTMX, you don't use JavaScript
to update the page, you just send back the updated HTML.
You see here I'm rendering a template called like.html,
it's underscored, and these are called partials.
This is the I Liked It button.
This is different from the actual button itself.
If we look at, say like a joke,
here we have this button here, rate_joke,
and it's an unhappy, that's a thumbs down.
And then this one's the thumbs up,
and they both go to the rate_joke endpoint.
So this is part of HTMX.
We're saying, okay, let's post to rate_joke
and we're going to give it the ID of loop.index.
So that's the ID of the joke.
And then we're gonna give it a rating.
So it's gonna pass that through to HTMX
and then HTMX is gonna, in here, if we look,
it's going to update that when it hits the rate_joke,
it's gonna get the ID and the rating
and then it's gonna update that into the database.
And then it's gonna send back the updated HTML.
So you can see, this is the updated HTML.
That's a button that has been liked.
And if we, maybe we just open up our console here
so we can see.
If we go to network,
you can see what HTMX is giving back here.
So here we go, liked or disliked or whatever.
When you click into that,
you can see there's the HTML that it got back.
Cool.
And that's how it knows that this is liked or disliked.
That is how a HTMX works and Flask, and it's really simple.
We just have the app.py has the different pages
and different routes and then it saves into a database.
If you want to run this, you just press,
you just install Flask, pip install flask,
and openai, and then that should be all you need.
And then you should be able to just type flask run
and it will run on the survey.
You just visit this URL and then you have it running.
So hopefully that is giving you a bit of a sense
of how to make a simple prototype
for the type of thing that you are doing.
You need an OpenAI key as well,
or you can set that up in the .env file.
So you just have OPENAI_API_KEY equals,
and then your API key saved in .env.
And then load_dotenv is gonna pull that in
for you further down.
So really straightforward in order to get the API key,
that's to make it work with your own stuff.
Yeah, nothing really else to say about this
apart from if you wanted to look at the database,
I recommend going to DB browser for SQLite
and then you can open up the database here.
So if I go to the project and click on database.db,
and you can see all the different data.
So you can see all the jokes that have been told
and then all their likes and dislikes.
Cool.
That is a really quick whistle stop tour
introduction to that code.
I'm gonna share this code for you to use as your basis,
like you can make your own if needed.
But yeah, this is a pretty easy stack to learn.
This isn't a fully fledged tutorial
because you have to know a little bit about Flask
or a little bit about SQL,
but I'll save those topics for another day.
Hopefully this just gives you the mental model of
how you could easily make an AI webpage
that returns something whether it's,
this isn't a chat app obviously,
but it's using some sort of AI workload
and then saving that into a database
and then displaying it dynamically.
I think this is just a useful stack to learn.
Hopefully that's good.