From the uDemy course on LLM engineering.
https://www.udemy.com/course/llm-engineering-master-ai-and-large-language-models
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
460 lines
13 KiB
460 lines
13 KiB
WEBVTT |
|
|
|
00:00.770 --> 00:09.020 |
|
And here we are in JupyterLab for the last time, and we are looking here at day five, the last day |
|
|
|
00:09.020 --> 00:13.130 |
|
of the last week, week eight of the program. |
|
|
|
00:13.130 --> 00:21.140 |
|
And we start with the beautiful beginning line import Gradio as GR, which you know what a great fan |
|
|
|
00:21.140 --> 00:25.880 |
|
I am of Gradio, so I was considering using Streamlit instead. |
|
|
|
00:25.880 --> 00:30.440 |
|
This time you'll see in my repo I have some other example projects in Streamlit. |
|
|
|
00:30.620 --> 00:36.920 |
|
Um, but I figured there's, there's uh, so much, there's great things about Gradio and Streamlit |
|
|
|
00:36.920 --> 00:39.650 |
|
and all in all, I think I would double down on Gradio. |
|
|
|
00:39.650 --> 00:43.880 |
|
And so there's no point in, in confusing you with showing you different things that you don't need |
|
|
|
00:43.910 --> 00:45.350 |
|
because it's all in gradio. |
|
|
|
00:45.380 --> 00:46.640 |
|
So there we go. |
|
|
|
00:46.850 --> 00:53.720 |
|
Uh, with that, we, uh, um, import the deal agent framework and that. |
|
|
|
00:53.720 --> 00:58.010 |
|
So we basically import in here the whole of the thing we were looking at before. |
|
|
|
00:58.010 --> 01:04.820 |
|
And you remember, you can just instantiate this and and call run to set the thing off and we'll import |
|
|
|
01:04.820 --> 01:06.200 |
|
opportunity and deal. |
|
|
|
01:06.200 --> 01:14.510 |
|
So now as we have talked about I think briefly we covered this, but somewhat in passing in the past |
|
|
|
01:14.510 --> 01:20.930 |
|
that Gradio has these two different levels of detail, a high level API and a low level, a bit like |
|
|
|
01:20.960 --> 01:24.710 |
|
Huggingface has the pipelines and then the Tokenizers and models. |
|
|
|
01:24.740 --> 01:32.900 |
|
Gradio has great interface, which is its high level API for quickly building an interface, and it's |
|
|
|
01:32.900 --> 01:36.470 |
|
really simple to get up and running if you've got like a single function, some inputs and outputs, |
|
|
|
01:36.470 --> 01:42.050 |
|
and you want it to pop up, you can just use great interface and its cousin, great chat interface that |
|
|
|
01:42.050 --> 01:44.360 |
|
of course we've used to great success. |
|
|
|
01:44.570 --> 01:48.560 |
|
Um, but the interface is a wonderful way to get up and running. |
|
|
|
01:48.560 --> 01:56.120 |
|
The lower level API is called GR dot blocks, and GR blocks gives you an ability to construct your user |
|
|
|
01:56.120 --> 01:58.640 |
|
interface with with some more finesse. |
|
|
|
01:58.910 --> 02:04.880 |
|
Um, and you say with roadblocks as and then you can call it anything you want. |
|
|
|
02:04.970 --> 02:11.600 |
|
I say as you are right here, and then you say UI dot launch instead of interface dot launch in-browser |
|
|
|
02:11.600 --> 02:12.650 |
|
dot equals true. |
|
|
|
02:12.650 --> 02:17.480 |
|
Just means it's going to, uh, throw up a new screen as soon as we run this, rather than it being |
|
|
|
02:17.480 --> 02:18.380 |
|
just a link. |
|
|
|
02:18.680 --> 02:20.570 |
|
Um, so that's convenient to know. |
|
|
|
02:20.780 --> 02:25.370 |
|
Um, and you can, you can give it a title of the window that's going to come up. |
|
|
|
02:25.370 --> 02:27.470 |
|
Fill width is true is worth knowing. |
|
|
|
02:27.500 --> 02:33.020 |
|
If you don't set that, then gradient puts big margins on either side of the window, which sometimes |
|
|
|
02:33.050 --> 02:33.620 |
|
is what you want. |
|
|
|
02:33.620 --> 02:38.630 |
|
But but often, particularly with the kinds of UIs we're going to be building, we want to use every |
|
|
|
02:38.630 --> 02:40.100 |
|
possible pixel. |
|
|
|
02:40.370 --> 02:43.970 |
|
So fill width is true means that it fills the whole width. |
|
|
|
02:44.000 --> 02:50.240 |
|
So then there's this construct that you get used to, which uh, um, again, we have come across this |
|
|
|
02:50.240 --> 02:51.380 |
|
now a couple of times. |
|
|
|
02:51.380 --> 02:58.670 |
|
But you say with grow and then you put each row of your user interface and you break your user interface |
|
|
|
02:58.670 --> 03:00.470 |
|
into rows like this. |
|
|
|
03:00.470 --> 03:08.150 |
|
And in each of these context manager, each of these pieces, you can put a bunch of different UI widgets. |
|
|
|
03:08.300 --> 03:15.590 |
|
Um, and then somewhat confusingly, you can also have with column, which is saying within a row. |
|
|
|
03:15.620 --> 03:18.020 |
|
I would then like to break things into columns. |
|
|
|
03:18.050 --> 03:19.640 |
|
And we'll see that in a moment. |
|
|
|
03:19.670 --> 03:25.250 |
|
Another it is worth knowing a pro tip is that you can't have with geo column at the top level. |
|
|
|
03:25.250 --> 03:30.230 |
|
You have to start with zero and then you can have columns and rows, uh, nested I think as deep as |
|
|
|
03:30.230 --> 03:31.370 |
|
you want within that. |
|
|
|
03:31.370 --> 03:37.280 |
|
But the top level one has to be rows because Gradio is built to imagine a typical scrollable window. |
|
|
|
03:37.820 --> 03:44.000 |
|
Okay, so I am beginning with Geo Row, and I'm just going to put a markdown a heading here. |
|
|
|
03:44.000 --> 03:48.680 |
|
And when you use GR dot markdown which gives you a markdown field which I know we've used a bunch of |
|
|
|
03:48.680 --> 03:54.500 |
|
times now, you can also put in straight up HTML in there, which is what I do to have some centered |
|
|
|
03:54.500 --> 03:55.310 |
|
big text. |
|
|
|
03:55.310 --> 03:56.480 |
|
The price is right. |
|
|
|
03:56.480 --> 03:59.960 |
|
And then I put like something below that as well. |
|
|
|
03:59.990 --> 04:01.370 |
|
And let's see that running. |
|
|
|
04:01.370 --> 04:04.910 |
|
I just execute this cell and up comes the window. |
|
|
|
04:04.910 --> 04:07.250 |
|
And it's pretty vanilla at the moment. |
|
|
|
04:07.250 --> 04:08.420 |
|
The price is right. |
|
|
|
04:08.420 --> 04:09.140 |
|
It's got a heading. |
|
|
|
04:09.140 --> 04:12.050 |
|
You can see that this is a row and that's another row. |
|
|
|
04:12.050 --> 04:13.430 |
|
And there we have it. |
|
|
|
04:13.430 --> 04:14.870 |
|
That is simple enough. |
|
|
|
04:14.900 --> 04:15.590 |
|
We'll close that. |
|
|
|
04:15.590 --> 04:16.760 |
|
Come back here. |
|
|
|
04:17.570 --> 04:21.500 |
|
And uh, now we can we can do a little bit more. |
|
|
|
04:21.500 --> 04:27.230 |
|
So what we're going to do now is add another row. |
|
|
|
04:27.770 --> 04:34.160 |
|
And this row is going to contain a data frame, a GR data frame, which is basically a table. |
|
|
|
04:34.160 --> 04:38.630 |
|
It's like a think of it like a spreadsheet a little embedded spreadsheet on our screen. |
|
|
|
04:38.630 --> 04:46.460 |
|
And you tell it what headers you want description, price estimate, discount URL, uh, and uh, wrap |
|
|
|
04:46.460 --> 04:50.600 |
|
is a bit like in Excel or in Google Sheets. |
|
|
|
04:50.630 --> 04:55.910 |
|
It's saying that I want to wrap within any cell the column widths which are relative. |
|
|
|
04:55.910 --> 04:59.930 |
|
So you can say that I want the first one to be four times as large as the others. |
|
|
|
04:59.930 --> 05:05.650 |
|
How many rows, how many columns, and the height if you want it to have a fixed height. |
|
|
|
05:05.650 --> 05:07.090 |
|
And some of these are optional. |
|
|
|
05:07.660 --> 05:15.520 |
|
Um, and then, uh, what I'm doing is I'm calling something called UI dot load, which looks like many |
|
|
|
05:15.520 --> 05:16.780 |
|
of the gradio functions. |
|
|
|
05:16.780 --> 05:24.640 |
|
You'll see a very consistent pattern across Gradio, where you say the function takes the name of a |
|
|
|
05:24.640 --> 05:25.240 |
|
function. |
|
|
|
05:25.240 --> 05:29.110 |
|
In our case, get table inputs and outputs. |
|
|
|
05:29.110 --> 05:34.660 |
|
And that's how you hook up a function you're providing to this particular user interface. |
|
|
|
05:34.690 --> 05:40.900 |
|
And what we're saying is that, um, I have something called opportunities that I'll mention in just |
|
|
|
05:40.900 --> 05:41.410 |
|
a moment. |
|
|
|
05:41.410 --> 05:45.580 |
|
I want that to be the input of this thing, this table. |
|
|
|
05:45.580 --> 05:47.380 |
|
And I want the output. |
|
|
|
05:47.380 --> 05:53.770 |
|
Whatever this returns, I want to hook that up to my data frame that I just defined right here. |
|
|
|
05:54.220 --> 05:58.210 |
|
Did you follow that the inputs are going to be this thing called opportunities that I'll speak about |
|
|
|
05:58.210 --> 05:58.900 |
|
in a minute. |
|
|
|
05:58.900 --> 06:06.640 |
|
And the whatever this get table returns, I want that to be hooked up to this table, this data frame |
|
|
|
06:06.640 --> 06:07.990 |
|
that we've constructed. |
|
|
|
06:08.860 --> 06:10.090 |
|
Hopefully that makes sense. |
|
|
|
06:10.090 --> 06:12.790 |
|
So what is this opportunities thing. |
|
|
|
06:12.790 --> 06:18.340 |
|
So this opportunities thing is a great state, which means it's a bit of information that I want the |
|
|
|
06:18.340 --> 06:19.810 |
|
user interface to remember. |
|
|
|
06:19.960 --> 06:26.080 |
|
And this great state is going to have in it something called initial opportunity, which is just going |
|
|
|
06:26.080 --> 06:32.620 |
|
to be something I'm hard coding in here, which is going to be an opportunity for a deal called example |
|
|
|
06:32.650 --> 06:34.630 |
|
description price $100. |
|
|
|
06:34.630 --> 06:36.970 |
|
There's going to be a URL cnn.com. |
|
|
|
06:36.970 --> 06:38.530 |
|
And that's going to be it. |
|
|
|
06:38.530 --> 06:41.440 |
|
So let's run this and see what happens. |
|
|
|
06:41.440 --> 06:43.300 |
|
We get a user interface. |
|
|
|
06:43.300 --> 06:48.010 |
|
We get this nice looking data frame which is like a table. |
|
|
|
06:48.010 --> 06:54.460 |
|
And it has in it one row which has the thing that I just created with an example description, a price, |
|
|
|
06:54.460 --> 06:57.490 |
|
an estimate, a discount and a URL. |
|
|
|
06:57.520 --> 07:00.670 |
|
And that's, that's really the extent of it. |
|
|
|
07:01.360 --> 07:03.430 |
|
Okay, so far, so good. |
|
|
|
07:03.460 --> 07:05.260 |
|
So let's keep going. |
|
|
|
07:05.500 --> 07:06.250 |
|
All right. |
|
|
|
07:06.280 --> 07:08.260 |
|
Now the plot thickens. |
|
|
|
07:08.260 --> 07:11.890 |
|
In this next cell, you can see I'm building on the user interface in each time. |
|
|
|
07:11.890 --> 07:12.550 |
|
And I love doing that. |
|
|
|
07:12.550 --> 07:17.680 |
|
That's one of the great things about it's a combination of the great thing about Jupyter Labs and also |
|
|
|
07:17.680 --> 07:21.070 |
|
about Gradio is you can build in this way incrementally. |
|
|
|
07:21.070 --> 07:27.310 |
|
So I'm now going to create a new instance of an agent framework, a deal agent framework. |
|
|
|
07:27.670 --> 07:34.930 |
|
Uh, and uh, otherwise I'm going to, um, I guess we're going to hook up to this, I think, in a, |
|
|
|
07:34.930 --> 07:36.310 |
|
in a, in a later one. |
|
|
|
07:36.310 --> 07:41.890 |
|
For now, uh, all I wanted to do was make it so that, uh, this would be hooked up. |
|
|
|
07:41.890 --> 07:47.260 |
|
We'd see it creating itself, we'd see some of the information, and I'd have it so that you can select |
|
|
|
07:47.260 --> 07:51.910 |
|
an opportunity, and it would call the messenger to alert about that opportunity. |
|
|
|
07:52.120 --> 07:58.600 |
|
Um, so what you can see down here is I've now got two different things hooked up using radios, standard |
|
|
|
07:58.600 --> 07:59.320 |
|
pattern. |
|
|
|
07:59.350 --> 08:01.120 |
|
This is the same as before. |
|
|
|
08:01.120 --> 08:08.200 |
|
If you load it calls gettable, it passes in the opportunities and the outputs go in the frame. |
|
|
|
08:08.410 --> 08:16.510 |
|
If you select if you, if I'm um, I'm calling the select uh function on the data frame itself so that |
|
|
|
08:16.510 --> 08:24.130 |
|
if a selection is made it should call the function do select the inputs should again be the opportunity. |
|
|
|
08:24.130 --> 08:25.840 |
|
There aren't any outputs. |
|
|
|
08:25.840 --> 08:27.880 |
|
What does do select do. |
|
|
|
08:27.910 --> 08:30.910 |
|
It finds the index of what you've selected. |
|
|
|
08:30.910 --> 08:37.840 |
|
And you specify that by having that as an argument right here, it looks up that opportunity from the |
|
|
|
08:37.840 --> 08:38.950 |
|
list of opportunities. |
|
|
|
08:38.950 --> 08:45.880 |
|
And it will then call the agent framework the planner the messenger and send an alert about that opportunity. |
|
|
|
08:46.330 --> 08:47.200 |
|
All right. |
|
|
|
08:47.350 --> 08:48.700 |
|
Seems reasonable. |
|
|
|
08:48.730 --> 08:49.990 |
|
Let's run this. |
|
|
|
08:50.020 --> 08:55.300 |
|
When we run it, the first thing you'll see is that there's a lot of, um. |
|
|
|
08:55.960 --> 08:57.640 |
|
It was too fast. |
|
|
|
08:57.670 --> 09:00.100 |
|
If I go back, you'll see that it was printing. |
|
|
|
09:00.130 --> 09:08.290 |
|
Of course, our log output to the the command line here to to the output of the Jupyter lab. |
|
|
|
09:08.290 --> 09:09.580 |
|
So we could see standard out. |
|
|
|
09:09.580 --> 09:10.780 |
|
That's what I was grasping for. |
|
|
|
09:10.810 --> 09:15.580 |
|
Then standard out is showing the log messages with the color system. |
|
|
|
09:15.580 --> 09:17.020 |
|
So we know what is doing what. |
|
|
|
09:17.050 --> 09:18.280 |
|
Just as we wanted. |
|
|
|
09:18.880 --> 09:22.270 |
|
And if we come over here it's showing our table with CNN. |
|
|
|
09:22.270 --> 09:27.700 |
|
And if I click on this I did just get a notification to show you believe it. |
|
|
|
09:27.730 --> 09:30.220 |
|
Hang on, I will press it again. |
|
|
|
09:30.220 --> 09:33.190 |
|
Press and bang, I get a notification. |
|
|
|
09:33.610 --> 09:37.210 |
|
Um, and so there you have it. |
|
|
|
09:37.240 --> 09:44.140 |
|
We have now hooked up gradio to our agent framework at least so that it can notify us. |
|
|
|
09:44.140 --> 09:47.020 |
|
So it's the beginnings of a user interface. |
|
|
|
09:47.020 --> 09:51.100 |
|
It's the beginnings of something with the agent framework running behind the scenes. |
|
|
|
09:51.130 --> 09:59.530 |
|
In the next video, we will move off the Jupyter Lab environment into the real code for the user interface. |
|
|
|
09:59.560 --> 10:00.640 |
|
I'll see you then.
|
|
|