Streamlit for ML #5.2 - MUI Card Component Build

00:00:00.000 | Okay in the last video we put together the default Streamlit component or

00:00:09.040 | custom component and Setup our environment for actually building our own. So what we

00:00:17.680 | have at the moment is pretty simple we haven't really done anything we just

00:00:23.960 | have this custom component Streamlit and we can see the code for this

00:00:28.760 | component as well if we have a look over over here so this is just a default

00:00:33.960 | component we're not actually doing anything here. We're just actually not in

00:00:41.640 | that file it's in the init.py here. We're just running this using nothing more

00:00:48.720 | than this code here. Okay so we have this my component object but that's all that

00:00:57.280 | you can see where we're like clicking and everything else so this here it's

00:01:04.480 | hello James click me that's hello world click me that's all it is it's just a

00:01:10.120 | little object. So what we want to do is actually create a card component based

00:01:17.840 | on material UI which is what you see here like this sort of card we're not

00:01:23.680 | going to make it that fancy although it's really not difficult if you want to

00:01:29.320 | take it up further you definitely can. What we're going to do is you're going to take like a

00:01:34.200 | title a subtitle we're going to include body of text like this and we also want

00:01:41.680 | to include like a button not like well kind of similar to this way we have like

00:01:46.840 | a circle and we hover over it and if we click it there's this nice little ripple

00:01:55.120 | effect. Okay so let's start putting that part of our component together the

00:02:05.400 | actual code that creates this card. So most of this is going to come

00:02:13.360 | from this card component of TSX file and now in here at the moment is there's a

00:02:19.600 | lot of code like far too much we don't need all of this we can delete a lot of

00:02:27.440 | it so let's let's do that first before we do anything else. First I'm going to

00:02:32.720 | change this to any, I'm going to remove all of this. We don't need the state variable we also

00:02:43.960 | don't need this name variable as well but I'm going to keep it in here for now

00:02:48.320 | because this is how we pass arguments to our card so we're gonna title,

00:02:56.560 | subtitle, body and link. We're going to remove the theme, we don't need this. We

00:03:08.440 | do want to include something here so this is where we return the actual HTML

00:03:15.400 | that controls our look and actual structure of our code. Okay so I'm going

00:03:28.760 | to remove these functions that we have here as well don't need any of these

00:03:33.920 | these are all very specific to that default component that we saw and then

00:03:40.240 | the rest so the rest of this are actually we do need. I'm just going to

00:03:46.120 | remove, we don't need so many comments for sure. So yeah that that's basically

00:03:53.200 | everything we can remove and I'm also going to just clean this up or just

00:03:59.920 | remove everything actually for now so we'll leave it like this. Okay so this

00:04:07.640 | here is it's very core what we need in our component in our React component so

00:04:18.560 | if we switch over to our hosted version of our component now we should see

00:04:28.800 | that's pretty much well it should pretty much be empty so yeah okay so now we

00:04:37.560 | just have this you click zero times but that that like click me part of the

00:04:45.440 | component that's not there anymore it doesn't exist okay I mean it is

00:04:51.640 | actually still there but it's just a it's just some empty span tags there's

00:04:55.880 | nothing nothing we can actually see. So now what I want to do let's modify this

00:05:03.040 | so that we can have a different app or a different way of viewing our components

00:05:09.400 | so come over to init.py okay I'm just gonna put this is like test one we have

00:05:23.520 | our components and I'm gonna have I'm going to include this divider test two

00:05:36.400 | this okay and then here I'm just going to put anything really oh and also remove this okay

00:05:52.880 | rerun okay now we just get this now let's add some something to our

00:06:01.840 | component so so if I go to here let's go to the card component txt what I'm

00:06:10.440 | going to do is I'm going to copy this paste it a few times and I'm going to

00:06:16.120 | include the components or the parts of our card so I want to have a title

00:06:25.680 | subtitle a body and a link okay and we'll just rename these as well

00:06:40.000 | title okay move that as well now so now if I switch back over to the local host

00:06:54.880 | rerun we're probably going to get an error I would expect to see some sort of

00:07:03.680 | error okay so actually okay that's fine so at the moment we have that name and

00:07:11.880 | everything in there but they're not being used and they're also not being

00:07:16.360 | passed to our component if we look at our code in init.py we're just passing

00:07:22.760 | this one parameter and also passing key now our component doesn't include any of

00:07:27.320 | those it actually includes these like title, subtitle, body and link so how do

00:07:35.120 | we how do we add those in we head over to init.py and scroll up a little bit

00:07:41.400 | and we see the definition of our component this acts as like the middleman

00:07:45.760 | between our components actually should be called a component and later on we

00:07:52.600 | should be calling this card component as well

00:07:56.600 | do you have any of my buttons okay seems fine so in here we are accepting just

00:08:13.480 | name we don't want to accept just name we want to accept all names as well so

00:08:20.280 | I'm going to remove most of this

00:08:26.240 | and I'm going to swap this out for title, subtitle, body and also link okay so we

00:08:48.440 | passed those in and then in our component function we also need to pass

00:08:52.080 | those so let's go title, subtitle, body, link

00:09:15.080 | now we can remove these other parts for now so we don't need this key. Key is useful

00:09:23.800 | if you have multiple components and they have certain action on them so you for

00:09:27.960 | example press to expand them you want to include key as you would pass just like

00:09:33.680 | a random number to each version of that component and that allows Streamlit to

00:09:38.840 | identify those each of those individual versions of your component as actual

00:09:43.000 | independent components so when you press the action expand one it doesn't expand

00:09:47.120 | all of them but we're not we don't have any actions I don't think so we don't

00:09:52.240 | need to worry about that

00:09:55.520 | okay we also don't need to return any component value so before where we saw

00:10:08.400 | it was saying like you would click and it was increasing that number that's

00:10:12.320 | what was going on there but we we're not doing that for our component we're just

00:10:17.160 | displaying some information or modifying anything okay now if we switch back to

00:10:25.960 | our local host we probably see an error so we rerun and we get this type error

00:10:35.600 | card component missing three required position arguments now the reason for

00:10:40.080 | that is because when we're actually calling our component in later on in

00:10:44.360 | pi we're only passing a single parameter to it which is a big hello world so we

00:10:52.360 | need to pass at least four okay one for each of these arguments that we have so

00:10:57.480 | let's have a look at that in here okay so we have card component and we're

00:11:02.800 | passing at the moment this is just a title we want to pass okay let's say do

00:11:09.480 | title

00:11:12.200 | sub subtitle and have some some random text here for the for the body

00:11:29.920 | now we also want to have a link so I'm gonna go google.com okay and then let's

00:11:44.840 | just copy this component this isn't returning anything so let's remove this

00:11:50.280 | as well so let's copy that and this is going to be number two so the title to

00:12:00.660 | add some more text in here and yeah just leave it with Google it's fine I don't want to change too much

00:12:11.640 | now let's have a look at our logos rerun and now we have this so we don't still

00:12:21.880 | don't have anything in there let's have a look at why let's try to figure that

00:12:29.320 | out so we have our card component create this is how looking in here okay so at

00:12:43.720 | the moment we just have span okay we're not actually showing any of these any of

00:12:51.200 | these parameters that we've passed to our component so let's go ahead and do

00:12:57.160 | that we have let's wrap everything in it in a div and then I'm going to go just

00:13:04.920 | page good second heading for the title so to pass actual variables into here we

00:13:13.240 | just use each curly braces for subtitle and then we also want to include the

00:13:28.000 | body so body and also a link so for the that will just use a breath again using

00:13:40.800 | the curly braces in here as well as a link

00:13:45.120 | same for this link now let's have a look at what we what we get okay so we can

00:13:53.040 | see that we have our component now we have the title subtitles and text and

00:13:58.640 | body link like that and it will or it should take us to Google doesn't seem to

00:14:07.520 | work at the moment I'm not going to worry about that now but we'll make sure

00:14:15.800 | we get working for the actual card okay so that's we have the key components

00:14:25.240 | there but we need to actually format this into the material UI card so let's

00:14:30.320 | let's go and figure that out we'll come to here it will let's copy we'll copy

00:14:37.840 | this one

00:14:41.240 | maybe so an earlier one yeah let me I'll copy this one it's our line card here

00:14:48.600 | okay so there's a few things in here we need to need to make sure we include so

00:14:55.800 | we have these imports so we have a card card actions that's where we have like

00:15:01.680 | the button or where we will place a button so I'm going to import all those

00:15:09.560 | we do here save that and then we also want to include all of this stuff here

00:15:23.320 | so we have a card I'm going to down just copy all of that and let me paste after

00:15:37.800 | our link here so I can keep track of everything to the topography okay so we

00:15:53.840 | also need to add card around this I figure out in a minute

00:15:59.520 | that was so let's remove a few things so we have topography I want to so the body

00:16:07.040 | I'm going to include in here other topography to just remove I don't

00:16:18.640 | really want those button we're gonna modify all this so let's just leave it

00:16:26.760 | like that remove those and now we should see a card

00:16:35.520 | let's open this look okay so we kind of see we actually just have this the

00:16:44.480 | contents of the card I actually have the card that's because we also add the card

00:16:49.040 | tag in there as well so if we just do card

00:17:05.080 | the variant is outlined

00:17:10.200 | so yeah so I mean so this bit here should be everything should outline have

00:17:31.760 | this on the on the outside so basically all of this in here all this constant

00:17:38.240 | card is actually being inserted and to this wrapped within card so that's why

00:17:45.040 | we can't actually see it at the moment so add this and we should it should work

00:17:53.560 | now we should be able to see something

00:17:58.160 | okay so now we have our card so we have the body of that but we need to include

00:18:04.000 | title subtitle and this learn more is it is a button at the moment I want to

00:18:08.640 | make it like a like an icon button so we'll modify that as well so let's

00:18:14.640 | return to this I want to include the card header I go here card header and

00:18:25.440 | here we're going to have the title and also the subtitle so we have title and

00:18:31.160 | I think subheader

00:18:35.000 | subtitle and we just close that tag like that so look okay so cool we have

00:18:49.360 | our title with subtitle now it's looking better another thing that I'd like to

00:18:56.440 | include is a bit of padding here so I'm gonna write style and we have some

00:19:04.320 | padding going to be 0.5 rem okay so this just means if we have multiple cards and

00:19:14.960 | they choose each other they're not going to be touching there's gonna be a bit of

00:19:18.400 | space between them okay so it looks that's pretty good I think we just need

00:19:25.000 | to include the actual button okay so buttons are a little bit different

00:19:32.720 | I do have an example on a car okay here we have these buttons basically what we

00:19:39.880 | want so let's have a look at how how that is done so we see we have this icon

00:19:46.560 | button

00:19:48.880 | so we have card actions here and then we have icon button so I'm going to copy

00:19:58.920 | this

00:20:01.080 | place it in card actions and then replace this one here you don't want

00:20:08.600 | that okay icon button

00:20:13.720 | it's going to be like open URL and for share icon I'm not going to do that I'm

00:20:26.160 | going to I think it's expand icon is the one I want and change this to expand

00:20:33.880 | icon and we want to modify this so oh sorry we need to import everything so

00:20:42.280 | see at the moment says cannot find name icon buttons because we haven't imported

00:20:46.080 | it at the top so let's let's do that

00:20:53.240 | so let's have a look at our example again is it this one no this example we

00:21:03.640 | have icon button yeah okay so and we also have a share icon so let me copy

00:21:15.280 | that across

00:21:17.960 | okay and it's launch icon I think I think I wrote expand icon yep so launch

00:21:28.720 | icon instead and we import that so right import launch icon from and here we're

00:21:43.640 | going to use the icons material that we installed in the previous video so icons

00:21:49.160 | material and it's launch okay so let's have a look at what that looks like now

00:22:04.920 | okay so we have this launch icon doesn't do anything at the moment because we

00:22:09.120 | don't have any URL in there I'm connected about link yet so let's do

00:22:16.200 | that so you need to pass that into our the icon button part here so we have

00:22:22.600 | correct as we did before and we just passing our link and then another thing

00:22:30.440 | so okay let me save that so it should run it okay so now it's going blue that

00:22:43.800 | goes in that form because it's an actual link I was still not opening anything we

00:22:49.160 | need to the reason for that is because a streamer is displaying all this through

00:22:55.720 | a iframe which is like an embedded web page within the web page and so it's

00:23:02.360 | actually opening opening it within that iframe but at the moment it's just it's

00:23:10.520 | not working it's just not opening anything it's just because it's kind of

00:23:16.200 | being I think it's being blocked by or something on those lines I'm not sure so

00:23:21.640 | what we want to say is we want to open it in the parent browser of that iframe

00:23:28.120 | to target this actual window so to do that we need to add in here I need to

00:23:39.200 | modify the target so target is going to be equal to underscore parent now save

00:23:50.040 | that and try again okay now it's working again okay

00:24:01.760 | cool so and there there are cards one other thing we need to just see here is

00:24:13.600 | the actual font is different to the mui font yeah yeah this looks a lot nicer in

00:24:21.480 | here that's because they're using the Roboto font now to implement that we

00:24:29.320 | need to remember where is on here and maybe we can search at the top okay yeah

00:24:40.640 | so we can we can just copy this so we need to npm install in our front-end

00:24:46.080 | directory this so this is going to install the Roboto font for us I'm going

00:24:52.200 | to open another terminal window

00:24:57.960 | okay navigate to the front-end directory

00:25:22.800 | and we need npm install okay once that has installed so switch back to here we

00:25:31.440 | just need to import it into our card component.tsx so we'll go to the top and

00:25:41.880 | it's in the right comment so import font paste that and save and now this should

00:25:53.040 | look a lot nicer okay so now it's definitely using the

00:25:57.920 | Roboto font, it looks cleaner so that's that's everything for the

00:26:06.920 | component I don't think there's anything else obviously in designing your own

00:26:12.960 | component you might want to make it more fancy and some other things in there but

00:26:18.520 | for this I think that's everything that I'd like to cover. In the next video

00:26:25.200 | what we're going to do is have a look at how to actually set this up for

00:26:29.400 | distribution so other people can pick and solve your component and actually

00:26:33.920 | use it in their own streamer apps so that's also pretty interesting and

00:26:40.040 | pretty straightforward, there's not too much to do there. The bulk of the work is what

00:26:47.880 | we've just done so thank you very much for watching I hope that is useful and

00:26:55.080 | I'll see you in the next video, bye!

Streamlit for ML #5.2 - MUI Card Component Build

Chapters