Explore building intelligent web applications by combining Python, Flask, and OpenAI's powerful ChatGPT API. Dive in to learn the essentials and create an AI-driven art appraisal app.
Key Insights
- Discover how to create web applications using Python's Flask framework and connect them to OpenAI's ChatGPT API, demonstrated through the ArtNink antique appraisal app.
- Understand the prerequisites, which include basic Python knowledge, familiarity with HTML, CSS, and optional JavaScript skills; advanced data science or Flask experience is not required.
- Learn about necessary setup steps, including installing the free VS Code editor, obtaining an OpenAI subscription ($20/month), generating an API key, and purchasing OpenAI token credits.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
Hello. Welcome to this Python for AI course. My name is Brian McLean.
Thank you for joining me. In this course, we're going to learn how to build web apps using Python's Flask server and the OpenAI API, better known perhaps as ChatGPT. In this course, we're going to start from very basic fundamentals.
There's not much in the way of prerequisites, although I will get into those. You will need the class files which you can download. You're also going to need to have VS Code installed.
That is a free editor called VS Code, which you can Google, free install, very simple setup, Mac or PC, works great. I'm going to just show you my app, the web app version of it. It is called ArtNink.
The way it works is the user browses to an image or images of an antique collectible or other work of art and submits it for analysis to the AI. We'll try this chair, this Windsor chair, and we can do more than one image, which of course you would always want to have if any human were analyzing something. Think of AI as super smart, yes, but also like a human in a way.
They're that smart. They would like to see more than one picture of whatever it is. This is trying to appraise an antique.
It's going to give you an age, evaluation, other details. It would like to have more than one image, just like a professional expert would like to have more than one image. Here we go.
It's probably going to come back and say, Windsor chair with knuckled hands, late 18th century. There you go, late 18th, early 19th. There you go, hardwood.
Didn't mention the knuckles there, but it's pretty detailed here. Authentication, it thinks it's real. Here are all kinds of other appraisals that I've done or that other users have done.
We're not going to be learning how to do this all in the back-end and save it to databases and such, but in this course, we will learn on the front-end how to connect to the OpenAI API. Hope that's inspiring. The app is free on the App Store, Art Mink, Mink like the animal.
Let's just dive in now. The course is Python for AI apps. Inside the course folder, you do have a book, PDF, which covers a good chunk of the course.
Now, let's discuss the prerequisites quickly. You would need some fundamental Python programming skills. You don't have to be the world's greatest programmer, but you do need to know some stuff.
Otherwise, you'll just be bewildered looking at all this code. You do not need advanced Python knowledge. However, you don't need to know Flask yet.
You don't need to know data science, libraries even for that matter, but it would be helpful. Also helpful but not required would be some knowledge of HTML and CSS. We're building web apps in the browser after all, and the structure of the page is HTML and the styling is CSS.
Some JavaScript fundamental programming skill on the front-end, how to make a button click call a function, fundamental basics. You don't need any back-end JavaScript node or React. Even if you don't know any JavaScript, again, not required.
Real helpful, but we'll let you slide if you just have some Python. It would also be great if you'd ever use ChatGP just as a casual consumer. Have you ever gone to openai.com, chatgpt, and just ask it a question? That would be useful as well.
You can always do that later. Now, as far as required setup, we do need VS Code and you will need, which you can download, you can just type, go to Google, download VS Code. The first choice, Windows or Mac, click, it'll walk you through the setup, super straightforward.
Now, here's something that's a little more involved. In order to do this course, we're going to be in this course, we're going to be connecting to what is called the OpenAI API, that is the Application Programming Interface. Sending requests, receiving responses, like you just saw with that antique that I submitted images of.
I submitted pictures, that was my request. It provided a detailed report. In order to do that, first of all, you need a subscription to OpenAI, which costs $20 a month, and you need an OpenAI key for your project, which would be free once you have a subscription.
Then on top of that, you have to pay for what are called OpenAI token credits. You don't need too many, a few dollars worth would be sufficient. But if you don't have this, it won't work, you won't be able to do these apps at all.
Now, when I teach the course at Noble Desktop in New York City, I just provide students with it my own. I just make an API key from my own account. I let them use my token credits, it's pretty cheap.
But for you, you might need to go do all this or otherwise get set up. Perhaps your school or institution or workplace will provide you with that. Sometimes it's just a temporary key to get you through the course, someone can provide you with.
But we will take a moment to look at how to get an account, generate an OpenAI key. We're not going to get into the purchasing credits right now, but I will show you this part. Open up this link and I'm already logged in.
If you subscribed and we're paying your 20 bucks a month, it would take you right here. It already knows me, that's me. So I'm going to create a new secret key.
It's not going to be so secret in a moment because anyone watching this will see it. But by the time you're watching this, this key will have been deleted, okay? So it's not going to work. This is just for the course demonstration purposes.
I'm going to create the secret key and then I'm going to copy it. And then I'm done. And there's the key along with my other ones that I have.
So what we're going to do now is go to VS Code, which you need to install. Assuming you've installed it and you're ready to go, you launch VS Code and then you go File, New Window. And choose Open Folder or click that little folder icon and you're going to browse to the folder and hit Open.
And there you go. And I don't need that and I don't need that. And here we are.
I have opened the project folder pointing at the class files, which you need to have as well, right? The class files for the course. I'm not sure if I mentioned that, but there are some files that you need. So you download, unzip the files and then you point to them.
Open Folder, right? You browse to the folder, click on it and hit Open. You can back up and watch that again if you need to. We have a Done folder and then a Start folder with much less stuff in it.
So I've got this API key file, .txt file. I'm just going to paste that API key. We won't need that for a while, but when we do need it, we'll come back and get it here.
We have a basic HTML page to start. I'm just going to launch that. Right now it's just a little static welcome page.
And we've got some text that we'll get into later. This text is written in what's called Markdown. It's kind of like a README file format.
It's just a bunch of FAQ style text that might be associated with a website. It's for our fictitious tree nursery website. So what we're going to do is interface with ChatGPT, right? We're going to build an app where ChatGPT is sitting as a chatbot on your website, on your webpage.
But of course, ChatGPT isn't going to know about your tree nursery business, right? We're going to supply all this data to ChatGPT in our prompt when we send a request. So the consumer will be asking, hey, do you sell apple tree saplings? And it'll be like, yeah, sure. And then it'll actually be able to mix in generalized knowledge.
So like, what's the best climate to plant my apple tree? Do they need a lot of sunlight? Like things that aren't even in there or in here, it would know because it just has this great, fast, generalized knowledge. We've got a little bit of setup. There's like one image, AI-generated, cutesy bunny.
So a little bit of CSS for our site so it looks nicer. We're not going to get into writing a lot of CSS in this class. It's kind of outside the scope.
It's helpful if you know some HTML and CSS, but you can get by actually without that, as I mentioned. And the CSS images, JS, and text all live in what is known as a static folder, as they do here. But the index page needs to live in what is called a templates folder, which we can actually go ahead and make right now.
If you click on your, and it's also good, this is your first time in VS Code. You've got to know this stuff, so you may as well look at it. To make a file, here, let's look at how to make a file.
We're going to, let's just take this API key. I'm going to junk this file and do it over. So click, that's new file.
We're going to say API key. We're not even making an HTML file. We'll just make a TXT file and then paste and save.
Now you know how to make a file. Now we also need a folder. Clicking on start, we're going to make a new folder, and we're going to call it templates.
So the way a Flask application works is you keep your resources, your images, and your CSS and JavaScript in a static folder, and you keep your HTML in what is called a templates folder, and we're going to drag our index 01 HTML into the templates folder, move it there. Now you've seen how to make a file, make a folder, and additionally, how to drag something into the folder. Back to the book.