LIVE WORKSHOP: Making Waves with AI Apps

all right hi everyone my name is michelle tanko i'm a product manager at h2o of all things ai app related and today we're going to do a live coding session where we're going to walk through how to use the h208 sdk to build your own ai applications so our plan today is to start with a brief introduction of the h2o wave sdk what is it what can it do then i'm going to show you how you can run the sdk on your local machine this is an open source software so you can start building your own ai apps today and then we're going to walk through a code demo of how to build an h208 application specifically we're going to make a fully open source app that uses the h203 aggregator function to summarize a large data set and then we'll use the wave sdk to build a custom interactive app to visualize the results as either a table or plot whatever our end user wants at h2o we've been focused on our maker culture makers going to make and a couple of key categories this is everything from feature transformation where we help users automatically find new features in their data set and we allow you to build your own custom feature transformation recipes from ai and machine learning where you can use state-of-the-art models either from us or build your own recipes to build models and machine learning interpretability where you can make sure you're understanding really what's happening in the model and the end-to-end process is not a black box what we're going to be focusing on today is somewhat new to h2o and this is our app developer framework this is a way to build apps completely in our python that can be front ends for rapidly prototyping how your users can interact with ai models all of these maker pieces fit together in the htoa hybrid cloud this is a place where you can rapidly build ai applications and share them with your end users it's a way to deploy your applications quickly without having to think about the security or sharing or scaling for your data science or developer users it's handled automatically it allows your users to your data science users to build machine learning models and deploy them into production and you can leverage your existing machine learning or ai assets directly in the ai hybrid cloud it's a way to make sure you're focused on being an ai company and get your ai applications in the hands of business users there's not really a point in building machine learning models it's not for a specific use case to get value out of it and in this way with the h2a hybrid cloud we can get those applications in front of our end users as easily as possible we'll be focusing on today is specifically how to build applications we're going to do a demo on writing an app i'm going to write an app live with you and we'll share the source code so you can follow along if you'd like to the h2o wave sdk is an open source low code framework in python and soon are that allows you to build interactive real-time applications this can be for live updating of dashboards or end-to-end interactive applications that have buttons drop downs and allow your users to interact with your machine learning models or other data without having to know what code they're using in the background it allows developers of data science models so your data science experts to quickly end get into app development without having to know anything like javascript css or html they just have to know python or r so let's talk a little bit more about wave and how it works the h2o wave sdk is made up of three main components the first is the application code and that's what we're going to be writing together today this is written in python or r today we'll be using python and it is the h2o wave package you can get this package from conda or pi pi and it will soon be on cram as well your application code sends data content or cards which will show information to the end users to the content server and it determines if a user clicks a button or comes to your app what's going to happen so the logic of your application is done in the application code which you would write the content server is a small static binary executable that can run anywhere from your local machine to the cloud to a raspberry pi it stores the site content the cards and pages that your application code builds and it can transmit any content changes to browsers so you can have apps that are updated in real time with the latest information it also takes any browser-based events from your end users and send those to the application code which would then handle those events and create new content to show to the browser so everything between the application and the browser is done through the server the end user when they're writing code doesn't really have to think about the server at all we'll see that today when we're building it it's completely handled by wave it just needs to be running and then the third component is going to be our browser-based client this is how your end user is going to be interacting with your content they can use any browser they want to safari chrome or firefox and it's a place where um you're hosting the content from the content server we'll look at today some examples of how we actually do that all right so we talked about the three components but how does it work from an app developer perspective the h2o server holds a collection of pages these pages run at some browser-based url and you can have different urls on the same server that go to different pages each page can hold one or more cards and the cards can have lots of different types of content on just one second all right everyone we're having a good work from home pandemic moment um with my dog so just a second thank you uh we will jump back into it now um so each page can have one or more cards and the cards have different types of com uh content on them on the right hand side here we have an example page that has five cards on the top we have a header card that says what our app does there's a sidebar on the left and we have three different types of content cards which are holding different plots charts or other information as a developer what we're going to do in our application code is reference a page or card make some sort of change to it and then save it and it will be automatically displayed to our end users this is both for static dashboards or for interactive apps which have buttons drop downs etc any browsers that are pointing to where the app is running we'll get updates automatically in real time all right so we're almost to our live coding section this is what we're going to build today we're going to make an application for visualizing any large data set without losing the shape of the data or any outliers this allows your business users to easily digest and find interesting points in the data set we're going to do this using h203's aggregator function which will reduce the size of our data without losing information so essentially it will find exemplar data rows in our data set and count how many rows of the original data fit in that exemplar so some exemplars will have hundreds of thousands of rows and others will just have one or two so this can run on really big data um hundreds of millions of rows this way our end user can visualize this data because plotting hundreds of millions of rows doesn't work very well we're going to build a front end that will display the data the user can choose if they want to display it as a table or as a plot you might want to as a table because you can search and filter and sort the data or we can have a plot which will be a scatter plot of two values so you can see it in aggregate how the data the relationships in your data set the user will get to pick how they want to view the data so there's a link here to the completed application that will be similar to what we write today when you live code might be a little bit different um this will be put in the chat for wherever you're watching this um either in the future as a recording or live so that you can follow along um yourself if you'd like to all right so what we're going to do first is i'm going to show you how we would set up for a local dev environment the only thing we need to do to develop locally is have the wave server running on our workstation you can download the latest wave server by going to github h2ai wave slash releases the latest version is 0.17 and we do want to download the wave executable for your um operating system not wave db which is going to be a database that can come with wave so we're specifically looking for wave so i'm going to show you how to do this in just a minute but we're going to download the file we're going to untar it and then we're going to actually just run the server um so i went ahead and i have this um i need a new i have my wave server already downloaded on my computer so i'm going to navigate to where i have it running which is in my h20 folder um it will be in the uh wave folder and then when you download and untar this file inside this is what you'll see so we have some data that the wave server might use we have a demo an example which are some sample applications dashboards and wave code if you want some more help getting started and then wave d is actually the server that we're going to run so to run it we're just going to do dot slash waved and now we have our wave server running on our machine i can see here that it's listening at port 10101 and it's on just my localhost so i'm going to open my browser again and i'm going to go on my computer to localhost10101 and here i can see my wave server running there's no content here because we haven't put anything in the server but it is successfully running our machine i can turn off the server and then when i come back here we can see that it is just an empty browser nothing's running here but we'll run it again all right so we have set up our wave server on our local machine and there are more detailed instructions in the documentation which i will reference at the end of this slide in case you want more details um we're going to set up our project next so you can write wave code just about anywhere that you can write text i would recommend using ide i'm going to be using pycharm today vs code is also quite popular you can write code in vi or any notebook that you'd like to but an ide is going to be easier for debugging our application we're going to create a virtual environment for our app for anyone that's not familiar with python virtual environments essentially this is going to be a way that we can use very specific versions of python and packages without getting in the way of any other projects on our machine so we might have one project or app that needs a specific version of say pandas and another that needs a different version using virtual environments we make sure our projects aren't getting stepping on each other's toes we're going to create a requirements.txt file for our project so that if someone else were to take our code and use it they'd know exactly what versions of packages to use and then we're going to create one source code file called app.pi where we're going to actually put all of the source code for our app this file name could be whatever you want it to be but we'll use app.pi as just a standard um there are other projects and other best practices that we might want to add to our project um for example if we're doing a really quick prototype we might just have source code but if we're building an application that users are going to be using we probably are going to want to have unit tests documentation maybe some screenshots we're absolutely going to want to read me so new developers know how to get set up so there could be a lot more in our project but we're going to be sort of simple today just to get some prototypes going quickly so i will go ahead and set that up on my machine we can not close that we'll make sure this is still running i'm going to go to pie charm and open a new project and one of the things i like about pycharm is i can have it create a virtual environment for me automatically um so we'll call this code along or live demo um i'm going to use python 3.6 you can use any version of python that's 360 or later and then we will go ahead and oh i already have a project called that um demo wave building there we go and it will create for me a new project where i can start writing some code so we'll give it just a minute to create our virtual environment and then what we're going to do is um actually yeah we'll tell you what we're going to do next all right um so this is how we're going to build our code so before i create my app.pi file and get going let's just walk through the steps um first we're going to build not an interactive application but we're going to build just a static wave script and set up the landing page for our user interface this will be when users come to the app what are they going to see once we have sort of that initial ui planned out we're going to reformat this as an interactive wave application so that new users see our landing page and users can click buttons or tabs and so forth we're then going to add navigation functionality so we want to have two views for our user a table view and a plot view so we're going to actually create that navigation and have it so users can click on one or the other and change the view we're then going to use a mocked up data set just for some quick practice to actually create the table and the interactive plots and then we'll actually add in the back end which is the h2o aggregator that we'll use for actually processing our large data sets so normally if you were building this ui probably we would have the back-end code done first we would be building the ui for an existing model or for some existing workflow but today since we're focusing on the wave sdk and how to build uis we're going to build the ui first and then the back end second depending on time um but this full and end app is in github and that link should be in your chat okay let's go ahead and get started so i have my folder here with my virtual environment and i'm going to create two new files one is going to be a requirements dot text and one is going to be my actual python application code and right now in the requirements the only thing that we're going to need is the h208 package and i'm going to use the latest version which is 17. we are going to also use pandas today but we'll go ahead and add that to requirements when we get to it i'll now install the packages and my ide will do that for me in the background all right in our app code we're going to um oh my goodness talking and typing the same time from our h2a package we're going to import um site and ui and we'll give [Music] our ide will need just a minute probably to index and realize that we have actually installed this package um so site is going to be a direct connection to the wave server and ui is going to be several different ui components and parts that we're going to actually use on our screen so i'm going to make a reference so if you remember the three steps to update away that you reference a page you change content and you save the page so i'm going to make a page and it's going to be on the direct home page at localhost 10101 if i wanted to do a subpage i could do something like this and say slash demo and then when we actually went to our app here we would say slash demo instead but we're going to stay on root just to keep it easy all right what do i want to do with my page i'm going to make a new card that i'm going to name header i could name it whatever i want but we'll name my header today and the specific type of card it will be is a header card so um i don't have to know html javascript css i just have access to components that have been pre-built um the first thing i there's three things i need for a header card one is going to be the box which we'll talk about in a little more detail but essentially it's um exactly where on my screen i want the header card to be so i'm gonna say one one because i want it to be in the top left hand corner and then i'm going to say 11 1 because i want it to be 11 units wide and one unit tall i then need a title we'll call this um aggregated visualizer and i need a subtitle we'll call this um [Music] there we go say what our app does okay so we've done step one we referenced a specific page the root page step two we've put some content on the page and then step three we have to actually save it so i'm gonna right click and run this it ran successfully now let's go to localhost and we did not have a curse of a live demo it worked that's good here we have our header card so it's on the top left hand corner it's 11 units wide and it has the information that we put there um so there's a couple other things you're going to add to our base ui we're going to add the tabs so users can pick what type of view they want and then we're going to make placeholder content for either the table content or the plot content so i will go ahead and add a new page here and i'm going to call it navigation and it's going to be a tab card um the wave documentation is at wave.edu ai and you can see all the ui components there the different types of cards and see a lot of example code okay so we need a box so where do i want this so we're still using the grid based system right now i'm going to switch to a layout based system soon that will be a little easier to think about um do less math but for right now i know i want it to start all the way to the left i want it to be right under my header and then it can probably still be 11 units wide and only one tall um and then what else does a tab card need uh this is where the ide comes really nicely in play we can see any items a list of tabs so we'll say items we're gonna have two tabs one is going to um be for our table view and one for our plot view so the name is going to be the way that the backend site content knows what this item is so it's going to be sort of a computer-friendly name i'm going to do all lowercase and then the label is what your end user actually sees so it's something a little more more pretty i'll go ahead and just copy this and then do the same thing for plot all right and then we'll save we'll run it and go check it out and here we have our items now at this point this isn't interactive yet if i were to click this nothing happens it doesn't know my my site content doesn't know what to do when i click this button so that's what we're going to program in soon all right but let's go back here um instead of doing a grid base i'm going to actually create a layout system to use so that the different cards can be placed on the screen in relation to each other rather than exact locations and i'm going to do this one because it's easier for me to think about but also what if i have someone that wants to view their aggregated data on mobile or on an ipad using the exact grid layout it's not going to work so well so we're going to switch to a layout um so i'm going to use a meta card for this and the ui meta card has a lot of different types of options this includes um being able to change the information that's here in this tab text i could choose change this favicon um there's a lot of information in the meta card but we're gonna just look at the layout right now so we could add multiple layouts like if we wanted the content to be one way for mobile in a different way for desktop but i'm going to make just one layout today the breakpoint i'm going to call extra small because i'm going to make a layout that would be okay on mobile even though we're doing desktop development um and then the only thing i need is a series of zones and these are all going to be relative to each other so by default the zones are going to stack on top of each other but if i wanted any of the zones to stack horizontally instead i would just tell them that but i'm going to have three zones i'm going to have a zones i'm going to have a zone called header that will be on the top a zone called navigation and then a zone called content oops um in just to be s content there we go just to be super clear it is a coincidence that the page name and the zone name are the same just because that's the type of information there they do not have to be the same what i'm going to do is come here into the box and i'm going to change this to header and i'm going to change this to navigation and then we're going to save it and run it and we're not going to in this case really see a difference right now but if we were to add anything else they would all be relative to each other and if i were to look at this on a um if i were to like say make my screen smaller it's going to um automatically adjust rather than scrolling over like if i had it 11 units wide okay oh no i lost there's my browser so let's get back into it we now have the start base ui of our application um we still need to decide what happens when someone wants the table view what happens when someone wants the plot view but i'm gonna switch now to an interactive application um so i'm going to add two more three more imports here q which is the query object or how we're going to interact live with our server app which is a we'll talk about app in a minute in main which is how python knows that this is basically has a main function in it i'm going to instead of using site we don't need say anymore i'm going to use app and what app does up here is it says whatever function comes next is going to be the interactive function so if they have a new user if someone clicks a button anything like that they're going to get sent to whatever function has a app above it so just like with site here i could change the url i could have multiple apps running on the same server but we're going to do the base url just for ease um all right so let's put all of this into our serve function okay but we're getting told the page doesn't exist and that's because page is now inside our query object so instead of site is for static apps and queue is going to be for interactive apps so i'm just going to change this to q.page for all of these and then for anyone who's maybe new to application development i just want to call out this async really quick um essentially we're building an asynchronous application so we could have multiple users all hitting the app at the same time and they wouldn't have to wait for each other on the back end um so you're going to see async and also a weight throughout this application and essentially just know that it is a way to have multi-users um asynchronously interacting with our application um so you can look into more but that's basically what's happening here um okay so we now have this um new setup and we're going to run the app a little bit differently instead of right-clicking and running this like a script we're going to actually use um a our terminal you can set it up in vs code or um pi charm up here using the run button but i'm going to run in the terminal and i'm going to say wave which is in my virtual environment i'm going to say wave run app and it's going to run this as an application now i'm going to come here i see the same thing so maybe we're not sure if anything's changed but let me show you what's cool about apps running is i can change the content hit save do nothing else it will automatically reload the app for me and i see my changes in real time so especially if you have two browsers two monitors um this is really nice because you can write code down here and then your second monitor you can just see it updating in real time to see um how it's it's working for you so um we now have the base for an interactive application so let's uh we're gonna come up back here if you remember earlier when we had a static wave script when we clicked on plot it waited forever so now let's see what happens when we click on plot it's flashing and going back to table so the reason for that is because let's say let's print our arguments from q um every time that i click here it's calling that serve function again um so we can see that it's saying they're clicking on the plot but i haven't set up any logic for what happens when i click on plot i am just rewriting the u the whole ui and so this is where we will start setting up our app logic i'm going to make a new function that's going to be called set we're going to be really descriptive for a live demo today set up ui for a new user and we and it needs q and we only want to run this for people who haven't been at my app yet so what we're going to do is use our query object to track information about different browsers coming to the app so we're going to say um if not q dot client dot initialized now initialize is a variable inside of my client state that i'm making up right now um what i'm going to do inside of my setup for new user function is i'm going to make this equal to true so once someone sees the ui once i don't need to show them the base ui over and over again only one time but i want this to happen for every user so if a new browser tab comes to my app i want them to be able to see it so we're going to run this code for every new user all right so i'm going to save this and we'll come back here and when i click plot view it's loading again because i haven't set up the app logic but i've told it don't repaint my whole ui so we're making progress all right so i'm going to make two new functions down here um called table view and plot view and right now they're just going to be placeholders so i'm going to say q.page table view equals ui and we're going to use a form card form cards are a good catch-all they are good for actual forms if you want someone's like username and password and buttons or if you want to have a lot of information in a row so we're going to have a phone form card the box is going to be content and we're going to have a list of items the only item i'm going to have right now is a large text heading that says tableview so it's not too exciting but i'm going to do the same thing for plot view all right so we have these two um functions so now we need to tell our app one to show them so i saw down here in my oh refresh for me thank you um i saw down here in my query object that every time i was clicking the plot tab it says plot is true and that's because that's the name of this tab so if i were to change this to something else i would say that was true so what i'm going to do up here is say if not initialized show them the new screen else if the argument called plot is true i want let's do table first if the argument called table is true i want to do the table view and if the argument called plot is true i want you to do what did i call that yeah plot oh hot view oops that's not what we want plot view much better and we need to give it the point object all right so let's save this so we've started to put in some of our app logic so let's go check out how it works when i click on plot view i see plot view and when i click on table view i see both of them but i do see table view so we have made it so that when we click these buttons we see the cards we want all right so what we need to do next is make a little change to these um when i go to the table view i'm going to actually delete my plot view card and if it doesn't exist nothing will happen that's totally fine and when i go to the plot view i'm going to delete the table view card um so if you go to the github and you look at the live code we do this a little more cleverly we're going to have a function that will delete all the cards for us but for right now this is a quick way to just um since we only have two main views that we're showing delete one or the other as we go there so now when i click plot view i see the plot view when i click table view i see the table view all right there's one more thing that we want to do if you notice when we're actually um at our app we don't see our table view so i'm going to go back up to my app logic and say if you're not initialized if you're new here i'm going to set up your ui and then i'm going to show you the table view as a default all right and now we have that there um so we can see it's pretty straightforward to start adding in our content for our ui um and at this point we're going to actually create our fake data set and then we'll create the actual table view and plot view for those pieces all right so i'm going to make a function called aggregated data and eventually this function is going to use it's going to start an h2o cluster it would allow you to say upload a data set maybe you want your user to bring in data from s3 or from some database we'll put the data in the cluster and it's going to do the aggregation function um but right now we're just going to use a really simple data frame that has less than 100 rows to do practice for our ui rather than running the aggregator function every time while we're still doing our initial testing so i'm going to go ahead and import pandas which is not in my virtual environment so we'll go to our requirements we'll add it and um any version of pandas is fine i'm going to just use the latest and we'll install our packages um and then we'll wait for our uh index to be reset so that it knows that this is installed all right so for right now i'm just going to make a really simple data frame that has three columns it's going to have a uh c1 column one which is going to be um a hundred numbers from zero to ninety nine i will have c2 which is going to be more of the same and then i'm going to have counts and the reason i have counts is because when we actually run our aggregator function it's going to take our millions of rows and reduce it down to close to 100 rows and each of those will have some sort of count so that's where we're going to just simulate that here with some fake data and we'll say return df and then let's go ahead and do some little logging for ourselves we're gonna print the first five rows of this um when we call this function um so i'm gonna just add that call it here because that's we'll do our um aggregated first so if i go ahead and i need to run my app again it's false oh isn't it there it goes so i uh down here when i called this function i had a print and you can see our fake data here um so we'll replace this again with real aggregated data but we're just doing some testing for now okay so let's make our table view first so there are uh 100 plus different types of components and cards available in wave and one of them is a table so i'm going to uh make a table and there's going to be three uh parameters that we need we want a name for the table so i'm going to call this aggregated it needs some columns and it needs some rows all right so i have my data frame here so uh the columns are actually going to be ui dot table column objects and this is because we can give them all sorts of different properties like each column could be sortable filterable searchable and so forth so we could be very customized and make the exact column we want for each of our inputs but i'm going to just make all the columns the same using python's list functionality for now so i'm going to say that the name is going to be the column name the label is going to be the column name and this call doesn't exist yet um it's going to be for call in df.columns.values all right and then oh i guess i don't need these parentheses i'll get rid of them so it doesn't yell at me with its squiggles um all right so now if i go ahead and save this i look here and i can see my three columns um and from my data set we haven't added any rows yet um so in case anyone is not familiar with sort of creating lists in python that's what we're doing here we're taking the list of column values and we're making a list of these ui table column objects so now we're going to do that for our rows as well and look over here here we go okay so i'm going to do the spacing this little different so we're going to use the table row item and it has two values it has a name and it has the cells which is a list okay and we want to make a table row for um [Music] for every row in our data set so um for each row in the length of our data frame because this could be variable length um it might not be 100 rows when we do our aggregator function i'm going to make a table row so this is creating a list of at this point 100 table rows the name of it is going to just be i and this is so that if a user selects a row we know in our server function what rows they selected and then we actually want to get all the data from that actual row in canvas so we're going to say that we want a string data type um we're gonna do the column the data frame.column values i and this is gonna be for column and df dot calls dot values um awesome so there's a lot of example wave code we have a repository called wave apps that's open source and github and it has things like this that you can copy and paste from um so essentially this is going to take every row in my data set and put it in my table so now i have my hundred data points um there's a couple things you might want to add to our table for example our users might want to download the aggregated data so in addition to name columns and rows i can say downloadable equals true and then i have a new download data button here when i click it you're going to watch it go and now i have it available so i could go do whatever i want with this data um we could make these columns searchable filterable and so forth but at this point we're going to stop with our table view and we're going to actually set up our plot view all right so i know that i will need this data frame in my plot view so i'm going to bring it over here and now i'm going to show you the power of looking up code that already exists so we're going to go to the documentation we've got hti and i'm searching specifically for pandas i'm going to look at the example of how to plot from canvas um and just copy and paste this rather than having it memorized um so essentially when you're building a plot and a wave you need to tell it what data you want to use and there is a new import you need for data but this data import is basically a data buffer that would allow us to add new data in in real time in a really memory efficient way so i need for my plot i need the data from my data frame and then my actual plot object so i'm going to just copy this and we'll talk through it here we go so we'll pop you oops i forgot the ui visualizer option so i'm going to actually make a visualization but it needs the data for the visualization and the plot okay so our data is going to be taking the fields um as all the columns in my data set the rows is all the values in my data set and then pat equals true means in this case the data is not going to change we're not going to be doing real-time live updates so this one's just going to make it more memory efficient um if i wanted to have a dashboard that updated automatically every minute hour week and the data was going to be changing i'd be pushing the new data i would not use pack and um it basically makes it mutable all right and then we're going to look at the plot variable so in a ui plot you can have multiple marks so you might want to have a line with points on it you might have intervals that are annotated so in our case we're going to have just one mark and it's going to be a scatter plot so the type is already correct we're going to do a scatter plot um there are lots of different available options you can do your bar plots histograms lines and so forth but we're going to do scatter plot in x and y it's looking for the column names from our data that we want to use so i'm going to start by visualizing c1 column one by column two i don't want to give them special axis titles yet because this is sort of variable we will end up writing this code so that it could work on any data set but right now it's going to only work when we have columns called c1 and c2 i don't need a special color for this specific plot but i am going to add in the size and we're going to say i want the size to be equal to whatever data in here is called counts so each point is going to be a different size based on the count so i'm going to hit save we'll come back to our app click on the plot view and here we have our scatter plot um so once you are starting to get started building plots in wave it's pretty straightforward to do we wanted we could change the color of these points we could change the axis title and make the plot look a little bit more like our brand or visually interesting to our users but at this point we have a table view and a plot view so what we're going to do next is add a drop down to this plot view that lets the users actually choose the x and y columns because our large million row data set might have hundreds of columns and we want the users to be able to explore the data that's the point is to let people understand their big data so let's go back to our plot view and between my title and my visualization i'm going to add a drop down list all right the name of the drop down list is going to be um x variable and then my drop down list needs um we'll give it a label so that users know what it is you want to make this as easy as possible for any users x variable and let's see we also want to have choices so this is what the user can actually choose from so choices is going to be a new ui object called ui.choice and it needs a name and a label so the name is going to be equal to call the label will be equal to call and we're going to do this for column in df.columns.values there we go and let's save this so now when we go to our plot view we have a big x variable that has all of our columns available it doesn't do anything yet when we click on it nothing's going to happen but we've really quickly added in a new component okay so i want my x variable and my y variable to be right next to each other rather than one on top of each other so i'm going to use a new ui element called inline which has just one um we'll actually use the parameters so you can see what i'm doing it has one parameter called items and i'm going to actually put my drop down list in it so inline is going to put different types of components next to each other okay so with a new component called x variable and it will also have all the columns so now when i go to my plot view i have my x variable and my y variable as two drop downs next to each other so we're able to easily add in these components okay so now let's add the logic to them when i select a x variable i want my x axis to be updated with this data so what i'm going to do my name is x variable and i'm going to add a new parameter called trigger equals true so when someone changes this i want the app to send that value to the serve function so now when i select a variable here it's going to say loading because i have not implemented this functionality but it's paying attention to the changes for me all right i'm going to copy the name of this drop down and go back up to my search function and we'll go through the logic again if you're a new user i want to set up the ui for you if you've clicked the table view i want to show you the table view if you click the plot view i want to show you the plot view if the x variable has been selected or is it or there we go um we're gonna wait sorry if qrx the x variable is not none or if q args dot y variable is not none oops is it or there we go and we're going to just do parentheses to be clean and we'll test our work before we code the functionality um plot variables change let me change one of my variables and i'm going to appear and it printed so we were able to catch that here okay so when the plot variables change what i want to do is i want to change this to whatever is appropriate and then re-plot this so what we're going to do is create in our user setup we're going to create a new client x variable and y variable and just for now we're going to start by hard coding it with c1 and c2 just so that we don't do 10 steps all at the same time so um we're going to start by the x variable is going to be c1 and the y variable is going to be c2 okay the reason we're going to do this is so that up here when someone selects one of them what we'll do is change it so we will reset this x variable as the argument that was selected we'll reset this um y variable as argument that was selected and then we'll recall the plot view function now i'm going to copy this again and i'm going to update my plot view and i'm going to say that this is not c1 it's whatever value is inside a client variable and this is not c2 it's whatever variables inside of y variable okay we could also let's change our title and let's make it say relationship between these two variables we'll go ahead and save it and we'll go to our plot view and now i'm going to change this to c1 oops live demo okay that didn't quite oh i know why that didn't work okay that didn't work because we changed c1 and you see the value here is empty so it's set the value of x to empty so what we're going to do is come to our drop downs and i'm going to say that the value of this drop down is equal to whatever is in my q client x variable and the value of this drop down is going to be whatever is in my y variable back to the plot view and let's try plotting c2 by c2 and there we have it we can try doing counts by counts or counts by c2 counts by counts all right so um i'm going to say this is a good stopping point for us we didn't get to adding in the h2o aggregator function we're just using big data right now but this is available in open source repository if you want to see how to use that um in there we're going to create a million row data set aggregate it down and then let our users visualize it um so i'm going to jump back into the sides and tell you what you can do next if you want to learn more no i do not want to share this with anyone i want to present there we go all right so what we could do if we wanted to keep going with this app um please feel free to fork the repository and make some changes uh we can let the user actually upload a data set so in the final code in the repository you'll see we create a fake data set in h203 that's a million records but you might want to add the ability for your users to upload their data from their local machine or talk to a database um anything you can do in python or r you can add to your app for modeling what or modeling or data reducing in the sample code we're just spinning up an h203 cluster on our local machine but you might want to connect to a production cluster that's running in hadoop or somewhere else we could also let the end user make some parameter decisions about the aggregation so in the final version we are deciding for them how the aggregation should be done but maybe you have a more technical end user that wants to decide if they're aggregating down to 100 rows or a thousand rows so that's something you could add in for right now for the visualizations we're just doing a scatter plot of every two columns but it might make more sense to do lines or intervals or plots depending on what types of data you're looking at so you could add more logic into the visualizations to show different visualizations to your users and then there's some app robustness we could do we absolutely need a readme for new developers and that's in the github for you but we might want to add unit tests or documentation as well um one thing i wanted to mention so we are looking at building applications on your local machine today um but the h2a hybrid cloud allows you to deploy applications so end users can have access to them and that you as a developer don't have to think about scaling or security or any of that so if you would like a child of the hoa hybrid cloud it's really easy to sign up you go to h2ai free and you can get a 14 day trial just be sure to use your corporate domain or corporate email and check your spam folder because sometimes those types of things get stuck um you'll be looking for an email from cloud no reply but this gives you access to the whole hti hybrid cloud you can see over 35 applications built by the h2o team some of them are example applications and others are going to be end-to-end solutions you can use today you also have access to our ai engines including h203 and driverless ci as well as envelopes for deploying so go ahead and make an account if you want to give that a look um a couple resources i want to point you to so we'll be putting these slides i'll be linking the slides to the github we'll host them publicly somewhere um but you might want to check out the wave documentation that's wave.h2o.ai where you can see um there's two main ways to get started there one is for my hands-on people there's hands-on tutorials sort of like what we did today that walk you through how to build applications and then if you're more of a learning by reading there's a deep dive into the various concepts so we talked about some of those concepts today really fast you can get more knowledge here from the the documentation there's a link to a public repository called h2o slash wave dash apps and that has seven open source fully end-to-end application codes some of them with unit testing and so forth so you can see how that works and they solve some common business use cases on public kaggle data we also from the age tour training team have tons of trainings and tutorials you can see a list of some of them here which gets you started with building the machine learning models understanding how to do machine learning and interpretability and building models for different types of use cases like time series or nlp and the last thing i wanted to share with you is you can join our public slack community um sign up at h2oi slash slack community um and you can join us right on slack where our engineers developers and people like myself will be on to answer your questions you can also get direct access to the h2o community which is a lot of clever people using our products for a lot of really interesting things um so at that point i will wrap up and if you have any questions please feel free to put them in the chat or you can join the community and ask them there

Channel: H2O.ai

Views: 408

Rating: 5 out of 5

Keywords:

Id: alYWqXv8Sdg

Length: 55min 17sec (3317 seconds)

Published: Wed Jul 28 2021