---

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️
👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）👈

---

博主原文链接：https://www.yourmetaverse.cn/nlp/329/

（封面图由文心一格生成）

展示和标注图像：探索Gradio AnnotatedImage模块的功能

在构建交互式应用程序时，图像展示和标注是非常常见的需求。Gradio提供了AnnotatedImage模块，使图像的展示和标注变得简单易用。本文将介绍AnnotatedImage模块的功能和用法。

AnnotatedImage模块可以在一张基础图像上展示带有颜色的子区域，这些子区域可以是矩形（如目标检测）或掩码（如图像分割）。它接受一个包含基础图像和子区域信息的元组作为输入，并将展示带有标注的图像作为输出。

下面是一个示例代码，展示了如何使用AnnotatedImage模块：

import gradio as gr
import numpy as np
import random

with gr.Blocks() as demo:
    section_labels = [
        "apple",
        "banana",
        "carrot",
        "donut",
        "eggplant",
        "fish",
        "grapes",
        "hamburger",
        "ice cream",
        "juice",
    ]

    with gr.Row():
        num_boxes = gr.Slider(0, 5, 2, step=1, label="Number of boxes")
        num_segments = gr.Slider(0, 5, 1, step=1, label="Number of segments")

    with gr.Row():
        img_input = gr.Image()
        img_output = gr.AnnotatedImage().style(
            color_map={"banana": "#a89a00", "carrot": "#ffae00"}
        )

    section_btn = gr.Button("Identify Sections")
    selected_section = gr.Textbox(label="Selected Section")

    def section(img, num_boxes, num_segments):
        sections = []
        for a in range(num_boxes):
            x = random.randint(0, img.shape[1])
            y = random.randint(0, img.shape[0])
            w = random.randint(0, img.shape[1] - x)
            h = random.randint(0, img.shape[0] - y)
            sections.append(((x, y, x + w, y + h), section_labels[a]))
        for b in range(num_segments):
            x = random.randint(0, img.shape[1])
            y = random.randint(0, img.shape[0])
            r = random.randint(0, min(x, y, img.shape[1] - x, img.shape[0] - y))
            mask = np.zeros(img.shape[:2])
            for i in range(img.shape[0]):
                for j in range(img.shape[1]):
                    dist_square = (i - y) ** 2 + (j - x) ** 2
                    if dist_square < r**2:
                        mask[i, j] = round((r**2 - dist_square) / r**2 * 4) / 4
            sections.append((mask, section_labels[b + num_boxes]))
        return (img, sections)

    section_btn.click(section, [img_input, num_boxes, num_segments], img_output)

    def select_section(evt: gr.SelectData):
        return section_labels[evt.index]

    img_output.select(select_section, None, selected_section)


demo.launch()

在这个示例中，我们使用了滑块组件来控制子区域的数量，通过点击按钮触发图像标注操作，并显示选中的子区域标签。

AnnotatedImage模块的参数包括value、show_legend、height、width、color_map、label、every、show_label、container、scale、min_width、visible、elem_id和elem_classes。通过设置这些参数，您可以自定义AnnotatedImage模块的外观和行为。

参数总结

下面是关于AnnotatedImage模块和其select方法的参数的表格：

参数名	数据类型	默认值	描述
value	tuple[np.ndarray | PIL.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None	None	包含基础图像和子区域的元组。
show_legend	bool	True	是否显示子区域的图例。
height	int | None	None	图像显示的高度。
width	int | None	None	图像显示的宽度。
color_map	dict[str, str] | None	None	将标签映射到颜色的字典，颜色必须以十六进制代码形式指定。
label	str | None	None	组件在界面中的名称。
every	float | None	None	如果value是一个可调用对象，将在每个连接打开的时间内以指定的时间间隔运行该函数。
show_label	bool	True	是否显示标签。
container	bool	True	如果为True，将该组件放在一个容器中，提供额外的边框填充。
scale	int | None	None	相对于相邻组件在一行中的宽度比例。
min_width	int	160	最小像素宽度，如果屏幕空间不足以满足此值，将换行。
visible	bool	True	如果为False，组件将被隐藏。
elem_id	str | None	None	可选的字符串，作为此组件在HTML DOM中的id分配。
elem_classes	list[str] | str | None	None	可选的字符串列表，作为此组件在HTML DOM中的类分配。

select方法的参数：

参数名	数据类型	默认值	描述
fn	Callable | None	required	要封装界面的函数。
inputs	Component | list[Component] | set[Component] | None	None	用作输入的Gradio组件列表。
outputs	Component | list[Component] | None	None	用作输出的Gradio组件列表。
api_name	str | None	None	定义此参数将在API文档中显示端点。
status_tracker	None	None	用于跟踪状态的对象。
scroll_to_output	bool	False	如果为True，将在完成时滚动到输出组件。
show_progress	Literal[‘full’] | Literal[‘minimal’] | Literal[‘hidden’]	“full”	如果为True，在等待时显示进度动画。
queue	bool | None	None	如果为True，将请求放入队列中，如果启用了队列。如果为False，即使启用了队列，也不会将此事件放入队列。如果为None，将使用gradio应用程序的队列设置。
batch	bool	False	如果为True，则函数应处理一批输入，即接受每个参数的输入值列表。
max_batch_size	int	4	如果从队列中调用此函数，将批处理在一起的最大输入数（仅在batch=True时有效）。
preprocess	bool	True	如果为False，不会在运行’fn’之前运行组件数据的预处理。
postprocess	bool	True	如果为False，不会在将’fn’的输出返回给浏览器之前运行组件数据的后处理。
cancels	dict[str, Any] | list[dict[str, Any]] | None	None	要在触发此侦听器时取消的其他事件的列表。
every	float | None	None	在客户端连接打开的时间内，以指定的时间间隔运行此事件。以秒为单位解释。

总结

AnnotatedImage模块是Gradio提供的一个功能强大的组件，可以方便地展示和标注图像。通过使用AnnotatedImage模块，您可以快速构建交互式应用程序，展示带有标注的图像，并实现自定义的交互行为。

---

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️
👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）👈

---