Build a Photo Restoration App with Python

hi everyone I'm Patrick from assembly Ai and in this tutorial we built an AI power face restoration app that can restore old photos so let me quickly demonstrate an example here we upload and submit a file and now it will run the model in the background and here we already have the result so we can see the original image and then the restored image which has a much better quality and the app is built with flask and for the model we are going to use replicate that lets you run open source models with a cloud API you can get started for free here and the model we are going to use is called gfp Gan that you can also find on GitHub and then you will also learn how to deal with file uploading in flask and before we start I want to give a quick shout out to this very cool website restorephotos. io this gave me the idea to this project here of course the UI looks much nicer but in our case we learn how to build this yourself and have more Flex possibility and control over this but yeah check this out really cool website and now let's get started so let's start from scratch in a new folder and implement this together and the first thing I want to do is create a virtual environment with Python 3 Dash MB and vnf and then I activate this and now we can pip install our dependencies so in this case we need flask then replicate so this is a python SDK and python. nf2 work with a DOT EnV file where we store the API token in a moment and now let's create two files a main. pi file and another file where we want to run the model so let's call this uh sorry photo underscore restorer dot pi and let's start with the main. pi file where we implement the file uploading and for this we can copy and paste a lot of code from the official documentation and use this as our startup so let's copy this and go over this so we import the dependencies then we Define our upload folder so let's call this static and then images and we have to create this of course so let's create one folder named static and an inner folder that we call images then we Define the allowed extensions so this is a set here and in our case we allow p and g and JPEG files then we create our app and set the configuration with the upload folder key to upload folder and then we can say if underscore name equals underscore Main and then we say app dot run and debug equals true and then we want to do one more thing which is good practice to also restrict the maximum content length so if we also set this configuration to this number then this is the maximum allowed file size is 16 megabytes and now we have this and now we need to Define our routes so let's create one function that we call home and here we return render template so we want to create a template that we call index. html and we also have to decorate this of course so we decorate this with app dot route and we just give this a forward slash so this is our home page so now we have this and now we create a new folder that has to be called templates and in here we create the index. html so now we have this and now we want one more route to upload the images so I think we can also copy a lot of code from the official documentation if we have a look at this part yeah we can reuse this and change this only slightly so first there is a helper function to check if this is a allowed file so I'm basically here we checked the file ending and check if this is inside this set then we Define a new route also at the same address so that the home page but here in this case we only want a post request and then we can do some error checking so for example we check if we have file in request. files then you could display an arrow here so let me simplify this a little bit and remove the flash statements so if we have the file then we return redirect to request URL so basically we

return back to the home page to this route then if we have the file then we can extract this and then we can check the file name and again if this is empty then we return redirect and if we have a file and it is also a allowed file name then we can get the file name by running secure file name and then we can save this so they do it with um OS path join and call this but you can also do it differently so you can say full file name equals and then let's say a DOT and then plus and then we can use the url4 and this is the static folder and then we have file name and the file name equals to images and Slash and then plus the file name and then we can say file dot save Full file name so let's print this here and see if this looks like the correct path and then in this case we want to return render template and then again render the index. html and here as a parameter we want to give it the file name and this is the file name and then of course we have to implement this as well so I already prepared this so let's quickly copy this in here and go over this um this is just a simple HTML file where we display a H2 heading and then this is ginger syntax so if we have the file name then we create a div where we have a P tag and then the image and here again we use this url4 where we check static and then the file name then you can also give it a style and then the same with a restart image URL that we have to add in a moment then we also have a P tag and then here in this case we use this is a link and then we also displayed the second image and then we need a form where we submit a file and the action is dot slash so here we send a post request to the slash route so then we end up here and now let's save this and run this and see if this is working so we say python main dot Pi then we can open this and now we can choose a file so let's select the file and hit submit and you see this is displayed so yeah this is working so now the next thing is to do to implement the photo restorer and for the photo restorer we use the replicate API this is also super simple to set up so let's click on explore models and here you can have a look at all the available ones in our case we click on image restoration and this is the one we want so gfp again here you can for example see a demo and also click on API here are all the instructions you need to follow so we say pip install replicate we already did this then you need to export the replicate API token so in our case I want to store this in a DOT EnV file and then you say replicate API token equals and now here you paste in your token from the dashboard so I will do this and come back in a moment alright so I copied the token and now we can move on and copy this code so this is basically all the code that we need so we import replicate then load the model and the version and then we call the model with these inputs and in our case we also have to say from Dot and we load um we import load dot end and then we call this so that we have the API token here and then let's wrap this in a function so let's Define predict image and this gets the file name and now let's indent all of this and here we say the inputs and now this gets also the image key and uh sorry let's make sure this is the correct indentation and here we open the file name in read binary mode and then we also Define an

upscaling factor of two then we call the model and print this and return also the output so this will be a URL and then in the main. pi file we say from photo restorer we import predict image and then down here we call this so we say the predicted image URL equals predict image with the full file name and if we have a look at the index HTML then we see we called the parameter restored image URL so let's make sure we use the same name here and then we pass it the predicted image URL and now this is all that we need so now if we reload the page and then again uploads the file and submit this now this will run the model in the background and we get the restored image and this looks the same that we've seen in the beginning so this is working alright then that's it I hope you enjoyed this tutorial now you learned how to work with file uploads in flask and also how to work with the replicate API so here this is a link so we can actually click on this and this leads us to the replicate delivery URL and here we can save the image if we want so now you have your own app where you can restore all your photos and before I end this video I want to do a quick plug of our assembly AI playground where you can test all our AI models for free so for example you can simply paste in a YouTube link and then click on next and here for example select transcription summarization and so on this is all without a credit card without an account so feel free to play around with this I would be happy if you try it out and then I hope to see you in the next video bye