Gradio：轻松构建功能丰富的web应用

最新推荐文章于 2025-04-27 22:24:57 发布

AI_Mind

最新推荐文章于 2025-04-27 22:24:57 发布

阅读量1.3k

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/AI_Mind/article/details/142067227

版权

Gradio简介

Gradio是一个开源Python包，可以为机器学习模型、API或任何Python函数快速构建演示或web应用程序，然后可以使用Gradio的内置共享功能在几秒钟内通过公共链接共享演示。

Gradio 的主要特点包括：

简单易用：只需几行代码即可生成完整的Web应用。
兼容性：支持多种输入输出类型，如文本、图像、音频等。
集成方便：可以轻松地与Jupyter Notebook或本地 Python 脚本集成。
自定义选项：提供丰富的样式和布局选项以满足不同的需求。

Gradio常用组件介绍

为了帮助开发者快速构建交互式的Web应用程序，Gradio包括40多个预构建的组件以及许多社区构建的自定义组件。以下是一些常用的组件：

Textbox：用于输入和显示文本，是基本的文本输入控件
Dropdown：用于下拉菜单选择
Radio：用于单选按钮
Image：用于上传和显示图片
Video：用于上传和播放视频
Audio：用于上传和播放音频
Slider：允许用户通过滑动来选择数值范围内的值
Checkbox：用于单个复选框
Dataframe：显示表格数据，适用于呈现结构化数据
Markdown：显示Markdown格式的文本，便于富文本编辑
File：用于文件上传的基本组件
Chatbot：模拟聊天界面，提供人机对话体验

接下来对Textbox，Image，Audio以及Chatbot这四个组件在功能和一些用法上进行展示。

1.Textbox

描述：创建一个文本区域，供用户输入字符串或显示字符串输出。

用法介绍：

这里展示一个简单的demo帮助您更好的了解Textbox组件的使用，在该demo中用户只需要输入一个name，在提交后就可以得到Hello+name！的结果。

示例代码如下：

import gradio as gr

# 定义一个函数，该函数接受一个名字作为参数，并返回一条问候消息

def greet(name):

return "Hello " + name + "!"

# 创建 Gradio 接口，将greet函数与输入和输出文本框绑定

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")

if __name__ == "__main__":

#launch()方法启动一个本地服务器并在浏览器中打开Gradio应用程序

demo.launch()

效果展示：

可以看到只需要输入一个name并点击Submit后就可以在下面output的文本框中得到结果。

2.image

描述：可用于上传图像或显示图像以及对图像进行一些操作的组件。

用法介绍：

为了帮助您更好的了解image组件，此处展示一个demo，在该demo中用户上传一张图片并提交后可以获得褐色滤镜下的图片。

示例代码如下：

import numpy as np

import gradio as gr

# 定义一个函数，该函数接收一张图片并将其转换为褐色色调

def sepia(input_img):

    # 定义褐色滤镜矩阵

    sepia_filter = np.array([

        [0.393, 0.769, 0.189],

        [0.349, 0.686, 0.168],

        [0.272, 0.534, 0.131]

])

# 将图片的颜色通道与褐色滤镜相乘

sepia_img = input_img.dot(sepia_filter.T)

# 归一化像素值以保持颜色范围

    sepia_img /= sepia_img.max()

    return sepia_img

# 创建 Gradio 接口，输入为图片，输出也为图片

demo = gr.Interface(sepia, gr.Image(), "image")

if __name__ == "__main__":

demo.launch()

效果展示：

可以清晰的看到一张正常的图片在加入了褐色滤镜后的成片效果。

3.Audio

描述：用于上传音频、录制音频和显示音频以及对音频进行一些操作的一个组件。

用法介绍：

为了帮助您更好的了解Audio这个组件，这里演示了一个demo，在该demo中用户可以通过麦克风录制音频，并通过调用reverse_audio函数来反转音频的内容，最后用户可以播放反转后的音频。

示例代码如下：

import numpy as np

import gradio as gr

# 定义一个函数，该函数接收音频数据并返回反向的音频数据

def reverse_audio(audio):

    sr, data = audio # 解包音频数据（采样率和数据）

    return (sr, np.flipud(data)) # 返回反向的音频数据

# 创建音频输入组件

input_audio = gr.Audio(

    sources=["microphone"], # 允许从麦克风输入音频

    waveform_options=gr.WaveformOptions(   # 自定义波形选项

        waveform_color="#01C6FF",   # 波形颜色

        waveform_progress_color="#0066B4",   # 波形进度颜色

        skip_length=2, # 跳过长度

        show_controls=False, # 不显示控制按钮

    ),

)

demo = gr.Interface(

    fn=reverse_audio, # 要调用的函数

    inputs=input_audio, # 输入组件

    outputs="audio" # 输出组件类型为音频

)

if __name__ == "__main__":

demo.launch()

效果展示：

可以看到用户录制音频的波形进度条在Submit后得到了反转。

4.Chatbot

描述：显示用户提交的消息和响应的聊天机器人，该组件可以模拟聊天界面，提供人机对话体验。

用法介绍：

为了让您更好的了解Gradio的这个组件，这里展示了一个简单的聊天机器人demo，用户发送信息后将会从预设的响应列表中随机选择一条作为机器人的回复。

示例代码如下：

import gradio as gr

import random

import time

with gr.Blocks() as demo:

    chatbot = gr.Chatbot() # 创建 Chatbot 组件

    msg = gr.Textbox() # 创建 Textbox 组件，用于用户输入

clear = gr.ClearButton([msg, chatbot]) # 创建 ClearButton 组件，用于清除输入和聊天记录

# 定义响应函数

    def respond(message, chat_history):

        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"]) # 从预设的回复中随机选择一条

        chat_history.append((message, bot_message)) # 将用户消息和机器人的回复添加到聊天历史中

        time.sleep(2)

        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot]) # 当用户提交消息时触发响应函数

if __name__ == "__main__":

demo.launch()