Let's build an Image Generator with OpenAI and Angular

I'm going to code an image generator with open Ai and angular did you know that openai offers an images API which you can use to create images completely from scratch this is based on some text input even though this API is still embedded it works quite good in this very first version we are only going to focus on one specific feature which is that the user can type in some text and that openai will generate some images based on the user input but keep in mind that the open AI images API is also capable of editing already existing images and creating variations of existing images let's get started [Music] the first thing we're going to do is we are going to create a new angular project with the angular CLI so I have the angular CLI already installed we can create a new angular project with NG new I'm going to give it the name image and Generator and it's just for this demo purpose I'm going to add the properties minimal and the skipped test foreign project for us without desks I would like to set up some routing and I'm going to choose scss of the business style okay so the angular project is generated the next thing I want to do is it's not available npm install save the elements both clear this is an auto prefixer and I'm going to initialize the Tailwind CSS which will detail when config JavaScript file to the project I will open the project in Webster we'll open up the Tailwind config file and add the line that I copied earlier to the content apart equal the next step is to add these lines to the styles of CSS file and then okay we can start the server and test if everything works as I'm going to copy this best file or this best H1 first into the up component 2 then we can start up the local development server so the angular live development server has started I will open up localhost and The Styling is working in hello world is shown the next thing I want to do is create some kind of structure for the application so I'm going to generate all of the components and the service that we will need so let's start with creating a smart component which will be the base of our image generation generator page so NG generate component in a in a folder called components in a subfolder called smart and I will call the component itself image generate I want it to be a standalone component component because I'm using angular 15. and I want to skip the test okay cool oh no I basically want to do the same thing but for uh two dumb components because the application is going to consist of prompt and some kind of image gallery gallery so I will create components opponents I gallery [Music] and alone foreign which will hold our our prompt and then of course we have to communicate with the backend so I will create a service for that NG generate service and I'm going to put it in a folder called Data access and the service itself will have the name of image generator and I'm going to skip the tests from generating us so let's start with removing the hello world and adding the image generator components um to the up routing module but everything and then load opponent I'm going to load in the image generator component equal that works hit now see image generator works okay good um so what we first are going to do is make the basic layout of the image generator component and the parent component let's say we want f in the diff we have the up prompt and we have the up gallery foreign let's first start off with the prompt so for the prompt we want to have a look at jet GPT already opened it here so one of the reasons that I wanted to use Tailwind is because in chat GPT they use it as well so we can just have a look over there how they created the The Prompt component so if we have a look in the HTML we can see that they have a form with two divs and in the last div is a text area and a button I'm just going to recreate it or can I copy it whole thing that should suffice I I guess let's see how it looks like okay hello okay The Prompt is done well the layout of the prompt of the prompt is done okay can you remove the Styles attribute here and the next thing um I want to do is at the reactive forms or import the reactive forms API reactive forms and deforms module um so what do we need we need a form to get a prompt indeed which is going to be of type string or no foreign copilot so for those of you who haven't tried it out yet please try it out it makes your life a lot easier so now let's before me hope in the form tag form and let's add the form control to the text area form not control dot prompt prompt two our button should be a submit button so like that type is a submit and then we can add the NG submit event emitter here and you submit which will trigger a method which we can call MIT which takes no parameters okay create a method I'm going to add the public and the the return type um and what I want to do now is I want to emit to the parent component when there is a new prompt you so let's write so let's up the output output public read-only um let's call this prompt um or prompt now let's call this prompt new event emitter type string and then we can check if this form is valid and when the value of prompts exists then we emit the value and afterwards we also reset the form okay that is looking good let's add some the event emitter listener to the parent component so let's open up the image generator component here we can add prompt it uh the call method called prompt which has an event the event is our our prompt so our text input of public and avoid yes we don't return anything and we're just going to console a lock [Music] the events for now or the the value oh let's see if that's working open the Chrome devtools the console tab and if we type something in here something like hello and click on the done button then we should get hello in the control box it is working I think the next thing we should do is fetch the images from the API or from our future API so um in order to do that we can do something like this we already have the service generated so let's load that in Mitch generator inject image generation service image generator service okay cool and I want to make this a bit reactive just to show you that you don't always have to code imperative um and when you start thinking more reactive some situations get easier as well so for this I think I need a behavior subject uh for the prompt so let's create a prompt Behavior subject and I like to add two dollar signs at the end of um the name of the subject so it is more clear that I'm working with a subject and then let's create a observable from this as well create a private with only prompt thank you go pilot and then in the prompt method we can just install the next method of the prompt of behavior subject okay we can test this out by doing something like this um and GF prompt images for so if this is working when we enter a prompt click on the sub on the submit button and it should show the text requesting images for and then um the text of our prompt let's make the prompt observable public and I want to request a picture of a cute dog and as soon as I click on the submit button it shows requesting images for a cute dog but I enter it so I might add a a key on enter on the text area as well so when when we click on enter after typing the event rule emit as well uh yeah let's do that okay if we do a key up dot enter we can do we can call the on submit method that should be it just without doggy requesting images for you talking and now that we have the prompt observable we can easily request all of the images when a new value is a method to The Prompt Behavior subject I think we can do it with something like this public with only images observable and then we will listen on the prompt observable and I'm going to a pipe and when a new value on the prompt comes in I'm going to do a switch map pitch mop audio which is the text that the user has typed in and here we can um double check if there is a value if if there's no value then we return um then we return an observable with an empty array otherwise we will return images which comes from the image generator this method doesn't exist yet um so we might do that right now let's add this method to the image generator service get images this is a public method and it will return observable type thing array um going I will need the HTTP client Pro probably with only foreign [Music] array [Music] here we can type in I will hard code the URL of the API for now run it on Port 33333 flash API images now we have the images the images observable here um and we'll probably want to pass the images to the all the images to the gallery Gallery will need images input which again is going to be a string array because that is what we get from the API or that is what I assume that we will get from the API um Gallery works for now I will just Loop over the images image image in G4 and G4 let image images Source will be the image itself we will not add a alt for this demo application you will not update right by function but always best practice to have a trade by function her performance is reasons so the app gallery is done for now as well maybe I can add a diff already around it so we can show the images in a row if if class something like clicks clicks row Flex rep yes by default um no rep and let's add a small cap between the images so our Gallery component is done as well um we can make this code a little a little bit cleaner with the view model principle which is basically we're going to combine all of our variables that are used in the template and we are going to put it in one observable which we call um new model so let's do that right now we will make this public public read only EU model and we can combine all of the observables with combined latest and late and then the prompt um observable and the images observable and go in to make it easier to work with we can map this map this array to an object prompt prompt from and images from the images here import the map operator um uses few model for example on the diff in US async as VM and then we can use it like this prompt and then BM dot prompt is there then investment images for um text and we can change this one to VM dot images and then we can make the prompt and the images observable private again cool okay we still get an error here and we fix this or the image generator service no provider for people I think we have to import the HTTP module in the app module e client module a inter error is fixed so now when we they've been cute dog click enter or click on the submit button here and it forms a heads request to the API but we get a connection refuse because obviously because obviously API is not doesn't exist yet so our front end is done for now so let's start on the apis we are going to set up a simple Express server let's get started [Music] so I'm just going to open up our the ID and create a index.js file in the root of the angular project when you create a real live project please upgrade the packet and the front end a bit more than 10 year but for this demo application I think it will suffice to do it like this so we need a express application oh it's Google compressor basically we can copy this um so this is the most basic implementation of the express whatever that we can do so what I want to do first is install the open AI dependency and the course dependency because we will need those I will open up my terminal again I'm still in the correct folder of the project install and uninstall I want to save this to the normal dependencies cool and then we can install open AI open AI cool so let's open ID again um the first thing that we want to do is that the express server to use a body parser like this and the express server should also use course and then we have to import them This and like this thank you go pilot then I want to create a endpoint uh same as we mentioned in the service is slash apis slash images so let's have a look at the open AI documentation and it says that we can request a image like this copy this in our index .js file configuration here to make it more clean configuration and then the open Ai and then the response okay the response will probably need to put in the well in here and because it uses an evade operator we have to add I think to the anonymous methods cool so the response in here um a little prompt with acute BBC order will prompt for two images this size we can send this back to the content with thing on that data and then we also have to create a new open AI key you can do like this a few API keys and create a new secret key appropriate and please do not try this API key yourself because I will delete it after the video thank you so we can use this API key in two ways or we can hard code it in here or we can set it via environment variables of course via environment variables is better so let's do that let's open up the terminal open ai ai key is key that we just copied and then I want to start a node server of the index.js file so example up listening on part 3000 so when I go to localhost 3000 on the API images and points and then just show a result and if we have some patience then indeed it it shows some result um cool we can see that there's an object with two properties I think with created and data and data are just objects with one property called URL and what I want to send back to the front end is just a list of the urls let's do that so we can map this to response data data then we can do a map if nada on the data I want the URL that should be something like this and I restart the server in the request images again okay cool it seems to be working this also means that we can test out the front end test test maybe we should do a refresh first and then yes error connection used oh yeah because of uh where the port is still different let's change that part 3000 a and the images are coming in as you can see we see some cute sea others now and two images okay just because the the two images and they see other are hard coded in the back end so now we have to pass in the parameters from the front and to the back end open the service again and this method now takes in two parameters one for the prompt prompt and one for the number of images going to be a number I'm just going to after the parameters variant meters a squaring parameters like this prompts prompt an NS number of image now we can pause in the prompt in here oh the value which is actually our prompt and let's give it a a hard-coded number of images for now three so now we should always get three images back if we update the API at least so let's update the API again let's get very parameters from the request so prompts an n vary we can pass in the prompt like this and then we can up the Brompton like this and because if we do it like this prompt and it will not it and will not work because the prompt in here is not actually a string that there's something else um and then this one we should parse it to an end and Alex I think that's it so I think this should suffice for the API so let's restart the server and now that the server is restarted we can test out the front-end application again I want to generate a photo of a cute dog sitting on a table eating a bone but we can be very specific I think let's see what kind of results we get images are loaded cool toast but this is a dog eating a bone this one as well it's not a table and then the last one as well so maybe we can test it out once more a rainbow yet rainbow gets singing a song who knows what kind of results we get now as you can see we see some rainbow cats thing this should give you a very good idea or you can use the open AI images API and angular to create your own image generator application if you enjoyed the video please leave a like hit subscribe and I see you in the next one thank you bye [Music]

Channel: Bryan Hannes

Views: 783

Keywords:

Id: FfehkSYT-jQ

Length: 40min 29sec (2429 seconds)

Published: Thu Dec 29 2022