Gradio 基础使用示例

已于 2024-06-11 09:54:40 修改
阅读量1.5k 收藏 26
点赞数 28
分类专栏： MachineLearning # Gradio 文章标签： Gradio mllib AI 可视化 web 跨平台
于 2024-05-10 18:24:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alionsss/article/details/138676566
版权

文章目录

Gradio 基础使用示例

简介

  • Gradio 是一个用于构建快速原型和部署机器学习应用程序的开源库。它的目标是使机器学习模型的创建和部署变得简单易用，无需深入了解 Web 开发或前端知识。
  • 以下是 Gradio 的一些关键特点和优势：
    1. 简单易用: Gradio 提供了简单直观的 API，使得用户能够快速创建交互式的机器学习界面，无需繁琐的代码编写。
    2. 多样化输入输出: Gradio 支持多种类型的输入和输出，包括图像、文本、音频等，同时还能够处理多个输入和输出。
    3. 即时预览: 在开发过程中，Gradio 提供了即时预览功能，让用户可以实时查看和测试他们的应用程序，以便进行调试和优化。
    4. 部署简单: Gradio 允许用户一键部署他们的应用程序，无需复杂的配置或部署流程，可以将应用程序轻松地分享给其他人使用。
    5. 可定制性: 尽管 Gradio 提供了许多预定义的组件和样式，但用户仍然可以通过自定义 CSS 和 JavaScript 来定制界面的外观和行为。
    6. 跨平台兼容性: Gradio 可以在多个平台上运行，包括本地环境、云端服务器以及基于 Docker 的容器中。
  • 总的来说，Gradio 提供了一个简单而强大的工具，使得任何人都能够轻松地构建和部署交互式的机器学习应用程序，从而促进了机器学习技术的普及和应用。
  • 当然，你也可以用 Gradio 来做一些简单功能的可视化，以便于日常使用，不是非要应用到AI方面。
  • 更多案例

安装

  • $ pip install gradio==4.29 -i "https://pypi.doubanio.com/simple/"
  • 当前安装的版本信息，输出如下
Successfully installed aiofiles-23.2.1 altair-5.3.0 attrs-23.2.0 contourpy-1.2.1 cycler-0.12.1 ffmpy-0.3.2 filelock-3.14.0 fonttools-4.51.0 fsspec-2024.3.1 gradio-4.29.0 gradio-client-0.16.1 httpcore-1.0.5 httpx-0.27.0 huggingface-hub-0.23.0 importlib-resources-6.4.0 jsonschema-4.22.0 jsonschema-specifications-2023.12.1 kiwisolver-1.4.5 markdown-it-py-3.0.0 matplotlib-3.8.4 mdurl-0.1.2 orjson-3.10.3 pillow-10.3.0 pydub-0.25.1 pygments-2.18.0 pyparsing-3.1.2 python-multipart-0.0.9 referencing-0.35.1 requests-2.31.0 rich-13.7.1 rpds-py-0.18.1 ruff-0.4.3 semantic-version-2.10.0 shellingham-1.5.4 tomlkit-0.12.0 typer-0.12.3 urllib3-2.2.1 websockets-11.0.3

示例-简单的输入、输出

import gradio as gr

print(gr.__version__)

def process_data(text, image, filter_type):
    print(type(image))
    # 数据处理逻辑
    processed_text = text.upper()
    if filter_type:
        image = image.convert(filter_type)
    return processed_text, image


iface = gr.Interface(
    fn=process_data,
    inputs=[
        gr.Textbox(label="输入文本"),
        gr.Image(label="上传图片", type="pil"),
        gr.Radio(label="图像转换模式", info="参考 https://blog.csdn.net/u012977885/article/details/105733554", choices=["1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "I", "F"], value="L"), 
    ],
    outputs=[gr.Text(label="处理后的文本"), gr.Image(label="处理后的图片")],
    title="文本、图像处理",
    description="输入文本、图像，以获得处理。",
)

iface.launch()

image.png

示例-启动配置

  • 一些常用的启动配置说明
# 设置启动端口
iface.launch(server_name='127.0.0.1', server_port=8080, show_error=True)
# 当把server_name设置为'0.0.0.0'时，局域网内的电脑皆可通过服务器IP访问该服务
iface.launch(server_name='0.0.0.0')

# 在互联网分享（Gradio的服务器会提供XXX.gradio.app地址）
iface.launch(share=True)

# 设置用户、密码
iface.launch(auth=("admin", "admin12345"))
# 更复杂的用户、密码校验
def my_auth(username, password):
    # 例如可以连接到外部系统校验登录
    return username == "admin" and password == "admin12345"
iface.launch(auth=my_auth, auth_message="login error")

# 启动服务时，自动打开默认浏览器
face.launch(inbrowser=True)

示例-聊天对话

  • 聊天接口
  • 通过使用yield，可以实现流式响应 Streaming outputs
import gradio as gr
import time

print(gr.__version__)

def slow_echo(message, history):
    for i in range(len(message)):
        time.sleep(0.05)
        yield "机器人回复: " + message[: i+1]

iface = gr.ChatInterface(slow_echo).queue()

iface.launch()

image.png

示例-多页面Tab切换

  • 最简单的
import gradio as gr
import time

def function1(input1):
    return f"处理结果: {input1}"

def function2(input2):
    return f"分析结果: {input2}"

iface1 = gr.Interface(function1, "text", "text")
iface2 = gr.Interface(function2, "text", "text")

tabbed_interface = gr.TabbedInterface([iface1, iface2], ["界面1", "界面2"])
tabbed_interface.launch()

image.png

  • 结合前面2个示例
import gradio as gr
import time

def process_data(text, image, filter_type):
    print(type(image))
    # 数据处理逻辑
    processed_text = text.upper()
    if filter_type:
        image = image.convert(filter_type)
    return processed_text, image

base_iface = gr.Interface(
    fn=process_data,
    inputs=[
        gr.Textbox(label="输入文本"),
        gr.Image(label="上传图片", type="pil"),
        gr.Radio(label="图像转换模式", info="参考 https://blog.csdn.net/u012977885/article/details/105733554", choices=["1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "I", "F"], value="L"), 
    ],
    outputs=[gr.Text(label="处理后的文本"), gr.Image(label="处理后的图片")],
    title="文本、图像处理",
    description="输入文本、图像，以获得处理。",
)

def slow_echo(message, history):
    for i in range(len(message)):
        time.sleep(0.05)
        yield "机器人回复: " + message[: i+1]

chat_iface = gr.ChatInterface(slow_echo).queue()

tabbed_interface = gr.TabbedInterface([base_iface, chat_iface], ["基础界面", "聊天界面"])
tabbed_interface.launch()

image.png

示例-使用Block自定义布局

import gradio as gr
import time



def process_data(text, image, filter_type):
    print(type(image))
    # 数据处理逻辑
    processed_text = text.upper()
    if filter_type:
        image = image.convert(filter_type)
    return processed_text, image

base_iface = gr.Interface(
    fn=process_data,
    inputs=[
        gr.Textbox(label="输入文本"),
        gr.Image(label="上传图片", type="pil"),
        gr.Radio(label="图像转换模式", info="参考 https://blog.csdn.net/u012977885/article/details/105733554", choices=["1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "I", "F"], value="L"), 
    ],
    outputs=[gr.Text(label="处理后的文本"), gr.Image(label="处理后的图片")],
    title="文本、图像处理",
    description="输入文本、图像，以获得处理。",
)



def slow_echo(message, history):
    for i in range(len(message)):
        time.sleep(0.05)
        yield "机器人回复: " + message[: i+1]

chat_iface = gr.ChatInterface(slow_echo).queue()



with gr.Blocks() as block1_iface:
    # 多个Row，均分纵轴
    with gr.Row():
        # 多个Column，则均分横纵
        with gr.Column():
            input_text = gr.Textbox(label="输入")
            submit_button = gr.Button("提交")
        with gr.Column():
            output_text = gr.Label(label="输出")

    submit_button.click(fn=lambda x: f"你输入了: {x}", inputs=input_text, outputs=output_text)



with gr.Blocks() as block2_iface:
    # Group 连接2个组件
    with gr.Group():
        input1 = gr.Textbox()
        input2 = gr.Slider()
    # Accordion 连接2个组件，并包含，并有标题提示
    with gr.Accordion("详细设置"):
        checkbox = gr.Checkbox(label="选项")
        dropdown = gr.Dropdown(choices=["选项1", "选项2"])

    submit_button = gr.Button("提交")
    output_label = gr.Label()

    submit_button.click(fn=lambda x, y, z: f"{x}, {y}, {z}", inputs=[input1, input2, checkbox], outputs=output_label)



with gr.Blocks() as block3_iface:
    with gr.Row():
        with gr.Column():
                input_text = gr.Textbox(label="输入文本")
                with gr.Group():
                    input_image = gr.Image(label="上传图片", type="pil")
                    input_mode = gr.Radio(label="图像转换模式", info="参考 https://blog.csdn.net/u012977885/article/details/105733554", choices=["1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "I", "F"], value="L")
                submit_button = gr.Button("提交")
        with gr.Column():
            output_text = gr.Text(label="处理后的文本")
            output_image = gr.Image(label="处理后的图片")

    submit_button.click(fn=process_data, inputs=[input_text, input_image, input_mode], outputs=[output_text, output_image])



tabbed_interface = gr.TabbedInterface(
    [base_iface, chat_iface, block1_iface, block2_iface, block3_iface], 
    ["基础界面", "聊天界面", "Block1界面", "Block2界面", "Block3界面"]
)
tabbed_interface.launch()

image.png

示例-Plot绘图

import gradio as gr
import pandas as pd

# pip install plotly
import plotly.express as px
import matplotlib.pyplot as plt


def explore_data(dataset, columns):
    df = pd.read_csv(dataset)
    # plotly库，自带功能更多
    # fig = px.scatter(df, x=columns[0], y=columns[1])

    # matplotlib库
    fig = plt.figure()
    plt.scatter(df[columns[0]], df[columns[1]])
    plt.xlabel(columns[0])
    plt.ylabel(columns[1])
    return fig


demo = gr.Interface(
    fn=explore_data,
    inputs=[
        gr.File(label="上传CSV文件"),
        gr.CheckboxGroup(choices=["num", "age", "tall"], label="选择列"),
    ],
    outputs=gr.Plot(),
)
demo.launch()

image.png

  • 数据可视化探索工具
import gradio as gr
import pandas as pd

# pip install seaborn
import seaborn as sns
import matplotlib.pyplot as plt


def plot_data(file, chart_type):
    df = pd.read_csv(file)
    if chart_type == "柱状图":
        plt.figure(figsize=(10, 6))
        sns.barplot(data=df)
    elif chart_type == "折线图":
        plt.figure(figsize=(10, 6))
        sns.lineplot(data=df)
    plt.tight_layout()
    return plt


iface = gr.Interface(
    plot_data, 
    inputs=[gr.File(), gr.Dropdown(["柱状图", "折线图"])], 
    outputs="plot"
)
iface.launch()

image.png

示例-状态管理

import gradio as gr

def update_output(input_text, state_obj):
    state_obj = state_obj or 0
    state_obj += 1
    return f"您输入了：{input_text}", f"状态值：{state_obj}", state_obj

# gr.State() 是会话级状态
# 全局状态，直接在代码里面定义一个state_obj变量即可
iface = gr.Interface(
    fn=update_output,
    inputs=[gr.Textbox(), gr.State()],
    outputs=[gr.Textbox(), gr.Label(), gr.State()]
)
iface.launch()

image.png

示例-提示、进度条

def start_process(name):
    gr.Info("Starting process")
    if name is None:
        gr.Warning("Name is empty")
    ...
    if success == False:
        raise gr.Error("Process failed")
  • 进度条
import gradio as gr
import time

def slowly_reverse(word, progress=gr.Progress()):
    progress(0, desc="Starting")
    time.sleep(1)
    progress(0.05)
    new_string = ""
    for letter in progress.tqdm(word, desc="Reversing"):
        time.sleep(0.25)
        new_string = letter + new_string
    return new_string

demo = gr.Interface(slowly_reverse, gr.Text(), gr.Text())

demo.launch()

image.png

  • 进度条（通过设置gr.Progress(track_tqdm=True)，自动追踪tqdm，显示进度）
import gradio as gr
import time
import tqdm

# gr.Progress(track_tqdm=True) 必须写在方法入参这里
def slowly_reverse2(word, progress=gr.Progress(track_tqdm=True)):
    time.sleep(1)
    new_string = ""
    tqdm_progress = tqdm.tqdm(word, desc="Reversing")
    for letter in tqdm_progress:
        time.sleep(0.25)
        new_string = letter + new_string
    return new_string

demo = gr.Interface(slowly_reverse2, gr.Text(), gr.Text())

demo.launch()

参考

蒋含竹
关注
专栏目录
Gradio从入门到精通（7）---基础组件与事件介绍
疯狂飙车的蜗牛的博客
07-16 1807
还记得我们第一节的示例代码吗？还记得我们上一节说的接口类吗？在接口类里面有输出，输出组件，Gradio内置类多种组件，当然你也可以自定义组件，本节开始，我们分别认识这些组件，在实际应用中，可以查阅文档进行使用该类有三个核心参数：Interfacefn：将用户界面 （UI） 包裹起来的函数inputs：用于输入的 Gradio 组件。组件数应与函数中的参数数匹配。outputs：用于输出的 Gradio 组件。组件数应与函数的返回值数匹配。
【Gradio】四种 Gradio 界面
cxyhjl的博客
06-12 1676
到目前为止，我们一直假设要构建 Gradio 演示，您需要输入和输出。但这并不总是机器学习演示的情况：例如，无条件图像生成模型不需要任何输入，但会产生图像作为输出。结果显示gradio.Interface类实际上可以处理 4 种不同类型的演示：标准演示：具有独立的输入和输出（例如图像分类器或语音识别模型）仅输出演示：不需要任何输入但产生输出（例如无条件图像生成模型）仅输入演示：这些演示不产生任...
Gradio入门到进阶全网最详细教程
最新发布
Hfengxiang的博客
07-29 1599
fn=greet,# 自定义输入框# 具体设置方法查看官方文档Interface.launch()方法返回三个值app，为 Gradio 演示提供支持的 FastAPI 应用程序local_url，本地地址share_url，公共地址，当share=True时生成fn=greet,要获得额外的样式功能，您可以设置行内css属性将任何样式给应用程序。如下所示。#修改blocks的背景颜色。
gradio入门示例
feinifi的博客
05-22 2066
随着chat-gpt等机器人对话框架的流行，让一个名为gradio的框架也火热起来，这个框架可以开启一个http服务，并且带输入输出界面，可以让对话类的人工智能项目快速运行。
Gradio 最快创建Web 界面部署到服务器并演示机器学习模型，本文提供教学案例以及部署方法，避免使用繁琐的django
weixin_44162814的博客
04-24 1367
Gradio 是通过友好的 Web 界面演示机器学习模型的最快方式，以便任何人都可以在任何地方使用它！最近学习hugging face里面的物体检测模型，发现一个方便快捷的工具！使用这个开发这种演示机器学习模型的web界面会比django会快上不少！
Gradio学习笔记--Gradio基本用法和简单案例
热门推荐
牵一只蜗牛去散步
05-04 1万+
其中输入和输出的组件都为 Image， 输入组件通过 gr.Image() 来设置其shape，即会对输入图片进行crop或resize的操作；上述案例定义了一个按钮 greet_btn，当点击按钮时会执行 greet 函数，函数的输入和输出均为 gr.Textbox() 类型，即字符串类型，其 label 分别注明 box 的名称；可通过 gr.Textbox() 来细化输入的组件 inputs，这里设置了输入框的行数为2，提示词为 Name Here...；2--Hello World案例。
使用gradio库实现Web应用，允许用户上传图像，并使用YOLOv8模型对图像进行目标检测。
像风一样自由的博客
06-05 2945
Gradio是一个用于构建和分享机器学习模型和数据科学应用的开源Python库。它简化了创建交互式Web界面的过程，让开发者可以快速搭建原型并与他人分享。
Gradio的重要函数以及一些代码示例学习（一）
素质云笔记
10-20 9612
gradio的学习笔记
gradio-master.zip
12-19
同时，Gradio还支持多人同时使用，这对于协作和演示来说非常有用。 此外，Gradio还有一个独特的优势——无需部署。只需在本地运行，就可以通过URL分享你的模型，让其他人通过浏览器访问和交互。这对于远程演示和...
快速搭建机器学习demo: gradio教程
orangerfun的博客
07-19 977
gradio是一个能够快速建立机器学习demo web应用的工具，仅需简单的几行代码就能构建机器学习模型的可视化交互demo，并分享给你的朋友使用。与gradio相同功能的竞品有Streamlit，相比Gradio，Streamlit相对复杂，完全熟练使用需要一定时间。
基于 Gradio Blocks 的 YOLOv5 通用目gradio-yolov5-det-blocks-master.zip
03-04
4. 应用启动后，用户可以在浏览器中看到一个简单的界面，可以上传图片或使用内置的示例图片，查看YOLOv5模型的实时目标检测结果。 这个项目为开发者和研究人员提供了一个直观的方式来演示和测试YOLOv5模型，有助于...
gradio：创建用于在3分钟内为您的机器学习模型建立原型的UI
02-04
注意：我们刚刚启动了Hosted，任何人都可以上传其界面进行永久托管。 ！ 欢迎来到Gradio 在模型周围快速创建可定制的UI组件。 通过拖放自己的图像，粘贴自己的文本，录制自己的声音等，并查看模型的输出，Gradio使您可以轻松地在浏览器中“玩转”模型。 Gradio可用于： 为客户/合作者/用户创建机器学习代码的演示 从用户那里获得有关模型性能的反馈 在开发过程中以交互方式调试模型 入门 您可以在找到此自述文件的交互式版本。 快速开始 要通过一个简单的示例使Gradio运行，请遵循以下三个步骤： 1.从pip安装Gradio。 pip install gradio 2.将以下
机器学习-19-基于交互式web应用框架streamlit和gradio转化数据和机器学习模型
qq_20466211的博客
07-19 2436
将数据和机器学习模型转变为功能性的Web应用程序
gradio构建侧边聊天记录栏
07-09
Gradio是一个开源工具，它主要用于创建交互式的机器学习模型演示和API接口。关于在Gradio中构建一个侧边的聊天记录栏，通常不是...请注意，这只是一个基础示例，实际应用中可能需要更复杂的布局管理和用户体验优化。
【Python】gradio如何给一个例子在网页中，gr.Examples
q742971636的博客
03-29 1083
【代码】【Python】gradio如何给一个例子在网页中，gr.Examples。
Gradio的web界面演示与交互机器学习模型，全局状态与会话状态《4》
深度学习领域优质创作者，CSDN博客专家
05-18 2087
会话状态在Gradio中的使用，以及对GPT2的一点介绍
Python之Gradio简单使用
专注于Python编程技术的分享与交流，致力于帮助开发者提升编程技能，解决实际问题，探索Python的无限可能。
06-07 1万+
Gradio是一个Python库，用于构建快速的Web界面，以便于使用机器学习模型进行实时演示和交互。使用Gradio，您可以轻松地将机器学习模型封装为交互式应用程序，无需编写任何前端代码。
【Python】使用Gradio作为机器学习web服务器
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
06-07 1166
在机器学习领域，模型的展示和验证是一个重要的环节。传统的模型展示方式往往需要复杂的Web开发知识，这对于许多机器学习研究者或数据科学家来说可能是一个挑战。然而，Gradio的出现为我们提供了一个简单而强大的解决方案，让我们能够轻松地将机器学习模型转化为交互式的Web应用。
gradio部署视频输入输出示例，gradio网页输出视频nan，输出视频无法播放解决方法
m0_52987303的博客
03-14 4826
在moviepy的方法中，codec参数用于指定视频编码格式。对于视频编码，moviepylibx264：这是一个流行的H.264编码器，通常提供很好的压缩率和质量平衡。libx265：这是H.265编码器，它提供了比H.264更高的压缩率，但编码时间可能会更长。mpeg4：这是一个较老的编码器，它的压缩率不如H.264，但可能在某些设备上更兼容。vp8：这是一个较早的VP8编码器，通常用于WebM视频。vp9：这是VP8的更新版本，提供了更好的压缩率和质量。除了视频编码，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值