Docker Tutorial 3-Deploying Machine Learning Models Using Flask And Flasgger

Key Takeaways

[Music] hello all my name is Krishna annum welcome to my youtube channel so guys we will be continuing the discussion with respect to docker and this is the tutorial 3 if you remember in tutorial 1 we had actually discussed about why and what is docker we discussed about docker containers and virtualization in the second tutorial we actually build a flask app for a bank note authentication and if you remember guys we had actually created a model file considering this particular problem statement right and we created the model pickle file which is called as classified article after that what we did is that we also created this flask app and we were able to run it we also tested through postman so all these things was done in the yesterday's video that is part two but if you are new to this particular playlist guys please make sure that you watch this Bailey playlist from the first video of docker tutorial one the playlist link will be given in the description now in this particular video we will be seeing how we can create a front end you know front end UI quickly you know with respect to the flask web app now guys usually in order to create the front end you know for showing or displaying the web page you know it usually takes a lot of time with respect to the UI perspective with respect to you you basically have to be a front end user and yes I don't have that much experience in front end so what we what we can do is that we will be using a very special library which is called as flask er okay this particular library we will be using flask there this is the github page with respect to flask and this this library will actually help us to create some front-end UI you know it will help us to create the UI part in a much feasible way and much easier okay it will not be that much decorative but it will be a very good front-end web app okay so we will try to discuss how to actually create this kind of front-end web app but before that what you have to do is just open the Anaconda prompt so first you have to open the anaconda prompt and you have to basically write tip install / ker because you have to install this particular library okay so tip install flash girl so I'm going to do this and probably you'll be able to see that requirement is already satisfied because I have already installed it now after this we will try to create a front-end UI with the help of flask now what I have done is that guys I have used the same code copy over here in my next file okay now first of all everything is same every code will be same this Web API will be same you know we have two web api is in this place that is slash predict and slash predict underscore file and we have seen that with respect to this how we could actually test with the postman but now we are trying to test it from some front-end UI right we are trying to test it from there so for that what I'm going to do I'm just going to copy the same code now I am going to import this particular two libraries that is import flash there and then from flash girl I am going to import swagger swagger will actually show us or it will be just like an API thing which I'll be just showing you right now now this swagger will automatically generate the front-end UI part but you have to follow some steps guys those steps are very much important if you follow them in a proper manner then definitely you will be able to get a wonderful front-end design okay now when you import this to line or just you import this line itself it is more than sufficient from freznar import swagger and then inside this swagger you actually initialize the app app which app from where the point of execution is actually starting right it is actually starting it from this name is equal to min right so same thing you can see over here and just use this particular app inside this swagger object of itself so a great class now once we do this guys that basically means now it is giving an indication to the flask web app you know to say to generate the UI part and definitely there will be a different URL for that now in order to generate the URL guys it is sorry in order to generate the UI part you have to follow some steps now this part that you see everybody just see this right now this is the function predict node authentication you can see it is nothing but we are added a decorator / predict right so you can see compare it from here / predict this was the same function right now inside this this was the code initially okay now I have added some extra description over here right now this is the description that has got added will be discussing about this description what exactly it is okay then you will be able to understand now what this description will also doing we will be able to understand once we run it okay now this is the description that we are giving with respect to what kind of UI we want okay in the UI we will be getting this kind of title let's authenticate the bank node this is using doc string for specification okay so this is just a title and description and make sure guys when you are typing this you have to follow the indentation part because if you don't follow the indentation part it may fail so when you are pressing enter from this particular column you should start writing the sentences please be sure with respect to that okay so I'm just going to you know remove the spaces I don't require it okay perfect now here you can see that I've started my description saying that let's authenticate the banknote and this is using doc string for specification so this is my title altogether okay and always you have to start with three codes okay this is just like a multi-line for putting multi-line comments we basically use this kind of operator then we start with triple - okay just - and then we start with a parameter called as parameters okay so that is the standard approach how you actually use flash go now understand how many variables we have to create in my input four variables right in my web 8.you web you are you know web app UI i have to create my four variables from where I can take my input so one is variance skewness kurtosis and entropy so that same thing I am doing over here inside my parameters first I will start with - okay and remember again here also you have to follow the indentation when you press Enter you basically have to start before this by writing this hash okay or - so just start with this okay so first thing is that name what is the name of the parameter that I want over here so it is first one is variance so I'm writing it as variance then the second parameter is basically what type of variable it is okay whether it is a query whether it is of form that all you can write so in I'm basically putting it as query because this is just a query parameter okay there I have to replace with some value okay what is the in what is the type of that particular variable whatever variable are defining variance over here the variable over here defined is number then how do you follow this particular project I just go to this github link the link will be given in your description you can just follow the standard approach in type you can also put string okay you can also put string you can put number you can float float and different kind of parameters you can definitely explore that then whether this parameter is compulsory or not by we can decide it by the required parameter if the required parameter is true that basically indicates that variance has to be given compulsory now similarly with respect to the skewness parameter I will be following the same approach I have name is equal to screen s in is equal to query type is equal to number required is equal to true similarly with respect to courtesies I am going to use the same approach because all are numbers and all are required parameters okay so this are my parameters that I have defined I have four parameters you have to define in the same approach if suppose you are going with respect to string just change this type is equal to STR okay type to STR ing string okay type is equal to STR IMG now this is fine we also have to add one more parameter which is called as responses now this basically says that whatever response status that you get suppose you get the response status as 200 okay you have to display this particular description apart from that whatever output will be coming from this particular function right whatever output we are getting from this particular prediction value you know that prediction needs should be displayed in that particular response output okay that is what it does that basically means whenever I get a 200 status this particular output will get displayed that is how smooth flash Gary's okay so it is very very important guys that it will also show you a wonderful approach to quickly create a web UI envy you know so that web app UI end because you don't have to hesitate even though you are not a very good at UI part you can definitely create it with the help of this now here I have done it and remember guys all these variable variance skewness or kurtosis and entropy should be same like how we have actually followed it over okay perfect now there was one more function that is slash predict file and we know that we are going to give the file in the form of post that is my CSV file so here again I have started with my description let's conjugate the bank note this is using dot string for specification in the parameters now my name is basically file now in the in parameter I am specifying it as form data okay so this is basically a kind of form data previously in in what what was it it was query parameter but this is now form data and remember there is this these are like inbuilt keywords okay form data type you know these all are inbuilt keywords then what kind of type we have we can either put integer string but right now we are actually giving this file that is test files or CSV so I am going to give that value as a file name okay and this file will be same like this particular file itself okay now when I specify file guys I'm just going to give my file over here that is what it basically indicates remember this name should be in the name equal to in this particular value whatever I have given and this particular code is almost same and again here I am going to give the responses if the response status is 200 and we're just going to get the output in the form of list that is much guys that you have easily created in hardly 10 minutes the whole UI part and yes you have to explore some of the flash core concepts guys explore about this kind of parameters if you are strings if you have integers what kind of value can get for definitely for integers you can use number okay now let's go and try to run this particular code and see how we can open this in a better way you know in our browser that we are just going to see it now I'm just going to go over here you can see that I'm just writing this and after this you just write API Docs okay so when you write API Docs automatically your flask your UI or swagger API will be displayed in front of you and this is your web app UI guys from here you can now request anything okay now just see resemble this particular page if I go to my if I go to my code over here I have one get request so if I go up so this is my get request right this is my get request function and I have one post request function this is my post request version now if I go to my web page this is my get request and this is my post request okay now let's go and explore the get request now if I go to the get request how many parameters I have given first of all let's see over here it says slash predict let's authenticate the bank note so where was this description that I'd put over here right so let's authenticate the bank note pretty much simple now this is the title this is using docstrings for specification so this is this particular title this is using dock strings for specification then you have parameters you can see parameters over here what are the parameters the first parameter is variance I have variance over here second parameter is kunis the third parameter is kurtosis the fourth parameter is entropy so I have all the parameters over here you can see it clearly and one more thing you can observe I told required is equal to true right required is equal to 2 required is equal to 2 required is equal to so here it is giving a star mark saying it is required now if I click on try it out and if I try to execute first of all it will say put some values inside this right now let me just give some values inside this so suppose I say 0 I say 2 3 & 1 okay now if I go and click on execute as soon as I click on execute this shot is going to call this particular function and then we are going to get the values of the variance skewness kurtosis and improving and after that we will take all this particular value and we do the predict and finally we will be getting the output okay pretty much simple now let's execute it so I have executed if I just go down you can see guys this is my cool URL I can hit directly this curl URL otherwise this is my request URL I can also hit this and here is my response body you can see the status is 200 hello the answer is 1 to 200 the output values this description where we had seen we had seen over here right we had seen over here and same description we have seen over here and this is basically my response body pretty much simple way how quickly you have seen that we have created this particular you know easily we are actually created we are getting the output very nicely by using this particular function now this is awesome now let's go with the next post and remember guys in this post I have to choose a file so let me just click on try it out and let me just choose a fun so I am just going to select the test file dot CSV over here and here I have given it it is a required parameter so I definitely have to give it as soon as I execute guys now you can see the output I'm getting all this particular value this is my response and this is my code description and output now you can see that how we have executed both the function you have also got a swagger API a wonderful UI part you know where you can actually explore it now in the next videos guys we will start with docker will start with docker installation my flask app is ready you know now I am trying to what I'll do is that I'll try to daughter eyes this whole flask web app and we'll try to show how we can move from one container I mean how we can move as a container to different location and execute it so yes this was all about this particular video please make sure guys you share with everyone this is an important tutorial where everybody should know about docker and now yes I will be seeing you in the next video have a great day thank you one and all bye