Gradio新版本中绘制并调整YOLO检测边界框的技术咨询

一、在输出图片上绘制YOLO边界框 #

由于gr.outputs.BoundingBox和gr.outputs.ImageBoundingBox已被废弃，新版Gradio推荐两种实用实现方式：

1. 手动绘制后返回图片 #

直接用PIL或OpenCV等图像处理库，将YOLO生成的边界框绘制到原图上，再通过gr.Image组件输出。

示例代码（基于PIL）：

import gradio as gr
from PIL import Image, ImageDraw, ImageFont

def draw_yolo_boxes(image, yolo_results):
    # yolo_results格式示例：[(xmin, ymin, xmax, ymax, 类别名, 置信度), ...]
    draw = ImageDraw.Draw(image)
    # 加载字体（若无arial.ttf则用默认字体）
    try:
        font = ImageFont.truetype("arial.ttf", 20)
    except:
        font = ImageFont.load_default()
    
    for box in yolo_results:
        xmin, ymin, xmax, ymax, cls, conf = box
        # 绘制红色边界框
        draw.rectangle([xmin, ymin, xmax, ymax], outline="red", width=3)
        # 绘制带背景的标签文本
        label = f"{cls}: {conf:.2f}"
        text_area = draw.textbbox((xmin, ymin-25), label, font=font)
        draw.rectangle(text_area, fill="red")
        draw.text((xmin, ymin-25), label, fill="white", font=font)
    return image

# 模拟YOLO检测结果（替换为你的真实检测数据）
sample_yolo_results = [
    (50, 50, 200, 200, "cat", 0.92),
    (250, 300, 400, 450, "dog", 0.88)
]

with gr.Blocks() as demo:
    gr.Markdown("### YOLO边界框渲染")
    input_img = gr.Image(type="pil", label="原始图片")
    output_img = gr.Image(label="带边界框的图片")
    render_btn = gr.Button("渲染边界框")
    render_btn.click(fn=draw_yolo_boxes, inputs=[input_img, gr.State(sample_yolo_results)], outputs=output_img)

demo.launch()

2. 使用gr.AnnotatedImage组件 #

该组件专为展示带标注的图片设计，无需手动绘制，只需传入图片和标注列表即可自动渲染边界框。

示例代码：

import gradio as gr

def format_yolo_annotations(image, yolo_results):
    # 将YOLO结果转换为AnnotatedImage要求的格式
    annotations = []
    for box in yolo_results:
        xmin, ymin, xmax, ymax, cls, conf = box
        annotations.append({
            "bbox": [xmin, ymin, xmax, ymax],
            "label": f"{cls}: {conf:.2f}"
        })
    return (image, annotations)

sample_yolo_results = [
    (50, 50, 200, 200, "cat", 0.92),
    (250, 300, 400, 450, "dog", 0.88)
]

with gr.Blocks() as demo:
    gr.Markdown("### YOLO边界框渲染（AnnotatedImage）")
    input_img = gr.Image(type="pil", label="原始图片")
    output_anno = gr.AnnotatedImage(label="带边界框的图片")
    render_btn = gr.Button("渲染边界框")
    render_btn.click(fn=format_yolo_annotations, inputs=[input_img, gr.State(sample_yolo_results)], outputs=output_anno)

demo.launch()

二、让用户调整边界框 #

新版Gradio的gr.Image组件支持edit_mode="bounding_box"参数，允许用户在图片上添加、拖动、调整边界框大小或删除框。可以将YOLO生成的初始框作为默认标注传入，用户调整后可获取新的框坐标。

示例代码：

import gradio as gr

def get_initial_boxes(image):
    # 返回YOLO生成的初始边界框，支持带标签格式
    return [
        {"bbox": [50, 50, 200, 200], "label": "cat"},
        {"bbox": [250, 300, 400, 450], "label": "dog"}
    ]

def save_adjusted_boxes(image, boxes):
    # 处理用户调整后的边界框，这里仅打印示例
    print("用户调整后的边界框：", boxes)
    return "已保存调整后的边界框"

with gr.Blocks() as demo:
    gr.Markdown("### 调整YOLO边界框")
    input_img = gr.Image(type="pil", label="图片", edit_mode="bounding_box")
    # 加载初始边界框
    input_img.load(fn=get_initial_boxes, outputs=input_img)
    save_btn = gr.Button("保存调整后的框")
    save_btn.click(fn=save_adjusted_boxes, inputs=[input_img, input_img.annotated_bboxes], outputs=gr.Textbox(label="操作提示"))

demo.launch()

关键说明： #

• input_img.annotated_bboxes用于获取用户调整后的边界框数据，格式为[{"bbox": [xmin, ymin, xmax, ymax], "label": "类别名"}, ...]。
• 若不需要标签，可直接返回[[xmin, ymin, xmax, ymax], ...]格式的初始框。

内容的提问来源于stack exchange，提问作者Tejas M A