Gradio(1) - 常用基础组件展示

工作中有用到Gradio来构建简单的工具Web,这里放个常用的基础组件demo。
更多的还是需要参照官方文档 https://www.gradio.app/docs

图例

在这里插入图片描述
在这里插入图片描述

代码

import random
import datetime
import gradio as gr

click_button_text = ""
global_show_text = []


def click_button(text):
    global click_button_text
    click_button_text = text

    return text


def change_select(text):
    return str(text)


def flush_show_click_button_text_value():
    def inner():
        global click_button_text
        return click_button_text

    return inner()


def auto_show_text():
    def inner():
        global global_show_text
        global_show_text.append(f'{datetime.datetime.now().strftime("%m-%d %H:%M:%S")} 随机生成: {random.random()}')
        show_text = "\n".join(global_show_text)
        return show_text

    return inner


def identity(x, state):
    state += 1
    return x, state, state


def message_error():
    raise gr.Error("发生错误!")


def message_info():
    raise gr.Info("信息提示")


def message_warning():
    raise gr.Warning("警告!")


with gr.Blocks() as tab_1:
    demo_label_1 = gr.Label("基本组件展示1")

    # 按钮
    with gr.Row() as row_1:
        button_1 = gr.Button("按钮1")
        button_2 = gr.Button("按钮2", size='lg')
        button_3 = gr.Button("按钮3", link='subPath')
        # every 是更新的频率,数值越低频率越快
        show_click_button_text_1 = gr.Label(label="最近一次点击-自动更新", value=flush_show_click_button_text_value, every=0.3)
        show_click_button_text_2 = gr.Label(label="最近一次点击-事件返回", value="")

    # 绑定函数
    button_1.click(click_button, inputs=[button_1], outputs=[show_click_button_text_2])
    button_2.click(click_button, inputs=[button_2], outputs=[show_click_button_text_2])
    button_3.click(click_button, inputs=[button_3], outputs=[show_click_button_text_2])

    # 选择
    with gr.Column() as column_1:
        with gr.Row() as col_sub_row1:
            select_1 = gr.Dropdown(
                ["cat", "dog", "bird"], label="下拉框", info="Will add more animals later!"
            )
            show_select_1 = gr.Label(label="下拉框选择", value="")

        with gr.Row() as col_sub_row2:
            select_2 = gr.CheckboxGroup(["China", "USA", "Japan", "Pakistan"], value=["China"], label="多选框", info="Where are they from?")
            show_select_2 = gr.Label(label="多选框选择", value="")

        with gr.Row() as col_sub_row3:
            select_3 = gr.Radio(["park", "zoo", "road"], label="单选框", info="Where did they go?")
            show_select_3 = gr.Label(label="单选框选择", value="")

        with gr.Row() as col_sub_row4:
            select_4 = gr.Checkbox(label="Morning", info="Did they do it in the morning?")
            show_select_4 = gr.Label(label="CheckBox选择", value="")

    select_1.change(change_select, inputs=[select_1], outputs=[show_select_1])
    select_2.change(change_select, inputs=[select_2], outputs=[show_select_2])
    select_3.change(change_select, inputs=[select_3], outputs=[show_select_3])
    select_4.change(change_select, inputs=[select_4], outputs=[show_select_4])


with gr.Blocks() as tab_2:
    demo_label_2 = gr.Label("基本组件展示2")
    with gr.Row() as tab_2_row_1:
        btn_err = gr.Button(value="错误提示")
        btn_info = gr.Button(value="信息提示")
        btn_warn = gr.Button(value="警告提示")

    btn_err.click(message_error)
    btn_info.click(message_info)
    btn_warn.click(message_warning)

    with gr.Row() as tab_2_row_2:
        fre_slider = gr.Slider(label='滑块', value=10, minimum=0, maximum=100, step=0.1)
        fre_state = gr.State(value=0)
        slider_number = gr.Number(label="滑块值")
        slider_number2 = gr.Number(label="滑块操作次数")
    fre_slider.release(identity, inputs=[fre_slider, fre_state], outputs=[slider_number, fre_state, slider_number2])

    with gr.Row() as tab_2_row_3:
        show_text1 = gr.Text(label="文本框", info="info", value="")
        show_text2 = gr.Textbox(label="自动渲染", info="auto show", value=auto_show_text(), every=1, max_lines=10)


if __name__ == "__main__":
    demo = gr.TabbedInterface([tab_1, tab_2], ["常用组件展示1", "常用组件展示2"])
    demo.launch(server_name="0.0.0.0", server_port=7860)




<think>嗯,用户现在想用Gradio给YOLOv8创建一个GUI。首先,我需要回忆一下Gradio的基本用法,它是一个快速构建Web界面的库,适合机器学习模型的展示。然后,YOLOv8的官方文档里应该有用例,可能需要结合两者。 用户之前的问题是关于加载本地模型,现在转向GUI,可能是在部署或展示模型。需要确定用户是否已经有一个训练好的YOLOv8模型,或者是否需要从头开始。不过问题里没有提到训练,所以可能用户已经有模型,需要做界面。 接下来,我需要考虑Gradio的输入和输出类型。YOLOv8处理图像,输入应该是图片,输出可能是带标注的图片,或者检测结果的数据,比如表格。Gradio支持图像、表格、文本等组件,所以需要设计合适的输入输出。 然后,YOLOv8的推理流程是怎样的?用户可能用YOLO类加载模型,然后调用predict方法。需要把这个流程封装到一个函数里,供Gradio调用。 另外,可能需要处理不同格式的输出,比如图像显示检测框,同时显示每个目标的类别和置信度。或者用户需要导出检测结果到文件?不过Gradio常用于实时展示,所以可能主要是显示图片和结果列表。 还要注意性能问题,如果用户上传大图片或视频,可能需要优化,但Gradio本身处理小规模的输入应该没问题。另外,是否需要实时摄像头输入?Gradio也支持,但用户的问题可能只是基础GUI。 可能需要示例代码,展示如何构建一个简单的界面。比如,使用gr.Interface,定义输入为图像,输出为图像和文本框,然后绑定预测函数。 还要考虑模型加载的位置,是在Gradio启动前加载,还是在函数内部。为了效率,应该在启动前加载模型,避免每次推理都重新加载。 另外,用户可能需要调整置信度阈值或其他参数,所以可以在GUI里添加滑块组件,让用户调整。这样需要修改函数,接受多个输入参数。 最后,部署方面,Gradio可以生成公共链接,或者本地运行,用户可能需要知道如何启动服务。比如,设置share=True生成临时链接,或者部署到服务器。 需要检查是否有常见的错误,比如模型路径不正确,Gradio版本问题,或者图像格式处理不当。YOLOv8返回的结果对象可能需要转换才能显示在Gradio中,比如将BGR转RGB,或者提取绘图后的图像。 总结步骤: 1. 导入必要的库:gradio、ultralytics的YOLO。 2. 加载YOLOv8模型。 3. 定义处理函数,接收输入图像,调用模型预测,处理结果。 4. 创建Gradio界面,设置输入和输出组件。 5. 启动Gradio应用。 可能还需要处理示例图片,让用户更方便测试。以及添加说明文字,解释如何使用界面。 需要确保代码示例正确,特别是处理图像的部分,比如使用PIL或numpy数组。YOLOv8的predict方法返回的Results对象有plot方法,可以直接生成带标注的图像,这可能很方便。 最后,测试一下示例代码是否可行,确保没有语法错误,并且逻辑正确。比如,函数返回的图像和检测结果是否匹配。</think>--- ### 一、核心实现思路 通过Gradio快速搭建YOLOv8的交互式Web界面,核心流程为:**加载模型 → 定义预测函数 → 构建UI组件 → 启动服务**。以下是具体实现方案: --- ### 二、基础版实现代码 ```python from ultralytics import YOLO import gradio as gr import cv2 # 加载预训练模型 model = YOLO("yolov8n.pt") # 可替换为本地模型路径 def predict_image(img): """图像预测处理函数""" # 执行推理 results = model.predict(img) # 提取带标注的图像(OpenCV BGR转RGB) plotted = results[0].plot()[:, :, ::-1] # 提取检测结果数据 detections = [] for box in results[0].boxes: class_id = int(box.cls) conf = float(box.conf) label = f"{model.names[class_id]} {conf:.2f}" detections.append(label) return plotted, "\n".join(detections) # 创建Gradio界面 interface = gr.Interface( fn=predict_image, inputs=gr.Image(label="输入图像"), outputs=[ gr.Image(label="检测结果"), gr.Textbox(label="检测明细") ], examples=["bus.jpg", "zidane.jpg"], # 示例图片路径 title="YOLOv8目标检测演示", description="上传图片查看YOLOv8的实时检测效果" ) # 启动服务(本地访问:http://localhost:7860) interface.launch(share=True) # share=True生成临时公网链接 ``` --- ### 三、进阶功能扩展 #### 1. 添加参数控制组件 ```python with gr.Blocks() as advanced_interface: gr.Markdown("## YOLOv8高级控制面板") with gr.Row(): with gr.Column(): img_input = gr.Image(label="输入图像", type="filepath") conf_slider = gr.Slider(0, 1, 0.25, label="置信度阈值") iou_slider = gr.Slider(0, 1, 0.7, label="IoU阈值") btn = gr.Button("开始检测") with gr.Column(): img_output = gr.Image(label="检测结果") text_output = gr.Textbox(label="检测明细") btn.click( fn=lambda img, conf, iou: predict_image(img, conf, iou), inputs=[img_input, conf_slider, iou_slider], outputs=[img_output, text_output] ) advanced_interface.launch() ``` #### 2. 视频流处理支持 ```python def predict_video(video_path): cap = cv2.VideoCapture(video_path) frames = [] while cap.isOpened(): ret, frame = cap.read() if not ret: break results = model.predict(frame) frames.append(results[0].plot()[:, :, ::-1]) return frames video_interface = gr.Interface( fn=predict_video, inputs=gr.Video(label="输入视频"), outputs=gr.Gallery(label="逐帧检测结果"), title="YOLOv8视频检测" ) ``` --- ### 四、关键参数说明表 | 组件类型 | 功能描述 | 常用参数 | |---------|---------|---------| | `gr.Image` | 图像输入/输出 | `type`(`numpy`/`pil`/`filepath`), `shape`(H,W) | | `gr.Slider` | 数值调节 | `minimum`, `maximum`, `step` | | `gr.Dropdown` | 多选控制 | `choices`(选项列表), `multiselect` | | `gr.Gallery` | 多图展示 | `columns`(列数), `preview`(是否预览) | --- ### 五、性能优化技巧 1. **启用GPU加速**: ```python import torch model.to("cuda" if torch.cuda.is_available() else "cpu") ``` 2. **批处理加速**: ```python results = model.predict(img, batch=4) # 批量处理时使用 ``` 3. **缓存机制**: ```python _model = gr.Blocks.load(name="models/yolov8n") # 模型缓存 ``` --- ### 六、部署方案对比 | 方式 | 优点 | 缺点 | 适用场景 | |------|------|------|---------| | 本地启动 | 零延迟 | 无公网访问 | 本地调试 | | `share=True` | 生成临时公网链接 | 72小时有效期 | 快速演示 | | Hugging Face Spaces | 永久托管 | 资源受限 | 小型项目 | | 自建服务器 | 完全控制 | 需运维成本 | 生产环境 | --- ### 七、完整项目结构建议 ``` yolo-gradio/ ├── models/ │ └── yolov8n.pt ├── app.py # 主程序 ├── requirements.txt # 依赖清单 ├── examples/ # 示例文件 │ ├── bus.jpg │ └── zidane.jpg └── Dockerfile # 容器化部署 ``` --- ### 八、常见问题解决 #### 1. 图像颜色异常 ```python # 转换颜色空间(BGR→RGB) plotted = cv2.cvtColor(results[0].plot(), cv2.COLOR_BGR2RGB) ``` #### 2. 视频处理卡顿 ```python # 降低处理分辨率 results = model.predict(frame, imgsz=640) # 指定输入尺寸 ``` #### 3. 依赖冲突 ```bash # 推荐使用虚拟环境 conda create -n yolo_env python=3.8 conda activate yolo_env pip install ultralytics gradio ``` --- **验证测试**:运行后界面应包含以下元素: - 图像上传区域 - 实时检测结果显示 - 参数调节面板(进阶版) - 示例图片快速测试按钮
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

川涂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值