Streamlit for ML #5.1 - Custom React Components in Streamlit Setup

Key Takeaways

today we're going to have a look at how we can build custom components in a streamlit using react and external libraries like material ui so there are already plenty of components that you can use directly from streamlit and also from the streaming community but obviously you may find yourself needing to use something that doesn't already exist so we'll go through that process uh fortunately it's not too difficult it does require a little bit of like front-end code but streaming it doesn't make it pretty straightforward so let's have a quick look at what this card might look like or this component is a card so all we have for our custom component is this little card in the middle here the rest of this is just streamlit and then this bit here is based on a material ui component so if i go back we just have a title subtitle text or body of text and a link here which is a material ui button click on it and for now it's just taken to google but we can essentially [Music] like an object in python we can pass whatever values we like to this component so here are the actual cards from material ui that we're basing this on and with these cards we can include much more than what i have shown you this is just the absolute basics like we can include these little profile images drop downs options and so on even though expanders pictures so yeah there's a lot we can do with it and as far as i know there isn't anything like this uh available directly within the stream so let's go ahead and set up our environment for developing this component so if you are on mac and you have homebrew installed you can just go through install node and this will install node.js and the node package manager i already have it installed so i'm not going to rerun it if you are not on mac or you don't have homebrew you can download it from the node.js website so over here this here node.js so old um and then download okay you have windows mac and so on so once you have that installed you also need to install extremely i'm going to assume you already have it installed but if not you just pip and sold streamlit now i have streamla in another environment so i'm going to activate that on that streamlit and the streaming side of things i will run from this terminal window now to build our component for streamlit we need to follow a certain structure and unfortunately streamlit provides us with a few templates that we can start from to make our lives a little bit easier so let me show you where you can find those so if we just type in um streamlit and github or maybe we can go with streamlit components template it's probably easier we come here okay and we have the streamlit component template uh repo we just want to git clone this so we click on code over here copy this and then switch back to our terminal um navigate to whatever folder you're going to store the template folder within so i'm going to go to documents and projects and i'm just going to write git clone and then i'm going to clone the that the component template repository okay um let's open that nvs code and we'll have a look at what we have in here okay so on the right over here we have our directory structure we have a few different templates so we're going to go this template here which uses react and within this template directory this is our actual like project so we can almost ignore the rest of this stuff here just anything within template is what we care about uh we have set up pi so we're going to use this and manifest for creating a pip package which will contain our component so to actually use that component we install our component and then we just import it into our like our streamlit app script or app.pi usually and then use it and [Music] within here we just have the default file names here or default directory names of my component we're going to change some of these uh inside here we have init pi so that's where we're initializing our streaming server or app from um we'll go through that it's fine we have this front end which is anything in here is the react side of things so if we go a little further we have some styling you know the index and then in here we have these uh tsx files okay so in here we're using typescript so if you know typescript is really good if not it's not too much different from python i mean it's fairly different but it's not unbelievably different so i think if you know python probably read this at least and kind of follow what we're doing um but i also don't really know typescript i'd like to just get through uh putting something simple together with this so most of the work we're going to do is going to be my component tsx but we are going to modify a lot of these files as well so first let's rename everything uh because everything at the moment is using default names um and we obviously i'll build a custom component we want to give our own name um that makes it a little more identifiable so we'll start by going to my component up here i'm going to rename that to st card component so st just streamline card component down here we have my component going to rename that to card component basically anywhere that we have my components we modify to card component we update these imports okay so inside card component here if we just find and replace so find my component and replace that with card component place all of those and see if we have anything for my component nope okay save that and let's have a look at the index i think we also have something in here um just just my component here okay replace those so we have everything in there and in set of pi we also want to update the name here so this will change it to streamlight card component okay so this defines it for our for our package later on and it's actually sorry so this should align with the directory order folder that we have here so not streamlit but st and in our manifest here we also need to update this to be um st card component so this needs to point to the front end so that's building out the build directory yeah but we will so that needs to go st card component in here okay um so that should pretty much be everything we need to rename maybe other little bits are actually in init here we also want to change this to sd card component so here sd card component it's anything else okay now that's so let's go ahead and actually uh initialize the current or the basically default rather than the things we've renamed version of this component and see how that looks so we'll go to and here we have the component template and inside there's a template um see yeah template and then we have st card component so in here we also have front end directory and inside here we have all of our packages and everything so like the node side of stuff so first first thing you need to do is actually install the node packages we need for our component so to start we just do npm install and this is just going to install everything from this package.json file so run that it might take a moment so just give it a second okay so that's done and next thing we want to do is install the node packages are required specifically for the card that we're going to build so these are all the node packages we just installed there for streamlit to function like the core of the packages that we need but because we are using this material ui card thing we need a few extra things so we need to npm install again this is kind of similar to like a pip install um although it's specific to this directory okay so when we pip install um install them to our python environment in this case it's almost like the environment is this directory and this like um this project correct project so npm install we need mui material and ui icons material icons material emotion [Music] react and also emotion styled now i think this is probably going to give us an error let's see okay so yes we get this error it's um we have a dependency conflict with i think if i remember correctly yeah so we have to stream it component template and this um it throws some dependency conflicts with the mui material stuff so it's annoying but we can just get around it by adding this legacy peer depths now i haven't i've been playing around this i haven't noticed any issues uh pop up from using this live spear depths but i'm obviously you just need to be aware like don't just throw it in there all the time but in this case it seems to work fine okay so with that we can we should be able to run um everything so let's go ahead and let's go ahead and do that the first thing we want to do is so we're going to run two things here we're going to run within this front end directory we write npm start this is going to initialize or execute the server that hosts our react component and then we also need to open another terminal window we also need to navigate to our template directory so cd documents projects it is a com component template templates okay cd template and in here we have a sd card component again we have this init pi init pi is like well it's not exactly that uh but while so in development it is just like a [Music] template app for just running and testing um our component so we just write streamlit run init.hi so previous videos you've probably seen me private streaming run app.pi this is kind of acting as our app.pi whilst we're in the development stage um but once we switch to um a release version this init pi uh we will modify a little bit and it will not be for for doing this streamline run it will do something slightly different it will extract everything from a from a compiled build distribution so now we have these we're hosting two two servers we have this localhost three zero zero one if we if we go over there open that we're going to see well nothing so this is just hosting our react component about our react component by itself doesn't actually show anything so we actually need to go over and open the streamlit um localhost so that is in eight five zero one okay and now we have this um like template component so we can click here we it updates this basically okay maybe even change this enter yeah we get this okay so that's cool um but obviously we want to build a custom component um and we'll go ahead and we'll do that in the in the next video uh for now i think we'll leave it there we've sort of set up the environment we've started running the default component and i think that's good enough for now and yeah in the in the next video we'll be able to really focus on actually building the component itself um which means we're going to be toying with the code over in the card component tsx uh quite a bit and cleaning this up and yeah creating our card so i hope that's been useful thank you very much for watching and i will see you in the next one