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

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.