更多 Blocks 功能

示例

就像使用 gr.Interface 一样，当您使用 gr.Blocks 时，也可以为您的函数添加示例。在这种情况下，实例化一个 gr.Examples，类似于实例化任何其他组件的方式。 gr.Examples 的构造函数接受两个必需的参数

examples：示例的嵌套列表，其中外部列表由示例组成，每个内部列表由与每个输入组件对应的输入组成
inputs：单击示例时应填充的组件或组件列表

您还可以设置 cache_examples=True 或 cache_examples='lazy'，类似于 gr.Interface 中的缓存 API，在这种情况下，必须提供两个额外的参数

outputs：与示例输出相对应的组件或组件列表
fn：用于生成与示例对应的输出的函数

这是一个示例，展示了如何在 gr.Blocks 应用中使用 gr.Examples

import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        return num1 / num2

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            num_1 = gr.Number(value=4)
            operation = gr.Radio(["add", "subtract", "multiply", "divide"])
            num_2 = gr.Number(value=0)
            submit_btn = gr.Button(value="Calculate")
        with gr.Column():
            result = gr.Number()

    submit_btn.click(
        calculator, inputs=[num_1, operation, num_2], outputs=[result], api_name=False
    )
    examples = gr.Examples(
        examples=[
            [5, "add", 3],
            [4, "divide", 2],
            [-4, "multiply", 2.5],
            [0, "subtract", 1.2],
        ],
        inputs=[num_1, operation, num_2],
    )

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

注意：当您单击示例时，不仅输入组件的值会更新为示例值，而且组件的配置也会恢复为您构建组件时使用的属性。这确保了即使组件的配置已更改，示例也与组件兼容。

持续运行事件

您可以使用 gr.Timer() 对象在固定的时间表上运行事件。这将在计时器的 tick 事件触发时运行事件。请参阅下面的代码

with gr.Blocks as demo:
    timer = gr.Timer(5)
    textbox = gr.Textbox()
    textbox2 = gr.Textbox()
    timer.tick(set_textbox_fn, textbox, textbox2)

如果组件的值是一个函数，也可以直接与组件的 every= 参数一起使用

with gr.Blocks as demo:
    timer = gr.Timer(5)
    textbox = gr.Textbox()
    textbox2 = gr.Textbox(set_textbox_fn, inputs=[textbox], every=timer)

这是一个演示示例，它打印当前时间戳，并定期打印随机数！

import gradio as gr
import random
import time

with gr.Blocks() as demo:
  timer = gr.Timer(1)
  timestamp = gr.Number(label="Time")
  timer.tick(lambda: round(time.time()), outputs=timestamp)

  number = gr.Number(lambda: random.randint(1, 10), every=timer, label="Random Number")
  with gr.Row():
    gr.Button("Start").click(lambda: gr.Timer(active=True), None, timer)
    gr.Button("Stop").click(lambda: gr.Timer(active=False), None, timer)
    gr.Button("Go Fast").click(lambda: 0.2, None, timer)

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

收集事件数据

您可以通过将相关的事件数据类作为类型提示添加到事件监听器函数中的参数来收集有关事件的特定数据。

例如，.select() 的事件数据可以通过 gradio.SelectData 参数进行类型提示。当用户选择触发组件的某些部分时，会触发此事件，并且事件数据包括有关用户具体选择内容的信息。例如，如果用户在 Textbox 中选择了一个特定的单词，在 Image 中选择了一个特定的像素，在 Gallery 中选择了一个特定的图像，或者在 DataFrame 中选择了一个特定的单元格，则事件数据参数将包含有关特定选择的信息。

SelectData 包括选定的值以及选择发生的索引。一个简单的示例，展示了在 Textbox 中选择了什么文本。

import gradio as gr

with gr.Blocks() as demo:
    textbox = gr.Textbox("The quick brown fox jumped.")
    selection = gr.Textbox()
    
    def get_selection(select_evt: gr.SelectData):
        return select_evt.value

    textbox.select(get_selection, None, selection)

在下面的双人井字棋演示中，用户可以选择 DataFrame 中的一个单元格来进行移动。事件数据参数包含有关所选特定单元格的信息。我们可以首先检查单元格是否为空，然后使用用户的移动更新单元格。

import gradio as gr

with gr.Blocks() as demo:
    turn = gr.Textbox("X", interactive=False, label="Turn")
    board = gr.Dataframe(value=[["", "", ""]] * 3, interactive=False, type="array")

    def place(board: list[list[int]], turn, evt: gr.SelectData):  
        if evt.value:
            return board, turn
        board[evt.index[0]][evt.index[1]] = turn
        turn = "O" if turn == "X" else "X"
        return board, turn

    board.select(place, [board, turn], [board, turn], show_progress="hidden")

demo.launch()