使用 Gradio 快速入门 Python

在本节课中，我们将通过三个示例展示如何快速使用 Python 和 Gradio 创建用户界面。Gradio 用户界面可用于多种应用场景，最常见的用途是机器学习，但也适用于计算机视觉和图像处理等其他应用。

总体而言，Gradio 是一个强大的工具，能够快速为任意 Python 函数创建并分享带有图形界面的演示。它特别适合向非技术用户展示我们的工作成果。另一个用途是无需用户理解或直接操作代码，即可收集用户反馈。

第一个示例展示了一个简单的文本转换函数，将输入的文本转换为标题格式。虽然这一操作在 Python 中非常简单，但通过 Gradio 界面，任何人都能轻松访问和使用该功能。

第二和第三个示例更为复杂，涉及使用 OpenCV 库进行图像处理任务。这两个示例都实现了在图像上添加文字的功能。

在第二个示例中，我们将使用一行代码快速构建界面。如果需要更精细地控制 Gradio 界面元素的布局，也可以实现这一点，这将在第三个示例中展示。

后两个示例涉及更复杂的操作，展示了 Gradio 在为接收复杂输入（如图像）的函数创建界面方面的强大能力。

这三个示例为 Gradio 库提供了入门介绍，并演示了如何快速为图像处理函数构建用户界面。我们将在下一节课中利用这些知识开发一个实际的条形码读取器。

使用 Gradio 将文本转换为标题格式

在第一个示例中，我们将创建一个简单的 Gradio 界面，接收文本输入并以标题格式输出。

第 1 行： 首先，我们导入 gradio 库并将其别名为 gr。gradio 是用于快速为 Python 函数创建用户界面的 Python 库。我们将在后续课程中继续使用它。

第 3–5 行： 接下来，我们定义一个名为 title_case() 的函数，接受一个参数 text。

在 title_case() 函数内部，调用了 text 参数的 title() 方法。title() 是 Python 内置方法，会将每个单词的首字母大写，其余字母小写。最后，title_case() 函数返回处理后的结果。

第 7 行： 要为某个函数快速创建基础界面，可以使用 gr.Interface()。该方法创建了 Gradio 库中的 Interface 类的一个实例。fn 参数指定界面所使用的函数，在此设为 title_case()。inputs 和 outputs 参数说明该函数接收文本输入并返回文本输出。

第 9 行： 现在可以通过 demo.launch() 启动 Gradio 界面。server_name 和 server_port 参数用于设置 Web 服务器的 IP 地址和端口号。当运行此行代码时，会启动一个 Web 服务器，并在控制台打印出访问链接。

现在我们可以输入文本，提交表单后，title_case() 函数将被调用，输入的文本将被转换为标题格式，并在界面上显示结果。

运行上述脚本时，我们会注意到 gr.Interface() 函数根据我们定义的输入和输出创建了一个界面。此外，还自动生成了三个按钮。这三个按钮是单行 UI 函数的默认配置。

以下是这三个按钮的说明：

• 清除按钮： “清除”按钮用于将 Gradio 界面中的所有输入字段重置为初始状态。当我们希望清空当前输入数据并重新开始时非常有用。例如，若已输入文本，点击“清除”按钮将移除输入框中的内容。

• 提交按钮： “提交”按钮用于使用当前输入字段的数据执行与界面关联的函数。点击后，输入数据将传递给函数，函数执行完毕后，结果会在界面的输出区域显示。

• 标记按钮： “标记”按钮用于标记某个输入-输出对以供后续审查。这在使用 Gradio 收集数据或测试模型时非常有用。如果函数对某个输入产生了意外或错误的结果，可以点击“标记”按钮来记录该输入-输出对。被标记的内容会被保存，便于后期调试函数或改进模型。在本示例中未使用此按钮。

使用默认界面在图像上添加文字

第 1–2 行： 首先，我们导入 cv2 和 gradio，并将 gradio 别名为 gr。

第 4–8 行： 接下来，我们定义一个名为 add_text() 的函数，接收两个参数：text 和 image。该函数的作用是在图像上添加指定的文字。

在 add_text() 函数内部，image.shape[:2] 获取图像的高度 h 和宽度 w。OpenCV 中图像的 shape 属性是一个包含行数（高度）、列数（宽度）以及通道数（彩色图像）的元组。[:2] 用于切片，仅提取前两个值（即高度和宽度）。

然后，使用 OpenCV 的 cv2.putText() 函数在图像上添加文字。各参数说明如下：

• image：要添加文字的目标图像。
• text：要添加的文字内容。
• (20, h - 20)：文字左下角在图像中的坐标位置。此处表示文字距离左侧边缘 20 像素，距离底部边缘 20 像素。
• cv2.FONT_HERSHEY_SIMPLEX：字体类型。
• 0.5：字体缩放比例（大小）。
• (0, 255, 0)：文字颜色，采用 BGR 格式（蓝、绿、红）。此处文字为绿色。
• 2：绘制文字线条的粗细。

最后，add_text() 函数返回添加了文字的新图像。

第 10 行： 通过 demo = gr.Interface()，我们创建了 Gradio 库中 Interface 类的一个实例，用于为我们的函数设置用户界面，命名为 demo。

在此情况下，fn 参数设为 add_text()。inputs 参数说明函数接收 text 和 image 两种输入（以列表形式表示）。outputs 参数说明函数返回一个图像输出。

第 12 行： 最后，我们通过 demo.launch() 启动 Gradio 界面。现在可以输入文字并上传图像。提交表单后，add_text() 函数将使用提供的文字和图像进行处理，最终将添加文字后的图像结果显示在界面中。

为在图像上添加文字创建自定义界面

在本节课的最后一个示例中，我们将创建一个自定义界面，以便更精细地控制输入、输出和按钮元素的布局。

第 1–2 行： 首先导入所需的库：cv2 和 gradio，其中 gradio 别名为 gr。

第 5–9 行： 接下来，我们定义一个名为 add_text() 的函数，接收两个参数：text 和 image。

在函数内部，通过 image.shape[:2] 获取图像的高度和宽度，然后调用 OpenCV 的 cv2.putText() 函数在图像上添加文字，并返回结果图像。

此时，不再使用 gr.Interface() 创建界面，而是通过 Gradio 提供的各种方法手动构建界面。

第 12 行： 首先，我们使用 Blocks 对象的上下文管理器开始构建界面布局。Blocks 用于创建 Gradio 界面的布局结构，as demo 将该对象赋值给变量 demo。

第 14 行： 接着，我们使用 with gr.Row() 创建一个 Row 对象的上下文管理器。Row 用于在界面布局中创建一行。

第 15 行： 我们创建一个 Text 对象，使用 gr.Text() 并赋值给变量 txt。Text 对象是 Gradio 界面中的文本输入框。

第 17 行： 我们再开启一个新的 Row 上下文管理器，用于创建界面布局中的第二行。

第 18 行： 在该行内，使用 gr.Column() 创建一个 Column 对象的上下文管理器。Column 用于在布局中创建一列。

在此列中，我们创建两个组件：

• 首先，使用 gr.Image() 创建一个 Image 对象并赋值给变量 im。Image 对象是图像输入框。height 和 width 参数用于设置图像输入框的尺寸。
• 在图像输入框下方，使用 gr.Button() 创建一个 Button 对象并赋值给变量 btn。value 参数设置按钮上的文字，variant 参数设置按钮样式。此处按钮将被设置为“主按钮”样式。

第 23 行： 接着，在当前行中创建第二个列。在此列中，再次创建两个组件：

• 首先，使用 Gradio 的 Image 对象创建另一个 Image 实例并赋值给变量 im_2。这将成为界面中的另一个图像输入框。
• 在图像输入框下方，使用 gr.ClearButton() 创建一个 ClearButton 对象并赋值给变量 btn_2。ClearButton 是一个可点击的按钮，用于清空指定的输入和输出字段。其参数是一个包含需清空的输入输出项的列表。此处点击按钮后，im、im_2 和 txt 的输入输出内容都将被清空。

第 27 行： 为了为按钮 btn 添加点击事件处理逻辑，我们使用 btn.click()。当按钮被点击时，add_text() 函数将被调用，传入 txt 和 im 的当前值，结果将显示在 im_2 输出区域。

第 29 行： 最后，我们再次使用 demo.launch() 启动自定义的 Gradio 界面。

现在可以输入文字、上传图像，并点击按钮来为图像添加文字或清除内容。处理后的图像结果将实时显示在界面中。