Creating a Machine Learning Based App in Django Complete tutorial 2020

welcome to technology for new and today I am going to do a live session where I would be creating a live Django project which would have a data science part as well and I would try to cover as many things which are required to create a web application using Django so let's see what are the topics we will cover and what are the steps we will take during this particular project so my idea was to create a django application not to just host a blog or or a website or something but but the idea was to have a web application which does something related to machine learning so what I have created an application was the open source data MVC which is available right to do the self learning so I have created an application where the target is to predict the mileage of the car based on the given information and that all would be through django and over the period of time you would realize django is how much convenient on creating such web application and also to create a quick POCs based on your data science project or any other requirement which you have where you would be using Python for doing that POC so these steps which we would take for this particular exercise would be we would have the training data and then we will train a model we will create a regression based model then we have to create a form where the user would give the values of a particular cars detail and in return the backend or the system would risk reply or respond with the Alice per gallon of that particular car based on the given historical data we would train the model in that model would finally help us on getting the prediction for the new given data then we would also have some interaction with the database where - just for the sake of showing how to get it done I am using a MongoDB database where whatever user would give us an input we will score it through our back-end and once the user says yeah he is with it and he's satisfied with the answer then he he wants to update the database with the this new record where he is confident the answer was correct and then we will store it as our next set of training lay down then we will also have the form to update the same data to the backend and then we will also have to see how to deploy a model or how to integrate Sackett land based model in Django in throughout this all steps we would learn how to have a HTML files in Django we'll also learn how to serve CSS file or static files in Django database connection with Django templates in Django we would come to know how how this template text would be helpful during creating the HTML or creating a dynamic web site or serving a model is a web application which is really good part of the Django and then how to create forms in Django overall so this is the overall learning and the target which we are trying to achieve throughout this particular video so let's start with it let's have a quick demo how our application would look like so this is a dummy application which I have created so it has so this is the server Django server where it is running so server running and this is the console where my database is running and this is the application then so I have filled the form so the user would first fill the form and then it will say submit and then from the system back-end we would give the response the mile per gallon of the car would be near around 17 based on what model then do you want to update this to our database so now we will say submit and this particular new information would get update to our database so once it has updated and I say view of database so my numbers have so my numbers increased so earlier it was 93 now it's 94 I go back and I just seen something else I update and now my values are changed and let's say I want to submit it to database I update it and my database is updated so this is the whole application a very simple demo able application which has a model in the back and we are surfing it so let's start with the project to start with the project we have to go through the few steps like creating the web application and to start with the project we have to go through some steps like first is reading a model so for creating a model I have prepared a very short notebook I have prepared a short notebook where we can just simply have a look so this are the models which I am importing just to be sure I'm using a pre-processing functions to clean the data as I I know that there is some missing value in the data and we want to reprocess such data in our model in our web application as well say if there is some missing value coming through our web page or the user is not giving that information we should be able to process it so far now horsepower has the six missing values and for that we would be using and for that we would be using missing value imputation so I have to just add it into the my data mapper first power pre-processing dot computer unit will take care of it so once I have defined my editor member I will create my pipeline which would just scale all the other variables and for the horsepower it would do the imputation and for the origin as it's a categorical value for as we know I would just do the one hot encoding of it and I could prepare this model I will choose my x and y variables simply fit the pipeline I am NOT doing any cross validation or anything just for the quick and I just tested it now I have to save the model so this is how I saved my model now I can just check once if I load it so this is this is good enough now now I have to so this is my new train model which I would be using during my development of the application so this part is done now the training data and regression model we created now let's come back to the creating a web application so this is good enough for now for that we would start with a new project so let's start from here CMD activate 5 336 and I would do Django admin start project and I would say mpg say here mpg web app is created now I would just go into inside the folder empathy web app I would say Django admin start app and I would just say it and now this is my application inside my project now I have to start editing it so I would come to which will studio so here now as we are inside the Django project we will start with editing the few simple steps and then we would be all good to start with our application so now okay I have to close my application first which I will standing so I close it now the second part is my database is still running so which is good and here I have to say Python - rot PI server and I just reload and we are in the very first stage now from here onwards we would start editing it so the first thing is we have to create a index page or let's say the first start place of our Django so for that we have the first page of our application and in the views we would just simply say death index we have to return something so first thing is we have to return an HTTP response so for that we have to get from Django dot SVP so this what this would do it would help us on creating a response with a browser would be able to understand so this is we are doing just a dummy but we don't actually need it for our web page for web page we have to use something else and that's called render so just to start with let me first create it once now from here so this is the index but from the URLs Django is understands everything so from here we have to import from so I would be importing Django dot-com dot URLs input URL so with this help of URL what I would be able to do is we'll be able to s define what we are expecting from the browser and how to deal with it so default page or the index page or nothing is defined as power sign and the dollar and I have to import the views that is from my first page views now from views views dot index for server and name is equal to let's just check whether it is working or not and good enough we are able to get the values here now our actual objective is to get the HTML page so for HTML page we have to understand few things and the first concept is called templates in our system in Django we have to create a folder or you can name any anything here that's not a problem but the most important part is coming into the settings and setting the template description so first I would just add the my application for the future purpose and so whatever app you would create inside the Django project you have to always add it in here it's called installed apps and for the templates you have to come and you have to define the folder which we have just created right so this folder which we have created here is should be in the same root folder of the our parent Deb so like manage what be why it should be the same folder now in here templates or you can define it anywhere for me I am just doing it this way Oh a start so I am just adding that path to my template and join at the top of this page we have a base tile which actually gets as the root path for this particular project so it gets as the project path we can just check it by printing as well so for now base tired comma what we want to have is templates so our folder name should be okay it's not so template now if I just have to confirm if I check base died and if I just simply pass this command as well we can confirm our understanding so I am saving it and once the system would be loaded as you can see here it is able to give me the path so this is what we did by defining the template now once we have defined the template we have to come here you have to be in the folder and create some web page so for that I can just simply index dot HTML and in this HTML page I can just simply define now once we have created this simple HTML page lets us reload but it won't do anything because we have not configured or we have not written the logic in our views dot use dot py so now from here onwards we don't want to return STP response but we want to return a web page so render your request and then our HTML page that's called index dot HTML it would be able to find in the templates because we have defined it and something which we want to pass it to our web page so let's see context I say a and the value is hello world so our context if I come so if I reload my weapon so this is how our templates get established now our objective is to create a form for that I have my code handy here so what I have done is I have created a form a very basic form form and let's see how does it looks like so this is how it looks like so in our data we had this many requirements to predict any of the mileage per gallon cylinder displayed displacement horse weight desolation model origin and how I have written it is very simple I have the simple form and the action gives the URL which has to be hit and for me right now it's predict mpg so I have to create a function for that so I will come to here in views and I would create a function request and then the same thing should be available in the URLs URL predict mpg is my target point then I have to call that particular function views dot credit am busy and name is now save now coming back to index.html let's understand what I have written in the form so it's a very standard same so CSRF token is for for making any post request to the Django system we need to have a CSRF token first initiated in the form itself and what it does is it so it prevents us from cross-site request forgery attack which is related to security so it's a enforced from the Django by default if we are doing any post requests to the server that is Django so that's how we just included and everything is taken care the rest is our mean of business which we have two business logic which we have to implement so I have my labels which is what we saw so these are my labels and the input are defined in here so I am just giving a default value so that I don't have to write it every time and the name which we have defined would be given as the query dictionary or the keys of the query dictionary to the server or the Django so this name would be our keys and then what type of the text and all are same as usual in the HTML so I have created one two three four five six seven seven such input text making variables cylinder well displacement well horsepower weight narration mod model and the original origin so this are the data requirements now I have this summit and this summit button would make the call predict mpg so as simple as that that is there is nothing extra here so I define my URL I have my views and that view would come from the index so the starting point is the index so I I just have my values I will just reload and I submit now I get the error there is no I say TP response because we have not defined such a response for that so views now I can render the same value here itself context so we are just doing this to understand how it all works let's say this time hello new world so what we have to do now is in index dot HTML so let's observe the differences what happens after the button click action in our application so I i'm in my home page which is coming through this view index and then we are rendering the index dot HTML with the context hello world now i will come to my index page and let's print our context which we are sending here and the value which we are sending is has to be passed in double bracket and whatever variable we have sent through the context can be accessed here so what we're first variable which we have passed here is a so i can just simply say a and let's observe what happens and now you can see I got my hello world now once I have defined it in my context for the predict I'm busy so when the button action would be called so this particular button when I will click it it will come to the predict MPGs but we are still rendering the index dot HTML page and our context value is changed so we will we will see how the value gets changed in the UI so I I am in the hello world so we are in the index now I am doing going to do the action submit and as you can see now my values got changed so that's how we learn how to send a dynamic data to the UI in the same HTML page so far we have done this now our next action is actually to take the data in and predict the mpg so I am I have to now get all the values which we are sending through the particular input values or input text so our request if I have to show it request friend if I print it let's understand what happens so this is my console I come here as you can see our request is a post method so now I can access it using a post method if request dot method dot method is equal equal to post I would just say print something just to confirm or understanding I reload again and you can see so the method was post which we saw here as well now let's edit it what extra so now I have to get all the values through the post method so that has a query deck so how to confirm it we can instead of typing hello world we can tie the quest dot post dot dick if I convert or check the datatype now I have just reload this refresh again I will do a submit and I can see my values here now so it's inside a dictionary and it has all the values and then my each element of the input is a key and I can access the values through this particular post method now what I have to write this so if my request what method is equal to post we have to simply say request dot post as it's a dict now what I can do is simple get a particular value which I want similarly I can access all the variables so my value came perfect now I have to just simply do it for all so I got me all the values now once I have my values I have to reload my model as well so for that I can just simply for that particular purpose I have to get my model first and we created our model in here so this is my freshly trained model in the weather I can just simply create models and I save my file here from so we got our model now in our model we have to score it they score it we have to understand how to score a dictionary instead of a disk or to score a dictionary data and our model is expecting a data frame so we have to create a data frame for that so for that particular purpose I have a dummy example on how how it would actually work so if I pass a dictionary I have to prepare a database so just to show it how the data should look like so if we will create the data in this format and simply use it to score it so once if I score it I will get the predictions directly now I can just simply get it here so my test data for that I have to import the pandas I will load my data and then I have to score it to score I would use this particular come on reload model I would say score well is equal to this and now we can actually pass not something random but our actual value now this is the score we will be sending it to the end user for that particular purpose let's have a actual dummy data or actual sample data which we want to score so this is our actual data let's put it in our form so instead of dummy data we have to fill actual value and we are good now this is my dummy data which is the kind of actual data we have placed our model in our predict mpg and we are rendering the value and now we have to just simply check whether it is working or not so I come to my model and ice so this is my default value here and I am going to score so when I hit the button which is perfectly good now it says model here is not index so what we have to check is what we have made a mistake so in here I have created model well and our model takes over this particular model takes model here as a space and in my UI I am passing model so if I come here now model yet is a underscore we have to make it without underscore model here miss pearl - damn model here and then we were just really temp to model here I hope this works now submit and we got similar model here not in index okay I got it my mistake I have to pass time to here time to and now we were should be able to do it and good enough we are able to do now we have to print that value as well so what I am going to do is in the index dot HTML once we got the information I would want to print it the MGP score is now I pass the variable as a name score well so I can just now printed now one thing has to be kept in mind my index dot HTML is being used for my default pitch as well and for my score page as well and because of that now I would see the mpg score in my index also or in my default page as well and once I do the submit I will get the score here so before that that variable was not there hence it was empty now the value is is there it would be able to print it so so this is a quick which we have already achieved now now we have to understand few things what if I don't want to show any of this information in my default web page but I still want to use the same weapons so what I can do is in Django we have a effects statement that comes from the ginger tags to explore this Inza we have to understand a small way of defining the variables in Django templates so how to do it is very simple we have the start and end of the code so this signifies the start the curly bracket and the percentage mark and the percentage mark and the curly that defines the end of that particular so now we have a start code and end code here if I have to write if else I have to just simply say if my variable name and now without using any curly brackets so if I have to define anything individually then I have to use the variable inside the double curly brackets if I am using the codes already then I don't need to define it now what I am going to check is if a score well exists then do this statement else nothing I can just simply close the if statement to close the if statement I have to just simply say and if and we are good enough let's check what we have written I got my default page now without the text if you see the text is not there anymore I do a submit and I see my text this simple it's really this simple once you get to hold off know about this it's all done there is nothing more to learn in the if else what maximum you can have is you can just simply have another codes start an end and then you can see say L if good enough or you can also have else but right now we would come to that uses later but this is how usually the AFL's statement is being defined in Django templates so I will remove this for now let's move to the next part so far we re we are able to create a form we are able to take the value as a post request and then we are able to selectively print something using if-else statement based on one of the context variable now our next part is to learn how to do defy the HTML page to edit this particular page I have my code already handy with me and I am just using it here and now you can see this is a very standard HTML page which has some style sheets which has some jquery's and and some headers some footer so this is this is where some footer belongs then we have some headers and I have just replaced the one value which I have to bring back so predict mpg is correct and now here I have to just get the statement again so here I have my STR page so now let's run it and see what happens and I load it I can see the text but I do not see anything in a style format meaning I am not able to find any style or the CSS not implemented or they are not working so the reason is we have to host those at particular files in our Django application or in other words we call it serve the CSS files or the static files before doing that we have to do some modification in our settings dot py and also it's a very specific to the Django and based on your preferences so in your setting file what you have to do is there is already a static URL defined in thee as a default setting for as a default static URL variable and to host all this variable first we have to have the CSIs friends so for that I have my CSS files already which is in this one this all would be available to you in my github link for this particular application now the first important thing is your CSS files are very specific to the applications so first the CSS files or any of the static files should belong to a particular app and then later on django would bring it forward for serving so we don't need to worry about it so very first step is go inside your app and paste your static files whatever you are you want to have inside the name folder name static once you have the folders so this all are organized here and we will just now serve this files to serve these files we have to come to these static settings page and define a new variable that's called static root and this variable would have our so this is the only change we need to do in the settings page now the second important thing which has to be done is just one more time in the air place a static folder have your files inside the second part is once you have placed it inside the app again not in outside of the system or the root directory create a blank folder called static and in the settings you have to just simply define static route then come to your console this is my command prompt Django and I close the come on and now I have to run Django - dot Pui and simply collect static C collect static and enter so it says this many files have been copied and where it has been copied in empty folder which we just gave so admin user default F which comes with the Django so don't worry about the admin file but this CSS files which we place inside the app are now outside and they are now ready to be served from the January so I am run my server again and in the HTML file I have to do small changes now to load a HTML or CSS file in the system or in the template or the HTML page we have to use a particular command and that's called within our curly brackets and our start and end quote I would say load is static once I have said load static now it is available as a variable to my Django template within my Django template and here onwards I have to edit very small pieces of the H ref for each style sheet and the JavaScript files to define it I'll just make a space use up curly brackets and start an end of the code call your variable static and then you're filing with a space and this all would be inside a double quotes and this would be in single towards them as you can see now this is how we have to define the style sheets now using our static variable and the rest would get mass to the particular static variable now all the others has to be done with the same approach so I would come here and I will replace all similarly with all the JavaScript files which are at the end so I had to replace all the files and done now let's try to reload it after starting the server so our server is started reload and now you can observe our style sheets are available in our system submit which is good origin unknown categorical future to present during transform which is fine which is good now this all messages would come to you too and to see if something is found or not so CSS tool plate style dot CSS is not found which is fine which we are not also using it so not a problem which is this one remote so we are good for now now we have to step ahead with our next learning and that would be to send a default values now if I want to have a default value through the system itself or let's say I enter some relevant values and I submitted the score for which I am getting should be relevant to that particular value so now right now what what's happening is so this is how I'm sending the value now once I do a submit my values get reset again because the way we have defined in our index dot HTML and that is absolute values in the value column now here I want to send some value through the back end which is through our context now I will try to get the new values at that particular point for that particular purpose I have the values already handed to me in here in the index now instead of using this default context we don't want to use it we want to send some actual values so I would define my context is equal to my ten values would be variable and now this context has now temp variable I will come to my index and let us understand how the temp variable come into the picture if I reload as you can see all the dictionary values are available to me for use now what I have to do is I will come to the system as we have already seen now I want to access a particular key value and I would place it here so how I can do is a simple and dot and I will replace this with and here my name's so to access a dictionary based on key just pass on the variable and use dot cylinder or the key name and you would be able to get the values so let's just check how it is working from the back end now I will reload and as you can see now 8 3 0 7 I am able to get the values I will just quickly change at all for all the variables and we are done we got it submit and to get the values even after submitting the values are getting the prediction like we are losing it right now we have to pass it in our context of the second function that is predict mpg and for that particular purpose I would just pass damn and the value to order and now let's check whether it is working or not I submit and good enough now we are able to retain the values in the UI I will just remove the this variable from the top which is this one good submit and we are good now now the second part of this particular use cases to now send the particular information to the database and that is connecting to the so for that in my system MongoDB is already running which is this one now we have to add two more URLs to our application and I will come here I have to add first is view database which would just give me the number of rows I have in my data now and for that I have to come to muse and define the new function that's a new database request and we will do something later and the other function would be update database request and we will do something in the URLs again view database dot database name is equal to new database then similarly the second function would be update database perfect now we are our URL is ready now the second important thing which we have to do is in the index page we have to have a form which works only when we have scored and the second is we need to have a web page which shows the number of records in the database for that we have to connect so for that we have to have something for this so this is the URL which I have and I have the home URL as well so let's see how this home URL and view database URL would work just come here and now home URL how it would work as HTML in your HTML tag where we have the home which is this one so home just say H ref as a forward slash and it would work as a home and for the view database simple view database a URL which we have added view database which perfect and it will directly work for it now we have to add one file that could mean you DB dot HTML and here we want to show the number of rows for that we have to connect to the database that is our MongoDB database I have already created a notebook which would be available and this has all the queries required and these are the supporting libraries which I want to get initiated in MongoDB so from MongoDB then I need to connect with my database so I connect with my database then I have to connect to my database that is this so I have created a database called MPC database if you want to have a little information more about how I have done the MongoDB setup I have another video which would just I would just point out so that you can follow it and then I think we are good enough for this one so this has the information of my database and then the table and to get the number of rows I have to just simply do collection DV dot find dot count this would give me the counts row equal to this I would just render the values context is equal to value this value and now instead of index dot HTML I have to pass view BB dot HTML let's see how it works I come to view DB good enough in the beauty B I have to pass count of row which is here the number of the chords in DB and I just reload and I get to see my numbers this is good enough but now let's also implemented the another feature which we wanted and that was after I submit if the value is fine for the user he will send another information or a button or he will click a button which sends all this data to the backend or to the system now for that particular purpose we have to change this particular form based on the given information so how would I do that so the first connection which I get the idea is the way we did the hide and show of this particular statement in our index dot HTML so if I come here in here we have used if score well is available then we would either hide it or show it now can I do the same thing with all the forms also so right now this particular form is doing the credit mpg called now I want to do another call with some form which we'll call update database can I use the same form because I want to the same values and send it to some other action using if else and the answer is yes so what exactly I have to do is I have to check if my variable exists if yes I have to select different action in the form so if is cor well exist then we don't want the predict we want action update database which is good I'd remove this extra form if then I have to have else else I need to have this particular URL and then end and if then rest would follow now again if is core well then we don't want oh we still want this particular action to happen no matter what so we are good enough of not having this particular values but right now what want to send to the back end is the complete information which also has the mpg right now we only have inputs which has all the independent variables we also want to send the dependent variable so for that we certainly need the if score well so every score will exist we want this input and our variable has a value to it and type would be hidden so that it does not come in the view and else nothing and then we just simply would end the so if score well would be found we would call the update database if not formed we will call the predict mpg similarly if score well would be there we would want to send that value as an input if not we just don't have that variable with our system and again we want to show or hide the values I would just reload so right now if I do submit mpg score is sixteen point nine and it says submit here which I don't want I would want to have in a different way else else this statement submit and I would also warn the user a message which says h3 if the response is good submit if response is good do you want to save it in DB and submit and I would have the error which is perfect now let's just rearrange the statement which is this particular one we want it at the top just check it again if a score well submit they score is sixteen for nine if they respond is good do you want to save it in DB and submit and we get to see update database perfect now I have to come to views and then edit update database for this particular purpose I have to collect all the values I will collect all the values and then I also need to collect this has to be modeled here as we are sending into database another value which is mpg and let's just confirm whether I have defined it or not hidden origin well and the value would be mpg well request dot post and BG well so now this temp has to pass through this way not that way we have to just send it to insert our temp value is completed I have to say collection dot insert and temp and we are good what I have to do is simply let's just render the another page which we have and let's just count the data one more time so I insert the date data first and then I count and then count is already given and we are good to go let's just do it again in the UI myself and I score once I score I submit it to system and then I get my new I now so far we learned about how to connect with the database how to send data how to score a model I mean how to use a model in django application now there is a very important function and a feature and that's templates so when we are doing all this exercise you would have wondered now I have another web page I have to do all these things again like beautification of it like header and footer are the cick thing which we use everywhere right so it has to be constant so for that particular purpose we would use the templates in another way now so let's see how Jinja or Django templates help us on maintaining this templates where we can use same piece of HTML quotes again and again in a blocks so let's discover it for that we have to restructure our web page so right now we have an index dot HTML page and then we have a view DB dot HTML page and for both we want the same header and footer and we just want to change the contents in the body part for this particular purpose I would create a MT HTML template and copy paste and let me just name it header page good now in this header page I would open it and I would remove all the contents from the container which is from here to the end so inside the container till this point now this can become my template which I would just reproduce or reuse every for every other page and in here I have to just simply call another ginger function or functionality which says open and end of the block and simply say block and then say content then close this particular block that's called end block so this is my content now so assume this is my container and whatever would be filled inside this containers would have good just populate on every other web page so now this is my main page and let's say of the index page I would just want to have my bare information which is from here inside the container whatever I have up to here this all is gone so this are the piece which I were just want to fit inside my head a dot header page dot HTML now what happens is the block which we have defined here would be accessible in index page by just calling a one particular line and very important this particular line should always be in the first line of the next page wherever we want to use that particular block say extent and the page name header page dot HTML and we are good to go I have to again say block content and at the end shall we try it now so if I have to be in my first page I reload again you can see all the things are available and now we are using this has a template and our index contains only whatever is required and our header page becomes the block I mean I structure which has a block and things can be put there now the same thing can be added in my view DBA as well I would just paste it save it and now enter and if I go to database as you can see my headers and footers are available to me in here as well and I don't need to relocate or redo the same code again and again for any of the exercise this symbol I really like this angle with this all features of it hopefully they all are available in every other tool area but for me this was good enough so I am just going to do some experiments now submit I get to see my data now I want to submit this to my database let submitted and now there are total 99 rows in my data I go back to home let's see in some values 20 model year to 90 and submit and I got some other values submit I got my hundred rules so just to confirm throughout this exercise we got to learn a very simple demo of training a data a model saving a model getting it ready for hosting it in the server or Django server or application then we learned how to create a form how to get the values from the form we also got how to send a response to the server then we also learned how to send the data to the database simply deploy the server HTML in Django serving CSS files perfectly we learned it using collect static database connection template tags which we learned using ginger template tags for controlling HTML files which we learn by creating a header page and then using the block serving a model as a web server forms in Django so I hope I was able to convey whatever I wanted through this particular video and I hope you liked the idea of how to serve a model in our web server in Django that's all for this particular video if you like my videos the content of this channel please consider subscribing to it and have a great day thanks for it you

Channel: Technology for Noobs

Views: 54,282

Keywords: python, introduction, data science, 2020, machine learning, python tutorial, django, django python, getting started with django, web framework python, tutorial, python django tutorial, machin learning web app, regression problem in django, Creating the Django project, Setting Urls for the app, Setting page in Django, Adding form in Django App, rendering template, POST method data consumption, If else in Django, CSS files in Django, Connect with MongoDb, Block contents django

Id: e-ZJekJXGfI

Length: 57min 49sec (3469 seconds)

Published: Mon Mar 02 2020