机器学习领域的Python Web UI框架：Gradio
Gradio是目前机器学习和数据科学领域最流行、最易上手的 Python Web UI 框架之一。简单来说，它的核心使命是：让你用极短的 Python 代码（通常只需几行），瞬间为你的机器学习模型构建一个可视化的演示界面。它特别适合用于快速原型设计、向团队/客户展示模型效果，或者在 Hugging Face Spaces 上托管 Demo。
Gradio的官方网站是：Gradio
Gradio的重点特性
- • 纯 Python 体验 (No HTML/CSS/JS): 不需要任何前端知识。所有的组件（输入框、按钮、滑块、图像上传等）都可以通过 Python 类调用。
- • 极速构建: 对于标准的“输入 -> 模型 -> 输出”流程，通常 3-5 行代码即可完成，非常简单，容易上手。
- • 丰富的组件库: 针对机器学习场景内置了大量专用组件，如 Image（图像）、Audio（音频）、Video（视频）、Dataframe（表格）、Code（代码）等。
- • 一键分享 (Shareable Links): 运行
.launch(share=True) 后，Gradio 会自动生成一个公开的临时 URL（有效期 72 小时），你可以直接发给客户或同事，让他们在自己的浏览器里测试你的模型（虽然模型实际运行在你的电脑上）。这个功能对于做一些demo的临时演示而言确实太方便了，不再需要浪费时间去搭建基于云服务的演示环境了。 - • 生态整合: 它由 Hugging Face 收购并维护，因此与 Hugging Face 的生态系统（Spaces, Transformers）结合得非常紧密。
以上的这个一键分享的功能对于模型demo的演示和试用实在是太方便了，只需要启动web应用的时候，传递一个share=true的参数，外网就可以直接通过系统生成的一个public URL访问，不再需要浪费时间去搭建基于云服务的演示环境了。*
开发环境搭建与Hello World
gradio的开发环境安装非常简单，直接使用pip安装即可，如果需要在Jupyter notebooks中使用的话，还需要安装ipykernel：
pip3 install gradio ipykernel
总体上就，Gradio构建UI界面主要有两种构建方式：
- • gr.Interface：提供最高级的抽象，使用起来最简单，比较适合单功能。
- • gr.Blocks：更加灵活，如果需要更复杂的布局（例如多列排版、多个标签页、控制组件间的数据流向），可以使用 Blocks 像搭积木一样控制页面的每一个显示细节。
以下代码以两种方式分别演示基本的Hello World功能：
import gradio as grdef hello(name): return "你好，" + name# Inferface模式# demo = gr.Interface(# fn=hello,# inputs=['text'],# outputs="text",# )# Blocks模式with gr.Blocks() as demo: name = gr.Textbox(label="请输入你的姓名") output = gr.Textbox(label="你好，姓名") greet_btn = gr.Button("打招呼") greet_btn.click(fn=hello, inputs=name, outputs=output)demo.launch(share=True)
以上代码执行后，就可以在本地浏览器http://127.0.0.1:7860看到Web UI界面。
此外，在launch的share选项设置为True的情况下，Gradio还会自动产生一个外网可以访问的公开URL，这样就可以把这个URL分享给其他的同事或者客户，请他们体验当前模型的功能状况，而模型及其实际的运算仍然是在本地计算机上（实际上Gradio只是在公共URL服务和本地计算机之间创建了一个tunnel，所有访问这个公共URL的流量都会被转发到本地计算机上）。这个公开的URL可在1周内使用，对于演示和体验性的测试而言足够了。
(sam3) PS D:\Code\sam3> & C:/Users/windl/anaconda3/envs/sam3/python.exe d:/Code/sam3/test/gradio_test.py6.1.0* Running on local URL: http://127.0.0.1:7860* Running on public URL: https://c5c263e07d4b02675c.gradio.liveThis share link expires in 1 week. For free permanent hosting and GPU upgrades, run `gradio deploy` from the terminal in the working directory to deploy to Hugging Face Spaces (https://huggingface.co/spaces)
以下是上面的Blocks模式的UI界面：
Gradio的主要组件
Gradio框架的使用主要建立在以下四个核心概念上：
- • Blocks/Interface： 负责整个Web UI架构的布局管理。
- • Component：超过30个内建的UI组件，用于方便地提供对文本、音频、图像等的输入和输出管理。
- • Functions：标准的Python功能函数，从输入组件中得到数据，在functions中进行各种处理，最终通过输出组件输出和呈现出来。
- • Launch：启动整个Gradio Web App的运行。
Gradio内置了 30 多种封装好的组件，这些组件通常既可以作为输入，也可以作为输出。具体取决于是将其放在inputs参数中还是outputs参数中。以下按照功能类型进行整理：
文本与对话类
gr.Textbox：最常用，主要用于显示文本框。
- • 在输入模式中使用时，用于提供用户输入文本的界面，可支持设置 lines (行数)、placeholder (占位符)、type="password" (密码掩码)。
- • 在输出模式中使用时，用于显示处理后的文本结果。
gr.Chatbot：大语言模型必备，专门用于显示对话历史。
- • 通常作为输出组件，接收一个包含 (用户消息, 机器回复)元组的列表。
gr.Markdown：可支持 Markdown 语法的文本内容展示。常用于页面顶部的说明、公式渲染、或者富文本输出。
gr.Code：专门用于展示代码片段，支持语法高亮和一键复制按钮。
多媒体类 (Video和Audio)
gr.Image：上传和显示图片。
- • 在输入模式中使用时，可支持上传静态图片、使用 Webcam 拍照或者提供画板 (canvas) 让用户手绘图像。且可以自动将图片转为numpy数组或PIL对象。
gr.Audio：上传和播放音频文件。
- • 在输入模式中使用时，可支持上传音频文件或者使用麦克风录音。
- • 在输出模式中使用时，可用于播放Functions功能所生成的语音（TTS）或音乐，并提供波形图显示和下载按钮。
gr.Video：与Image组件类似，可支持上传或录制视频，以及播放生成的视频流。
gr.Gallery：用于以网格的形式同时展示多张图片，非常适合图像生成模型（一次生成 4 张图）或图像检索任务。
数值与控制类 (参数控制)
这部分组件通常作为输入，用于调节模型的参数或运行选项。
gr.Slider：滑动条组件，适合用于选择一定范围内的数值（如 0 到 1 之间的置信度阈值）。
gr.Dropdown：下拉菜单组件，适合从预定义的列表中选择一个值。
gr.Radio：单选按钮组。功能同 Dropdown，但所有选项直接展开显示。
gr.Checkbox/gr.CheckboxGroup：复选框，用于作为布尔值开关（True/False）或多选标签。
gr.Number：用于作为精确的数字输入框。
数据与文件类 (分析与通用)
gr.File：通用文件上传/下载。如果处理的是 PDF、Zip 包或特定格式的文件，可以用这个组件上传到程序中。可支持多文件上传。
gr.Dataframe：
- • 在输入模式中使用时，类似 Excel 的表格编辑器，用户可以手动输入数据或粘贴 CSV。
- • 在输出模式中使用时，可用于展示 Pandas DataFrame 数据，可支持排序和筛选。
gr.Plot：专门用于展示图表，可完美支持 matplotlib、plotly、bokeh等绘图库生成的对象。
gr.JSON：用于以树状结构漂亮地展示 JSON 数据或 Python 字典，可方便查看复杂的 API 返回结果。
基于Gradio演示OpenCV图像模糊化效果
下面使用Gradio的多个不同组件，演示一个使用Opencv实现对输入图像进行模糊化处理并显示出来的Web UI效果。代码如下所示：
import gradio as grimport cv2import numpy as npdef apply_gaussian_blur(image, blur_level): if image is None: return None img_cv = np.array(image) # 将PIL图像转换为OpenCV格式 ksize = int(blur_level * 2) + 1 # 确保高斯核大小是奇数 blurred_img = cv2.GaussianBlur(img_cv, (ksize, ksize), 0) # 应用高斯模糊 return blurred_img# 创建Gradio界面with gr.Blocks() as demo: gr.Markdown("# 基于OpenCV的图像高斯模糊处理演示") with gr.Row(): # 左侧：输入区域 with gr.Column(): input_image = gr.Image( label="输入图像", type="pil", # 使用PIL格式以便更好地处理 sources=["upload", "webcam"] # 支持上传和摄像头 ) blur_slider = gr.Slider( minimum=0, maximum=20, value=5, step=1, label="模糊程度", info="滑块值越大，模糊效果越强" ) process_btn = gr.Button( "应用模糊", variant="primary" ) # 右侧：输出区域 with gr.Column(): output_image = gr.Image( label="处理后的图像", type="pil" ) # 连接按钮点击事件 process_btn.click( fn=apply_gaussian_blur, inputs=[input_image, blur_slider], outputs=output_image ) # 添加滑块变化时自动更新的功能 blur_slider.change( fn=apply_gaussian_blur, inputs=[input_image, blur_slider], outputs=output_image )demo.launch()
最终的UI显示效果如下：
参考资料
- • Building User Interfaces For AI Applications with Gradio in Python | DataCamp
尝试从底层原理的角度去理解和解释技术问题：音视频/摄像头/智能家居/蓝牙/WiFi/无线通信/AI。敬请关注微信公众号：Pavel Han。
