So just before we go on, I want to take a minute to explain something that might have been mystifying
you.
And if it hasn't been mystifying you, and if you don't really care about this, then you can just speed
me up and wait until we continue with this.
But I want to explain how Gradio actually works.
Like, what is it doing?
And like, what is this user interface that you see here?
And why is what is this URL.
And, and like what's actually going on behind the scenes.
That means you can write some Python code and suddenly have a UI.
And it turns out it's actually it's really very simple.
There's nothing particularly complicated about it, but it's a series of really good ideas that results
in this almost magical effect of being able to quickly mock up a UI and have an MVP really fast.
And it's easy to explain because Gradio basically does three things.
It does three things that I will tell you about one after another.
And when you see that, when it does those three things, the net result is this kind of magical effect
of an easy MVP.
So three things.
Number one, the first thing radio does.
You have written some Python code to describe the user interface you want.
In this case it was very simple interface.
Sometimes in previous days we've had like GR markdown, GR drop down for a select box, and a few other
things we've had in there GR text textbox.
And we've described an interface by creating these radio objects, either a hybrid one out of the box
chat interface or more specific ones.
And in doing so, we've told radio what it wants and what we want, and Gradio uses that to generate
a front end interface.
It actually uses svelte, the front end framework, which is very nice because it just just generates
down to basic JavaScript.
So so it uses this to generate a basic front end description of your website.
And that's, that's like a generated code based on your high level description in Python, allowing
us to describe a UI in Python that gets translated into simple JavaScript UIs.
Okay, well, you probably already guessed that part.
So what's number two?
Well, number two is the next thing that it does is that when you call Dot launch, it starts up a server.
It uses Starlette, the app server framework that allows it to very easily start up a web server.
And it has it so that that web server is listening.
And if someone hits that web server endpoint, it serves up that front end that it just generated.
So it's sitting there waiting for someone to hit it, and then it will serve up the front end for your
app.
And that's sort of obvious when you think about it.
And so it is in fact a web server running there all the time, ready to serve your app.
It starts.
They pick a port that seems like it's a it's port seven, 860, I think is the port that it listens
at.
But if that's used up, if that's occupied, it just picks the next one and it keeps ticking up until
it finds a free one.
You can specify which port you want, but this one, for example, the current one we're just looking
at now, it's running on my localhost on port seven, eight, 60, and anybody that hits that URL will
have this auto generated front end served up into their browser.
And so sure enough, if I click on this right now, up comes a web page.
This is what gets served up and is now running in my browser window.
And this is served by the starlet server that's running behind the scenes.
And indeed, if I go to View Source, we see all of the stuff that's generated.
It's actually like it's a, it's a page that's running something in an iframe.
If we want to look, if we want to drill down into the JavaScript to see what we're actually looking
at here, see if we can find that, uh, by looking around, uh, is this it right here?
This is that's just the the iframe that it's running within.
Uh.
Hang on.
Here we go.
This is it.
This is the code.
Um, right.
So so this this is the description.
If you're familiar with front end stuff, this is like, minified front end code.
If I do a search for svelte, there we go.
We can see that it is indeed a svelte front end app that's running, uh, in my browser window.
And that that is what we are seeing right here.
I know I'm going a bit a bit into the weeds for you, but to give you a sense that that's all that's
happened, it's generated a JavaScript page.
And that is what we're seeing when we hit port seven, eight, seven, six, which is the next free
port on my local computer.
Okay.
And just the final part of step two is you might be wondering how come this appears in our notebook
like that?
Well, that's just a feature of notebooks.
Notebook output cells can show web content.
And if this is what we're trying to, this is what we've created.
Then the notebook output can can show that web page within it.
It's like you can think of it as running a little browser window inside that notebook output cell.
And that's why we see it right here, as well as being able to go into that web page so that that is
step two of what Gradio does.
And now there's only step three to go.
Have you already figured it out.
All right.
So step three is that in addition when we were describing what we were doing, we we will have told
Gradio our callback functions, some functions in our code that we want to attach to the user interface.
In this case it's just a simple function chat.
But there are others that we've played with in previous days and what Gradio does.
Can you imagine?
It's very simple in its server.
If you hit the root then then you get the web page, the generated front end page.
It also creates routes for each of your callbacks.
In our case, there's just one chat, so it has a back end route for that.
And if someone hits that back end route, it will call the chat function the one that we've we've just
got right here.
That code will get called if someone hits that route on that server.
And of course, no surprise in the front end code that it generates, it makes sure that if you click
the submit button, it's going to call the route that you want the chat route that is going to cause
the response to come back.
And it makes sure that whatever comes back from that is populated correctly on the UI.
All of that is baked into the front end code, so that it calls the right route and puts the results
in the right field.
And all of that is reflected in that one line of code.
And if you look back a couple of days at the slightly more substantive ones, you can see exactly how
it works.
Now, you can see how each of those three steps together simply allow you to produce UIs like this.
And if you're wondering if you're thinking, Ed, this is ten minutes of my life, I'm not going to
get back.
What has this got to do with AI?
It's not particularly, but it really helps you understand how you can build these kinds of apps, how
they're hooked up to your your, your business logic and the fact, in fact, starlet observers are
very scalable.
They can support very high load.
So this is this is more than a toy.
It's something that can be used for things like internal apps.
Um, and it can take you very far.
Um, you can also build out a separate full front end and still use your Gradio callbacks as your backend.
So Gradio can run as just in a sort of API mode only, so it can form a nice stepping stone to your
future strategic app with a custom made front end in another in another language like Next.js app or
something.
Uh, so that that can all be part of your natural migration.
So not only is it quite a high horsepower kind of of, uh, prototyping platform that could be used
for, for reasonably large apps, but also there's a very natural migration path to taking it to production.
Okay, enough of the technical chit chat.
There it is written down there, should you wish to read about it.
Let's do the fun stuff.
Let's go on and build a multimodal AI assistant.