And here we are in JupyterLab for the last time, and we are looking here at day five, the last day
of the last week, week eight of the program.
And we start with the beautiful beginning line import Gradio as GR, which you know what a great fan
I am of Gradio, so I was considering using Streamlit instead.
This time you'll see in my repo I have some other example projects in Streamlit.
Um, but I figured there's, there's uh, so much, there's great things about Gradio and Streamlit
and all in all, I think I would double down on Gradio.
And so there's no point in, in confusing you with showing you different things that you don't need
because it's all in gradio.
So there we go.
Uh, with that, we, uh, um, import the deal agent framework and that.
So we basically import in here the whole of the thing we were looking at before.
And you remember, you can just instantiate this and and call run to set the thing off and we'll import
opportunity and deal.
So now as we have talked about I think briefly we covered this, but somewhat in passing in the past
that Gradio has these two different levels of detail, a high level API and a low level, a bit like
Huggingface has the pipelines and then the Tokenizers and models.
Gradio has great interface, which is its high level API for quickly building an interface, and it's
really simple to get up and running if you've got like a single function, some inputs and outputs,
and you want it to pop up, you can just use great interface and its cousin, great chat interface that
of course we've used to great success.
Um, but the interface is a wonderful way to get up and running.
The lower level API is called GR dot blocks, and GR blocks gives you an ability to construct your user
interface with with some more finesse.
Um, and you say with roadblocks as and then you can call it anything you want.
I say as you are right here, and then you say UI dot launch instead of interface dot launch in-browser
dot equals true.
Just means it's going to, uh, throw up a new screen as soon as we run this, rather than it being
just a link.
Um, so that's convenient to know.
Um, and you can, you can give it a title of the window that's going to come up.
Fill width is true is worth knowing.
If you don't set that, then gradient puts big margins on either side of the window, which sometimes
is what you want.
But but often, particularly with the kinds of UIs we're going to be building, we want to use every
possible pixel.
So fill width is true means that it fills the whole width.
So then there's this construct that you get used to, which uh, um, again, we have come across this
now a couple of times.
But you say with grow and then you put each row of your user interface and you break your user interface
into rows like this.
And in each of these context manager, each of these pieces, you can put a bunch of different UI widgets.
Um, and then somewhat confusingly, you can also have with column, which is saying within a row.
I would then like to break things into columns.
And we'll see that in a moment.
Another it is worth knowing a pro tip is that you can't have with geo column at the top level.
You have to start with zero and then you can have columns and rows, uh, nested I think as deep as
you want within that.
But the top level one has to be rows because Gradio is built to imagine a typical scrollable window.
Okay, so I am beginning with Geo Row, and I'm just going to put a markdown a heading here.
And when you use GR dot markdown which gives you a markdown field which I know we've used a bunch of
times now, you can also put in straight up HTML in there, which is what I do to have some centered
big text.
The price is right.
And then I put like something below that as well.
And let's see that running.
I just execute this cell and up comes the window.
And it's pretty vanilla at the moment.
The price is right.
It's got a heading.
You can see that this is a row and that's another row.
And there we have it.
That is simple enough.
We'll close that.
Come back here.
And uh, now we can we can do a little bit more.
So what we're going to do now is add another row.
And this row is going to contain a data frame, a GR data frame, which is basically a table.
It's like a think of it like a spreadsheet a little embedded spreadsheet on our screen.
And you tell it what headers you want description, price estimate, discount URL, uh, and uh, wrap
is a bit like in Excel or in Google Sheets.
It's saying that I want to wrap within any cell the column widths which are relative.
So you can say that I want the first one to be four times as large as the others.
How many rows, how many columns, and the height if you want it to have a fixed height.
And some of these are optional.
Um, and then, uh, what I'm doing is I'm calling something called UI dot load, which looks like many
of the gradio functions.
You'll see a very consistent pattern across Gradio, where you say the function takes the name of a
function.
In our case, get table inputs and outputs.
And that's how you hook up a function you're providing to this particular user interface.
And what we're saying is that, um, I have something called opportunities that I'll mention in just
a moment.
I want that to be the input of this thing, this table.
And I want the output.
Whatever this returns, I want to hook that up to my data frame that I just defined right here.
Did you follow that the inputs are going to be this thing called opportunities that I'll speak about
in a minute.
And the whatever this get table returns, I want that to be hooked up to this table, this data frame
that we've constructed.
Hopefully that makes sense.
So what is this opportunities thing.
So this opportunities thing is a great state, which means it's a bit of information that I want the
user interface to remember.
And this great state is going to have in it something called initial opportunity, which is just going
to be something I'm hard coding in here, which is going to be an opportunity for a deal called example
description price $100.
There's going to be a URL cnn.com.
And that's going to be it.
So let's run this and see what happens.
We get a user interface.
We get this nice looking data frame which is like a table.
And it has in it one row which has the thing that I just created with an example description, a price,
an estimate, a discount and a URL.
And that's, that's really the extent of it.
Okay, so far, so good.
So let's keep going.
All right.
Now the plot thickens.
In this next cell, you can see I'm building on the user interface in each time.
And I love doing that.
That's one of the great things about it's a combination of the great thing about Jupyter Labs and also
about Gradio is you can build in this way incrementally.
So I'm now going to create a new instance of an agent framework, a deal agent framework.
Uh, and uh, otherwise I'm going to, um, I guess we're going to hook up to this, I think, in a,
in a, in a later one.
For now, uh, all I wanted to do was make it so that, uh, this would be hooked up.
We'd see it creating itself, we'd see some of the information, and I'd have it so that you can select
an opportunity, and it would call the messenger to alert about that opportunity.
Um, so what you can see down here is I've now got two different things hooked up using radios, standard
pattern.
This is the same as before.
If you load it calls gettable, it passes in the opportunities and the outputs go in the frame.
If you select if you, if I'm um, I'm calling the select uh function on the data frame itself so that
if a selection is made it should call the function do select the inputs should again be the opportunity.
There aren't any outputs.
What does do select do.
It finds the index of what you've selected.
And you specify that by having that as an argument right here, it looks up that opportunity from the
list of opportunities.
And it will then call the agent framework the planner the messenger and send an alert about that opportunity.
All right.
Seems reasonable.
Let's run this.
When we run it, the first thing you'll see is that there's a lot of, um.
It was too fast.
If I go back, you'll see that it was printing.
Of course, our log output to the the command line here to to the output of the Jupyter lab.
So we could see standard out.
That's what I was grasping for.
Then standard out is showing the log messages with the color system.
So we know what is doing what.
Just as we wanted.
And if we come over here it's showing our table with CNN.
And if I click on this I did just get a notification to show you believe it.
Hang on, I will press it again.
Press and bang, I get a notification.
Um, and so there you have it.
We have now hooked up gradio to our agent framework at least so that it can notify us.
So it's the beginnings of a user interface.
It's the beginnings of something with the agent framework running behind the scenes.
In the next video, we will move off the Jupyter Lab environment into the real code for the user interface.
I'll see you then.