Build a Django AI colorization app 🎨🦾

I'm going to show you how to build ajango app that colorizes black and white images here's what the final product will look like and you can just see and I'll also show some of the really cool output that we've got with these old black and white images made much more realistic by adding color so let's get into it here's the written app will be working with and there's if I just scroll down there's some really nice output that I've got as a result and you'll be able to make using the app so I've just created my virtual environment and then we're going to copy this to create our app so here our virtual environment and then we're going to paste in this to install the relevant packages and create our app into our terminal okay complete and here is core and then the name of our app which is Sim as usual now we're going to add Sim to our installed apps to register it there it goes and I'm going to cancel this by the way okay so now we need to run enrock so what we're going to do is we're going to call from our ajango app an external server which then colorizes our images and then when that's done which will be a while it then sends a web hook back to our Jango app back to an endpoint that we'll create that request that the external service will send is called the web hook but the issue is that our local development environment in this case this laptop is not on the exposed to the Internet so we need to create what's called a tunnel whereby an external server on the internet can hit that Gateway if you like and then go to our server our local server it's quite simple but to do that you you need to run some software to do that I'm going to use enrock which is easy to run the tunnel so download and install it using that link and then I'm using Mac here just one command and you sign up add your off token and then you can run this to start the tunnel and so but I'm actually going to run this one so I because I've installed it already so you need to install it come here run enro HTTP 8 8,000 and there you go and you can see that's the we can actually go to it yeah oh this is a nice little feature to check requests I might show you that in a second but this is the that's where it's forwarding it to on our local server and then this is the tunnel that's the externally exposed URL if it sounds complex don't worry about it we it's quite simple and just yeah give it some practice okay so now we've got that endog running and it's running in the terminal there we'll leave that running and now we're going to create our replicate account which is the AI service we're going to be using do the colorizing I've already done this as well but let's go to replicate doom and then you can see lots of things there and then in terms of creating a new you'll just go to go to your API tokens and then create a new token like that and I've already got one here and I can can copy this which I already created so very easy you may need no I think there's a free tip and now we want to add our web hook URL and our replicate API so what Eng G gave us and then what the API token from replicate to our environment variables so we're going to create a file called n and then copy this in core so let's just minimize that and then in core create a file called n this is standard practice and now we're going to paste in our web URL which is running here so this one for me yours will be different because these are created randomly every time you restart en grock and and then replicate API token and this is you want to be a little bit more careful with this I will delete this afterwards because this is your password essentially so people could come in to replicate and create a huge bill if you wanted of AI Services now we're going to add this to our settings file to load the environment variables when we restart our server so let's paste that in here and get rid of that python that snuck in and you can see we've got these we're replicating that there so that's fine great and now in core settings we also need to add our alloud hosts and then our enro URL but exclude the https at the start so let's go back to let's just copy that go down and then search here for there it is in fact allowed hosts paste those in and then we want to paste in our web hook URL I've listed that the from enrock but exclude that https colon and added in that oh no like that good okay now we're going to create the Jango app so we'll copy this and create a model here for Our Generation that we're going to do so go into models paste this in generation ation great note that secret key I'll come back to that and the before URL after URL and then we create our database by making the migrations so go into s create a new terminal and then there you go created the migrations and created a little database which you'll see pop up there deep there is and now we're going to create our views and let's copy this in and then I will explain so go to Sim and then views and paste that in so the question here is how can we ignore so we've got we're going to we're setting up this endpoint which the web Hook is going to call from the public internet how can we stop people calling that randomly and messing around with our database because we want to take a call from that external AI API in this case you're using replicate and then do something to our database to update it to say the job is finished but we don't want unauthorized people to do that so it's quite simple we're going to set you see here we're going to set a secret key whenever we create it so let's go I'll go back into the code here so this is going to render an HTML with all our Generations which you'll see then when we submit we're going a new image to colorize we're going to start the generation take that image URL and then create a random secret ID which we then save to our generation object and then that's the key part because then we get this this is the web hook that we're creating so we're saying this is the end point to the that we want you to call after the external function has run to generate the color image and then that's just compiled and that's then we send we then call the model ID here replicate with get tell it to call this afterwards and then give it the input image URL and then this is going to be for polling to check we we come on to that and then at the end this is what's going to receive the request not from our server but from the replicate server so it we'll come in here and we'll have the secret key here from the URL which we've put in here in that and then we get get the get the body get the data out of the web hook get the output image which is the image that replicate and our color model colorizing model will have generated and then get our the generation object that we created and then check with the secret key that we've given so each secret key is unique each generation and that this means that if anyone calls it firstly they need to have the secret key they won't know that so they can't get in yeah so that's the security and hopefully as you can see it's quite the few little Parts there but it's quite neat and it means there's we yeah it's quite efficient so explanation over on that part let's get back to it so we've created those views and now we're going to create the template here to to display all the generations you can see it's quite big and I'm going to copy that then we go up and then we're going to create a folder called templates in Sim templates and then a file called generations. HTML here there we go and as you can see there's styling here and then there's a form here using Alpine JS to add which is very easy I've got other multiple other tutorials on Alpine GS so check that out if you'd like to see it which is really nice of adding JavaScript likely to your Django templates what's going to happen is that this JavaScript will send the input black and white image URL to the start generation view that we saw and then we begin that process that I explained then it's going to pull and so it's going to have 30 attempts one a second to check that the generation that we've got is completed yeah very simple and then we display the generations there so enough explanation let's update our URLs so copy that go to core URLs paste this in to route to sim and then we're going to copy this and then create Sim slurls here urls.py to route and these are our four roots okay now we're going to run our server with python manage.py run server here's a little preview of what we'll look like okay and python man run server visit and this is the default image that we can just click great submitted and there you go that is the image so if we click on that and click on that this is that's the original which is very cool on top of I don't know somewhere in New York and then this is the colorized image which I think is fantastic so I've got this as the default image every time but let's I've got some other images here list of them let's add this one pasted in sub click submit and then it takes a little while to submit but and now it's submitted it and then replicate has been very quick and then has colorized it and then sent back to our web hook and that is our after image which this cool little more seier than I'd like but there we go and if we go back to our app you can see here this is if we go to our views in particular we are printing the return from the web hook data and this is the data that replicates it sent back to us so that's our input and then this is the output on hosted on their site and as you can see it took 4 seconds to do so that's it here are some more that I have to mention that I made earlier and you can produce some really amazing images with this but as you can see this involves AI generation and then shows how to use web hooks as well as using them in the browser with en gr which is a nice technique to learn and imagine you might have some personal photos black and white perhaps of your relatives or grandparents that would be awesome to colorize hope you enjoyed that uh link to my mailing list for all the free content that I'm making regarding Django and as well as my product Photon designer to build Jango front end much much faster than before besides that I'm making more Jango content weekly here are a few more videos of mine all the best to you

Channel: Tom Dekan

Views: 1,026

Keywords:

Id: -04pgby8tVE

Length: 11min 6sec (666 seconds)

Published: Sun Jan 28 2024