Welcome back to the JupyterLab on Gradio day, so you'll remember where we left off.
We'd written two user interfaces, one of them for chatting with GPT four using the function uh, stream
GPT, and one of them with Claude, with stream Claude.
Uh, and so now I put it to you.
Supposing we wrote a function like this.
This function is like a composite function.
It's a function that calls others in that it's called stream model.
And it takes a prompt and it takes a model and it says if the model is GPT, then it calls stream GPT.
If the model is Claude, it calls stream.
Claude otherwise throws an error.
So it needs to be GPT or Claude.
And then it basically iterates through and yields each chunk in turn.
So this is in fact I called it a function, but it's not.
It's a generator.
Um, and it yields each chunk from one or the other models depending on which model is called.
Well, obviously that's going to work fine.
That's now a function which has a few more variables.
So as far as Gradio is concerned, that's just another function.
And that means that we can build a user interface very easily around that function.
Let's look at it.
Here it is.
Here's an interface.
The function it's taking is just this this sort of hybrid generator that we just written the inputs.
Of course we're now going to have two inputs.
One of them is going to be your message.
And the other of them I wish it were this easy.
Drop down with two values GPT or Claude label select model.
And then, you know, have that as the output.
Things are rarely that easy though.
Oh, but this is gradio, so things really are that easy.
Uh, sorry, I have to run this first.
There we go.
It's not that easy.
You still do have to execute all of your code.
Uh, so here we go.
We bring it up, we say something like, how do I get from times Square to Grand Central?
and we pick one of our models.
Let's pick GPT and we submit that and they're streaming back in markdown.
Is GPT response to that question of directions.
Enjoy your visit again at the end.
Very nice.
Uh, I feel like it's giving more options this time, but there we go.
Maybe not.
You'll probably remember.
Uh, I can then just flip to Claude and ask Claude the same question.
And here is Claude's answer to the same question.
Uh, using Claude haiku.
That might explain why we're getting slightly shorter, more terse answers.
But, uh, isn't that amazing?
Isn't that cool?
We just built this functionality.
We can flip between two different models, ask the same question, get the responses.
Uh, you could just have this running sometime if you wanted a nice chat UI of your own and be able
to bounce it around different models.
Uh, it's a useful little tool.
Um, and, uh, yeah, you can imagine an obvious exercise that I'll leave for you is to simply add
Gemini to the mix.
Why not?
You can imagine.
It's super easy.
You just add in.
Gemini is another option.
I haven't shown you how to stream back from Gemini, but it's very similar and you can quickly google
it to see the documentation is very clear and then add it into the mix, and then push that code so
I can have it and share it with other students.
That would be good.
All right.
So the next last for this lab is going to be okay.
Let's take the company brochure generator we made last time and put a user interface around that.
Wouldn't that be awesome.
Uh, so now that you know, as I say, it's going to be really, really simple.
So I've decided I'm going with the earlier version of the brochure.
We're just going to use a, we're going to use just the landing page only.
We're not going to do the, the two step process where we collect all the links, because that's maybe
more involved than we need right now.
Um, we're just going to have a simpler version of the website class that has URL, title and text,
and you'll remember how it works.
We use the requests package, and we use the wonderful Beautifulsoup to parse to strip out things we
don't care about and to get the text.
And there is a little getcontext helper to give us sort of getcontents helper to give us the page title
and body of the page.
So that's our helper class.
Remember to run it.
System prompt.
You're in a system that analyzes the contents of a company website landing page and creates a short
brochure respond.
In markdown there is a system prompt.
So here is a stream brochure function that takes a company name, a URL and a model.
Uh, and it's going to say please generate a company brochure for company name.
Here is their landing page.
And then we'll use our website helper class here to read in that URL and get the contents.
So this is all making sense.
We're just going to to get the contents of the website.
We're going to turn that into a prompt.
And then if it's GPT we're going to stream from GPT.
If it's Claude, we're going to stream from Claude.
Um, otherwise we'll raise an error and we will then make this a generator and yield the results chunk
by chunk.
Uh, I realize it's a bit bit misleading to call this chunk because it's in fact not actually chunk
by chunk.
It's it's the full amount.
So you might want to rename that something that's, uh, a better reflection of what this this is.
But you get the idea.
It should do the trick.
Uh, so wouldn't it be nice?
I'm going to stop saying that because it's going to get old.
But it is nice.
It is as simple as now just replacing the function with stream brochure.
And you can see here the inputs.
We of course have these three inputs.
Now we have a company name.
We have a landing page URL.
And then we can pick the model.
And let's give that a whirl.
Uh here we go.
Running locally.
Bring it up so we can say company name hugging face.
Landing page URL we can say.
And we'll just do a.
Hugging s.co and select model.
We will ask GPT to be first add it and then just press submit.
And here it goes.
Here is our company brochure for Huggingface streaming back in markdown based on our web scrape.
It's all there.
It's even got links down at the bottom for different things.
Uh, and yeah, that link looks like that is correct.
That's going to work.
Some of these links look like they're not going to work because of, uh, how it's been generated.
But still, that's a pretty impressive web page, I've got to say, an impressive brochure.
I mean, I love it.
Let's see what Claude does with this Claude haiku.
Of course.
So it's, uh, a slimmer model, but it's perfectly acceptable.
Let's build the future of AI together.
Uh, very nice brochure there from haiku.
Uh, and there we go.
I'm.
I'm blown away every time I use gradio by how simple it is, how effective it is.
We've just built a user interface around our brochure where you can pick between different models and
let's face it, it was easy.
So the to dos for you, the ways you can make this better are there are so many.
You could, as I say, add Gemini not only to the earlier example, but to this one as well.
Another idea is you could add in another selection, another drop down where you can pick the the style,
the tone you remember last time, how we could easily change the system prompt so that the brochure
was in a humorous, jokey, jovial tone.
Well, why don't you set it so you can pick from that drop down, choose a different tone, and then
it will generate a company brochure using that tone.
Uh, it's actually super easy to do that.
So give it a try.
Do that.
And you'll have really beefed up this application to be something that that is increasingly high in
functionality.
So I hope you have fun doing that.
Check in the code afterwards.
So I get to see it.
And I will see you in the next lecture for the wrap up.