Streamlit for ML #5.3 - Publishing Components to Pip

00:00:00.000 | Today we're going to look at how we can actually publish the component that we've been building for a streamlet

00:00:06.520 | So what that means is we can actually pip install the component and then use it

00:00:13.840 | You know or any stream that app

00:00:15.840 | Just as we would a normal

00:00:19.480 | Python

00:00:22.320 | Framework so we pip install it and then we just

00:00:27.040 | Import and you should use it. So

00:00:30.000 | This is a article been putting together and that kind of covers this so we're basically just going to be going through

00:00:37.280 | this

00:00:39.000 | And what you're going to see at the end is we can actually do this. So you see here we have this

00:00:44.200 | From st card component import card component and then we just do card component titles the title body link

00:00:52.280 | And this and that will create our

00:00:56.040 | card

00:00:57.680 | Okay, so it's it's really

00:00:59.680 | There's not that much to go through. It's pretty straightforward. I think so

00:01:04.760 | Let's let's jump into it

00:01:07.440 | so a little bit of

00:01:11.020 | Background on how PIP is actually working here

00:01:15.320 | when you PIP install something you're actually installing it from this here the

00:01:21.680 | Python package index. Okay, so put all piping. Yeah, I think that's how you pronounce it and

00:01:28.120 | Like I can go in here and I can search for like pandas

00:01:33.700 | And it's gonna show us pandas or it's gonna show us a lot of different pandas, I think it's this one

00:01:40.660 | Okay. Yeah pip install pandas at the top there now

00:01:45.920 | we can also find the

00:01:49.480 | St. Card component. I've already built

00:01:52.280 | beforehand

00:01:54.760 | So if we open this

00:01:56.560 | So I think it's this one. Yeah, it's like version

00:01:59.900 | 0.10 at the moment

00:02:03.120 | So this is the current component look there's me

00:02:07.160 | and

00:02:09.080 | you can

00:02:10.560 | install that but that's it's slightly different to the component that we have been putting together and

00:02:17.600 | not as

00:02:19.360 | generic I

00:02:21.080 | Built it for a particular use case, which you'll probably see pretty soon

00:02:26.000 | So what we're going to do is create another

00:02:28.880 | St. Card component to or something. I don't know you have to give it a unique name. So we can't use the same name again

00:02:36.780 | So we'll go ahead and start with that

00:02:40.160 | So we'll go to our project

00:02:44.240 | Template st card component now

00:02:46.580 | There's a few things we need to do

00:02:49.640 | for this, so the first one is create a

00:02:54.520 | Build distribution for the react component or reacts part of our component

00:03:00.560 | so we'll

00:03:02.800 | Come into I think here and we'll do that at the moment. There's no build

00:03:06.760 | Directory, we're going to make one

00:03:09.840 | so

00:03:12.040 | We need to open a terminal window for that. So I'm just pulling one up now

00:03:16.920 | Okay, and I'll just navigate to this directory so documents

00:03:26.560 | Projects

00:03:31.640 | So component component template

00:03:37.640 | Template

00:03:42.360 | And then in there we want to go st card component

00:03:46.520 | We might need to we might need to change the name of this by the way, I'm not sure

00:03:51.680 | and front-end

00:03:54.920 | Okay, so from within here we need to use note package manager to create the build distribution

00:04:04.320 | So if we come to the article

00:04:09.920 | Oh

00:04:11.920 | That is something we also need to do so let's not forget that

00:04:16.040 | so

00:04:18.320 | Before we before we do that. We also need to

00:04:21.720 | Go to init.py and

00:04:25.640 | Up here. We need to make sure we set release to true

00:04:31.000 | now

00:04:33.000 | Release is false whilst we're putting everything together

00:04:35.640 | But as soon as we want to actually distribute it or publish it. We need to say it's true. So

00:04:41.880 | Beforehand this is this was being

00:04:45.200 | Run, okay, so it was saying you need to load st card component from localhost

00:04:53.560 | 3001 obviously when people using this component in the future, they're not going to be running the component on the localhost

00:05:02.800 | Instead what they are going to do is they're going to download our package

00:05:07.760 | which is going to contain this front-end build distribution the directory and

00:05:11.520 | From there, they'll they'll get the the component it will be built from there. Okay

00:05:20.980 | So, I think I don't know. Is there anything else? Oh and also this this will not be run anymore

00:05:28.360 | So this is like the demo app that we're putting together before that will no longer be run

00:05:33.600 | so

00:05:35.800 | Yeah, that's fine. We just need to change that nothing else needs to be changed

00:05:40.520 | Then we're now our front-end directory we just write this npm run build

00:05:49.400 | Let's do that

00:05:53.040 | Let me open this so we can see what's going on here

00:05:55.640 | Okay

00:05:57.640 | So hopefully this will go well and

00:06:03.820 | We'll see build directory up here in the front end on the left

00:06:10.520 | Might take a moment as well

00:06:14.520 | Okay, so the build folder is ready to be deployed and we can come over here and we see we have build and it has

00:06:22.520 | all of these so

00:06:24.960 | This is our this is our

00:06:26.960 | component in JavaScript, okay

00:06:29.920 | now

00:06:32.400 | with that we can

00:06:34.320 | We have the build distribution for the actual react component

00:06:38.520 | And now we need to create the distribution for the Python distribution. Okay, so

00:06:44.520 | Let's go ahead and do that

00:06:47.400 | Scroll down a little bit

00:06:50.800 | So this is one thing. I think we need might need to change so changing the name parameter and set up the pie

00:06:57.080 | Because at the moment it's see card component. I

00:07:00.960 | Don't think it needs to be that anymore

00:07:04.280 | Yeah, I think I'm going to need to change this

00:07:09.120 | To ST card component -

00:07:13.960 | So let's go ahead and do that

00:07:18.120 | Okay, so we have in it pie here we're going to go to set up the pie

00:07:22.160 | so here

00:07:25.640 | we have the name of

00:07:27.640 | Component and I think we'll also need to change this template name

00:07:32.920 | So this will be ST card component -

00:07:39.080 | Okay now

00:07:43.640 | Now we should be able to go ahead and create the component or create the

00:07:48.080 | Python component

00:07:51.160 | Okay, first we need to Python

00:07:53.760 | Set up pie we need to write s dist and be dist wheel like that

00:08:02.720 | Okay, we run now and we should find a so we need to go one more

00:08:13.440 | I'll fold it up

00:08:15.160 | And then run it again

00:08:16.960 | so from this we'll find that we get a

00:08:19.560 | this folder here so dist

00:08:22.160 | So in here, we should find we have this

00:08:25.680 | list tar file and this wheel file and

00:08:30.120 | It's those two that we're going to upload to the Python package index and

00:08:38.160 | To do that. We're going to need something called twines

00:08:42.080 | so

00:08:43.520 | We first install out pip install twine. I already have a download. So when I run it again and

00:08:49.940 | Then we run Python

00:08:52.880 | M twine

00:08:55.240 | upload and

00:08:57.120 | Then we need to specify that we're going to upload it to

00:08:59.760 | The Python package index and the only other I think option you have here is a test Python package index

00:09:08.160 | Which can be quite I would recommend you look into that and like if you're putting a package out there

00:09:13.880 | That's quite good to test that the package is going to work

00:09:17.720 | I

00:09:19.760 | Have a video and article I think on

00:09:22.400 | Python packages, so maybe

00:09:25.880 | I'll put a link to that in the description so you can take a look if you're interested in figuring this out a bit more

00:09:32.880 | so we're just going to go with the

00:09:36.480 | Python package index rather than the test Python package index and

00:09:40.400 | We want to specify that we're going to be pulling everything from the distribution

00:09:45.680 | Folder, okay, so

00:09:48.800 | Let's run that it will ask us to log in so my user name

00:09:56.720 | Well, this is another thing so you will need to sign up on the same website I mentioned before it's I think

00:10:05.360 | Pi PI dot org

00:10:07.360 | So you need to sign up, and then you can go ahead and do this

00:10:13.240 | File already is this okay, so this is because I already have

00:10:20.320 | You see here is using st. Card component, so I need to make this

00:10:26.080 | St. Card component - so we'll go through everything in here, so this actually I didn't need to

00:10:34.360 | Rename that all so we can ignore that so

00:10:36.960 | Let's rename all this to - it's also in in it PI

00:10:43.020 | This one don't really need to change, but we'll do anyway

00:10:47.920 | - anything else in there, I don't think so so delete this

00:11:00.760 | I'll delete the distribution folder and the build folder. I don't know okay delete that as well

00:11:07.200 | And then in here we need to change this because the directories change

00:11:14.400 | So the manifest and also in set of PI

00:11:17.880 | Changes to - as well

00:11:20.480 | Okay, now let's rerun this again

00:11:26.840 | So we come to this Python. Yeah run that credit distribution folder and

00:11:34.400 | Then we're going to use twine again, so hopefully this time it'll work

00:11:41.360 | Okay, so now we have st. Card component number two we can go ahead and actually

00:11:49.440 | Have a look at that website, so

00:11:52.720 | Come over here

00:11:56.040 | You

00:11:58.040 | Okay, so we can pip install, and this is a version number. We don't actually need that so let me

00:12:05.080 | Okay here, we just pip install st. Card component number two. Let's copy that across

00:12:13.000 | I'm going to do that in my stream lit environment

00:12:20.720 | Okay

00:12:22.720 | Now while that's downloading. I'm going to come over here. I'm going to open or create a new directory actually so

00:12:34.760 | Do from here, okay?

00:12:44.080 | So make directory

00:12:46.400 | We'll call it

00:12:49.480 | st. Demo

00:12:51.760 | I'll open that in vs. Code. Okay, and then in here. I'm just going to create a new file app pie

00:12:58.800 | in here

00:13:02.160 | Let let me copy it across from from the article

00:13:05.420 | Quicker

00:13:09.200 | So where are we here?

00:13:13.920 | It's actually just okay, so copy this

00:13:18.120 | Pull into here st. Card component number two

00:13:25.280 | Okay, save that and now let's run it from here

00:13:31.040 | So see the st. Demo and run stream lit

00:13:35.720 | run

00:13:39.400 | Up top pie okay localhost and here we go, so this is our

00:13:45.560 | Package or distributed

00:13:49.200 | St. Card component

00:13:52.640 | Click here make sure it's working. Oh, yeah perfect

00:13:56.920 | so

00:13:59.120 | Yeah, that's does everything for this kind of short series on

00:14:04.200 | custom components in stream lit I

00:14:09.080 | Hope it's been useful and

00:14:11.680 | Yeah, that's it. Thank you very much for watching now. See you in the next one

Streamlit for ML #5.3 - Publishing Components to Pip

Chapters