Deploying ML Models in 60 Minutes using Python, Flask & Render | Step-by-Step Tutorial

hey guys welcome to the tutorial of deploying a machine learning model in this tutorial we are going to deploy a already trained model into live production I will try to keep things as simple as possible and I hope you will be able to follow along when I am going through the tutorial if not please post your question on the chat and I'll take the questions at the very end of the tutorial so with that let's start so for this tutorial I'll be using this notebook so our topic for today is deploying a machine learning model and we are going to create a web application using flask a python web framework and deploy it in the cloud using render you will also learn how to add HTML templates and see how to style it using CSS very basic uh by the end of this tutorial you will have a basic understanding of how to create a web application using flask integrate machine learning models into the web application and know how to deploy a web application to the cloud the following topics are covered in this tutorial first we'll set up the project on GitHub and conda environment and then we'll create a simple web application using flask just a simple like print something on the web page then add HTML templates to the web app then we will use we will see what ml model we are using we will just learn a bit about it we'll not go deep into the ml model and then run the model locally on a web browser publish to GitHub and deploy to render and finally we'll create an API route for the model so that these are the topics that we are going to cover there are certain prerequisites for this uh for this tutorial I would say very basic you have to you should I think you should have very basic knowledge in Python but basically I just mean defining a function I guess a very basic knowledge of HTML tags like body div headings forms Etc and CSS Styles like background color text align Etc and some level of understanding of machine learning Concepts uh just like if you have if you are given with the model you should know how to predict uh with the value okay I think you will be able to understand even though you don't have don't know some of this so try to follow along okay so definitely we are going to solve a problem uh in this tutorial the problem states that you are given a pre-trained email spam classifier model and its requirements basically what are the things they are in the model uh our task would be to deploy the model and prepare it for end users so anyone can go to the site give a email or body email body and will be able to understand whether it's a spam email or not whether it's not a spammable to achieve this we need to design a web page definitely using HTML and uh predict using the model whether it's a Spam or not the web page interface should be as friendly and simple user friendly and simple as possible and in short we have to design a form that takes only one input that is the email body the email text and returns whether the email is Spam or not okay cool enough of all this um theoretical part let's start with creating the simple flask app for that we'll start with creating a new repository on GitHub I'll go to github.com and I've already signed in you can sign in or sign up to github.com I'll create a new repository here and give a repository name so let's say model deployment it can be anything any unique name I will skip the description keep it public add a redmi file you can add the redmi file later but I'm adding it now a git ignore template this is basically a common template used for different programming languages I'll use the python one and a license you can skip but I'll use the MIT license um but just because like it's the best one for open source projects okay so we have created a GitHub repository right so now let's start coding we will be using uh code spaces here but there are different options for code like for coding okay so you can use replit or vs code locally uh for the coding part but I'll be using GitHub courses as it as it is easy to set up I'll just click on code here go to code space and say create code space on Main let that open let that set up I'll also have two uh create a conda environment now what is conda conda is a package manager just like pip and it also allows us to create environments now an environment is useful to manage a static pattern like a certain project uh so if you have a project if you can build different environments for different projects and have the packages required for particular projects in that particular environment okay so this is our Repository so we will see if conda is available for first so you can just say conda version and yes conda is already available let's start by creating a Honda environment so here is the command you can just start create the environment so I'll allow and conduct create minus n this environment name can be something like let's say model deployment and I've assigned python 3.7.10 but uh you can use the latest version also I'll tell in the towards and I'll tell why I have used this particular version so while it's installing let us also install the python extension to code space yep that is let's install this and yeah it's asking permission to install the different libraries I'll just click yes okay just a minute I think there is an issue you cannot you're not able to see the GitHub screen just give me one moment yep I think it should be visible now so I will just repeat the steps very quickly so first okay I just start from creating a new GitHub workspace right so let's go to that yeah sorry for all the issues uh it was a technical glitch I guess so we will just log into GitHub first okay github.com will start uh here click new Repository and let's say model deployment as we as we already have model deployment uh I will just say we do I click on add a readme I'll click on python I'll select the python getting node template I'll select a license MIT okay and I'll click on create Repository we are starting again from the GitHub creating a new repository right so now next we will use a code editor we can use code spaces we can use replit we can use vs code so here I am going to use code spaces and in this tutorial I have mentioned the different steps to install like to use replace to use vs code okay so while it opens I will just install the python extension here let it open I guess I will uh stop the other code space because it might take some usage so I'll just go to code spaces yep just give me one moment yeah I'll just delete this code space the previous one and Here Yeah the code space is now open we'll install the python extension and I'll also check if quonda is available here so Ponder minus just as version and yes uh yes conda is available so I will ins create a new conda environment so yeah here is the code contact create minus an environment name python 3.7.10 so here I'll just give environment name let's say deployment it can be anything you can give any name and I've assigned python 3.7.10 so I'll let it install and here I will yep so I'll let it install first and here we'll say yes I'll let it install all the packages yep Honda is installed I will try to activate this but I think it should return some error let's see yep it says conda is not initialized so I will just say quanda in it Bash that I'm using bash l cool I think it's initialized I'll have to just reopen a bash shell I'll delete that previous one and now you can see the conda based environment here right so we created another environment called deployment so conda activate deployment this will activate the deployment environment that we have created right okay so now we only have a few packages installed here so you can see this 35 okay and so I would like to install different packages in this environment I'll just select this packages installation tap install and enter this will install a bunch of packages that are required for this tutorial okay while it install let's go to the next steps that is create and run a flask web server right so first we'll need to create a app.pi file so here I'll create a app dot Pi file so app.pi file will write all the flask code in this file basically uh everything everything python related stuff will be in this file so let's just right and now the libraries are installed so what we will do first is import flask so from flask import flask full the next step is creating an instance of class so app lask we're just going to underscore name so this will create an instance of the flask class okay and name is basically referring to this current uh file okay a current module cool let's go let's now create a route so what is a route basically so whatever you see on this website this is a route so joven.com is a route now if I uh go to joven.com notebooks it's another route okay it is basically going to the notebooks uh route so I will create a route like this slash this basically means the Home Route that is joven.com okay or for here it will be different so app dot route so the route is kind like so the route is defined as a decorator so I'll just say that and I'll create a function called home and I'll return hello world okay so we're trying to create a flask uh application where there will be a text called hello world right so now what we have to do is we have to run this so we have to run the flask application so I can just copy this but I'll just go step by step so if name equals equals mean and here I can just say app dot run cool with this thing with this uh I'll just zoom in the screen yep I think that's visible but that's better okay so with this we can just uh run the python file let's say python app dot pi and you can see that it's running it's showing up on the right side that open in browser I can click that and you will be able to see a hello world here I'll zoom in here yep that's there hello world cool now the next step is if I want to change I want to change this hello world to net something else I'll call this updated right I'll save it and let's say fresh but it's not showing up the update it's not showing up here so what we have to do is whenever we save uh change something and save it it should show up so for that we can activate the debug mode debug equals true okay and I'll just close this and uh and run the server again to close I'll just say Ctrl s Ctrl C and run it again python app dot pi now again let's see so you can see the hello world updated and now if I change something here updated version 2. it should show up here also yep it's showing up so that is a simple basic flask app uh we have created a very basic flask cap and I think it was very straightforward up till now um yeah the notebook is shared on the chat window so you can just access the notebook from there okay that's creating a simple uh flask application but now we will try to render an HTML template okay for that we will create a new file here new uh folder called templates cause flask uses this folder this template's name for uh better for for their rendering templates right okay so we have created a folder called templates here and then we will create a new file it can be anything let's call it index.html and here we can write our HTML code so I'll just copy this code here basically what we are doing is we are giving a head a title of my first web page and it says hello world from template now if I save this and if I load it will not update because we have not updated in app.pi okay so here what I will do is I'll I'll have to render the template right so I'll render template and just give the path of the file now as I said render template looks in the templates folder okay so we don't have to give the path exact path like template slash index.html we can just say index.html and Reddit template is not imported I mean yeah not imported so we can just import it render template I am seeing some errors here right so I want to remove those errors that is causing by eslint so for now I will just reactivate eslint yep and the error should go yeah cool so now if I update this yeah this has uh so what happens in code space is you are we are using a free version of code space it reloads or stops some time okay or you can we see a we've got an error here so it has stopped we can just say python app.py again and it's starting yup hello world from template so this came from template right so you can see this template had a title my first web page so this title is showing up here on top my first web page and here the H1 is Hello World from template so that is what is coming here but yes we have created a web app and rendered a template HTML template here cool um the next thing we are going to do is creating a simple form so our end goal is creating an email spam classifier it should have a input text area it should have a heading like this it should have a button so this is the next thing we are going to do so we are going to update this index.html file here and we will give a H1 let's say the heading will be email Pam classifier so let's see what we have got here Yep this is again Reloaded or what yeah I think it's again I have to reload this just I'll stop this and again python app.py okay so I am getting an error so let's see what the error is first I'll let update this conda environment here so the quanta environment is this one we are using and yep let's see we will try to fix this error Let's see we will run this app again and yep it's now loading again okay cool so uh I think I was not I think the conda environment was the issue so we have got the email spam classifier heading now we will create a form in this we will add a text area okay and we'll also add a button here that's what is there in this thing so a text area and a button so this text area let's now look at the web page once yup we have a text area and a button so let's modify it a bit we will give a button we'll call it check spam and this text area can have a placeholder like this enter your email so let's do that enter your placeholder equals enter your email uh body okay so once we load save that and refresh this we got this this is good enough I guess we are getting there so we can say rows equals to uh we we can increase the size of the text box so I'll just modify this rows to let's say 15 and calls number of calls basically rows is the height and calls is the width so I'll say width as let's say 25 let's see uh how it looks now yep it is looking a bit better I can increase the width to 35 and yeah I think this is better so one more thing I want this check spam below this so if I can create a different block for this what I will do is I'll put this in a div yep that's there and this is looking let's refresh this this is looking fine in this the this is centered so we can also add a style tag here to Center everything is the naive way of adding CSS but I'll be using this for now just in the interest of time so I'll be adding let's say body I'll align the text to Center okay now see let's see how it looks yep everything is aligned to the center we can also improve the button so button we can give a background color of blue and a text color or the color of White let's see how it looks yeah this is looking better so now we have our simple form okay but what does this form do this does nothing as of now right if I just click here and write something it will do nothing what we want is we want something this whatever we have written here we want to display it below right so let's do that I'll just zoom in a bit more yeah this is better okay so let's get let's write something here right below so we can just give a paragraph tag or a heading h2 tag I'm giving a head h2 tag here H2 is basically second header and I'll say hi so let's refresh the page again and you can see hi here so instead of hi I want to display whatever is showing up here right so what we can do is we have to update uh we can use Jinja template okay so we have to update two three few things in this first we'll go to the app.pi file okay and here we will give the method so we are basically we are sending a post request by clicking on this button okay so we can update that we can go to the index.html and say this button this form will send a post request the method is post all right cool now the post request is sent okay what we want is we want to get the text from the post right we can say the method so this particular route okay Home Route accepts two methods it accepts a get and a post request so why get get is basically when you open this web page or whatever this URL okay it will fetch the web page from the server and get it okay so that is get and post is on clicking this button it will show something here so that is the post request right so both get and post and I'll just say if request dot method equals equals post there will be a text which is request Dot let's see it is request dot form dot get right but the code is here we can just say text equals to request.form dot get okay cool I will return the text here but one thing you can see that there is something called email content I don't know what that is okay so basically email content it should be the name of the text area so we'll add a name here so we are fetching this email content okay email content so we will be getting text from this email content text area right and request is not present here that's why it's giving the errors we can just say request we can import the request from flask cool so that's great okay but if we still refresh this okay this has I'll have to run the server again so let's see let's run the server again getting some error okay let's see we are getting some error let's fix that so what we have done is we have added a method post okay and it shouldn't give a error let's me just run that server again yep just this happens sometime with the code spaces let's just run the server again so this yep it's running now okay so this problem doesn't happen with your local development vs code okay it happens sometime with code spaces so now if I write something here okay let's say hello world I'll click check spam and it should show Hello World here but it's not showing up because we have we are fetching the size till now so we will use this Ginger template okay and ginger template engine to get the text from here okay so this we have returned the text in app dot Pi this is the text we have returned I want to fetch that text right okay so I'll fetch that text here and that should show up now let's type hello world yep it's showing up here one more thing we want is we want to show the hello world here okay so what we can do we can just give the hello world here the text here also in the text area okay so now if I just say hello world it's showing up here also and it's still remaining here also it's not showing entire email content okay that's great we have we are Midway through now what what else to do we can uh I want to reset this now if I refresh this page okay this hello world will still remain here so I want to reset this but a very nice way of doing this is I will just add a href here okay and I'll give a path I'll give the Home Route okay and I'll give a reset uh text what this will do this will add a hyperlink or this will add a link okay a preset okay and we'll just fetch the Home Route okay I'll get the get request so let's refresh and we have got a reset button and let's say if I just click on this reset everything is reset okay so okay this is looking a lot better now hello world check spam it shows hello world and reset okay cool we have now uh fetched like we have now shown whatever is uh input we are giving in the text area we are now showing it on the web page okay so what's the next step now let's learn a bit about the model itself okay so an email spare class fire model spam classifier model is a classification model and uh what it does is it categorizes either a email is Spam or not spam okay that's the basic thing now the data set has a uh labeled emails okay so and uh and it also has some email body so basically the data set has an email body the label that it is a spam or not a Spam and it's a classification supervised model okay so I am not going deep into the models and what models are trained I'll link a notebook here you can check that how the model was trained but what are the things to note the things to note is it the model takes a plain text will send the plain text using this in text area okay it will tokenize okay so we'll have to talk uh tokenize the text okay so that step we need to do then it will run the model dot predict okay the tokenized text and it will return either one which is Spam or not one which is not spam so that's the basic thing you need to know about this model okay cool now let's head on to running the model locally but before doing that we need a few things we need the model and the tokenizer okay or we are using count vectorizer here we need these two things so I have linked those two things here convectorizer and model uh what we will do is we uh I already have it downloaded okay so I will use that but you can download it from this links now we will create a new folder named model okay inside our repository so let's create a new folder here so the folder is models and inside this models I already have a couple of files the models I'll just paste it here cool the models are there the models are loaded now what I will do is I will yep so now I will have to load that model right now I have to load that model integrate that model to our web page right and here we have defined this thing in the Home Route okay we have defined this hello world uh this post response in the in this particular home uh a default route but I'm going to create a new route that will take a post request so let's say app dot route and we will give a new route called predict and this will take methods as post only the post method right so basically this method this route will only be fetched only when we click on the check spam button cool so I will say post here and we'll create a new function called predict cool and we will again return the same template lender template that is index.html template we can use the same template for multiple functions so we are using the same template okay so now we don't need these things this text request dot post okay so basically home the Home Route will now only get this page if I am in the Home Route I'll only see this page nothing else right so I will remove this methods also we don't need a post method for the home route and that's it so this is the Home Route and we are getting the predict route now in this what we have to do is first we have to get the email text so this text whatever we're giving here you have to get that for that we can say email text equals to request Dot get Dot request.com dot get yep request.form dot get and we need to specify the text area name here so email content email Yep this is the one email content email content okay so we got the email text now so whatever we we are writing here this will be coming here now what we have to do next we have to tokenize this text right so tokenize this text we have to basically let's define a new variable tokenized email we have to tokenize now we have to use this tokenizer this account Vector as a CV okay so this is the models on vectorizer model which will tokenize so we can just say CV Dot transform okay so this is coming from sqln we use the transform but we don't have CV yet right so first we'll have to import the c a pickle Library so it's a pickle file we have to load the CV and model okay so let's import tickle and we have to basically load these speakers so let's do that import pickle TV equals tickle dot load open TV DOT pickle uh I can call it let's say organizer and read binary because uh a pickle file is a binary file so we'll say read binary similarly the model can be pickle dot load open uh clf dot pickle and again read binary so clf is the classifier that is the model and this specific models you can you might not recognize these names because I have created its models and you don't might you might not have idea but when you are having your own model when you want to deploy that okay you will have the particular pickle file name and everything you will have with with yourself right so this is tokenizer this is the model I've uh got this so this request spelling is wrong req EST yep now this tokenizer dot transform and I can say email text and again I have to predict the model also so predict predictions let's say predictions equals to model dot predict this is what we do in sqln to write the model tokenized email okay so this is the pre-process text okay and we are passing that uh so you can also call it the x value this is the X okay we're passing it to model dot uh predict fine uh cool now one last thing here is if the prediction is one it is Spam and if the prediction is not one then it is not spam so let's do predictions equals 1 if predictions equals equals 1 else minus one so if it is a spam will it'll be one fine if it is already one it will be one if it is not one it will be minus one okay so these things these all these things I have got from the model okay which I have defined so these things might be particular this will change from person to person whatever models they are creating whatever way they are training okay uh so these things will have to get directly the idea from the model itself correct cool so now we have this predictions what we have to do is we have to pass these predictions so predictions equals predictions and text okay so we will also pass the email text remember I want to show the email text here so so that it doesn't disappear okay so I'll also return the email text okay so text equals email text okay let's call this email text also cool so I think the spelling of predictions is wrong yep that's correct now so I think this is good yeah I don't need to change anything on the app dot Pi file I what I have done is I have kept the default route as just fetching the index.html page okay and I have um created a new route called predict okay which will take in at like which will take get the text from the text area will do the tokenizing like we'll do the uh tokenizing part okay and also do the prediction part and it will return the prediction uh to the basically it will return the prediction to the HTML okay so now here what we have to do is we have to change this text to prediction I hope it's called prediction called predictions okay so predictions and again to save the email text we have changed it to email text so I'll call it email text here in the text area cool let me just go to the new line here yep so this is called text email text and yep so we are I think this is good now one thing here so we have to give so initially this form was posting to the default route that's why we have not given anything else here but now we are making a post request to the predict route okay so we have to give her actions here so let's call it actions and I will say predict I'll give the route here okay we are basically making a post request to the predict route okay so let's see if this works or not okay I'll have to run this again this has reloaded I'll call python app dot pi okay so it says oh the path okay so it there is an error okay it says the file not found error so I the path is wrong here so I'll have to say models.cv dot pickle model classified vehicle models class Salem dot pickle why because we have saved the models in the models directory okay so that's there now let's try to run this again and see if it's working yep it's running let us open it in browser let's give a simple text hello world or this is about email body okay and let's see what we get oh it says method not allowed okay let's see what error we have got it says four zero five that means we are not able to get uh we're not able to make a post request let's see what's the error so here we have given predict as the route the method is post okay one thing I'll do here is if request Dot method equals equals post I will get this ml text although I don't need this but yeah I'll just give this okay so that means when there is a post request I'll get the email text okay that is fine but actions method post actions predict okay method post action spread it I think this should work let me run this again let me see if this works this is a email yep okay finally cool so I think this action was wrong in the previous one so it should be action not actions okay uh but I am still getting an error here it says that um tokenized email CV transform here it is wrong let's see we will fix that error but finally we were able to get this so CV dot transform email okay cool and we are getting the error as none type object right cool so none type object has no attribute lower okay so let's see I have not given any text is it this is a email button okay I'll just run this again python app dot pi okay I think I'll have to open it again python app dot pi yeah this is an issue with code space I'll have to open in browser okay then type attribute has no object lower so let's look at the code again so email we are getting the email here and this we are getting the name is content now so content this should be content okay cool I think this should work yep finally we are we have got the result minus one so this is not a Spam okay so I think this content was wrong okay uh this is now content okay because I've copied the code from here so this was having content and I had to set content here okay so everything else is still the same we are getting the email content from this okay and we are creating the tokenizes we'll bring the organization we're doing the prediction and we're returning the prediction okay and the email text so here we are just getting the email text in the text area and getting the predictions in the predictions in the H2 okay so this is the result now we'll click on the reset to we'll check the state is working or not so if we click reset everything is reset that's working fine okay great so now what we want is now we want to show this as not minus one and one so we are getting minus 1 here if we type this is an email I want to show spam here instead of -1 for that what we can do is we can change this we can add python code here using Jinja template so I'll just type here percentage percentage and here I'll say if prediction equals this is just simple python if predictions equals equals 1 okay then I will say then this will be like spam okay Allied spam here and else if left that is L if prediction equals equals minus 1 will be this will be not spam I'll copy this yep so this will be not spam correct now I'll end the if so this is a bit different than python but almost similar so I'll just say this is and alif sorry end if correct okay so this is the format so for writing a if here if predictions results one within this curly bracket and percentage and this will be spam if it is prediction is one if it is minus one then it is not spam correct let's now try to run this once there is an email if I yep it should be and if okay I'll just refresh this once this is an email and just clicking on this button it says not spam okay so we have got it it should be end without space if okay cool so now we can modify this a bit we can add a small style here okay the style let's say color is for spam let's say the color is red and for not spam the color can be green okay let's check what it does yep not spam this this is working okay so I have um kept uh Pam email and uh non-spam email example here I just copy and see if it's working everything is working fine this is a spam email I got in my mail folder okay and I'm not saying the model is 100 correct okay it can also return wrong so this is again a part of machine learning okay so I am not going to the machine learning part this can be not a spam email but it showing it must show scab spam here okay according to the model I have created uh again I'll check this and this shouldn't so spam let's check this once yeah it's not spam okay so great I think we have finally created the model and run the model locally so we have done most of the part now the next thing that is remaining is uh deploying this web application to Cloud okay so yeah so the next part is deploying the web application to Cloud so what we will do is we will prepare for publishing first okay so we have to have a requirement.txt file in this requirements.txt file we have to save all the libraries that are required for this particular um project okay so we already know that pip phrase shows I'll just let me open let me stop this server once okay I'll show you what pipfish shows so if I do pip freeze here it will show me all the libraries that are required for this particular project okay so what I can do is I will save all these things in requirements. requirements.txt file requirements yeah the spelling is correct and here you see that all of this are saved okay so there is a library called this I think this is wrong so in this case I'll just uninstall it and install it again uninstall 30 file just uninstall this and pick install 35 okay let's see if it's now it's correct so if freeze greater than symbol equals txt and yeah now it's showing correct okay so now we have all the libraries that are required for this particular project okay so we have created a project we are ready to deploy this okay we'll take it live so next is pushing these changes to GitHub to do that we can check the changes that are made here okay so we have to hit changes in app dot Pi fine to cameras.txt settings.json yeah this is looking fine you can just commit it from here we can just give a commit message and commit from here but I'll just do it from the terminal for this time get add Dot get commit minus M let's say first commit yep get push origin mean so you might have to set a git config like who is who who is pushing who is trying to commit okay so if you are doing it for the first time I have made uh I've set up like a link here okay so if if it is if you are getting an error while trying to commit you can check this guide cool okay now the next thing is publishing with render so we will directly head on to let's first check the GitHub repository now okay so this was our repository in the beginning you can make changes in the readme.md file but let's check this first if it is working yep all the changes are here you can see the app dot Pi file changes here okay cool now uh let's open render for deployment so render.com surrender uh lets you deploy some websites for free okay uh and uh yep it is very easy to use so that's there also so I'll just open render I'll log in with GitHub that's what I've done uh so I have a few previous deployments here so what I will do here is I will create a new web service and I will configure GitHub here I'll connect with my GitHub account it's not connected you can see so I'll connect with GitHub by pressing configure GitHub and all of these steps are also mentioned in this notebook so if you uh you can follow this notebook also so then I'll go to my account okay and here I will say I'll give access to all repositories for now okay I'll say install yep now uh GitHub is connected with replet let me just refresh this once and let's press new web service yep now it is now GitHub is connected with replied right okay uh so if it was not working you should all once refresh the page because it's already connected so this was the one I have I was working on model deployment V2 okay I'll click on connect okay now here I'll give a service name I'll say model deployment okay I can select a region so I'll just select I'll let it be the default region Singapore southeast Asia try to select a region that's nearer to you or wherever the most traffic is the main branch I want to connect with the main branch okay if I don't have any other Branch as of now uh then I don't have any road trip directory so I'll not set anything here the my root directory is already the one directory that is there that is the this directory basically okay if you uh have your router it was SRC you could have given that SRC or anything else now I am using Python 3 as the runtime we have created a requirements.txt file so this is the build command here BB install manager requirements.txt this is fine and also you can see the something here is G Unicorn app colon app we have already installed geolicon in our uh while while creating the environment okay so if you check the requirements.txt file you can see G unicorn so G unicorn uh helps you is a you can say it's a library that helps you um deploy your website okay so here there are two things app colon app so this app is the file name you are trying to run okay so our file name is app so this will be app okay and this app is the flask instance okay so we have this in our app we have something called app here this app okay so this is the app that is a flask instance okay I'll select the free instance type that is uh that only has 512 MB RAM and 1.1 CPU and I'll just click create web service okay so now we have created the web service and let's go to the next step okay so all the steps are mentioned here what I have done the next step is awaiting deployment so now it will you can see that deployment will start okay and we'll have to wait okay this this at this point we'll have to wait for the deployment to run it because we're using the free instance it might take some time okay and we might also get some errors so that will have to fix now why we have used python 3.7.10 I mentioned at the very beginning uh that conda created by 3.7.10 because by default render is using python 3.7.10 okay uh so that's why we have used python 3.7.10 as our um conda and like for this in particular project okay but if you want to use the latest python version you can just you have to you have to mention this on the python but like environment file okay there is a dock here on how to uh use the latest python version cool so you can see it says build uploaded so build successful okay so build like all the packages were installed okay all the required packages now it's starting to deploy uh it's trying to start let's see yep the service is live okay cool that was fast okay so the service is now live let's check this okay it's working fine let's zoom in yep so now this link this is my email body okay let's check once yup this is a spam I don't know why but this is Spam so this link is live this is published live and everyone can access it so I'll just post it in the comments and everyone can access this uh but this particular link to check whether the email that I have got is a spam or not so I have successfully deployed my email spam class 5 model OKAY in the same way you can deploy all other models okay so we are done with the deployment okay now one last thing we are going to cover is API how to uh create an API route okay so I'll just go back to my app.py file again and here basically the very basic way of like what this may what is the creating an API out mean is we are not going to use the web interface this thing okay we are going to send the request as a Json okay and we are also going to get the output as a Json okay so that is what by creating your API means okay API route so we will do that so let's again create a new route app.rout plus API so now we'll give a API so this is a general convention we can say we can say API slash predict this is the new route is not the same as this predict okay and we can call methods uh again this will be post okay now again this is API we can give a function name API predict the function name can be anything I'm calling it API predict the first thing is getting the email so email will be request dot get Json okay I'll force Json okay I'll force that it should it to get Json okay so this is called Force equals to true then if I got the email body so next part is same okay so I'll just copy this the same thing okay and return again I'll just return a Json uh file right I'll not return this render template will not let the template I'll just return the Json so I'll say jsonify let's just return the prediction prediction equals prediction okay so it's returning the Json okay but uh this jsonify is not we have not imported this 25 so we can import it from flask Json E5 it's present in the flask module yep so now we have successfully created our API route okay now let's try to see if this API route is accessible via web page okay so I'll just say python app dot pi and we have got our new this thing this is an email okay and if we click on button you can see it's going to the predict route and it's getting not spam okay but if I just call like this API slash predict we are not getting any things okay so this is this now not how we call an API correct so what we can do is we can use um uh different API tools okay we can use maybe Postman insomnia or other tools to call an API we can also call it uh By Request or by using terminal but I will use a tone called thunderclined I'll install the extension thunderclight and while it's installing I'll go back to my notebook okay so here is how you can fetch the API okay you can use command line you can use Python you can use any API testing tools okay for example thunderclined insomnia Postman okay I'll be using thunderclient here so let's go back I think thunderclient is already installed yeah let me just refresh this code space once yeah and Android client should show up here yeah thunderclient is here okay so I will do a new request and here I have to give my URL okay so this URL so for that first we'll have to run this first we'll have to run our app python app dot Pi okay now it's running in this particular link okay so the URL will be this link slash API slash predict okay so this is the URL yeah I'll just copy this and give the URL and we are sending a post request not a get request okay so I'll post and the body so what will the body have right so let's go back to the code once and here you can see we are yep so we have to give a Content so let's just go back here yeah request dot get Json so we okay so we're getting the data in this form okay we have to get the content so this is the data and out of that we are fetching the content okay so this will be the data we are getting the data and the email is basically that content from the data okay so this content should be a key in the Json okay so now let's see so we will be sending a Json with a key called content okay and this is the email body okay now let's try to send this and we are not getting a response let me just run this once again yep I'll close everything and let's run this once again python app dot pi let's say open in browser now this slash API slash predict I'll copy this uh copy and paste this new URL here we have this new URL and I am sending this so it's showing method not allowed so have I done okay slash API slash predict methods post let me check slash API slash predict method post and force true okay I will just copy this once yep so this should return let me just run this once again Yep this is running slash API slash predict I think I will okay let me check new request here change the link and let's send okay I'll have to uh deploy this because I think this is not taking this localhost okay so let me just once again make a git push okay I'll just make a git push once again with the new code so added API route commit yep I'll stage everything and make the changes so what it will do is it will automatically deploy the new code to render let me just go to render okay and here let's just sign in yeah deployment is progress so the new version is deploying now okay so let me let's let's wait for deployment yeah it's still deploying so you will see when it's deployed okay let's wait for this while uh so one more thing I want to talk to you about is code refactoring so what we can do is so you can see in our code that this part is repeating twice okay so we can refactor this okay and create a new utils file where we will predict our model okay so let's do that so first what we'll do is we'll create a new file called utils dot pi okay and here we will copy a few things first is the pickle part import pickle and uh this CV we'll copy the model models okay we'll copy this and paste it here the model loadings and also import pickle we are trying to uh reduce all of this from this particular file and create another file for the model prediction okay now I'll copy this code tokenized email equals to this and paste it in the utils.pi file okay I'll post put it inside a function called def make prediction with the email body okay and it will return a prediction okay so once that's done what we can do is we can just call this function make prediction here so let's say prediction equals make prediction and we will give email here so the it accepts our email will give email here so you can see make prediction is not available here so we will have to import it will import it from utils will import make prediction okay so now that is done so now we can use this make prediction function to make prediction we don't need this anymore again we will just say prediction equals make prediction email okay so now you can see the code has is like reduced a lot so we just have like three lines of code in each functions into four lines so that's there now let's check the deployment once yup the deployment is done I'll go to the page here so we have this API right so that was API slash predict so now what we can do is we can go to thunderclient we can try to make a new request with this API slash predict URL make a post request and in the body we will say content this is a email body okay and uh yeah I think that's it it takes the content from the data I'll send this request yep finally we got the API um uh call okay so fine uh so we got a prediction of one that means it's a spam okay so yep so that's how you can create an API also in fiction if I think it was not working because we are using Code space and the code space uh the localhost URL was I think it's a bit different but once uh now everyone can access this API uh and give a Content okay and email body here and you will get a Spam on not spam like prediction will be either one or minus one okay so that's it okay so that's what is there in this notebook also you can follow this notebook and see how to create an API a code refactor and fetch the API so one exercise for everyone is I am not too good in creating a good UI you can see that this is a very bad UI and if I even uh zoom out it will look even bad okay so what you can do is you can try to improve the UI okay and what you can add is you can add a heading here you can add a introduction here you can make the box like this you can make the button like this you can add the example spam email an example launch spam email on the left side and also what you can do is you can add another mod if you have like multiple machine learning models you can add different models on the top okay let's just Spam classifier then image classifier whatever is there okay all of this on the top so you can change the UI you can modify the UI yourself so try to go through the entire notebook and uh create this um email spam class file model deployment also okay we all you already have the model try to create the deployment okay so what we have covered in this tutorial so I think we are towards the end of this tutorial we have covered how to uh use flask okay how to create a very basic website using flask then we have also seen how to set up a GitHub and conda environment okay I've seen how to use HTML and CSS and python to uh then we have seen how to uh run a model locally how to integrate a model into our web page and run it locally uh then we have seen how to deploy the web application to Cloud use uh like push changes to GitHub and then prepare it for uh like then uh publish to render then fix the errors in the render so we have not got any error uh while publishing but if you face any error you have to make the changes again and then again push it okay so those and then we have seen how to create an API and also saying how to fetch an API and do code refactoring so that's all the things that is covered in this notebook okay uh here are a few differences I have mentioned here and also I have mentioned how to do a vs code setup or if you want to run this code in vs code and also if you want to run this code in deplete I mentioned that I hope this was very um like very simple beginner friendly tutorial although we faced a few technique like technical difficulties in the middle but I hope this was a very simple deployment process now I'll take a few questions I think most of the questions are already replied but let's see okay uh thank you uh for the good comments um yeah uh hope this notebook is useful to you if you can refer it to this notebook anytime we'll make uh we'll add the link in the description okay web service is not working I am not sure why it is not working we can discuss this later you can just um post on probably you can post on the YouTube comment and we can see we can talk further okay okay there is a question okay where we can find the pickle models to test the service and write out yourself okay so the pickle models are there in this jupyter notebook you'll find it here okay the account Vector as a model in the class five model you can try it out and also if you have any different model if you are if you have worked create a different model you can use that also it doesn't have to be the same image pattern plus five model and um okay so there are definitely this is not the I would not say this is the ultimate Way of creating uh like deployment there are a few steps you might have to add authorizations also you might have to add uh like the models might be very big okay so you might have to add them in a database or create a Docker okay and um like uh yeah you can do a lot of things so there is a scope of future work you can see you can Implement authentication and user management okay if you want to rest it some feature you can uh scale the application for high traffic okay then you can um you can also so obviously improve the user interface we have not done a lot of in user interface site then um you can also see like Implement real time updates for example like if someone is typing the email it's you can just say spam on or spam okay and a few more things okay those are the things that you can do for future this was a very beginner friendly I tried to keep it very simple uh just for anyone who has created a model okay and uh just they can use the steps to deploy their model and showcase it in their probably LinkedIn or resume or anywhere okay this I try to keep it very beginner friendly but there are a lot of things that can be done to improve this uh from this okay cool I think that's everything um thanks for attending the session and I'll end it here I'll end the session here um okay thank you for attending and see you on a next video

Channel: Jovian

Views: 19,522

Keywords:

Id: rgr_aCg-338

Length: 74min 46sec (4486 seconds)

Published: Thu Jun 15 2023