Gradio 智能体与 MCP 黑客马拉松

获奖者
Gradio logo
  1. 组件
  2. AnnotatedImage

Gradio 新手？从这里开始： 入门指南

查看 发布历史

←

Introduction

Audio

→

AnnotatedImage

gradio.AnnotatedImage(···)
import gradio as gr import numpy as np import requests from io import BytesIO from PIL import Image base_image = "https://gradio-docs-json.s3.us-west-2.amazonaws.com/base.png" building_image = requests.get("https://gradio-docs-json.s3.us-west-2.amazonaws.com/buildings.png") building_image = np.asarray(Image.open(BytesIO(building_image.content)))[:, :, -1] > 0 with gr.Blocks() as demo: gr.AnnotatedImage( value=(base_image, [(building_image, "buildings")]), height=500, ) demo.launch()requests pillow

描述

创建一个组件，用于显示基础图像及其上方的彩色标注。标注可以是矩形（例如对象检测）或蒙版（例如图像分割）。由于此组件不接受用户输入，因此很少用作输入组件。

行为

作为输入组件: 将其值作为一个 元组 传递，该元组由基础图像的 str 文件路径和标注 list 组成。每个标注本身是一个 元组，包含一个蒙版（作为图像的 str 文件路径）和一个 str 标签。

您的函数应接受以下类型之一
def predict(
	value: tuple[str, list[tuple[str, str]]] | None
)
	...

作为输出组件: 期望一个基础图像和标注列表的元组：一个 tuple[Image, list[Annotation]]。 Image 本身可以是 str 文件路径、numpy.ndarray 或 PIL.Image。 每个 Annotation 是一个 tuple[Mask, str]。 Mask 可以是表示边界框坐标 (x1, y1, x2, y2) 的 4 个 int 的 元组，或者是与图像形状相同的 numpy.ndarray 形式的 0-1 置信度蒙版，而 Annotation 元组的第二个元素是 str 标签。

您的函数应返回以下类型之一
def predict(···) -> tuple[np.ndarray | PIL.Image.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None
	...	
	return value

初始化

参数
🔗 
value: tuple[np.ndarray | PIL.Image.Image | str, list[tuple[np.ndarray | tuple[int, int, int, int], str]]] | None
默认值 = None

基础图像和 (标注，标签) 对列表的元组。

🔗 
format: str
默认值 = "webp"

将图像返回前端之前用于保存图像的格式，例如“jpeg”或“png”。此参数仅在基础图像以 numpy 数组或 PIL 图像形式从预测函数返回时生效。该格式应受 PIL 库支持。

🔗 
show_legend: bool
默认值 = True

如果为 True，将显示标注图例。

🔗 
height: int | str | None
默认值 = None

组件的高度，如果传递数字则以像素为单位，如果传递字符串则以 CSS 单位为单位。这不影响预处理的图像文件或 numpy 数组，但会影响显示的图像。

🔗 
width: int | str | None
默认值 = None

组件的宽度，如果传递数字则以像素为单位，如果传递字符串则以 CSS 单位为单位。这不影响预处理的图像文件或 numpy 数组，但会影响显示的图像。

🔗 
color_map: dict[str, str] | None
默认值 = None

将标签映射到颜色的字典。颜色必须指定为十六进制代码。

🔗 
label: str | I18nData | None
默认值 = None

此组件的标签。出现在组件上方，如果此组件有示例表格，也用作标题。如果为 None 并在 `gr.Interface` 中使用，则标签将是此组件所分配参数的名称。

🔗 
every: Timer | float | None
默认值 = None

如果 `value` 是一个函数（否则无效），则持续调用 `value` 以重新计算它。可以提供一个 Timer，其滴答声会重置 `value`，或者提供一个浮点数作为重置 Timer 的常规间隔。

🔗 
inputs: Component | list[Component] | set[Component] | None
默认值 = None

如果 `value` 是一个函数（否则无效），则用作计算 `value` 输入的组件。每当输入更改时，`value` 都会重新计算。

🔗 
show_label: bool | None
默认值 = None

如果为 True，将显示标签。

🔗 
container: bool
默认值 = True

如果为 True，会将组件放置在一个容器中 - 在边框周围提供一些额外填充。

🔗 
scale: int | None
默认值 = None

与同一行中相邻组件的相对宽度。例如，如果组件 A 的 scale=2，组件 B 的 scale=1，则 A 的宽度将是 B 的两倍。应为整数。

🔗 
min_width: int
默认值 = 160

最小像素宽度，如果屏幕空间不足以满足此值，则会换行。如果某个 scale 值导致此组件宽度小于 min_width，则将优先遵守 min_width 参数。

🔗 
visible: bool
默认值 = True

如果为 False，组件将被隐藏。

🔗 
elem_id: str | None
默认值 = None

一个可选字符串，用作此组件在 HTML DOM 中的 id。可用于指定 CSS 样式。

🔗 
elem_classes: list[str] | str | None
默认值 = None

一个可选字符串列表，用作此组件在 HTML DOM 中的类。可用于指定 CSS 样式。

🔗 
render: bool
默认值 = True

如果为 False，组件将不会在 Blocks 上下文中渲染。如果目的是现在分配事件监听器但稍后渲染组件，则应使用此选项。

🔗 
key: int | str | tuple[int | str, ...] | None
默认值 = None

在 gr.render 中，在重新渲染时具有相同 key 的组件被视为同一组件，而不是新组件。'preserved_by_key' 中设置的属性在重新渲染时不会重置。

🔗 
preserved_by_key: list[str] | str | None
默认值 = "value"

此组件构造函数中的参数列表。在 gr.render() 函数内部，如果组件使用相同的键重新渲染，则这些（且仅这些）参数将被保留在 UI 中（如果它们已被用户或事件监听器更改），而不是根据构造函数中提供的值重新渲染。

🔗 
show_fullscreen_button: bool
默认值 = True

如果为 True，将显示一个按钮，允许图像以全屏模式查看。

快捷方式

类 界面字符串快捷方式 初始化

gradio.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(
            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)

if __name__ == "__main__":
    demo.launch()

事件监听器

描述

事件监听器允许您响应用户与 Gradio Blocks 应用程序中定义的 UI 组件的交互。当用户与某个元素交互时，例如更改滑块值或上传图像，将调用一个函数。

支持的事件监听器

AnnotatedImage 组件支持以下事件监听器。每个事件监听器接受相同的参数，这些参数在下面的 事件参数 表中列出。

监听器 描述

AnnotatedImage.select(fn, ···)

当用户选择或取消选择 AnnotatedImage 时的事件监听器。使用事件数据 gradio.SelectData 携带 value 指代 AnnotatedImage 的标签，以及 selected 指代 AnnotatedImage 的状态。有关如何使用此事件数据，请参阅 EventData 文档。

事件参数

参数
🔗 
fn: Callable | None | Literal['decorator']
默认值 = "decorator"

此事件触发时要调用的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应返回单个值或值的元组，元组中的每个元素对应一个输出组件。

🔗 
inputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None
默认值 = None

用作输入的 gradio.components 列表。如果函数不接受任何输入，则此项应为空列表。

🔗 
outputs: Component | BlockContext | list[Component | BlockContext] | Set[Component | BlockContext] | None
默认值 = None

用作输出的 gradio.components 列表。如果函数不返回任何输出，则此项应为空列表。

🔗 
api_name: str | None | Literal[False]
默认值 = None

定义端点在 API 文档中如何显示。可以是字符串、None 或 False。如果设置为字符串，则端点将以给定名称在 API 文档中公开。如果为 None（默认值），则函数名称将用作 API 端点。如果为 False，则端点将不会在 API 文档中公开，并且下游应用程序（包括那些 `gr.load` 此应用程序的）将无法使用此事件。

🔗 
scroll_to_output: bool
默认值 = False

如果为 True，将在完成后滚动到输出组件

🔗 
show_progress: Literal['full', 'minimal', 'hidden']
默认值 = "full"

事件运行时如何显示进度动画：“full”显示一个覆盖输出组件区域和右上角运行时显示的旋转器，“minimal”仅显示运行时显示，“hidden”则完全不显示进度动画。

🔗 
show_progress_on: Component | list[Component] | None
默认值 = None

显示进度动画的组件或组件列表。如果为 None，则会在所有输出组件上显示进度动画。

🔗 
queue: bool
默认值 = True

如果为 True，并且队列已启用，则会将请求放入队列。如果为 False，则即使队列已启用，也不会将此事件放入队列。如果为 None，将使用 Gradio 应用程序的队列设置。

🔗 
batch: bool
默认值 = False

如果为 True，则函数应处理一批输入，这意味着它应该接受每个参数的输入值列表。这些列表的长度应相等（并且最长可达 `max_batch_size`）。然后，函数 *必须* 返回一个列表元组（即使只有一个输出组件），元组中的每个列表对应一个输出组件。

🔗 
max_batch_size: int
默认值 = 4

如果从队列调用，则最大批量输入数量（仅当 batch=True 时相关）。

🔗 
preprocess: bool
默认值 = True

如果为 False，则在运行 'fn' 之前不会对组件数据进行预处理（例如，如果此方法与 `Image` 组件一起调用，则将其保留为 base64 字符串）。

🔗 
postprocess: bool
默认值 = True

如果为 False，则在将 'fn' 输出返回到浏览器之前不会对组件数据进行后处理。

🔗 
cancels: dict[str, Any] | list[dict[str, Any]] | None
默认值 = None

此监听器触发时要取消的其他事件列表。例如，设置 cancels=[click_event] 将取消 click_event，其中 click_event 是另一个组件的 .click 方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但当前正在运行的函数将被允许完成。

🔗 
trigger_mode: Literal['once', 'multiple', 'always_last'] | None
默认值 = None

如果为“once”（除 `.change()` 之外所有事件的默认值），则在事件待处理期间不允许任何提交。如果设置为“multiple”，则在待处理期间允许无限次提交，而“always_last”（`.change()` 和 `.key_up()` 事件的默认值）则允许在待处理事件完成后进行第二次提交。

🔗 
js: str | Literal[True] | None
默认值 = None

可选的前端 js 方法，在运行 'fn' 之前执行。js 方法的输入参数是 'inputs' 和 'outputs' 的值，返回值应是输出组件的值列表。

🔗 
concurrency_limit: int | None | Literal['default']
默认值 = "default"

如果设置，这是此事件可以同时运行的最大数量。可以设置为 None 表示没有并发限制（此事件可以同时运行任意数量）。设置为“default”以使用默认并发限制（由 `Blocks.queue()` 中的 `default_concurrency_limit` 参数定义，其本身默认值为 1）。

🔗 
concurrency_id: str | None
默认值 = None

如果设置，这是并发组的 ID。具有相同 concurrency_id 的事件将受限于最低设置的 concurrency_limit。

🔗 
show_api: bool
默认值 = True

是否在 Gradio 应用程序的“查看 API”页面或 Gradio 客户端的“.view_api()”方法中显示此事件。与将 api_name 设置为 False 不同，将 show_api 设置为 False 仍将允许下游应用程序和客户端使用此事件。如果 fn 为 None，则 show_api 将自动设置为 False。

🔗 
time_limit: int | None
默认值 = None
🔗 
stream_every: float
默认值 = 0.5
🔗 
like_user_message: bool
默认值 = False
🔗 
key: int | str | tuple[int | str, ...] | None
默认值 = None

此事件监听器在 @gr.render() 中使用的唯一键。如果设置，当键相同时，此值将标识跨重新渲染的事件为相同事件。

←

Introduction

Audio

→