Build FAST Machine Learning Apps with Javascript React.Js and Watson || Python ML PT.6

Key Takeaways

what's happening guys welcome to part six in the series on building a full stack application using scikit-learn node.js and react in this video we're going to wrap it all up by building our front-end application with react and carbon design system ready to get into it let's do it all right so we're now up to part six on building an end-to-end machine learning application using react.js node and scikit-learn so in this video we're going to be focusing on our client front end and specifically we're going to be building it using react so let's go ahead and start to set up our react app now we can do that using the create react app command and we're actually going to create all of our client and front end stuff inside of a folder called client so let's go ahead and do that so i've just got our existing backend application inside of a folder called app so in order to set up create react app we're just going to run npx create react app and then client so this is going to store all of our front-end stuff inside of a folder called client so let's go ahead and run that perfect so that's finished running and now we can see that we've got a folder called client and we've got a whole bunch of good stuff in there now before we start our client what we're going to do is install our dependencies that we're going to need for our front end so again we can install those that using the npm install command so let's go on ahead and cd into that folder and install the stuff that we're going to need so first up we just need to cd into our client folder and then from there we can install of all of our dependencies now we're going to be using the carbon design system so this just gives us a lot of really nice components that we can work with so we've got accordions and modals and a whole bunch of other stuff but one of the really cool things about carbon design system is that you have a number of pre-built charts these all free and open source so it basically allows you to give a nice look and feel and a bit of visualization to your existing front-end apps so what we're going to do is install those dependencies now there's a great tutorial in here if you're just getting started or if you don't want to follow my video explicitly and it just goes through installing carbon so we're really just going to be following through with this tutorial but specifically we've got a few add-ons to to help make our app work so let's go on ahead and get our dependencies installed and then i'll walk through each of those dependencies and comment a little bit on them so let's go ahead and do that so we're inside of our client folder now we just need to install those dependencies so to do that i'm just going to run npm install and then we're going to write out our dependencies perfect so those are all of our dependencies so you can see here that we've got carbon charts react so this is going to allow us to work with our charts from carbon we've got icons react so this just gives us some really nice icons to work with axios lets us make requests from our front end carbon components carbon components react and carbon icons are again derivatives of the carbon design system d3 gives us some visualizations dot env allows us to work with a dot env file so we're going to need that for our carbon design system setup and node sas basically allows us to write sas a css so it basically gives us our formatting so let's go ahead and install those awesome so that's now done so we've now gone and installed all of our libraries so if we take a look inside of our package.json file we've got everything we need to get started now what we should probably do is actually start up our app just to make sure everything still runs now if you cast back your mind to the last video what we did is we set up a number of scripts inside of our main server package.json file and this allows us to run both our client and our dev at the same time so what we can do is now step back into our server and run our dev script so this will start up both our back end and our front end at the same time so we can just make sure that everything's running successfully so let's go ahead and do that awesome so you can see our react app is running successfully so now what we're going to do is just start cleaning this up so by default whenever we run the create react app command there's going to be a lot of bloatware that comes with it or a bunch of stuff that you don't really need when you're getting set up so we're going to start stripping all that out and start building up our own app so specifically if we go into our client folder there's a bunch of stuff under source that we want to remove so specifically we want to remove app.css so we can delete that we want to remove app.test.js we can strip that out index.css logo.svg serviceworker.js and setuptest.js so we can strip all of those out now you can see that our application is going to crash when we delete that and that's because within our app.js file in our index.js file it was actually referencing some of those other files that have been mentioned so let's go ahead into app.js and start stripping out the stuff that we don't need so let's just minimize this so because we deleted logo.svg we're just going to remove that we're also going to delete this line here which is referencing that logo because we again we don't have that anymore and then what we can do is step into our index.js file and we're going to strip out our index.css our service worker because we've deleted that as well and we can delete all this down here and hopefully if we save oh we've still got app.css mentioned somewhere we can remove that as well perfect so you can see our server is still running successfully so if we go back now we can go and make a quick change to our app just so we can read it out and we need to delete that a tag as well perfect so you can see our react app is still running successfully so there's no problems there now what we're going to do is just set up carbon design system so we can start using those components so in order to do that we need to set up a couple of scss files as well as our in the variable now the steps for doing this are actually on the carbon design system layout so if you're so if you want to follow that it's all basically under here under in-saw carbon we're basically going to be following those steps now to just get carbon design system set up and within our react application so let's go ahead and do that so we've done a couple of things there so we've set up a app.scss file and that doesn't actually have anything in it but we need it in order to compile our scss we've also created an index.css file and we've just input run this import command which comes from the carbon design system setup and we've also set up a dot env file so carbon design system needs us to specify our sas path in this case we're just grabbing it from our node modules folder so that should all be fine so now if we go over to our react up and refresh so while it's compiling our scss as soon as that finishes compiling you should see the format of our text change because it's now using the text from our carbon design system so let's give that a sec to compile and then we should be good to go perfect so you can see that the format of our text has now changed it's a little bit small to see but you can see it's definitely picked up a different format so that's good now what we can start doing is actually building our app so the first thing that we're going to do is create a file called utils.js and this is going to contain all the fields that we need for our machine learning application so really when we set up our machine learning application we had years months cost centers and accounts now what we want to do is have a number of different selects so we can pick the different years months cost centers and accounts so in this case we're just going to paste on over i've pre-written it up a just a number of fields that contain our different utilities perfect so we've got that now all we're really looking at here is just different sets of arrays so in this case we've got an array for our years so 2019 2020 2021 likewise we've got one for our months for our cost centers and for our accounts so having it in a separate utilities.js file basically means that it's going to be easier for us to make changes to our application later on when we want to add additional years months cost centers and accounts so let's save that all right and we're going to be working largely inside of our app.js file so right now we don't have too much in it apart from hello world so if we actually change this we can change it to hello nick and you can see that that's going to re-render all of our work is going to be largely based in here but for our visualizations so the first thing that we want to do is bring in some of our carbon components so that we can start building our forms and our form groups so let's go on ahead and do that perfect so we've brought in a bunch of stuff there so we brought in our form so that sort of wraps up all of our form group components we've got our form group so in this case we're going to have our select and our select items inside of a form group we've also brought in button and loading so button is really just going to be a button and loading is going to give us a nice loading screen whilst we're running our predictions so now what we want to start doing is setting up our form so in this case our form is going to have four different selects which basically allow us to pick our year our month our cost centers and our accounts so let's go ahead and do that perfect so we've now got our first drop down set up so what we did there was we set up a number of things so specifically we set up our form or started setting up our form and within our form we've got a single form group at the moment which contains our select and our select items so within our select what we're actually doing is we're looping through all the years that we've got available within our utils.js file and if you take a look just up here i added this line here which brings in our years a month our cost centers and our accounts so basically what we're doing is we're looping through each one of the years within our utils.js file and we're displaying those as items within our dropdown so you can see them here now what we can do if we wanted to is if we went to our utils.js file and added an additional year so say we added uh what's a great one 2022 now what we should be able to see is that we've now got an additional year within our drop down so that's going to allow us to dynamically adjust what our selector fields look like so in this case we've only got one so let's remove that additional yup so in this case we've only got one drop down showing up at the moment but what we can do is add in the additional drop downs that we need so if we just copy that and paste it three times and make updates for our months cost centers and accounts we should be able to have the majority of our form group set up so let's go ahead and do that perfect so that's looking good so if we scroll back on over you can see that we've got a drop down for our year and for our months those looking good and for our oh we need to change our labels so you can see that these are still showing up as select yes let's change those so select cost center and select account perfect that's looking better so we've got select here select month select cost center and select account so if we take a look at our different form groups so you can see that we've now got four different form groups and let's collapse this one so our first form group is covering off our year our second form group which is here is covering off our month out let's collapse that again our third form group is covering off our cost center and our last form group is covering off our accounts so all up we've now handled those drop downs now the last thing that we need to add to our form group is a button so let's add that perfect cool so we've got our button now it's not actually doing anything uh the last thing that we should probably do is align this to center so right now it's shifted up into the top left hand corner of our screen so we can move that and center that back into the center just using our scss and updating our specifically our index.css file so we've already got a class name allocated to jump back into our app.js file we've already got a class name allocated to our form so in this case what we need to do is just align our main container and our form by updating it in our index.scss file so let's go ahead and do that perfect cool so we've written that scss so this is just compiling so ideally once that's finished compiling you should see our app shift and center so let's let that compile and then we should see that move into the center of our screen all right that looks like it's done and you can see that our form is now centered so it's looking a lot better again we can sort of still still click through that's fine all right so right now we're handling our different drop down but we're not actually doing anything with the data so ideally what we want to be able to do is update our application state every time we update one of those drop downs now we can do this relatively easy using react hooks and specifically we're going to be using the use state lifecycle function to help us handle these so let's go ahead and start setting that up so in this case we're going to first up import our dependencies so we're going to import use state and then within our function apt section what we're going to do is start setting up our state variable so in this case we're going to have one for our year for our month for our cost center and for our account so let's go on ahead and do that awesome that so that's all done now now what we want to do is actually make sure that every time we change one of the drop-downs within our drop-down list we actually go back and update this state here so let's go ahead and change those so we just need to make an update to our selects so that we can so that every time there's a change to each one of those selects we're actually updating our state as well so let's do that so in order to do that we just want to use the onchange function and we want to call our set year or set month or set cost center accounts oh actually we need to change those cool all right let's go and update these so again within our unchanged function we're just going to call those functions oh perfect cool so that's all done now so ideally whenever we're changing each one of those drop downs we're now going to have our state variables updated as well now in order to see that reflected what we can do is set up a button or set up a function attached to our button that actually goes and console logs at that out so let's go ahead and set that up so in this case we're just going to have a function called run prediction which eventually we're going to tie to our back end but initially we're just going to log out each one of those state variables so let's set that up perfect so that's looking good so let's go and test that out so if we open up our console and make that a little bit bigger so ideally what should happen is if we go and change all of these when we go and hit predict we're actually console logging amount and you can see we're outputting 2020. that's because we haven't changed our state so let's go and do that again try that so again we're grabbing 2019 we're grabbing october we're grabbing cost center 301 and that specific account so that's looking good what we should also do is just make sure we change our default value for year to 2019 because that's the first one in our list so that should be a little bit better now so now if we go and hit predict it's logging out exactly what we've got in our initial state once we change it for example if we go to 2020 we're now updating that as well cool so that's working well now what we want to do is actually go and run a prediction so right now we're just logging out the information that we've got displayed on our screen what but what we actually want to do is go to our back end and actually run that prediction that we actually set up in our back end now before we actually go and do that we want to go and set up a proxy so this is going to allow our front end application to go to our backend server so we can do that pretty easily all we need to do is type in proxy within our package.json file and set that to http localhost 5000 because that's where our backend is running so this is going to mean that whenever we send a scoring request we're basically going to go to our backend api to actually run that right so that's all done so we can step back into our app and then from here we're actually going to run our prediction so the first thing that we want to do is make sure that we've got axios imported so at the moment we don't so let's bring that in cool so that's axios imported now what we want to do is capture our data and send it to our backend api so let's go ahead and set that up so what we've basically written is we're going to send an axios post request to slash api slash wml slash score and because we've got our proxy set up it's actually going to be going to http it should be http double slash localhost 5000 slash api slash wml cool so now and we're also logging out that information as well so we should be able to see the scoring requests come through in our console and we should be able to see that result so let's go on ahead and test that out so if we make a few changes for example 2020 march and that costco that now if we run predict doesn't look like it's picked up our proxy so let's just restart our server awesome so that's now up and running let's test that out again perfect and you can see that we've gone and triggered that off we're not seeing anything on the screen but if we check our console you can see that within our data section of our response we've actually gone and got a prediction so based on the fields that we've actually gone and passed through so year 2019 january cost center 100 and account 1 million we're getting back a predicted sales of 1 347. perfect so that's we've actually now gone and sent through a scoring request all the way through to our back end now what we want to do is actually display that to the screen so at the moment we're not actually showing anything but we want to make it look a little bit better so what we're going to do is set up a prediction or scoring results box so we can actually display that on our screen and then eventually we're going to have a bit of a chart which allows us to see a historical squaring request so let's go on ahead and start by setting up our prediction results so we can at least see our value on the screen so similar to how we had different state variables for our year month cost center and our account we're going to set up two additional ones one for our score so this is going to hold our historical scoring results and one for our prediction so that's going to maintain our prediction at a point in time so let's set those up perfect so we've gone and set that up so we've just gone and added these two lines here so these two and this is basically going to give us a prediction state variable and a score state variable so our prediction is just going to be a value a scores is going to be an array of values now what we can do is whenever we send a prediction and get a result back we're going to store our prediction or our response inside of our prediction variable and we're also going to append it to our scores array so this is going to allow us to have a number of values stored in our rate so let's go ahead and update our run prediction function so that we actually store those values perfect so that's looking good so we're now setting our so initially we set our prediction value our state value to scoring so this is just going to be a placeholder and then what we actually do once we get our response back we're also going to be storing that response inside of our scoring state variable or inside of our prediction state variable and so basically what we're doing is from our response we're just going traversing through our result and we're grabbing out that value we're also taking that same result and we're appending it to our scores array so if we console log that out now we should be able to see those so let's go ahead and test that out so if we change these and run a prediction you can see that we've now got our prediction and we've also got a array of our historical predictions if we do another one again you can see that we're now appending to our array so we've now got our current prediction plus our historical predictions so our historical predictions are going to be used to visualize our historical results once we bring in our visualization so let's go on ahead and bring in our initial score and then we'll also set up a quick visualization as well using carbon design system chart so let's go ahead and do that so we're just going to set up a new div called prediction container and this is going to store our predictions now what we're going to do is just pass through and make sure that we've actually got a valid prediction so we're going to make sure we display text if we've got a valid prediction and then display the value itself perfect so let's quickly take a look at what we've got there so we've gone and set up a initial ternary operator so we're basically checking if we've got a prediction if we do then we're going to output the model predicted and again if we've got a prediction we're also going to check if whether or not it's scoring or a valid prediction if we do then we're going to display that prediction if not and we're scoring in the real time then we're actually going to be showing our loading box so let's go ahead and test that out perfect cool so that's all working so you can see that down here we've got the model predicted 1347 and if we change this again you can see that our model predicted 979. so already we're actually returning valid results now the last thing that we want to do is reformat this to make it look a little bit better and add our bar chart so let's go ahead and start setting that up so first up let's make sure we have some proper formatting for this value here so we can do that by going into index.scss and just making sure we update that so in this case we want to update our prediction result and our prediction container perfect now we just need to let that compile awesome so that looks good so you can see that we've now got way better formatting so we've got the model predicted 979 and again if we change our fields we should be able to get some nice results nice looking results as well awesome that so that's looking great now the last thing that we want to do is set up our charts in this case we're just going to have a bar chart displaying here with our historical results so in order to do that we're just going to set up a separate component and bring that into our main app.js file so let's go ahead and start doing that so inside of our source folder we're going to create a new folder called components and within that we're going to create another folder called databiz and within that we're going to create a file and we're going to call that bar chart perfect now within our barchart.js file we're going to use the quick shortcut within vs code to set up a functional component awesome says that's set us up now what we want to do is import our dependency so let's go ahead and do that perfect so that's all good now what we want to do is actually fill out a bar chart so in this case all we need to do is set up two components so our options that our bar charts going to pass through and the actual bar chart so i'm going to quickly set that up and then we're going to bring it into our app.js file and use it perfect so those are our options set up so these are the options that you need to set up whenever you're working with visualizations from carbon design system so in this case we've just set up our left axes our bottom axes whether or not it's resizable the height and the width and then all we need to do is actually return our bar chart so let's go on ahead and wrap up that final component perfect so that's our bar chart setup now all we need to do is bring it into our app.js file and render it to our screen so perfect so we're bringing that in so what we're basically doing is going into our components folder our database folder and our bar chart file and bring in our bar chart now what we need to do is just render it so in this case we're going to render it beneath our predictions and we're going to be passing through our historical scores to it so let's go ahead and do that perfect so that's looking all good now the last thing that we want to do is actually apply some scss formatting to our chart container so let's go ahead and add that before we compile and let it compile awesome so that's done so now ideally if we run a prediction when we hit predict we should get our prediction value as well as our chart and there you go so we're now starting to see our prediction results there you go we've now wrapped up the final part in the series so we just went and added our simple bar chart we're also displaying our prediction and if we check into our values oh we're not console logging it out but you can see that we've got our values there that about wraps this up so overall what we did is we created our react app we rendered our predictions once we'd scored against our backend api and then we used carbon design system to showcase our values into a chart at the end thanks so much for tuning in thanks so much for tuning in guys hopefully you found this video useful if you did be sure to give it a thumbs up and hit subscribe and tick that bell so you get notified of when i'm releasing new videos if you get stuck at any point at all be sure to drop a mention in the comments below and let me know how you go thanks again for tuning in peace