1
00:00:00,120 --> 00:00:05,120
因此，在我们继续之前，我想花一点时间解释一些可能令人费解的事情

2
00:00:05,120 --> 00:00:05,480
你。

3
00:00:05,480 --> 00:00:09,280
如果它没有让你感到困惑，并且你并不真正关心这个，那么你可以加快速度

4
00:00:09,280 --> 00:00:11,840
我站起来，等到我们继续这个。

5
00:00:11,840 --> 00:00:16,120
但我想解释一下 Gradio 的实际工作原理。

6
00:00:16,160 --> 00:00:17,720
比如，它在做什么？

7
00:00:17,920 --> 00:00:21,360
就像，您在这里看到的用户界面是什么？

8
00:00:21,360 --> 00:00:23,440
为什么这个 URL 是什么？

9
00:00:23,480 --> 00:00:26,320
而且，就像幕后实际发生的事情一样。

10
00:00:26,320 --> 00:00:29,560
这意味着您可以编写一些 Python 代码并突然拥有一个 UI。

11
00:00:29,920 --> 00:00:32,960
事实证明它实际上非常简单。

12
00:00:33,000 --> 00:00:39,200
没有什么特别复杂的，但它是一系列非常好的想法的结果

13
00:00:39,200 --> 00:00:46,240
能够快速模拟 UI 并快速获得 MVP，这几乎是神奇的效果。

14
00:00:46,480 --> 00:00:51,720
这很容易解释，因为 Gradio 基本上做了三件事。

15
00:00:51,720 --> 00:00:55,080
它做了三件事，我将一一告诉你。

16
00:00:55,080 --> 00:00:59,520
当你看到，当它做了这三件事时，最终的结果就是这种神奇的效果

17
00:00:59,520 --> 00:01:00,840
轻松获得 MVP。

18
00:01:01,040 --> 00:01:02,360
所以三件事。

19
00:01:02,360 --> 00:01:05,040
第一，广播所做的第一件事。

20
00:01:05,240 --> 00:01:09,520
您已经编写了一些 Python 代码来描述您想要的用户界面。

21
00:01:09,560 --> 00:01:12,720
在这种情况下，它的界面非常简单。

22
00:01:12,880 --> 00:01:20,440
有时在前几天我们有像 GR markdown、GR drop down for a select box 以及其他一些

23
00:01:20,440 --> 00:01:23,280
我们在 GR 文本文本框中拥有的内容。

24
00:01:23,520 --> 00:01:29,640
我们通过创建这些无线电对象来描述一个界面，或者是开箱即用的混合对象

25
00:01:29,680 --> 00:01:31,840
聊天界面或更具体的界面。

26
00:01:32,120 --> 00:01:38,600
在这样做的过程中，我们告诉广播电台它想要什么以及我们想要什么，Gradio 使用它来生成

27
00:01:38,640 --> 00:01:40,520
前端接口。

28
00:01:40,880 --> 00:01:45,240
它实际上使用了前端框架 svelte，这非常好，因为它只是生成

29
00:01:45,240 --> 00:01:47,240
到基本的 JavaScript。

30
00:01:47,560 --> 00:01:55,120
因此它使用它来生成您网站的基本前端描述。

31
00:01:55,120 --> 00:02:01,890
这就像基于 Python 中的高级描述生成的代码，允许

32
00:02:01,890 --> 00:02:07,890
我们用 Python 描述一个 UI，该 UI 被转换为简单的 JavaScript UI。

33
00:02:08,050 --> 00:02:09,890
好吧，你可能已经猜到了那部分。

34
00:02:09,890 --> 00:02:10,970
那么第二名是什么？

35
00:02:11,170 --> 00:02:19,730
好吧，第二件事是它要做的下一件事是，当您调用 Dot launch 时，它会启动一个服务器。

36
00:02:19,970 --> 00:02:27,090
它使用 Starlette 应用程序服务器框架，使其能够非常轻松地启动 Web 服务器。

37
00:02:27,250 --> 00:02:31,170
它拥有它以便网络服务器正在监听。

38
00:02:31,370 --> 00:02:37,850
如果有人访问该 Web 服务器端点，它就会提供刚刚生成的前端。

39
00:02:37,850 --> 00:02:41,570
所以它坐在那里等待有人点击它，然后它会为你提供前端服务

40
00:02:41,570 --> 00:02:41,930
应用程序。

41
00:02:42,330 --> 00:02:44,690
当你仔细想想时，这是显而易见的。

42
00:02:44,690 --> 00:02:48,930
所以它实际上是一个一直运行的 Web 服务器，随时准备为您的应用程序提供服务。

43
00:02:48,970 --> 00:02:50,330
它开始了。

44
00:02:50,730 --> 00:02:56,890
他们选择了一个端口，看起来像是端口七，860，我认为是它监听的端口

45
00:02:56,890 --> 00:02:57,050
在。

46
00:02:57,050 --> 00:03:01,250
但如果它用完了，如果它被占用，它就会选择下一个，然后继续滴答作响，直到

47
00:03:01,250 --> 00:03:02,370
它找到一个免费的。

48
00:03:02,370 --> 00:03:06,450
你可以指定你想要的端口，但是这个，例如，我们当前正在查找的端口

49
00:03:06,450 --> 00:03:13,130
现在，它在我的本地主机上的端口 7、8、60 上运行，任何点击该 URL 的人都会

50
00:03:13,130 --> 00:03:17,530
将这个自动生成的前端提供到他们的浏览器中。

51
00:03:17,850 --> 00:03:21,650
果然，如果我现在点击这个，就会出现一个网页。

52
00:03:21,770 --> 00:03:25,690
这就是所提供的内容，现在正在我的浏览器窗口中运行。

53
00:03:25,690 --> 00:03:29,570
这是由在幕后运行的小星星服务器提供的。

54
00:03:29,570 --> 00:03:35,690
事实上，如果我去查看源代码，我们会看到生成的所有内容。

55
00:03:35,690 --> 00:03:40,410
它实际上就像是一个在 iframe 中运行某些内容的页面。

56
00:03:40,570 --> 00:03:46,330
如果我们想看，如果我们想深入研究 JavaScript 来看看我们实际上在看什么

57
00:03:46,330 --> 00:03:53,570
在这里，看看我们是否可以找到，呃，环顾四周，呃，就是这里吗？

58
00:03:54,250 --> 00:03:58,130
这就是它运行的 iframe。

59
00:03:58,530 --> 00:03:58,850
呃。

60
00:03:58,890 --> 00:03:59,330
不挂断。

61
00:03:59,370 --> 00:03:59,850
开始了。

62
00:03:59,890 --> 00:04:00,370
就是这样。

63
00:04:00,370 --> 00:04:01,290
这是代码。

64
00:04:01,610 --> 00:04:03,050
嗯，对。

65
00:04:03,090 --> 00:04:05,450
这就是描述。

66
00:04:05,450 --> 00:04:09,610
如果您熟悉前端的东西，这就像缩小的前端代码。

67
00:04:09,610 --> 00:04:12,570
如果我搜索“svelte”，我们就去吧。

68
00:04:12,610 --> 00:04:20,370
我们可以看到，它确实是一个在我的浏览器窗口中运行的简洁前端应用程序。

69
00:04:20,370 --> 00:04:23,410
这就是我们在这里看到的。

70
00:04:23,410 --> 00:04:27,210
我知道我会为你深入一些杂草，但为了让你感觉到仅此而已

71
00:04:27,210 --> 00:04:29,810
发生了，它生成了一个 JavaScript 页面。

72
00:04:29,930 --> 00:04:35,610
这就是当我们到达端口七、八、七、六时所看到的，这是下一个空闲端口

73
00:04:35,650 --> 00:04:38,010
我本地计算机上的端口。

74
00:04:38,770 --> 00:04:39,370
好的。

75
00:04:39,490 --> 00:04:43,930
第二步的最后一部分您可能想知道它为什么会出现在我们的笔记本中

76
00:04:43,930 --> 00:04:44,610
就这样？

77
00:04:44,610 --> 00:04:46,530
嗯，这只是笔记本电脑的一个功能。

78
00:04:46,530 --> 00:04:49,890
笔记本输出单元可以显示网页内容。

79
00:04:49,890 --> 00:04:53,410
如果这就是我们正在尝试的，那么这就是我们所创造的。

80
00:04:53,450 --> 00:04:56,330
然后笔记本输出可以显示其中的网页。

81
00:04:56,330 --> 00:05:01,020
就像您可以将其视为在笔记本输出单元内运行一个小浏览器窗口。

82
00:05:01,020 --> 00:05:05,940
这就是为什么我们在这里看到它，以及能够进入该网页，这样

83
00:05:05,940 --> 00:05:07,980
Gradio 所做的第二步。

84
00:05:08,340 --> 00:05:10,220
现在只剩下第三步了。

85
00:05:10,540 --> 00:05:11,740
你是不是已经想通了呢。

86
00:05:11,780 --> 00:05:12,100
好的。

87
00:05:12,100 --> 00:05:18,940
所以第三步是，此外，当我们描述我们正在做的事情时，我们会告诉

88
00:05:18,940 --> 00:05:26,020
Gradio 我们的回调函数，我们想要附加到用户界面的代码中的一些函数。

89
00:05:26,020 --> 00:05:28,260
在这种情况下，这只是一个简单的功能聊天。

90
00:05:28,300 --> 00:05:32,860
但我们前几天玩过其他一些东西以及 Gradio 的作用。

91
00:05:33,060 --> 00:05:34,020
你能想象吗？

92
00:05:34,020 --> 00:05:36,220
它的服务器非常简单。

93
00:05:36,220 --> 00:05:40,860
如果你点击根目录，那么你就会得到网页，即生成的前端页面。

94
00:05:40,860 --> 00:05:44,500
它还为您的每个回调创建路由。

95
00:05:44,500 --> 00:05:48,180
在我们的例子中，只有一次聊天，因此它有一个后端路由。

96
00:05:48,180 --> 00:05:53,260
如果有人点击该后端路线，它将调用我们刚刚拥有的聊天功能

97
00:05:53,260 --> 00:05:54,100
就到这里了。

98
00:05:54,100 --> 00:05:57,780
如果有人点击该服务器上的该路由，该代码将被调用。

99
00:05:58,060 --> 00:06:04,940
当然，它生成的前端代码毫不奇怪，它确保如果您单击

100
00:06:04,980 --> 00:06:10,540
提交按钮，它将调用您想要的聊天路由将导致的路由

101
00:06:10,540 --> 00:06:11,940
回复回来。

102
00:06:12,060 --> 00:06:16,580
它确保返回的任何内容都正确填充在 UI 上。

103
00:06:16,740 --> 00:06:22,100
所有这些都被烘焙到前端代码中，以便它调用正确的路由并将结果放入

104
00:06:22,100 --> 00:06:23,220
在正确的字段中。

105
00:06:23,500 --> 00:06:26,980
所有这些都反映在这一行代码中。

106
00:06:26,980 --> 00:06:31,700
如果你回顾几天那些稍微实质性的事情，你就会清楚地看到

107
00:06:31,700 --> 00:06:32,140
有用。

108
00:06:32,140 --> 00:06:39,020
现在，您可以看到这三个步骤中的每一个如何一起简单地允许您生成这样的 UI。

109
00:06:39,020 --> 00:06:42,140
如果你想知道你是否在想，艾德，这就是我生命中的十分钟，我不会

110
00:06:42,140 --> 00:06:42,380
回来吧。

111
00:06:42,380 --> 00:06:43,620
这和人工智能有什么关系？

112
00:06:43,980 --> 00:06:48,540
这不是特别的，但它确实可以帮助您了解如何构建这些类型的应用程序，如何

113
00:06:48,540 --> 00:06:54,740
他们与你的商业逻辑挂钩，事实上，小明星观察者是

114
00:06:54,740 --> 00:06:55,620
非常具有可扩展性。

115
00:06:55,620 --> 00:06:57,950
它们可以支持非常高的负载。

116
00:06:57,950 --> 00:06:59,910
所以这不仅仅是一个玩具。

117
00:07:00,070 --> 00:07:03,070
它可用于内部应用程序等。

118
00:07:03,230 --> 00:07:05,470
嗯，它可以带你走很远。

119
00:07:05,670 --> 00:07:14,350
嗯，您还可以构建一个单独的完整前端，并仍然使用 Gradio 回调作为后端。

120
00:07:14,390 --> 00:07:21,430
因此，Gradio 只能在某种 API 模式下运行，因此它可以成为您的良好垫脚石。

121
00:07:21,430 --> 00:07:27,790
未来的战略应用程序，具有另一种语言的定制前端，例如 Next.js 应用程序或

122
00:07:27,790 --> 00:07:28,350
某物。

123
00:07:28,430 --> 00:07:32,110
呃，所以这都可以成为你自然迁徙的一部分。

124
00:07:32,110 --> 00:07:39,670
所以它不仅是一个相当高马力的原型平台，可以使用

125
00:07:39,670 --> 00:07:45,710
对于相当大的应用程序来说，还有一个非常自然的迁移路径可以将其投入生产。

126
00:07:45,950 --> 00:07:48,710
好了，技术闲聊就到此为止了。

127
00:07:48,750 --> 00:07:51,350
如果您想阅读的话，它就写在那里。

128
00:07:51,350 --> 00:07:52,950
让我们做一些有趣的事情吧。

129
00:07:52,950 --> 00:07:56,190
让我们继续构建一个多模式人工智能助手。