1
00:00:00,120 --> 00:00:05,120
So just before we go on, I want to take a minute to explain something that might have been mystifying

2
00:00:05,120 --> 00:00:05,480
you.

3
00:00:05,480 --> 00:00:09,280
And if it hasn't been mystifying you, and if you don't really care about this, then you can just speed

4
00:00:09,280 --> 00:00:11,840
me up and wait until we continue with this.

5
00:00:11,840 --> 00:00:16,120
But I want to explain how Gradio actually works.

6
00:00:16,160 --> 00:00:17,720
Like, what is it doing?

7
00:00:17,920 --> 00:00:21,360
And like, what is this user interface that you see here?

8
00:00:21,360 --> 00:00:23,440
And why is what is this URL.

9
00:00:23,480 --> 00:00:26,320
And, and like what's actually going on behind the scenes.

10
00:00:26,320 --> 00:00:29,560
That means you can write some Python code and suddenly have a UI.

11
00:00:29,920 --> 00:00:32,960
And it turns out it's actually it's really very simple.

12
00:00:33,000 --> 00:00:39,200
There's nothing particularly complicated about it, but it's a series of really good ideas that results

13
00:00:39,200 --> 00:00:46,240
in this almost magical effect of being able to quickly mock up a UI and have an MVP really fast.

14
00:00:46,480 --> 00:00:51,720
And it's easy to explain because Gradio basically does three things.

15
00:00:51,720 --> 00:00:55,080
It does three things that I will tell you about one after another.

16
00:00:55,080 --> 00:00:59,520
And when you see that, when it does those three things, the net result is this kind of magical effect

17
00:00:59,520 --> 00:01:00,840
of an easy MVP.

18
00:01:01,040 --> 00:01:02,360
So three things.

19
00:01:02,360 --> 00:01:05,040
Number one, the first thing radio does.

20
00:01:05,240 --> 00:01:09,520
You have written some Python code to describe the user interface you want.

21
00:01:09,560 --> 00:01:12,720
In this case it was very simple interface.

22
00:01:12,880 --> 00:01:20,440
Sometimes in previous days we've had like GR markdown, GR drop down for a select box, and a few other

23
00:01:20,440 --> 00:01:23,280
things we've had in there GR text textbox.

24
00:01:23,520 --> 00:01:29,640
And we've described an interface by creating these radio objects, either a hybrid one out of the box

25
00:01:29,680 --> 00:01:31,840
chat interface or more specific ones.

26
00:01:32,120 --> 00:01:38,600
And in doing so, we've told radio what it wants and what we want, and Gradio uses that to generate

27
00:01:38,640 --> 00:01:40,520
a front end interface.

28
00:01:40,880 --> 00:01:45,240
It actually uses svelte, the front end framework, which is very nice because it just just generates

29
00:01:45,240 --> 00:01:47,240
down to basic JavaScript.

30
00:01:47,560 --> 00:01:55,120
So so it uses this to generate a basic front end description of your website.

31
00:01:55,120 --> 00:02:01,890
And that's, that's like a generated code based on your high level description in Python, allowing

32
00:02:01,890 --> 00:02:07,890
us to describe a UI in Python that gets translated into simple JavaScript UIs.

33
00:02:08,050 --> 00:02:09,890
Okay, well, you probably already guessed that part.

34
00:02:09,890 --> 00:02:10,970
So what's number two?

35
00:02:11,170 --> 00:02:19,730
Well, number two is the next thing that it does is that when you call Dot launch, it starts up a server.

36
00:02:19,970 --> 00:02:27,090
It uses Starlette, the app server framework that allows it to very easily start up a web server.

37
00:02:27,250 --> 00:02:31,170
And it has it so that that web server is listening.

38
00:02:31,370 --> 00:02:37,850
And if someone hits that web server endpoint, it serves up that front end that it just generated.

39
00:02:37,850 --> 00:02:41,570
So it's sitting there waiting for someone to hit it, and then it will serve up the front end for your

40
00:02:41,570 --> 00:02:41,930
app.

41
00:02:42,330 --> 00:02:44,690
And that's sort of obvious when you think about it.

42
00:02:44,690 --> 00:02:48,930
And so it is in fact a web server running there all the time, ready to serve your app.

43
00:02:48,970 --> 00:02:50,330
It starts.

44
00:02:50,730 --> 00:02:56,890
They pick a port that seems like it's a it's port seven, 860, I think is the port that it listens

45
00:02:56,890 --> 00:02:57,050
at.

46
00:02:57,050 --> 00:03:01,250
But if that's used up, if that's occupied, it just picks the next one and it keeps ticking up until

47
00:03:01,250 --> 00:03:02,370
it finds a free one.

48
00:03:02,370 --> 00:03:06,450
You can specify which port you want, but this one, for example, the current one we're just looking

49
00:03:06,450 --> 00:03:13,130
at now, it's running on my localhost on port seven, eight, 60, and anybody that hits that URL will

50
00:03:13,130 --> 00:03:17,530
have this auto generated front end served up into their browser.

51
00:03:17,850 --> 00:03:21,650
And so sure enough, if I click on this right now, up comes a web page.

52
00:03:21,770 --> 00:03:25,690
This is what gets served up and is now running in my browser window.

53
00:03:25,690 --> 00:03:29,570
And this is served by the starlet server that's running behind the scenes.

54
00:03:29,570 --> 00:03:35,690
And indeed, if I go to View Source, we see all of the stuff that's generated.

55
00:03:35,690 --> 00:03:40,410
It's actually like it's a, it's a page that's running something in an iframe.

56
00:03:40,570 --> 00:03:46,330
If we want to look, if we want to drill down into the JavaScript to see what we're actually looking

57
00:03:46,330 --> 00:03:53,570
at here, see if we can find that, uh, by looking around, uh, is this it right here?

58
00:03:54,250 --> 00:03:58,130
This is that's just the the iframe that it's running within.

59
00:03:58,530 --> 00:03:58,850
Uh.

60
00:03:58,890 --> 00:03:59,330
Hang on.

61
00:03:59,370 --> 00:03:59,850
Here we go.

62
00:03:59,890 --> 00:04:00,370
This is it.

63
00:04:00,370 --> 00:04:01,290
This is the code.

64
00:04:01,610 --> 00:04:03,050
Um, right.

65
00:04:03,090 --> 00:04:05,450
So so this this is the description.

66
00:04:05,450 --> 00:04:09,610
If you're familiar with front end stuff, this is like, minified front end code.

67
00:04:09,610 --> 00:04:12,570
If I do a search for svelte, there we go.

68
00:04:12,610 --> 00:04:20,370
We can see that it is indeed a svelte front end app that's running, uh, in my browser window.

69
00:04:20,370 --> 00:04:23,410
And that that is what we are seeing right here.

70
00:04:23,410 --> 00:04:27,210
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

71
00:04:27,210 --> 00:04:29,810
happened, it's generated a JavaScript page.

72
00:04:29,930 --> 00:04:35,610
And that is what we're seeing when we hit port seven, eight, seven, six, which is the next free

73
00:04:35,650 --> 00:04:38,010
port on my local computer.

74
00:04:38,770 --> 00:04:39,370
Okay.

75
00:04:39,490 --> 00:04:43,930
And just the final part of step two is you might be wondering how come this appears in our notebook

76
00:04:43,930 --> 00:04:44,610
like that?

77
00:04:44,610 --> 00:04:46,530
Well, that's just a feature of notebooks.

78
00:04:46,530 --> 00:04:49,890
Notebook output cells can show web content.

79
00:04:49,890 --> 00:04:53,410
And if this is what we're trying to, this is what we've created.

80
00:04:53,450 --> 00:04:56,330
Then the notebook output can can show that web page within it.

81
00:04:56,330 --> 00:05:01,020
It's like you can think of it as running a little browser window inside that notebook output cell.

82
00:05:01,020 --> 00:05:05,940
And that's why we see it right here, as well as being able to go into that web page so that that is

83
00:05:05,940 --> 00:05:07,980
step two of what Gradio does.

84
00:05:08,340 --> 00:05:10,220
And now there's only step three to go.

85
00:05:10,540 --> 00:05:11,740
Have you already figured it out.

86
00:05:11,780 --> 00:05:12,100
All right.

87
00:05:12,100 --> 00:05:18,940
So step three is that in addition when we were describing what we were doing, we we will have told

88
00:05:18,940 --> 00:05:26,020
Gradio our callback functions, some functions in our code that we want to attach to the user interface.

89
00:05:26,020 --> 00:05:28,260
In this case it's just a simple function chat.

90
00:05:28,300 --> 00:05:32,860
But there are others that we've played with in previous days and what Gradio does.

91
00:05:33,060 --> 00:05:34,020
Can you imagine?

92
00:05:34,020 --> 00:05:36,220
It's very simple in its server.

93
00:05:36,220 --> 00:05:40,860
If you hit the root then then you get the web page, the generated front end page.

94
00:05:40,860 --> 00:05:44,500
It also creates routes for each of your callbacks.

95
00:05:44,500 --> 00:05:48,180
In our case, there's just one chat, so it has a back end route for that.

96
00:05:48,180 --> 00:05:53,260
And if someone hits that back end route, it will call the chat function the one that we've we've just

97
00:05:53,260 --> 00:05:54,100
got right here.

98
00:05:54,100 --> 00:05:57,780
That code will get called if someone hits that route on that server.

99
00:05:58,060 --> 00:06:04,940
And of course, no surprise in the front end code that it generates, it makes sure that if you click

100
00:06:04,980 --> 00:06:10,540
the submit button, it's going to call the route that you want the chat route that is going to cause

101
00:06:10,540 --> 00:06:11,940
the response to come back.

102
00:06:12,060 --> 00:06:16,580
And it makes sure that whatever comes back from that is populated correctly on the UI.

103
00:06:16,740 --> 00:06:22,100
All of that is baked into the front end code, so that it calls the right route and puts the results

104
00:06:22,100 --> 00:06:23,220
in the right field.

105
00:06:23,500 --> 00:06:26,980
And all of that is reflected in that one line of code.

106
00:06:26,980 --> 00:06:31,700
And if you look back a couple of days at the slightly more substantive ones, you can see exactly how

107
00:06:31,700 --> 00:06:32,140
it works.

108
00:06:32,140 --> 00:06:39,020
Now, you can see how each of those three steps together simply allow you to produce UIs like this.

109
00:06:39,020 --> 00:06:42,140
And if you're wondering if you're thinking, Ed, this is ten minutes of my life, I'm not going to

110
00:06:42,140 --> 00:06:42,380
get back.

111
00:06:42,380 --> 00:06:43,620
What has this got to do with AI?

112
00:06:43,980 --> 00:06:48,540
It's not particularly, but it really helps you understand how you can build these kinds of apps, how

113
00:06:48,540 --> 00:06:54,740
they're hooked up to your your, your business logic and the fact, in fact, starlet observers are

114
00:06:54,740 --> 00:06:55,620
very scalable.

115
00:06:55,620 --> 00:06:57,950
They can support very high load.

116
00:06:57,950 --> 00:06:59,910
So this is this is more than a toy.

117
00:07:00,070 --> 00:07:03,070
It's something that can be used for things like internal apps.

118
00:07:03,230 --> 00:07:05,470
Um, and it can take you very far.

119
00:07:05,670 --> 00:07:14,350
Um, you can also build out a separate full front end and still use your Gradio callbacks as your backend.

120
00:07:14,390 --> 00:07:21,430
So Gradio can run as just in a sort of API mode only, so it can form a nice stepping stone to your

121
00:07:21,430 --> 00:07:27,790
future strategic app with a custom made front end in another in another language like Next.js app or

122
00:07:27,790 --> 00:07:28,350
something.

123
00:07:28,430 --> 00:07:32,110
Uh, so that that can all be part of your natural migration.

124
00:07:32,110 --> 00:07:39,670
So not only is it quite a high horsepower kind of of, uh, prototyping platform that could be used

125
00:07:39,670 --> 00:07:45,710
for, for reasonably large apps, but also there's a very natural migration path to taking it to production.

126
00:07:45,950 --> 00:07:48,710
Okay, enough of the technical chit chat.

127
00:07:48,750 --> 00:07:51,350
There it is written down there, should you wish to read about it.

128
00:07:51,350 --> 00:07:52,950
Let's do the fun stuff.

129
00:07:52,950 --> 00:07:56,190
Let's go on and build a multimodal AI assistant.