And welcome back to the lab.
Here we are in Jupyter Lab and we are going to go into week two.
And we're going to go now to day two.
Here we are radio day.
Today we will build user interfaces using the outrageously simple Gradio framework.
Prepare for joy.
There you go.
We will do some imports.
And then this magical line import Gradio as GR.
And I said oh yeah.
So there we go.
And we load our environment variables in using the usual approach.
Um, and you'll recognize the next familiar cell, which is the three somewhat analogous commands to
get our APIs up and ready.
Okay.
So, uh, start by setting a system message in a variable, which is going to be the very generic UI,
a helpful assistant that is often the kind of standard starting point for a system message.
So that's what we will take.
Um, and now we're going to wrap a call to GPT four mini.
Uh, in a simple function like this, a message GPT takes a prompt messages equals.
Now, by this point, uh, hopefully you were bored of this structure.
You know it so well, uh, a simple conversation structure, a list of dictionaries system, a system
message user, a user prompt, and then we call completion OpenAI chat, dot completions, dot create.
We pass in a model and we pass in the messages.
And what we return is the completion dot choices.
We take the first choice dot message content.
That is a function which we are wrapping to message GPT and return a response.
Let's run that.
Let's just quickly try that out.
What should we say?
Message GPT we've tried a few things that we know spell that right GPT we know what GPT is good at and
what it's bad at.
Let's just try one more thing.
We know that it's not great at current events.
Let's just go with something very simple.
What is today's date and let's see what GPT believes is today's date.
Today's date is October the 3rd, 2023.
So a few things to note.
One is that, as expected, it does not have a good sense of current events.
And the second is that it does appear that its training data took it up until October 2023, just the
beginning of October, uh, which is something that I alluded to before when it had said September.
I thought it was October, but I suppose if it's October the 3rd, then, then maybe it's a moot point.
It's a it's an end of September.
Early October would be the answer anyways.
That is a very simple function that we've got there.
Put that to the back of your mind because we're going to come back to it later.
It's time to create user interfaces.
First of all, nothing to do with data science.
Let's just see how to create a simple user interface.
So here then is a very simple function called shout.
And shout is going to take some text.
And it's going to reply with that text in uppercase.
That's a pretty simple one.
So let's shout hello.
And it says back hello and uppercase a shouty way.
Um, okay.
So I put it to you that building a sophisticated user interface with inputs and outputs that can convert
a little hello to a big hello, is as simple as this.
It's a two lines view is great interface.
That means I want a new interface.
You tell it the function that you want.
The function that is this user interface is built around, which in this case is shout.
This function describes right here I'm passing in the function name and what you pass in.
You then have to pass in inputs and outputs.
And Gradio is very flexible about what you can pass in here.
You can pass in lists of things if you've got multiple inputs and outputs.
If you've only got one input and one output, you can just say what kind of thing it is as a string.
That's all it needs.
It will figure it all out.
Um, and just because this is two lines of code, but just to show you, we could just do it as one
line of code because I'm really showing off here like that.
We can just put it all in one line, uh, and just run that and let's see what happens.
We have ourselves here a little user interface.
I'm going to type hello.
And I'm going to press submit.
And there is a shouty hello right back at me.
It's a user interface with great controls around it.
And it's all been built running within this uh, this this this, uh, browser, just like that.
Now, one thing you might notice is that there's a flag button here, and a folder has been created
over here called flagged.
And this is a feature that comes out of the box with Gradio to allow functionality for users to flag
your results, which is a kind of common use case with machine learning, where you want users to be
able to to see what's going on and make note if there's a problem with the results.
But that out of the box functionality is not something we particularly want, and the way we can remove
that is by passing in allow flagging equals never instead.
So if I now run that instead, uh, again, I sort of resent the fact that I put that as two lines when
I could equally well have done it as one line like that, just to really show you how simple it is.
A single line.
Uh, and here we get, um, our user interface.
Uh, so there's a couple of things I've done about this that I want to mention.
The first of them is with either of these cases, there's also a link that it gives you at the top here.
And if you click on this link, uh, it actually brings up your interface in an entirely separate window
like this, which seems almost magical.
Let's go.
Hello.
And it just works.
And that's because when you run Gradio, it actually runs a little web server running in the background.
Uh, running locally at a at whatever the first port it finds that's free.
After after some, some number, uh, after, I think 760 is where it begins and it starts going on
from there.
So I suspect the last one was it.
Yeah.
Was it 760?
Uh, so, um, it will run that little web server.
And so you can either show that in the same Jupyter notebook in the output, or you can just bring it
up in a separate screen in its own right, which is amazing.
But even more than that, the other thing I've shown here is that you can pass share equals true into
your call.
And if you do that, then Gradio also serves the same interface on a public URL that you can share with
other people so that other people, colleagues that you're working with can use your same model and
be able to come in and work on your prototype.
And this part is a little bit of the mind bending part of it.
When someone brings up this user interface, which we'll do right now, it'll take just a second.
There's a bit more going on behind the scenes.
Here it comes.
Here's the user interface.
It looks it's of course the same as this.
I'll run hello.
And we'll see it working.
What's happening here.
This is of course being served by Gradio.
But when you call submit, when you press submit and call the function, that function hello is running
on, on my local box in this Jupyter environment right here.
Uh, it's uh, it's a bit crazy.
It's still running the code as it's running on my box.
It's just there's a publicly available URL for it.
It's kind of magic.
Uh, let me explain what I mean by that.
By going back here and printing here.
Shout has been called with input.
So now we are making very clear what's going on.
So when I run that it says shout has been called with input.
Hello.
So now let's come back here and run this again.
So now it's running with this again a public URL.
Here it comes.
I'm going to type.
This is very cool.
And press submit.
And obviously this is very cool as what comes back.
This is this is being hosted by Gradio.
But again the somewhat remarkable thing is if I come back here and look in my output, you'll see that
shout has been called with input.
This is very cool.
So the function that's running is running on my box.
The user interface is being served up through a public radio Gradio website, but the code is running
on my local box, which is really amazing.
And what that means basically is that you can write models running on your local box, and you can build
interfaces, and you can either bring them up locally for yourself, or you can share them with others.
And as people work with those shared user interfaces, it's still calling the code that is running on
your box incredibly useful.
And as you can imagine, for collaborating with people and sharing your models and getting your co-workers
to to work with you, uh, it couldn't be easier.
All right, so let's keep going and show a couple more things.
I'm now going to bring up an interface which is going to specify inputs and outputs.
And you can see here what I'm doing is I'm saying that the the inputs it's a list.
It's just got one thing in there.
It's a text box.
It's got a label your message and it's got six lines.
The outputs is response and it's got eight lines.
Um, and it's calling the function shout.
let's have a look at that and let's bring that up here.
And it comes up just as you'd expect and make it a bit bigger for you.
There we go.
There is a message.
There's a response.
I can say hello yet again and I can press submit.
And over here comes the capitalized version.
Very easy, nice and configurable.
Looks like a good UI.
Well, you can probably imagine what I'm going to suggest next.
Wouldn't it be great?
Wouldn't it be great if you could just replace that word shout with another function?
Any function?
Why not a message GPT function that we wrote earlier?
You could just simply replace that word shout with that function, and you'd be able to have a user
interface built on top of an LLM.
Wouldn't that just be great?
Wouldn't it be great?
Ha ha.
Well, let's have a look.
Let's have a look.
Here we go.
Same.
Same code.
We've replaced the function.
It's no longer shout.
It's now message GPT.
Let's see what happens.
Let's bring that up in a separate window.
Here it is.
Please tell me a joke and we will submit that.
And we'll see what comes back.
Why did the Scarecrow win an award?
Because he was outstanding in his field.
That's a great joke.
Uh, okay.
A great joke from GPT four mini.
And a great example of how easy it is to make that bigger for you to build a user interface that is
running using an LLM behind the scenes.
I hope that you are as overjoyed by this experience as I am.
I think Gradio is awesome.
All right, I will see you next time when we're going to put Gradio to even more good use.