更多块（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()