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.