Modern Machine Learning Apps with Streamlit - No HTML, CSS, JS

Key Takeaways

what is going on guys welcome back in this video today we're going to learn how to easily build machine learning applications using streamlit meaning no HTML no CSS no JavaScript but a nice front-end for your machine learning application so let us get right into it [Music] all right so we're going to learn how to easily build a machine learning application in Python today how to build a front-end for a machine learning application in Python and we can do all of this without having to write any HTML CSS or JavaScript code by using a package called streamlit streamlit essentially allows us to define the user interface the web UI using only python code in a very simple way and we can still end up with a good looking and professional interactive web application that uses our machine learning model in the background because if you're anything like me you really enjoy doing all the machine learning work like building the model training the model evaluating the model doing the hyper parameter tuning pre-processing the data and so on but you're not very interested in building a user interface around it especially not a web user interface with HTML CSS and JavaScript around it once you have everything done and ready to use so this is something that you can do easily with streamlit and professionally with streamlit with less effort so we're going to start here by installing a couple of packages the goal for this video today is to train a very simple image recognition model on the cipher 10 data set and to then use this model in a web application so to build a web application around this model so that we can upload images and classify them in the web browser without having to write again any HTML CSS or JavaScript code so we're going to start with the installations pip or pip3 install numpy matplotlip then pill or actually pillow sorry pill is the name that we use for the import then also tensorflow for the actual model and of course streamlit the package that we use for the UI once you have all of this installed we have to import a couple of things so we're going to start by importing numpy S and P we're going to import matplotlib dot Pi plot splt we're going to import streamlit SST from pillow we're going to import now I I wrote pil in the command line and pillow here it's the other way around so you install pillow you import from pil Capital pil we import the image class and then we also have to import a couple of things from tensorflow so from tensorflow Keras dot data sets we're going to import the cipher 10 data set so scifar10 like this for some reason my pycharm doesn't recognize that I have Keras instead of tensorflow I don't know exactly why that is but it still works when I run the code so from tensorflow Keras data sets import Cipher 10 from tensorflow Keras dot models import sequential from tensorflow Keras dot layers we're going to build a very simple Model A simple multi-layer perceptron with a flatten and some dense layers and then from tensorflow Keras dot utils we want to import a two underscore categorical function and I think that's it for the Imports so those are the Imports again numpy to work with arrays matplotlib to display um display plots then streamlit to build the user interface image to work with the images for the classification and then all this stuff here for the tensorflow model that we're going to build and we're going to have two parts here first of all I'm going to write a script that trains a model the cipher 10 image recognition model and then I'm going to use stream a stream glitch to actually use that model um and actually I think we also need to I'm going to just import here at the top import tensorflow stf because later on we're also going to load models that we stored so we're going to use TF and then we're going to load the model from there so we're going to just first of all load the data then we're going to pre-process it and then we're going to train a model on it this model will then be exported and then we're going to import it for the actual streamlit application so we're going to say here x underscore train y underscore train and then also X underscore test y underscore tests are going to be equal to scifar 10 dot load underscore data so Cipher 10 is just a data set with 10 different categories we have images of planes ships trucks cars and different animals I think we have horses deers I'm not sure what exactly all the classes are but we have 10 different classes that we have to classify and uh this is now the training data and the test data they're split up in these two tuples and what we're going to do now is we're going to say x underscore train is equal to X underscore train divided by 255 and the same thing for the test data why do we do that because the values that we have here are pixel values RGB pixel values between 0 and 255 so when we divide all of them by 255 we get values from 0 to 1 which are better for the neural network to work with so this is going to increase our performance this is now pre-processing for the Y train data we're going to use the two categorical functions so two underscore categorical uh y train and we need 10 categories here same thing for the test data and that is basically the pre-processing we don't need to do anything any fancy stuff here and now we're going to just say that the model is and it's going to be a sequential model with the following layers we're going to pass a list here and we're going to pass some layers a simple flattened layer with the input shape input underscore shape is going to be equal to 32 pixels times 32 pixels with three color channels RGB this is um going to be flattened into a 32 times 32 what is that I don't know let's see calculator uh 32 times or two 1024. so this is going to be flattened to an input layer like this then we're going to have a dense layer which is just going to have a thousand neurons and it's going to have a simple relu function so activation equals relu rectified linear unit and then we want to have a dense layer with 10 neurons for the output for the actual classification and this is going to have activation is going to be equal to softmax So Soft mix basically a function that gives us the probability for every uh possible category and all the probabilities sum up to one so we have 100 percent uh yeah this is a very simple model the goal is not to build the best possible model here I want to show you how to take that model and put it into a streamlit application but this is the model we want to compile it model compile with a loss function of categorical or actually sparse categorical cross entropy um and then we want to use an optimizer atom now am I blocking this with my camera not yet and then we also want to have the metrics the metrics are going to be just accuracy like this so this is the compilation now we can fit the model on the X train y train data batch underscore size is going to be uh 64 epochs I'm going to train this for 10 epochs and we're going to use the data as validation data why not because we don't necessarily need to have testing data we're not going to evaluate the model we're just going to pass here X test and Y test and I had this in a previous video that I made recently that I used the test data as the validation data so to keep this clean let's just call it X underscore Val and y underscore Val because if you're using it it's validation data it's not testing so that is that and the final thing is we want to save the model so models save and then we want to save this in a file let's say Cipher 10. model dot H5 so when I run this now this should train the model I'm not sure how accurate it's going to be with just one dense layer what's the problem here uh is this because I'm using sparse should I actually use just categorical cross entropy maple yeah seems to be the issue so this is going to train out 10 epochs we're going to skip that I'm not going to let you watch that it's going to take some time and then we're going to take the model and build an application around it all right so the model is now trained you can see the accuracy is not very high but it doesn't really matter because as I said I didn't want to train now a professional convolutional neural network this is just some model that we can use and now we can get rid of all this we have the file with the model we can also get rid of these Imports we're going to keep this one because we need to load the model uh and we're going to keep all of the rest here so maybe we can reorder this a little bit that um and what we're going to do now is we're going to build the streamlit application around the model so we're going to take the model and it's going to perform functionalities or it's going to perform the predictions and we're going to build a user interface around it with just python in a very simple way so we're going to define a main function here and in this main function we're going to start by saying St dot title is the title of our application for example scifar 10 web classifier or something like this then we're going to say St right and we're going to have just some basic text like uploads any image that you think fits into one of the classes and see if the prediction is correct something like this and then what you want to have is we want to have an upload for an image we want to have a possibility to upload an image to the web application and we can do that by saying St dot file uploader and in here we want to say please upload an image and the types that we accept are going to be JPEG and PNG and we want to have this in an object so file is going to be SD file uploader and then we want to say if we have a file uh then we want to do something otherwise we want to do we want to have a text so St text is going to be you have not uploaded an image yet something like this so that is if we don't if if we didn't upload an image yet and otherwise we're going to process the image we're going to feed it into the model and we're going to see what the model says about this image so what it predicts this image to be and we're going to do that by saying image equals image from pillow now image open uh we're going to open the file this is going to be a path to a file if there is no file so if we didn't select the file it's going to be none otherwise it's going to be the path to that file and we're going to say now St image we're going to have the image itself from pillow and we're going to say use column width equals true and now we want to actually uh pre-process the image for the model we want to load the model we want to make a prediction and then we want to show that prediction so first of all we're going to say resized underscore image because remember our model is trained on 32 by 32 pixel images so if we have something that's not this size we have to turn it into that size because our architecture has an input input shape of 32 times 32 times 3. so 32 pixels times 32 pixels three color channels so the resized image is going to be image dot resize and we're going to pass here 32 32. and then the image array is going to be equal to NP array and it's going to be the resized image divided by 255 because remember again we had values between 0 and 1 when we trained the model because we did the same pre-processing now we have to divide by 255 as well so what's the problem here I think we can ignore this so we have this image array now and we can say also again image array equals image array dot reshape and we can reshape it into the following shape 132 32 3. so we have one image of size 32 times 32 with three color channels that's that's hard to pronounce uh so we're going to say now model equals and then we're going to say TF Keras models load underscore model and um we're going to load our Cipher 10 models so Cipher 10 model H5 and this model is now going to make a prediction on this pre-processed image here and we're going to say predictions equals uh actually not no list model dot predict the image array and then what we want to have is one I have a list with the classes so Cipher 10 classes are going to be and this are those are going to just be now the names of the classes I got them from the documentation the first one is airplane the second one is uh automobile this then we have a bird then we have a cat then we have a deer then we have a frog then we have a horse then we have a uh ship and finally we have a truck those are the 10 objects that we can recognize and we want to know now which one is it and we can find that by just getting it from the classes list and using the arc Max of the predictions uh for this we're going to now say figure axis is going to be equal to or actually figure axis like this it's going to be equal to PLT subplots and we're going to say y underscore position is going to be equal to NPA range um length of the cipher 10 classes because what we want to display here is we want to display um not just the highest value so we could we could go ahead now and take these predictions and get the arc Max and then get this index and just display the word but what we want to show is we want to show a bar plot showing the confidence in each of the classes so it would say this image is zero percent airplane two percent automobile uh three percent bird uh 85 Cad and stuff like that so we want to have the individual values confidences or probabilities of the softmax function so we're going to have the positions for the individual classes like this so like this then we're going to say axis bar h and we're going to say here uh y positions then we're going to have predictions predictions zero a line is going to be equal to Center and then we just need some basic styling so set underscore y ticks are going to be the Y positions axis set uh underscore y tick labels are going to be the classes so the Sci-Fi 10 classes um and by the way all of this is now just matplotlib stuff right so we're not this is not streamlit stuff so everything that we do here uh is just the design of the plot if you just want to print a text you can also just have an st text showing you the class this is also possible but I think this is more impressive here for the visual results so we're going to have the y-tick labels we're going to have we're going to invert the y-axis and we're going to then also say set underscore X label and the X label is going to be the probability for this particular class and finally you want to have a title so axis set underscore title is going to say sci-fi 10 predictions or something like that and finally we want to say St so streamlit dot pipelot and then we can just pass the figure the matplotlab figure to plot it inside of our streamlit application so to go through this again we train the model then we create now a streamlit application we have a title we write some text there we give the possibility we give the user the possibility to upload a file if this file was uploaded we do something otherwise we just say you have not uploaded an image yet if an image is uploaded we take it we load it we resize it we turn it into a numpy array divided by 255 to get values from 0 to 1 we reshape it into 32 pixels 32 pixels three channels and one instance we load the model that we trained we predict um we make a prediction we get the classes list we get the individual probabilities and then we design find a simple plot a bar plot that shows us for each class how confident it is that this is the correct answer so this is what we need we're going to launch this now from a terminal so we're going to navigate to uh docs to programming to normal mine to python to current this is my directory that I'm working in and here we're going to now say streamlit run Main py streamlit run main py this is going to open up the web browser and then once this is done uh nothing happens because I didn't call the main function so we need to say also if underscore underscore name underscore underscore equals and then the string underscore underscore main underscore underscore then call the main function because otherwise we're not going to get anything here so again command line rerun the command and now we should have a user interface hopefully there you go cypher10 web classifier upload any image that you think fits into one of the classes please upload an image you have not uploaded an image yet browse files and I can go now to documents to uh programming neural 9 python current and I have here a couple of images I have a horse I have a bird and I have a car so I can upload the horse here and uh we have a problem why is that mismatch is between Arc 2 with shape 10 uh let me see what the problem is here which line are we talking about probably something in the plotting right Let's see we have the Y positions we have the cipher 10 classes did I skip a class or something I skipped the class yeah after deer we have doc I skipped the most important animal doc okay so we have these 10 classes here so let's rerun this again let's upload the horse again and as a result you can see we have here the probabilities this is most likely horse it could be an airplane for some reason a bird a truck so yeah horse is fine let's see if it also recognizes the others so we have a car here okay it's definitely a car as you can see maybe a truck this is reasonable um and then we have the bird the bird is it's not very confident it would say it's a bird that's fine but it could also be a deer or a frog so yeah probably if we have a convolutional neural network it would recognize this clearly as a bird but yeah you can see it got all the three right this one was not clear to it but you can see this user interface here is very professional very good looking and we have a file upload we have the possibility to display images to display plots and yeah this is just a professional web application a professional machine learning application and we didn't use any HTML CSS or JavaScript so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this Channel and hit the notification Bell to not miss a single future video for free other than that thank you much for watching see you in the next video and bye