AI-Powered Image Enhancement with Next.js (React.js framework) | GeeksforGeeks

Key Takeaways

for hello all right guys we are live Soo let's begin so hey everyone I'm herel Jen your Mentor at gigs for gigs and in this video we are going to create a react J application basically it's going to be in next JS and we are going to create a simple project okay don't get your expectations too high uh it going it's going to be a very simple project where we are going to have an interface in reactjs okay and here we are going to say that if I give you a prompt suppose I have a image okay suppose it's a normal image I want to convert this image to black and white what can I do I can simply give a prompt I want to convert this image to black and white now my AI will handle things okay so I'm not creating the ai ai is like we we going to use the API provided by different different platforms okay you can use di AI or you can use other API Services we are going to use one free API service and which I'm going to explain you right now and uh it's giving us free credits for some usage so it's like uh for free stuff for this project free stuff would work for a few prompts we can do this and uh if you find some other apis then that's also great okay my task is to help you understand how you can integrate that API which provides you AI capabilities to your next year's application this is going to be the purpose of our project okay so I'll just draw the diagram again I'll explain you with the help of figure so that you'll understand things again okay uh vaj B Namaste Namaste Arian Namaste okay so let's begin uh I'll I'll just open things in browser also okay so I have started my my application and here you can simply see that here I'll just get some options so let me just check if I have proper images or not so yes uh basically what we are going to do is uh we are going to give a few proper prompts and uh like there are different different prompts which I can give okay suppose uh I'll I'll do some image by G suppose this was the image okay so if I click on open so this is the image which I provideed now here if I describe something I'll give a description okay uh I I can I think I have to change the API but let me just try that okay if there is an issue we'll fix that so I'll just say that remove the b a c c k g r o u n d okay let's try that so if I click on try and I think it won't work because the API is exhausted but yeah I'll use it the separate one okay don't worry sir can we do side by side with you uh I would suggest that I would provide you the source code so it's better you can try to understand that okay right now it's not working maybe the API is exhausted anyways I used it for a lot of times that's why so yeah you can see it's exhausted anyways what would actually happen it by providing this prompt it would simply uh give me the image which has removed background okay so how can I do this for this simple thing we are using the photo uh API okay let me just uh recall its name photo room API okay so photo room API is a AI based platform which is used for image enhancement so we're going to use their API into our next year's application okay I hope the logic is clear again I'll just uh uh draw things in excal draw so that it's better to understand okay yeah here I'll draw things uh okay I'll explain it here so first of all what we're going to do is we're going to take API from what okay we're going to take API from what either you can create your own API okay some people do that they train a model in Python right if you know python then you would be training a machine learning model which basically enhances your image right different kind of enhancement like background removing or uh you can also enhance your uh like texture quality you can upscale the image or different kind of things you can create that kind of machine learning Model A lot of tutorials on YouTube are available for that if you're are trying to create your own model but what we're going to do is we are going to use existing API okay so I'll just uh write it here so yes exist API okay API service this API service gives us what image enhancement capabilities image enhancement okay image enhancement capabilities okay which API by the way we are using so I'm just going to go there I'm just going to type photo room API because this is a free API service that's why we are using this but if you are uh someone who knows better services and uh like uh uh we we can use Google's gemin but right now it's not working properly they have uh just uh uh I think they have removed the service for a while for image enhancement but yeah in future you can use giny API which would be totally free similar approach would be there you have to just look at the documentation and you can do the similar approach but for now this is the free API service which we're going to use this API service would help us to enhance the image okay I hope you got this so this is photo room and uh you can choose other uh platforms also U you can just uh search for free image enhancement apis if you are just making it a small project like me okay like this project but yeah if you want to make things in a bigger scale I would suggest that you please purchase the uh premium model of these okay right now we're going to use the free uh model just to do things okay but yeah if you are doing things on large scale if you want continuous image enhancements you have multiple images then obviously you have to purchase things because this is costly okay image enhancement operation is costly so yeah in future you might have to purchase this but for now I know only the react part till now the next year is not done by my site so I can do yes definitely you can do this because uh there is no uh specific thing which uh special thing which you must know in next year although uh the setup part is different in nextjs if I compare it with react justs little bit different like uh in reactjs you type the command npx create react app right so in next St we use the command npx create next app and in react jajs we have we have app.js file right similarly in uh nextjs we have the page. TSX file we're going to use typescript although no typescript code would be used just chill if you just know JavaScript that's only what you need and react just okay if you don't know typescript that's fine if you don't know next year that's also fine okay things are going to be very easy for you you would see the code and you would understand yeah it's similar to react just nothing is different okay the logic is exactly same you can just convert your code to react just that also fine you would understand things okay don't worry about that the code is almost same as reactjs little bit uh setting a part is different and uh uh yeah we're going to use typescript in nextjs okay that's that's what we're going to do but nothing is different you would see the code and you'll understand it okay the logic is this I can implement this in plain react CHS with JavaScript okay that's also fine okay or you can follow my Approach nextjs and typescript why we are using nextjs and typescript because reactjs uh we site itself recommends to use nextjs okay that's why we use nextjs okay so here uh you can you can just visit this and you can check out the free version which we're going to use okay we'll get some credits the credit sometimes might be more for you sometimes might be less okay I checked this website uh few days ago there were more credits and right now I think they are providing less credits similarly is with open API or different kind of websites which gives you AI based apis Okay so so uh you have to check what kind of credits how many credits you are getting to use their service okay we are going to get free credits here so uh basically let's try to log in okay so I'll just login and uh I'll I'll just sign out with this account I'll just log in with a fresh account let's see how many credits do I get this time okay so I think this would be okay I'll just choose this account okay so this is a Gmail account you can choose your own Gmail account and you can use as many Gmail accounts you want that's totally up to you okay so uh yeah you can see that's done and what you can do is here you can just type API dashboard okay API DB o a r d okay so this is kind of a hidden page uh so you can write it this way API dashboard and you can see enable the photo room API for free okay so this is something which you have to look for uh you have to find the API service I found it so I just have shown you easily so yeah they are asking some basic questions so you can just write anything okay I would say suggest that you can typee any email okay so I'll just type this email okay so I'm a company and I'll just type some random text okay and what's my role so I'm the CEO okay and anything you can just select anything this just general information they are asking for us and then submit okay so you can see that it's done now you can see that we got the API key please don't use my API key please don't use it okay okay uh you can generate your own API key and then do whatever you want okay please don't use my API key else the plan would get exhausted okay so uh yeah I hope you followed the approach and you would know now you can generate API key okay so we're going to generate API key we generated the API key and we're going to use this API service into our next CH application okay into our next CH application next J or you can do the same thing in normal react J or react J or you can use plain HTML CSS JavaScript also this would be exactly same if you know how to integrate apis in HTML CSS JavaScript then you would understand the code else you can just follow my nextjs and reactj also this was this was always better okay next J or reactjs using these two things okay so yes we're going to use nextjs only which is modified version of reactjs by the way okay so I hope you got the basic idea now we're going to implement it okay so first of all we have to create a basic page okay we have to create a basic page like this so what we're going to do is we are going to create a basic application okay basic application so what I'll do is I'll just uh create a folder here okay I'll just create a folder here and let me just name it as image okay uh okay I'll just rename this image enhance okay something like that so inside this I'll just create a project so I'll just open it with VSS code so now if you don't have vs code what I would suggest is download vs code you can just search for Okay uh I'll just decrease the size of my video okay now I think yes more visible okay so to download vs code you can just search for vs code and you can just download the vs code and then you can install this setup okay first you need to download the setup and then you can install the setup uh while installing just make sure you check all the check boxes then you're good to go okay and one more thing is needed is nodejs okay so you can just download and install nodejs similarly just click next next next and then it would be done okay so you can just download the node and then it would be done okay so now after this uh you would have a folder here okay so here I'll just right click open with code okay and uh what I would do is I'll I'll just uh go to terminal okay and to create a nextjs application we simply type the command NPS create next app okay you can use the same for reactj also create react app but I'm going to use it for next so create next app at theate latest okay so latest version of uh next year and here you can see it's asking the project name so I'm just going to say that okay let's name it as okay I'm just going to name it as photo photo AI okay something like that okay I'm just going to name it anything you can just name it whatever you want now we're going to use typescripts I'll just mark it as yes although there's nothing special which we use in typescript in this case for today but yeah you must know typescript in future it's always beneficial today we are not going to use uh typescript properly it's just like yeah we have just created a setup a project in typescript which I generally do in next ch okay now I don't want to uh use okay I want to use es L it's like checking for errors I don't want to use Tailwind yes SRC yes app router no for allias okay so you can see that a project would be created like this okay perfect now guys it's going to take a few seconds to actually set up this project you can see I'll just zoom it a bit more yes control and plus sign it would just zoom it things okay so you can see that it's almost there almost there perfect so you can see that page. TSX is here so what I'm going to do is I am just going to remove everything from here and I'm just going to create a division okay so just create a division that's it okay and here I can just say that uh AI image generator something like that I'm just going to name it something like that so that I can check the things so you can see that it's done okay now to start this application we simply need to type the command which is npm run div okay npm runev so I'll just type the command npm run diff okay so it would start the application and uh okay I'm sorry uh I need to go inside this directory okay yes now we are inside this directory photo AI which is our project so now here we can just type the command npm runev so you can see that it's going to start okay so guys here what we are going to do is uh we are going to type Local Host 3000 and it's going to start so you can see that yeah we have the basic website okay so now we have to generate a layout so this is going to be a very simple layout okay don't worry about things okay so here we're going to have a very simple layout so I'm just going to say that okay I'll just keep things inside main only main container you can create it in a normal division also that's also fine okay so I'm just going to give it a class name and uh styles do main so if you're using plain react just The Styling process is different okay I hope you get this but in next yes we simply create a file Styles file like like this page. module. CS this is by default available if you know nextg you'll know but in reactj we have styling little bit different way although we Al we again have a file uh styles. CSS there we write the style and then we implement it okay in react is different in next it's the way this is the way okay so now what we're going to do is uh I'm I'm just going to say that we have the H1 tag okay we have the H1 tag which has the span tag okay AI image enhancer now we are going have a division named as main container okay main container now inside this container we're going to have the H1 tag that's it okay now guys here uh we're going to have some containers okay the top container is for containing two images what two images our image and the generated image okay so this container is going to contain two images okay now after this uh we're going to have a input field also okay so we're going to have an input field which would allow us to input the file okay which would which would allow us to select the file okay so we're going to have a button first of all okay so uh I'm I'm just going to create a function const handle file change okay handle file change and uh this function is going to be an arrow function okay so we're going to create a simple arrow function and it's going to get an event okay I'm just going to give the type as any since we using typescript I'm just giving type as any okay so in normal JavaScript if you're using normal JavaScript with reactjs you don't need to give the type right you just need to write it as it is okay but with typescript since we have allowed typescript TSX code we have to give the type also okay so we'll complete this function later on but yeah we are going to need this function okay so we're going to say that we would simply have the input field okay we would simply have the input field and what input field so we're going to create an input field okay so what I want is as soon as I click on this input field I would open the file manager okay so that I can select a file so type file and I'm just going to give it an ID of file input okay file input and I want to accept only images okay so image I im a g e okay slash and ASX and after that I'm just going to say that uh if I click on this I want to set things okay I want to set things like this okay to the function okay so this would be fine okay as soon as I click on this this function would be called okay this function would be there so what I can do is I can just uh write things inside this function okay so I'm just going to say that uh uh just get the file which you have selected okay just get the file which you have selected and if there is some selected file then only okay if there is some selected file then only do things so I'm just going to call the file reader okay to just uh get the file then what we're going to do is reader do onload as soon as the file loads as soon as I get the file I'm just going to pass it to my container to my container or to my uh variable okay what variable so I'm going to get that variable by creating a variable here okay so we're going to create two variables uh first variable would be current image this would be the image which I have selected okay with us State okay this would be the image which I have selected okay so what we're going to do is as soon as I read the image I would pass that image to my variable okay to my hook react CH hook that's it okay so now we would have an image inside this hook okay and uh then we are going to convert yes then we are going to convert this as URL okay that's it that's it okay so we're going to read the file as URL that's it so this is a simple way it would allow us to Simply set the image here okay this is the way which we do in react CH on next CH okay now we have seted the image so we'll just go to our website here and uh you can see you are using okay so it's asking us to use client at the top it's for next J only okay because we have client based rendering and server based rendering so you can see that as as soon as I click on this you can see that I get this popup okay so as soon as I click on this image you can see that I have selected the image but this looks ugly this looks ugly so what I'm going to do is instead of uh using the input field instead of using the input field I'm going to use a button I don't want to show things like that okay so what else can I do I can just say first of all uh display okay sorry Style Style equals and I'm just going to say display as none so I don't want to show it here okay I don't want to show it here now how can I select the image I would simply create a button okay I would simp create a button tag so button tag b t n okay this button would be containing What text this button would be containing select New Image text right select New Image text so you can see that we have created as soon as I click on this button okay I want to open something okay so first of all I'll just give it some style okay so I'll just give this a class name later on we'll style this okay and then guys we are going to say that as soon as I click on this I want to click on the file in input document okay file input document that means this document okay that means as soon as I click on this as soon as I click on this I want to find the element file input I would find the element then I would simply click on this automatically this would be done by JavaScript for us okay so let me just close it so you can see this is the thing so now if I click on this so you can see that input container is hidden but that input container is targeted by the button so you can see that that's how it works okay so if in future you are going to use this feature so that's good for you you'll understand things now in future if you are implementing some kind of thing okay image manipulation library to like website in which we can edit image crop add text uh you have to purchase the AP you can use this photo room API but yeah you would have to purchase it okay you can do a lot of things inside this uh or there are better options uh you can wait for gin API to allow you to use images to modify images because I think gin has paused that feature to modify images but I think soon they would be allowing us to modify images okay so you can do that or you can create your own model but yeah if you are looking right now then you can use Photo room API which we are using but yeah you have to get the paid version of that to use it multiple times and if you're creating a big project okay uh for now we are using the free version with some credits okay now we are going to come back here and yes let's check the website so you can see it looks like this okay perfect now guys after this what we're going to do is we are going to say that as soon as I select the image okay as soon as I select the image I'm just going to say that if I have the image then I would show The Prompt okay if I have the image then I would show The Prompt okay uh I'll do one more thing I'll later on show the image also but as soon as suppose I select the image okay as soon as I select the image suppose this is an image I selected the image now I would get a message box what you want to do with this image okay that means I would simply say that if I have the current image okay when you would get the current image when your file is selected file is set it to the current image hook right now you have the current image as soon as you have the current image okay as soon as you have the current image then we're going to say that if I have the current image that means it's not null initially current image was null as soon as you click on this input with the help of this button you selected an image that image has been passed through the current image hook current image hook that means now this is not null this is containing some image that means it contains something now if there is image then you would need to pass the prompt also what you want to do with this image okay so we're going to say that current image if there is current image then I would simply say ask for the prompt okay ask for the prompt so I'm just going to say that its class name is suppose prompt container okay and here guys we are going to say that uh we're going to create one hook for storing the description that means the prompt okay The Prompt so this would be suppose The Prompt right prompt okay now uh I'll come back here I'm just going to say that as soon as I make the prompt visible what it would show it would show an input container okay this input container would be of type text okay we're going to provide it some text right it would be containing value of description hook okay and whatever change I make on this it would simply go to what it would simply go to U okay handle change function suppose handle change function okay this function would be created and uh I think I can give it a placeholder also okay I can give it a placeholder also okay so let's create this handle change function so here itself I'll just create this const handle change function okay inside this again we're going to provide an event okay event uh suppose type as any okay here I'm going to provide some event okay here I'm going to provide some event what event whatever text you have written in the input field right whatever text you have written in the input field I'm going to pass that text to the description hook that's it that's it okay so now we're going to have the description also okay so what I have simply done is uh as soon as I select the image okay let's select an image like this so you can see as soon as I select the image I get the description field I get the description field now I have written something some modification like what remove the background something like that okay right now the UI is not good we'll make things good okay we'll make it something like this one but yeah right now this is it now we have to show a button also okay so for showing the button we are going to Simply say that uh we have provided the description now after that we're going to Simply say a button is there and generate image function would be called on clicking of this button okay so const generate image this function would be called okay that's it that's it that's it guys so this function would be called right so you can see that try function would be try button is there if I click on this generate image function would be called okay this function would be called we'll come to this later now let's complete the remaining part which is is the both images part okay so you can see you completed which part right now you can see that we completed this input part for selecting image then for entering the prompt we also completed this part now we need to complete the both images part here we going to show two images One image which you have selected next image would be shown after modification okay after modification so for now we're going to show the uh current image okay so I'm just going to say that if there is current image show the current image that's it okay so let's see so you can see now we are able to see the current image okay and uh one more thing what we're going to do is later on when we going to get the generated generated image we're going to show the generated image okay so we're going to say that if we have the generated image then show the generated image also and one more thing I'm going to show an arrow also okay so by the way right now we don't have the generated image so what we're going to do is we're going to copy this and paste it here and uh I'm just going to name it as generated image okay so G generated image okay so generated image and this would also be g e n e r a t e d okay generated image uh guys for now what we're going to do is uh we're going to show some temporary image how we can do that uh I'm just going to go to pixm okay pixm website we're going to just going to show temporary image so that we can get the layout okay so pick some okay I'm just going to copy this one okay just copy this one this would just give us images okay so here I'll just pass it and similarly here also I'll just pass it okay I'll just pass it and let me just uh change the size for this one okay let's make it 300 okay let's save it okay so right now what I have shown is I have shown that if I have current image this is the current image and this is the generated image okay suppose so you can see that both are visible okay both are visible now how would I know that which is current image and which is generated image between these two so what I can do is I can just create an arrow just for simple difference okay so I'll just go to Hero icons and here I can just search for um Arrow if you just search for Arrow you'll get a lot of arrows here uh you can just uh select this Arrow right suppose okay and I'm just going to say that between these two I'm going to show an arrow okay between these two I'm going to show an arrow okay you can see between these two I'm going to show an arrow but Suppose there is no generated image so why would I show this Arrow okay so I would simply say that if I have the generated image if I have the generated image then only show the arrow okay that's it okay that's it if I have the generated image then only show the arrow suppose I don't have the generated image okay suppose this generated image is null then what you would see you would just see the current image okay you won't see the arrow and you won't see the generated image that's it perfect now that's done now that's done okay so suppose you have generated image okay you have an image which you have generated after that what you can do is you can show a download button also okay you can show a download button also okay so here I've simply created an a tag okay uh you can use normal link tag which is available in nextjs or you can use another tags so on clicking of this tag this would route me to the image URL okay whatever is the image okay so suppose now you can see that you have the image if I click on this you can see that it took me to this page now you can just save this image or you can download the image that's also fine okay find now guys I hope you understood this this is the part now we're going to style this a bit okay let's style this so if it's the styling part it's very easy like it's just normal styling which I have followed and you can follow the same styling okay okay so uh sorry uh there are some messages let me just check why we provide the type any to event if I work it will okay actually I am using typescript and uh generally a lot of people people don't know typescript that's why I have given any type but if you are someone who knows typescript well you have to give the proper type here okay this is just for some people who are just starting with typescript and they are using next CH with me and they are just starting with typescript a lot of people don't know typescript okay but they want to use so yeah just type any you wouldn't face any error else if I if I just remove this you would get type error okay because we are using typescript okay so we have to search for exact type of this event there is some kind of type uh react FS some kind of type I'm not going to that detail but you can just search for this what's what could be the type using chat GD you can find the type but for now I've just given any okay so are you implementing responsiveness in this project this project doesn't need that much responsiveness like if I shrink the size the size is already small we'll see that if we get time it's very easy we'll do that okay can we do this without any prerequisite learning like uh you need knowledge of reactjs at least okay and which API we're going to use for image generation so we we are using the photo room API okay perfect okay let's continue guys okay so now guys we have the two things you can see that this is the layout we have to style this first okay we'll style this first right now I'm just showing temporary things later on we'll do this with the help of our API okay right now I'm just showing temporary URL okay just so that we can save some energy okay so let's go to page uh module do here okay and I'll just remove everything okay and I'll also go to uh This Global CSS I'll just remove everything so you can see that now our UI looks like this okay very unbalanced okay so we'll first of all say that we don't need any default margin or padding in global CSS we simply set that so you can see default margin and padding is now gone okay now we're going to come here and we're going to say that our Jo our main main class would be having minimum he 100 V and this background color dark purple okay so you can see that this is it okay so if I just uh save this okay now it would be fine so if I just refresh this yeah now the error is also gone yeah you can see it like this okay perfect now similarly guys we have what uh if you come inside this you can see that this is our main container okay this is our main container we are going to style this we're going to say that our main container is treated like a box inside this box everything is shown in flex and in column format okay so I'm just saying that first of all display is flex okay display is flex that means everything would be Row in row you can see everything is in row okay so we have to first of all fix that we want everything in center and flex Direction column so I would simply say that and you can see that now everything is in column and we'll just decrease the size now everything would be fine in future okay we'll just decrease the size and it will be fixed don't worry okay now uh I also want some gap between my items okay so I'll just say there would be gap of 10 pixel between each item so that there is some spacing then after that guys I'm going to say that it's going to take F or 50% every time but it's not going to go below 250 pixel that's it okay so let me just show you this okay so if I just inspect okay and uh if I just decrease the size you can see that it's a little bit more responsive okay it's little bit more responsive okay we'll fix that also later on but yeah you can see that yes size is also shrinking and Below 250 pixel we don't get a decrease size okay so we have said that okay so almost all devices are more than 250 pixel that's why I'm given minimum WID 250 pixel okay just a minute guys now I'm going to style the H1 tag okay heading so white color and font family Gip and text line as Center you can just change the font family okay I've just given some fun funky look okay you can just change it if you want okay and now inside that we have a span tag also okay inside the H1 tag you can see inside this H1 tag we have a span tag also okay so I'll just say that the span tag is going to have some color okay later on I'll provide this code don't worry guys uh you'll get the source code of my GitHub repository don't worry I'll provide it okay so uh here you can see that it's available it's done okay now we're going to talk about both images container right now you can see that they are in column format first of all we have to make them row how we can make it simply give them Flex box okay Flex design so I'm just going to say that similar Flex design is given but this time Flex direction is row only everything is in Center there is gap between items and position would be relative why because in future we're going to use it for Inner Elements okay so you can see that yeah right now it's like this okay the images are aligned properly okay now you can see that the SVG icon is actually gone so what we're going to do is we're going to give it some width and height so that they look proper okay so you can see so that they look proper okay okay so guys you can see that they are something like this okay they are something like this uh now what I want is I want to just say that the images are also going to have some styling okay so images are going to have some stylings I'm just going to say that both the images are going to be aect ratio one and width would be 50% okay so uh if I just you can see that yeah the width is 50% and and uh I can just give them minimum width also if I want I can just say that minimum width would be 230 pixel okay so minimum WID would be 20 230 pixel you can see that's how they look okay and what else I can do is suppose if uh things go out of the way so I'm going to say Flex rra equals R okay suppose if things go out of the way uh in future but right now you can see it's like this okay so I'm just going to say that okay not 50% actually 40% maybe yeah you can see it looks like this and similarly the let's give it 10% maybe uh Max width would be 50 pixel okay so that the size of the icon might also change let's see okay so if I just inspect this let's go for a smaller size yeah you can see that the layout is actually not that great yeah we can make it more responsive like this so that if you want you can make it more responsive okay but I think this is also fine till here we can make it more responsive in future our main goal is to run the application properly so first we'll do that if we get time we'll make it responsive also okay little bit more responsiveness is needed so you can make that or you can use chat gbt nowadays everything is AI okay so you can use chat gbt to make design response it's not a very big deal okay if you don't know how to make things responsive then please learn the basics of HTML CSS JavaScript you'll understand it okay so uh this is it now we're going to style this uh remaining container so prompt container okay so I'm just going to say that this prompt container is going to take the full width 100% width of what of this of what of this container of this main container that means if this main container is taking 500 pixel then this prompt container is also going to take 500 pixel okay that's it so you can see that that much amount of space is taken okay now inside this we're going to say that our input container would be styled so I'm going to give null styles to the input container okay I'm going to say that it's going to take 80% of the inner WID some padding some background color would be removed border would be removed outline would be removed text color would be this point would be this so you would see something like it you can see something like this okay now we're going to come back and you can see that prom container has border white okay also check that okay and display Flex simply makes the input and the button in Flex okay in Flex okay now similarly we're going to say that our button it's going to take the remaining size so I'm just going to say 20% okay and the color would be this background color would be white and bord and outline and cursor pointer okay so you can see that this is the this is the input container okay this is the input container perfect now guys uh we are simply going to say that as soon as I select an image okay so this is the button to select the image right select New Image so we're going to style this button okay we're going to say that as soon as select this with 30% white color pink color background and then again some stylings to the button okay so you can see that this is the button okay so yeah this is almost done almost done now we have styled the button also and the prompt container also now last part is remaining I guess uh the download button okay we have to style the download button also so we're just going to say that the download button it's going to be in position absolute okay why position absolute I want to show it in top right corner of what of the image container that means I want to show it somewhere here download button that's why in the image container you can see that the image container is having position absolute okay where is it both images you can see position relative I'm sorry position relative inside that we have the download button you can just see that inside the both images container this is position relative and this is going to be position absolute okay that's the way you use things okay so now I'm simply going to say that uh if I use position absolute okay and I would simply say that it's on top 5 pixel and from right it's 5 pixel okay let's see so you can see that it's here okay it's here now what else can you do uh you can just say that some more stylings would be given to this button okay that's it so background color and some padding and some decoration and like that okay so uh you can see that this is the download button and if I click on this it would take me to this page okay so yeah this is the styling which I have done here and now let me just save it and there is a bit change here in The Styling part you can just check this later okay just remove the extra styling which I did right now everything is fine okay everything is fine almost same yeah you can see with the image this is almost same okay so now guys you can see that this is the UI this is the UI perfect now what we're going to do is we are going to Simply click on select and suppose if I click on this can see that we have this image okay we have this image on the clicking of this image on clicking of this image uh uh we have selected the image we are going to give a description suppose something like that remove the BG okay remove the BG okay background as soon as I click on this I want to hit API I'll get an image in response with removed background and I'm going to show that image here okay that's why I want okay so I'll just go to uh this photo room okay and first of all I'll just copy this API okay and uh guys there would be different different methods but in next just this is a method here you can simply create a file Dov en EnV do local okay do local okay and here I'm just going to paste this and please don't use my API key and uh um you can just generate it in the initial part of video I have explained how you can do things okay and I'll also provide you the source code so you don't need to worry about the source code also okay the link would be provided in the description when we end this video okay is photo room API free for some credits it's free console log hello developer hello Ajay how are you okay let's come back so this is what you have to do I've just created a variable I've just named it as nextore Public Image enhancement API key here I have provided my API key key okay similar you can generate your API key in the initial part of video I've explained that you can watch from beginning you'll understand that okay so now we have the API key what I go what my goal is so I'll just go to the website now you'll be able to understand things okay so uh API dashboard yeah just scroll down and just click on API documentation this would help you a lot to understand things uh I can just click on API playground okay just go to playground this would also be better so here guys what you need to do is you can see that they have given some explanation and here you have the code okay so I help you explain uh understand these things so right now suppose my enhancement project does background change okay suppose uh this is this this was the image okay this was the image and what you want is you would get some things here also okay some things here also suppose uh this would be the image so you can see that yeah you want to suppose change the background or you want to generate a background okay so I'm simply going to give a prompt okay suppose this is the image which I have provided suppose this is the image which I have provided this is my current image okay so in the API when I call the API I'm simply going to give a prompt okay what prompt make background red okay make background red so if I click on generate you can just see that it's going to take a few seconds and you can see that yeah it's made right okay so this is AI generated so sometimes you have to Define things more properly but yeah I hope you got this okay and these are some extra parameters I would say that don't uh play with these or you can play with these extra parameters but right now we are going to focus on the background enhancement okay image enhancement background enhancement right so here uh we would simply come here and you can see that this is the kind of thing which we get I don't want to go to the get part you can see this is the post request okay this is very important post request so what you want to do is what you want to do is here you'll get a URL this is the URL where we're going to hit our API okay then suppose you want to make a background okay so you can give a prompt okay make background right this is the prompt which I gave okay and these are some settings this is the size which I want in response and this is the padding and uh this is my uploaded image my current image okay current image and this would be my generated image okay current image generated image okay so this is the kind of things which you need to keep in mind and similar to this I'll create a function okay I'll create a function okay so I'll go to my generate image okay here and here guys what you need to do is here guys what you need to do is you would simply need to first of all say that if there is no description just don't do anything okay if description length is zero then means you don't want to do anything okay and similarly if there is no current image you don't select any image then again you won't be allowed to do anything okay so both things must be there okay you must have a description and you must be having a current image okay now here guys what we're going to do is uh we're going to give a try and here we're going to give a catch okay so if there is any error we would get that error okay console.log error okay if there is an error we would get an error okay so now guys we're going to try what we want to try we want to first of all collect the data okay what kind of data this API is taking so just have an eye on this API okay I'm allowing you and you can do anything you want here what you need to do is you have to keep an eye on the API you can see that this is kind of form form simply mean wherever you see C URL curl and you see form that means this is form data okay so in header part you're going to provide this in the fetch part you going to provide this in the form data part you're going to provide it that means we're going to create a form data where we going to provide these fields okay we're going to provide these fields okay so let's create a form data so this is General things which every JavaScript developer must know so uh uh instead of this what you can do is you can just go to chat GPT or any API any service uh any AI based service and you can just pass this as a prompt okay to chat gbt chat gbt would explain this how you can convert this to fetch okay let me just show you uh okay let me just check chat gbt okay just a second guys yes so here guys uh I want to convert this to fetch API give a complete function okay just write this and just give it and you would see that you would get a function like this okay so you can see that yeah this would be the similar thing which we're going to do right now okay similarly you're going to do things okay so you get an idea with the help of chat gbt so Sim L you can understand things if you're not able to understand the curl part or you're getting the nodejs part or you're getting the browser part separate separate types of format is given but yeah you can similarly create your own fetch API with referring this okay so we're going to do that so let's come back so form data here we're going to say that uh into the background prom we're going to provide a description right and output size would be suppose I'm assuming this would be the size and padding would be 0.1 okay so this is it now I'm just going to say that what whatever response you get whatever response you get first of all you're going to convert this image into a blob okay current image current image first of all you are converting your current image into a blob okay uh I'm just going to say that this would be an async function okay async function yeah so I'm just going to wait to convert this image to a blob okay 64bit uh type format okay this is the format for converting image and we have converted the image to base 64 okay that's it so it's like a string okay so now we have the image converted to string and we're going to create a blob out of it so to convert the image to a blob we are simply going to say that b 64 response. blob okay now what is a blob so it's like a again a format where you have divided the image to pixel format a string format okay that's what a blob is okay and I'm just going to provide this blob to my form data okay so I provided my image blob to the form data that's it okay so now you would check you would come here and you would see that we have provided the padding output size background prompt and also we have provided the image file that's it that's what you want to do now we have everything okay we have provided everything so what you can do is now you can simply call the API okay how you can call the API so first of all where is my API key okay so my API key is available into myv dolal file right we have added this to our env. loal file right so we're going to call this API to our page to our page how we can call that we can simply call the API key okay I've just given this type as any because sometimes it can be a number it can be a string whatever it is so there is no conflict since we are using typescript okay so yeah any so here you have simply called your API key that means instead of writing this number this API I'm sorry not a number this this string directly here we haven't we have directly we haven't directly provided this API key here okay we have created a secure variable named as next Public Image enhancement and there we have provided the key so it's like more secure okay EnV variable makes things more secure okay that's why I've used that now we have the API key okay now we have the API key let's go to chat GPT and uh this is the prompt right so here you can see that this is what chat gbd has tried okay this is what J G has tried so we're going to use that okay so this is going to be our URL okay this is going to be a URL and this going to be type of response okay so similarly I'm going to write my response okay so we have the function complete we have the function complete we just going to say that we have a variable named as response okay I'm just going to await and we are going to use fetch method for that okay fetch method for that and here guys we're going to use our URL okay so we're going to use the URL which we got that is the photo room edit okay uh now after this inside this we're going to say that we have a method as post okay and in the headers part we're going to provide our API key okay we're going to provide our API key it's API key is the variable which stores the value of our API key right in the headers we provided the API key right so here you would see that in the header part we provided the API key okay we needed the API ke now in the body part we need to provide the form data okay so we're just going to say that in the body in the body you're going to provide the form data that's it guys that's it okay so after this we going to say that as soon as you get this as soon as you get this okay as soon as you get this so you're going to make it you're going to say that as soon as you get a response if response is not okay that means there is some GB there is some problem okay so if there is some problem we're going to convert that response to a text okay we're going to convert that response to a text okay converting the response to a text after conve