6. OpenAI ChatGPT and DALL-E2 - Python Frontend App Development

hey everyone welcome back in today's video I'm going to show you how to create a python web application using the assistance of some AI tools namely Dolly 2 and chat GPT specifically I'm going to show you how to take the semantic search engine that we built in the last video and convert it to a full web application front end so in the last video we learned the math behind creating this back end so how to create a semantic search engine that searched through all this financial text to show the most relevant results and now we want to actually convert this over to an actual application that can be used by end users whenever we want to productionize or make an actual product we don't give our users a Google collab notebook with a bunch of python code we want to just give them a simple interface where they can type in the Box what they want and get what they need and so this web application is divided up into two components first we have the search box and the search results here and so we're going to use chat GPT as a pair programmer to help us write the python code for this even if we are already know how technically it's going to speed up our process and then secondly we're going to generate some simple logo for our web app using a dolly too and so what that looks like here chat GPT you can ask it some prompts so you need to give it some prompts and this is so easy to use that it almost doesn't need a tutorial you don't need me to tell you how to use chat gbt to tell you how to code necessarily you can just say write a flask application for search and it'll give you some ideas and so it'll generate this simple web application with one endpoint here and render a search results template and then it'll even give you the template here where it presents the search results and so we're going to walk through this process because it's not going to give you exactly what you want it's going to give you some boilerplate to get started with and we can just make a few modifications with this and then it's not magic we just take our logic from our notebook that we prepared earlier and we're going to insert it into this function here make some modifications and customize it until we get what we want and we'll ask chat gbt a few questions when we get stuck the other part of this is that we need to generate a logo and we're going to use a dolly 2 for this so what you can do with Dolly 2 if you haven't used this yet you can type some type of prompt to say what you want and what I typed here is an intelligent owl with a magnifying glass square logo for a modern fintech search engine startup clean design on a black background and it gave me this now is this great is this the best logo I've ever seen no not really it's just okay and it's good enough for this lesson but one benefit of using Ai and automation is that I can actually generate infinite versions of this logo and just choose the best one which is causing a lot of controversy right now should I pay someone who is a professional graphic designer to create one of these logos for me or should I just use AI to generate infinite versions of this for practically free if you want to hear me ramble a bit about this no AI art this controversy that's happening right now I ended up talking for like 10 minutes so I clipped this out and I'm just going to put at the end because I don't want to disrupt the tutorial too much with some long rants what I'm going to do now is just treat these as tools that we can learn learn how to use and leverage and it's up to you whether you believe in using AI generated art or not but I think it's important to understand what these tools are and how you can use them because I just don't see them going away this is just an inevitable technology and the genius out of the bottle as far as pair programming with chat gbt AI is going to help you write programs but it's not magic you can't just type five words and it's just going to give you an entire application that does exactly what you want you need to work on your communication skills your ability to ask for very specific things and guide it to what you want and it's trained on all the language and code in the universe so it knows everything so if it can't produce what you want you're not telling it what to do the correct way so if you're not getting the specific results you want you just need to be more specific you need to ask follow-up questions about error messages and gradually guide it to what you want the conversations won't be the same every time my conversation is going to be different than yours so even though I'm sharing the source code with you here if you asked all those questions the same way it might turn return you a different response so the important part is going through the process of under understanding how to use these tools so let's just try this out and see what it's capable of so I'm on the chat GPT site so right now it's at chat.openai.com and you can just type what you want in the box and you can type a question or command and it will try to give you an answer and it's just like a conversation between you and the AI bot and so I'm treating this like a pair programmer so I have maybe a junior programmer working with me and I'm a senior programmer because I know what I'm doing and I'm asking the junior programmer to just write some basic code for me and I can kind of guide it to what I want but I don't feel like writing this basic code because I'm lazy and here I have this junior programmer that doesn't get tired doesn't need a salary doesn't need a health care you know it doesn't complain doesn't get bored it's just going to do what I tell it to and yeah you can kind of see where this is going for a low-level programming right and so I'm going to say uh write a python flask web application for search okay and I'm just going to say something simple like that not really telling telling it any more detail than that and it says sure here's an example of a simple Search application using Python and the flask framework note I did provide some of my background knowledge here I didn't say just create me in an app right I said python flasks so I know I want to use the Python programming language and from my experience I know how to make a flask web application and so I'm using that and your conversation will be different than mine right and so what's important here is you're not really just copying what I do the chat is customized to you as a person and you your level right and so my guidance and my background knowledge is going to help me work with this at my level but you might type something different maybe you're a python Django developer or a Ruby on Rails developer or a PHP developer and you might have a different conversation and it might reply differently if I type the same thing that you do because this uses some random enforcement learning with human feedback and so this is actually taking in new information people are going to upvote and downvote answers and this exchange is going to change over time it's changing every single day in fact these advances are happening so fast right now when I started this series about a month ago chat GPT didn't even exist and now people are talking about it so much that you know a lot of people are probably tired of it at this point so what I'm going to do now is go over to my chat history so chat GPT recently added this where you could go through all the different conversations you've had with it and so this is the conversation I had to create the Search application that is shown right here so the first thing I did is say write a flask application for a search and it gave me this small python application and then it also told me some a description of the application so the application has a single route search and so I see that route search accepts a search query as a URL parameter so that's the query that comes in the URL and then it says when a user makes a request us throughout the application search is a list of items so there's a list of items apple banana orange mango that's not what I'm searching we're going to substitute our data in for this particular list and then it's going to search this list for the query so it looks through the items and if the query is in this item list and it Returns the item and then it passes those search results to a template called search results.html so where is the search results.html it didn't give me one so I said create an example search results.html template and it said sure So it knew the context of this conversation and it created this little HTML template for me that Loops through the search results and presents them right and then it tells me to use the template in the flask application you need to save it in a templates directory within your application and reference it with the render template function like this and so it says I hope this helps so let's get started with that bit of it so I have a visual studio code editor open right here and I'm going to Implement what chat GPT just told me now in my last video Someone commented and said I didn't explain the Python Programming Concepts quite enough at the beginning the basics and the reason why I don't explain every single concept every single time is I've been making this channel this is the fourth year now and I've actually made like 250 videos at this point on Python Programming and at the beginning people have been following me a long time I actually I walked through flash application development from the very very beginning and talked about the most basic things how to set up your editor create a virtual environment do all these types of things and so I can't just do that over and over again for years and years I need to start with some base knowledge and so if you don't have that basic knowledge then you need to study up on that watch my old videos and I know there's a lot of new subscribers since I released the first couple of openai videos but I just gotta meet you in the middle somewhere and so what I did is created a new folder and then an open one called fin search engine and so I'm naming my application fin search you can call yours whatever you want and then I'm starting a new application right here and then I'm just going to use this code from chat GPT just like this and see if it works already and so it tells me here's the python code and so I'm going to make a new file and I'm just going to call it app.pi with some python code just like that I'm going to paste that in and see how it works so I'm going to hit this play button here and see what happens and it says no module name flash so I don't have flask consults and so I have the background knowledge to know that I need to install flask but if I don't have that background knowledge I can say how to or I can even paste the error I got the error so I can say I got an error module not found error no module named flask it looks like you don't have flash module installed in your python environment to install flask you can use pip just like that pip install flask and that will install flask in all its dependencies I also know that I need to create an environment for installing this flask module and so I'm going to say how do I create a virtual environment and it tells me how to create a virtual environment so I already have virtual and it says install this if I don't have it but I already have python3 so I can do this I'm going to run this command python3-m vem my EnV just like that and now Visual Studio code detects this I'm going to say yes and then it also says activate the virtual environment like that and so I'm going to activate it and then if I look here you can see now I have this little environment here and then now I can run the command pip install flask so I'm going to do pip install flask and there you go flask is installed and so how do I use this application well if I go to my results it says to use this application you need to run it and then visit this URL and so I'm going to try to run it here and it says it's running at Port 5000 and it says to use this application you need to run it and then visit this URL here so I'm going to visit this URL and it says access to localhost was denied so what is that all about and so I'll ask chat TBT I got an error access to localhost was denied and let's see what it tells me so it says there could be several reasons why you're getting access denied error make sure the server is running check your firewall settings and so it says if another application is running on the port that flask is trying to bind to you default 5000 you get access to night error and so it says I can change the port that flask is using and so let me do this how do I run flask on a different port and magically it knows how to answer that question as well so it says type flask run port 8080 like that and I can run it on 8080 so let me see if I can do that so I'm going to stop this I'm going to try running it on port 8080 and sure enough it runs at port 8080 and let me see if this works so I'm going to change change this port number to 8080 and then I'm going to type an actual search query here my query and it says internal server error and so if I look over here it says a template not found search results.html and so what I did here is write create an example search.html template and it gave me a template right here so I want to use this template and it tells me this template will display the search query and the search results and so to use this template in the flask application you need to save it in a templates directory within your application so I'm going to do that I'm going to create a templates directory and I'm going to create a file called search results .html just like it tells me and paste it right there and so my application here is referencing that so it's saying render template search results.html and it passes it some variables and so yeah let's see uh if this works and so now I'm going to refresh it and sure enough it finds the template and it doesn't return an error so that's a little bit better and it says you searched for my query no results found so what if I say great earnings says you search for Great earnings no results found so why aren't results found well that isn't inside of this array and so I'm going to test a searching for Apple and sure enough it found apple and it presented to me and so you can see how we already have sort of the basics of a simple search right here we just need to hook up a little form to type in and also we need to just plug in our semantic search backend so how do we do that well what I did is I wrote create a search input template that sends a search to the back end so I need some template to input a search into and it gave me this code right here and it says the template includes a form with the text input field sounds like what I want and it sends an action to search along with the query and then so there's my search format like this and so what I'll do now it says this is called searchform.html so I'm going to create another template here called search form.html and I'm going to paste that code right in there and then I'll go to my app.pi and then I'm going to add another route and so it says I need to reference it in a route function like this and so I'm just going to add another route just like that and so I'm going to go to my app I have my search route I'm going to add this route search form and then I'm going to go to the base so this isn't the search route this is just the base route and now it says not found but I know that this route is there I see it in my code so one thing I'm already aware of so I can't erase this background knowledge I know there's a debug mode here that'll have flask automatically refresh all the source code when I hit save and so I can either stop this and rerun it or I can turn on debug mode so I did control C there and just ran the command to run the application again now if I go here I get the actual search and then now I can type in the word apple and then it finds apple right there presents me the search result so the logic is already there I got a simple input and a simple search results page and now I want to know how to enable the debug mode since uh I don't have to stop my application then restart it like that so I said how do I turn on debug mode in a flask application it says I can run the command export flash debug equals one and then run it so I'm going to stop this and I'm going to type that command export flash debug equals one oops I'm going to make sure I'm running this on port 8080 and it says the debugger is active and so let me try that and let me try to make a mistake in here see if it catches it and sure enough I refresh and it catches my error and then I save it refresh and it still works so now it's dynamically reloading my code as I make changes which makes everything a lot easier in the development process so now what I'm going to do is take this code from our word embeddings notebook that we worked through in the last video and I'm going to put this inside of our application because we're going to use it so I'm going to import open AI pandas numpy and then I'm going to input an API key and so I'm going to put my API key here in a little config file and I'm going to say open AI API key equals my API key and then inside of my app.pi I'm going to say from config import API openai API key like that and I can just set it right here and I should be configured now one problem here is I don't have a open AI installed or any of these other modules pandas numpy there's a bunch of stuff that's pre-installed on Google collab that I'm going to need to install here and rather than showing you error messages over and over again I already have a list of everything I needed to install and so I'm going to put all those in a requirements file just like this and I'm going to share the final source code here on GitHub I don't want you have to see me make errors over and over again I think you get the picture here and so I'm going to share the packages that you install and I'm just going to install them right here so I'm going to do pip install requirements.txt it's going to install all the packages that are in this text file and I know I'm filling in a lot of gaps for chat GPT here but I hope you can see that it's a very helpful pair of programmer that can ask these questions about error messages have it generate some code for me and notice I'm not going to stackoverflow.com I'm not Googling anything I'm just having this conversation I'm providing some of my background it's showing me some stuff and we're going back and forth bouncing off each other like two programmers working together and I'm gradually getting through this application and then based on your background you might be smarter than me or better than me at application development and you can write all this without asking any questions at all but if you get stuck on anything you can ask chat gbt and I find it to be a very helpful pair programming assistant so now I have those packages installed I'm going to start my server back up the first thing I'm going to do I don't need this items list right we're not searching apple banana mango we're going to search our word embeddings and so what I'm going to do is take the word embeddings that we already generated so I have these earnings and bettings for the Microsoft earnings call and I'm just going to put them right here in the base directory so I'm going to do earnings Dash embeddings and this is just a CSV file I'm going to paste those in so I've already generated these in the previous tutorial lots of numbers and lots of text and so we have our word vectors already and so in our notebook we already know how to get embeddings for a search term so I can just import this get embedding function we also know that we need this cosine similarity function and so I'm going to import this at the top as well we also know we need to read our CSV file with our embeddings into a pandas data frame and then convert those back to a numpy array so I'm going to do that so I'm going to paste this here and this is our earnings data frame I'm just going to call it DF here so since we're just dealing with one data frame and this is the earnings embeddings.csv we need to get the embedding for the search query that comes in so our search query comes in the variable query and so we're just going to do get embedding instead of the fox across the road we're just going to do query get the numerical representation of that query and then finally we're going to calculate the cosine similarity and I talked about all of those Concepts we get the embedding the numerical representation and then we calculate the similarities of that search query to all the other embeddings that we have in our earnings embedding CSV file I'm going to store this embedding in search term Vector so I'm getting the embedding calculating the similarities and then finally instead of this results array that they gave me as an example I'm going to assort my data frame by similarities and then I'm going to take the text column of my sorted results convert it to a list and send it to results and if I do this and go back to my application and so in my search query I'm going to say open AI products right there and sure enough it returns some search results and it Returns the most relevant result first that mentions open AI explicitly then secondly it returns this Ai and the Microsoft intelligent data platform and then it returns Azure machine learning revenue and so you can see how we use chat GPT to generate this python flask web application and so if I didn't have that background and I only knew this back end and working in a notebook as some kind of researcher or something then I could say hey start building me this front end and then I could kind of figure out how to copy paste and plug in the parts of my backend and replace it and then get this web application that works now all I need to do is style it up make it a little bit more attractive so I can go to Dolly 2 here and say logo for a fintech startup search engine clean design modern cool circular or something like that whatever you want to type there you can be creative with it whatever you want to type there just come up with some type of logo for this thing and you can see it comes up with pretty ugly logos here but I've generated a bunch of these and found ones that are decent enough and so I can just take a little screenshot here just like that and I can save that and then I can put it in my flask application and then I can go to chat GPT and I said how do I add a style sheet and images to a flask application it gives me an example here for a head to put in and I can go to my template here so my search form and then in my head here I just need to put the link to the style sheet just like that call it style.css then it tells me how to link an image so I can copy that and I can put this right here above my search box and it just needs to be called image.jpg or whatever I want and then it tells me to add this route for a serving static files and so I'll add this to my app.pi just like that and then it says I need a directory called Static that has all these files inside of it and so I'm going to create a new folder called Static and I'm going to create a file called style.css and I'm also going to drag my logo in here and so it's a screenshot now I'm going to put it in my static directory and I'm going to rename this to logo.png just like that and then I'll go in my templates so my template with my search form and then it's called a logo dot PNG and let's see what this looks like I'm gonna go over here looks like my image is busted oh I put in static images I'm just going to put in static I'm going to put that one in static okay so now if I refresh you see my logo image is there and so that's cool and then my style CSS here I know CSS so I can say uh body background black color white for instance and then I can start playing around with a design and so now you can see my style sheet is loading and my logo is loading and I can make whatever adjustments I want so I want an aerial font for instance and a font size 20 pixels at this point you get the idea I'm not going to go on and on about style sheets and how to make background colors a different you can ask chat gbt and have it fill out your style sheet as well and tell it to make it look however you want so I'm going to share the source code I use to make this one you can copy it and make it your own but I suggest you play around with chat gbt it takes a while to get the hang of it was kind of hard to make a video about this because this is just a process I went through and it's hard to reproduce that process exactly how I went through it but I think you can see how it's very helpful and you can use it not just for coding you can use it for any other number of tasks and ask it questions so that's it for this tutorial I'm going to leave the little 10 minute rambling that I did about AI art and controversy and what people think about these tools and you can watch that part if you want watch you and leave a comment about your thoughts on using AI art is it a good thing is it a bad thing for society whatever you think about it leave a comment and we'll keep this discussion going so thanks a lot and see you in the next video thanks I just want to talk about this point for a minute or so and talk about human design versus AI design so what's wrong with human created logos and design uh nothing really right I've actually paid many people over the course of my career to try to create logos I have a site hackingthemarkets.com and actually went to some website and spent two or 250 300 to try to get a logo for hackingthemarkets.com and I paid for it right here and this is the result I got and to be honest I didn't like it right and I gave lots of feedback I went back and forth with the designer over the course of multiple weeks and also I didn't end up with something I want and I didn't think this was that great now are there better human designers could I find one in real life somewhere develop a relationship pay them a couple thousand dollars instead and get the best identity could I hire Whedon the year whoever made the the Nike brand design and get them to generate the the perfect branding for me yes sure I could possibly do that but I need to compare that against AI so I tried to pay a person in real life to do this but it didn't work out for me I didn't even use this I just wrote the words hacking the markets on my website but you might say hey I have a niece or nephew who's very creative and who could make a logo that's much better than this one and I wouldn't doubt this but if you've tried out some of the other tools that are available for instance I'm in the mid Journey Discord right here you can see in real time right now people are creating art as we speak there's logos passing by right now so this AI generated art right now is flooding the internet there's literally infinite copies of AI art that are all inspired from this huge training set of data trained on all photos and art that exists on the entire internet and it's just exploding right now in real time and you can't really stop it and what you'll find with mid-journey is that it can actually create pretty nice logos and very nice web designs and these web designs I've seen are actually better than anything I I would ever make even though I've worked on web applications for many many years now so for instance I just pulled some random ones that came up as I was in the chat room a moment ago and saw this person generating a logo for their company so they created this version and then they typed in some other prompt and you can see how it looks on a business card another version on a greeting card one with a circle a one with different colors with a slightly different uh feeling to it and so to me these look quite good and way better than the one I paid a couple hundred dollars for and so with mid journey I can actually imagine an entire iPhone app or website and an entire ux design so I can just go in their Discord and type this prompt right here for imagine a beautiful iPhone app for an investment app imagine beautiful website for a trading app and give me the UI and ux and Bam I get something just like that in a matter of 30 seconds or so and I have all these different screens and maybe I don't like this one I can generate another one and another one and then the same thing with these iPhone apps over here and yeah that gives me lots of inspiration where I could take this convert it to CSS and HTML and start playing around with this and give me a nice Head Start so that's amazing right cheap easy anyone can do it what's the problem well well if you look on Twitter and various websites right now this image right here is being shared around no to AI generated images and many artists out there are very upset about this and I can empathize with that because you know I've worked in the video game industry for several years and I know many people who have been very proud to have honed their craft and worked on their craft for many many years they've been drawing since a kid they learned 3D design at some fancy art school and just busted their ass on this stuff Non-Stop and these AI Bros are coming in and calling themselves artists because they can type a little prompt and generate art and they're calling themselves an artist and it kind of devalues The Craft makes the work less valuable and also it doesn't really have the same Soul right A lot of people say that art you know it can only be created by human because they experienced certain The Human Experience and suffering and that's what led to the artistic creation and also probably the biggest point is that this could be seen as theft so these artists have put all their images on the internet and these AI tech companies have come in and scraped the entire internet and basically taken all these artists work and train their models and then basically they're able to take this text in charge a few cents and then remix that art and then turn out something kind of new that's trained on these artists work but they're not really getting credit they're not getting compensated for that and you can make the same argument about code if you've been following this channel for a while I've shared tons and tons of code and many different repositories for all these projects for free and you can just get them on my GitHub page and openai has taken all this code that people have shared and trained their models on it and so you can ask it to create a web application and it can take the code that's learned on and generate something like this and so when this python code is generated there's probably some remnants of part-time lyrics code in there and I could get upset about that but you know I'm actually not very upset about this for whatever reason maybe it's because I've been a professional for some period of time and I'm already doing financially well and so maybe I'm not as worried about that right now but also I view this as a tool that can help me and so quite frankly there's a lot of boring coding work out there and so stuff like this this little basic flask web application I've I've written this so many times myself and I would prefer to just have this auto-generated for me and have me substitute the very specific Logic for what I'm trying to create so I view this as a tool to help me out the same way I have an IDE and I can type part of a function name and it auto completes it for me and so what gpt3 and these tools are are this large language model is basically an autocomplete for everything so basically all of these tools are versions of autocomplete I type some type of text and it completes and tries to guess what I want that's how these large language models were trained and so are you against autocomplete I'm not sure right so when I'm in Gmail I start typing it will offer to autocomplete uh what I'm typing in my email if I'm in Google search it'll offer to auto complete my search if I'm in a text message with my friend it'll offer to auto complete my text and so I like when it helps autocomplete my code saves me time saves me energy and I can move on to something else but I guess it's a different story with art no one really wants to auto complete their art or give that power to anyone that hasn't lived through the experience of learning to create that art themselves

Channel: Part Time Larry

Views: 23,249

Keywords: chatgpt, openai, gpt3, dalle 2, python, generate web application, flask, artificial intelligence, ai, machine learning, finance, semantic search, embeddings, word embeddings, openai api, generative design, ai art

Id: AKQWiqMM4Nk

Length: 29min 28sec (1768 seconds)

Published: Fri Dec 30 2022